@workday/canvas-kit-labs-react/dist/es6/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

import { jsx as _jsx } from "react/jsx-runtime";
import { createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
import { Heading } from '@workday/canvas-kit-react/text';
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { useSidePanelModel } from './useSidePanelModel';
export const sidePanelHeadingStencil = createStencil({
    base: { name: "2dqo73", 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.
 */
export const useSidePanelHeading = createElemPropsHook(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.
 */
export const SidePanelHeading = createSubcomponent(Heading)({
    displayName: 'SidePanel.Heading',
    modelHook: useSidePanelModel,
    elemPropsHook: useSidePanelHeading,
})(({ size = 'small', children, ...elemProps }, Element) => {
    return (_jsx(Element, { size: size, ...handleCsProp(elemProps, sidePanelHeadingStencil()), children: children }));
});