UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

37 lines (36 loc) 1.7 kB
import * as React from 'react'; import { composeHooks, createSubcomponent, createElemPropsHook, } from '@workday/canvas-kit-react/common'; import { SecondaryButton } from '@workday/canvas-kit-react/button'; import { usePopupTarget, usePopupTargetContext } from '@workday/canvas-kit-react/popup'; import { useMenuModel } from './useMenuModel'; export const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => { return { id: model.state.id, 'aria-haspopup': 'true', 'aria-expanded': model.state.visibility === 'visible', onKeyDown(event) { // eslint-disable-next-line default-case switch (event.key) { case 'ArrowDown': case 'ArrowUp': // this follow the keys for modern browsers https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#navigation_keys model.events.show(event); } }, }; }); export const useMenuTarget = composeHooks(useMenuTargetBase, usePopupTarget); export const useMenuTargetContext = composeHooks(useMenuTargetBase, usePopupTargetContext); export const MenuTarget = createSubcomponent(SecondaryButton)({ displayName: 'Menu.Target', modelHook: useMenuModel, elemPropsHook: useMenuTarget, })(({ children, ...elemProps }, Element) => { return React.createElement(Element, { ...elemProps }, children); }); export const MenuTargetContext = createSubcomponent(SecondaryButton)({ displayName: 'Menu.Target', modelHook: useMenuModel, elemPropsHook: useMenuTargetContext, })(({ children, ...elemProps }, Element) => { return React.createElement(Element, { ...elemProps }, children); });