@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

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

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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]; } });
@@ -29,30 +18,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogPopper = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var hooks_1 = require("./hooks");
+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')({
     displayName: 'Dialog.Popper',
     modelHook: hooks_1.useDialogModel,
-})(function (_a, Element, model) {
-    var children = _a.children, placement = _a.placement, popperOptions = _a.popperOptions, ref = _a.ref, props = __rest(_a, ["children", "placement", "popperOptions", "ref"]);
-    var popperProps = popup_1.usePopupPopper(model, { placement: placement, popperOptions: popperOptions }, ref);
-    var elemProps = hooks_1.useDialogPopper(model, props);
-    return (React.createElement(Element, __assign({}, elemProps),
-        React.createElement(popup_1.Popper, __assign({}, popperProps), children)));
+})(({ children, placement, popperOptions, ref, ...props }, Element, model) => {
+    const popperProps = popup_1.usePopupPopper(model, { placement, popperOptions }, ref);
+    const elemProps = 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)));
 });

package/dist/commonjs/dialog/lib/hooks/useDialogCard.d.ts

@@ -1,4 +1,4 @@
-export declare const useDialogCard: <P extends {}, R>(model: {
+export declare const useDialogCard: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         stackRef: import("react").RefObject<HTMLDivElement>;
         targetRef: import("react").RefObject<HTMLButtonElement>;
@@ -6,7 +6,7 @@ export declare const useDialogCard: <P extends {}, R>(model: {
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -15,7 +15,10 @@ export declare const useDialogCard: <P extends {}, R>(model: {
         show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
     };
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
-    ref: import("react").Ref<R>;
-} : {});
+}, {
+    role: string;
+    'aria-labelledby': string;
+} & {
+    id: string;
+}>;
 //# sourceMappingURL=useDialogCard.d.ts.map

package/dist/commonjs/dialog/lib/hooks/useDialogCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDialogCard.d.ts","sourceRoot":"","sources":["../../../../../dialog/lib/hooks/useDialogCard.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;OAOzB,CAAC"}
+{"version":3,"file":"useDialogCard.d.ts","sourceRoot":"","sources":["../../../../../dialog/lib/hooks/useDialogCard.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;EAOzB,CAAC"}

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

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDialogCard = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
-var popup_1 = require("@workday/canvas-kit-react/popup");
-exports.useDialogCard = common_1.composeHooks(popup_1.usePopupCard, common_1.createElemPropsHook(popup_1.usePopupModel)(function (_a) {
-    var state = _a.state;
+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 }) => {
     return {
-        id: "dialog-" + state.id,
+        id: `dialog-${state.id}`,
     };
 }));

package/dist/commonjs/dialog/lib/hooks/useDialogModel.d.ts

@@ -13,7 +13,7 @@ export declare const useDialogModel: (<TT_Special_Generic>(config?: (Partial<{
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
     onShow?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, prevState: {
         stackRef: import("react").RefObject<HTMLDivElement>;
@@ -22,7 +22,7 @@ export declare const useDialogModel: (<TT_Special_Generic>(config?: (Partial<{
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
     onHide?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, prevState: {
         stackRef: import("react").RefObject<HTMLDivElement>;
@@ -31,7 +31,7 @@ export declare const useDialogModel: (<TT_Special_Generic>(config?: (Partial<{
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
 } & {
     shouldUpdatePlacement?: ((data: {
@@ -43,7 +43,7 @@ export declare const useDialogModel: (<TT_Special_Generic>(config?: (Partial<{
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
     shouldShow?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, state: {
         stackRef: import("react").RefObject<HTMLDivElement>;
@@ -52,7 +52,7 @@ export declare const useDialogModel: (<TT_Special_Generic>(config?: (Partial<{
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
     shouldHide?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, state: {
         stackRef: import("react").RefObject<HTMLDivElement>;
@@ -61,7 +61,7 @@ export declare const useDialogModel: (<TT_Special_Generic>(config?: (Partial<{
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
 }) | undefined) => {
     state: {
@@ -71,7 +71,7 @@ export declare const useDialogModel: (<TT_Special_Generic>(config?: (Partial<{
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -80,7 +80,7 @@ export declare const useDialogModel: (<TT_Special_Generic>(config?: (Partial<{
         show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
     };
-}) & import("../../../common").ModelExtras<{
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
     returnFocusRef: import("react").RefObject<any> | undefined;
     initialFocusRef: import("react").RefObject<any> | undefined;
     id: string;
@@ -92,7 +92,7 @@ export declare const useDialogModel: (<TT_Special_Generic>(config?: (Partial<{
     returnFocusRef: import("react").RefObject<any> | undefined;
     placement: import("@popperjs/core").Placement;
     id: string;
-    visibility: import("../../..").Visibility;
+    visibility: "hidden" | "visible";
 }, {
     updatePlacement(data: {
         placement: import("@popperjs/core").Placement;
@@ -107,7 +107,7 @@ export declare const useDialogModel: (<TT_Special_Generic>(config?: (Partial<{
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {

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

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

package/dist/commonjs/dialog/lib/hooks/useDialogPopper.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-export declare const useDialogPopper: <P extends {}, R>(model: {
+export declare const useDialogPopper: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         stackRef: import("react").RefObject<HTMLDivElement>;
         targetRef: import("react").RefObject<HTMLButtonElement>;
@@ -7,7 +7,7 @@ export declare const useDialogPopper: <P extends {}, R>(model: {
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -16,10 +16,8 @@ export declare const useDialogPopper: <P extends {}, R>(model: {
         show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
     };
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+}, {
     'aria-owns': string;
     style: CSSProperties;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: import("react").Ref<R>;
-} : {});
+}>;
 //# sourceMappingURL=useDialogPopper.d.ts.map

package/dist/commonjs/dialog/lib/hooks/useDialogPopper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDialogPopper.d.ts","sourceRoot":"","sources":["../../../../../dialog/lib/hooks/useDialogPopper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;OAK1B,CAAC"}
+{"version":3,"file":"useDialogPopper.d.ts","sourceRoot":"","sources":["../../../../../dialog/lib/hooks/useDialogPopper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;EAK1B,CAAC"}

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDialogPopper = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
-var popup_1 = require("@workday/canvas-kit-react/popup");
-exports.useDialogPopper = common_1.createElemPropsHook(popup_1.usePopupModel)(function (_a) {
-    var state = _a.state;
+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 }) => {
     return {
-        'aria-owns': "dialog-" + state.id,
-        style: { position: 'absolute' },
+        'aria-owns': `dialog-${state.id}`,
+        style: { position: 'absolute' }, // make sure the element doesn't participate in Flex
     };
 });

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

@@ -14,20 +14,20 @@ export declare const useDisclosureModel: (<TT_Special_Generic>(config?: (Partial
         id: string;
         /**
          * Visibility state of the disclosed content. Models are allowed to extend the states to fit
-         * their needs, so if you need to consistently determine "not hidden", use `visibility !==
-         * 'hidden'` rather than `visibility === 'visible'`
+         * their needs, so if you need to consistently determine "not hidden", use
+         * `visibility !== 'hidden'` rather than `visibility === 'visible'`
          */
-        visibility: Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
     onHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
         /** ID reference of the list. Children ids can be derived from this id */
         id: string;
         /**
          * Visibility state of the disclosed content. Models are allowed to extend the states to fit
-         * their needs, so if you need to consistently determine "not hidden", use `visibility !==
-         * 'hidden'` rather than `visibility === 'visible'`
+         * their needs, so if you need to consistently determine "not hidden", use
+         * `visibility !== 'hidden'` rather than `visibility === 'visible'`
          */
-        visibility: Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
 } & {
     shouldShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
@@ -35,20 +35,20 @@ export declare const useDisclosureModel: (<TT_Special_Generic>(config?: (Partial
         id: string;
         /**
          * Visibility state of the disclosed content. Models are allowed to extend the states to fit
-         * their needs, so if you need to consistently determine "not hidden", use `visibility !==
-         * 'hidden'` rather than `visibility === 'visible'`
+         * their needs, so if you need to consistently determine "not hidden", use
+         * `visibility !== 'hidden'` rather than `visibility === 'visible'`
          */
-        visibility: Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
     shouldHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
         /** ID reference of the list. Children ids can be derived from this id */
         id: string;
         /**
          * Visibility state of the disclosed content. Models are allowed to extend the states to fit
-         * their needs, so if you need to consistently determine "not hidden", use `visibility !==
-         * 'hidden'` rather than `visibility === 'visible'`
+         * their needs, so if you need to consistently determine "not hidden", use
+         * `visibility !== 'hidden'` rather than `visibility === 'visible'`
          */
-        visibility: Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
 }) | undefined) => {
     state: {
@@ -56,10 +56,10 @@ export declare const useDisclosureModel: (<TT_Special_Generic>(config?: (Partial
         id: string;
         /**
          * Visibility state of the disclosed content. Models are allowed to extend the states to fit
-         * their needs, so if you need to consistently determine "not hidden", use `visibility !==
-         * 'hidden'` rather than `visibility === 'visible'`
+         * their needs, so if you need to consistently determine "not hidden", use
+         * `visibility !== 'hidden'` rather than `visibility === 'visible'`
          */
-        visibility: Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         /**
@@ -73,7 +73,7 @@ export declare const useDisclosureModel: (<TT_Special_Generic>(config?: (Partial
          */
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
-}) & import("../../common").ModelExtras<{
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
     /** ID reference of the list. Children ids can be derived from this id */
     id: string;
     /**
@@ -86,10 +86,10 @@ export declare const useDisclosureModel: (<TT_Special_Generic>(config?: (Partial
     id: string;
     /**
      * Visibility state of the disclosed content. Models are allowed to extend the states to fit
-     * their needs, so if you need to consistently determine "not hidden", use `visibility !==
-     * 'hidden'` rather than `visibility === 'visible'`
+     * their needs, so if you need to consistently determine "not hidden", use
+     * `visibility !== 'hidden'` rather than `visibility === 'visible'`
      */
-    visibility: Visibility;
+    visibility: "hidden" | "visible";
 }, {
     /**
      * Start showing the disclosed content. If a DOM event triggered this event, the event data will
@@ -107,10 +107,10 @@ export declare const useDisclosureModel: (<TT_Special_Generic>(config?: (Partial
         id: string;
         /**
          * Visibility state of the disclosed content. Models are allowed to extend the states to fit
-         * their needs, so if you need to consistently determine "not hidden", use `visibility !==
-         * 'hidden'` rather than `visibility === 'visible'`
+         * their needs, so if you need to consistently determine "not hidden", use
+         * `visibility !== 'hidden'` rather than `visibility === 'visible'`
          */
-        visibility: Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         /**

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

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDisclosureModel = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
 exports.useDisclosureModel = common_1.createModelHook({
     defaultConfig: {
         /** ID reference of the list. Children ids can be derived from this id */
@@ -16,34 +16,34 @@ exports.useDisclosureModel = common_1.createModelHook({
          */
         initialVisibility: 'hidden',
     },
-})(function (config) {
-    var id = common_1.useUniqueId(config.id);
-    var _a = react_1.default.useState(config.initialVisibility || 'hidden'), visibility = _a[0], setVisibility = _a[1];
-    var state = {
+})(config => {
+    const id = 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 */
-        id: id,
+        id,
         /**
          * Visibility state of the disclosed content. Models are allowed to extend the states to fit
-         * their needs, so if you need to consistently determine "not hidden", use `visibility !==
-         * 'hidden'` rather than `visibility === 'visible'`
+         * their needs, so if you need to consistently determine "not hidden", use
+         * `visibility !== 'hidden'` rather than `visibility === 'visible'`
          */
-        visibility: visibility,
+        visibility,
     };
-    var events = {
+    const events = {
         /**
          * 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: function (event) {
+        show(event) {
             setVisibility('visible');
         },
         /**
          * 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: function (event) {
+        hide(event) {
             setVisibility('hidden');
         },
     };
-    return { state: state, events: events };
+    return { state, events };
 });

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

@@ -55,12 +55,11 @@ export interface FormFieldProps extends Themeable, React.HTMLAttributes<HTMLDivE
 export interface FormFieldErrorBehavior {
     error?: ErrorType;
 }
-declare class FormField extends React.Component<React.PropsWithChildren<FormFieldProps>> {
+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;
 }
-export { FormField };
 //# 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;AAE/E,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,cAAM,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAC9E,MAAM,CAAC,aAAa,gCAA0B;IAC9C,MAAM,CAAC,SAAS,mBAAa;IAE7B,OAAO,CAAC,OAAO,CAAoD;IAEnE,OAAO,CAAC,cAAc,CA8BpB;IAEF,MAAM;CA2DP;AAKD,OAAO,EAAC,SAAS,EAAC,CAAC"}
+{"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;AAE/E,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,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;CA2DP"}

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

@@ -1,28 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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]; } });
@@ -42,39 +18,24 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormField = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var Hint_1 = require("./Hint");
-var Label_1 = require("./Label");
-var types_1 = require("./types");
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+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
-var FormFieldFieldsetContainer = common_1.styled('fieldset')(function (_a) {
-    var grow = _a.grow, labelPosition = _a.labelPosition;
-    return ({
-        display: labelPosition === types_1.FormFieldLabelPosition.Top ? 'inline-block' : 'flex',
-        flexGrow: grow ? 1 : undefined,
-        padding: 0,
-        border: 0,
-        margin: 0,
-        marginBottom: tokens_1.space.m,
-    });
-});
-var FormFieldContainer = common_1.styled('div')(function (_a) {
-    var labelPosition = _a.labelPosition, useFieldset = _a.useFieldset;
+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 }) => {
     if (useFieldset) {
         return {
             display: 'flex',
@@ -91,8 +52,7 @@ var FormFieldContainer = common_1.styled('div')(function (_a) {
         marginBottom: tokens_1.space.m,
     };
 });
-var FormFieldInputContainer = common_1.styled('div')(function (_a) {
-    var grow = _a.grow, labelPosition = _a.labelPosition;
+const FormFieldInputContainer = common_1.styled('div')(({ grow, labelPosition }) => {
     if (grow) {
         if (labelPosition === types_1.FormFieldLabelPosition.Left ||
             labelPosition === types_1.FormFieldLabelPosition.Hidden) {
@@ -116,52 +76,54 @@ var FormFieldInputContainer = common_1.styled('div')(function (_a) {
         display: 'inline-block',
     };
 });
-var FormField = /** @class */ (function (_super) {
-    __extends(FormField, _super);
-    function FormField() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.inputId = _this.props.inputId || common_1.generateUniqueId();
-        _this.renderChildren = function (child) {
+class FormField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.inputId = this.props.inputId || common_1.generateUniqueId();
+        this.renderChildren = (child) => {
             if (React.isValidElement(child)) {
-                var props = __assign({}, child.props);
-                if (_this.props.grow) {
-                    props.grow = _this.props.grow;
+                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.hintId) {
-                        props['aria-describedby'] = _this.props.hintId;
+                if (typeof this.props.error !== 'undefined') {
+                    props.error = this.props.error;
+                    if (this.props.hintId) {
+                        props['aria-describedby'] = this.props.hintId;
                     }
-                    if (_this.props.error === common_1.ErrorType.Error) {
+                    if (this.props.error === common_1.ErrorType.Error) {
                         props['aria-invalid'] = true;
                     }
                 }
-                props.id = _this.inputId;
+                if (this.props.required) {
+                    props.required = true;
+                }
+                props.id = this.inputId;
                 return React.cloneElement(child, props);
             }
             return child;
         };
-        return _this;
     }
-    FormField.prototype.render = function () {
-        var _a = this.props, _b = _a.errorLabel, errorLabel = _b === void 0 ? 'Error' : _b, _c = _a.alertLabel, alertLabel = _c === void 0 ? 'Alert' : _c, _d = _a.useFieldset, useFieldset = _d === void 0 ? false : _d, _e = _a.labelPosition, labelPosition = _e === void 0 ? FormField.LabelPosition.Top : _e, label = _a.label, hintText = _a.hintText, hintId = _a.hintId, inputId = _a.inputId, grow = _a.grow, children = _a.children, error = _a.error, required = _a.required, elemProps = __rest(_a, ["errorLabel", "alertLabel", "useFieldset", "labelPosition", "label", "hintText", "hintId", "inputId", "grow", "children", "error", "required"]);
-        var field = (React.createElement(React.Fragment, null,
+    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, __assign({ useFieldset: useFieldset, labelPosition: labelPosition }, elemProps),
+            return (React.createElement(FormFieldContainer, Object.assign({ useFieldset: useFieldset, labelPosition: labelPosition }, elemProps),
                 React.createElement(FormFieldFieldsetContainer, { grow: grow, labelPosition: labelPosition }, field)));
         }
         else {
-            return (React.createElement(FormFieldContainer, __assign({ useFieldset: useFieldset, labelPosition: labelPosition }, elemProps), field));
+            return (React.createElement(FormFieldContainer, Object.assign({ useFieldset: useFieldset, labelPosition: labelPosition }, elemProps), field));
         }
-    };
-    FormField.LabelPosition = types_1.FormFieldLabelPosition;
-    FormField.ErrorType = common_1.ErrorType;
-    return FormField;
-}(React.Component));
+    }
+}
 exports.FormField = FormField;
 FormField.LabelPosition = types_1.FormFieldLabelPosition;
 FormField.ErrorType = common_1.ErrorType;
+FormField.LabelPosition = types_1.FormFieldLabelPosition;
+FormField.ErrorType = common_1.ErrorType;