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

package/dist/commonjs/common/lib/utils/useConstant.js

@@ -10,7 +10,7 @@ const react_1 = require("react");
  * const value = useConstant(generateUniqueId)
  */
 function useConstant(fn) {
-    const ref = react_1.useRef();
+    const ref = (0, react_1.useRef)();
     if (!ref.current) {
         ref.current = fn();
     }

package/dist/commonjs/common/lib/utils/useModalityType.d.ts

@@ -1,4 +1,4 @@
-declare type Modality = 'mouse' | 'touch' | 'pen';
+type Modality = 'mouse' | 'touch' | 'pen';
 /**
  * Uses heuristics to determine if the user is on a touch device, uses a pen, or a mouse. This hook
  * is useful if you have styles or behaviors that depend on the user's interaction type. For

package/dist/commonjs/common/lib/utils/useModalityType.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModalityType.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useModalityType.ts"],"names":[],"mappings":"AAEA,aAAK,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;AA6C1C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,QAAO,QAkBlC,CAAC"}
+{"version":3,"file":"useModalityType.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useModalityType.ts"],"names":[],"mappings":"AAEA,KAAK,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;AA6C1C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,QAAO,QAkBlC,CAAC"}

package/dist/commonjs/common/lib/utils/useResizeObserver.js

@@ -25,7 +25,7 @@ const useResizeObserver = (params = {}) => {
             }
         }
         : undefined;
-    return use_resize_observer_1.default({ ...params, onResize });
+    return (0, use_resize_observer_1.default)({ ...params, onResize });
 };
 exports.useResizeObserver = useResizeObserver;
 // When the dependency is moved up to v8.0.0, remove the above function and export below instead

package/dist/commonjs/common/lib/utils/useUniqueId.d.ts

@@ -12,12 +12,12 @@ export declare const generateUniqueId: () => string;
  * Generate a unique ID if one is not provided. The generated ID will be stable across renders
  * @param id Optional ID provided that will be used instead of a unique ID
  */
-export declare const useUniqueId: (id?: string | undefined) => string;
+export declare const useUniqueId: (id?: string) => string;
 /**
  * Backwards-compatible change to converting to hook
  * @deprecated ⚠️ `uniqueId` has been deprecated and will be removed in a future major version. Please use `useUniqueId` instead.
  */
-export declare const uniqueId: (id?: string | undefined) => string;
+export declare const uniqueId: (id?: string) => string;
 /**
  * Update the seed used by the id generator. This is useful for snapshot tests to help stabilize ids
  * generated each run. This could also be used for server-side hydration - if you choose the same

package/dist/commonjs/common/lib/utils/useUniqueId.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useUniqueId.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useUniqueId.ts"],"names":[],"mappings":"AAWA;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,cAAkC,CAAC;AAEhE;;;GAGG;AACH,eAAO,MAAM,WAAW,qCAIvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,qCAAc,CAAC;AAEpC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,MAAO,MAAM,SAEtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,YAE9B,CAAC"}
+{"version":3,"file":"useUniqueId.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useUniqueId.ts"],"names":[],"mappings":"AAWA;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,cAAkC,CAAC;AAEhE;;;GAGG;AACH,eAAO,MAAM,WAAW,QAAS,MAAM,WAItC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,QAVY,MAAM,WAUJ,CAAC;AAEpC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,MAAO,MAAM,SAEtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,YAE9B,CAAC"}

package/dist/commonjs/common/lib/utils/useUniqueId.js

@@ -26,7 +26,7 @@ exports.generateUniqueId = generateUniqueId;
  */
 const useUniqueId = (id) => {
     // https://codesandbox.io/s/react-functional-component-ids-p2ndq
-    const generatedId = useConstant_1.useConstant(exports.generateUniqueId);
+    const generatedId = (0, useConstant_1.useConstant)(exports.generateUniqueId);
     return id || generatedId;
 };
 exports.useUniqueId = useUniqueId;

package/dist/commonjs/common/lib/utils/useWindowSize.js

@@ -20,7 +20,7 @@ const useWindowSize = () => {
         setWidth(window.innerWidth);
         setHeight(window.innerHeight);
     };
-    useMount_1.useMount(() => {
+    (0, useMount_1.useMount)(() => {
         window.addEventListener('resize', onResize);
         return () => {
             window.removeEventListener('resize', onResize);

package/dist/commonjs/dialog/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/commonjs/dialog/lib/Dialog.js

@@ -17,7 +17,7 @@ const hooks_1 = require("./hooks");
  * container component will build a default one using `useDialogModel`. `Dialog` is a composition of a
  * {@link Popup} component and has a similar structure to `Popup`.
  */
-exports.Dialog = common_1.createContainer()({
+exports.Dialog = (0, common_1.createContainer)()({
     displayName: 'Dialog',
     modelHook: hooks_1.useDialogModel,
     subComponents: {

package/dist/commonjs/dialog/lib/DialogCard.js

@@ -1,7 +1,11 @@
 "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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -24,10 +28,10 @@ const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const popup_1 = require("@workday/canvas-kit-react/popup");
 const hooks_1 = require("./hooks");
-exports.DialogCard = common_1.createSubcomponent('div')({
+exports.DialogCard = (0, common_1.createSubcomponent)('div')({
     displayName: 'Dialog.Card',
     modelHook: hooks_1.useDialogModel,
     elemPropsHook: hooks_1.useDialogCard,
 })((elemProps, Element, model) => {
-    return (React.createElement(popup_1.Popup.Card, Object.assign({ as: Element, model: model }, elemProps), elemProps.children));
+    return (React.createElement(popup_1.Popup.Card, { as: Element, model: model, ...elemProps }, elemProps.children));
 });

package/dist/commonjs/dialog/lib/DialogPopper.js

@@ -1,7 +1,11 @@
 "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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -24,15 +28,15 @@ const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const popup_1 = require("@workday/canvas-kit-react/popup");
 const hooks_1 = require("./hooks");
-exports.DialogPopper = common_1.createSubcomponent('div')({
+exports.DialogPopper = (0, common_1.createSubcomponent)('div')({
     displayName: 'Dialog.Popper',
     modelHook: hooks_1.useDialogModel,
 })(({ children, placement, popperOptions, ref, ...props }, Element, model) => {
-    const popperProps = popup_1.usePopupPopper(model, { placement, popperOptions }, ref);
-    const elemProps = hooks_1.useDialogPopper(model, props);
+    const popperProps = (0, popup_1.usePopupPopper)(model, { placement, popperOptions }, ref);
+    const elemProps = (0, hooks_1.useDialogPopper)(model, props);
     if (model.state.visibility === 'hidden') {
         return null;
     }
-    return (React.createElement(Element, Object.assign({}, elemProps),
-        React.createElement(popup_1.Popper, Object.assign({}, popperProps), children)));
+    return (React.createElement(Element, { ...elemProps },
+        React.createElement(popup_1.Popper, { ...popperProps }, children)));
 });

package/dist/commonjs/dialog/lib/hooks/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/commonjs/dialog/lib/hooks/useDialogCard.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDialogCard = void 0;
 const common_1 = require("@workday/canvas-kit-react/common");
 const popup_1 = require("@workday/canvas-kit-react/popup");
-exports.useDialogCard = common_1.composeHooks(popup_1.usePopupCard, common_1.createElemPropsHook(popup_1.usePopupModel)(({ state }) => {
+exports.useDialogCard = (0, common_1.composeHooks)(popup_1.usePopupCard, (0, common_1.createElemPropsHook)(popup_1.usePopupModel)(({ state }) => {
     return {
         id: `dialog-${state.id}`,
     };

package/dist/commonjs/dialog/lib/hooks/useDialogModel.js

@@ -3,16 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDialogModel = void 0;
 const popup_1 = require("@workday/canvas-kit-react/popup");
 const common_1 = require("@workday/canvas-kit-react/common");
-exports.useDialogModel = common_1.createModelHook({
+exports.useDialogModel = (0, common_1.createModelHook)({
     defaultConfig: popup_1.usePopupModel.defaultConfig,
     requiredConfig: popup_1.usePopupModel.requiredConfig,
     contextOverride: popup_1.usePopupModel.Context,
 })(config => {
-    const model = popup_1.usePopupModel(config);
-    popup_1.useInitialFocus(model);
-    popup_1.useReturnFocus(model);
-    popup_1.useCloseOnOutsideClick(model);
-    popup_1.useCloseOnEscape(model);
-    popup_1.useFocusRedirect(model);
+    const model = (0, popup_1.usePopupModel)(config);
+    (0, popup_1.useInitialFocus)(model);
+    (0, popup_1.useReturnFocus)(model);
+    (0, popup_1.useCloseOnOutsideClick)(model);
+    (0, popup_1.useCloseOnEscape)(model);
+    (0, popup_1.useFocusRedirect)(model);
     return model;
 });

package/dist/commonjs/dialog/lib/hooks/useDialogPopper.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDialogPopper = void 0;
 const common_1 = require("@workday/canvas-kit-react/common");
 const popup_1 = require("@workday/canvas-kit-react/popup");
-exports.useDialogPopper = common_1.createElemPropsHook(popup_1.usePopupModel)(({ state }) => {
+exports.useDialogPopper = (0, common_1.createElemPropsHook)(popup_1.usePopupModel)(({ state }) => {
     return {
         'aria-owns': `dialog-${state.id}`,
         style: { position: 'absolute' }, // make sure the element doesn't participate in Flex

package/dist/commonjs/disclosure/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/commonjs/disclosure/lib/useDisclosureModel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type Visibility = 'hidden' | 'visible';
+export type Visibility = 'hidden' | 'visible';
 export declare const useDisclosureModel: (<TT_Special_Generic>(config?: (Partial<{
     /** ID reference of the list. Children ids can be derived from this id */
     id: string;
@@ -66,12 +66,12 @@ export declare const useDisclosureModel: (<TT_Special_Generic>(config?: (Partial
          * Start showing the disclosed content. If a DOM event triggered this event, the event data will
          * be passed along. This data can be used by guards and callbacks.
          */
-        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        show(event?: Event | React.SyntheticEvent): void;
         /**
          * Start hiding this disclosed content. If a DOM event triggered this event, the event data will
          * be passed along. This data can be used by guards and callbacks.
          */
-        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent): void;
     };
 }) & import("@workday/canvas-kit-react/common").ModelExtras<{
     /** ID reference of the list. Children ids can be derived from this id */
@@ -95,12 +95,12 @@ export declare const useDisclosureModel: (<TT_Special_Generic>(config?: (Partial
      * Start showing the disclosed content. If a DOM event triggered this event, the event data will
      * be passed along. This data can be used by guards and callbacks.
      */
-    show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    show(event?: Event | React.SyntheticEvent): void;
     /**
      * Start hiding this disclosed content. If a DOM event triggered this event, the event data will
      * be passed along. This data can be used by guards and callbacks.
      */
-    hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    hide(event?: Event | React.SyntheticEvent): void;
 }, {
     state: {
         /** ID reference of the list. Children ids can be derived from this id */
@@ -117,12 +117,12 @@ export declare const useDisclosureModel: (<TT_Special_Generic>(config?: (Partial
          * Start showing the disclosed content. If a DOM event triggered this event, the event data will
          * be passed along. This data can be used by guards and callbacks.
          */
-        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        show(event?: Event | React.SyntheticEvent): void;
         /**
          * Start hiding this disclosed content. If a DOM event triggered this event, the event data will
          * be passed along. This data can be used by guards and callbacks.
          */
-        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent): void;
     };
 }>;
 //# sourceMappingURL=useDisclosureModel.d.ts.map

package/dist/commonjs/disclosure/lib/useDisclosureModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDisclosureModel.d.ts","sourceRoot":"","sources":["../../../../disclosure/lib/useDisclosureModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,oBAAY,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE9C,eAAO,MAAM,kBAAkB;IAE3B,yEAAyE;;IAEzE;;;OAGG;;;;QAQH,yEAAyE;;QAEzE;;;;WAIG;;;;QANH,yEAAyE;;QAEzE;;;;WAIG;;;;;QANH,yEAAyE;;QAEzE;;;;WAIG;;;;QANH,yEAAyE;;QAEzE;;;;WAIG;;;;;QANH,yEAAyE;;QAEzE;;;;WAIG;;;;QAKH;;;WAGG;;QAIH;;;WAGG;;;;IAlCH,yEAAyE;;IAEzE;;;OAGG;;;IAQH,yEAAyE;;IAEzE;;;;OAIG;;;IAKH;;;OAGG;;IAIH;;;OAGG;;;;QArBH,yEAAyE;;QAEzE;;;;WAIG;;;;QAKH;;;WAGG;;QAIH;;;WAGG;;;EAOL,CAAC"}
+{"version":3,"file":"useDisclosureModel.d.ts","sourceRoot":"","sources":["../../../../disclosure/lib/useDisclosureModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE9C,eAAO,MAAM,kBAAkB;IAE3B,yEAAyE;;IAEzE;;;OAGG;;;;QAQH,yEAAyE;;QAEzE;;;;WAIG;;;;QANH,yEAAyE;;QAEzE;;;;WAIG;;;;;QANH,yEAAyE;;QAEzE;;;;WAIG;;;;QANH,yEAAyE;;QAEzE;;;;WAIG;;;;;QANH,yEAAyE;;QAEzE;;;;WAIG;;;;QAKH;;;WAGG;qBACU,KAAK,GAAG,MAAM,cAAc;QAGzC;;;WAGG;qBACU,KAAK,GAAG,MAAM,cAAc;;;IAnCzC,yEAAyE;;IAEzE;;;OAGG;;;IAQH,yEAAyE;;IAEzE;;;;OAIG;;;IAKH;;;OAGG;iBACU,KAAK,GAAG,MAAM,cAAc;IAGzC;;;OAGG;iBACU,KAAK,GAAG,MAAM,cAAc;;;QAtBzC,yEAAyE;;QAEzE;;;;WAIG;;;;QAKH;;;WAGG;qBACU,KAAK,GAAG,MAAM,cAAc;QAGzC;;;WAGG;qBACU,KAAK,GAAG,MAAM,cAAc;;EAM3C,CAAC"}

package/dist/commonjs/disclosure/lib/useDisclosureModel.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDisclosureModel = void 0;
 const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
-exports.useDisclosureModel = common_1.createModelHook({
+exports.useDisclosureModel = (0, common_1.createModelHook)({
     defaultConfig: {
         /** ID reference of the list. Children ids can be derived from this id */
         id: '',
@@ -17,7 +17,7 @@ exports.useDisclosureModel = common_1.createModelHook({
         initialVisibility: 'hidden',
     },
 })(config => {
-    const id = common_1.useUniqueId(config.id);
+    const id = (0, common_1.useUniqueId)(config.id);
     const [visibility, setVisibility] = react_1.default.useState(config.initialVisibility || 'hidden');
     const state = {
         /** ID reference of the list. Children ids can be derived from this id */

package/dist/commonjs/form-field/index.d.ts

@@ -1,5 +1,12 @@
-export * from './lib/types';
 export * from './lib/FormField';
-export * from './lib/Hint';
-export * from './lib/Label';
+export * from './lib/FormFieldGroup';
+export * from './lib/hooks';
+export * from './lib/FormFieldGroupLabel';
+export * from './lib/FormFieldGroupInput';
+export * from './lib/FormFieldGroupList';
+export { formFieldStencil } from './lib/formFieldStencil';
+export { formFieldContainerStencil } from './lib/FormFieldContainer';
+export { formFieldHintStencil } from './lib/FormFieldHint';
+export { formFieldLabelStencil } from './lib/FormFieldLabel';
+export { useFormFieldGroupInput } from './lib/FormFieldGroupInput';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/form-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../form-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../form-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAC,yBAAyB,EAAC,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAC,oBAAoB,EAAC,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAC,qBAAqB,EAAC,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAC,sBAAsB,EAAC,MAAM,2BAA2B,CAAC"}

package/dist/commonjs/form-field/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -10,7 +14,20 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./lib/types"), exports);
+exports.useFormFieldGroupInput = exports.formFieldLabelStencil = exports.formFieldHintStencil = exports.formFieldContainerStencil = exports.formFieldStencil = void 0;
 __exportStar(require("./lib/FormField"), exports);
-__exportStar(require("./lib/Hint"), exports);
-__exportStar(require("./lib/Label"), exports);
+__exportStar(require("./lib/FormFieldGroup"), exports);
+__exportStar(require("./lib/hooks"), exports);
+__exportStar(require("./lib/FormFieldGroupLabel"), exports);
+__exportStar(require("./lib/FormFieldGroupInput"), exports);
+__exportStar(require("./lib/FormFieldGroupList"), exports);
+var formFieldStencil_1 = require("./lib/formFieldStencil");
+Object.defineProperty(exports, "formFieldStencil", { enumerable: true, get: function () { return formFieldStencil_1.formFieldStencil; } });
+var FormFieldContainer_1 = require("./lib/FormFieldContainer");
+Object.defineProperty(exports, "formFieldContainerStencil", { enumerable: true, get: function () { return FormFieldContainer_1.formFieldContainerStencil; } });
+var FormFieldHint_1 = require("./lib/FormFieldHint");
+Object.defineProperty(exports, "formFieldHintStencil", { enumerable: true, get: function () { return FormFieldHint_1.formFieldHintStencil; } });
+var FormFieldLabel_1 = require("./lib/FormFieldLabel");
+Object.defineProperty(exports, "formFieldLabelStencil", { enumerable: true, get: function () { return FormFieldLabel_1.formFieldLabelStencil; } });
+var FormFieldGroupInput_1 = require("./lib/FormFieldGroupInput");
+Object.defineProperty(exports, "useFormFieldGroupInput", { enumerable: true, get: function () { return FormFieldGroupInput_1.useFormFieldGroupInput; } });

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

@@ -1,71 +1,152 @@
-import * as React from 'react';
-import { GrowthBehavior, ErrorType, Themeable } from '@workday/canvas-kit-react/common';
-import { FormFieldLabelPosition } from './types';
-/**
- * @deprecated ⚠️ `FormFieldProps` 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.
- */
-export interface FormFieldProps extends Themeable, React.HTMLAttributes<HTMLDivElement>, GrowthBehavior {
-    /**
-     * The position of the FormField label.
-     * @default FormField.FormFieldLabelPosition.Top
-     */
-    labelPosition?: FormFieldLabelPosition;
-    /**
-     * The text of the FormField label.
-     */
-    label?: React.ReactNode;
-    /**
-     * The text of the message displayed below the input component. This is required if `error` is defined.
-     */
-    hintText?: React.ReactNode;
-    /**
-     * The HTML `id` of the message displayed below the input component. This is required for the `aria-describedby` accessibility attribute if `error` and `hintText` are defined.
-     */
-    hintId?: string;
-    /**
-     * The HTML `id` of the input component. If an `id` is not specified for the input, this will be used as it's `id`. This is referenced by the label's `htmlFor` attribute. This is required for accessiblity if `label` is defined.
-     */
-    inputId?: string;
+import React from 'react';
+import { GrowthBehavior } from '@workday/canvas-kit-react/common';
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+export interface FormFieldProps extends FlexProps, GrowthBehavior {
     /**
-     * The type of error associated with the FormField (if applicable). This is passed to the input component.
+     * The direction the child elements should stack. In v13, `horizontal` will be removed. Please use `horizontalStart` or `horizontalEnd` for horizontal alignment.
+     * @default vertical
      */
-    error?: ErrorType;
+    orientation?: 'vertical' | 'horizontalStart' | 'horizontalEnd' | 'horizontal';
+    children: React.ReactNode;
+}
+/**
+ * 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
+ */
+export declare const FormField: import("@workday/canvas-kit-react/common").ElementComponentM<"div", FormFieldProps & 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: {};
+}> & {
     /**
-     * If true, style the FormField label to indicate that it is required.
-     * @default false
+     * `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>
+     * ```
      */
-    required?: boolean;
+    Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps, {
+        state: {
+            id: string;
+            error: "alert" | "error" | undefined;
+            isRequired: boolean;
+            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        };
+        events: {};
+    }>;
     /**
-     * If true, render the FormField using a `fieldset` and a `legend` instead of a `div` and a `label`. This must be set to `true` if you're using a Radio Group inside of a FormField (for accessibility reasons).
-     * @default false
+     * `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
      */
-    useFieldset?: boolean;
+    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("./FormFieldLabel").FormFieldLabelProps, {
+        state: {
+            id: string;
+            error: "alert" | "error" | undefined;
+            isRequired: boolean;
+            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        };
+        events: {};
+    }>;
     /**
-     * The input component wrapped by the FormField.
+     * `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
      */
-    children: React.ReactNode;
+    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: {};
+    }>;
     /**
-     * The label for the error message hint text if `hintText` and `error` are defined. This prop should only be used for translating the default string 'Error'.
-     * @default 'Error'
+     * `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.
      */
-    errorLabel?: string;
+    Container: 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: {};
+    }>;
     /**
-     * The label for the alert message hint text if `hintText` and `error` are defined. This prop should only be used for translating the default string 'Alert'.
-     * @default 'Alert'
+     * `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>
+     * ```
      */
-    alertLabel?: string;
-}
-export interface FormFieldErrorBehavior {
-    error?: ErrorType;
-}
-/**
- * @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.
- */
-export declare class FormField extends React.Component<React.PropsWithChildren<FormFieldProps>> {
-    static LabelPosition: typeof FormFieldLabelPosition;
-    static ErrorType: typeof ErrorType;
-    private inputId;
-    private renderChildren;
-    render(): JSX.Element;
-}
+    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=FormField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EACd,SAAS,EAET,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,sBAAsB,EAAiC,MAAM,SAAS,CAAC;AAC/E;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAoED;;GAEG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACrF,MAAM,CAAC,aAAa,gCAA0B;IAC9C,MAAM,CAAC,SAAS,mBAAa;IAE7B,OAAO,CAAC,OAAO,CAAoD;IAEnE,OAAO,CAAC,cAAc,CAkCpB;IAEF,MAAM;CAgEP"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.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,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,iBAAiB,GAAG,eAAe,GAAG,YAAY,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;IAIlB;;;;;;;;;;;;OAYG;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;IAEH;;;;;;;;;;;;;;;OAeG;;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;;CA6BL,CAAC"}