@workday/canvas-kit-labs-react 14.2.0-0055-next.0 → 14.2.0-0058-next.0

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

@@ -0,0 +1,3 @@
+export * from './lib/SidePanel';
+export * from './lib/SidePanelToggleButton';
+export * from './lib/useSidePanelModel';

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

@@ -0,0 +1,205 @@
+import * as React from 'react';
+/**
+ * Adds the necessary props to the SidePanel container element.
+ * This includes the `id` and `aria-labelledby` attributes for accessibility.
+ */
+export declare const useSidePanelContainer: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    };
+    events: {
+        expand(): void;
+        collapse(): void;
+        handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
+        handleAnimationStart(): undefined;
+    };
+}, {
+    readonly id: string;
+    readonly 'aria-labelledby': string;
+    readonly onTransitionEnd: (event: React.TransitionEvent<HTMLDivElement>) => React.TransitionEvent<HTMLDivElement>;
+}>;
+export type SidePanelVariant = 'standard' | 'alternate';
+export interface SidePanelProps {
+    /**
+     * The width of the component (in `px` if it's a `number`) when it is collapsed.
+     *
+     * @default 64
+     */
+    collapsedWidth?: number | string;
+    /**
+     * The width of the component (in `px` if it's a `number`) when it is expanded.
+     *
+     * @default 320
+     */
+    expandedWidth?: number | string;
+    /**
+     * The style variant of the side panel. 'standard' uses a lighter gray background (`system.color.bg.alt.softer`), no depth. 'alternate' uses a white background with depth (`system.color.bg.default` and level 5 depth).
+     *
+     * @default 'standard'
+     */
+    variant?: SidePanelVariant;
+    children?: React.ReactNode;
+}
+export declare const panelStencil: import("@workday/canvas-kit-styling").Stencil<{
+    variant: {
+        alternate: {
+            backgroundColor: "--cnvs-sys-color-bg-default";
+            boxShadow: "--cnvs-sys-depth-5";
+        };
+        standard: {
+            backgroundColor: "--cnvs-sys-color-bg-alt-softer";
+        };
+    };
+    expanded: {
+        expanded: ({ expandedWidth }: {
+            expandedWidth: `--${string}`;
+            collapsedWidth: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            width: `--${string}`;
+            maxWidth: `--${string}`;
+        };
+        collapsed: ({ collapsedWidth }: {
+            expandedWidth: `--${string}`;
+            collapsedWidth: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            width: `--${string}`;
+            maxWidth: `--${string}`;
+        };
+        expanding: ({ expandedWidth }: {
+            expandedWidth: `--${string}`;
+            collapsedWidth: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            width: `--${string}`;
+            maxWidth: `--${string}`;
+        };
+        collapsing: ({ collapsedWidth }: {
+            expandedWidth: `--${string}`;
+            collapsedWidth: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            width: `--${string}`;
+            maxWidth: `--${string}`;
+        };
+    };
+}, {}, {
+    expandedWidth: string;
+    collapsedWidth: string;
+}, never, never>;
+export declare const SidePanel: import("@workday/canvas-kit-react/common").ElementComponentM<"section", SidePanelProps & Partial<{
+    initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+    origin: "end" | "start";
+    panelId: string;
+    labelId: string;
+    onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+}> & {
+    onExpand?: ((data: undefined, prevState: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => void) | undefined;
+    onCollapse?: ((data: undefined, prevState: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => void) | undefined;
+    onHandleAnimationEnd?: ((data: React.TransitionEvent<HTMLDivElement>, prevState: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => void) | undefined;
+    onHandleAnimationStart?: ((data: undefined, prevState: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => void) | undefined;
+} & {
+    shouldExpand?: ((data: undefined, state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => boolean) | undefined;
+    shouldCollapse?: ((data: undefined, state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => boolean) | undefined;
+    shouldHandleAnimationEnd?: ((data: React.TransitionEvent<HTMLDivElement>, state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => boolean) | undefined;
+    shouldHandleAnimationStart?: ((data: undefined, state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    }) => boolean) | undefined;
+}, {
+    state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    };
+    events: {
+        expand(): void;
+        collapse(): void;
+        handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
+        handleAnimationStart(): undefined;
+    };
+}> & {
+    /**
+     * `SidePanel.ToggleButton` is a control that toggles between expanded and collapsed states.
+     * It must be used within the `SidePanel` component as a child. For accessibility purposes,
+     * it should be the first focusable element in the panel.
+     *
+     * The button automatically receives `aria-controls`, `aria-expanded`, and `aria-labelledby`
+     * attributes from the model.
+     */
+    ToggleButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./SidePanelToggleButton").SidePanelToggleButtonProps, {
+        state: {
+            panelId: string;
+            labelId: string;
+            transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+            initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+            origin: "end" | "start";
+            onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+        };
+        events: {
+            expand(): void;
+            collapse(): void;
+            handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
+            handleAnimationStart(): undefined;
+        };
+    }>;
+};
+//# sourceMappingURL=SidePanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;EAMhC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AAExD,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAyCvB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKlB;;;;;;;OAOG;;;;;;;;;;;;;;;;;CAgCN,CAAC"}

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContainer, createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { useSidePanelModel } from './useSidePanelModel';
+import { SidePanelToggleButton } from './SidePanelToggleButton';
+/**
+ * Adds the necessary props to the SidePanel container element.
+ * This includes the `id` and `aria-labelledby` attributes for accessibility.
+ */
+export const useSidePanelContainer = createElemPropsHook(useSidePanelModel)(({ state, events }) => {
+    return {
+        id: state.panelId,
+        'aria-labelledby': state.labelId,
+        onTransitionEnd: events.handleAnimationEnd,
+    };
+});
+export const panelStencil = createStencil({
+    vars: {
+        expandedWidth: '',
+        collapsedWidth: '',
+    },
+    base: { name: "23943w", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
+    modifiers: {
+        variant: {
+            alternate: { name: "2bjjfl", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
+            standard: { name: "1lsdyl", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
+        },
+        expanded: {
+            expanded: { name: "i9o5v", styles: "width:var(--expandedWidth-panel-46751f);max-width:var(--expandedWidth-panel-46751f);" },
+            collapsed: { name: "3tfzp8", styles: "width:var(--collapsedWidth-panel-46751f);max-width:var(--collapsedWidth-panel-46751f);" },
+            expanding: { name: "42gyid", styles: "width:var(--expandedWidth-panel-46751f);max-width:var(--expandedWidth-panel-46751f);" },
+            collapsing: { name: "mk8xq", styles: "width:var(--collapsedWidth-panel-46751f);max-width:var(--collapsedWidth-panel-46751f);" }
+        }
+    }
+}, "panel-46751f");
+export const SidePanel = createContainer('section')({
+    displayName: 'SidePanel',
+    modelHook: useSidePanelModel,
+    elemPropsHook: useSidePanelContainer,
+    subComponents: {
+        /**
+         * `SidePanel.ToggleButton` is a control that toggles between expanded and collapsed states.
+         * It must be used within the `SidePanel` component as a child. For accessibility purposes,
+         * it should be the first focusable element in the panel.
+         *
+         * The button automatically receives `aria-controls`, `aria-expanded`, and `aria-labelledby`
+         * attributes from the model.
+         */
+        ToggleButton: SidePanelToggleButton,
+    },
+})(({ collapsedWidth = 64, expandedWidth = 320, variant = 'standard', children, ...elemProps }, Element, model) => {
+    return (_jsx(Element, { ...handleCsProp(elemProps, [
+            panelStencil({
+                expanded: model.state.transitionState,
+                variant,
+                expandedWidth: typeof expandedWidth === 'number' ? px2rem(expandedWidth) : expandedWidth,
+                collapsedWidth: typeof collapsedWidth === 'number' ? px2rem(collapsedWidth) : collapsedWidth,
+            }),
+        ]), children: children }));
+});

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

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { TooltipProps } from '@workday/canvas-kit-react/tooltip';
+export interface SidePanelToggleButtonProps extends ExtractProps<typeof TertiaryButton> {
+    /**
+     * The tooltip text to expand the side panel
+     */
+    tooltipTextExpand?: string;
+    /**
+     * The tooltip text to collapse the side panel
+     */
+    tooltipTextCollapse?: string;
+    tooltipProps?: Omit<TooltipProps, 'children'>;
+}
+export declare const sidePanelToggleButtonStencil: import("@workday/canvas-kit-styling").Stencil<{
+    state: {
+        collapsing: {
+            margin: number;
+            transform: string;
+            ':dir(rtl)': {
+                transform: string;
+            };
+        };
+        collapsed: {
+            margin: string;
+            insetInlineStart: number;
+            insetInlineEnd: number;
+            transform: string;
+            ':dir(rtl)': {
+                transform: string;
+            };
+        };
+        expanded: {
+            margin: number;
+            transform: string;
+            ':dir(rtl)': {
+                transform: string;
+            };
+        };
+        expanding: {
+            margin: number;
+            transform: string;
+            ':dir(rtl)': {
+                transform: string;
+            };
+        };
+    };
+    origin: {
+        start: {};
+        end: {
+            transform: string;
+            ':dir(rtl)': {
+                transform: string;
+            };
+        };
+    };
+}, {}, {}, never, never>;
+export declare const useSidePanelToggleButtonElemProps: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    };
+    events: {
+        expand(): void;
+        collapse(): void;
+        handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
+        handleAnimationStart(): undefined;
+    };
+}, {
+    readonly 'aria-controls': string;
+    readonly 'aria-expanded': boolean;
+    readonly 'aria-labelledby': string;
+}>;
+export declare const SidePanelToggleButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", SidePanelToggleButtonProps, {
+    state: {
+        panelId: string;
+        labelId: string;
+        transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
+        origin: "end" | "start";
+        onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
+    };
+    events: {
+        expand(): void;
+        collapse(): void;
+        handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
+        handleAnimationStart(): undefined;
+    };
+}>;
+//# 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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAKxE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACrF;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA+FvC,CAAC;AAEH,eAAO,MAAM,iCAAiC;;;;;;;;;;;;;;;;;;;EAQ7C,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;EA4CjC,CAAC"}

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { transformationImportIcon } from '@workday/canvas-system-icons-web';
+import { Tooltip } from '@workday/canvas-kit-react/tooltip';
+import { useSidePanelModel } from './useSidePanelModel';
+import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+export const sidePanelToggleButtonStencil = createStencil({
+    base: { name: "1etqp8", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
+    modifiers: {
+        state: {
+            collapsing: { name: "30y959", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            collapsed: { name: "xhos1", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            expanded: { name: "1ksb21", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
+            expanding: { name: "2ew0xk", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+        },
+        origin: {
+            start: { name: "3x19g6", styles: "" },
+            end: { name: "1x1y4h", styles: "transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" }
+        }
+    },
+    compound: [
+        {
+            modifiers: { state: 'collapsed', origin: 'end' },
+            styles: { name: "2lkeu7", styles: "transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+        },
+        {
+            modifiers: { state: 'collapsing', origin: 'end' },
+            styles: { name: "42drd4", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
+        },
+        {
+            modifiers: { state: 'expanded', origin: 'end' },
+            styles: { name: "16e0u", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
+        },
+        {
+            modifiers: { state: 'expanding', origin: 'end' },
+            styles: { name: "1qlm4j", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
+        }
+    ]
+}, "side-panel-toggle-button-2c790f");
+export const useSidePanelToggleButtonElemProps = createElemPropsHook(useSidePanelModel)(({ state }) => {
+    return {
+        'aria-controls': state.panelId,
+        'aria-expanded': state.transitionState === 'expanded',
+        'aria-labelledby': state.labelId,
+    };
+});
+export const SidePanelToggleButton = createSubcomponent('button')({
+    displayName: 'SidePanel.ToggleButton',
+    modelHook: useSidePanelModel,
+    elemPropsHook: useSidePanelToggleButtonElemProps,
+})(({ variant = undefined, icon = transformationImportIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', tooltipProps, ...elemProps }, Element, model) => {
+    return (_jsx(Tooltip, { type: "muted", ...tooltipProps, title: model.state.transitionState === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, children: _jsx(TertiaryButton, { icon: icon, as: Element, variant: variant, ...handleCsProp(elemProps, sidePanelToggleButtonStencil({
+                state: model.state.transitionState,
+                origin: model.state.origin,
+            })), onClick: (event) => {
+                var _a;
+                (_a = elemProps.onClick) === null || _a === void 0 ? void 0 : _a.call(elemProps, event);
+                model.events.handleAnimationStart();
+            } }) }));
+});