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

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { sidebarLeftIcon, sidebarRightIcon } from '@workday/canvas-system-icons-web';
import { base, system } from '@workday/canvas-tokens-web';
import { useSidePanelModel } from './useSidePanelModel';
export const sidePanelToggleButtonStencil = 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.
 */
export const useSidePanelToggleButton = createElemPropsHook(useSidePanelModel)(({ state }) => {
    return {
        'aria-controls': state.panelId,
        'aria-pressed': state.transitionState === 'collapsed',
        'aria-describedby': state.labelId,
    };
});
export const SidePanelToggleButton = createSubcomponent('button')({
    displayName: 'SidePanel.ToggleButton',
    modelHook: useSidePanelModel,
    elemPropsHook: useSidePanelToggleButton,
})(({ variant = undefined, icon, tooltipTextExpand = 'Expand View', tooltipTextCollapse = 'Collapse View', tooltipProps, tooltipText, ...elemProps }, Element, model) => {
    const sidePanelIcon = icon || (model.state.origin === 'start' ? sidebarLeftIcon : sidebarRightIcon);
    return (_jsx(Tooltip, { type: "muted", ...tooltipProps, title: tooltipText ||
            (model.state.transitionState === 'expanded' ? tooltipTextCollapse : tooltipTextExpand), children: _jsx(TertiaryButton, { icon: sidePanelIcon, as: Element, variant: variant, "aria-label": tooltipText, ...handleCsProp(elemProps, 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();
            } }) }));
});