@workday/canvas-kit-react 12.0.0-alpha.862-next.0 → 12.0.0-alpha.898-next.0

package/dist/commonjs/form-field/lib/FormField.js

@@ -1,133 +1,120 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormField = void 0;
-const React = __importStar(require("react"));
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
-const Hint_1 = require("./Hint");
-const Label_1 = require("./Label");
-const types_1 = require("./types");
-// Use a fieldset element for accessible radio groups
-const FormFieldFieldsetContainer = common_1.styled('fieldset')(({ grow, labelPosition }) => ({
-    display: labelPosition === types_1.FormFieldLabelPosition.Top ? 'inline-block' : 'flex',
-    flexGrow: grow ? 1 : undefined,
-    padding: 0,
-    border: 0,
-    margin: 0,
-    marginBottom: tokens_1.space.m,
-}));
-const FormFieldContainer = common_1.styled('div')(({ labelPosition, useFieldset, grow }) => {
-    if (useFieldset) {
-        return {
-            display: 'flex',
-        };
-    }
-    if (labelPosition === types_1.FormFieldLabelPosition.Left) {
-        return {
-            display: 'flex',
-            marginBottom: tokens_1.space.m,
-        };
-    }
-    return {
-        display: 'block',
-        marginBottom: tokens_1.space.m,
-        width: grow ? '100%' : 'inherit',
-    };
-});
-const FormFieldInputContainer = common_1.styled('div')(({ grow, labelPosition }) => {
-    if (grow) {
-        if (labelPosition === types_1.FormFieldLabelPosition.Left ||
-            labelPosition === types_1.FormFieldLabelPosition.Hidden) {
-            return {
-                flexGrow: 1,
-            };
-        }
-        return {
-            width: '100%',
-            display: 'block',
-        };
-    }
-    if (labelPosition === types_1.FormFieldLabelPosition.Left) {
-        return {
-            display: 'inline-flex',
-            alignItems: 'center',
-            flexWrap: 'wrap',
-        };
-    }
-    return {
-        display: 'inline-block',
-    };
-});
+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");
 /**
- * @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ * 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
  */
-class FormField extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.inputId = this.props.inputId || common_1.generateUniqueId();
-        this.renderChildren = (child) => {
-            if (React.isValidElement(child)) {
-                const props = {
-                    ...child.props,
-                };
-                if (this.props.grow) {
-                    props.grow = this.props.grow;
-                }
-                if (typeof this.props.error !== 'undefined') {
-                    props.error = this.props.error;
-                    if (this.props.error === common_1.ErrorType.Error) {
-                        props['aria-invalid'] = true;
-                    }
-                }
-                if (this.props.hintId) {
-                    props['aria-describedby'] = this.props.hintId;
-                }
-                if (this.props.required) {
-                    props.required = true;
-                }
-                props.id = this.inputId;
-                return React.cloneElement(child, props);
-            }
-            return child;
-        };
-    }
-    render() {
-        const { errorLabel = 'Error', alertLabel = 'Alert', useFieldset = false, labelPosition = FormField.LabelPosition.Top, label, hintText, hintId, inputId, grow, children, error, required, ...elemProps } = this.props;
-        const field = (React.createElement(React.Fragment, null,
-            typeof label === 'string' ? (React.createElement(Label_1.Label, { labelPosition: labelPosition, htmlFor: this.inputId, isLegend: useFieldset, required: required, accessibleHide: labelPosition === types_1.FormFieldLabelPosition.Hidden }, label)) : (label),
-            React.createElement(FormFieldInputContainer, { grow: grow, labelPosition: labelPosition },
-                React.Children.map(children, this.renderChildren),
-                hintText && (React.createElement(Hint_1.Hint, { errorLabel: errorLabel, alertLabel: alertLabel, error: error, id: hintId }, hintText)))));
-        if (useFieldset) {
-            return (React.createElement(FormFieldContainer, Object.assign({ useFieldset: useFieldset, labelPosition: labelPosition }, elemProps),
-                React.createElement(FormFieldFieldsetContainer, { grow: grow, labelPosition: labelPosition }, field)));
-        }
-        else {
-            return (React.createElement(FormFieldContainer, Object.assign({ useFieldset: useFieldset, labelPosition: labelPosition, grow: grow }, elemProps), field));
+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="horizontal">
+         *    <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, ...elemProps }, Element, model) => {
+    // TODO: Remove this warning in v13 once we remove horizontal support in favor of horizontalStart and horizontalEnd.
+    if (process.env.NODE_ENV === 'development') {
+        if (orientation === 'horizontal') {
+            console.warn('FormField: Orientation option of "horizontal" is deprecated and will be removed in v13. Please update your types and value to use the string literal of "horizontalStart". The following values will be accepted in v13: "horizontalStart" | "horizontalEnd" | "vertical".');
         }
     }
-}
-exports.FormField = FormField;
-FormField.LabelPosition = types_1.FormFieldLabelPosition;
-FormField.ErrorType = common_1.ErrorType;
-FormField.LabelPosition = types_1.FormFieldLabelPosition;
-FormField.ErrorType = common_1.ErrorType;
+    return (react_1.default.createElement(Element, { ...(0, layout_1.mergeStyles)(elemProps, (0, formFieldStencil_1.formFieldStencil)({
+            grow,
+            orientation: model.state.orientation === 'horizontal' ? 'horizontalStart' : model.state.orientation,
+            error: model.state.error,
+            required: model.state.isRequired,
+        })) }, children));
+});

package/dist/commonjs/form-field/lib/FormFieldContainer.d.ts

@@ -0,0 +1,18 @@
+import { CSProps } from '@workday/canvas-kit-styling';
+/**
+ * @deprecated `formFieldContainerStencil` 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.
+ */
+export declare const formFieldContainerStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
+/**
+ * @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.
+ */
+export declare const FormFieldContainer: import("@workday/canvas-kit-react/common").ElementComponentM<"div", CSProps, {
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}>;
+//# sourceMappingURL=FormFieldContainer.d.ts.map

package/dist/commonjs/form-field/lib/FormFieldContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldContainer.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AAKjF;;GAEG;AACH,eAAO,MAAM,yBAAyB,yIAMpC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;EAU7B,CAAC"}

package/dist/commonjs/form-field/lib/FormFieldContainer.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldContainer = exports.formFieldContainerStencil = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const hooks_1 = require("./hooks");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+/**
+ * @deprecated `formFieldContainerStencil` 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.
+ */
+exports.formFieldContainerStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "ksnk4a", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
+}, "form-field-container-b7ba71");
+/**
+ * @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.
+ */
+exports.FormFieldContainer = (0, common_1.createSubcomponent)('div')({
+    displayName: 'FormField.Container',
+    modelHook: hooks_1.useFormFieldModel,
+})((elemProps, Element, model) => {
+    return (react_1.default.createElement(Element, { "data-width": "ck-formfield-width", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.formFieldContainerStencil)()) }));
+});

package/dist/commonjs/form-field/lib/FormFieldField.d.ts

@@ -0,0 +1,12 @@
+import { CSProps } from '@workday/canvas-kit-styling';
+export declare const formFieldFieldStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
+export declare const FormFieldField: import("@workday/canvas-kit-react/common").ElementComponentM<"div", CSProps, {
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}>;
+//# sourceMappingURL=FormFieldField.d.ts.map

package/dist/commonjs/form-field/lib/FormFieldField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AAKjF,eAAO,MAAM,qBAAqB,yIAMhC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;EAUzB,CAAC"}

package/dist/commonjs/form-field/lib/FormFieldField.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldField = exports.formFieldFieldStencil = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const hooks_1 = require("./hooks");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+exports.formFieldFieldStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "ksnk4j", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
+}, "form-field-field-fc001f");
+exports.FormFieldField = (0, common_1.createSubcomponent)('div')({
+    displayName: 'FormField.Field',
+    modelHook: hooks_1.useFormFieldModel,
+})((elemProps, Element, model) => {
+    return (react_1.default.createElement(Element, { "data-width": "ck-formfield-width", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.formFieldFieldStencil)()) }));
+});

package/dist/commonjs/form-field/lib/FormFieldGroup.d.ts

@@ -0,0 +1,152 @@
+import React from 'react';
+import { GrowthBehavior } from '@workday/canvas-kit-react/common';
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+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' | 'horizontal';
+    children: React.ReactNode;
+}
+/**
+ * Use `FormFieldGroup` to wrap a group of inputs to make them accessible.
+ *
+ * ```tsx
+ * <FormFieldGroup>
+ *    <FormFieldGroup.Label>Choose a Pet</FormFieldGroup.Label>
+ *    <FormFiledGroup.Field>
+ *      <FormFieldGroup.List as={RadioGroup} />
+ *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
+ *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
+ *      </FormFieldGroup.List>
+ *    </FormFieldGroup.Field>
+ * </FormFieldGroup>
+ * ```
+ *
+ * @stencil formFieldStencil
+ */
+export declare const FormFieldGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", FormFieldGroupProps & Partial<{
+    error: "alert" | "error" | undefined;
+    id: string;
+    isRequired: boolean;
+    orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+}> & {} & {}, {
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}> & {
+    /**
+     * `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
+     * <FormFieldGroup>
+     *    <FormField.Label>Choose a Pet</FormField.Label>
+     *    <FormFieldGroup.List as={RadioGroup} />
+     *      <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
+     *      <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
+     *    </FormFieldGroup.List>
+     * </FormFieldGroup>
+     * ```
+     */
+    Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("./FormFieldGroupInput").FormFieldGroupInputProps, {
+        state: {
+            id: string;
+            error: "alert" | "error" | undefined;
+            isRequired: boolean;
+            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        };
+        events: {};
+    }>;
+    /**
+     * `FormFieldGroup.Label` this element labels the contents of the group of inputs..
+     *
+     * ```tsx
+     * <FormFieldGroup>
+     *    <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
+     *    //...
+     *  </FormFieldGroup>
+     * ```
+     *
+     * @stencil formFieldLabelStencil
+     */
+    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./FormFieldGroupLabel").FormFieldGroupLabelProps, {
+        state: {
+            id: string;
+            error: "alert" | "error" | undefined;
+            isRequired: boolean;
+            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        };
+        events: {};
+    }>;
+    /**
+     * `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: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./FormFieldGroupList").FormFieldGroupListProps, {
+        state: {
+            id: string;
+            error: "alert" | "error" | undefined;
+            isRequired: boolean;
+            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        };
+        events: {};
+    }>;
+    /**
+     * `FormFieldGroup.Hint` will render any additional information you want to provide to the `FormFieldGroup`.
+     *
+     * ```tsx
+     * <FormFieldGroup>
+     *    <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
+     *    <FormFieldGroup.List>
+     *      //...
+     *    <FormFieldGroup.List>
+     *    <FormField.Hint>This is your hint text</FormField.Hint>
+     *  </FormFieldGroup>
+     * ```
+     *
+     * @stencil formFieldHintStencil
+     */
+    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("../..").TextProps, {
+        state: {
+            id: string;
+            error: "alert" | "error" | undefined;
+            isRequired: boolean;
+            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        };
+        events: {};
+    }>;
+    /**
+     * `FormFieldGroup.Field` allows you to properly align the legend to the group of inputs.
+     *
+     * ```tsx
+     * <FormFieldGroup orientation="horizontalStart">
+     *    <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
+     *    <FormFieldGroup.Field>
+     *      <FormFieldGroup.List>
+     *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
+     *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
+     *      </FormFieldGroup.List>
+     *      <FormFieldGroup.Hint>This is your hint text</FormField.Hint>
+     *    </FormFieldGroup.Field>
+     *  </FormFieldGroup>
+     * ```
+     *
+     */
+    Field: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("@workday/canvas-kit-styling").CSProps, {
+        state: {
+            id: string;
+            error: "alert" | "error" | undefined;
+            isRequired: boolean;
+            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        };
+        events: {};
+    }>;
+};
+//# sourceMappingURL=FormFieldGroup.d.ts.map

package/dist/commonjs/form-field/lib/FormFieldGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldGroup.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,cAAc,EAAC,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAWxE,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc;IACpE;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,iBAAiB,GAAG,eAAe,GAAG,YAAY,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;IAIvB;;;;;;;;;;;;;;;OAeG;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;IAEH;;OAEG;;;;;;;;;;IAEH;;;;;;;;;;;;;;OAcG;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;OAgBG;;;;;;;;;;CAsBL,CAAC"}

package/dist/commonjs/form-field/lib/FormFieldGroup.js

@@ -0,0 +1,113 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldGroup = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const FormFieldGroupList_1 = require("./FormFieldGroupList");
+const FormFieldGroupInput_1 = require("./FormFieldGroupInput");
+const FormFieldGroupLabel_1 = require("./FormFieldGroupLabel");
+const FormField_1 = require("./FormField");
+const hooks_1 = require("./hooks");
+const formFieldStencil_1 = require("./formFieldStencil");
+/**
+ * Use `FormFieldGroup` to wrap a group of inputs to make them accessible.
+ *
+ * ```tsx
+ * <FormFieldGroup>
+ *    <FormFieldGroup.Label>Choose a Pet</FormFieldGroup.Label>
+ *    <FormFiledGroup.Field>
+ *      <FormFieldGroup.List as={RadioGroup} />
+ *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
+ *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
+ *      </FormFieldGroup.List>
+ *    </FormFieldGroup.Field>
+ * </FormFieldGroup>
+ * ```
+ *
+ * @stencil formFieldStencil
+ */
+exports.FormFieldGroup = (0, common_1.createContainer)('div')({
+    displayName: 'FormFieldGroup',
+    modelHook: hooks_1.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
+         * <FormFieldGroup>
+         *    <FormField.Label>Choose a Pet</FormField.Label>
+         *    <FormFieldGroup.List as={RadioGroup} />
+         *      <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
+         *      <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
+         *    </FormFieldGroup.List>
+         * </FormFieldGroup>
+         * ```
+         */
+        Input: FormFieldGroupInput_1.FormFieldGroupInput,
+        /**
+         * `FormFieldGroup.Label` this element labels the contents of the group of inputs..
+         *
+         * ```tsx
+         * <FormFieldGroup>
+         *    <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
+         *    //...
+         *  </FormFieldGroup>
+         * ```
+         *
+         * @stencil formFieldLabelStencil
+         */
+        Label: FormFieldGroupLabel_1.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_1.FormFieldGroupList,
+        /**
+         * `FormFieldGroup.Hint` will render any additional information you want to provide to the `FormFieldGroup`.
+         *
+         * ```tsx
+         * <FormFieldGroup>
+         *    <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
+         *    <FormFieldGroup.List>
+         *      //...
+         *    <FormFieldGroup.List>
+         *    <FormField.Hint>This is your hint text</FormField.Hint>
+         *  </FormFieldGroup>
+         * ```
+         *
+         * @stencil formFieldHintStencil
+         */
+        Hint: FormField_1.FormField.Hint,
+        /**
+         * `FormFieldGroup.Field` allows you to properly align the legend to the group of inputs.
+         *
+         * ```tsx
+         * <FormFieldGroup orientation="horizontalStart">
+         *    <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
+         *    <FormFieldGroup.Field>
+         *      <FormFieldGroup.List>
+         *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
+         *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
+         *      </FormFieldGroup.List>
+         *      <FormFieldGroup.Hint>This is your hint text</FormField.Hint>
+         *    </FormFieldGroup.Field>
+         *  </FormFieldGroup>
+         * ```
+         *
+         */
+        Field: FormField_1.FormField.Field,
+    },
+})(({ children, grow, orientation, ...elemProps }, Element, model) => {
+    return (react_1.default.createElement(Element, { "aria-labelledby": model.state.id, role: "group", ...(0, layout_1.mergeStyles)(elemProps, (0, formFieldStencil_1.formFieldStencil)({
+            grow,
+            orientation: model.state.orientation === 'horizontal' ? 'horizontalStart' : model.state.orientation,
+            error: model.state.error,
+            required: model.state.isRequired,
+        })) }, children));
+});

package/dist/commonjs/form-field/lib/FormFieldGroupInput.d.ts

@@ -0,0 +1,29 @@
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface FormFieldGroupInputProps extends CSProps {
+}
+/**
+ * Adds the necessary props to an `Input` component for grouped inputs.
+ */
+export declare const useFormFieldGroupInput: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}, {
+    'aria-invalid': boolean | undefined;
+    'aria-describedby': string | undefined;
+    'aria-required': boolean | undefined;
+}>;
+export declare const FormFieldGroupInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", FormFieldGroupInputProps, {
+    state: {
+        id: string;
+        error: "alert" | "error" | undefined;
+        isRequired: boolean;
+        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    };
+    events: {};
+}>;
+//# sourceMappingURL=FormFieldGroupInput.d.ts.map

package/dist/commonjs/form-field/lib/FormFieldGroupInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldGroupInput.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldGroupInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAIlE,MAAM,WAAW,wBAAyB,SAAQ,OAAO;CAAG;AAC5D;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;EAMjC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;EAM9B,CAAC"}