@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
30 lines (29 loc) • 1.59 kB
JavaScript
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));
});