@workday/canvas-kit-react/dist/es6/menu/lib/MenuGroup.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createContainer, createElemPropsHook, createModelHook, createSubcomponent, useUniqueId, } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
import { createStencil } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const useMenuGroupModel = createModelHook({
    defaultConfig: {
        id: undefined,
    },
    requiredConfig: {},
})(config => {
    const state = {
        id: useUniqueId(config.id),
    };
    const events = {};
    return {
        state,
        events,
    };
});
export const menuGroupHeadingStencil = createStencil({
    base: { name: "223r43", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));font-weight:var(--cnvs-sys-font-weight-bold);display:flex;align-items:center;width:100%;gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));padding-block:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));" }
}, "menu-group-heading-94adee");
export const useMenuGroup = createElemPropsHook(useMenuGroupModel)(model => {
    return {
        'data-type': 'group',
        role: 'group',
        'aria-labelledby': model.state.id,
    };
});
export const useMenuGroupHeading = createElemPropsHook(useMenuGroupModel)(model => {
    return {
        id: model.state.id,
    };
});
const MenuGroupHeading = createSubcomponent('div')({
    modelHook: useMenuGroupModel,
    elemPropsHook: useMenuGroupHeading,
})(({ children, ...elemProps }, Element) => {
    return (_jsx(OverflowTooltip, { children: _jsx(Element, { ...mergeStyles(elemProps, menuGroupHeadingStencil()), children: children }) }));
});
export const MenuGroup = createContainer('div')({
    displayName: 'Menu.Group',
    modelHook: useMenuGroupModel,
    elemPropsHook: useMenuGroup,
    subComponents: {
        Heading: MenuGroupHeading,
    },
})(({ children, title, ...elemProps }, Element) => {
    return (_jsxs(Element, { ...mergeStyles(elemProps), children: [title ? _jsx(MenuGroupHeading, { children: title }) : null, children] }));
});