@workday/canvas-kit-preview-react 16.2.0-0630-next.0 → 16.2.0-0638-next.0

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
@@ -56,11 +62,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) {
@@ -78,6 +156,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 = {
@@ -122,8 +257,31 @@ export const useTabsModel = createModelHook({
       items: overflowItems,
       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