@workday/canvas-kit-preview-react 16.1.7 → 16.1.9

package/dist/es6/tabs/lib/useTabsModel.js

@@ -1,7 +1,12 @@
 import React from 'react';
 import { defaultGetId, 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
@@ -49,11 +54,73 @@ export const useTabsModel = createModelHook({
     requiredConfig: useOverflowListModel.requiredConfig,
     contextOverride: useOverflowListModel.Context,
 })(config => {
-    var _a;
+    var _a, _b;
     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) => {
+        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(() => {
+        var _a;
+        if ((_a = config.items) === null || _a === void 0 ? void 0 : _a.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 = !!((_a = config.items) === null || _a === void 0 ? void 0 : _a.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(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) {
@@ -64,11 +131,64 @@ export const useTabsModel = createModelHook({
         },
         initialSelectedIds: config.initialTab
             ? [config.initialTab]
-            : ((_a = config.items) === null || _a === void 0 ? void 0 : _a.length)
+            : ((_b = config.items) === null || _b === void 0 ? void 0 : _b.length)
                 ? [getId(config.items[0])]
                 : [],
         shouldVirtualize: false,
     }));
+    // 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(() => {
+        var _a;
+        const { cursorId, hiddenIds, items } = model.state;
+        if (!cursorId) {
+            return;
+        }
+        const currentCursorId = typeof cursorId === 'string' ? cursorId : ((_a = cursorId.slice(-1)[0]) !== null && _a !== void 0 ? _a : '');
+        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 === null || firstVisibleTab === void 0 ? void 0 : 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 = {
         ...model.state,
@@ -105,8 +225,27 @@ 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(`[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

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

@@ -1 +1 @@
-export const version = '16.1.7';
+export const version = '16.1.9';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "16.1.7",
+  "version": "16.1.9",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -48,8 +48,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^16.1.7",
-    "@workday/canvas-kit-styling": "^16.1.7",
+    "@workday/canvas-kit-react": "^16.1.9",
+    "@workday/canvas-kit-styling": "^16.1.9",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-tokens-web": "^4.4.0",
     "@workday/design-assets-types": "^0.3.0"
@@ -60,5 +60,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "ffa1c89206ffb225fa448438cb813bc29418c817"
+  "gitHead": "5a204161d968a951c6e5bca4010893f7e09fd73d"
 }

package/tabs/lib/TabsItem.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import {
+  ListRenderItemContext,
   isSelected,
   useListItemRegister,
   useListItemRovingFocus,
@@ -229,6 +230,43 @@ export const StyledTabItem = createComponent('button')<TabsItemProps>({
   },
 });
 
+/**
+ * When the selected tab receives ArrowDown, move focus to its tab panel.
+ * Returning `null` is the mergeCallback sentinel that stops later-merged
+ * `onKeyDown` handlers (including roving focus) from also handling this key.
+ * This hook must be composed before `useListItemRovingFocus` so it runs after
+ * that hook and its return value can skip the roving handler.
+ * Tabs.OverflowButton does not use this hook.
+ *
+ * ArrowDown is only intercepted in horizontal orientation. In a vertical tablist,
+ * ArrowDown is the roving-navigation key and must reach `useListItemRovingFocus`.
+ */
+const useTabsItemFocusPanelOnArrowDown = createElemPropsHook(useTabsModel)((
+  {state},
+  _,
+  elemProps: {'data-id'?: string} = {}
+) => {
+  const {item} = React.useContext(ListRenderItemContext);
+  const name = elemProps['data-id'] || item?.id || '';
+  const selected = !!name && isSelected(name, state);
+
+  return {
+    onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+      if (!selected || state.orientation !== 'horizontal' || event.key !== 'ArrowDown') {
+        return;
+      }
+      event.preventDefault();
+      const panelId = slugify(`tabpanel-${state.id}-${name}`);
+      const panel = document.getElementById(panelId);
+      if (panel) {
+        (panel as HTMLElement).focus();
+      }
+      // mergeCallback: `null` prevents the roving-focus onKeyDown from running.
+      return null;
+    },
+  };
+});
+
 export const useTabsItem = composeHooks(
   createElemPropsHook(useTabsModel)(({state}, _, elemProps: {'data-id'?: string} = {}) => {
     const name = elemProps['data-id'] || '';
@@ -244,6 +282,7 @@ export const useTabsItem = composeHooks(
   }),
   useListItemSelect,
   useOverflowListItemMeasure,
+  useTabsItemFocusPanelOnArrowDown,
   useListItemRovingFocus,
   useListItemRegister
 );

package/tabs/lib/TabsList.tsx

@@ -1,23 +1,26 @@
 import * as React from 'react';
 
 import {
-  useListRenderItems,
-  useListResetCursorOnBlur,
+  ListRenderItemContext,
+  isCursor,
+  orientationKeyMap,
   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} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
-import {useTabsModel} from './useTabsModel';
+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,
     gap: system.legacy.gap.sm,
 
     '@media screen and (max-width: 768px)': {
@@ -156,6 +203,37 @@ 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 or panel render function.
+ */
+export function useTabsCollectionRenderItems(
+  model: ReturnType<typeof useTabsModel>,
+  children: ((item: Generic, index: number) => React.ReactNode) | React.ReactNode
+): React.ReactNode {
+  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,
@@ -173,7 +251,7 @@ export const TabsList = createSubcomponent('div')({
           })
         )}
       >
-        {useListRenderItems(model, children)}
+        {useTabsCollectionRenderItems(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,14 +41,68 @@ 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')({
@@ -47,6 +110,15 @@ export const TabsOverflowButton = createSubcomponent('button')({
   modelHook: useTabsModel,
   elemPropsHook: useTabsOverflowButton,
 })<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 {useTabsCollectionRenderItems} 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 <>{useTabsCollectionRenderItems(model, children)}</>;
 });