import React from 'react';
import {GrowthBehavior, createContainer} from '@workday/canvas-kit-react/common';
import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
import {FormField} from './FormField';
import {FormFieldGroupInput} from './FormFieldGroupInput';
import {FormFieldGroupLabel} from './FormFieldGroupLabel';
import {FormFieldGroupList} from './FormFieldGroupList';
import {formFieldStencil} from './formFieldStencil';
import {useFormFieldModel} from './hooks';
//TODO: Remove `horizontal` option in v13 and the console warn message.
export interface FormFieldGroupProps extends FlexProps, GrowthBehavior {
/**
* The direction the child elements should stack. In v13, `horizontal` will be removed. Please use `horizontalStart` or `horizontalEnd` for horizontal alignment.
* @default vertical
*/
orientation?: 'vertical' | 'horizontalStart' | 'horizontalEnd';
children: React.ReactNode;
}
/**
* Use `FormFieldGroup` to wrap a group of inputs to make them accessible.
*
* ```tsx
*
* Choose a Pet
*
*
* Dog
* Cat
*
*
*
* ```
*
* @stencil formFieldStencil
*/
export const FormFieldGroup = createContainer('div')({
displayName: 'FormFieldGroup',
modelHook: useFormFieldModel,
subComponents: {
/**
* `FormFieldGroup.Input` will render any `inputs` passed to it via the `as` prop. Use this component with checkboxes or radio inputs.
* `FormFieldGroup.Input` will apply `aria-invalid` when there is an error on `FromFieldGroup` or `aria-describedby` when an `id` is added on the `FormFieldGroup`.
*
* **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
*
* ```tsx
*
* Choose a Pet
*
* Dog
* Cat
*
*
* ```
*/
Input: FormFieldGroupInput,
/**
* `FormFieldGroup.Label` this element labels the contents of the group of inputs..
*
* ```tsx
*
* Choose a pet
* //...
*
* ```
*
* @stencil formFieldLabelStencil
*/
Label: FormFieldGroupLabel,
/**
* `FormFieldGroup.List` will render a `div`. This element is used to apply the visual error states around the group of inputs. It's contents will be your inputs.
*/
List: FormFieldGroupList,
/**
* `FormFieldGroup.Hint` will render any additional information you want to provide to the `FormFieldGroup`.
*
* ```tsx
*
* Choose a pet
*
* //...
*
* This is your hint text
*
* ```
*
* @stencil formFieldHintStencil
*/
Hint: FormField.Hint,
/**
* `FormFieldGroup.Field` allows you to properly align the legend to the group of inputs.
*
* ```tsx
*
* Choose a pet
*
*
* Dog
* Cat
*
* This is your hint text
*
*
* ```
*
*/
Field: FormField.Field,
},
})(({children, grow, orientation, ...elemProps}, Element, model) => {
return (
{children}
);
});