@workday/canvas-kit-react 15.0.0-alpha.1326-next.0 → 15.0.0

package/dist/commonjs/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;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAOxE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACrF;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6FvC,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;EAMnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;EA+CjC,CAAC"}

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

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidePanelToggleButton = exports.useSidePanelToggleButton = exports.sidePanelToggleButtonStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@workday/canvas-kit-react/button");
+const common_1 = require("@workday/canvas-kit-react/common");
+const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const useSidePanelModel_1 = require("./useSidePanelModel");
+exports.sidePanelToggleButtonStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "1nsz8h", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));width:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));inset-inline-end:var(--cnvs-base-size-150, 0.75rem);" },
+    modifiers: {
+        state: {
+            collapsing: { name: "31oag0", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            collapsed: { name: "1xfxrw", styles: "margin:auto;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            expanded: { name: "45mz7a", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
+            expanding: { name: "33wp2q", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+        },
+        origin: {
+            start: { name: "2mz1bf", styles: "" },
+            end: { name: "3m1yql", styles: "transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" }
+        }
+    },
+    compound: [
+        {
+            modifiers: { state: 'collapsed', origin: 'end' },
+            styles: { name: "2426dx", styles: "transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+        },
+        {
+            modifiers: { state: 'collapsing', origin: 'end' },
+            styles: { name: "49lrdw", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-base-size-150, 0.75rem);:dir(rtl){transform:scaleX(1);inset-inline-end:var(--cnvs-base-size-150, 0.75rem);}" }
+        },
+        {
+            modifiers: { state: 'expanded', origin: 'end' },
+            styles: { name: "1yhzb2", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-base-size-150, 0.75rem);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-base-size-150, 0.75rem);}" }
+        },
+        {
+            modifiers: { state: 'expanding', origin: 'end' },
+            styles: { name: "4efx8t", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-base-size-150, 0.75rem);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-base-size-150, 0.75rem);}" }
+        }
+    ]
+}, "side-panel-toggle-button-e78d70");
+exports.useSidePanelToggleButton = (0, common_1.createElemPropsHook)(useSidePanelModel_1.useSidePanelModel)(({ state }) => {
+    return {
+        'aria-controls': state.panelId,
+        'aria-pressed': state.transitionState === 'collapsed',
+        'aria-describedby': state.labelId,
+    };
+});
+exports.SidePanelToggleButton = (0, common_1.createSubcomponent)('button')({
+    displayName: 'SidePanel.ToggleButton',
+    modelHook: useSidePanelModel_1.useSidePanelModel,
+    elemPropsHook: exports.useSidePanelToggleButton,
+})(({ variant = undefined, icon = canvas_system_icons_web_1.extendIcon, tooltipTextExpand = 'Expand View', tooltipTextCollapse = 'Collapse View', tooltipProps, tooltipText, ...elemProps }, Element, model) => {
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { type: "muted", ...tooltipProps, title: tooltipText ||
+            (model.state.transitionState === 'expanded' ? tooltipTextCollapse : tooltipTextExpand), children: (0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { icon: icon, as: Element, variant: variant, "aria-label": tooltipText, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.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();
+            } }) }));
+});

package/dist/commonjs/side-panel/lib/useSidePanelModel.d.ts

@@ -0,0 +1,514 @@
+import * as React from 'react';
+/**
+ * The transition states of the SidePanel during expand/collapse animations.
+ * - `expanded`: Panel is fully expanded
+ * - `expanding`: Panel is animating from collapsed to expanded
+ * - `collapsed`: Panel is fully collapsed
+ * - `collapsing`: Panel is animating from expanded to collapsed
+ */
+export type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
+export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<{
+    /**
+     * The initial transition state of the SidePanel.
+     * @default 'expanded'
+     */
+    initialTransitionState: SidePanelTransitionStates;
+    /**
+     * Which side the SidePanel originates from. Uses logical properties for RTL support.
+     * - `start`: Left side in LTR, right side in RTL
+     * - `end`: Right side in LTR, left side in RTL
+     * @default 'start'
+     */
+    origin: "end" | "start";
+    /**
+     * The unique ID for the panel element. If not provided, a unique ID will be generated.
+     * This ID is used for the `aria-controls` attribute on the toggle button.
+     */
+    panelId: string;
+    /**
+     * The unique ID for the panel's label element. If not provided, a unique ID will be generated.
+     * This ID is used for the `aria-labelledby` attribute on both the panel and toggle button.
+     */
+    labelId: string;
+    /**
+     * Callback fired when the SidePanel's transition state changes.
+     * Use this to react to state changes including animation states.
+     * @param state The new transition state
+     */
+    onStateTransition(state: SidePanelTransitionStates): void;
+}> & {
+    onExpand?: ((data: undefined, prevState: {
+        /**
+         * The unique ID for the panel element. Used for `aria-controls` on the toggle button.
+         */
+        panelId: string;
+        /**
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
+         * and toggle button to provide an accessible name.
+         */
+        labelId: string;
+        /**
+         * The current transition state of the SidePanel. This tracks both the expanded/collapsed
+         * state and the animation states (expanding/collapsing).
+         */
+        transitionState: SidePanelTransitionStates;
+        /**
+         * The initial transition state of the SidePanel.
+         * @default 'expanded'
+         */
+        initialTransitionState: SidePanelTransitionStates;
+        /**
+         * Which side the SidePanel originates from. Uses logical properties for RTL support.
+         * - `start`: Left side in LTR, right side in RTL
+         * - `end`: Right side in LTR, left side in RTL
+         * @default 'start'
+         */
+        origin: "end" | "start";
+        /**
+         * Callback fired when the SidePanel's transition state changes.
+         * Use this to react to state changes including animation states.
+         * @param state The new transition state
+         */
+        onStateTransition(state: SidePanelTransitionStates): void;
+    }) => void) | undefined;
+    onCollapse?: ((data: undefined, prevState: {
+        /**
+         * The unique ID for the panel element. Used for `aria-controls` on the toggle button.
+         */
+        panelId: string;
+        /**
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
+         * and toggle button to provide an accessible name.
+         */
+        labelId: string;
+        /**
+         * The current transition state of the SidePanel. This tracks both the expanded/collapsed
+         * state and the animation states (expanding/collapsing).
+         */
+        transitionState: SidePanelTransitionStates;
+        /**
+         * The initial transition state of the SidePanel.
+         * @default 'expanded'
+         */
+        initialTransitionState: SidePanelTransitionStates;
+        /**
+         * Which side the SidePanel originates from. Uses logical properties for RTL support.
+         * - `start`: Left side in LTR, right side in RTL
+         * - `end`: Right side in LTR, left side in RTL
+         * @default 'start'
+         */
+        origin: "end" | "start";
+        /**
+         * Callback fired when the SidePanel's transition state changes.
+         * Use this to react to state changes including animation states.
+         * @param state The new transition state
+         */
+        onStateTransition(state: SidePanelTransitionStates): void;
+    }) => void) | undefined;
+    onHandleAnimationEnd?: ((data: React.TransitionEvent<HTMLDivElement>, prevState: {
+        /**
+         * The unique ID for the panel element. Used for `aria-controls` on the toggle button.
+         */
+        panelId: string;
+        /**
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
+         * and toggle button to provide an accessible name.
+         */
+        labelId: string;
+        /**
+         * The current transition state of the SidePanel. This tracks both the expanded/collapsed
+         * state and the animation states (expanding/collapsing).
+         */
+        transitionState: SidePanelTransitionStates;
+        /**
+         * The initial transition state of the SidePanel.
+         * @default 'expanded'
+         */
+        initialTransitionState: SidePanelTransitionStates;
+        /**
+         * Which side the SidePanel originates from. Uses logical properties for RTL support.
+         * - `start`: Left side in LTR, right side in RTL
+         * - `end`: Right side in LTR, left side in RTL
+         * @default 'start'
+         */
+        origin: "end" | "start";
+        /**
+         * Callback fired when the SidePanel's transition state changes.
+         * Use this to react to state changes including animation states.
+         * @param state The new transition state
+         */
+        onStateTransition(state: SidePanelTransitionStates): void;
+    }) => void) | undefined;
+    onHandleAnimationStart?: ((data: undefined, prevState: {
+        /**
+         * The unique ID for the panel element. Used for `aria-controls` on the toggle button.
+         */
+        panelId: string;
+        /**
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
+         * and toggle button to provide an accessible name.
+         */
+        labelId: string;
+        /**
+         * The current transition state of the SidePanel. This tracks both the expanded/collapsed
+         * state and the animation states (expanding/collapsing).
+         */
+        transitionState: SidePanelTransitionStates;
+        /**
+         * The initial transition state of the SidePanel.
+         * @default 'expanded'
+         */
+        initialTransitionState: SidePanelTransitionStates;
+        /**
+         * Which side the SidePanel originates from. Uses logical properties for RTL support.
+         * - `start`: Left side in LTR, right side in RTL
+         * - `end`: Right side in LTR, left side in RTL
+         * @default 'start'
+         */
+        origin: "end" | "start";
+        /**
+         * Callback fired when the SidePanel's transition state changes.
+         * Use this to react to state changes including animation states.
+         * @param state The new transition state
+         */
+        onStateTransition(state: SidePanelTransitionStates): void;
+    }) => void) | undefined;
+} & {
+    shouldExpand?: ((data: undefined, state: {
+        /**
+         * The unique ID for the panel element. Used for `aria-controls` on the toggle button.
+         */
+        panelId: string;
+        /**
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
+         * and toggle button to provide an accessible name.
+         */
+        labelId: string;
+        /**
+         * The current transition state of the SidePanel. This tracks both the expanded/collapsed
+         * state and the animation states (expanding/collapsing).
+         */
+        transitionState: SidePanelTransitionStates;
+        /**
+         * The initial transition state of the SidePanel.
+         * @default 'expanded'
+         */
+        initialTransitionState: SidePanelTransitionStates;
+        /**
+         * Which side the SidePanel originates from. Uses logical properties for RTL support.
+         * - `start`: Left side in LTR, right side in RTL
+         * - `end`: Right side in LTR, left side in RTL
+         * @default 'start'
+         */
+        origin: "end" | "start";
+        /**
+         * Callback fired when the SidePanel's transition state changes.
+         * Use this to react to state changes including animation states.
+         * @param state The new transition state
+         */
+        onStateTransition(state: SidePanelTransitionStates): void;
+    }) => boolean) | undefined;
+    shouldCollapse?: ((data: undefined, state: {
+        /**
+         * The unique ID for the panel element. Used for `aria-controls` on the toggle button.
+         */
+        panelId: string;
+        /**
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
+         * and toggle button to provide an accessible name.
+         */
+        labelId: string;
+        /**
+         * The current transition state of the SidePanel. This tracks both the expanded/collapsed
+         * state and the animation states (expanding/collapsing).
+         */
+        transitionState: SidePanelTransitionStates;
+        /**
+         * The initial transition state of the SidePanel.
+         * @default 'expanded'
+         */
+        initialTransitionState: SidePanelTransitionStates;
+        /**
+         * Which side the SidePanel originates from. Uses logical properties for RTL support.
+         * - `start`: Left side in LTR, right side in RTL
+         * - `end`: Right side in LTR, left side in RTL
+         * @default 'start'
+         */
+        origin: "end" | "start";
+        /**
+         * Callback fired when the SidePanel's transition state changes.
+         * Use this to react to state changes including animation states.
+         * @param state The new transition state
+         */
+        onStateTransition(state: SidePanelTransitionStates): void;
+    }) => boolean) | undefined;
+    shouldHandleAnimationEnd?: ((data: React.TransitionEvent<HTMLDivElement>, state: {
+        /**
+         * The unique ID for the panel element. Used for `aria-controls` on the toggle button.
+         */
+        panelId: string;
+        /**
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
+         * and toggle button to provide an accessible name.
+         */
+        labelId: string;
+        /**
+         * The current transition state of the SidePanel. This tracks both the expanded/collapsed
+         * state and the animation states (expanding/collapsing).
+         */
+        transitionState: SidePanelTransitionStates;
+        /**
+         * The initial transition state of the SidePanel.
+         * @default 'expanded'
+         */
+        initialTransitionState: SidePanelTransitionStates;
+        /**
+         * Which side the SidePanel originates from. Uses logical properties for RTL support.
+         * - `start`: Left side in LTR, right side in RTL
+         * - `end`: Right side in LTR, left side in RTL
+         * @default 'start'
+         */
+        origin: "end" | "start";
+        /**
+         * Callback fired when the SidePanel's transition state changes.
+         * Use this to react to state changes including animation states.
+         * @param state The new transition state
+         */
+        onStateTransition(state: SidePanelTransitionStates): void;
+    }) => boolean) | undefined;
+    shouldHandleAnimationStart?: ((data: undefined, state: {
+        /**
+         * The unique ID for the panel element. Used for `aria-controls` on the toggle button.
+         */
+        panelId: string;
+        /**
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
+         * and toggle button to provide an accessible name.
+         */
+        labelId: string;
+        /**
+         * The current transition state of the SidePanel. This tracks both the expanded/collapsed
+         * state and the animation states (expanding/collapsing).
+         */
+        transitionState: SidePanelTransitionStates;
+        /**
+         * The initial transition state of the SidePanel.
+         * @default 'expanded'
+         */
+        initialTransitionState: SidePanelTransitionStates;
+        /**
+         * Which side the SidePanel originates from. Uses logical properties for RTL support.
+         * - `start`: Left side in LTR, right side in RTL
+         * - `end`: Right side in LTR, left side in RTL
+         * @default 'start'
+         */
+        origin: "end" | "start";
+        /**
+         * Callback fired when the SidePanel's transition state changes.
+         * Use this to react to state changes including animation states.
+         * @param state The new transition state
+         */
+        onStateTransition(state: SidePanelTransitionStates): void;
+    }) => boolean) | undefined;
+}) | undefined) => {
+    state: {
+        /**
+         * The unique ID for the panel element. Used for `aria-controls` on the toggle button.
+         */
+        panelId: string;
+        /**
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
+         * and toggle button to provide an accessible name.
+         */
+        labelId: string;
+        /**
+         * The current transition state of the SidePanel. This tracks both the expanded/collapsed
+         * state and the animation states (expanding/collapsing).
+         */
+        transitionState: SidePanelTransitionStates;
+        /**
+         * The initial transition state of the SidePanel.
+         * @default 'expanded'
+         */
+        initialTransitionState: SidePanelTransitionStates;
+        /**
+         * Which side the SidePanel originates from. Uses logical properties for RTL support.
+         * - `start`: Left side in LTR, right side in RTL
+         * - `end`: Right side in LTR, left side in RTL
+         * @default 'start'
+         */
+        origin: "end" | "start";
+        /**
+         * Callback fired when the SidePanel's transition state changes.
+         * Use this to react to state changes including animation states.
+         * @param state The new transition state
+         */
+        onStateTransition(state: SidePanelTransitionStates): void;
+    };
+    events: {
+        /**
+         * Expand the SidePanel. This sets the state directly to `expanded` without animation.
+         * For animated expansion, use the toggle button which triggers `setExpandingState`.
+         */
+        expand(): void;
+        /**
+         * Collapse the SidePanel. This sets the state directly to `collapsed` without animation.
+         * For animated collapse, use the toggle button which triggers `setCollapsingState`.
+         */
+        collapse(): void;
+        /**
+         * Handler for the CSS transition end event. This should be called when the width
+         * transition completes to finalize the state from `expanding` to `expanded` or
+         * from `collapsing` to `collapsed`.
+         */
+        handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
+        /**
+         * Triggers the start of a transition animation. This toggles between expanding
+         * and collapsing states based on the current state.
+         */
+        handleAnimationStart(): undefined;
+    };
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    /**
+     * The initial transition state of the SidePanel.
+     * @default 'expanded'
+     */
+    initialTransitionState: SidePanelTransitionStates;
+    /**
+     * Which side the SidePanel originates from. Uses logical properties for RTL support.
+     * - `start`: Left side in LTR, right side in RTL
+     * - `end`: Right side in LTR, left side in RTL
+     * @default 'start'
+     */
+    origin: "end" | "start";
+    /**
+     * The unique ID for the panel element. If not provided, a unique ID will be generated.
+     * This ID is used for the `aria-controls` attribute on the toggle button.
+     */
+    panelId: string;
+    /**
+     * The unique ID for the panel's label element. If not provided, a unique ID will be generated.
+     * This ID is used for the `aria-labelledby` attribute on both the panel and toggle button.
+     */
+    labelId: string;
+    /**
+     * Callback fired when the SidePanel's transition state changes.
+     * Use this to react to state changes including animation states.
+     * @param state The new transition state
+     */
+    onStateTransition(state: SidePanelTransitionStates): void;
+}, {}, {
+    /**
+     * The unique ID for the panel element. Used for `aria-controls` on the toggle button.
+     */
+    panelId: string;
+    /**
+     * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
+     * and toggle button to provide an accessible name.
+     */
+    labelId: string;
+    /**
+     * The current transition state of the SidePanel. This tracks both the expanded/collapsed
+     * state and the animation states (expanding/collapsing).
+     */
+    transitionState: SidePanelTransitionStates;
+    /**
+     * The initial transition state of the SidePanel.
+     * @default 'expanded'
+     */
+    initialTransitionState: SidePanelTransitionStates;
+    /**
+     * Which side the SidePanel originates from. Uses logical properties for RTL support.
+     * - `start`: Left side in LTR, right side in RTL
+     * - `end`: Right side in LTR, left side in RTL
+     * @default 'start'
+     */
+    origin: "end" | "start";
+    /**
+     * Callback fired when the SidePanel's transition state changes.
+     * Use this to react to state changes including animation states.
+     * @param state The new transition state
+     */
+    onStateTransition(state: SidePanelTransitionStates): void;
+}, {
+    /**
+     * Expand the SidePanel. This sets the state directly to `expanded` without animation.
+     * For animated expansion, use the toggle button which triggers `setExpandingState`.
+     */
+    expand(): void;
+    /**
+     * Collapse the SidePanel. This sets the state directly to `collapsed` without animation.
+     * For animated collapse, use the toggle button which triggers `setCollapsingState`.
+     */
+    collapse(): void;
+    /**
+     * Handler for the CSS transition end event. This should be called when the width
+     * transition completes to finalize the state from `expanding` to `expanded` or
+     * from `collapsing` to `collapsed`.
+     */
+    handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
+    /**
+     * Triggers the start of a transition animation. This toggles between expanding
+     * and collapsing states based on the current state.
+     */
+    handleAnimationStart(): undefined;
+}, {
+    state: {
+        /**
+         * The unique ID for the panel element. Used for `aria-controls` on the toggle button.
+         */
+        panelId: string;
+        /**
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
+         * and toggle button to provide an accessible name.
+         */
+        labelId: string;
+        /**
+         * The current transition state of the SidePanel. This tracks both the expanded/collapsed
+         * state and the animation states (expanding/collapsing).
+         */
+        transitionState: SidePanelTransitionStates;
+        /**
+         * The initial transition state of the SidePanel.
+         * @default 'expanded'
+         */
+        initialTransitionState: SidePanelTransitionStates;
+        /**
+         * Which side the SidePanel originates from. Uses logical properties for RTL support.
+         * - `start`: Left side in LTR, right side in RTL
+         * - `end`: Right side in LTR, left side in RTL
+         * @default 'start'
+         */
+        origin: "end" | "start";
+        /**
+         * Callback fired when the SidePanel's transition state changes.
+         * Use this to react to state changes including animation states.
+         * @param state The new transition state
+         */
+        onStateTransition(state: SidePanelTransitionStates): void;
+    };
+    events: {
+        /**
+         * Expand the SidePanel. This sets the state directly to `expanded` without animation.
+         * For animated expansion, use the toggle button which triggers `setExpandingState`.
+         */
+        expand(): void;
+        /**
+         * Collapse the SidePanel. This sets the state directly to `collapsed` without animation.
+         * For animated collapse, use the toggle button which triggers `setCollapsingState`.
+         */
+        collapse(): void;
+        /**
+         * Handler for the CSS transition end event. This should be called when the width
+         * transition completes to finalize the state from `expanding` to `expanded` or
+         * from `collapsing` to `collapsed`.
+         */
+        handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
+        /**
+         * Triggers the start of a transition animation. This toggles between expanding
+         * and collapsing states based on the current state.
+         */
+        handleAnimationStart(): undefined;
+    };
+}>;
+//# sourceMappingURL=useSidePanelModel.d.ts.map

package/dist/commonjs/side-panel/lib/useSidePanelModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSidePanelModel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/useSidePanelModel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;GAMG;AACH,MAAM,MAAM,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,eAAO,MAAM,iBAAiB;IAE1B;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;6BACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAuClD;;;WAGG;;QAKH;;;WAGG;;QAKH;;;;WAIG;kCACuB,qBAAqB,CAAC,cAAc,CAAC;QAW/D;;;WAGG;;;;IArGH;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;6BACsB,yBAAyB;;IAsBlD;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IA7DH;;;OAGG;;IAEH;;;;;OAKG;;IAYH;;;;OAIG;6BACsB,yBAAyB;;IAuClD;;;OAGG;;IAKH;;;OAGG;;IAKH;;;;OAIG;8BACuB,qBAAqB,CAAC,cAAc,CAAC;IAW/D;;;OAGG;;;;QApDH;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAuClD;;;WAGG;;QAKH;;;WAGG;;QAKH;;;;WAIG;kCACuB,qBAAqB,CAAC,cAAc,CAAC;QAW/D;;;WAGG;;;EAYL,CAAC"}