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

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/functi

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';
import { SidePanelHeading } from './SidePanelHeading';
/**
 * 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: "1apqy4", 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: "1etd37", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
            standard: { name: "4bxknb", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
        },
        expanded: {
            expanded: { name: "2b09bk", styles: "width:var(--expandedWidth-panel-dc50a6);max-width:var(--expandedWidth-panel-dc50a6);" },
            collapsed: { name: "3p5bol", styles: "width:var(--collapsedWidth-panel-dc50a6);max-width:var(--collapsedWidth-panel-dc50a6);" },
            expanding: { name: "3v4sbb", styles: "width:var(--expandedWidth-panel-dc50a6);max-width:var(--expandedWidth-panel-dc50a6);" },
            collapsing: { name: "3q0nvq", styles: "width:var(--collapsedWidth-panel-dc50a6);max-width:var(--collapsedWidth-panel-dc50a6);" }
        }
    }
}, "panel-dc50a6");
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,
        /**
         * `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 }));
});