@workday/canvas-kit-labs-react/dist/commonjs/side-panel/lib/SidePanelHeading.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

"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)({
    base: { name: "40rnk5", styles: "box-sizing:border-box;padding:var(--cnvs-sys-space-x4);" }
}, "side-panel-heading-f83bea");
/**
 * 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) => {
    return ((0, jsx_runtime_1.jsx)(Element, { size: size, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.sidePanelHeadingStencil)()), children: children }));
});