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

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

@@ -1,43 +1,24 @@
-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;
-};
 import * as React from 'react';
 import { ErrorType, pickForegroundColor, styled, } from '@workday/canvas-kit-react/common';
 import { colors, commonColors, type } from '@workday/canvas-kit-react/tokens';
-var optionPadding = 6;
-var activeStyles = function (theme) {
-    var activeBgColor = theme.canvas.palette.primary.main;
+const optionPadding = 6;
+const activeStyles = (theme) => {
+    const activeBgColor = theme.canvas.palette.primary.main;
     return {
         backgroundColor: activeBgColor,
         color: pickForegroundColor(activeBgColor),
     };
 };
-var Option = styled('li')(__assign(__assign({}, type.levels.subtext.large), { cursor: 'default', 
+const Option = styled('li')({
+    ...type.levels.subtext.large,
+    cursor: 'default',
     // Apply listStyle at the list item style to ensure it's styled properly
     // in Visual Testing States
-    listStyle: 'none', 
+    listStyle: 'none',
     // In case the content of the option is empty/undefined for some reason
-    minHeight: type.levels.subtext.large.lineHeight, textAlign: 'left' }), function (_a) {
-    var disabled = _a["aria-disabled"], focused = _a.focused, interactive = _a.interactive, theme = _a.theme;
+    minHeight: type.levels.subtext.large.lineHeight,
+    textAlign: 'left',
+}, ({ 'aria-disabled': disabled, focused, interactive, theme }) => {
     if (disabled) {
         // If the option is disabled, return disabled styles...
         return {
@@ -46,36 +27,40 @@ var Option = styled('li')(__assign(__assign({}, type.levels.subtext.large), { cu
     }
     else if (focused) {
         // ...else if the option is focused, return focused styles...
-        return __assign({}, activeStyles(theme));
+        return {
+            ...activeStyles(theme),
+        };
     }
     else {
         // ...else return hover and selected (via aria-selected) styles
-        var selectedBgColor = theme.canvas.palette.primary.lightest;
-        var selectedStyles = {
+        const selectedBgColor = theme.canvas.palette.primary.lightest;
+        const selectedStyles = {
             '&[aria-selected="true"]': {
                 backgroundColor: selectedBgColor,
                 color: pickForegroundColor(selectedBgColor),
             },
         };
         // Only display interactive (hover/active) styles if the option is interactive
-        var interactiveStyles = interactive
+        const interactiveStyles = interactive
             ? {
                 '&:hover': {
                     backgroundColor: commonColors.hoverBackground,
                 },
-                '&:active, &:active[aria-selected="true"]': __assign({}, activeStyles(theme)),
+                '&:active, &:active[aria-selected="true"]': {
+                    ...activeStyles(theme),
+                },
             }
             : {};
-        return __assign(__assign({}, interactiveStyles), selectedStyles);
+        return {
+            // Place selected styles after interactive styles to have selected styles
+            // override interactive styles (subject to CSS specificity rules)
+            ...interactiveStyles,
+            ...selectedStyles,
+        };
     }
-}, function (_a) {
-    var error = _a.error;
-    return ({
-        padding: optionPadding + "px " + (error === ErrorType.Alert ? optionPadding - 1 : optionPadding) + "px",
-    });
-});
-var SelectOption = function (_a) {
-    var children = _a.children, _b = _a.focused, focused = _b === void 0 ? false : _b, _c = _a.interactive, interactive = _c === void 0 ? true : _c, optionRef = _a.optionRef, value = _a.value, elemProps = __rest(_a, ["children", "focused", "interactive", "optionRef", "value"]);
-    return (React.createElement(Option, __assign({ "data-value": value, focused: focused, interactive: interactive, ref: optionRef, role: "option" }, elemProps), children));
+}, ({ error }) => ({
+    padding: `${optionPadding}px ${error === ErrorType.Alert ? optionPadding - 1 : optionPadding}px`,
+}));
+export const SelectOption = ({ children, focused = false, interactive = true, optionRef, value, ...elemProps }) => {
+    return (React.createElement(Option, Object.assign({ "data-value": value, focused: focused, interactive: interactive, ref: optionRef, role: "option" }, elemProps), children));
 };
-export default SelectOption;

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/index.d.ts

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

package/dist/es6/side-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../side-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,iBAAiB,CAAC;AAExC,eAAe,SAAS,CAAC;AACzB,OAAO,EAAC,SAAS,EAAC,CAAC;AACnB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../side-panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}

package/dist/es6/side-panel/index.js

@@ -1,5 +1,2 @@
-import SidePanel from './lib/SidePanel';
-export default SidePanel;
-export { SidePanel };
 export * from './lib/hooks';
 export * from './lib/SidePanel';

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,26 +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;
-}>;
-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>;
 };
-export default SidePanel;
 //# 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,QAAA,MAAM,SAAS;+KAcZ,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;AAgDF,eAAe,SAAS,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,150 +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',
-});
-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;
-export default SidePanel;
-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"}