@workday/canvas-kit-labs-react 15.0.0-alpha.0056-next.0 → 15.0.0-alpha.0060-next.0

package/dist/es6/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/es6/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":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/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"}

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

@@ -0,0 +1,108 @@
+import { createModelHook, useUniqueId } from '@workday/canvas-kit-react/common';
+import * as React from 'react';
+export const useSidePanelModel = createModelHook({
+    defaultConfig: {
+        /**
+         * The initial transition state of the SidePanel.
+         * @default 'expanded'
+         */
+        initialTransitionState: 'expanded',
+        /**
+         * 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: '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: '',
+        /**
+         * 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: '',
+        /**
+         * 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) {
+            // no-op by default
+        },
+    },
+})(config => {
+    const panelId = useUniqueId(config.panelId);
+    const labelId = useUniqueId(config.labelId);
+    const [transitionState, setTransitionStateInternal] = React.useState(config.initialTransitionState);
+    // Wrap setTransitionState to call the onStateTransition callback
+    const setTransitionState = React.useCallback((newState) => {
+        setTransitionStateInternal(newState);
+        config.onStateTransition(newState);
+    }, [config]);
+    const state = {
+        ...config,
+        /**
+         * The unique ID for the panel element. Used for `aria-controls` on the toggle button.
+         */
+        panelId,
+        /**
+         * 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,
+        /**
+         * The current transition state of the SidePanel. This tracks both the expanded/collapsed
+         * state and the animation states (expanding/collapsing).
+         */
+        transitionState,
+    };
+    const events = {
+        /**
+         * Expand the SidePanel. This sets the state directly to `expanded` without animation.
+         * For animated expansion, use the toggle button which triggers `setExpandingState`.
+         */
+        expand() {
+            setTransitionState('expanded');
+        },
+        /**
+         * Collapse the SidePanel. This sets the state directly to `collapsed` without animation.
+         * For animated collapse, use the toggle button which triggers `setCollapsingState`.
+         */
+        collapse() {
+            setTransitionState('collapsed');
+        },
+        /**
+         * 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) {
+            if (event.propertyName === 'width') {
+                if (transitionState === 'expanding') {
+                    setTransitionState('expanded');
+                }
+                else if (transitionState === 'collapsing') {
+                    setTransitionState('collapsed');
+                }
+            }
+            return event;
+        },
+        /**
+         * Triggers the start of a transition animation. This toggles between expanding
+         * and collapsing states based on the current state.
+         */
+        handleAnimationStart() {
+            if (transitionState === 'collapsed' || transitionState === 'collapsing') {
+                setTransitionState('expanding');
+            }
+            else if (transitionState === 'expanded' || transitionState === 'expanding') {
+                setTransitionState('collapsing');
+            }
+            return undefined;
+        },
+    };
+    return { state, events };
+});

package/dist/es6/version/lib/version.js

@@ -1 +1 @@
-export const version = '14.1.27';
+export const version = '14.1.28';

package/index.ts

@@ -1,4 +1,5 @@
 export * from './ai-ingress-button';
 export * from './combobox';
 export * from './search-form';
+export * from './side-panel';
 export * from './version';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "15.0.0-alpha.0056-next.0",
+  "version": "15.0.0-alpha.0060-next.0",
   "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -48,8 +48,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^15.0.0-alpha.0056-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0056-next.0",
+    "@workday/canvas-kit-react": "^15.0.0-alpha.0060-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0060-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "4.0.0-alpha.3",
     "@workday/design-assets-types": "^0.2.10",
@@ -60,5 +60,5 @@
   "devDependencies": {
     "@types/lodash.flatten": "^4.4.6"
   },
-  "gitHead": "7ea41be00e30b2df431c3b8a49d5d2c24f3a9b8c"
+  "gitHead": "34d5076dcc1f6b3d605fc3bf5b36ce5f97917686"
 }

package/side-panel/index.ts

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