@workday/canvas-kit-react 8.0.0 → 8.0.1

package/collection/lib/useCursorListModel.tsx

@@ -6,17 +6,40 @@ import {useBaseListModel, Item, defaultGetId as getId} from './useBaseListModel'
 type NavigationInput = Pick<ReturnType<typeof useCursorListModel>, 'state'>;
 
 export interface NavigationManager {
+  /** Get the first item in a collection. This will be called when the `Home` key is pressed for
+   * Lists and `Ctrl+Home` for Grids. */
   getFirst: NavigationRequestor;
+  /** Get the last item in a collection. This will be called when the `End` key is pressed for Lists
+   * and `Ctrl+End` for Grids. */
   getLast: NavigationRequestor;
+  /** Get an item with the provided `id`. */
   getItem: NavigationRequestor;
+  /** Get the next item after the provided `id`. This will be called when the `Right` arrow key is
+   * pressed for RTL languages and when the `Left` arrow is pressed for LTR languages. */
   getNext: NavigationRequestor;
+  /** **For Grids:** Get the cell in the next row from the provided `id`. This will be called when
+   * the `Down` arrow is pressed.  */
   getNextRow: NavigationRequestor;
+  /** Get the previous item before the provided `id`. This will be called when the `Left` arrow key
+   * is pressed for RTL languages and when the `Right` arrow is pressed for LTR languages. */
   getPrevious: NavigationRequestor;
+  /** **For Grids:** Get the cell in the previous row from the provided `id`. This will be called
+   * when the `Up` arrow is pressed.  */
   getPreviousRow: NavigationRequestor;
+  /** **For Grids:** Get the first item in a row. This will be called when the `Home` key is
+   * pressed. */
   getFirstOfRow: NavigationRequestor;
+  /** **For Grids:** Get the last item in a row. This will be called when the `End` key is
+   * pressed. */
   getLastOfRow: NavigationRequestor;
-  getPreviousPage: NavigationRequestor;
+  /** Get the next "page". A "page" is application specific and usually means next visible screen.
+   * If the viewport is scrollable, it would scroll so that the last item visible is now the first
+   * item visible. This is called when the `PageDown` key is pressed */
   getNextPage: NavigationRequestor;
+  /** Get the next "page". A "page" is application specific and usually means previous visible
+   * screen. If the viewport is scrollable, it would scroll so that the first item visible is now
+   * the last item visible. This is called when the `PageUp` key is pressed */
+  getPreviousPage: NavigationRequestor;
 }
 
 /**
@@ -56,7 +79,7 @@ export const getLast: NavigationRequestor = (_, {state}) => state.items[state.it
 export const getFirstOfRow: NavigationRequestor = (id, {state}) => {
   if (state.columnCount) {
     const item = getItem(id, {state});
-    const currentIndex = state.items.findIndex(i => getId(item) === getId(i));
+    const currentIndex = item.index;
     const offset = currentIndex % state.columnCount;
     return state.items[currentIndex - offset];
   }
@@ -69,9 +92,13 @@ export const getFirstOfRow: NavigationRequestor = (id, {state}) => {
 export const getLastOfRow: NavigationRequestor = (id, {state}) => {
   if (state.columnCount) {
     const item = getItem(id, {state});
-    const currentIndex = state.items.findIndex(i => getId(item) === getId(i));
+    const currentIndex = item.index;
     const offset = (currentIndex % state.columnCount) - state.columnCount + 1;
-    return state.items[currentIndex - offset];
+    let nextIndex = currentIndex - offset;
+    if (nextIndex >= state.items.length) {
+      nextIndex = state.items.length - 1;
+    }
+    return state.items[nextIndex];
   }
   return getLast(id, {state});
 };
@@ -83,7 +110,7 @@ export const getLastOfRow: NavigationRequestor = (id, {state}) => {
 export const getPreviousPage: NavigationRequestor = (id, {state}) => {
   if (state.columnCount) {
     const item = getItem(id, {state});
-    const currentIndex = state.items.findIndex(i => getId(item) === getId(i));
+    const currentIndex = item.index;
     return state.items[currentIndex % state.columnCount];
   }
   return getFirst(id, {state});
@@ -96,7 +123,7 @@ export const getPreviousPage: NavigationRequestor = (id, {state}) => {
 export const getNextPage: NavigationRequestor = (id, {state}) => {
   if (state.columnCount) {
     const item = getItem(id, {state});
-    const currentIndex = state.items.findIndex(i => getId(item) === getId(i));
+    const currentIndex = item.index;
     const lastRowIndex = state.items.length - state.columnCount;
     return state.items[lastRowIndex + (currentIndex % state.columnCount)];
   }
@@ -117,12 +144,38 @@ export const getWrappingOffsetItem = (offset: number) => (
   const items = state.items;
   const item = getItem(id, {state});
 
-  const currentIndex = items.findIndex(i => getId(item) === getId(i));
+  const currentIndex = item.index;
   let nextIndex = currentIndex + 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) {
-    nextIndex = items.length + nextIndex;
+    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) {
-    nextIndex = 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 (state.nonInteractiveIds.includes(getId(items[nextIndex])) && tries > 0) {
@@ -142,8 +195,9 @@ export const getOffsetItem = (offset: number) => (
   const {items, columnCount} = state;
   const item = getItem(id, {state});
 
-  const currentIndex = items.findIndex(i => getId(item) === getId(i));
+  const currentIndex = item.index;
   let nextIndex = currentIndex + 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
@@ -157,10 +211,19 @@ export const getOffsetItem = (offset: number) => (
     // 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 = currentIndex;
     }
-  } else if (nextIndex < 0) {
+
+    // make sure we don't go out of bounds if the grid isn't a perfect rectangle
+    if (nextIndex > items.length - 1) {
+      nextIndex = currentIndex;
+    }
+  }
+
+  // make sure we're always in bounds
+  if (nextIndex < 0) {
     nextIndex = 0;
   } else if (nextIndex >= items.length) {
     nextIndex = items.length - 1;
@@ -176,30 +239,36 @@ export const getOffsetItem = (offset: number) => (
 };
 
 /**
- * The default navigation manager of lists
+ * 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: (id, {state}) => getWrappingOffsetItem(-state.columnCount)(id, {state}),
+  getNextRow: (id, {state}) => getWrappingOffsetItem(state.columnCount)(id, {state}),
   getPrevious: getWrappingOffsetItem(-1),
-  getPreviousRow: (id, {state}) => getWrappingOffsetItem(state.columnCount)(id, {state}),
+  getPreviousRow: (id, {state}) => getWrappingOffsetItem(-state.columnCount)(id, {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: (id, {state}) => getOffsetItem(-state.columnCount)(id, {state}),
+  getNextRow: (id, {state}) => getOffsetItem(state.columnCount)(id, {state}),
   getPrevious: getOffsetItem(-1),
-  getPreviousRow: (id, {state}) => getOffsetItem(state.columnCount)(id, {state}),
+  getPreviousRow: (id, {state}) => getOffsetItem(-state.columnCount)(id, {state}),
   getPreviousPage,
   getNextPage,
   getFirstOfRow,
@@ -229,9 +298,7 @@ export const useCursorListModel = createModelHook({
      * (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. If
-     * `columnCount` is non-zero, it will use a grid mode where `orientation` is ignored and only
-     * directionality matters.
+     * 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
@@ -247,6 +314,7 @@ export const useCursorListModel = createModelHook({
   const initialCurrentRef = React.useRef(
     config.initialCursorId || (config.items?.length ? getId(config.items![0]) : '')
   );
+  const navigation = config.navigation;
 
   const state = {
     ...list.state,
@@ -255,10 +323,10 @@ export const useCursorListModel = createModelHook({
     /**
      * 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,
   };
-  const navigation = config.navigation || wrappingNavigationManager;
 
   const events = {
     ...list.events,

package/collection/lib/useGridModel.ts

@@ -0,0 +1,34 @@
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {navigationManager} from './useCursorListModel';
+import {useListModel} from './useListModel';
+
+const {columnCount, orientation, ...defaultConfig} = useListModel.defaultConfig;
+
+export const useGridModel = createModelHook({
+  defaultConfig: {
+    ...defaultConfig,
+    /**
+     * 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 stop when the end of a row/column is detected. For example,
+     * `getNext` will return the same item the cursor was previously on if the cursor is on the last
+     * item of a row.
+     */
+    navigation: navigationManager,
+  },
+  requiredConfig: {
+    /**
+     * The number of columns represented in a grid
+     */
+    columnCount: 1,
+    ...useListModel.requiredConfig,
+  },
+  contextOverride: useListModel.Context,
+})(config => {
+  const list = useListModel(config);
+
+  return list;
+});

package/collection/lib/useListItemRovingFocus.tsx

@@ -103,10 +103,12 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
         if (event.ctrlKey) {
           for (const key in ctrlKeyMap) {
             if (hasOwnKey(ctrlKeyMap, key)) {
-              keyDownRef.current = true;
-              events[ctrlKeyMap[key]]?.();
-              event.preventDefault();
-              return;
+              if (event.key === key) {
+                keyDownRef.current = true;
+                events[ctrlKeyMap[key]]?.();
+                event.preventDefault();
+                return;
+              }
             }
           }
         }

package/collection/lib/useListRenderItem.tsx

@@ -7,26 +7,36 @@ import {useBaseListModel} from './useBaseListModel';
 export function useListRenderItems<T>(
   model: ReturnType<typeof useBaseListModel>,
   children: ((item: Generic, index: number) => React.ReactNode) | 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,
-            });
+            if (React.isValidElement(child)) {
+              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,
+              });
+            }
+            return child;
           })
-        : model.state.items.map(item =>
-            React.cloneElement(children(item.value, item.index), {key: item.id, item: item.value})
-          )
-      : null;
+        : model.state.items.map(item => {
+            const child = children(item.value, item.index);
+            if (React.isValidElement(child)) {
+              return React.cloneElement(child, {
+                key: item.id,
+                item: item.value,
+              });
+            }
+            return child;
+          })
+      : children;
 
-  return items || children;
+  return items;
 }

package/color-picker/index.ts

@@ -1,7 +1,3 @@
-import ColorInput from './lib/ColorInput';
-import ColorPreview from './lib/ColorPreview';
-
-export {ColorInput, ColorPreview};
 export * from './lib/ColorInput';
 export * from './lib/ColorPreview';
 export * from './lib/parts/ColorSwatch';

package/color-picker/lib/ColorInput.tsx

@@ -110,9 +110,8 @@ const PoundSignPrefix = styled('span')<Pick<ColorInputProps, 'disabled'>>(
 
 const SwatchTile = styled(ColorSwatch)({
   position: 'absolute',
-  top: 0,
+  top: '10px', // input is 40px high, and the tile is 20 x 20px, this centers the tile
   left: space.xxs,
-  marginTop: '10px', // Fix vertical alignment on IE11
   boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.25)',
   pointerEvents: 'none',
 });
@@ -184,5 +183,3 @@ export const ColorInput = createComponent('input')({
     );
   },
 });
-
-export default ColorInput;

package/color-picker/lib/ColorPreview.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ColorInput from './ColorInput';
+import {ColorInput} from './ColorInput';
 import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
 import {TextInputProps} from '@workday/canvas-kit-react/text-input';
 import styled from '@emotion/styled';
@@ -36,5 +36,3 @@ export const ColorPreview = createComponent('input')({
     />
   ),
 });
-
-export default ColorPreview;

package/common/index.ts

@@ -7,3 +7,4 @@ export * from './lib/utils';
 export * from './lib/CanvasProvider';
 export * from './lib/InputProvider';
 export * from './lib/EllipsisText';
+export * from './lib/responsive/useResponsiveContainerStyles';

package/common/lib/InputProvider.tsx

@@ -1,6 +1,4 @@
 import * as React from 'react';
-// @ts-ignore
-import elementClosestPolyfill from 'element-closest';
 
 export interface InputProviderProps {
   provideIntent?: boolean;
@@ -117,7 +115,7 @@ const supportsPassive = () => {
 /**
  * This component takes heavy inspiration from what-input (https://github.com/ten1seven/what-input)
  */
-export class InputProvider extends React.Component<InputProviderProps> {
+export class InputProvider extends React.Component<React.PropsWithChildren<InputProviderProps>> {
   private eventTimer: number | undefined;
 
   private currentInput: InputType;
@@ -171,9 +169,6 @@ export class InputProvider extends React.Component<InputProviderProps> {
   }
 
   componentDidMount() {
-    // For IE11 and under, we'll need to polyfill element.closest
-    elementClosestPolyfill(window);
-
     // Check for passive event listener support
     this.supportsPassive = supportsPassive();
 

package/common/lib/responsive/useResponsiveContainerStyles.ts

@@ -0,0 +1,128 @@
+import { useTheme, breakpointKeys, CanvasBreakpoints } from "@workday/canvas-kit-react/common";
+import type {AllStyleProps} from "@workday/canvas-kit-react/layout";
+import {isWithinBreakpoint} from '../utils/isWithinBreakpoint'
+
+export type BreakpointKeys = typeof breakpointKeys[number];
+
+type ResponsiveCSSObject<T> = {
+  [P in keyof T]: Partial<Record<BreakpointKeys, AllStyleProps>> &
+    AllStyleProps;
+};
+type CSSObject<T> = {
+  [P in keyof T]: AllStyleProps;
+};
+
+// Takes in CanvasBreakpoint keys and returns current breakpoint key. Current breakpoint key is determined by the `width` of the container
+
+const getSize = (width: number, breakpoints: CanvasBreakpoints) => {
+  const ranges: {[key: string ]: [number, number?]} = {
+    'zero': [0, breakpoints.s],
+    's': [breakpoints.s, breakpoints.m],
+    'm': [breakpoints.m, breakpoints.l],
+    'l': [breakpoints.l, breakpoints.xl],
+    'xl': [breakpoints.xl]
+  };
+  return breakpointKeys.find((size: BreakpointKeys) => isWithinBreakpoint(width, ...ranges[size])) || 'zero';
+}
+
+// Returns responsive style objects that are within the current CanvasBreakpoint size
+
+function getStyles<T>(key: BreakpointKeys, styles: ResponsiveCSSObject<T>) {
+  const responsiveStyles = {} as CSSObject<T>;
+  const breakpointSize = breakpointKeys.indexOf(key);
+  for (let i = 0; i <= breakpointSize; i++) {
+    const breakpointName = breakpointKeys[i];
+    // property is key of the style object
+    Object.keys(styles).forEach((property) => {
+      const { zero, s, m, l, xl, ...base } = styles[property as keyof T];
+      const currentBreakpointStyles =
+        styles[property as keyof T][breakpointName] ?? {};
+      const previousBreakpointStyles = responsiveStyles[property as keyof T] ?? {};
+      responsiveStyles[property as keyof T] = {
+        ...base,
+        ...previousBreakpointStyles,
+        ...currentBreakpointStyles
+      };
+    });
+  }
+  return responsiveStyles;
+}
+
+/**
+ * useResponsiveContainerStyles
+ *
+ * ---
+ *
+ * This hook allows you to create container-based responsive styles with objects.
+ * It accepts two or three arguments: the responsive style object, the container width, and (optionally) the theme object.
+ * Each style object accepts five breakpoint keys: "zero", "s", "m", "l", and "xl".
+ * The sizes will act like `min-width`. For example, if you want to apply styles from `medium` and up, then you would write those styles under `m`.
+ *
+ * @example
+ * ```tsx
+import {Flex, Box} from '@workday/canvas-kit-react/layout';
+import {
+  useResponsiveStyles,
+} from '@workday/canvas-kit-react/common';
+
+const ref = React.useRef(null);
+const [containerWidth, setContainerWidth] = React.useState(0);
+
+useResizeObserver({
+  ref: ref,
+  onResize: data => {
+    setWidth(data.width || 0);
+  },
+});
+
+const containerResponsiveStyles = useResponsiveStyles(
+  {
+    flex: {
+      flexDirection: 'column',
+      padding: 'm',
+      depth: 1,
+      borderRadius: 'l',
+      zero: {
+        backgroundColor: 'Red',
+      },
+      s: {
+        backgroundColor: 'Orange',
+      },
+      m: {
+        backgroundColor: 'Yellow',
+      },
+      l: {
+        backgroundColor: 'Green',
+      },
+      xl: {
+        backgroundColor: 'Blue',
+      },
+    },
+    box: {
+      padding: 's',
+    },
+  },
+  containerWidth
+);
+
+return (
+    <Box ref={ref}>
+      <Flex {...containerResponsiveStyles.flex}>
+        <Box {...containerResponsiveStyles.box}>Hello World</Box>
+      </Flex>
+    </Box>
+);
+```
+ */
+
+export function useResponsiveContainerStyles<T extends ResponsiveCSSObject<T>>(
+  styles: ResponsiveCSSObject<T>,
+  width: number,
+  theme = {}
+) {
+  const canvasTheme = useTheme(theme);
+  const breakpoints = canvasTheme.canvas.breakpoints.values;
+
+  const size = getSize(width, breakpoints);
+  return getStyles(size, styles);
+}

package/common/lib/styles/focusRing.ts

@@ -1,5 +1,5 @@
 import {keyframes, Theme, CSSObject} from '@emotion/react';
-import canvas from '@workday/canvas-kit-react/tokens';
+import {canvas} from '@workday/canvas-kit-react/tokens';
 import {defaultCanvasTheme} from '../theming/index';
 import memoize from 'lodash/memoize';
 

package/common/lib/theming/index.ts

@@ -1,7 +1,7 @@
 export * from './breakpoints';
 export {createCanvasTheme} from './createCanvasTheme';
 export * from './types';
-export {default as styled} from './styled';
+export {default as styled, StyleRewriteFn} from './styled';
 export * from './theme';
 export * from './useTheme';
 export * from './useIsRTL';

package/common/lib/theming/styled.ts

@@ -1,22 +1,25 @@
 import {default as emotionStyled, CreateStyled, Interpolation, CSSObject} from '@emotion/styled';
+import {CSSProperties} from '@workday/canvas-kit-react/tokens';
 
 import {useTheme, EmotionCanvasTheme, ContentDirection} from './index';
 import rtlCSSJS from 'rtl-css-js';
-import {convertToStaticStates} from '../utils/StaticStates';
 
 const noop = (styles: any) => styles;
 
 // Pulled from https://github.com/emotion-js/emotion/blob/master/packages/styled-base/src/utils.js#L6 (not exported)
 type Interpolations = Array<any>;
+export type StyleRewriteFn = (obj?: CSSProperties) => CSSProperties | undefined;
 
 function styled<Props>(node: any) {
   return (...args: Interpolation<Props>[]) => {
     const newArgs: Interpolations = args.map(
-      interpolation => (props: Props & {theme: EmotionCanvasTheme & {_staticStates?: boolean}}) => {
+      interpolation => (
+        props: Props & {theme: EmotionCanvasTheme & {_styleRewriteFn?: StyleRewriteFn}}
+      ) => {
         props.theme = useTheme(props.theme);
         const direction = props.theme.canvas.direction;
         const maybeFlip = direction === ContentDirection.RTL ? rtlCSSJS : noop;
-        const maybeConvert = props.theme._staticStates ? convertToStaticStates : noop;
+        const maybeConvert = props.theme._styleRewriteFn || noop;
         try {
           if (typeof interpolation === 'function') {
             return maybeFlip(maybeConvert(interpolation(props)) as CSSObject);