@workday/canvas-kit-react/dist/commonjs/form-field/lib/FormField.js

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormField = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const layout_1 = require("@workday/canvas-kit-react/layout");
const hooks_1 = require("./hooks");
const FormFieldInput_1 = require("./FormFieldInput");
const FormFieldLabel_1 = require("./FormFieldLabel");
const FormFieldHint_1 = require("./FormFieldHint");
const FormFieldContainer_1 = require("./FormFieldContainer");
const formFieldStencil_1 = require("./formFieldStencil");
const FormFieldField_1 = require("./FormFieldField");
/**
 * Use `FormField` to wrap input components to make them accessible. You can customize the field
 * by passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input` through the `as` prop.
 *
 * ```tsx
 * <FormField>
 *    <FormField.Label>First Name</FormField.Label>
 *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
 *  </FormField>
 * ```
 *
 * @stencil formFieldStencil
 */
exports.FormField = (0, common_1.createContainer)('div')({
    displayName: 'FormField',
    modelHook: hooks_1.useFormFieldModel,
    subComponents: {
        /**
         * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
         * `FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.
         *
         * **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
         *  <FormField id='my-unique-id'>
         *    <FormField.Label>My Label Text</FormField.Label>
         *    <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
         *  <FormField>
         * ```
         */
        Input: FormFieldInput_1.FormFieldInput,
        /**
         * `FormField.Label` will render a `label` element that has a matching `id` to the `FormField.Input`.
         *
         * ```tsx
         * <FormField>
         *    <FormField.Label>First Name</FormField.Label>
         *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
         *  </FormField>
         * ```
         *
         * @stencil formFieldLabelStencil
         */
        Label: FormFieldLabel_1.FormFieldLabel,
        /**
         * `FormField.Hint` will render any additional information you want to provide to the `FormField.Input`. If you
         * set the `orientation` prop to `horizontal` you should use `FormField.Field` to properly align the hint with your `FormField.Input`.
         *
         * ```tsx
         * <FormField>
         *    <FormField.Label>First Name</FormField.Label>
         *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
         *    <FormField.Hint>This is your hint text</FormField.Hint>
         *  </FormField>
         * ```
         *
         * @stencil formFieldHintStencil
         */
        Hint: FormFieldHint_1.FormFieldHint,
        /**
         * `FormField.Field` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text..
         *
         * ```tsx
         * <FormField orientation="horizontalStart">
         *    <FormField.Label>First Name</FormField.Label>
         *    <FormField.Container>
         *      <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
         *      <FormField.Hint>This is your hint text</FormField.Hint>
         *    </FormField.Container>
         *  </FormField>
         * ```
         *
         * @stencil formFieldContainerStencil
         * @deprecated `FormField.Container` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
         */
        Container: FormFieldContainer_1.FormFieldContainer,
        /**
         * `FormField.Field` allows you to customize container alignment and styles when wrapping your input and hint text.
         * ```tsx
         * <FormField orientation="horizontalStart">
         *    <FormField.Label>First Name</FormField.Label>
         *    <FormField.Field>
         *      <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
         *      <FormField.Hint>This is your hint text</FormField.Hint>
         *    </FormField.Field>
         *  </FormField>
         * ```
         */
        Field: FormFieldField_1.FormFieldField,
    },
})(({ children, grow, orientation = 'vertical', ...elemProps }, Element, model) => {
    return ((0, jsx_runtime_1.jsx)(Element, { ...(0, layout_1.mergeStyles)(elemProps, (0, formFieldStencil_1.formFieldStencil)({
            grow,
            orientation: model.state.orientation,
            error: model.state.error,
            required: model.state.isRequired,
        })), children: children }));
});