@workday/canvas-kit-react 16.1.7 → 16.1.8

package/tabs/lib/TabsList.tsx

@@ -1,23 +1,26 @@
 import * as React from 'react';
 
 import {
-  useListRenderItems,
-  useListResetCursorOnBlur,
+  ListRenderItemContext,
+  isCursor,
   useOverflowListMeasure,
 } from '@workday/canvas-kit-react/collection';
 import {
   ExtractProps,
+  Generic,
   composeHooks,
   createElemPropsHook,
   createSubcomponent,
   useLocalRef,
   useModalityType,
+  useMountLayout,
 } from '@workday/canvas-kit-react/common';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
-import {useTabsModel} from './useTabsModel';
+import {orientationKeyMap} from '../../collection/lib/keyUtils';
+import {TABS_OVERFLOW_BUTTON_ID, useTabsModel} from './useTabsModel';
 
 export interface TabListProps<T = any> extends Omit<ExtractProps<typeof Flex, never>, 'children'> {
   /**
@@ -100,6 +103,49 @@ export const useTabOverflowScroll = createElemPropsHook(useTabsModel)((
   };
 });
 
+/**
+ * Resets the tablist cursor on blur to the selected tab when visible, or to the first visible
+ * item (e.g. the overflow button) when the selected tab is hidden. This ensures the roving
+ * tabindex always lands on a focusable element when only the "More" button is visible.
+ */
+export const useTabsListResetCursorOnBlur = createElemPropsHook(useTabsModel)(({state, events}) => {
+  const programmaticFocusRef = React.useRef(false);
+  const requestAnimationFrameRef = React.useRef(0);
+
+  useMountLayout(() => {
+    return () => {
+      cancelAnimationFrame(requestAnimationFrameRef.current);
+    };
+  });
+
+  return {
+    onKeyDown(event: React.KeyboardEvent) {
+      if (Object.keys(orientationKeyMap[state.orientation]).indexOf(event.key) !== -1) {
+        programmaticFocusRef.current = true;
+      }
+    },
+    onFocus() {
+      programmaticFocusRef.current = false;
+    },
+    onBlur() {
+      if (!programmaticFocusRef.current) {
+        requestAnimationFrameRef.current = requestAnimationFrame(() => {
+          const selectedId =
+            state.selectedIds !== 'all' && state.selectedIds.length
+              ? state.selectedIds[0]
+              : undefined;
+          const visibleItems = state.items.filter(item => !state.hiddenIds.includes(item.id));
+          const targetId =
+            selectedId && !state.hiddenIds.includes(selectedId) ? selectedId : visibleItems[0]?.id;
+          if (targetId && !isCursor(state, targetId)) {
+            events.goTo({id: targetId});
+          }
+        });
+      }
+    },
+  };
+});
+
 export const useTabsList = composeHooks(
   useTabOverflowScroll,
   createElemPropsHook(useTabsModel)(model => {
@@ -109,13 +155,14 @@ export const useTabsList = composeHooks(
     } as const;
   }),
   useOverflowListMeasure,
-  useListResetCursorOnBlur
+  useTabsListResetCursorOnBlur
 );
 
 export const tabsListStencil = createStencil({
   base: {
     display: 'flex',
     position: 'relative',
+    minWidth: 0,
     borderBlockEnd: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
     gap: system.legacy.gap.xs,
     // TODO: update this to use a grid token if we make those available as tokens
@@ -159,6 +206,38 @@ export const tabsListStencil = createStencil({
   },
 });
 
+/**
+ * Custom render function for tabs that filters out the synthetic overflow button item.
+ * This is needed because the overflow button is included in the model's items array
+ * for navigation purposes, but should not be rendered by the list render function.
+ */
+export function useTabsListRenderItems<T>(
+  model: ReturnType<typeof useTabsModel>,
+  children: ((item: Generic, index: number) => React.ReactNode) | React.ReactNode
+): React.ReactNode {
+  // Filter out the synthetic overflow button from rendering
+  const itemsToRender = model.state.items.filter(item => item.id !== TABS_OVERFLOW_BUTTON_ID);
+
+  const items =
+    typeof children === 'function' ? (
+      itemsToRender.map(item => {
+        const child = (children as (item: Generic, index: number) => React.ReactNode)(
+          item.value,
+          item.index
+        );
+        return (
+          <ListRenderItemContext.Provider key={item.id || item.index} value={{item}}>
+            {child}
+          </ListRenderItemContext.Provider>
+        );
+      })
+    ) : (
+      <ListRenderItemContext.Provider value={{}}>{children}</ListRenderItemContext.Provider>
+    );
+
+  return items;
+}
+
 export const TabsList = createSubcomponent('div')({
   displayName: 'Tabs.List',
   modelHook: useTabsModel,
@@ -176,7 +255,7 @@ export const TabsList = createSubcomponent('div')({
           })
         )}
       >
-        {useListRenderItems(model, children)}
+        {useTabsListRenderItems(model, children)}
         {overflowButton}
       </Element>
     );

package/tabs/lib/TabsOverflowButton.tsx

@@ -1,11 +1,17 @@
 import * as React from 'react';
 
-import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
+import {
+  useListItemRegister,
+  useListItemRovingFocus,
+  useOverflowListModel,
+} from '@workday/canvas-kit-react/collection';
 import {
   composeHooks,
   createElemPropsHook,
   createSubModelElemPropsHook,
   createSubcomponent,
+  useLocalRef,
+  useResizeObserver,
 } from '@workday/canvas-kit-react/common';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
@@ -14,7 +20,10 @@ import {createStencil} from '@workday/canvas-kit-styling';
 import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
 
 import {StyledTabItem} from './TabsItem';
-import {useTabsModel} from './useTabsModel';
+import {TABS_OVERFLOW_BUTTON_ID, useTabsModel} from './useTabsModel';
+
+// Re-export for consumers who may need to reference the overflow button ID
+export {TABS_OVERFLOW_BUTTON_ID} from './useTabsModel';
 
 export interface OverflowButtonProps {
   /**
@@ -32,21 +41,84 @@ const tabsOverflowButtonStencil = createStencil({
   },
 });
 
+/**
+ * Measures the overflow button and reports its size to the model for overflow calculation.
+ * Unlike useOverflowListTarget, this does NOT set aria-hidden or visibility styles because
+ * we handle visibility via conditional rendering in the TabsOverflowButton component.
+ */
+const useTabsOverflowButtonMeasure = createElemPropsHook(useOverflowListModel)((model, ref) => {
+  const {elementRef, localRef} = useLocalRef(ref as React.Ref<HTMLElement>);
+
+  useResizeObserver({
+    ref: localRef,
+    onResize: ({width = 0, height = 0}) => {
+      if (localRef.current && (width > 0 || height > 0)) {
+        const styles = getComputedStyle(localRef.current);
+        const w = width + parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
+        const h = height + parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
+        model.events.setOverflowTargetSize({width: w, height: h});
+      }
+    },
+  });
+
+  return {
+    ref: elementRef,
+  };
+});
+
 export const useTabsOverflowButton = composeHooks(
+  // Measures the overflow button for overflow calculation (no aria-hidden or visibility styles)
+  useTabsOverflowButtonMeasure,
+  // Adds roving tabindex behavior for arrow key navigation within the tablist
+  useListItemRovingFocus,
+  // Registers the overflow button as an item in the collection for cursor navigation
+  useListItemRegister,
+  // Provides the stable data-id needed for collection registration
   createElemPropsHook(useTabsModel)(() => {
     return {
-      'aria-haspopup': true,
+      'data-id': TABS_OVERFLOW_BUTTON_ID,
     } as const;
   }),
-  useOverflowListTarget,
-  createSubModelElemPropsHook(useTabsModel)(m => m.menu, useMenuTarget)
+  // Connects to the menu sub-model for popup behavior
+  createSubModelElemPropsHook(useTabsModel)(m => m.menu, useMenuTarget),
+  // Syncs the cursor to the overflow button when it receives focus.
+  // This is needed because when the menu closes and focus returns to the overflow button,
+  // the cursor state needs to be updated so arrow key navigation works correctly.
+  createElemPropsHook(useTabsModel)(model => {
+    return {
+      onFocus() {
+        model.events.goTo({id: TABS_OVERFLOW_BUTTON_ID});
+      },
+    };
+  }),
+  // Runs FIRST - Sets ARIA attributes for the overflow tab
+  // In composeHooks, hooks run right-to-left, and mergeProps gives precedence to elemProps
+  // (props from earlier-running hooks). So this runs first and its props win.
+  // Note: We intentionally do NOT include useListItemSelect here because clicking
+  // the overflow button should open the menu, not select it as the active tab
+  createElemPropsHook(useTabsModel)(() => {
+    return {
+      'aria-haspopup': 'menu',
+      'aria-selected': false,
+      role: 'tab',
+    } as const;
+  })
 );
 
 export const TabsOverflowButton = createSubcomponent('button')({
   displayName: 'Tabs.OverflowButton',
   modelHook: useTabsModel,
   elemPropsHook: useTabsOverflowButton,
-})<OverflowButtonProps>(({children, ...elemProps}, Element) => {
+})<OverflowButtonProps>(({children, ...elemProps}, Element, model) => {
+  // Don't render the overflow button if there are no hidden items.
+  // This removes it from the DOM entirely, which:
+  // - Removes it from keyboard navigation (roving focus)
+  // - Removes it from screen reader announcements
+  // - Prevents the "8 tabs" announcement when only 7 are visible
+  if (model.state.hiddenIds.length === 0) {
+    return null;
+  }
+
   return (
     <StyledTabItem
       type="button"

package/tabs/lib/TabsPanels.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import {useListRenderItems} from '@workday/canvas-kit-react/collection';
 import {createSubcomponent} from '@workday/canvas-kit-react/common';
 
+import {useTabsListRenderItems} from './TabsList';
 import {useTabsModel} from './useTabsModel';
 
 export interface TabsPanelsProps<T = any> {
@@ -16,5 +16,5 @@ export const TabsPanels = createSubcomponent()({
   displayName: 'Tabs.Panels',
   modelHook: useTabsModel,
 })<TabsPanelsProps>(({children}, _, model) => {
-  return <>{useListRenderItems(model, children)}</>;
+  return <>{useTabsListRenderItems(model, children)}</>;
 });

package/tabs/lib/useTabsModel.tsx

@@ -5,9 +5,15 @@ import {
   useListModel,
   useOverflowListModel,
 } from '@workday/canvas-kit-react/collection';
-import {createModelHook, useModalityType} from '@workday/canvas-kit-react/common';
+import {createModelHook, slugify, useModalityType} from '@workday/canvas-kit-react/common';
 import {useMenuModel} from '@workday/canvas-kit-react/menu';
 
+/**
+ * This constant is used as the stable identifier for the overflow button in the tabs collection.
+ * It uses a `__` prefix to avoid conflicts with user-provided item IDs.
+ */
+export const TABS_OVERFLOW_BUTTON_ID = '__tabs-overflow__';
+
 /**
  * The TabsModel extends the [Collection
  * System](/get-started/for-developers/guides/collection-api/). Tabs have tab items and
@@ -51,11 +57,83 @@ export const useTabsModel = createModelHook({
   contextOverride: useOverflowListModel.Context,
 })(config => {
   const initialSelectedRef = React.useRef(config.initialTab);
-  const getId = config.getId || defaultGetId;
+  const userGetId = config.getId || defaultGetId;
   const modality = useModalityType();
 
+  // Stable object so getId can recognize the synthetic overflow item. Callers
+  // often pass a getId that only understands their own item shape (for example
+  // `item => item.contextId`). Without this, the overflow item gets an empty id
+  // and Tabs.List renders it as a normal tab.
+  const overflowItemRef = React.useRef({
+    id: TABS_OVERFLOW_BUTTON_ID,
+    text: 'More',
+  });
+
+  const getId = (item: Parameters<typeof userGetId>[0]) => {
+    if (item === overflowItemRef.current) {
+      return TABS_OVERFLOW_BUTTON_ID;
+    }
+    const id = userGetId(item);
+    if (id === TABS_OVERFLOW_BUTTON_ID) {
+      throw new Error(
+        `Tabs item id "${TABS_OVERFLOW_BUTTON_ID}" is reserved for the overflow tab. Choose a different id.`
+      );
+    }
+    return id;
+  };
+
+  // When using dynamic items, append a synthetic overflow button item to the
+  // items array. This ensures the overflow button is included in the navigation
+  // sequence for roving tabindex. The overflow button component will handle
+  // conditional rendering (not showing when there are no hidden items).
+  // The overflow button is NOT included in itemSizeCache (measured separately
+  // via setOverflowTargetSize), so it won't be incorrectly hidden.
+  const itemsWithOverflowButton = React.useMemo(() => {
+    if (config.items?.length) {
+      return [...config.items, overflowItemRef.current];
+    }
+    return config.items;
+  }, [config.items]);
+
+  // Track whether the overflow button should be non-interactive based on previous
+  // render's hiddenIds. We use a ref because hiddenIds isn't available until after
+  // the model is created, but we need to pass nonInteractiveIds to the model config.
+  // On first render, assume non-interactive (no overflow calculated yet).
+  // On subsequent renders, use the previous hiddenIds.length to determine.
+  const prevHiddenIdsLengthRef = React.useRef(0);
+  const [, setNonInteractiveTick] = React.useState(0);
+
+  const overflowButtonNonInteractive =
+    !!config.items?.length && prevHiddenIdsLengthRef.current === 0;
+
+  // Compute nonInteractiveIds to pass to the model, including overflow button when appropriate
+  const nonInteractiveIdsForModel = React.useMemo(() => {
+    const baseIds = config.nonInteractiveIds || [];
+    if (overflowButtonNonInteractive) {
+      return [...baseIds, TABS_OVERFLOW_BUTTON_ID];
+    }
+    return baseIds;
+  }, [config.nonInteractiveIds, overflowButtonNonInteractive]);
+
+  // Stores the ID of a tab that should receive focus after the menu closes.
+  // This is used when selecting a tab from the overflow menu - we want focus
+  // to go to the newly selected tab, not back to the overflow button.
+  const pendingFocusTabIdRef = React.useRef<string | null>(null);
+  const pendingFocusRafOuterRef = React.useRef(0);
+  const pendingFocusRafInnerRef = React.useRef(0);
+
+  React.useLayoutEffect(() => {
+    return () => {
+      cancelAnimationFrame(pendingFocusRafOuterRef.current);
+      cancelAnimationFrame(pendingFocusRafInnerRef.current);
+    };
+  }, []);
+
   const model = useOverflowListModel(
     useOverflowListModel.mergeConfig(config, {
+      items: itemsWithOverflowButton,
+      getId,
+      nonInteractiveIds: nonInteractiveIdsForModel,
       shouldCalculateOverflow: modality !== 'touch',
       orientation: config.orientation || 'horizontal',
       onRegisterItem(data) {
@@ -73,6 +151,63 @@ export const useTabsModel = createModelHook({
     })
   );
 
+  // Update the ref after each render so the next render knows the current hiddenIds.length.
+  // If hiddenIds.length changed (e.g. overflow just calculated), force a re-render so
+  // we pass the correct nonInteractiveIds and the overflow button is not stuck disabled.
+  React.useLayoutEffect(() => {
+    const nextLen = model.state.hiddenIds.length;
+    if (prevHiddenIdsLengthRef.current !== nextLen) {
+      prevHiddenIdsLengthRef.current = nextLen;
+      setNonInteractiveTick(t => t + 1);
+    } else {
+      prevHiddenIdsLengthRef.current = nextLen;
+    }
+  }, [model.state.hiddenIds.length]);
+
+  // When the cursor is on an item that isn't in the DOM, move it to a visible one so the
+  // roving tabindex lands on a focusable element. This covers: (1) cursor on a hidden tab when
+  // only "More" is visible, and (2) cursor on the overflow button when we widen and it unmounts.
+  React.useLayoutEffect(() => {
+    const {cursorId, hiddenIds, items} = model.state;
+    if (!cursorId) {
+      return;
+    }
+    const currentCursorId = typeof cursorId === 'string' ? cursorId : (cursorId.slice(-1)[0] ?? '');
+    const cursorOnHidden = currentCursorId ? hiddenIds.includes(currentCursorId) : false;
+    const cursorOnOverflowWhenNoOverflow =
+      currentCursorId === TABS_OVERFLOW_BUTTON_ID && hiddenIds.length === 0;
+    if (cursorOnHidden) {
+      // Move to first visible item (including overflow button when it's the only one visible)
+      const firstVisible = items.find(item => !hiddenIds.includes(item.id));
+      if (firstVisible) {
+        model.events.goTo({id: firstVisible.id});
+      }
+    } else if (cursorOnOverflowWhenNoOverflow) {
+      // Overflow button unmounted; move to selected tab or first tab (not the overflow button)
+      const selectedIds = model.state.selectedIds;
+      const selectedId =
+        selectedIds !== 'all' && Array.isArray(selectedIds) && selectedIds.length
+          ? selectedIds[0]
+          : undefined;
+      const firstVisibleTab = items.find(
+        item => item.id !== TABS_OVERFLOW_BUTTON_ID && !hiddenIds.includes(item.id)
+      );
+      const targetId =
+        selectedId && !hiddenIds.includes(selectedId) ? selectedId : firstVisibleTab?.id;
+      if (targetId) {
+        model.events.goTo({id: targetId});
+      }
+    }
+    // Use field-level deps instead of `model.state` so this does not re-run on every model update.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    model.state.cursorId,
+    model.state.hiddenIds,
+    model.state.items,
+    model.state.selectedIds,
+    model.events,
+  ]);
+
   const panels = useListModel();
 
   const state = {
@@ -120,8 +255,31 @@ export const useTabsModel = createModelHook({
     getTextValue: config.menuConfig?.getTextValue || config.getTextValue,
     nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
     onSelect(data) {
-      menu.events.hide();
+      // Store the tab ID to focus after the menu closes and React re-renders
+      pendingFocusTabIdRef.current = data.id;
+
+      // Update state: select the tab, move cursor, then close menu
       events.select(data);
+      model.events.goTo({id: data.id});
+      menu.events.hide();
+
+      // Focus the selected tab AFTER React has re-rendered.
+      // Double rAF is required because useReturnFocus restores focus to the overflow
+      // button on a single rAF after hide; the second frame runs after that restore.
+      pendingFocusRafOuterRef.current = requestAnimationFrame(() => {
+        pendingFocusRafInnerRef.current = requestAnimationFrame(() => {
+          const tabId = pendingFocusTabIdRef.current;
+          if (tabId) {
+            const tabElement = document.querySelector<HTMLElement>(
+              `[data-focus-id="${slugify(`${model.state.id}-${tabId}`)}"]`
+            );
+            if (tabElement) {
+              tabElement.focus();
+            }
+            pendingFocusTabIdRef.current = null;
+          }
+        });
+      });
     },
     onShow() {
       // Always select the first item when the menu is opened