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

package/dist/es6/react/collection/lib/useCursorListModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCursorListModel.d.ts","sourceRoot":"","sources":["../../../../../../react/collection/lib/useCursorListModel.tsx"],"names":[],"mappings":"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"}

package/dist/es6/react/collection/lib/useCursorListModel.js

@@ -0,0 +1,379 @@
+import React from 'react';
+import { createModelHook } from '@workday/canvas-kit-react/common';
+import { useBaseListModel } from './useBaseListModel';
+/**
+ * Factory function that does type checking to create navigation managers. Navigation managers
+ * are expected to handle all methods of a grid. If your use-case isn't meant to handle a grid,
+ * pick one of the existing navigation managers and override the methods you wish to implement.
+ *
+ * For example,
+ * ```tsx
+ * import {createNavigationManager, wrappingNavigationManager} from '@workday/canvas-kit-react/collection'
+ *
+ * const navigationManager = createNavigationManager({
+ *   ...wrappingNavigationManager,
+ *   getNext(id, {state}) {
+ *     //
+ *   }
+ * })
+ * ```
+ */
+export const createNavigationManager = (manager) => manager;
+/**
+ * Get the first item in a list regardless of column count
+ */
+export const getFirst = () => 0;
+/**
+ * Get the last item in a list regardless of column count
+ */
+export const getLast = (_, { state }) => state.items.length - 1;
+/**
+ * Get the first item in a row. If column count is 0, it will return the results of `getFirst`
+ */
+export const getFirstOfRow = (index, { state }) => {
+    if (state.columnCount) {
+        const offset = index % state.columnCount;
+        return index - offset;
+    }
+    return getFirst(index, { state });
+};
+/**
+ * get the last item in a row - if column count is 0, it will return the results of `getLast`
+ */
+export const getLastOfRow = (index, { state }) => {
+    if (state.columnCount) {
+        const offset = (index % state.columnCount) - state.columnCount + 1;
+        let nextIndex = index - offset;
+        if (nextIndex >= state.items.length) {
+            nextIndex = state.items.length - 1;
+        }
+        return nextIndex;
+    }
+    return getLast(index, { state });
+};
+/**
+ * get the item in the previous page. This can be author defined. By default it will return the
+ * first item for a list, and the first item in the same column for a grid.
+ */
+export const getPreviousPage = (index, { state }) => {
+    if (state.columnCount) {
+        return index % state.columnCount;
+    }
+    return getFirst(index, { state });
+};
+/**
+ * get the item in the next page. This can be author defined. By default, it will return the last
+ * item for a list, and the last item in the same column for a grid.
+ */
+export const getNextPage = (index, { state }) => {
+    if (state.columnCount) {
+        const lastRowIndex = state.items.length - state.columnCount;
+        return lastRowIndex + (index % state.columnCount);
+    }
+    return getLast(index, { state });
+};
+const getItem = (id, { state }) => {
+    return state.items.find(item => item.id === id);
+};
+/**
+ * Get the current cursor id of a Collection model's state.
+ */
+export const getCursor = (state) => typeof state.cursorId === 'string' ? state.cursorId : state.cursorId.slice(-1)[0] || '';
+/**
+ * Check if the provided id is the current cursor id of a Collection model's state.
+ */
+export const isCursor = (state, id) => {
+    const { cursorId } = state;
+    // Empty cursor must not use String.prototype.includes (e.g. ''.includes('') is true).
+    if (cursorId == null || cursorId === '') {
+        return false;
+    }
+    return typeof cursorId === 'string' ? cursorId === id : cursorId.includes(id);
+};
+export const getWrappingOffsetItem = (offset) => (index, { state }, tries = state.items.length) => {
+    if (Number.isNaN(index)) {
+        // we have no valid index. If the offset is positive, we'll return the first item
+        if (offset === 1) {
+            return getFirst(index, { state });
+        }
+        if (offset === -1) {
+            return getLast(index, { state });
+        }
+    }
+    const items = state.items;
+    let nextIndex = index + offset;
+    // calculate idealLength as in if the grid was a perfect rectangle
+    const rows = Math.ceil(items.length / state.columnCount);
+    const idealLength = rows * state.columnCount;
+    if (nextIndex < 0) {
+        if (offset === -1) {
+            // if the offset is -1, we want to wrap to the end
+            nextIndex = items.length - 1;
+        }
+        else {
+            // if the offset is smaller than -1, we want to wrap by column
+            if (idealLength + nextIndex >= items.length) {
+                // we'll overflow the grid because there isn't enough items. Move `nextIndex` up so we wrap in
+                // the right spot
+                nextIndex -= state.columnCount;
+            }
+            nextIndex = idealLength + nextIndex;
+        }
+    }
+    else if (nextIndex >= items.length) {
+        if (offset === 1) {
+            // if the offset is 1, we want to wrap to the beginning
+            nextIndex = 0;
+        }
+        else {
+            // if the offset is larger than 1, we want to wrap by column
+            if (nextIndex - idealLength < 0) {
+                // we're going to overflow the grid because there isn't enough items. Move `nextIndex` down to
+                // the missing item in the next row. This way we'll end up wrapping in the right spot
+                nextIndex += state.columnCount;
+            }
+            nextIndex = nextIndex - idealLength;
+        }
+    }
+    if (items.length > 1 && state.nonInteractiveIds.includes(items[nextIndex].id) && tries > 0) {
+        // The next item is disabled, try again, but only if we haven't already tried everything.
+        // Avoid an infinite loop with `tries`
+        return getWrappingOffsetItem(offset)(nextIndex, { state }, tries - 1);
+    }
+    return nextIndex;
+};
+export const getOffsetItem = (offset) => (index, { state }, tries = state.items.length) => {
+    const { items, columnCount } = state;
+    let nextIndex = index + offset;
+    if (Math.abs(offset) < columnCount) {
+        // if we're here, the columnCount is non-zero and the absolute value of offset is less than the
+        // column count. We don't want to wrap, so we'll bound within the row
+        const currentIndexInRow = index % columnCount;
+        const nextIndexInRow = nextIndex - index + currentIndexInRow;
+        if (nextIndexInRow >= columnCount || nextIndexInRow < 0) {
+            nextIndex = index;
+        }
+    }
+    else if (columnCount) {
+        // if we're here, there's a column count, but the offset will move into another row. We need to
+        // bound to row values
+        const nextRow = Math.floor(nextIndex / columnCount);
+        if (nextRow < 0 || nextRow >= columnCount) {
+            nextIndex = index;
+        }
+        // make sure we don't go out of bounds if the grid isn't a perfect rectangle
+        if (nextIndex > items.length - 1) {
+            nextIndex = index;
+        }
+    }
+    // make sure we're always in bounds
+    if (nextIndex < 0) {
+        nextIndex = 0;
+    }
+    else if (nextIndex >= items.length) {
+        nextIndex = items.length - 1;
+    }
+    if (state.nonInteractiveIds.includes(items[nextIndex].id) && tries > 0) {
+        // The next item is disabled, try again, but only if we haven't already tried everything.
+        // Avoid an infinite loop with `tries`
+        return getOffsetItem(offset)(nextIndex, { state }, tries - 1);
+    }
+    return nextIndex;
+};
+/**
+ * The default navigation manager of lists. This navigation manager will wrap around when the edge
+ * is hit. For example, if the user is the the right-most item in a list or right-most item in a
+ * row, the cursor will wrap around to the beginning or the next row.
+ */
+export const wrappingNavigationManager = createNavigationManager({
+    getFirst,
+    getLast,
+    getItem,
+    getNext: getWrappingOffsetItem(1),
+    getNextRow: (index, { state }) => getWrappingOffsetItem(state.columnCount)(index, { state }),
+    getPrevious: getWrappingOffsetItem(-1),
+    getPreviousRow: (index, { state }) => getWrappingOffsetItem(-state.columnCount)(index, { state }),
+    getPreviousPage,
+    getNextPage,
+    getFirstOfRow,
+    getLastOfRow,
+});
+/**
+ * The default navigation of grids. This navigation manager will not wrap, but will stop when an
+ * edge is detected. This could be the last item in a list or the last item of a row in a grid.
+ */
+export const navigationManager = createNavigationManager({
+    getFirst,
+    getLast,
+    getItem,
+    getNext: getOffsetItem(1),
+    getNextRow: (index, { state }) => getOffsetItem(state.columnCount)(index, { state }),
+    getPrevious: getOffsetItem(-1),
+    getPreviousRow: (index, { state }) => getOffsetItem(-state.columnCount)(index, { state }),
+    getPreviousPage,
+    getNextPage,
+    getFirstOfRow,
+    getLastOfRow,
+});
+/**
+ * A `CursorModel` extends a `ListModel` and adds a "cursor" to the list. A cursor is a pointer to a
+ * current position in the list. The most common use-case is keeping track of which item currently
+ * has focus within the list. Many w3c list role types specify a single tab stop within the list.
+ */
+export const useCursorListModel = createModelHook({
+    defaultConfig: {
+        ...useBaseListModel.defaultConfig,
+        /**
+         * Initial cursor position. If not provided, the cursor will point to the first item in the list
+         */
+        initialCursorId: '',
+        /**
+         * If this is set it will cause a wrapping of a list that will turn it into a grid
+         * @default 0
+         */
+        columnCount: 0,
+        /**
+         * Controls the state changes when the user sends navigation events to the model. For example,
+         * when the user hits the "right" arrow, a behavior hook will determine directionality
+         * (left-to-right or right-to-left) and call the correct navigation method. In our example, a
+         * left-to-right language would send a `getNext`. The navigation manager may return the next item
+         * in the list. Different managers can be created for slightly different use cases. The default
+         * navigation manager will accept `orientation` and directionality to determine mapping.
+         *
+         * An example override might be a tab list with an overflow menu that is meant to be transparent
+         * to screen reader users. This would require the overflow menu to accept both up/down keys as
+         * well as left/right keys to give a more consistent experience to all users.
+         */
+        navigation: wrappingNavigationManager,
+        /**
+         * Controls how much a pageUp/pageDown navigation request will jump. If not provided, the size
+         * of the list and number of items rendered will determine this value.
+         */
+        pageSize: 0,
+    },
+    requiredConfig: useBaseListModel.requiredConfig,
+    contextOverride: useBaseListModel.Context,
+})(config => {
+    var _a;
+    const [cursorId, setCursorId] = React.useState(config.initialCursorId);
+    const pageSizeRef = React.useRef(config.pageSize);
+    const columnCount = config.columnCount || 0;
+    const list = useBaseListModel(config);
+    const navigation = config.navigation;
+    // Cast as a readonly to signify this value should never be set
+    const cursorIndexRef = React.useRef(-1);
+    const setCursor = (index) => {
+        var _a;
+        const id = ((_a = state.items[index]) === null || _a === void 0 ? void 0 : _a.id) || '';
+        setCursorId(id);
+    };
+    // Keep the cursorIndex up to date with the cursor ID
+    if (cursorId && ((_a = list.state.items[cursorIndexRef.current]) === null || _a === void 0 ? void 0 : _a.id) !== cursorId) {
+        // We cast back as a writeable because this is the only place the value should be changed.
+        cursorIndexRef.current = list.state.items.findIndex(item => item.id === cursorId);
+    }
+    else if (!cursorId) {
+        cursorIndexRef.current = -1;
+    }
+    const state = {
+        ...list.state,
+        /** The id of the list item the cursor is pointing to */
+        cursorId,
+        /**
+         * Any positive non-zero value treats the list like a grid with rows and columns
+         * @default 0
+         * @private Use useGridModel instead to make a grid instead of a list
+         */
+        columnCount,
+        /**
+         * A React.Ref of the current page size. Either provided as config, or determined at runtime
+         * based on the size of the list container and the number of items fitting within the container.
+         */
+        pageSizeRef,
+        /**
+         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
+         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
+         * or the `items` change.
+         *
+         * @readonly
+         */
+        cursorIndexRef,
+    };
+    const events = {
+        ...list.events,
+        /** Directly sets the cursor to the list item by its identifier. */
+        goTo(data) {
+            const index = state.items.findIndex(item => item.id === data.id);
+            setCursor(index);
+        },
+        /**
+         * Set the cursor to the "next" item in the list. This event delegates to the `getNext` method of
+         * the navigation manager. For a list, the default navigation manager will wrap if cursor is
+         * currently on the last item. For a grid, the default navigation manager will stay on the last
+         * item in a row.
+         */
+        goToNext() {
+            const index = navigation.getNext(cursorIndexRef.current, { state });
+            setCursor(index);
+        },
+        /**
+         * Set the cursor to the "previous" item in the list. If the beginning of the list is detected,
+         * it will wrap to the last item
+         */
+        goToPrevious() {
+            const index = navigation.getPrevious(cursorIndexRef.current, { state });
+            setCursor(index);
+        },
+        /**
+         * Previous item perpendicular to the orientation of a list, or the previous row in a grid. For
+         * example, if a list is horizontal, the previous row would describe an up direction. This could
+         * be ignored by the navigation manager, or return the same result as `previous()`. In a grid,
+         * this would be the previous row (current position - column count).
+         */
+        goToPreviousRow() {
+            const index = navigation.getPreviousRow(cursorIndexRef.current, {
+                state,
+            });
+            setCursor(index);
+        },
+        /**
+         * Next item perpendicular to the orientation of a list, or the next row in a grid. For example,
+         * if a list is horizontal, the next row would describe a down direction. This could be ignored by
+         * the navigation manager, or return the same result as `next()`. In a grid, this would be the
+         * next row (current position + column count).
+         */
+        goToNextRow() {
+            const index = navigation.getNextRow(cursorIndexRef.current, { state });
+            setCursor(index);
+        },
+        /** Set the cursor to the first item in the list */
+        goToFirst() {
+            const index = navigation.getFirst(cursorIndexRef.current, { state });
+            setCursor(index);
+        },
+        /** Set the cursor to the last item in the list */
+        goToLast() {
+            const index = navigation.getLast(cursorIndexRef.current, { state });
+            setCursor(index);
+        },
+        goToFirstOfRow() {
+            const index = navigation.getFirstOfRow(cursorIndexRef.current, { state });
+            setCursor(index);
+        },
+        goToLastOfRow() {
+            const index = navigation.getLastOfRow(cursorIndexRef.current, { state });
+            setCursor(index);
+        },
+        goToNextPage() {
+            const index = navigation.getNextPage(cursorIndexRef.current, { state });
+            setCursor(index);
+        },
+        goToPreviousPage() {
+            const index = navigation.getPreviousPage(cursorIndexRef.current, {
+                state,
+            });
+            setCursor(index);
+        },
+    };
+    return { ...list, state, events, navigation };
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "16.2.0-0630-next.0",
+  "version": "16.2.0-0634-next.0",
   "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.2.0-0630-next.0",
-    "@workday/canvas-kit-styling": "^16.2.0-0630-next.0",
+    "@workday/canvas-kit-react": "^16.2.0-0634-next.0",
+    "@workday/canvas-kit-styling": "^16.2.0-0634-next.0",
     "@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": "cca2de38ec1c9736ce2d71f962e522a4861b82c2"
+  "gitHead": "52625db5c787e0187d80ef31e519daeaf8328501"
 }

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,
   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 {orientationKeyMap} from '../../../react/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,
     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>
     );