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

The parent module that contains all Workday Canvas Kit React components

"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: "1rtm4", styles: "box-sizing:border-box;position:absolute;top:0.75rem;width:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));:dir(rtl){transform:scaleX(-1);}" },
    modifiers: {
        state: {
            collapsing: { name: "1d6c0w", styles: "margin:0;" },
            collapsed: { name: "jm4z0", styles: "margin:auto;" },
            expanded: { name: "edj22", styles: "margin:0;" },
            expanding: { name: "16339z", styles: "margin:0;" }
        },
        origin: {
            start: { name: "3q6vu0", styles: "inset-inline-end:var(--cnvs-base-size-150, 0.75rem);" },
            end: { name: "2e54ow", styles: "inset-inline-start:var(--cnvs-base-size-150, 0.75rem);" }
        }
    }
}, "side-panel-toggle-button-61b45f");
/**
 * Adds the necessary ARIA attributes to the SidePanel's toggle button.
 * This includes `aria-controls` pointing at the panel, `aria-pressed` to convey the collapsed
 * state, and `aria-describedby` pointing at the panel's heading.
 */
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, tooltipTextExpand = 'Expand View', tooltipTextCollapse = 'Collapse View', tooltipProps, tooltipText, ...elemProps }, Element, model) => {
    const sidePanelIcon = icon || (model.state.origin === 'start' ? canvas_system_icons_web_1.sidebarLeftIcon : canvas_system_icons_web_1.sidebarRightIcon);
    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: sidePanelIcon, 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();
            } }) }));
});