@workday/canvas-kit-react 6.8.9 → 6.9.0-next.2

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,6 @@
+{
+  "main": "../dist/commonjs/collection",
+  "module": "../dist/es6/collection",
+  "sideEffects": false,
+  "types": "../dist/es6/collection"
+}

package/color-picker/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/color-picker",
   "module": "../dist/es6/color-picker",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/color-picker"
 }

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';
 

package/common/lib/styles/focusRing.ts

@@ -1,6 +1,6 @@
-import {keyframes, CSSObject} from '@emotion/core';
+import {keyframes, Theme, CSSObject} from '@emotion/react';
 import canvas from '@workday/canvas-kit-react/tokens';
-import {EmotionCanvasTheme, defaultCanvasTheme} from '../theming/index';
+import {defaultCanvasTheme} from '../theming/index';
 import memoize from 'lodash/memoize';
 
 interface FocusRingOptions {
@@ -87,7 +87,7 @@ export const memoizedFocusRing = memoize(calculateFocusRing, (...args) => JSON.s
  *
  * @returns {CSSObject} the css object for the focus ring style
  */
-export function focusRing(options: FocusRingOptions = {}, theme?: EmotionCanvasTheme): CSSObject {
+export function focusRing(options: FocusRingOptions = {}, theme?: Theme): CSSObject {
   const {
     width = 2,
     separation = 0,

package/common/lib/styles/hideMouseFocus.ts

@@ -1,10 +1,11 @@
-import {CSSObject, Interpolation} from '@emotion/core';
+import {Interpolation} from '@emotion/react';
+import {CSSProperties} from '@workday/canvas-kit-react/tokens';
 
 /**
  * A utility to hide the default canvas style focus ring when using mouse input.
  * Requires wrapping your components in an InputProvider component.
  */
-export const hideMouseFocus: CSSObject = {
+export const hideMouseFocus: CSSProperties = {
   [`[data-whatinput="mouse"] &:focus,
     [data-whatinput="touch"] &:focus,
     [data-whatinput="pointer"] &:focus`]: {
@@ -25,9 +26,9 @@ export const hideMouseFocus: CSSObject = {
    },
  */
 export const mouseFocusBehavior = (
-  selectors: Record<string, Interpolation>
-): Record<string, Interpolation> => {
-  const output: Record<string, Interpolation> = {};
+  selectors: Record<string, Interpolation<any>>
+): Record<string, Interpolation<any>> => {
+  const output: Record<string, Interpolation<any>> = {};
 
   Object.keys(selectors).map((selector, index) => {
     selector.split(',').forEach(selectorPart => {

package/common/lib/theming/styled.ts

@@ -1,4 +1,5 @@
 import {default as emotionStyled, CreateStyled, Interpolation, CSSObject} from '@emotion/styled';
+
 import {useTheme, EmotionCanvasTheme, ContentDirection} from './index';
 import rtlCSSJS from 'rtl-css-js';
 import {convertToStaticStates} from '../utils/StaticStates';
@@ -16,7 +17,6 @@ function styled<Props>(node: any) {
         const direction = props.theme.canvas.direction;
         const maybeFlip = direction === ContentDirection.RTL ? rtlCSSJS : noop;
         const maybeConvert = props.theme._staticStates ? convertToStaticStates : noop;
-
         try {
           if (typeof interpolation === 'function') {
             return maybeFlip(maybeConvert(interpolation(props)) as CSSObject);
@@ -32,4 +32,4 @@ function styled<Props>(node: any) {
   };
 }
 
-export default styled as CreateStyled<EmotionCanvasTheme>;
+export default styled as CreateStyled;

package/common/lib/theming/types.ts

@@ -3,6 +3,7 @@ import {CanvasBreakpoints, BreakpointFnParam} from './breakpoints';
 /**
  * A single palette within a Canvas theme
  */
+
 export type CanvasThemePalette = {
   lightest: string;
   light: string;
@@ -27,6 +28,7 @@ export enum ContentDirection {
 /**
  * The format of a Canvas theme for components that support it.
  */
+
 export interface CanvasTheme {
   palette: {
     common: CanvasThemeCommonPalette;
@@ -253,4 +255,9 @@ type RecursivePartial<T> = {
 export type PartialCanvasTheme = RecursivePartial<CanvasTheme>;
 export type PartialCanvasThemePalette = RecursivePartial<CanvasThemePalette>;
 export type PartialEmotionCanvasTheme = {canvas?: PartialCanvasTheme};
+declare module '@emotion/react' {
+  export interface Theme {
+    canvas: CanvasTheme;
+  }
+}
 export type EmotionCanvasTheme = {canvas: CanvasTheme};

package/common/lib/theming/useIsRTL.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {ThemeContext} from '@emotion/core';
+import {ThemeContext} from '@emotion/react';
 import {EmotionCanvasTheme, ContentDirection, PartialEmotionCanvasTheme} from './types';
 
 function useDefaultTheme<T, C>(theme: T | undefined, config: C, fn: (config: C) => T) {

package/common/lib/theming/useTheme.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import get from 'lodash/get';
-import {ThemeContext} from '@emotion/core';
+import {useTheme as useEmotionTheme} from '@emotion/react';
 import {
   defaultCanvasTheme,
   createCanvasTheme,
@@ -38,7 +37,7 @@ export function useTheme(theme?: PartialEmotionCanvasTheme): EmotionCanvasTheme
 
   try {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const contextTheme = React.useContext(ThemeContext) as EmotionCanvasTheme;
+    const contextTheme = useEmotionTheme() as EmotionCanvasTheme;
     if (contextTheme && contextTheme.canvas) {
       return getFilledTheme(contextTheme);
     }

package/common/lib/utils/StaticStates.tsx

@@ -16,11 +16,12 @@ export const convertToStaticStates = (obj?: CSSProperties): CSSProperties | unde
     const newKey = key
       .replace(/^:/, '&:') // handle shorthand like ":focus"
       .replace(/,(\s+):/g, ',$1&:') // handle selectors like ":focus, :hover"
-      .replace(/:(focus|hover|active)/g, '.$1')
-      .replace(
-        /\[data\-whatinput=("|')?(mouse|touch|keyboard|pointer)("|')?]/g,
-        '[data-whatinput="noop"]'
-      );
+      .replace(/:(focus|hover|active)/g, '.$1');
+
+    // Remove any selectors that use data-whatinput. Leaving them in would cause focus rings to disappear when the user clicks with a mouse.
+    if (/data-whatinput/.test(key)) {
+      return result;
+    }
     const value =
       typeof obj[key] === 'object' ? convertToStaticStates(obj[key] as CSSProperties) : obj[key];
     const newObj = {...result, [newKey]: value};