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

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SidePanelHeading = exports.useSidePanelHeading = exports.sidePanelHeadingStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const text_1 = require("@workday/canvas-kit-react/text");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const useSidePanelModel_1 = require("./useSidePanelModel");
exports.sidePanelHeadingStencil = (0, canvas_kit_styling_1.createStencil)({
    extends: text_1.headingStencil,
    base: { name: "2oap3n", styles: "box-sizing:border-box;display:flex;align-items:center;padding:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline-start:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));min-height:var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem));margin:0;&:where([hidden]){display:none;}" },
    modifiers: {
        origin: {
            end: { name: "20zwv9", styles: "padding-inline-start:4.25rem;" },
            start: { name: "o7ihn", styles: "" }
        }
    }
}, "side-panel-heading-9d38c2");
/**
 * Adds the necessary props to the SidePanelHeading subcomponent.
 * This sets the `id` to the `labelId` from the model for accessibility purposes,
 * and hides the heading when the panel is not expanded.
 */
exports.useSidePanelHeading = (0, common_1.createElemPropsHook)(useSidePanelModel_1.useSidePanelModel)(({ state }) => {
    return {
        id: state.labelId,
        hidden: state.transitionState !== 'expanded',
    };
});
/**
 * `SidePanel.Heading` is a styled heading component that provides the accessible name
 * for the SidePanel. The heading's `id` is automatically set to the model's `labelId`,
 * which is used by the panel's `aria-labelledby` attribute.
 *
 * The heading is automatically hidden when the panel is collapsed.
 */
exports.SidePanelHeading = (0, common_1.createSubcomponent)(text_1.Heading)({
    displayName: 'SidePanel.Heading',
    modelHook: useSidePanelModel_1.useSidePanelModel,
    elemPropsHook: exports.useSidePanelHeading,
})(({ size = 'small', children, ...elemProps }, Element, model) => {
    return ((0, jsx_runtime_1.jsx)(Element, { size: size, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.sidePanelHeadingStencil)({ size, origin: model.state.origin })), children: children }));
});