@workday/canvas-kit-react 16.0.6 → 16.0.7

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,
@@ -11,7 +15,7 @@ import {
   useForkRef,
 } from '@workday/canvas-kit-react/common';
 import {Popper} from '@workday/canvas-kit-react/popup';
-import {chevronRightIcon} from '@workday/canvas-system-icons-web';
+import {chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
 
 import {MenuCard} from './MenuCard';
 import {MenuDivider} from './MenuDivider';
@@ -82,6 +86,23 @@ export const useSubmenuTargetItem = composeHooks(
   subModelHook(model => (model as any).UNSTABLE_parentModel!, useListItemRegister),
   createElemPropsHook(useMenuModel)(model => {
     const currentTargetIdRef = React.useRef<string | undefined>(undefined);
+    // 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) {
@@ -139,7 +170,7 @@ export const SubmenuTargetItem = createSubcomponent('button')({
   return (
     <StyledMenuItem as={Element} {...elemProps}>
       {typeof children === 'string' ? <MenuItem.Text>{children}</MenuItem.Text> : children}
-      <MenuItem.Icon icon={chevronRightIcon} />
+      <MenuItem.Icon icon={chevronRightSmallIcon} />
     </StyledMenuItem>
   );
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "16.0.6",
+  "version": "16.0.7",
   "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": "^16.0.6",
-    "@workday/canvas-kit-styling": "^16.0.6",
+    "@workday/canvas-kit-popup-stack": "^16.0.7",
+    "@workday/canvas-kit-styling": "^16.0.7",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@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": "66fbb19d5308fd96929a6bcad407016f71574a9d"
+  "gitHead": "8e142ad29f6e653c452102cbdb2b340e704476ec"
 }

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,

package/tooltip/lib/OverflowTooltip.tsx

@@ -89,6 +89,14 @@ export interface OverflowTooltipProps extends Omit<React.HTMLAttributes<HTMLDivE
    * disable the fallback placements.
    */
   fallbackPlacements?: Placement[];
+  /**
+   * Amount of time (in ms) to delay before showing the Tooltip
+   */
+  showDelay?: number;
+  /**
+   * Amount of time (in ms) to delay before hiding the Tooltip
+   */
+  hideDelay?: number;
 }
 
 function mergeCallbacks<T extends {[key: string]: any}>(
@@ -113,10 +121,16 @@ export const OverflowTooltip = ({
   placement = 'top',
   fallbackPlacements = defaultFallbackPlacements,
   children,
+  showDelay,
+  hideDelay,
   ...elemProps
 }: OverflowTooltipProps) => {
   const [titleText, setTitleText] = React.useState('');
-  const {targetProps, popperProps, tooltipProps} = useTooltip({type: 'muted'});
+  const {targetProps, popperProps, tooltipProps} = useTooltip({
+    type: 'muted',
+    showDelay,
+    hideDelay,
+  });
 
   const onMouseEnter = (event: React.MouseEvent) => {
     const target = event.currentTarget;