@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
32 lines (31 loc) • 1.68 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { ListBox } from '@workday/canvas-kit-react/collection';
import { composeHooks, cornerShapeStencil, createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
import { useFocusRedirect, useReturnFocus } from '@workday/canvas-kit-react/popup';
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
import { base, system } from '@workday/canvas-tokens-web';
import { useMenuModel } from './useMenuModel';
export const useMenuList = composeHooks(createElemPropsHook(useMenuModel)(model => {
return {
role: 'menu',
'aria-labelledby': model.state.id,
'aria-orientation': model.state.orientation,
};
}), useReturnFocus, useFocusRedirect);
export const menuListStencil = createStencil({
extends: cornerShapeStencil,
base: { name: "15sq1w", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));padding:0;gap:var(--cnvs-base-size-25, 0.125rem);" },
modifiers: {
orientation: {
vertical: { name: "2quvir", styles: "flex-direction:column;" },
horizontal: { name: "2f0yvx", styles: "flex-direction:row;" }
}
}
}, "menu-list-3f4295");
export const MenuList = createSubcomponent('div')({
displayName: 'Menu.List',
modelHook: useMenuModel,
elemPropsHook: useMenuList,
})(({ children, ...elemProps }, Element, model) => {
return (_jsx(ListBox, { as: Element, model: model, marginY: system.legacy.gap.none, ...handleCsProp(elemProps, menuListStencil({ orientation: model.state.orientation })), children: children }));
});