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