@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
31 lines (30 loc) • 1.64 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
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 { system } from '@workday/canvas-tokens-web';
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({
base: { name: "21ltnk", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-zero);padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-zero);" },
modifiers: {
orientation: {
vertical: { name: "3nwts3", styles: "flex-direction:column;" },
horizontal: { name: "1vuq8g", styles: "flex-direction:row;" }
}
}
}, "menu-list-e26d3d");
export const MenuList = createSubcomponent('div')({
displayName: 'Menu.List',
modelHook: useMenuModel,
elemPropsHook: useMenuList,
})(({ children, ...elemProps }, Element, model) => {
return (_jsx(ListBox, { as: Element, model: model, marginY: cssVar(system.space.x2), ...handleCsProp(elemProps, menuListStencil({ orientation: model.state.orientation })), children: children }));
});