UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

64 lines (63 loc) 3.27 kB
import * as React from 'react'; import { createStencil } from '@workday/canvas-kit-styling'; import { brand, system } from '@workday/canvas-tokens-web'; import { checkSmallIcon } from '@workday/canvas-system-icons-web'; import { createSubcomponent, composeHooks, createElemPropsHook, createComponent, } from '@workday/canvas-kit-react/common'; import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon'; import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip'; import { mergeStyles } from '@workday/canvas-kit-react/layout'; import { isSelected, useListItemActiveDescendant, useListItemRegister, } from '@workday/canvas-kit-react/collection'; import { useMenuModel } from './useMenuModel'; import { menuItemStencil } from './MenuItem'; export const menuOptionStencil = createStencil({ extends: menuItemStencil, base: { name: "d5h42w", styles: "box-sizing:border-box;&:where([aria-selected=true]){& :where([data-part=\"menu-item-selected\"]){opacity:var(--cnvs-sys-opacity-full);}&:where(.focus, :focus){--color-system-icon-212f69:var(--cnvs-brand-primary-accent);outline:none;background-color:var(--cnvs-brand-primary-base);color:var(--color-system-icon-212f69);}}" } }, "menu-option-af4ba2"); const MenuOptionIcon = (elemProps) => { return React.createElement(SystemIcon, { "data-part": "menu-item-icon", ...elemProps }); }; const MenuOptionText = ({ children }) => { return (React.createElement(React.Fragment, null, React.createElement("span", { "data-part": "menu-item-text" }, children), React.createElement(SystemIcon, { icon: checkSmallIcon, "data-part": "menu-item-selected" }))); }; export const StyledMenuOption = createComponent('button')({ displayName: 'MenuOption', Component: ({ children, ...elemProps }, ref, Element) => { return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, menuOptionStencil()) }, typeof children === 'string' ? React.createElement(MenuOptionText, null, children) : children)); }, }); export const useMenuOption = composeHooks(createElemPropsHook(useMenuModel)((model, ref, elemProps = {}) => { const id = elemProps['data-id'] || ''; const selected = isSelected(id, model.state); const onMouseDown = (event) => { // Only left mouse button if (event.button === 0) { if (event.currentTarget.getAttribute('aria-disabled') !== 'true') { model.events.select({ id }); if (model.state.mode === 'single') { model.events.hide(event); } } } // prevent focus changes event.preventDefault(); }; return { role: 'option', 'aria-selected': selected, onMouseDown, }; }), useListItemActiveDescendant, useListItemRegister); export const MenuOption = createSubcomponent('li')({ displayName: 'Menu.Item', modelHook: useMenuModel, elemPropsHook: useMenuOption, subComponents: { Icon: MenuOptionIcon, Text: MenuOptionText, }, })(({ children, ...elemProps }, Element) => { return (React.createElement(OverflowTooltip, { placement: "left" }, React.createElement(StyledMenuOption, { as: Element, ...elemProps }, children))); });