@workday/canvas-kit-react/dist/es6/menu/lib/MenuTarget.js

The parent module that contains all Workday Canvas Kit React components

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);
});