@workday/canvas-kit-preview-react 9.0.0-alpha.336-next.6 → 9.0.0-alpha.344-next.3

package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlModel.d.ts

@@ -25,7 +25,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
      * We suggest to use the `vertical` orientation only for icon only variant.
      * @default 'horizontal'
      */
-    orientation: "horizontal" | "vertical";
+    orientation: import("@workday/canvas-kit-react/collection/lib/useBaseListModel").Orientation;
     initialSelectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
     initialUnselectedIds: string[];
     selection: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectionManager;
@@ -44,7 +44,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     }, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -67,7 +67,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     onSelectAll?: ((data: undefined, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -90,7 +90,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     onUnselectAll?: ((data: undefined, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -116,7 +116,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     }, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -141,7 +141,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     }, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -164,7 +164,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     onGoToNext?: ((data: undefined, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -187,7 +187,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     onGoToPrevious?: ((data: undefined, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -210,7 +210,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     onGoToPreviousRow?: ((data: undefined, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -233,7 +233,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     onGoToNextRow?: ((data: undefined, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -256,7 +256,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     onGoToFirst?: ((data: undefined, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -279,7 +279,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     onGoToLast?: ((data: undefined, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -302,7 +302,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     onGoToFirstOfRow?: ((data: undefined, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -325,7 +325,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     onGoToLastOfRow?: ((data: undefined, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -348,7 +348,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     onGoToNextPage?: ((data: undefined, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -371,7 +371,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     onGoToPreviousPage?: ((data: undefined, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -396,7 +396,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     }, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -421,7 +421,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     }, prevState: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -447,7 +447,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     }, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -470,7 +470,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     shouldSelectAll?: ((data: undefined, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -493,7 +493,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     shouldUnselectAll?: ((data: undefined, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -519,7 +519,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     }, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -544,7 +544,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     }, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -567,7 +567,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     shouldGoToNext?: ((data: undefined, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -590,7 +590,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     shouldGoToPrevious?: ((data: undefined, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -613,7 +613,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     shouldGoToPreviousRow?: ((data: undefined, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -636,7 +636,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     shouldGoToNextRow?: ((data: undefined, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -659,7 +659,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     shouldGoToFirst?: ((data: undefined, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -682,7 +682,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     shouldGoToLast?: ((data: undefined, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -705,7 +705,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     shouldGoToFirstOfRow?: ((data: undefined, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -728,7 +728,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     shouldGoToLastOfRow?: ((data: undefined, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -751,7 +751,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     shouldGoToNextPage?: ((data: undefined, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -774,7 +774,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     shouldGoToPreviousPage?: ((data: undefined, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -799,7 +799,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     }, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -824,7 +824,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     }, state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -848,7 +848,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -927,7 +927,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
      * We suggest to use the `vertical` orientation only for icon only variant.
      * @default 'horizontal'
      */
-    orientation: "horizontal" | "vertical";
+    orientation: import("@workday/canvas-kit-react/collection/lib/useBaseListModel").Orientation;
     initialSelectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
     initialUnselectedIds: string[];
     selection: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectionManager;
@@ -943,7 +943,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
 }, {}, {
     disabled: boolean;
     size: "small" | "medium" | "large";
-    selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+    selectedIds: string[] | "all";
     unselectedIds: string[];
     cursorId: string;
     columnCount: number;
@@ -995,7 +995,7 @@ export declare const useSegmentedControlModel: (<TT_Special_Generic>(config?: (P
     state: {
         disabled: boolean;
         size: "small" | "medium" | "large";
-        selectedIds: import("@workday/canvas-kit-react/collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;

package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlModel.js

@@ -63,7 +63,8 @@ exports.useSegmentedControlModel = common_1.createModelHook({
         },
         initialSelectedIds: config.initialValue
             ? [config.initialValue]
-            : ((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? [getId(config.items[0])]
+            : ((_a = config.items) === null || _a === void 0 ? void 0 : _a.length)
+                ? [getId(config.items[0])]
                 : [],
         shouldVirtualize: false,
     }));

package/dist/commonjs/select/lib/Select.js

@@ -7,6 +7,8 @@ var __extends = (this && this.__extends) || (function () {
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());

package/dist/commonjs/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/commonjs/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/commonjs/side-panel/lib/SidePanel.js

@@ -45,16 +45,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidePanel = exports.SidePanelContext = void 0;
+exports.SidePanel = void 0;
 /** @jsxRuntime classic */
 /** @jsx jsx */
 var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var react_1 = require("@emotion/react");
-var button_1 = require("@workday/canvas-kit-react/button");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var tooltip_1 = require("@workday/canvas-kit-react/tooltip");
+var hooks_1 = require("./hooks");
+var SidePanelToggleButton_1 = require("./SidePanelToggleButton");
 var createKeyframes = function (from, to) {
     var normalized = {
         from: typeof from === 'number' ? from + 'px' : from,
@@ -74,99 +73,77 @@ var Panel = common_1.styled('section')({
     boxSizing: 'border-box',
     height: '100%',
 });
-exports.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');
+exports.SidePanel = common_1.createComponent('section')({
+    displayName: 'SidePanel',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, _b = _a.collapsedWidth, collapsedWidth = _b === void 0 ? 64 : _b, _c = _a.expanded, expanded = _c === void 0 ? true : _c, _d = _a.expandedWidth, expandedWidth = _d === void 0 ? 320 : _d, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _e = _a.origin, origin = _e === void 0 ? 'left' : _e, _f = _a.variant, variant = _f === void 0 ? 'standard' : _f, touched = _a.touched, elemProps = __rest(_a, ["children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "variant", "touched"]);
+        var _g = React.useState(expanded ? 'expanded' : 'collapsed'), state = _g[0], setState = _g[1];
+        React.useEffect(function () {
+            if (typeof onExpandedChange !== 'undefined') {
+                onExpandedChange(expanded);
             }
-            if (event.animationName === motion.expand.name) {
-                setState('expanded');
+        }, [expanded, onExpandedChange]);
+        React.useEffect(function () {
+            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]);
+        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');
+                }
+                if (event.animationName === motion.expand.name) {
+                    setState('expanded');
+                }
             }
-        }
-        if (typeof onAnimationStart !== 'undefined') {
-            onAnimationStart(event);
-        }
-    };
-    return (react_1.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),
-        react_1.jsx(exports.SidePanelContext.Provider, { value: {
-                state: state,
-                origin: origin,
-            } }, children)));
-};
-exports.SidePanel = SidePanel;
-/**
- * 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 ? canvas_system_icons_web_1.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(exports.SidePanelContext);
-    var useRTLOrigin = function () {
-        var isRTL = common_1.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 = react_1.css({
-        position: 'absolute',
-        top: tokens_1.space.m,
-        width: tokens_1.space.l,
-        right: context.state === 'collapsed' ? 0 : rtlOrigin === 'left' ? tokens_1.space.s : undefined,
-        left: context.state === 'collapsed' ? 0 : rtlOrigin === 'right' ? tokens_1.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 (react_1.jsx(tooltip_1.Tooltip, { title: context.state === 'collapsed' ? expandLabel : collapseLabel, type: "muted" },
-        react_1.jsx(button_1.TertiaryButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
-};
-exports.SidePanel.ToggleButton = ToggleButton;
+            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');
+                }
+            }
+            if (typeof onAnimationStart !== 'undefined') {
+                onAnimationStart(event);
+            }
+        };
+        return (react_1.jsx(Panel, __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),
+            react_1.jsx(hooks_1.SidePanelContext.Provider, { value: {
+                    state: state,
+                    origin: 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_1.SidePanelToggleButton,
+    },
+});
 var templateObject_1;

package/dist/commonjs/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