@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
99 lines (98 loc) • 7.3 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { isCursor, useListItemRegister, useListItemRovingFocus, useListItemSelect, } from '@workday/canvas-kit-react/collection';
import { composeHooks, cornerShapeStencil, createComponent, createElemPropsHook, createSubcomponent, useLocalRef, } from '@workday/canvas-kit-react/common';
import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { useMenuModel } from './useMenuModel';
export const menuItemStencil = createStencil({
extends: cornerShapeStencil,
parts: {
text: 'menu-item-text',
icon: 'menu-item-icon',
selected: 'menu-item-selected',
},
base: { name: "gfs7y", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));display:flex;align-items:center;width:100%;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));cursor:pointer;color:var(--cnvs-sys-color-fg-strong);border-width:0;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);text-align:start;transition:background-color 80ms, color 80ms;background-color:inherit;min-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));overflow-wrap:anywhere;--color-system-icon-c9acc3: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-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));& :where([data-part=\"menu-item-selected\"]){opacity:var(--cnvs-sys-opacity-full);}&:where(.focus, :focus-visible){outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:-0.125rem;}}&:is(.hover, :hover){background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:is(.active, :active){background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}&:is(.focus, :focus-visible){outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:-0.125rem;}&[aria-expanded=\"true\"]:is(.focus, :focus-visible){color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));outline:none;}&:is(:disabled, [aria-disabled=true]){cursor:default;opacity:var(--cnvs-sys-opacity-disabled);&:where(.hover, :hover){background:none;}&:where(.focus, :focus-visible){color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));opacity:var(--cnvs-sys-opacity-disabled);}}& :where([data-part=\"menu-item-text\"]){flex-grow:1;align-self:center;}" }
}, "menu-item-38fada");
const MenuItemIcon = (elemProps) => {
return _jsx(SystemIcon, { size: "md", ...menuItemStencil.parts.icon, ...elemProps });
};
const MenuItemText = createComponent('span')({
Component: ({ ...elemProps }, ref, Element) => {
return _jsx(Element, { ref: ref, ...menuItemStencil.parts.text, ...handleCsProp(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 }) }));
});