@workday/canvas-kit-react 15.1.6 → 15.1.9

package/dist/es6/toast/lib/ToastCloseIcon.js

@@ -4,7 +4,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { Popup } from '@workday/canvas-kit-react/popup';
 import { createStencil } from '@workday/canvas-kit-styling';
 export const toastCloseIconStencil = createStencil({
-    base: { name: "3q3pxn", styles: "box-sizing:border-box;position:relative;" }
+    base: { name: "1j8rbv", styles: "box-sizing:border-box;position:relative;" }
 }, "toast-close-icon-f7cf19");
 export const ToastCloseIcon = createComponent('button')({
     displayName: 'Toast.CloseIcon',

package/dist/es6/toast/lib/ToastIcon.js

@@ -4,7 +4,7 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { base, system } from '@workday/canvas-tokens-web';
 export const toastIconStencil = createStencil({
-    base: { name: "2bpw9w", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-base-size-150, 0.75rem);" }
+    base: { name: "17m800", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-base-size-150, 0.75rem);" }
 }, "toast-icon-4762f0");
 export const ToastIcon = createComponent('div')({
     displayName: 'Toast.Icon',

package/dist/es6/toast/lib/ToastMessage.js

@@ -5,7 +5,7 @@ import { Subtext } from '@workday/canvas-kit-react/text';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { useToastModel } from './hooks/useToastModel';
 export const toastMessageStencil = createStencil({
-    base: { name: "wgefk", styles: "box-sizing:border-box;word-break:break-word;margin-block:0;" }
+    base: { name: "1krcke", styles: "box-sizing:border-box;word-break:break-word;margin-block:0;" }
 }, "toast-message-ff5220");
 export const ToastMessage = createSubcomponent('p')({
     modelHook: useToastModel,

package/dist/es6/tooltip/lib/TooltipContainer.js

@@ -11,16 +11,16 @@ const tooltipTranslateVars = createVars({ id: "5cc1ce", args: ["positionX", "pos
 /**
  * Keyframe for the Tooltip animation.
  */
-const tooltipAnimation = keyframes({ name: "29cs5x", styles: "0%{opacity:0;transform:translate(var(--positionX-5cc1ce), var(--positionY-5cc1ce));}100%{opacity:1;transform:translate(0);}" });
+const tooltipAnimation = keyframes({ name: "2d6xt0", styles: "0%{opacity:0;transform:translate(var(--positionX-5cc1ce), var(--positionY-5cc1ce));}100%{opacity:1;transform:translate(0);}" });
 export const tooltipContainerStencil = createStencil({
     vars: {
         tooltipTransformOriginHorizontal: '',
         tooltipTransformOriginVertical: '',
     },
-    base: { name: "1vmhjf", 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-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));display:inline-flex;position:relative;padding:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-inverse);animation-name:animation-29cs5x;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-0d74d6) var(--tooltipTransformOriginHorizontal-tooltip-container-0d74d6);a{color:var(--cnvs-sys-color-fg-inverse);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));outline:0.0625rem solid transparent;outline-offset:-0.0625rem;z-index:-1;margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));background-color:var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-2);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}" },
+    base: { name: "8uyjn", 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-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));display:inline-flex;position:relative;padding:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-inverse);animation-name:animation-2d6xt0;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-0d74d6) var(--tooltipTransformOriginHorizontal-tooltip-container-0d74d6);a{color:var(--cnvs-sys-color-fg-inverse);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));outline:0.0625rem solid transparent;outline-offset:-0.0625rem;z-index:-1;margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));background-color:var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-2);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}" },
     modifiers: {
         elementHasFocus: {
-            true: { name: "1f1nrv", styles: "padding:calc(var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) - calc(var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) / 2));&:before{margin:var(--cnvs-base-size-75, 0.375rem);}" }
+            true: { name: "yzhib", styles: "padding:calc(var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) - calc(var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) / 2));&:before{margin:var(--cnvs-base-size-75, 0.375rem);}" }
         }
     }
 }, "tooltip-container-0d74d6");

package/dist/es6/version/lib/version.js

@@ -1 +1 @@
-export const version = '15.1.6';
+export const version = '15.1.9';

package/menu/lib/MenuCard.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import {Card} from '@workday/canvas-kit-react/card';
+import {listBoxContainerStencil} from '@workday/canvas-kit-react/collection';
 import {
   ExtractProps,
   createElemPropsHook,
@@ -8,7 +9,7 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {getTransformFromPlacement} from '@workday/canvas-kit-react/popup';
-import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {useMenuModel} from './useMenuModel';
@@ -42,12 +43,22 @@ export const menuCardStencil = createStencil({
     maxWidth: calc.subtract('100vw', system.legacy.size.sm),
     boxShadow: system.depth[3],
     minWidth,
-    maxHeight,
+    maxHeight: cssVar(maxHeight, '60vh'),
     transformOrigin: `${transformOriginVertical} ${transformOriginHorizontal}`,
     // Allow overriding of animation in special cases
     '.wd-no-animation &': {
       animation: 'none',
     },
+    [`&:where(:has(${listBoxContainerStencil.parts.listBoxContainer.selector}))`]: {
+      overflow: 'hidden',
+    },
+    [`& :where(${listBoxContainerStencil.parts.listBoxContainer.selector})`]: {
+      borderRadius: system.legacy.shape.xxl,
+      // Card is a flex column container. Without this, a flex child won't shrink below its
+      // content size, so `maxHeight` on the Card would be ignored and content would overflow
+      // instead of scrolling inside the list-box-container.
+      minHeight: 0,
+    },
   }),
 });
 

package/menu/lib/MenuItem.tsx

@@ -2,11 +2,13 @@ import * as React from 'react';
 
 import {
   isCursor,
+  isElementDisabled,
   useListItemRegister,
   useListItemRovingFocus,
   useListItemSelect,
 } from '@workday/canvas-kit-react/collection';
 import {
+  changeFocus,
   composeHooks,
   createComponent,
   createElemPropsHook,
@@ -179,7 +181,12 @@ export const useMenuItemArrowReturn = createElemPropsHook(useMenuModel)(model =>
     onKeyDown(event: React.KeyboardEvent) {
       const styles = getComputedStyle(event.currentTarget);
       if (event.key === 'ArrowLeft' && styles.direction === 'ltr' && model.UNSTABLE_parentModel) {
+        event.preventDefault();
+        const target = model.state.targetRef.current as HTMLElement | null;
         model.events.hide(event);
+        requestAnimationFrame(() => {
+          changeFocus(target);
+        });
       }
     },
   };
@@ -192,6 +199,27 @@ export const useMenuItemFocus = createElemPropsHook(useMenuModel)((
 ) => {
   const {localRef, elementRef} = useLocalRef(ref as React.Ref<HTMLElement>);
   const id = elemProps['data-id'];
+
+  // A menu keeps its cursor between openings, so reopening would restore focus to a disabled item.
+  // Items remount whenever the menu opens, which distinguishes reopening from navigating onto a
+  // disabled item while the menu is already open. Clearing the cursor lets the roving focus
+  // fallback in `useListItemRovingFocus` move focus to the first item. The check waits for the
+  // first render where `id` is known, since items without an explicit `data-id` register it later.
+  const hasCheckedDisabledCursor = React.useRef(false);
+  React.useLayoutEffect(() => {
+    if (hasCheckedDisabledCursor.current || !id) {
+      return;
+    }
+    hasCheckedDisabledCursor.current = true;
+
+    const isItemDisabled = isElementDisabled(localRef.current);
+
+    if (model.state.mode === 'single' && isCursor(model.state, id) && isItemDisabled) {
+      model.events.goToFirst();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
   // focus on the item with the cursor
   React.useLayoutEffect(() => {
     if (model.state.mode === 'single') {
@@ -227,11 +255,12 @@ export const useMenuItem = composeHooks(
       onClick:
         model.state.mode === 'single'
           ? (event: React.SyntheticEvent) => {
-              // only hide if the item isn't disabled
-              if (event.currentTarget.getAttribute('aria-disabled') !== 'true') {
-                model.events.hide(event);
-                hideParent(model);
+              if (isElementDisabled(event.currentTarget as Element)) {
+                return null;
               }
+              model.events.hide(event);
+              hideParent(model);
+              return undefined;
             }
           : undefined,
     };

package/menu/lib/MenuList.tsx

@@ -54,12 +54,13 @@ export const MenuList = createSubcomponent('div')({
   displayName: 'Menu.List',
   modelHook: useMenuModel,
   elemPropsHook: useMenuList,
-})<MenuListProps>(({children, ...elemProps}, Element, model) => {
+})<MenuListProps>(({children, maxHeight, ...elemProps}, Element, model) => {
   return (
     <ListBox
       as={Element}
       model={model}
       marginY={system.legacy.gap.none}
+      maxHeight={maxHeight ?? '100%'}
       {...handleCsProp(elemProps, menuListStencil({orientation: model.state.orientation}))}
     >
       {children}

package/menu/lib/Submenu.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 
-import {useListItemRegister, useListItemRovingFocus} from '@workday/canvas-kit-react/collection';
+import {
+  isElementDisabled,
+  useListItemRegister,
+  useListItemRovingFocus,
+} from '@workday/canvas-kit-react/collection';
 import {
   ExtractProps,
   PropsWithModel,
@@ -82,6 +86,23 @@ export const useSubmenuTargetItem = composeHooks(
   subModelHook(model => (model as any).UNSTABLE_parentModel!, useListItemRegister),
   createElemPropsHook(useMenuModel)(model => {
     const currentTargetIdRef = React.useRef<string>();
+    // A submenu owns its own `visibility`, so opening a sibling submenu would otherwise leave this
+    // one open. The parent's cursor always moves to the item being hovered or focused, so treat the
+    // cursor moving away from our target item as a signal to close.
+    const parentCursorId = model.UNSTABLE_parentModel.state.cursorId;
+    const isVisible = model.state.visibility === 'visible';
+    React.useEffect(() => {
+      if (!isVisible) {
+        return;
+      }
+      const targetId = (model.state.targetRef.current as HTMLElement | null)?.getAttribute(
+        'data-id'
+      );
+      if (targetId && parentCursorId && parentCursorId !== targetId) {
+        model.events.hide();
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [parentCursorId, isVisible]);
     const mouseEnterTimer = useIntentTimer(() => {
       model.UNSTABLE_parentModel.events.goTo({id: currentTargetIdRef.current || ''});
       model.events.show(event);
@@ -95,6 +116,9 @@ export const useSubmenuTargetItem = composeHooks(
         model.UNSTABLE_parentModel.events.goTo({id: event.currentTarget.getAttribute('data-id')!});
       },
       onMouseEnter(event: React.MouseEvent) {
+        if (isElementDisabled(event.currentTarget)) {
+          return;
+        }
         currentTargetIdRef.current = event.currentTarget.getAttribute('data-id')!;
         mouseEnterTimer.start();
       },
@@ -102,6 +126,9 @@ export const useSubmenuTargetItem = composeHooks(
         mouseEnterTimer.clear();
       },
       onClick(event: React.MouseEvent) {
+        if (isElementDisabled(event.currentTarget)) {
+          return null;
+        }
         // If we're wrapping a target component that doesn't handle ref forwarding, update the
         // `state.targetRef` manually. This ensures that custom target components don't need to handle
         // ref forwarding since ref forwarding is only really needed to programmatically open popups
@@ -114,9 +141,13 @@ export const useSubmenuTargetItem = composeHooks(
         } else {
           model.events.show(event);
         }
+        return undefined;
       },
       'data-has-children': true,
       onKeyDown(event: React.KeyboardEvent) {
+        if (isElementDisabled(event.currentTarget)) {
+          return;
+        }
         if (model.state.orientation === 'vertical') {
           // eslint-disable-next-line default-case
           switch (event.key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "15.1.6",
+  "version": "15.1.9",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -53,8 +53,8 @@
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-popup-stack": "^15.1.6",
-    "@workday/canvas-kit-styling": "^15.1.6",
+    "@workday/canvas-kit-popup-stack": "^15.1.9",
+    "@workday/canvas-kit-styling": "^15.1.9",
     "@workday/canvas-system-icons-web": "4.2.0",
     "@workday/canvas-tokens-web": "4.4.0",
     "@workday/design-assets-types": "^0.3.0",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "c902047d4ad6874afc747a5eff22f88f0d6c2ff9"
+  "gitHead": "1beac223ba75b47655ae919851bd3766e4c1c51f"
 }

package/tabs/lib/useTabsModel.tsx

@@ -110,21 +110,26 @@ export const useTabsModel = createModelHook({
     unregisterPanel: panels.events.unregisterItem,
   };
 
-  const menu = useMenuModel(
-    useMenuModel.mergeConfig(config.menuConfig, {
-      id: `menu-${model.state.id}`,
-      items: overflowItems,
-      nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
-      onSelect(data) {
-        menu.events.hide();
-        events.select(data);
-      },
-      onShow() {
-        // Always select the first item when the menu is opened
-        menu.events.goToFirst();
-      },
-    })
-  );
+  const mergedMenuConfig = useMenuModel.mergeConfig(config.menuConfig, {
+    id: `menu-${model.state.id}`,
+    items: overflowItems,
+    // `getId`/`getTextValue` aren't callbacks or guards, so `mergeConfig` would let these
+    // unconditionally clobber a `menuConfig.getId`/`getTextValue` override. Fall back to the
+    // top-level Tabs config only when the caller hasn't set one on `menuConfig` directly.
+    getId: config.menuConfig?.getId || getId,
+    getTextValue: config.menuConfig?.getTextValue || config.getTextValue,
+    nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
+    onSelect(data) {
+      menu.events.hide();
+      events.select(data);
+    },
+    onShow() {
+      // Always select the first item when the menu is opened
+      menu.events.goToFirst();
+    },
+  });
+
+  const menu = useMenuModel(mergedMenuConfig);
 
   return {
     ...model,