@workday/canvas-kit-preview-react 9.0.0-alpha.338-next.5 → 9.0.0-alpha.344-next.3

package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,YAAY,EAAW,MAAM,kCAAkC,CAAC;AAEzF,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAMhE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,EAAE,KAAK,CAAC;IAC5F;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,mGAoDhC,CAAC"}

package/dist/es6/side-panel/lib/SidePanelToggleButton.js

@@ -0,0 +1,66 @@
+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 __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;
+};
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import * as React from 'react';
+import { createComponent, useIsRTL } from '@workday/canvas-kit-react/common';
+import { css, jsx } from '@emotion/react';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { space } from '@workday/canvas-kit-react/tokens';
+import { transformationImportIcon } from '@workday/canvas-system-icons-web';
+import { Tooltip } from '@workday/canvas-kit-react/tooltip';
+import { SidePanelContext } from './hooks';
+/**
+ * A toggle button styled specifically for the side panel container.
+ */
+export var SidePanelToggleButton = createComponent('button')({
+    displayName: 'SidePanel.ToggleButton',
+    Component: function (_a) {
+        var _b = _a.variant, variant = _b === void 0 ? undefined : _b, _c = _a.icon, icon = _c === void 0 ? transformationImportIcon : _c, _d = _a.tooltipTextExpand, tooltipTextExpand = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, tooltipTextCollapse = _e === void 0 ? 'Collapse' : _e, elemProps = __rest(_a, ["variant", "icon", "tooltipTextExpand", "tooltipTextCollapse"]);
+        var context = React.useContext(SidePanelContext);
+        var useRTLOrigin = function () {
+            var isRTL = useIsRTL();
+            // if the direction is set to RTl, flip the origin
+            if (isRTL) {
+                return context.origin === 'left' ? 'right' : 'left';
+            }
+            // Otherwise, default to returning the origin
+            return context.origin;
+        };
+        var rtlOrigin = useRTLOrigin();
+        // Note: Depending on the collapsed width, the button could "jump" to it's final position.
+        var buttonStyle = css({
+            position: 'absolute',
+            top: space.m,
+            width: space.l,
+            right: context.state === 'collapsed' ? 0 : rtlOrigin === 'left' ? space.s : undefined,
+            left: context.state === 'collapsed' ? 0 : rtlOrigin === 'right' ? space.s : undefined,
+            margin: context.state === 'collapsed' ? 'auto' : 0,
+            transform: context.state === 'collapsed' || context.state === 'collapsing'
+                ? "scaleX(" + (rtlOrigin === 'left' ? '1' : '-1') + ")"
+                : "scaleX(" + (rtlOrigin === 'left' ? '-1' : '1') + ")",
+        });
+        return (jsx(Tooltip, { title: context.state === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, type: "muted" },
+            jsx(TertiaryButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, elemProps))));
+    },
+});

package/dist/es6/side-panel/lib/hooks.d.ts

@@ -1,3 +1,8 @@
+import * as React from 'react';
+export declare const SidePanelContext: React.Context<{
+    state: string;
+    origin: string;
+}>;
 /**
  * The optional config options for the `useSidePanel` hook
  */
@@ -70,6 +75,21 @@ export interface ControlProps {
      */
     onClick: () => void;
 }
+/**
+ *
+ * This hook manages the state and `aria-` attributes for the SidePanel. It takes an optional
+ * configuration object:
+ *
+ * ```tsx
+ * import {useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
+ *
+ * const {expanded, setExpanded, panelProps, labelProps, controlProps} = useSidePanel({
+ *   initialExpanded: false,
+ *   panelId: 'custom-panel-id',
+ *   labelId: 'custom-label-id',
+ * });
+ * ```
+ */
 export declare const useSidePanel: (config?: UseSidePanelProps | undefined) => {
     expanded: boolean;
     setExpanded: (newExpandedState: boolean) => void;

package/dist/es6/side-panel/lib/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/hooks.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY;;oCA2BsB,OAAO;;;;CA8BrD,CAAC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAGH;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY;;oCA2BsB,OAAO;;;;CA8BrD,CAAC"}

package/dist/es6/side-panel/lib/hooks.js

@@ -1,5 +1,24 @@
 import * as React from 'react';
+export var SidePanelContext = React.createContext({
+    state: 'expanded',
+    origin: 'left',
+});
 import { useUniqueId } from '@workday/canvas-kit-react/common';
+/**
+ *
+ * This hook manages the state and `aria-` attributes for the SidePanel. It takes an optional
+ * configuration object:
+ *
+ * ```tsx
+ * import {useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
+ *
+ * const {expanded, setExpanded, panelProps, labelProps, controlProps} = useSidePanel({
+ *   initialExpanded: false,
+ *   panelId: 'custom-panel-id',
+ *   labelId: 'custom-label-id',
+ * });
+ * ```
+ */
 export var useSidePanel = function (config) {
     var _a = React.useState(false), touched = _a[0], setTouched = _a[1];
     var configParams = config

package/dist/es6/status-indicator/index.d.ts

@@ -1,2 +1,4 @@
 export * from './lib/StatusIndicator';
+export * from './lib/hooks/useStatusIndicatorModel';
+export { useStatusIndicatorIcon } from './lib/StatusIndicatorIcon';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/status-indicator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../status-indicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../status-indicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAC,sBAAsB,EAAC,MAAM,2BAA2B,CAAC"}

package/dist/es6/status-indicator/index.js

@@ -1 +1,3 @@
 export * from './lib/StatusIndicator';
+export * from './lib/hooks/useStatusIndicatorModel';
+export { useStatusIndicatorIcon } from './lib/StatusIndicatorIcon';

package/dist/es6/status-indicator/lib/StatusIndicator.d.ts

@@ -13,13 +13,23 @@ export declare const useStatusIndicator: <P extends {}, R>(model: {
         variant: import("./hooks").StatusIndicatorVariant;
     };
     events: {};
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: React.Ref<R> | undefined) => {
     opacity: string | undefined;
     color: string;
     background: string;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;
 } : {});
+/**
+ * `StatusIndicator` is a container component which renders an {@link Flex} under the hood to
+ * apply spacing evenly between its children. It has a default maximum width of `200px`.
+ *
+ * ```tsx
+ * <StatusIndicator emphasis="low" variant="blue">
+ *   {Child components}
+ * </StatusIndicator>
+ * ```
+ */
 export declare const StatusIndicator: import("@workday/canvas-kit-react/common").ElementComponentM<"div", StatusIndicatorProps & Partial<{
     emphasis: import("./hooks").StatusIndicatorEmphasis;
     variant: import("./hooks").StatusIndicatorVariant;
@@ -30,6 +40,23 @@ export declare const StatusIndicator: import("@workday/canvas-kit-react/common")
     };
     events: {};
 }> & {
+    /**
+     * `StatusIndicator.Label` renders {@link Text} under the hood. It will apply an ellipsis if its
+     * contents exceed the component's maximum width.
+     *
+     * ```tsx
+     * <StatusIndicator.Label>{The text to be rendered}</StatusIndicator.Label>
+     * ```
+     */
+    Label: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./StatusIndicatorLabel").StatusIndicatorLabelProps>;
+    /**
+     * `StatusIndicator.Icon` renders {@link SystemIcon} under the hood. It's used as a decorative
+     * element to visually support the {@link StatusIndicatorLabel StatusIndicator.Label} text.
+     *
+     * ```tsx
+     * <StatusIndicator.Icon icon={uploadCloudIcon} />
+     * ```
+     */
     Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./StatusIndicatorIcon").StatusIndicatorIconProps, {
         state: {
             emphasis: import("./hooks").StatusIndicatorEmphasis;
@@ -37,6 +64,5 @@ export declare const StatusIndicator: import("@workday/canvas-kit-react/common")
         };
         events: {};
     }>;
-    Label: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./StatusIndicatorLabel").StatusIndicatorLabelProps>;
 };
 //# sourceMappingURL=StatusIndicator.d.ts.map

package/dist/es6/status-indicator/lib/StatusIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAuC,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAKtD,MAAM,WAAW,oBAAqB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAC5E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;OAO7B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;CAwB1B,CAAC"}
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAuC,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAKtD,MAAM,WAAW,oBAAqB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAC5E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;OAO7B,CAAC;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;IAKxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;;;;;;;CAmBL,CAAC"}

package/dist/es6/status-indicator/lib/StatusIndicator.js

@@ -35,13 +35,39 @@ export var useStatusIndicator = createElemPropsHook(useStatusIndicatorModel)(fun
         background: colors.background,
     };
 });
+/**
+ * `StatusIndicator` is a container component which renders an {@link Flex} under the hood to
+ * apply spacing evenly between its children. It has a default maximum width of `200px`.
+ *
+ * ```tsx
+ * <StatusIndicator emphasis="low" variant="blue">
+ *   {Child components}
+ * </StatusIndicator>
+ * ```
+ */
 export var StatusIndicator = createContainer('div')({
     displayName: 'StatusIndicator',
     modelHook: useStatusIndicatorModel,
     elemPropsHook: useStatusIndicator,
     subComponents: {
-        Icon: StatusIndicatorIcon,
+        /**
+         * `StatusIndicator.Label` renders {@link Text} under the hood. It will apply an ellipsis if its
+         * contents exceed the component's maximum width.
+         *
+         * ```tsx
+         * <StatusIndicator.Label>{The text to be rendered}</StatusIndicator.Label>
+         * ```
+         */
         Label: StatusIndicatorLabel,
+        /**
+         * `StatusIndicator.Icon` renders {@link SystemIcon} under the hood. It's used as a decorative
+         * element to visually support the {@link StatusIndicatorLabel StatusIndicator.Label} text.
+         *
+         * ```tsx
+         * <StatusIndicator.Icon icon={uploadCloudIcon} />
+         * ```
+         */
+        Icon: StatusIndicatorIcon,
     },
 })(function (_a, Element, model) {
     var children = _a.children, elemProps = __rest(_a, ["children"]);

package/dist/es6/status-indicator/lib/StatusIndicatorIcon.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SystemIconProps } from '@workday/canvas-kit-react/icon';
 export interface StatusIndicatorIconProps extends SystemIconProps {
 }
@@ -63,6 +64,18 @@ export declare const statusIndicatorColors: {
         };
     };
 };
+export declare const useStatusIndicatorIcon: <P extends {}, R>(model: {
+    state: {
+        emphasis: import("./hooks").StatusIndicatorEmphasis;
+        variant: import("./hooks").StatusIndicatorVariant;
+    };
+    events: {};
+}, elemProps?: P | undefined, ref?: React.Ref<R> | undefined) => {
+    color: string;
+    colorHover: string;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
 export declare const StatusIndicatorIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", StatusIndicatorIconProps, {
     state: {
         emphasis: import("./hooks").StatusIndicatorEmphasis;

package/dist/es6/status-indicator/lib/StatusIndicatorIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicatorIcon.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,MAAM,WAAW,wBAAyB,SAAQ,eAAe;CAAG;AAIpE,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DjC,CAAC;AAUF,eAAO,MAAM,mBAAmB;;;;;;EAK9B,CAAC"}
+{"version":3,"file":"StatusIndicatorIcon.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,MAAM,WAAW,wBAAyB,SAAQ,eAAe;CAAG;AAIpE,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DjC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;OAMjC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;EAK9B,CAAC"}

package/dist/es6/status-indicator/lib/StatusIndicatorIcon.js

@@ -76,7 +76,7 @@ export var statusIndicatorColors = {
         },
     },
 };
-var useStatusIndicatorIcon = createElemPropsHook(useStatusIndicatorModel)(function (_a) {
+export var useStatusIndicatorIcon = createElemPropsHook(useStatusIndicatorModel)(function (_a) {
     var state = _a.state;
     var colors = statusIndicatorColors[state.variant][state.emphasis];
     return {

package/dist/es6/text-area/lib/TextArea.d.ts

@@ -42,7 +42,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
         };
         events: {};
     }>;
-    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
+    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Omit<import("@workday/canvas-kit-react/text").TypeLevelProps, "size">, {
         state: {
             id: string;
             hasError: boolean;

package/dist/es6/text-area/lib/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,SAAS,EAA0B,MAAM,8CAA8C,CAAC;AAMhG,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC1E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EACL,SAAS,EAGV,MAAM,8CAA8C,CAAC;AAKtD,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC1E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}

package/dist/es6/text-area/lib/TextArea.js

@@ -22,13 +22,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { createContainer } from '@workday/canvas-kit-react/common';
-import { FormField, useFormFieldOrientation } from '@workday/canvas-kit-preview-react/form-field';
+import { FormField, useFormFieldModel, useFormFieldOrientation, } from '@workday/canvas-kit-preview-react/form-field';
 import { Flex } from '@workday/canvas-kit-react/layout';
-import { useTextAreaModel } from './hooks';
 import { TextAreaField } from './TextAreaField';
 export var TextArea = createContainer('div')({
     displayName: 'TextArea',
-    modelHook: useTextAreaModel,
+    modelHook: useFormFieldModel,
     subComponents: {
         Field: TextAreaField,
         Label: FormField.Label,

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

@@ -7,7 +7,7 @@ export interface TextInputProps extends ExtractProps<typeof FormField, never> {
      */
     children: React.ReactNode;
 }
-export declare const TextInput: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../form-field").FormFieldProps & Partial<{
+export declare const TextInput: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("@workday/canvas-kit-preview-react/form-field").FormFieldProps & Partial<{
     hasError: boolean;
     id: string;
     isRequired: boolean;
@@ -49,7 +49,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
         };
         events: {};
     }>;
-    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
+    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Omit<import("@workday/canvas-kit-react/text").TypeLevelProps, "size">, {
         state: {
             id: string;
             hasError: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,SAAS,EAA0B,MAAM,8CAA8C,CAAC;AAMhG,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC3E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EACL,SAAS,EAGV,MAAM,8CAA8C,CAAC;AAKtD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC3E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}

package/dist/es6/text-input/lib/TextInput.js

@@ -22,13 +22,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { createContainer } from '@workday/canvas-kit-react/common';
-import { FormField, useFormFieldOrientation } from '@workday/canvas-kit-preview-react/form-field';
+import { FormField, useFormFieldModel, useFormFieldOrientation, } from '@workday/canvas-kit-preview-react/form-field';
 import { Flex } from '@workday/canvas-kit-react/layout';
-import { useTextInputModel } from './hooks';
 import { TextInputField } from './TextInputField';
 export var TextInput = createContainer('div')({
     displayName: 'TextInput',
-    modelHook: useTextInputModel,
+    modelHook: useFormFieldModel,
     subComponents: {
         Field: TextInputField,
         Label: FormField.Label,

package/dist/es6/text-input/lib/TextInputField.js

@@ -15,8 +15,8 @@ import { jsx } from '@emotion/react';
 import { borderRadius, inputColors, space, type, } from '@workday/canvas-kit-react/tokens';
 import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
 import { useThemedRing } from '@workday/canvas-kit-labs-react/common';
-import { FormField } from '@workday/canvas-kit-preview-react/form-field';
-import { useTextInputField, useTextInputModel } from './hooks';
+import { FormField, useFormFieldModel } from '@workday/canvas-kit-preview-react/form-field';
+import { useTextInputField } from './hooks';
 var baseStyles = {
     transition: '0.2s box-shadow, 0.2s border-color',
     '&::placeholder': {
@@ -42,7 +42,7 @@ var baseStyles = {
 };
 export var TextInputField = createSubcomponent('input')({
     displayName: 'TextInput.Field',
-    modelHook: useTextInputModel,
+    modelHook: useFormFieldModel,
     elemPropsHook: useTextInputField,
 })(function (elemProps, Element, model) {
     var theme = useTheme();

package/dist/es6/text-input/lib/hooks/useTextInputField.d.ts

@@ -8,7 +8,7 @@ export declare const useTextInputField: <P extends {}, R>(model: {
         isRequired: boolean;
     };
     events: {};
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: import("react").Ref<R> | undefined) => {
     type: string;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;

package/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated Please use `useFormFieldModel` instead */
 export declare const useTextInputModel: (<TT_Special_Generic>(config?: (Partial<{
     hasError: boolean;
     id: string;

package/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextInputModel.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputModel.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;EAAoB,CAAC"}
+{"version":3,"file":"useTextInputModel.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputModel.ts"],"names":[],"mappings":"AAEA,yDAAyD;AACzD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;EAAoB,CAAC"}

package/dist/es6/text-input/lib/hooks/useTextInputModel.js

@@ -1,2 +1,3 @@
 import { useFormFieldModel } from '@workday/canvas-kit-preview-react/form-field';
+/** @deprecated Please use `useFormFieldModel` instead */
 export var useTextInputModel = useFormFieldModel;

package/form-field/lib/hooks/useFormFieldModel.tsx

@@ -5,7 +5,6 @@ export const useFormFieldModel = createModelHook({
     /**
      * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
      * `required` set to true, and usually some subcomponents will have a error color applied.
-     * @default false
      */
     hasError: false,
     /**
@@ -16,13 +15,12 @@ export const useFormFieldModel = createModelHook({
      * - `FormField.Hint` will set `id` to `hint-${id}`
      *
      * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
-     * @default `useUniqueId()`
+     * @default {useUniqueId}
      */
     id: '',
     /**
      * Optional flag to denote if this field is required. When true the `FormField.Input` will have
      * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
-     * @default false
      */
     isRequired: false,
   },

package/menu/lib/Menu.tsx

@@ -78,12 +78,19 @@ const List = styled('ul')({
 });
 
 /**
- * ### Deprecated Menu
+ * As of Canvas Kit v8, this component is being soft-deprecated. It will be hard-deprecated
+ * (completely removed) in v9. Please see the [upgrade
+ * guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page) for
+ * more information.
  *
- * As of Canvas Kit v8, this component is being soft-deprecated.
- * It will be hard-deprecated (completely removed) in v9. Please see the
- * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
- * for more information.
+ * `DeprecatedMenu` renders a styled `<ul role="menu">` element within a {@link Card} and follows
+ * the [Active Menu
+ * pattern](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions-active-descendant.html)
+ * using `aria-activedescendant`.
+ *
+ * Undocumented props are spread to the underlying `<ul>` element.
+ *
+ * @deprecated
  */
 export class DeprecatedMenu extends React.Component<DeprecatedMenuProps, DeprecatedMenuState> {
   private id = generateUniqueId();

package/menu/lib/MenuItem.tsx

@@ -254,12 +254,22 @@ const scrollIntoViewIfNeeded = (elem: HTMLElement, centerIfNeeded = true): void
 };
 
 /**
- * ### Deprecated Menu Item
+ * `DeprecatedMenuItem` renders an `<li>` element with the correct attributes to ensure it is
+ * accessible. If you choose to implement your own custom menu items, be sure to use semantic `<li>`
+ * elements with the following attributes:
  *
- * As of Canvas Kit v8, Menu is being soft-deprecated.
- * It will be hard-deprecated (completely removed) in v9. Please see the
- * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
- * for more information.
+ * - `role="menuitem"`
+ * - `tabindex={-1}`
+ * - `id`s following this pattern: `${MenuId}-${index}`
+ *
+ * As of Canvas Kit v8, Menu is being soft-deprecated. It will be hard-deprecated (completely
+ * removed) in v9. Please see the [upgrade
+ * guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page) for
+ * more information.
+ *
+ * Undocumented props are spread to the underlying `<li>` element.
+ *
+ * @deprecated
  */
 export class DeprecatedMenuItem extends React.Component<DeprecatedMenuItemProps> {
   ref = React.createRef<HTMLLIElement>();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "9.0.0-alpha.338-next.5+fb2aa9bc",
+  "version": "9.0.0-alpha.344-next.3+55b3fe7a",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,16 +46,16 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^9.0.0-alpha.338-next.5+fb2aa9bc",
+    "@workday/canvas-kit-react": "^9.0.0-alpha.344-next.3+55b3fe7a",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^3.0.0",
-    "@workday/canvas-kit-labs-react": "^9.0.0-alpha.338-next.5+fb2aa9bc",
+    "@workday/canvas-kit-labs-react": "^9.0.0-alpha.344-next.3+55b3fe7a",
     "formik": "^2.2.9",
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "fb2aa9bcbecaf55a5a8b6b01964b54f8c7519dd7"
+  "gitHead": "55b3fe7a6121efe010ccc7dcb961e2274c08c16d"
 }