@workday/canvas-kit-react 6.8.8 → 6.9.0-next.4

package/collection/lib/useListItemRovingFocus.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import {useIsRTL, createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {useCursorListModel} from './useCursorListModel';
+
+export const orientationKeyMap = {
+  horizontal: {
+    ArrowLeft: 'goToPrevious',
+    Left: 'goToPrevious',
+    ArrowRight: 'goToNext',
+    Right: 'goToNext',
+    Home: 'goToFirst',
+    End: 'goToLast',
+    PageDown: 'goToNextPage',
+    PageUp: 'goToPreviousPage',
+  },
+  vertical: {
+    ArrowUp: 'goToPrevious',
+    Up: 'goToPrevious',
+    ArrowDown: 'goToNext',
+    Down: 'goToNext',
+    Home: 'goToFirst',
+    End: 'goToLast',
+    PageDown: 'goToNextPage',
+    PageUp: 'goToPreviousPage',
+  },
+} as const;
+
+const rightToLeftMap = {
+  ArrowLeft: 'ArrowRight',
+  Left: 'Right',
+  ArrowRight: 'ArrowLeft',
+  Right: 'Left',
+  Home: 'Home',
+  End: 'End',
+  PageDown: 'PageDown',
+  PageUp: 'PageUp',
+} as const;
+
+const gridKeyMap = {
+  ...orientationKeyMap.horizontal,
+  Home: 'goToFirstOfRow',
+  End: 'goToLastOfRow',
+  ArrowUp: 'goToPreviousRow',
+  Up: 'goToPreviousRow',
+  ArrowDown: 'goToNextRow',
+  Down: 'goToNextRow',
+} as const;
+
+const ctrlKeyMap = {
+  Home: 'goToFirst',
+  End: 'goToLast',
+} as const;
+
+const keys = <T extends object>(obj: T): (keyof T)[] => Object.keys(obj) as (keyof T)[];
+const hasOwnKey = <T extends object>(obj: T, key: any): key is keyof T => obj.hasOwnProperty(key);
+
+/**
+ * Handles the roving focus behavior of a Cursor model. It should be added to the element
+ * representing a list item.
+ *
+ * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
+ */
+export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
+  ({state, events, getId, navigation}, ref, elemProps: {'data-id'?: string} = {}) => {
+    // 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);
+    const getIdRef = React.useRef(getId);
+
+    // 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;
+
+    const keyDownRef = React.useRef(false);
+    const isRTL = useIsRTL();
+
+    React.useEffect(() => {
+      if (keyDownRef.current) {
+        const item = navigation.getItem(state.cursorId, {state});
+        if (state.isVirtualized) {
+          state.UNSTABLE_virtual.scrollToIndex(item.index);
+        }
+        requestAnimationFrame(() => {
+          document
+            .querySelector<HTMLElement>(
+              `[data-focus-id="${`${state.id}-${getIdRef.current(item)}`}"]`
+            )
+            ?.focus();
+        });
+
+        keyDownRef.current = false;
+      }
+      // we only want to run this effect if the cursor changes and not any other time
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [state.cursorId]);
+
+    return {
+      onKeyDown(event: React.KeyboardEvent) {
+        // Test ctrl key first
+        if (event.ctrlKey) {
+          for (const key in ctrlKeyMap) {
+            if (hasOwnKey(ctrlKeyMap, key)) {
+              keyDownRef.current = true;
+              events[ctrlKeyMap[key]]?.();
+              event.preventDefault();
+              return;
+            }
+          }
+        }
+        // Try regular keys
+        keys(state.columnCount > 0 ? gridKeyMap : orientationKeyMap[state.orientation]).forEach(
+          key => {
+            if (isRTL ? event.key === rightToLeftMap[key] : event.key === key) {
+              const eventName =
+                state.columnCount > 0 ? gridKeyMap[key] : orientationKeyMap[state.orientation][key];
+              keyDownRef.current = true;
+              if (events[eventName]) {
+                events[eventName]?.();
+                event.preventDefault();
+              }
+            }
+          }
+        );
+      },
+      onFocus() {
+        focusRef.current = true;
+      },
+      onBlur() {
+        focusRef.current = false;
+      },
+      onClick() {
+        events.goTo({id: elemProps['data-id']!});
+      },
+      'data-focus-id': `${state.id}-${elemProps['data-id']}`,
+      tabIndex: !state.cursorId
+        ? 0 // cursor isn't known yet, be safe and mark this as focusable
+        : !!elemProps['data-id'] && state.cursorId === elemProps['data-id']
+        ? 0 // A name is known and cursor is here
+        : -1, // A name is known an cursor is somewhere else
+      ref,
+    };
+  }
+);

package/collection/lib/useListItemSelect.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {useListModel} from './useListModel';
+
+export const useListItemSelect = createElemPropsHook(useListModel)(
+  ({state, events}, _?: React.Ref<HTMLElement>, elemProps: {'data-id'?: string} = {}) => {
+    const name = elemProps['data-id'] || '';
+    const onClick = (event: React.MouseEvent<HTMLElement>) => {
+      if (
+        state.nonInteractiveIds.includes(name) ||
+        event.currentTarget.hasAttribute('aria-disabled')
+      ) {
+        return;
+      }
+      events.select({id: name});
+    };
+
+    return {onClick};
+  }
+);

package/collection/lib/useListModel.tsx

@@ -0,0 +1,34 @@
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {useSelectionListModel} from './useSelectionListModel';
+
+// This file creates a `ListModel` composing a `BaseListModel`, `CursorListModel`, and
+// `SelectionListModel` and renames to `List*`. Without interfaces like this, the result would be
+// `SelectionList*` which is confusing to users, but the separation is easier to maintain
+
+export type ListProps<T = unknown> = {
+  children: React.ReactNode | ((item: T) => React.ReactNode);
+};
+
+export type ListItemProps = {
+  children?: React.ReactNode;
+  'data-id'?: string;
+};
+
+/**
+ * Create a list model that includes item registration, cursors for focus, and selection. You can
+ * inject navigation and selection managers to change how a user navigates or how selection works.
+ *
+ * @example
+ * const list = useListModel({
+ *   // custom handling for selection. single and multi select are provided
+ *   selection: mySelectionManager,
+ *   // wrapping and non-wrapping navigation are provided
+ *   navigation: myNavigationManager,
+ *   items: [{ id: '1', text: 'First'}, { id: '2', text: 'Second' }],
+ *   getId: item => item.id, // get the unique identifier of your item
+ * })
+ */
+export const useListModel = createModelHook({
+  defaultConfig: useSelectionListModel.defaultConfig,
+  requiredConfig: useSelectionListModel.requiredConfig,
+})(useSelectionListModel);

package/collection/lib/useListRenderItem.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {Generic} from '@workday/canvas-kit-react/common';
+
+import {useBaseListModel} from './useBaseListModel';
+
+export function useListRenderItems<T>(
+  model: ReturnType<typeof useBaseListModel>,
+  children: ((item: Generic, index: number) => React.ReactNode) | React.ReactNode
+) {
+  const items =
+    typeof children === 'function'
+      ? model.state.isVirtualized
+        ? model.state.UNSTABLE_virtual.virtualItems.map(virtual => {
+            const item = model.state.items[virtual.index];
+            const child = children(item.value, virtual.index);
+            return React.cloneElement(child, {
+              // We call this `virtual` instead of `virtualItem` to avoid a React render warning
+              // about capital letters in attributes. React thinks this will be applied to the DOM
+              // element even though we remove it later...
+              virtual,
+              key: item.id,
+              item,
+            });
+          })
+        : model.state.items.map(item =>
+            React.cloneElement(children(item.value, item.index), {key: item.id, item: item.value})
+          )
+      : null;
+
+  return items || children;
+}

package/collection/lib/useListResetCursorOnBlur.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {orientationKeyMap} from './useListItemRovingFocus';
+import {useListModel} from './useListModel';
+
+/**
+ * Reset the cursor to the selected item when the list looses focus
+ */
+export const useListResetCursorOnBlur = createElemPropsHook(useListModel)(({state, events}) => {
+  const programmaticFocusRef = React.useRef(false);
+  return {
+    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.selectedIds[0]});
+      }
+    },
+  };
+});

package/collection/lib/useOverflowListItemMeasure.tsx

@@ -0,0 +1,40 @@
+import {createElemPropsHook, useLocalRef, useMountLayout} from '@workday/canvas-kit-react/common';
+
+import {useOverflowListModel} from './useOverflowListModel';
+
+const hiddenStyles = {
+  position: 'absolute',
+  left: -99999,
+} as const;
+
+export const useOverflowListItemMeasure = createElemPropsHook(useOverflowListModel)(
+  (model, ref?: React.Ref<HTMLElement>, elemProps: {'data-id'?: string} = {}) => {
+    const {elementRef, localRef} = useLocalRef(ref);
+    const name = elemProps['data-id'] || '';
+
+    useMountLayout(() => {
+      if (localRef.current) {
+        const styles = getComputedStyle(localRef.current);
+        model.events.addItemWidth({
+          id: name,
+          width:
+            localRef.current.offsetWidth +
+            parseFloat(styles.marginLeft) +
+            parseFloat(styles.marginRight),
+        });
+      }
+
+      return () => {
+        model.events.removeItemWidth({id: name});
+      };
+    });
+
+    const hidden = model.state.hiddenIds.includes(name);
+
+    return {
+      ref: elementRef,
+      'aria-hidden': hidden || undefined,
+      style: hidden ? hiddenStyles : {},
+    };
+  }
+);

package/collection/lib/useOverflowListMeasure.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import {createElemPropsHook, useForkRef, useResizeObserver} from '@workday/canvas-kit-react/common';
+
+import {useOverflowListModel} from './useOverflowListModel';
+
+export const useOverflowListMeasure = createElemPropsHook(useOverflowListModel)(
+  (model, ref?: React.Ref<HTMLElement>) => {
+    const localRef = React.useRef(null);
+    const {ref: resizeRef} = useResizeObserver({
+      ref: localRef,
+      onResize: model.events.setContainerWidth,
+    });
+    const elementRef = useForkRef(ref, resizeRef);
+
+    return {
+      ref: elementRef,
+    };
+  }
+);

package/collection/lib/useOverflowListModel.tsx

@@ -0,0 +1,170 @@
+import React from 'react';
+
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {useSelectionListModel} from './useSelectionListModel';
+
+export function getHiddenIds(
+  containerWidth: number,
+  overflowTargetWidth: number,
+  itemWidthCache: Record<string, number>,
+  selectedIds: string[] | 'all'
+): string[] {
+  /** Allows us to prioritize showing the selected item */
+  let selectedKey: undefined | string;
+  /** Tally of combined item widths. We'll add items that fit until the container is full */
+  let itemWidth = 0;
+  /** Tally ids that won't fit inside the container. These will be used by components to hide
+   * elements that won't fit in the container */
+  const hiddenIds: string[] = [];
+
+  if (selectedIds !== 'all' && selectedIds.length) {
+    selectedKey = selectedIds[0];
+  }
+
+  if (
+    Object.keys(itemWidthCache).reduce((sum, key) => sum + itemWidthCache[key], 0) <= containerWidth
+  ) {
+    // All items fit, return empty array
+    return [];
+  } else if (selectedKey) {
+    if (itemWidthCache[selectedKey] + overflowTargetWidth > containerWidth) {
+      // If the selected item doesn't fit, only show overflow (all items hidden)
+      return Object.keys(itemWidthCache);
+    } else {
+      // at least the selected item and overflow target fit. Update our itemWidth with the sum
+      itemWidth += itemWidthCache[selectedKey] + overflowTargetWidth;
+    }
+  } else {
+    itemWidth += overflowTargetWidth;
+  }
+
+  for (const key in itemWidthCache) {
+    if (key !== selectedKey) {
+      itemWidth += itemWidthCache[key];
+      if (itemWidth > containerWidth) {
+        hiddenIds.push(key);
+      }
+    }
+  }
+
+  return hiddenIds;
+}
+
+export const useOverflowListModel = createModelHook({
+  defaultConfig: {
+    ...useSelectionListModel.defaultConfig,
+    initialHiddenIds: [] as string[],
+    containerWidth: 0,
+    /**
+     * Determines if overflow should actually occur. For example, touch devices are better at
+     * side-scrolling than mouse devices. In these cases, it makes sense to disable overflowing.
+     * @default true
+     */ shouldCalculateOverflow: true,
+  },
+  requiredConfig: useSelectionListModel.requiredConfig,
+  contextOverride: useSelectionListModel.Context,
+})(config => {
+  const shouldCalculateOverflow =
+    config.shouldCalculateOverflow === undefined ? true : config.shouldCalculateOverflow;
+  const [hiddenIds, setHiddenIds] = React.useState(config.initialHiddenIds);
+  const [itemWidthCache, setItemWidthCache] = React.useState<Record<string, number>>({});
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  const containerWidthRef = React.useRef(0);
+  const itemWidthCacheRef = React.useRef(itemWidthCache);
+  const [overflowTargetWidth, setOverflowTargetWidth] = React.useState(0);
+  const overflowTargetWidthRef = React.useRef(0);
+
+  const internalHiddenIds = shouldCalculateOverflow ? hiddenIds : [];
+
+  // Cursors skip over disabled ids, but know nothing of hidden ids. We'll go ahead and disable
+  // hidden ids as well
+  const nonInteractiveIds = (config.nonInteractiveIds || []).concat(internalHiddenIds);
+
+  const model = useSelectionListModel({
+    ...config,
+    nonInteractiveIds,
+  });
+
+  const state = {
+    ...model.state,
+    hiddenIds: internalHiddenIds,
+    itemWidthCache,
+    containerWidth,
+    overflowTargetWidth,
+  };
+
+  const events = {
+    ...model.events,
+    select(data: Parameters<typeof model.events.select>[0]) {
+      const {selectedIds} = model.selection.select(data.id, state);
+      const ids = getHiddenIds(
+        containerWidthRef.current,
+        overflowTargetWidthRef.current,
+        itemWidthCacheRef.current,
+        selectedIds
+      );
+      model.events.select(data);
+
+      setHiddenIds(ids);
+    },
+    setContainerWidth(data: {width?: number}) {
+      containerWidthRef.current = data.width || 0;
+      setContainerWidth(data.width || 0);
+
+      const ids = getHiddenIds(
+        containerWidthRef.current,
+        overflowTargetWidthRef.current,
+        itemWidthCacheRef.current,
+        state.selectedIds
+      );
+
+      setHiddenIds(ids);
+    },
+    setOverflowTargetWidth(data: {width: number}) {
+      overflowTargetWidthRef.current = data.width;
+      setOverflowTargetWidth(data.width);
+    },
+    addItemWidth(data: {id: string; width: number}) {
+      itemWidthCacheRef.current = {
+        ...itemWidthCacheRef.current,
+        [data.id]: data.width,
+      };
+
+      setItemWidthCache(itemWidthCacheRef.current);
+
+      const ids = getHiddenIds(
+        containerWidthRef.current,
+        overflowTargetWidthRef.current,
+        itemWidthCacheRef.current,
+        state.selectedIds
+      );
+
+      setHiddenIds(ids);
+    },
+    removeItemWidth(data: {id: string}) {
+      const newCache = {...itemWidthCacheRef.current};
+      delete newCache[data.id];
+      itemWidthCacheRef.current = newCache;
+      setItemWidthCache(itemWidthCacheRef.current);
+
+      const ids = getHiddenIds(
+        containerWidthRef.current,
+        overflowTargetWidthRef.current,
+        itemWidthCacheRef.current,
+        state.selectedIds !== 'all'
+          ? state.selectedIds.filter(sId => data.id !== sId)
+          : state.selectedIds
+      );
+
+      setHiddenIds(ids);
+    },
+    addHiddenKey(data: {id: string}) {
+      setHiddenIds(ids => ids.concat(data.id));
+    },
+    removeHiddenKey(data: {id: string}) {
+      setHiddenIds(ids => ids.filter(key => key !== data.id));
+    },
+  };
+
+  return {...model, state, events};
+});

package/collection/lib/useOverflowListTarget.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import {createElemPropsHook, useMountLayout, useLocalRef} from '@workday/canvas-kit-react/common';
+
+import {useOverflowListModel} from './useOverflowListModel';
+
+// use a hidden style instead of `hidden` attribute for measurement purposes. `hidden` elements have no dimensions
+const hiddenStyle = {
+  position: 'absolute',
+  left: -99999,
+};
+
+export const useOverflowListTarget = createElemPropsHook(useOverflowListModel)(
+  (model, ref?: React.Ref<HTMLButtonElement>) => {
+    const {elementRef, localRef} = useLocalRef(ref);
+    // track first render to force correct size calculations
+    const firstRender = React.useRef(true);
+
+    useMountLayout(() => {
+      firstRender.current = false;
+      if (localRef.current) {
+        const styles = getComputedStyle(localRef.current);
+
+        model.events.setOverflowTargetWidth({
+          width:
+            localRef.current.offsetWidth +
+            parseFloat(styles.marginLeft) +
+            parseFloat(styles.marginRight),
+        });
+      }
+    });
+
+    const isHidden = !model.state.hiddenIds.length;
+
+    return {
+      ref: elementRef,
+      'aria-hidden': isHidden,
+      tabIndex: isHidden ? -1 : 0,
+      style: isHidden ? hiddenStyle : {},
+    };
+  }
+);

package/collection/lib/useSelectionListModel.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import {createModelHook} from '@workday/canvas-kit-react/common';
+
+import {useCursorListModel} from './useCursorListModel';
+
+export type SelectedIds = 'all' | string[];
+
+export type Selection = {
+  selectedIds: SelectedIds;
+  unselectedIds: string[];
+};
+
+/**
+ * A SelectionManager is used
+ */
+export interface SelectionManager {
+  select(id: string, prevState: Selection): Selection;
+}
+
+export const isSelected = (id: string, {selectedIds, unselectedIds}: Selection) => {
+  if (selectedIds === 'all') {
+    return !unselectedIds.includes(id);
+  }
+  return selectedIds.includes(id);
+};
+
+export const singleSelectionManager: SelectionManager = {
+  select(id: string) {
+    return {selectedIds: [id], unselectedIds: []};
+  },
+};
+
+export const multiSelectionManager: SelectionManager = {
+  select(id: string, {selectedIds, unselectedIds}) {
+    if (selectedIds === 'all') {
+      // If we have all selected, start adding/removing from `unselectedIds`
+      const existingKey = unselectedIds.includes(id);
+      return {
+        selectedIds: 'all',
+        unselectedIds: existingKey
+          ? unselectedIds.filter(key => key !== id)
+          : unselectedIds.concat(id),
+      };
+    } else {
+      const existingKey = selectedIds.includes(id);
+      return {
+        selectedIds: existingKey ? selectedIds.filter(key => key !== id) : selectedIds.concat(id),
+        unselectedIds: [],
+      };
+    }
+  },
+};
+
+export const useSelectionListModel = createModelHook({
+  defaultConfig: {
+    ...useCursorListModel.defaultConfig,
+    initialSelectedIds: [] as SelectedIds,
+    initialUnselectedIds: [] as string[],
+    selection: singleSelectionManager,
+  },
+  requiredConfig: useCursorListModel.requiredConfig,
+})(config => {
+  const cursor = useCursorListModel(config);
+  const [selectedIds, setSelectedIds] = React.useState(config.initialSelectedIds);
+  const [unselectedIds, setUnselectedIds] = React.useState(config.initialUnselectedIds);
+
+  const selection = config.selection;
+
+  const state = {...cursor.state, selectedIds, unselectedIds};
+
+  const events = {
+    ...cursor.events,
+    /** Select a specific item by its identifier. */
+    select(data: {id: string}) {
+      const {selectedIds, unselectedIds} = selection.select(data.id, state);
+      setSelectedIds(selectedIds);
+      setUnselectedIds(unselectedIds);
+    },
+    /**
+     * Select all items. This will set `selectedIds` to `'all'` and remove all `unselectedIds`.
+     * This is especially useful for virtual lists where not all items are loaded in memory.
+     */
+    selectAll() {
+      setSelectedIds('all');
+    },
+    /**
+     * Unselect all items.
+     */
+    unselectAll() {
+      setSelectedIds([]);
+    },
+  };
+
+  return {...cursor, state, events, selection};
+});

package/collection/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/commonjs/collection",
+  "module": "../dist/es6/collection",
+  "sideEffects": false
+}

package/common/lib/CanvasProvider.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {ThemeProvider} from 'emotion-theming';
+import {Theme, ThemeProvider} from '@emotion/react';
 import {InputProvider} from './InputProvider';
 import {defaultCanvasTheme, PartialEmotionCanvasTheme} from './theming';
 
@@ -18,8 +18,9 @@ export class CanvasProvider extends React.Component<
 
   render() {
     const {children, theme, ...elemProps} = this.props;
+
     return (
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={theme as Theme}>
         <InputProvider />
         <div
           dir={(theme.canvas && theme.canvas.direction) || defaultCanvasTheme.direction}

package/common/lib/genericStyles.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 
 /**
  * Our schema for generic styles for a whole component.

package/common/lib/styles/errorRing.ts

@@ -1,6 +1,6 @@
 import {EmotionCanvasTheme} from '../theming/index';
 import {ErrorType} from '../types';
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 import {colors, inputColors} from '@workday/canvas-kit-react/tokens';
 import chroma from 'chroma-js';