@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
65 lines (64 loc) • 4.58 kB
JavaScript
import * as React from 'react';
import { createStencil, px2rem } from '@workday/canvas-kit-styling';
import { brand, system } from '@workday/canvas-tokens-web';
import { createSubcomponent, composeHooks, createElemPropsHook, useLocalRef, 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 { useListItemRegister, useListItemRovingFocus, useListItemSelect, } from '@workday/canvas-kit-react/collection';
import { useMenuModel } from './useMenuModel';
export const menuItemStencil = createStencil({
base: { name: "d5h42r", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:flex;align-items:center;width:100%;gap:var(--cnvs-sys-space-x4);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);cursor:pointer;color:var(--cnvs-sys-color-fg-default);border-width:0;text-align:start;transition:background-color 80ms, color 80ms;background-color:inherit;min-height:var(--cnvs-sys-space-x10);overflow-wrap:anywhere;--color-system-icon-212f69:currentcolor;& :where([data-part=\"menu-item-selected\"]){transition:opacity 80ms linear;opacity:var(--cnvs-sys-opacity-zero);}&:where(:has(span)){display:flex;}&:is([aria-selected=true]){color:var(--cnvs-brand-primary-dark);background-color:var(--cnvs-brand-primary-lightest);}&:is(.hover, :hover){color:var(--cnvs-sys-color-fg-strong);background-color:var(--cnvs-brand-neutral-lightest);}&:is(.focus, :focus){color:var(--cnvs-brand-primary-accent);background-color:var(--cnvs-brand-primary-base);outline:0.125rem solid transparent;outline-offset:-0.125rem;}&:is(:disabled, [aria-disabled=true]){color:var(--cnvs-sys-color-text-disabled);cursor:default;&:where(.focus, :focus){background-color:var(--cnvs-brand-primary-light);}}& :where([data-part=\"menu-item-text\"]){flex-grow:1;align-self:center;}& :where([data-part=\"menu-icon-icon\"]){align-self:start;}" }
}, "menu-item-563aff");
const MenuItemIcon = (elemProps) => {
return React.createElement(SystemIcon, { "data-part": "menu-item-icon", ...elemProps });
};
const MenuItemText = ({ children }) => {
return React.createElement("span", { "data-part": "menu-item-text" }, children);
};
export const StyledMenuItem = createComponent('button')({
displayName: 'MenuItem',
Component: ({ children, isDisabled, ...elemProps }, ref, Element) => {
return (React.createElement(Element, { ref: ref, "aria-disabled": isDisabled, ...mergeStyles(elemProps, menuItemStencil({})) }, typeof children === 'string' ? React.createElement(MenuItemText, null, children) : children));
},
});
export const useMenuItem = composeHooks(createElemPropsHook(useMenuModel)((model, ref, elemProps = { 'data-id': '' }) => {
const { localRef, elementRef } = useLocalRef(ref);
const id = elemProps['data-id'];
// focus on the item with the cursor
React.useLayoutEffect(() => {
if (model.state.mode === 'single') {
if (model.state.cursorId === id) {
// delay focus changes to allow PopperJS to position
requestAnimationFrame(() => {
var _a;
(_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
});
}
}
}, [id, localRef, model.state.cursorId, model.state.mode]);
return {
ref: elementRef,
role: 'menuitem',
onClick: model.state.mode === 'single'
? (event) => {
// only hide if the item isn't disabled
if (event.currentTarget.getAttribute('aria-disabled') !== 'true') {
model.events.hide(event);
}
}
: undefined,
};
}), useListItemSelect, useListItemRovingFocus, useListItemRegister);
export const MenuItem = createSubcomponent('button')({
displayName: 'Menu.Item',
modelHook: useMenuModel,
elemPropsHook: useMenuItem,
subComponents: {
Icon: MenuItemIcon,
Text: MenuItemText,
},
})(({ children, ...elemProps }, Element) => {
return (React.createElement(OverflowTooltip, { placement: "left" },
React.createElement(StyledMenuItem, { as: Element, ...elemProps }, children)));
});