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

package/dist/es6/select/lib/scrolling.js

@@ -1,14 +1,13 @@
 // Modified from https://gist.github.com/hsablonniere/2581101
-export var scrollIntoViewIfNeeded = function (elem, centerIfNeeded) {
-    if (centerIfNeeded === void 0) { centerIfNeeded = true; }
-    var parent = elem.parentElement;
+export const scrollIntoViewIfNeeded = (elem, centerIfNeeded = true) => {
+    const parent = elem.parentElement;
     if (elem && parent) {
-        var parentComputedStyle = window.getComputedStyle(parent, null);
-        var parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10);
+        const parentComputedStyle = window.getComputedStyle(parent, null);
+        const parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10);
         // Check if elem is out of view at the top edge of the parent's viewport
-        var overTop = elem.offsetTop < parent.scrollTop + parentBorderTopWidth;
+        const overTop = elem.offsetTop < parent.scrollTop + parentBorderTopWidth;
         // Check if elem is out of view at the bottom edge of the parent's viewport
-        var overBottom = elem.offsetTop + elem.offsetHeight >
+        const overBottom = elem.offsetTop + elem.offsetHeight >
             parent.scrollTop + parentBorderTopWidth + parent.clientHeight;
         if ((overTop || overBottom) && centerIfNeeded) {
             parent.scrollTop = Math.floor(elem.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + elem.clientHeight / 2);

package/dist/es6/select/lib/utils.js

@@ -1,8 +1,8 @@
-export var getIndexByValue = function (options, value) {
+export const getIndexByValue = (options, value) => {
     if (!options || value === undefined) {
         return -1;
     }
-    for (var i = 0; i < options.length; i++) {
+    for (let i = 0; i < options.length; i++) {
         if (options[i].value === value) {
             return i;
         }
@@ -10,7 +10,7 @@ export var getIndexByValue = function (options, value) {
     return -1;
 };
 // If the value doesn't exist in the options, return index 0
-export var getCorrectedIndexByValue = function (options, value) {
-    var indexByValue = getIndexByValue(options, value);
+export const getCorrectedIndexByValue = (options, value) => {
+    const indexByValue = getIndexByValue(options, value);
     return indexByValue === -1 ? 0 : indexByValue;
 };

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

@@ -1,17 +1,9 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import * as React from 'react';
-import { jsx } from '@emotion/react';
-import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 export declare type SidePanelVariant = 'standard' | 'alternate';
 export declare type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
-export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The element the side panel will render as (e.g. 'div').
-     *
-     * @default 'section'
-     */
-    as?: React.ElementType;
+export interface SidePanelProps {
     /**
      * The width of the component (in `px` if it's a `number`) when it is collapsed.
      *
@@ -61,25 +53,20 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
      * @param boolean
      */
     touched: boolean;
+    children?: React.ReactNode;
+    onAnimationStart?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLElement>;
 }
-export declare const SidePanelContext: React.Context<{
-    state: string;
-    origin: string;
-}>;
-export declare const SidePanel: {
-    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
-    ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: ToggleButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => jsx.JSX.Element;
-};
-export declare type ToggleButtonProps = TertiaryButtonProps & {
+export declare const SidePanel: import("@workday/canvas-kit-react/common").ElementComponent<"section", SidePanelProps> & {
     /**
-     * The tooltip text to expand the side panel
-     * @default 'Expand'
-     */
-    tooltipTextExpand?: string;
-    /**
-     * The tooltip text to collapse the side panel
-     * @default 'Collapse'
+     * `SidePanel.ToggleButton` is a control that is meant to toggle between `expanded = true` and
+     * `expanded = false` states. It must be used within the `SidePanel` component as a child. Use
+     * in conjunction with `useSidePanel`'s `controlProps`, otherwise it does not come with explicit
+     * `onClick` handlers.
+     *
+     * For accessibility purposes, it must be the first focusable element. We recommend that you
+     * keep it as the first child of `SidePanel`
      */
-    tooltipTextCollapse?: string;
+    ToggleButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", import("./SidePanelToggleButton").SidePanelToggleButtonProps>;
 };
 //# sourceMappingURL=SidePanel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,GAAG,EAAuB,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAKrF,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAsCD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,eAAO,MAAM,SAAS;+KAcnB,cAAc;mHA0Gd,iBAAiB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAxBnE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,mBAAmB,GAAG;IACpD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gBAAgB,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC;CAC3D;AAsCD,eAAO,MAAM,SAAS;IAwGlB;;;;;;;;OAQG;;CAGL,CAAC"}

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

@@ -1,149 +1,112 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 { styled, useIsRTL } from '@workday/canvas-kit-react/common';
-import { css, jsx, keyframes } from '@emotion/react';
-import { TertiaryButton } from '@workday/canvas-kit-react/button';
-import { space, colors, depth } from '@workday/canvas-kit-react/tokens';
-import { transformationImportIcon } from '@workday/canvas-system-icons-web';
-import { Tooltip } from '@workday/canvas-kit-react/tooltip';
-var createKeyframes = function (from, to) {
-    var normalized = {
+import { createComponent, styled } from '@workday/canvas-kit-react/common';
+import { jsx, keyframes } from '@emotion/react';
+import { colors, depth } from '@workday/canvas-kit-react/tokens';
+import { SidePanelContext } from './hooks';
+import { SidePanelToggleButton } from './SidePanelToggleButton';
+const createKeyframes = (from, to) => {
+    const normalized = {
         from: typeof from === 'number' ? from + 'px' : from,
         to: typeof to === 'number' ? to + 'px' : to,
     };
-    return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    from {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    } to {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    }\n  "], ["\n    from {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    } to {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    }\n  "])), normalized.from, normalized.from, normalized.from, normalized.to, normalized.to, normalized.to);
+    return keyframes `
+    from {
+      width: ${normalized.from};
+      min-width: ${normalized.from};
+      max-width: ${normalized.from};
+    } to {
+      width: ${normalized.to};
+      min-width: ${normalized.to};
+      max-width: ${normalized.to};
+    }
+  `;
 };
-var containerVariantStyle = {
-    alternate: __assign({ backgroundColor: colors.frenchVanilla100 }, depth[5]),
+const containerVariantStyle = {
+    alternate: {
+        backgroundColor: colors.frenchVanilla100,
+        ...depth[5],
+    },
     standard: {
         backgroundColor: colors.soap100,
     },
 };
-var Panel = styled('section')({
+const Panel = styled('section')({
     overflow: 'hidden',
     position: 'relative',
     boxSizing: 'border-box',
     height: '100%',
 });
-export var SidePanelContext = React.createContext({
-    state: 'expanded',
-    origin: 'left',
-});
-export var SidePanel = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'section' : _b, children = _a.children, _c = _a.collapsedWidth, collapsedWidth = _c === void 0 ? 64 : _c, _d = _a.expanded, expanded = _d === void 0 ? true : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? 320 : _e, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _f = _a.origin, origin = _f === void 0 ? 'left' : _f, _g = _a.variant, variant = _g === void 0 ? 'standard' : _g, touched = _a.touched, elemProps = __rest(_a, ["as", "children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "variant", "touched"]);
-    var _h = React.useState(expanded ? 'expanded' : 'collapsed'), state = _h[0], setState = _h[1];
-    React.useEffect(function () {
-        if (typeof onExpandedChange !== 'undefined') {
-            onExpandedChange(expanded);
-        }
-    }, [expanded, onExpandedChange]);
-    React.useEffect(function () {
-        if (typeof onStateTransition !== 'undefined') {
-            onStateTransition(state);
-        }
-    }, [state, onStateTransition]);
-    var motion = {
-        collapse: createKeyframes(expandedWidth, collapsedWidth),
-        expand: createKeyframes(collapsedWidth, expandedWidth),
-    };
-    var handleAnimationEnd = function (event) {
-        if (event.currentTarget === event.target) {
-            if (event.animationName === motion.collapse.name) {
-                setState('collapsed');
+export const SidePanel = createComponent('section')({
+    displayName: 'SidePanel',
+    Component({ children, collapsedWidth = 64, expanded = true, expandedWidth = 320, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin = 'left', variant = 'standard', touched, ...elemProps }, ref, Element) {
+        const [state, setState] = React.useState(expanded ? 'expanded' : 'collapsed');
+        React.useEffect(() => {
+            if (typeof onExpandedChange !== 'undefined') {
+                onExpandedChange(expanded);
             }
-            if (event.animationName === motion.expand.name) {
-                setState('expanded');
+        }, [expanded, onExpandedChange]);
+        React.useEffect(() => {
+            if (typeof onStateTransition !== 'undefined') {
+                onStateTransition(state);
             }
-        }
-        if (typeof onAnimationEnd !== 'undefined') {
-            onAnimationEnd(event);
-        }
-    };
-    var handleAnimationStart = function (event) {
-        if (event.currentTarget === event.target) {
-            if (event.animationName === motion.collapse.name ||
-                event.animationName === motion.expand.name) {
-                setState(expanded ? 'expanding' : 'collapsing');
+        }, [state, onStateTransition]);
+        const motion = {
+            collapse: createKeyframes(expandedWidth, collapsedWidth),
+            expand: createKeyframes(collapsedWidth, expandedWidth),
+        };
+        const handleAnimationEnd = (event) => {
+            if (event.currentTarget === event.target) {
+                if (event.animationName === motion.collapse.name) {
+                    setState('collapsed');
+                }
+                if (event.animationName === motion.expand.name) {
+                    setState('expanded');
+                }
             }
-        }
-        if (typeof onAnimationStart !== 'undefined') {
-            onAnimationStart(event);
-        }
-    };
-    return (jsx(Panel, __assign({ as: as, css: [
-            {
-                width: expanded ? expandedWidth : collapsedWidth,
-                maxWidth: expanded ? expandedWidth : collapsedWidth,
-                // mounted.current will be false on the first render, thus you won't get an unwanted animation here
-                // Will animate again if you force a re-render (like in Storybook)
-                animation: touched
-                    ? (expanded ? motion.expand : motion.collapse) + " 200ms ease-out"
-                    : undefined,
-            },
-            containerVariantStyle[variant],
-        ], onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart }, elemProps),
-        jsx(SidePanelContext.Provider, { value: {
-                state: state,
-                origin: origin,
-            } }, children)));
-};
-/**
- * A toggle button styled specifically for the side panel container.
- */
-var ToggleButton = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? undefined : _b, _c = _a.icon, icon = _c === void 0 ? transformationImportIcon : _c, _d = _a.tooltipTextExpand, expandLabel = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, collapseLabel = _e === void 0 ? 'Collapse' : _e, rest = __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' ? expandLabel : collapseLabel, type: "muted" },
-        jsx(TertiaryButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
-};
-SidePanel.ToggleButton = ToggleButton;
-var templateObject_1;
+            if (typeof onAnimationEnd !== 'undefined') {
+                onAnimationEnd(event);
+            }
+        };
+        const handleAnimationStart = (event) => {
+            if (event.currentTarget === event.target) {
+                if (event.animationName === motion.collapse.name ||
+                    event.animationName === motion.expand.name) {
+                    setState(expanded ? 'expanding' : 'collapsing');
+                }
+            }
+            if (typeof onAnimationStart !== 'undefined') {
+                onAnimationStart(event);
+            }
+        };
+        return (jsx(Panel, Object.assign({ ref: ref, as: Element, css: [
+                {
+                    width: expanded ? expandedWidth : collapsedWidth,
+                    maxWidth: expanded ? expandedWidth : collapsedWidth,
+                    // mounted.current will be false on the first render, thus you won't get an unwanted animation here
+                    // Will animate again if you force a re-render (like in Storybook)
+                    animation: touched
+                        ? `${expanded ? motion.expand : motion.collapse} 200ms ease-out`
+                        : undefined,
+                },
+                containerVariantStyle[variant],
+            ], onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart }, elemProps),
+            jsx(SidePanelContext.Provider, { value: {
+                    state,
+                    origin,
+                } }, children)));
+    },
+    subComponents: {
+        /**
+         * `SidePanel.ToggleButton` is a control that is meant to toggle between `expanded = true` and
+         * `expanded = false` states. It must be used within the `SidePanel` component as a child. Use
+         * in conjunction with `useSidePanel`'s `controlProps`, otherwise it does not come with explicit
+         * `onClick` handlers.
+         *
+         * For accessibility purposes, it must be the first focusable element. We recommend that you
+         * keep it as the first child of `SidePanel`
+         */
+        ToggleButton: SidePanelToggleButton,
+    },
+});

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

@@ -0,0 +1,17 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
+export interface SidePanelToggleButtonProps extends ExtractProps<typeof TertiaryButton, never> {
+    /**
+     * The tooltip text to expand the side panel
+     */
+    tooltipTextExpand?: string;
+    /**
+     * The tooltip text to collapse the side panel
+     */
+    tooltipTextCollapse?: string;
+}
+/**
+ * A toggle button styled specifically for the side panel container.
+ */
+export declare const SidePanelToggleButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", SidePanelToggleButtonProps>;
+//# sourceMappingURL=SidePanelToggleButton.d.ts.map

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,43 @@
+/** @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 const SidePanelToggleButton = createComponent('button')({
+    displayName: 'SidePanel.ToggleButton',
+    Component({ variant = undefined, icon = transformationImportIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', ...elemProps }) {
+        const context = React.useContext(SidePanelContext);
+        const useRTLOrigin = () => {
+            const 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;
+        };
+        const rtlOrigin = useRTLOrigin();
+        // Note: Depending on the collapsed width, the button could "jump" to it's final position.
+        const 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, Object.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,51 +1,70 @@
 import * as React from 'react';
+export const SidePanelContext = React.createContext({
+    state: 'expanded',
+    origin: 'left',
+});
 import { useUniqueId } from '@workday/canvas-kit-react/common';
-export var useSidePanel = function (config) {
-    var _a = React.useState(false), touched = _a[0], setTouched = _a[1];
-    var configParams = config
+/**
+ *
+ * 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 const useSidePanel = (config) => {
+    const [touched, setTouched] = React.useState(false);
+    const configParams = config
         ? config
         : {
             initialExpanded: true,
             panelId: undefined,
             labelId: undefined,
         };
-    var _b = configParams.initialExpanded, initialExpanded = _b === void 0 ? true : _b, panelIdParam = configParams.panelId, labelIdParam = configParams.labelId;
-    var _c = React.useState(initialExpanded), expanded = _c[0], setExpanded = _c[1];
-    var panelId = useUniqueId(panelIdParam);
-    var labelId = useUniqueId(labelIdParam);
+    const { initialExpanded = true, panelId: panelIdParam, labelId: labelIdParam } = configParams;
+    const [expanded, setExpanded] = React.useState(initialExpanded);
+    const panelId = useUniqueId(panelIdParam);
+    const labelId = useUniqueId(labelIdParam);
     // This prevents keyframes animations from rendering prematurely
-    var handleSetTouched = function () {
+    const handleSetTouched = () => {
         if (touched === false) {
             setTouched(true);
         }
     };
-    var handleClick = function () {
+    const handleClick = () => {
         handleSetExpanded(!expanded);
     };
-    var handleSetExpanded = function (newExpandedState) {
+    const handleSetExpanded = (newExpandedState) => {
         handleSetTouched();
         setExpanded(newExpandedState);
     };
-    var panelProps = {
+    const panelProps = {
         expanded: expanded,
         id: panelId,
         'aria-labelledby': labelId,
-        touched: touched,
+        touched,
     };
-    var labelProps = {
+    const labelProps = {
         id: labelId,
     };
-    var controlProps = {
+    const controlProps = {
         'aria-controls': panelId,
         'aria-expanded': expanded,
         'aria-labelledby': labelId,
         onClick: handleClick,
     };
     return {
-        expanded: expanded,
+        expanded,
         setExpanded: handleSetExpanded,
-        panelProps: panelProps,
-        labelProps: labelProps,
-        controlProps: controlProps,
+        panelProps,
+        labelProps,
+        controlProps,
     };
 };

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

@@ -1,25 +1,33 @@
 import React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { HStack } from '@workday/canvas-kit-react/layout';
-export interface StatusIndicatorProps extends Partial<ExtractProps<typeof HStack, never>> {
+import { Flex } from '@workday/canvas-kit-react/layout';
+export interface StatusIndicatorProps extends ExtractProps<typeof Flex, never> {
     /**
      * Children of the `StatusIndicator`. Can contain a `StatusIndicator.Label` and optionally a `StatusIndicator.Icon`.
      */
     children: React.ReactNode;
 }
-export declare const useStatusIndicator: <P extends {}, R>(model: {
+export declare const useStatusIndicator: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         emphasis: import("./hooks").StatusIndicatorEmphasis;
         variant: import("./hooks").StatusIndicatorVariant;
     };
     events: {};
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | 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 +38,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 +62,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