@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
98 lines (97 loc) • 6.16 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
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 { isCursor, useListItemRegister, useListItemRovingFocus, useListItemSelect, } from '@workday/canvas-kit-react/collection';
import { useMenuModel } from './useMenuModel';
export const menuItemStencil = createStencil({
parts: {
text: 'menu-item-text',
icon: 'menu-item-icon',
selected: 'menu-item-selected',
},
base: { name: "34ial2", 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-3a4847:currentColor;& :where([data-part=\"menu-item-selected\"]){transition:opacity 80ms linear;opacity:var(--cnvs-sys-opacity-zero);}&:where(:has(span)){display:flex;}&[aria-selected=true]{color:var(--cnvs-brand-primary-dark);background-color:var(--cnvs-brand-primary-lightest);& :where([data-part=\"menu-item-selected\"]){opacity:var(--cnvs-sys-opacity-full);}&:where(.focus, :focus){--color-system-icon-3a4847:var(--cnvs-brand-primary-accent);outline:none;background-color:var(--cnvs-brand-primary-base);color:var(--color-system-icon-3a4847);}}&: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-fg-disabled);cursor:default;&:where(.hover, :hover, [aria-selected=true]){background:none;}&:where(.focus, :focus){color:var(--cnvs-sys-color-fg-inverse);background-color:var(--cnvs-brand-primary-light);}}& :where([data-part=\"menu-item-text\"]){flex-grow:1;align-self:center;}& :where([data-part=\"menu-item-icon\"]){align-self:start;}" }
}, "menu-item-0e1e84");
const MenuItemIcon = (elemProps) => {
return _jsx(SystemIcon, { ...menuItemStencil.parts.icon, ...elemProps });
};
const MenuItemText = createComponent('span')({
Component: ({ ...elemProps }, ref, Element) => {
return _jsx(Element, { ref: ref, ...menuItemStencil.parts.text, ...elemProps });
},
});
export const StyledMenuItem = createComponent('button')({
displayName: 'MenuItem',
Component: ({ children, isDisabled, ...elemProps }, ref, Element) => {
return (_jsx(Element, { ref: ref, "aria-disabled": isDisabled, ...mergeStyles(elemProps, menuItemStencil({})), children: typeof children === 'string' ? _jsx(MenuItemText, { children: children }) : children }));
},
});
export const useMenuItemArrowReturn = createElemPropsHook(useMenuModel)(model => {
return {
onKeyDown(event) {
const styles = getComputedStyle(event.currentTarget);
if (event.key === 'ArrowLeft' && styles.direction === 'ltr' && model.UNSTABLE_parentModel) {
model.events.hide(event);
}
},
};
});
export const useMenuItemFocus = 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 (isCursor(model.state, id)) {
// delay focus changes to allow PopperJS to position
requestAnimationFrame(() => {
var _a;
(_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
});
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [id, localRef, model.state.cursorId, model.state.mode]);
return {
ref: elementRef,
className: isCursor(model.state, elemProps['data-id']) ? 'focus' : undefined,
};
});
function hideParent(model) {
if (model.UNSTABLE_parentModel) {
model.UNSTABLE_parentModel.events.hide();
hideParent(model.UNSTABLE_parentModel);
}
}
export const useMenuItem = composeHooks(createElemPropsHook(useMenuModel)(model => {
return {
role: 'menuitem',
onMouseDown(event) {
model.events.goTo({ id: event.currentTarget.getAttribute('data-id') });
},
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);
hideParent(model);
}
}
: undefined,
};
}), useMenuItemFocus, useMenuItemArrowReturn, useListItemSelect, useListItemRovingFocus, useListItemRegister);
export const MenuItem = createSubcomponent('button')({
displayName: 'Menu.Item',
modelHook: useMenuModel,
elemPropsHook: useMenuItem,
subComponents: {
Icon: MenuItemIcon,
Text: MenuItemText,
},
})(({ children, ...elemProps }, Element) => {
return (_jsx(OverflowTooltip, { placement: "left", children: _jsx(StyledMenuItem, { as: Element, ...elemProps, children: children }) }));
});