UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

30 lines (29 loc) 1.59 kB
import * as React from 'react'; import { createSubcomponent, createElemPropsHook, composeHooks, } from '@workday/canvas-kit-react/common'; import { ListBox } from '@workday/canvas-kit-react/collection'; import { useReturnFocus, useFocusRedirect } from '@workday/canvas-kit-react/popup'; import { useMenuModel } from './useMenuModel'; import { createStencil, cssVar, handleCsProp } from '@workday/canvas-kit-styling'; import { base, system } from '@workday/canvas-tokens-web'; export const useMenuList = composeHooks(createElemPropsHook(useMenuModel)(model => { return { role: 'menu', 'aria-labelledby': model.state.id, }; }), useReturnFocus, useFocusRedirect); export const menuListStencil = createStencil({ base: { name: "d5h42t", styles: "box-sizing:border-box;background:var(--cnvs-base-palette-french-vanilla-100);border-radius:var(--cnvs-sys-shape-zero);padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-zero);" }, modifiers: { orientation: { vertical: { name: "d5h42u", styles: "flex-direction:column;" }, horizontal: { name: "d5h42v", styles: "flex-direction:row;" } } } }, "menu-list-b9b420"); export const MenuList = createSubcomponent('div')({ displayName: 'Menu.List', modelHook: useMenuModel, elemPropsHook: useMenuList, })(({ children, ...elemProps }, Element, model) => { return (React.createElement(ListBox, { as: Element, model: model, marginY: cssVar(system.space.x2), ...handleCsProp(elemProps, menuListStencil({ orientation: model.state.orientation })) }, children)); });