UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

56 lines (55 loc) 2.33 kB
import * as React from 'react'; import { createStencil } from '@workday/canvas-kit-styling'; import { system } from '@workday/canvas-tokens-web'; import { createSubcomponent, createElemPropsHook, createModelHook, createContainer, useUniqueId, } from '@workday/canvas-kit-react/common'; import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip'; import { mergeStyles } from '@workday/canvas-kit-react/layout'; 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: "d5h42x", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:flex;align-items:center;width:100%;gap:var(--cnvs-sys-space-x4);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);" } }, "menu-group-heading-fd93e9"); 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 (React.createElement(OverflowTooltip, null, React.createElement(Element, { ...mergeStyles(elemProps, menuGroupHeadingStencil()) }, children))); }); export const MenuGroup = createContainer('div')({ displayName: 'Menu.Group', modelHook: useMenuGroupModel, elemPropsHook: useMenuGroup, subComponents: { Heading: MenuGroupHeading, }, })(({ children, title, ...elemProps }, Element) => { return (React.createElement(Element, { ...mergeStyles(elemProps) }, title ? React.createElement(MenuGroupHeading, null, title) : null, children)); });