@workday/canvas-kit-react 7.1.4 → 7.2.0-427-next.2

package/dist/commonjs/text-input/lib/InputGroup.d.ts

@@ -0,0 +1,135 @@
+import React from 'react';
+export declare const useInputGroupModel: (<TT_Special_Generic>(config?: (Partial<{}> & {} & {}) | undefined) => {
+    state: {
+        inputRef: React.RefObject<HTMLInputElement>;
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{}, {}, {
+    inputRef: React.RefObject<HTMLInputElement>;
+}, {}, {
+    state: {
+        inputRef: React.RefObject<HTMLInputElement>;
+    };
+    events: {};
+}>;
+export declare const InputGroupInnerStart: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
+    state: {
+        inputRef: React.RefObject<HTMLInputElement>;
+    };
+    events: {};
+}>;
+export declare const InputGroupInnerEnd: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
+    state: {
+        inputRef: React.RefObject<HTMLInputElement>;
+    };
+    events: {};
+}>;
+export declare const InputGroupInput: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./TextInput").TextInputProps> & {
+    ErrorType: typeof import("@workday/canvas-kit-react/common").ErrorType;
+}, Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
+    state: {
+        inputRef: React.RefObject<HTMLInputElement>;
+    };
+    events: {};
+}>;
+export declare const useClearButton: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        inputRef: React.RefObject<HTMLInputElement>;
+    };
+    events: {};
+}, {
+    readonly role: "presentation";
+    readonly tabIndex: -1;
+    readonly icon: import("@workday/design-assets-types").CanvasSystemIcon;
+    readonly size: "small";
+    readonly transition: "opacity 300ms ease";
+    readonly onMouseDown: (event: React.MouseEvent) => void;
+    readonly onClick: () => void;
+    readonly style: {
+        readonly opacity: 0 | 1;
+        readonly pointerEvents: "none" | "auto";
+    };
+}>;
+/**
+ * A clear input button. This can be a component later.
+ */
+export declare const ClearButton: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("@workday/canvas-kit-react/button").TertiaryButtonProps>, import("@workday/canvas-kit-react/button").TertiaryButtonProps, {
+    state: {
+        inputRef: React.RefObject<HTMLInputElement>;
+    };
+    events: {};
+}>;
+/**
+ * An `InputGroup` is a container around a {@link TextInput} with optional inner start and end
+ * elements. The inner start and end elements are usually icons or icon buttons visually represented
+ * inside the input. The `InputGroup` will add padding to the input so the icons/buttons display
+ * correctly. This component uses `React.Children.map` and `React.cloneElement` from the
+ * [React.Children](https://react.dev/reference/react/Children) API. This means all children must be
+ * `InputGroup.*` components. Any other direct children will cause issues. You can add different
+ * elements/components inside the {@link InputGroupInnerStart InputGroup.InnerStart} and
+ * {@link InputGroupInnerEnd InputGroup.InnerEnd} subcomponents.
+ *
+ * ```tsx
+ * <InputGroup>
+ *   <InputGroup.InnerStart as={SystemIcon} pointerEvents="none" icon={searchIcon} />
+ *   <InputGroup.Input />
+ *   <InputGroup.InnerEnd>
+ *     <TertiaryButton tabIndex={-1} icon={xIcon} size="small" />
+ *   </InputGroup.InnerEnd>
+ * </InputGroup>
+ * ```
+ */
+export declare const InputGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps & Partial<{}> & {} & {}, {
+    state: {
+        inputRef: React.RefObject<HTMLInputElement>;
+    };
+    events: {};
+}> & {
+    /**
+     * A component to show inside and at the start of the input. The input's padding will be
+     * adjusted to not overlap with this element. Use `width` (number of pixels only) to adjust the
+     * width offset. The width defaults to 40px which is the correct width for icons or icon
+     * buttons.
+     */
+    InnerStart: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
+        state: {
+            inputRef: React.RefObject<HTMLInputElement>;
+        };
+        events: {};
+    }>;
+    /**
+     * The input to render. By default, this is a {@link TextInput}. Use the `as` prop to change the
+     * component to be rendered.
+     */
+    Input: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./TextInput").TextInputProps> & {
+        ErrorType: typeof import("@workday/canvas-kit-react/common").ErrorType;
+    }, Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
+        state: {
+            inputRef: React.RefObject<HTMLInputElement>;
+        };
+        events: {};
+    }>;
+    /**
+     * A component to show inside and at the end of the input. The input's padding will be adjusted
+     * to not overlap with this element. Use `width` (number of pixels only) to adjust the width
+     * offset. The width defaults to 40px which is the correct width for icons or icon buttons
+     * within the input.
+     */
+    InnerEnd: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
+        state: {
+            inputRef: React.RefObject<HTMLInputElement>;
+        };
+        events: {};
+    }>;
+    /**
+     * A component that can be added to an input group that will clear the input. It will only render
+     * when the input has a value and will fade when a value is entered.
+     */
+    ClearButton: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("@workday/canvas-kit-react/button").TertiaryButtonProps>, import("@workday/canvas-kit-react/button").TertiaryButtonProps, {
+        state: {
+            inputRef: React.RefObject<HTMLInputElement>;
+        };
+        events: {};
+    }>;
+};
+//# sourceMappingURL=InputGroup.d.ts.map

package/dist/commonjs/text-input/lib/InputGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,eAAO,MAAM,kBAAkB;;;;;;;;;;;;EAS7B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;EAc/B,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;EAc7B,CAAC;AAUH,eAAO,MAAM,eAAe;;;;;;;EAK1B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;kCAwBJ,gBAAgB;;;;;;EAYrC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;EAKtB,CAAC;AAmBH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;;;;IAInB;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;;;IAEH;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;CA6DL,CAAC"}

package/dist/commonjs/text-input/lib/InputGroup.js

@@ -0,0 +1,200 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputGroup = exports.ClearButton = exports.useClearButton = exports.InputGroupInput = exports.InputGroupInnerEnd = exports.InputGroupInnerStart = exports.useInputGroupModel = void 0;
+const react_1 = __importDefault(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const button_1 = require("@workday/canvas-kit-react/button");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const TextInput_1 = require("./TextInput");
+exports.useInputGroupModel = common_1.createModelHook({})(() => {
+    const inputRef = react_1.default.useRef(null);
+    return {
+        state: {
+            inputRef,
+        },
+        events: {},
+    };
+});
+exports.InputGroupInnerStart = common_1.createSubcomponent('div')({
+    modelHook: exports.useInputGroupModel,
+})((elemProps, Element) => {
+    return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, position: "absolute", alignItems: "center", justifyContent: "center", height: "xl", width: "xl" }, elemProps)));
+});
+exports.InputGroupInnerEnd = common_1.createSubcomponent('div')({
+    modelHook: exports.useInputGroupModel,
+})((elemProps, Element) => {
+    return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, position: "absolute", alignItems: "center", justifyContent: "center", height: "xl", width: "xl" }, elemProps)));
+});
+const useInputGroupInput = common_1.createElemPropsHook(exports.useInputGroupModel)((model, ref) => {
+    const elementRef = common_1.useForkRef(ref, model.state.inputRef);
+    return {
+        ref: elementRef,
+    };
+});
+exports.InputGroupInput = common_1.createSubcomponent(TextInput_1.TextInput)({
+    modelHook: exports.useInputGroupModel,
+    elemPropsHook: useInputGroupInput,
+})((elemProps, Element) => {
+    return react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, width: "100%" }, elemProps));
+});
+exports.useClearButton = common_1.createElemPropsHook(exports.useInputGroupModel)(model => {
+    const [inputHasValue, setInputHasValue] = react_1.default.useState(false);
+    react_1.default.useLayoutEffect(() => {
+        const input = model.state.inputRef.current;
+        if (input) {
+            input.addEventListener('input', () => {
+                setInputHasValue(!!input.value);
+            });
+        }
+    }, [model.state.inputRef]);
+    return {
+        // This element does not need to be accessible via screen reader. The user can already clear
+        // an input
+        role: 'presentation',
+        // A clear input button doesn't need focus. There's already keyboard keys to clear an input
+        tabIndex: -1,
+        icon: canvas_system_icons_web_1.xSmallIcon,
+        // "small" is needed to render correctly within a `TextInput`
+        size: 'small',
+        transition: 'opacity 300ms ease',
+        // prevent a focus change to the button. Focus should stay in the input.
+        onMouseDown(event) {
+            event.preventDefault();
+        },
+        onClick() {
+            // This will clear the input's value
+            common_1.dispatchInputEvent(model.state.inputRef.current, '');
+        },
+        style: {
+            opacity: inputHasValue ? 1 : 0,
+            pointerEvents: inputHasValue ? 'auto' : 'none',
+        },
+    };
+});
+/**
+ * A clear input button. This can be a component later.
+ */
+exports.ClearButton = common_1.createSubcomponent(button_1.TertiaryButton)({
+    modelHook: exports.useInputGroupModel,
+    elemPropsHook: exports.useClearButton,
+})((elemProps, Element) => {
+    return react_1.default.createElement(Element, Object.assign({}, elemProps));
+});
+// make sure we always use pixels if the input is a number - this is required for `calc`
+const toPx = (input) => {
+    return typeof input === 'number' ? `${input}px` : input;
+};
+// wrap an array of widths into something the browser can understand, including `calc` for multiple
+// values
+const wrapInCalc = (values) => {
+    if (values.length === 0) {
+        return undefined;
+    }
+    if (values.length === 1) {
+        return values[0];
+    }
+    return `calc(${values.map(toPx).join(' + ')})`;
+};
+/**
+ * An `InputGroup` is a container around a {@link TextInput} with optional inner start and end
+ * elements. The inner start and end elements are usually icons or icon buttons visually represented
+ * inside the input. The `InputGroup` will add padding to the input so the icons/buttons display
+ * correctly. This component uses `React.Children.map` and `React.cloneElement` from the
+ * [React.Children](https://react.dev/reference/react/Children) API. This means all children must be
+ * `InputGroup.*` components. Any other direct children will cause issues. You can add different
+ * elements/components inside the {@link InputGroupInnerStart InputGroup.InnerStart} and
+ * {@link InputGroupInnerEnd InputGroup.InnerEnd} subcomponents.
+ *
+ * ```tsx
+ * <InputGroup>
+ *   <InputGroup.InnerStart as={SystemIcon} pointerEvents="none" icon={searchIcon} />
+ *   <InputGroup.Input />
+ *   <InputGroup.InnerEnd>
+ *     <TertiaryButton tabIndex={-1} icon={xIcon} size="small" />
+ *   </InputGroup.InnerEnd>
+ * </InputGroup>
+ * ```
+ */
+exports.InputGroup = common_1.createContainer('div')({
+    displayName: 'InputGroup',
+    modelHook: exports.useInputGroupModel,
+    subComponents: {
+        /**
+         * A component to show inside and at the start of the input. The input's padding will be
+         * adjusted to not overlap with this element. Use `width` (number of pixels only) to adjust the
+         * width offset. The width defaults to 40px which is the correct width for icons or icon
+         * buttons.
+         */
+        InnerStart: exports.InputGroupInnerStart,
+        /**
+         * The input to render. By default, this is a {@link TextInput}. Use the `as` prop to change the
+         * component to be rendered.
+         */
+        Input: exports.InputGroupInput,
+        /**
+         * A component to show inside and at the end of the input. The input's padding will be adjusted
+         * to not overlap with this element. Use `width` (number of pixels only) to adjust the width
+         * offset. The width defaults to 40px which is the correct width for icons or icon buttons
+         * within the input.
+         */
+        InnerEnd: exports.InputGroupInnerEnd,
+        /**
+         * A component that can be added to an input group that will clear the input. It will only render
+         * when the input has a value and will fade when a value is entered.
+         */
+        ClearButton: exports.ClearButton,
+    },
+})(({ children, ...elemProps }, Element) => {
+    const isRTL = common_1.useIsRTL();
+    const offsetsStart = [];
+    const offsetsEnd = [];
+    // Collect the widths of the `InnerStart` and `InnerEnd` components into `offsetStart` and
+    // `offsetEnd` arrays
+    react_1.default.Children.forEach(children, child => {
+        if (react_1.default.isValidElement(child) && child.type === exports.InputGroupInnerStart) {
+            const width = child.props.width || tokens_1.space.xl;
+            offsetsStart.push(width);
+        }
+        if (react_1.default.isValidElement(child) && child.type === exports.InputGroupInnerEnd) {
+            const width = child.props.width || tokens_1.space.xl;
+            offsetsEnd.push(width);
+        }
+    });
+    // keep track of the index offsets to make sure we calculate the correct position offset
+    let indexStart = 0;
+    let indexEnd = 0;
+    // Loop over all the children and set the correct padding and positions
+    const mappedChildren = react_1.default.Children.map(children, child => {
+        if (react_1.default.isValidElement(child)) {
+            if (child.type === exports.InputGroupInput) {
+                return react_1.default.cloneElement(child, {
+                    paddingInlineStart: wrapInCalc(offsetsStart),
+                    paddingInlineEnd: wrapInCalc(offsetsEnd),
+                });
+            }
+            if (child.type === exports.InputGroupInnerStart) {
+                const offset = wrapInCalc(offsetsStart.slice(0, indexStart)) || 0;
+                indexStart++;
+                return react_1.default.cloneElement(child, {
+                    left: isRTL ? undefined : offset,
+                    right: isRTL ? offset : undefined,
+                });
+            }
+            if (child.type === exports.InputGroupInnerEnd) {
+                const offset = wrapInCalc(offsetsEnd.slice(indexEnd, -1)) || 0;
+                indexEnd++;
+                return react_1.default.cloneElement(child, {
+                    left: isRTL ? offset : undefined,
+                    right: isRTL ? undefined : offset,
+                });
+            }
+        }
+        return child;
+    });
+    return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, position: "relative" }, elemProps), mappedChildren));
+});

package/dist/commonjs/text-input/lib/InputIconContainer.d.ts

@@ -4,6 +4,5 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
 export interface InputIconContainerProps extends GrowthBehavior {
     icon?: React.ReactElement<typeof SystemIcon>;
 }
-declare const InputIconContainer: React.FunctionComponent<InputIconContainerProps>;
-export default InputIconContainer;
+export declare const InputIconContainer: React.FunctionComponent<React.PropsWithChildren<InputIconContainerProps>>;
 //# sourceMappingURL=InputIconContainer.d.ts.map

package/dist/commonjs/text-input/lib/InputIconContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputIconContainer.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputIconContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAE1D,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC7D,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;CAC9C;AAaD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CASxE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"InputIconContainer.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputIconContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAE1D,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC7D,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;CAC9C;AAaD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAC9E,uBAAuB,CACxB,CAKA,CAAC"}

package/dist/commonjs/text-input/lib/InputIconContainer.js

@@ -22,25 +22,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var Container = styled_1.default('div')(function (_a) {
-    var grow = _a.grow;
-    return ({
-        display: grow ? 'block' : 'inline-block',
-        position: 'relative',
-    });
-});
-var IconContainer = styled_1.default('div')({
+exports.InputIconContainer = void 0;
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const Container = styled_1.default('div')(({ grow }) => ({
+    display: grow ? 'block' : 'inline-block',
+    position: 'relative',
+}));
+const IconContainer = styled_1.default('div')({
     position: 'absolute',
     top: tokens_1.space.xxs,
     right: tokens_1.space.xxs,
 });
-var InputIconContainer = function (_a) {
-    var grow = _a.grow, children = _a.children, icon = _a.icon;
-    return (React.createElement(Container, { grow: grow },
-        children,
-        icon && React.createElement(IconContainer, null, icon)));
-};
-exports.default = InputIconContainer;
+const InputIconContainer = ({ grow, children, icon }) => (React.createElement(Container, { grow: grow },
+    children,
+    icon && React.createElement(IconContainer, null, icon)));
+exports.InputIconContainer = InputIconContainer;

package/dist/commonjs/text-input/lib/TextInput.d.ts

@@ -9,8 +9,7 @@ export interface TextInputProps extends Themeable, GrowthBehavior {
      */
     width?: number | string;
 }
-export declare const TextInput: import("../../common").ElementComponent<"input", TextInputProps> & {
+export declare const TextInput: import("@workday/canvas-kit-react/common").ElementComponent<"input", TextInputProps> & {
     ErrorType: typeof ErrorType;
 };
-export default TextInput;
 //# sourceMappingURL=TextInput.d.ts.map

package/dist/commonjs/text-input/lib/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,cAAc,EACd,SAAS,EAGT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AA2DD,eAAO,MAAM,SAAS;;CAgBpB,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,cAAc,EACd,SAAS,EAGT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AA2DD,eAAO,MAAM,SAAS;;CAgBpB,CAAC"}

package/dist/commonjs/text-input/lib/TextInput.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,66 +18,63 @@ 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.TextInput = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var StyledTextInput = common_1.styled('input')(__assign(__assign({}, tokens_1.type.levels.subtext.large), { border: "1px solid " + tokens_1.inputColors.border, display: 'block', backgroundColor: tokens_1.inputColors.background, borderRadius: tokens_1.borderRadius.m, boxSizing: 'border-box', height: 40, transition: '0.2s box-shadow, 0.2s border-color', padding: tokens_1.spaceNumbers.xxs, margin: 0, '&::placeholder': {
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const StyledTextInput = common_1.styled('input')({
+    ...tokens_1.type.levels.subtext.large,
+    border: `1px solid ${tokens_1.inputColors.border}`,
+    display: 'block',
+    backgroundColor: tokens_1.inputColors.background,
+    borderRadius: tokens_1.borderRadius.m,
+    boxSizing: 'border-box',
+    height: 40,
+    transition: '0.2s box-shadow, 0.2s border-color',
+    padding: tokens_1.spaceNumbers.xxs,
+    margin: 0,
+    '&::placeholder': {
         color: tokens_1.inputColors.placeholder,
-    }, '&:hover': {
+    },
+    '&:hover': {
         borderColor: tokens_1.inputColors.hoverBorder,
-    }, '&:focus:not([disabled])': {
+    },
+    '&:focus:not([disabled])': {
         borderColor: tokens_1.inputColors.focusBorder,
-        boxShadow: "inset 0 0 0 1px " + tokens_1.inputColors.focusBorder,
+        boxShadow: `inset 0 0 0 1px ${tokens_1.inputColors.focusBorder}`,
         outline: 'none',
-    }, '&:disabled': {
+    },
+    '&:disabled': {
         backgroundColor: tokens_1.inputColors.disabled.background,
         borderColor: tokens_1.inputColors.disabled.border,
         color: tokens_1.inputColors.disabled.text,
         '&::placeholder': {
             color: tokens_1.inputColors.disabled.text,
         },
-    }, '::-ms-clear': {
+    },
+    '::-ms-clear': {
         display: 'none',
-    } }), function (_a) {
-    var width = _a.width;
-    return ({
-        minWidth: width || 280,
-        width: width,
-    });
-}, function (_a) {
-    var grow = _a.grow;
-    return grow && {
-        width: '100%',
-    };
-}, function (_a) {
-    var theme = _a.theme, error = _a.error;
-    return __assign({ '&:focus:not([disabled])': {
+    },
+}, ({ width }) => ({
+    minWidth: width || 280,
+    width,
+}), ({ grow }) => grow && {
+    width: '100%',
+}, ({ theme, error }) => {
+    return {
+        '&:focus:not([disabled])': {
             borderColor: theme.canvas.palette.common.focusOutline,
-            boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
+            boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
             outline: 'none',
-        } }, common_1.errorRing(error, theme));
+        },
+        ...common_1.errorRing(error, theme),
+    };
 });
 exports.TextInput = common_1.createComponent('input')({
     displayName: 'TextInput',
-    Component: function (_a, ref, Element) {
-        var grow = _a.grow, error = _a.error, width = _a.width, elemProps = __rest(_a, ["grow", "error", "width"]);
-        return (React.createElement(StyledTextInput, __assign({ type: "text", ref: ref, as: Element, grow: grow, error: error, width: width }, elemProps)));
-    },
+    Component: ({ grow, error, width, ...elemProps }, ref, Element) => (React.createElement(StyledTextInput, Object.assign({ type: "text", ref: ref, as: Element, grow: grow, error: error, width: width }, elemProps))),
     subComponents: {
         ErrorType: common_1.ErrorType,
     },
 });
-exports.default = exports.TextInput;

package/dist/commonjs/toast/index.d.ts

@@ -1,5 +1,3 @@
-import { Toast } from './lib/Toast';
-export default Toast;
-export { Toast };
 export * from './lib/Toast';
+export * from './lib/hooks/useToastModel';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/toast/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,aAAa,CAAC;AAElC,eAAe,KAAK,CAAC;AACrB,OAAO,EAAC,KAAK,EAAC,CAAC;AACf,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../toast/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC"}

package/dist/commonjs/toast/index.js

@@ -10,8 +10,5 @@ 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 });
-exports.Toast = void 0;
-var Toast_1 = require("./lib/Toast");
-Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return Toast_1.Toast; } });
-exports.default = Toast_1.Toast;
 __exportStar(require("./lib/Toast"), exports);
+__exportStar(require("./lib/hooks/useToastModel"), exports);

package/dist/commonjs/toast/lib/Toast.d.ts

@@ -1,34 +1,68 @@
-import { Popup } from '@workday/canvas-kit-react/popup';
-import { CanvasColor } from '@workday/canvas-kit-react/tokens';
-import { CanvasSystemIcon } from '@workday/design-assets-types';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-export interface ToastProps extends ExtractProps<typeof Popup.Card, never> {
-    /**
-     * The icon of the Toast.
-     * @default checkIcon
-     */
-    icon?: CanvasSystemIcon;
+import { Popup } from '@workday/canvas-kit-react/popup';
+export interface ToastProps extends Omit<ExtractProps<typeof Popup.Card, never>, 'model'> {
+}
+/**
+ * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility
+ *
+ * ```tsx
+ * import { Toast } from "@workday/canvas-kit-react/toast";
+ *
+ * const MyToast = (props: CardProps) => (
+ *    <Toast mode="dialog" aria-label="notifcation">
+ *      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+ *      <Toast.Body>
+ *        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+ *        <Toast.Link href="#hreflink">Custom Link</Toast.Link>
+ *      </Toast.Body>
+ *      <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
+ *    </Toast>
+ * );
+ *```
+ */
+export declare const Toast: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ToastProps & Partial<{
+    mode: import("./hooks/useToastModel").AriaRoleMode;
+    id: string;
+}> & {} & {}, {
+    state: {
+        id: string;
+        mode: import("./hooks/useToastModel").AriaRoleMode;
+    };
+    events: {};
+}> & {
     /**
-     * The color of the Toast icon.
-     * @default colors.greenApple400
+     * `Toast.Body` should container `Toast.Message` and `Toast.Link`. This ensures proper styling and spacing between elements.
+     *
+     * ```tsx
+     * <Toast.Body>
+     *  <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+     *  <Toast.Link href="#hreflink">Custom Link</Toast.Link>
+     * </Toast.Body>
+     * ```
      */
-    iconColor?: CanvasColor | string;
+    Body: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./ToastBody").ToastBodyProps>;
     /**
-     * The text of the Toast message.
+     * `Toast.CloseIcon` renders a {@link PopupCloseIcon}. You can pass an `onClick` when used with `Popper` to dismiss the `Toast`.
      */
-    children: string;
+    CloseIcon: import("@workday/canvas-kit-react/common").ElementComponent<"button", import("./ToastCloseIcon").ToastCloseIconProps>;
     /**
-     * The function called when the Toast is closed.
+     * `ToastIcon` renders a `SystemIcon` where you have access to all styling properties from `SystemIcon`.
      */
-    onClose?: () => void;
+    Icon: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./ToastIcon").ToastIconProps>;
     /**
-     * The function called when the Toast action is clicked.
+     * `Toast.Message` renders our `Subtext` component where you can style however way you'd like with style properties.
+     * This component also has an `id` so that when the `Toast` has a prop of `mode="dialog"` the message is read out by screen readers by adding an `aria-describedby` on the main `Toast` component.
      */
-    onActionClick?: () => void;
+    Message: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("./ToastMessage").ToastMessageProps, {
+        state: {
+            id: string;
+            mode: import("./hooks/useToastModel").AriaRoleMode;
+        };
+        events: {};
+    }>;
     /**
-     * The text of the Toast action.
+     * `Toast.Link` renders our `Hyperlink` component. If you need to link to more information, use this component.
      */
-    actionText?: string;
-}
-export declare const Toast: import("../../common").ElementComponent<"div", ToastProps>;
+    Link: import("@workday/canvas-kit-react/common").ElementComponent<"a", import("./ToastLink").ToastLinkProps>;
+};
 //# sourceMappingURL=Toast.d.ts.map