@workday/canvas-kit-react 5.3.0 → 5.3.4

package/tabs/lib/cursor/hooks.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import {mergeProps, useIsRTL, useMount} from '@workday/canvas-kit-react/common';
+
+import {CursorModel, getItem, getNext} from './useCursorModel';
+
+export const orientationKeyMap = {
+  horizontal: {
+    ArrowLeft: 'previous',
+    Left: 'previous',
+    ArrowRight: 'next',
+    Right: 'next',
+    Home: 'first',
+    End: 'last',
+  },
+  vertical: {
+    ArrowUp: 'previous',
+    Up: 'previous',
+    ArrowDown: 'next',
+    Down: 'next',
+    Home: 'first',
+    End: 'last',
+  },
+} as const;
+
+const rightToLeftMap = {
+  ArrowLeft: 'ArrowRight',
+  Left: 'Right',
+  ArrowRight: 'ArrowLeft',
+  Right: 'Left',
+  Home: 'End',
+  End: 'Home',
+} as const;
+
+/**
+ * Handles the roving focus behavior of a Cursor model. It should be added to the element
+ * representing the list. It does not handle the tabIndex.
+ *
+ * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
+ */
+export const useRovingFocusList = (model: CursorModel, elemProps = {}) => {
+  const {state, events} = model;
+  const stateRef = React.useRef(state);
+  stateRef.current = state;
+  // keep track of intentional focus changes. Without this state tracking, all changes to
+  // `state.cursorId` or `state.items` would result in focus changes. That is definitely not what
+  // we want.
+  const keyDownRef = React.useRef(false);
+  const isRTL = useIsRTL();
+
+  React.useEffect(() => {
+    if (keyDownRef.current) {
+      const item = getItem(state.cursorId, state.items);
+      item.ref.current?.focus();
+
+      keyDownRef.current = false;
+    }
+  }, [state.cursorId, state.items]);
+
+  return mergeProps(
+    {
+      onKeyDown(event: React.KeyboardEvent) {
+        (Object.keys(
+          orientationKeyMap[state.orientation]
+        ) as (keyof typeof orientationKeyMap[typeof state.orientation])[]).forEach(key => {
+          if (isRTL ? event.key === rightToLeftMap[key] : event.key === key) {
+            const event = orientationKeyMap[state.orientation][key];
+            keyDownRef.current = true;
+            events[event]?.();
+          }
+        });
+      },
+    },
+    elemProps
+  );
+};
+
+/**
+ * Handles the roving focus behavior of a Cursor model. It should be added to the element
+ * representing a list item. It does not handle the tabIndex.
+ *
+ * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
+ */
+export const useRovingFocusItem = ({state}: CursorModel, elemProps = {}) => {
+  // Tracks when this element has focus. If this item is removed while still focused, we have to
+  // inform the model to move the cursor to the next item.
+  const focusRef = React.useRef(false);
+
+  // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
+  // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
+  // empty array
+  const stateRef = React.useRef(state);
+  stateRef.current = state;
+
+  useMount(() => {
+    return () => {
+      if (focusRef.current && stateRef.current.items.length) {
+        // Unmount is called before state updates are flushed and we'll never get the last state
+        // update, so use `getNext` instead of `getItem`
+        const item = getNext(stateRef.current.cursorId, stateRef.current.items);
+
+        // If we call `focus` right away, there seems to be a timing issue where the focus handler
+        // never gets called. Waiting until just before a frame is rendered seems to ensure the
+        // focus handler is called correctly. Removing will make deleting multiple items fail.
+        requestAnimationFrame(() => {
+          item.ref.current?.focus();
+        });
+      }
+    };
+  });
+
+  return mergeProps(
+    {
+      onFocus(event: React.FocusEvent) {
+        focusRef.current = true;
+      },
+      onBlur(event: React.FocusEvent) {
+        focusRef.current = false;
+      },
+    },
+    elemProps
+  );
+};

package/tabs/lib/cursor/index.ts

@@ -1,2 +1,2 @@
-export * from './useRovingFocus';
+export * from './hooks';
 export * from './useCursorModel';

package/tabs/lib/cursor/useCursorModel.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import {createEventMap, ToModelConfig, useEventMap, assert} from '@workday/canvas-kit-react/common';
+import {
+  createEventMap,
+  Model,
+  ToModelConfig,
+  useEventMap,
+  assert,
+} from '@workday/canvas-kit-react/common';
 
 import {
   ListState,
@@ -7,13 +13,13 @@ import {
   BaseListModelConfig,
   listEventMap,
   useListModel,
+  Item,
   ListModelConfig,
-  ListModel,
 } from '../list/useListModel';
 
 export type Orientation = 'horizontal' | 'vertical';
 
-export type CursorState<T = unknown> = ListState<T> & {
+export type CursorState = ListState & {
   /** Orientation of the list. This property determines what "next" and "previous" mean. This should
    * be set to match the layout of UI components */
   orientation: Orientation;
@@ -21,7 +27,7 @@ export type CursorState<T = unknown> = ListState<T> & {
   cursorId: string;
 };
 
-export type CursorEvents<T = unknown> = ListEvents<T> & {
+export type CursorEvents = ListEvents & {
   /** Directly sets the cursor to the list item by its identifier.  */
   goTo(data: {id: string}): void;
   /** Set the cursor to the "next" item in the list. If the end of the list is detected, it will
@@ -36,10 +42,7 @@ export type CursorEvents<T = unknown> = ListEvents<T> & {
   last(): void;
 };
 
-export interface CursorModel<T = unknown> extends ListModel<T> {
-  state: CursorState<T>;
-  events: CursorEvents<T>;
-}
+export type CursorModel = Model<CursorState, CursorEvents>;
 
 export const cursorEventMap = createEventMap<CursorEvents>()({
   guards: {
@@ -58,114 +61,98 @@ export const cursorEventMap = createEventMap<CursorEvents>()({
   },
 });
 
-export type BaseCursorModelConfig<T> = BaseListModelConfig<T> & {
+export type BaseCursorModelConfig = BaseListModelConfig & {
   /**
    * The orientation of a list of items. Values are either `vertical` or `horizontal`. This value will
-   * effect which ids activate progression through a list. For example, `horizontal` will activate with
+   * effect which keys activate progression through a list. For example, `horizontal` will activate with
    * left and right arrows while `vertical` will activate with up and down arrows.
    * @default 'vertical'
    */
   orientation?: Orientation;
-  /**
-   * Initial cursor position. If not provided, the cursor will point to the first item in the list
-   */
-  initialCursorId?: string;
 };
 
-export type CursorModelConfig<T> = BaseCursorModelConfig<T> &
-  Partial<ToModelConfig<CursorState<T>, CursorEvents<T>, typeof cursorEventMap>>;
-
-export const useCursorNavigation = <T extends unknown>(
-  state: CursorState<T>,
-  getId: ListModel<T>['getId']
-) => {
-  // refs for performance so that new functions aren't created every render
-  const getIdRef = React.useRef(getId);
-  const itemsRef = React.useRef(state.items);
-  const nonInteractiveIdsRef = React.useRef(state.nonInteractiveIds);
-
-  itemsRef.current = state.items;
-  nonInteractiveIdsRef.current = state.nonInteractiveIds;
-
-  // return a memoized function to prevent recreation of functions every render
-  return React.useMemo(() => {
-    const getFirst = () => itemsRef.current[0];
-    const getLast = () => itemsRef.current[itemsRef.current.length - 1];
-
-    const getItem = (id: string): T => {
-      const item = id ? itemsRef.current.find(item => getIdRef.current(item) === id) : getFirst(); // no id, return first item
-      assert(item, `Item not found: ${id}`);
-      return item;
-    };
-
-    const getOffsetItem = (offset: number) => (id: string, tries = itemsRef.current.length): T => {
-      const items = itemsRef.current;
-      const item = getItem(id);
-
-      const getId = getIdRef.current;
-      const currentIndex = items.findIndex(i => getId(item) === getId(i));
-      let nextIndex = currentIndex + offset;
-      if (nextIndex < 0) {
-        nextIndex = items.length - 1;
-      } else if (nextIndex >= items.length) {
-        nextIndex = 0;
-      }
+export type CursorModelConfig = BaseCursorModelConfig &
+  Partial<ToModelConfig<CursorState, CursorEvents, typeof cursorEventMap>>;
 
-      if (nonInteractiveIdsRef.current.includes(getId(items[nextIndex])) && 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)(getId(items[nextIndex]), tries - 1);
-      }
+const getFirst = (items: Item[]): Item => {
+  return items[0];
+};
 
-      return items[nextIndex];
-    };
+const getLast = (items: Item[]): Item => {
+  return items[items.length - 1];
+};
 
-    const getNext = getOffsetItem(1);
-    const getPrevious = getOffsetItem(-1);
+export const getItem = (id: string, items: Item[]): Item => {
+  const item = id ? items.find(item => item.id === id) : getFirst(items); // no id, return first item
+  assert(item, `Item not found: ${id}`);
+  return item;
+};
 
-    return {getFirst, getLast, getItem, getNext, getPrevious};
-  }, []);
+const getOffsetItem = (offset: number) => (id: string, items: Item[]): Item => {
+  const item = getItem(id, items);
+  const currentIndex = items.findIndex(({id}) => item.id === id);
+  let nextIndex = currentIndex + offset;
+  if (nextIndex < 0) {
+    nextIndex = items.length - 1;
+  } else if (nextIndex >= items.length) {
+    nextIndex = 0;
+  }
+
+  const disabledAttribute = items[nextIndex].ref.current?.getAttribute('disabled');
+  if (disabledAttribute !== null || disabledAttribute === 'false') {
+    // The next item is disabled, try again
+    return getOffsetItem(offset)(items[nextIndex].id, items);
+  }
+
+  return items[nextIndex];
 };
 
-export const useCursorModel = <T extends unknown>(
-  config: CursorModelConfig<T> = {}
-): CursorModel<T> => {
+export const hasItems = (items: Item[]) => items.some(item => item.ref.current);
+
+export const getNext = getOffsetItem(1);
+export const getPrevious = getOffsetItem(-1);
+
+export const useCursorModel = (config: CursorModelConfig = {}): CursorModel => {
   const [orientation] = React.useState(config.orientation || 'vertical');
   const [cursorId, setCursorId] = React.useState('');
-  const list = useListModel(config as ListModelConfig<T>);
-  const initialCurrentRef = React.useRef(
-    config.initialCursorId || config.items?.length ? list.getId(config.items![0]) : ''
-  );
+  const initialCurrentRef = React.useRef('');
+  const list = useListModel(config as ListModelConfig);
 
   const state = {...list.state, orientation, cursorId};
-  const navigation = useCursorNavigation(state, list.getId);
 
   const events = useEventMap(cursorEventMap, state, config, {
     ...list.events,
     registerItem(data) {
       // point the cursor at the first item
       if (!initialCurrentRef.current) {
-        initialCurrentRef.current = list.getId(data.item);
+        initialCurrentRef.current = data.item.id;
         setCursorId(initialCurrentRef.current);
       }
       list.events.registerItem(data);
     },
+    unregisterItem(data) {
+      // move the cursor forward if the the cursor is pointing to an item that is being removed
+      if (state.cursorId === data.id && state.items.some(i => i.ref.current !== null)) {
+        events.next();
+      }
+      list.events.unregisterItem(data);
+    },
     goTo({id}) {
       setCursorId(id);
     },
     next() {
-      setCursorId(list.getId(navigation.getNext(state.cursorId)));
+      setCursorId(getNext(state.cursorId, state.items).id);
     },
     previous() {
-      setCursorId(list.getId(navigation.getPrevious(state.cursorId)));
+      setCursorId(getPrevious(state.cursorId, state.items).id);
     },
     first() {
-      setCursorId(list.getId(navigation.getFirst()));
+      setCursorId(getFirst(state.items).id);
     },
     last() {
-      setCursorId(list.getId(navigation.getLast()));
+      setCursorId(getLast(state.items).id);
     },
-  } as CursorEvents<T>);
+  });
 
-  return {state, events, getId: list.getId};
+  return {state, events};
 };

package/tabs/lib/hooks.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {mergeProps} from '@workday/canvas-kit-react/common';
+
+import {orientationKeyMap} from './cursor/hooks';
+import {TabsModel} from './useTabsModel';
+
+/**
+ * Reset the cursor to the active tab when the tab list looses focus
+ */
+export const useResetCursorOnBlur = ({state, events}: TabsModel, elemProps = {}) => {
+  const programmaticFocusRef = React.useRef(false);
+  return mergeProps(
+    {
+      onKeyDown(event: React.KeyboardEvent) {
+        // Programmatic focus only on any focus change via keyboard
+        if (Object.keys(orientationKeyMap[state.orientation]).indexOf(event.key) !== -1) {
+          programmaticFocusRef.current = true;
+        }
+      },
+      onFocus() {
+        programmaticFocusRef.current = false;
+      },
+      onBlur() {
+        if (!programmaticFocusRef.current) {
+          events.goTo({id: state.activeTab});
+        }
+      },
+    },
+    elemProps
+  );
+};

package/tabs/lib/list/hooks.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import {useMountLayout} from '@workday/canvas-kit-react/common';
+
+import {ListModel} from './useListModel';
+
+/**
+ * Handle list registration. Returns an identifier used to identify this item in the list
+ * @param model A ListModel
+ * @param localRef A RefObject that will be used to register an item
+ * @param id Desired identifier for the List Model. If not provided, it will fall back to the index
+ * in the list
+ * @param index (Optional) Specify the position of the item if the order is expected to change
+ */
+export const useRegisterItem = (
+  {state, events}: ListModel,
+  localRef: React.RefObject<any>,
+  id = '',
+  index?: number
+): string => {
+  const [localId, setLocalId] = React.useState(id);
+  const firstRender = React.useRef(true);
+
+  React.useLayoutEffect(() => {
+    if (index !== undefined && !firstRender.current) {
+      events.updateItemPosition({id: localId, index});
+    }
+    // we only care about the index changing
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [index]);
+
+  useMountLayout(() => {
+    const defaultId = state.indexRef.current;
+    const itemId = id || String(defaultId);
+    events.registerItem({item: {id: itemId, ref: localRef}, index});
+    setLocalId(itemId);
+    firstRender.current = false;
+
+    return () => {
+      events.unregisterItem({id: itemId});
+    };
+  });
+
+  return localId;
+};

package/tabs/lib/list/index.ts

@@ -1,3 +1,2 @@
-export * from './useListRegisterItem';
+export * from './hooks';
 export * from './useListModel';
-export * from './renderItem';

package/tabs/lib/list/useListModel.tsx

@@ -5,42 +5,34 @@ import {
   ToModelConfig,
   useEventMap,
   useUniqueId,
-  assert,
 } from '@workday/canvas-kit-react/common';
 
-export type ListState<T = unknown> = {
+export type Item = {
+  /** IDREF of the list. Children ids can be derived from this id */
+  id: string;
+  ref: React.RefObject<HTMLElement>;
+};
+
+export type ListState = {
   /** IDREF of the list. Children ids can be derived from this id */
   id: string;
   /** Used as an auto-incrementing ID for accessibility */
   indexRef: React.RefObject<number>;
-  items: T[];
-  /**
-   * An array of ids of non-interactive elements. Non-interactive elements usually have `disabled`
-   * applied to them and thus are not focusable by the browser. Lists need to know about these so
-   * that keyboard navigation properly skips over these items. Interactive elements that are
-   * disabled should use `[aria-disabled]` instead and should still receive focus.
-   * @see https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_disabled_controls
-   */
-  nonInteractiveIds: string[];
+  items: Item[];
 };
 
-export type ListEvents<T = unknown> = {
+export type ListEvents = {
   /** Register an item to the list. Takes in an identifier, a React.Ref and an optional index. This should be called on
    * component mount */
-  registerItem(data: {item: T; index?: number}): void;
+  registerItem(data: {item: Item; index?: number}): void;
   /** Unregister an item by its identifier. This should be called when the component is unmounted */
   unregisterItem(data: {id: string}): void;
   /** Updates the position of a tab within the list. This should be called when a tab's index is updated */
   updateItemPosition(data: {id: string; index: number}): void;
 };
 
-export interface ListModel<T = unknown> extends Model<ListState<T>, ListEvents<T>> {
-  getId: (item: T) => string;
-}
+export type ListModel = Model<ListState, ListEvents>;
 
-// We don't have a way of knowing what the generic could be, so we leave it as `unknown`. It will
-// probably need to be cast to the generic in use inside extending models. This will not effect the
-// use of the model in an application, only in models composing this model.
 export const listEventMap = createEventMap<ListEvents>()({
   guards: {
     /**
@@ -84,37 +76,20 @@ export const listEventMap = createEventMap<ListEvents>()({
   },
 });
 
-export type BaseListModelConfig<T = unknown> = {
+export type BaseListModelConfig = {
   /** IDREF of the list. Children ids can be derived from this id */
   id?: string;
-  items?: T[];
-  getId?: (item: T) => string;
-  /**
-   * Array of all ids which are currently disabled
-   */
-  nonInteractiveIds?: string[];
 };
 
-export type ListModelConfig<T> = BaseListModelConfig<T> &
-  Partial<ToModelConfig<ListState<T>, ListEvents<T>, typeof listEventMap>>;
-
-export const defaultGetId = (item: any): string => {
-  assert(item.id, 'A list item must have an `id` field or a `getId` function defined');
-  return item.id;
-};
+export type ListModelConfig = BaseListModelConfig &
+  Partial<ToModelConfig<ListState, ListEvents, typeof listEventMap>>;
 
-export const useListModel = <T extends unknown>(config: ListModelConfig<T> = {}): ListModel<T> => {
+export const useListModel = (config: ListModelConfig = {}): ListModel => {
   const id = useUniqueId(config.id);
   const indexRef = React.useRef(0);
-  const [items, setItems] = React.useState(config.items || []);
-  const getId = config.getId || defaultGetId;
+  const [items, setItems] = React.useState([] as Item[]);
 
-  const state = {
-    id,
-    items: config.items || items,
-    indexRef,
-    nonInteractiveIds: config.nonInteractiveIds || [],
-  };
+  const state = {id, items, indexRef};
 
   const events = useEventMap(listEventMap, state, config, {
     registerItem({item, index}) {
@@ -130,8 +105,8 @@ export const useListModel = <T extends unknown>(config: ListModelConfig<T> = {})
     },
     unregisterItem({id}) {
       setItems(items => {
-        if (items.find(item => getId(item) === id)) {
-          return items.filter(item => getId(item) !== id);
+        if (items.find(item => item.id === id)) {
+          return items.filter(item => item.id !== id);
         } else {
           return items;
         }
@@ -139,12 +114,12 @@ export const useListModel = <T extends unknown>(config: ListModelConfig<T> = {})
     },
     updateItemPosition({id, index}) {
       setItems(items => {
-        const copy = items.filter(item => getId(item) !== id);
-        copy.splice(index, 0, items.find(item => getId(item) === id)!);
+        const copy = items.filter(item => item.id !== id);
+        copy.splice(index, 0, items.find(item => item.id === id)!);
         return copy;
       });
     },
-  } as ListEvents<T>);
+  });
 
-  return {state, events, getId};
+  return {state, events};
 };