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

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SidePanel = exports.panelStencil = exports.useSidePanelContainer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const SidePanelHeading_1 = require("./SidePanelHeading");
const SidePanelToggleButton_1 = require("./SidePanelToggleButton");
const useSidePanelModel_1 = require("./useSidePanelModel");
/**
 * Adds the necessary props to the SidePanel container element.
 * This includes the `id` and `aria-labelledby` attributes for accessibility.
 */
exports.useSidePanelContainer = (0, common_1.createElemPropsHook)(useSidePanelModel_1.useSidePanelModel)(({ state, events }) => {
    return {
        id: state.panelId,
        'aria-labelledby': state.labelId,
        onTransitionEnd: events.handleAnimationEnd,
    };
});
exports.panelStencil = (0, canvas_kit_styling_1.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");
exports.SidePanel = (0, common_1.createContainer)('section')({
    displayName: 'SidePanel',
    modelHook: useSidePanelModel_1.useSidePanelModel,
    elemPropsHook: exports.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_1.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_1.SidePanelHeading,
    },
})(({ collapsedWidth = 64, expandedWidth = 320, variant = 'standard', children, ...elemProps }, Element, model) => {
    return ((0, jsx_runtime_1.jsx)(Element, { ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [
            (0, exports.panelStencil)({
                expanded: model.state.transitionState,
                variant,
                expandedWidth: typeof expandedWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(expandedWidth) : expandedWidth,
                collapsedWidth: typeof collapsedWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(collapsedWidth) : collapsedWidth,
            }),
        ]), children: children }));
});