@workday/canvas-kit-react/dist/es6/side-panel/lib/SidePanel.js

The parent module that contains all Workday Canvas Kit React components

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 { SidePanelHeading } from './SidePanelHeading';
import { SidePanelToggleButton } from './SidePanelToggleButton';
import { useSidePanelModel } from './useSidePanelModel';
/**
 * 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: "ipgnd", 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: {
            overlay: { name: "1x991s", styles: "background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));box-shadow:var(--cnvs-sys-depth-6);" },
            alternative: { name: "2fvmsp", styles: "background-color:var(--cnvs-sys-color-surface-raised, var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)));" },
            standard: { name: "3zu1gu", styles: "background-color:var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));" }
        },
        expanded: {
            expanded: { name: "29mqob", styles: "width:var(--expandedWidth-panel-bd0abc);max-width:var(--expandedWidth-panel-bd0abc);" },
            collapsed: { name: "297waz", styles: "width:var(--collapsedWidth-panel-bd0abc);max-width:var(--collapsedWidth-panel-bd0abc);" },
            expanding: { name: "2zntrd", styles: "width:var(--expandedWidth-panel-bd0abc);max-width:var(--expandedWidth-panel-bd0abc);" },
            collapsing: { name: "xtfm0", styles: "width:var(--collapsedWidth-panel-bd0abc);max-width:var(--collapsedWidth-panel-bd0abc);" }
        }
    }
}, "panel-bd0abc");
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` (the panel's `id`), `aria-pressed` (`true`
         * when the panel is collapsed), and `aria-describedby` (the heading's `id`) from the model.
         * Provide a static `aria-label` for the button's accessible name — `aria-pressed` already
         * conveys the state, so the label should not change between states.
         */
        ToggleButton: SidePanelToggleButton,
        /**
         * `SidePanel.Heading` is a styled heading that provides the accessible name for the SidePanel.
         * The heading's `id` is automatically linked to the panel's `aria-labelledby` attribute.
         * By default, the heading is hidden when the panel is collapsed.
         */
        Heading: SidePanelHeading,
    },
})(({ 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 }));
});