@workday/canvas-kit-react 7.0.0-alpha.106-next.2 → 7.0.0-alpha.129-next.3

package/action-bar/lib/ActionBarItem.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import {composeHooks, EllipsisText, createSubcomponent} from '@workday/canvas-kit-react/common';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
   useListItemRegister,
@@ -37,10 +36,6 @@ export const ActionBarItem = createSubcomponent(SecondaryButton)({
   displayName: 'ActionBar.Item',
   modelHook: useActionBarModel,
   elemPropsHook: useActionBarItem,
-  subComponents: {
-    Icon: SystemIcon,
-    Text: EllipsisText,
-  },
 })<ActionBarItemProps>((elemProps, Element) => {
   return <Element {...elemProps} />;
 });

package/action-bar/lib/ActionBarList.tsx

@@ -2,25 +2,20 @@ import * as React from 'react';
 
 import {commonColors, colors, space} from '@workday/canvas-kit-react/tokens';
 import {
-  composeHooks,
   createSubcomponent,
   ExtractProps,
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
 import {HStack} from '@workday/canvas-kit-react/layout';
-import {
-  useOverflowListMeasure,
-  useListRenderItems,
-  useListResetCursorOnBlur,
-} from '@workday/canvas-kit-react/collection';
+import {useOverflowListMeasure, useListRenderItems} from '@workday/canvas-kit-react/collection';
 
 import {useActionBarModel} from './useActionBarModel';
 import {ActionBar} from './ActionBar';
 
 // Use `Partial` here to make `spacing` optional
-export interface ActionBarListProps<T = unknown>
-  extends Partial<ExtractProps<typeof HStack, never>> {
+export interface ActionBarListProps<T = any>
+  extends Omit<Partial<ExtractProps<typeof HStack, never>>, 'children'> {
   /**
    * If items are passed to a `ActionBarModel`, the child of `ActionBar.List` should be a render prop. The
    * List will determine how and when the item will be rendered.
@@ -30,7 +25,7 @@ export interface ActionBarListProps<T = unknown>
    *   {(item) => <ActionBar.Item key={item.id} name={item.name}>{item.text}</ActionBar.Item>}
    * </ActionBar.List>
    */
-  children: ((item: T) => React.ReactNode) | React.ReactNode;
+  children: ((item: T, index: number) => React.ReactNode) | React.ReactNode;
 }
 
 const ResponsiveHStack = styled(HStack)<ActionBarListProps & StyledType>(({theme}) => ({
@@ -42,12 +37,10 @@ const ResponsiveHStack = styled(HStack)<ActionBarListProps & StyledType>(({theme
   },
 }));
 
-export const useActionBarList = composeHooks(useOverflowListMeasure, useListResetCursorOnBlur);
-
 export const ActionBarList = createSubcomponent('div')({
   displayName: 'ActionBar.List',
   modelHook: useActionBarModel,
-  elemPropsHook: useActionBarList,
+  elemPropsHook: useOverflowListMeasure,
 })<ActionBarListProps>(({children, ...elemProps}, Element, model) => {
   return (
     <ResponsiveHStack

package/action-bar/package.json

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

package/avatar/index.ts

@@ -1,5 +1 @@
-import Avatar from './lib/Avatar';
-
-export default Avatar;
-export {Avatar};
 export * from './lib/Avatar';

package/avatar/lib/Avatar.tsx

@@ -119,7 +119,7 @@ const StyledImage = styled('img')<{isLoaded: boolean}>(
   })
 );
 
-const Avatar: AvatarOverload = React.forwardRef(
+export const Avatar: AvatarOverload = React.forwardRef(
   (
     {
       variant = AvatarVariant.Light,
@@ -174,5 +174,3 @@ const Avatar: AvatarOverload = React.forwardRef(
 
 Avatar.Variant = AvatarVariant;
 Avatar.Size = SystemIconCircleSize;
-
-export default Avatar;

package/avatar/package.json

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

package/badge/index.ts

@@ -1 +1 @@
-export {default as CountBadge, CountBadgeProps} from './lib/CountBadge';
+export {CountBadge, CountBadgeProps} from './lib/CountBadge';

package/badge/lib/CountBadge.tsx

@@ -53,7 +53,7 @@ const Container = styled('span')<CountBadgeProps>(
   })
 );
 
-const CountBadge = (props: CountBadgeProps) => {
+export const CountBadge = (props: CountBadgeProps) => {
   const {variant = 'default', count = 0, limit = 1000, ...elemProps} = props;
 
   const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
@@ -64,5 +64,3 @@ const CountBadge = (props: CountBadgeProps) => {
     </Container>
   );
 };
-
-export default CountBadge;

package/badge/package.json

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

package/banner/package.json

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

package/button/lib/deprecated_Button.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import canvas, {borderRadius, type} from '@workday/canvas-kit-react/tokens';
+import {canvas, borderRadius, type} from '@workday/canvas-kit-react/tokens';
 import {
   focusRing,
   mouseFocusBehavior,

package/button/package.json

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

package/card/package.json

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

package/checkbox/index.ts

@@ -1,5 +1,2 @@
-import Checkbox from './lib/Checkbox';
 
-export default Checkbox;
-export {Checkbox};
 export * from './lib/Checkbox';

package/checkbox/lib/Checkbox.tsx

@@ -11,7 +11,8 @@ import {
   useTheme,
   Themeable,
 } from '@workday/canvas-kit-react/common';
-import canvas, {
+import {
+  canvas,
   borderRadius,
   colors,
   inputColors,
@@ -58,6 +59,10 @@ export interface CheckboxProps extends Themeable {
    * @default false
    */
   indeterminate?: boolean;
+  /**
+   * The variant for the checkbox
+   */
+  variant?: 'inverse' | undefined;
 }
 
 const checkboxHeight = 18;
@@ -87,16 +92,20 @@ const CheckboxInputWrapper = styled('div')<Pick<CheckboxProps, 'disabled'>>({
   alignSelf: 'flex-start',
 });
 
-const CheckboxRipple = styled('span')<Pick<CheckboxProps, 'disabled'>>({
-  borderRadius: borderRadius.circle,
-  boxShadow: `0 0 0 0 ${colors.soap200}`,
-  height: checkboxHeight,
-  transition: 'box-shadow 150ms ease-out',
-  width: checkboxWidth,
-  position: 'absolute',
-  pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
-  zIndex: -1,
-});
+const CheckboxRipple = styled('span')<Pick<CheckboxProps, 'disabled' | 'variant'>>(
+  {
+    borderRadius: borderRadius.circle,
+    boxShadow: `0 0 0 0 ${colors.soap200}`,
+    height: checkboxHeight,
+    transition: 'box-shadow 150ms ease-out',
+    width: checkboxWidth,
+    position: 'absolute',
+    pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
+  },
+  ({variant}) => ({
+    opacity: variant === 'inverse' ? '0.4' : '1',
+  })
+);
 
 /**
  * Note: `~ div:first-of-type` refers to `CheckboxBackground`
@@ -112,6 +121,7 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
         },
       },
     },
+    variant,
   }) => ({
     borderRadius: borderRadius.s,
     width: checkboxTapArea,
@@ -129,20 +139,21 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
     // States
     '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
       '~ div:first-of-type': {
-        borderColor: inputColors.hoverBorder,
+        borderColor: variant === 'inverse' ? colors.soap300 : inputColors.hoverBorder,
       },
     },
     '&:checked ~ div:first-of-type': {
-      borderColor: themePrimary.main,
-      backgroundColor: themePrimary.main,
+      borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
+      backgroundColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
     },
     '&:disabled ~ div:first-of-type': {
       borderColor: inputColors.disabled.border,
-      backgroundColor: inputColors.disabled.background,
+      backgroundColor: variant === 'inverse' ? colors.soap300 : inputColors.disabled.background,
+      opacity: variant === 'inverse' ? '.4' : '1',
     },
     '&:disabled:checked ~ div:first-of-type': {
-      borderColor: themePrimary.light,
-      backgroundColor: themePrimary.light,
+      borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
+      backgroundColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
     },
 
     // Focus
@@ -150,30 +161,48 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
       outline: 'none',
     },
     '&:focus ~ div:first-of-type': {
-      borderColor: themePrimary.main,
+      borderColor: variant === 'inverse' ? colors.blackPepper400 : themePrimary.main,
       borderWidth: '2px',
       boxShadow: 'none',
+      ...focusRing({
+        width: variant === 'inverse' ? 2 : 0,
+        separation: 0,
+        animate: false,
+        innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+        outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
+      }),
     },
     '&:checked:focus ~ div:first-of-type': {
-      ...focusRing({width: 2, separation: 2, animate: false, outerColor: themeFocusOutline}),
+      ...focusRing({
+        width: 2,
+        separation: 2,
+        animate: false,
+        innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+        outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+      }),
+      borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
+      borderWidth: '2px',
       '& span': {
         marginLeft: '-7px',
       },
     },
     ...mouseFocusBehavior({
       '&:focus ~ div:first-of-type': {
-        border: `1px solid ${inputColors.hoverBorder}`,
+        border:
+          variant === 'inverse'
+            ? `1px solid ${colors.soap300}`
+            : `1px solid ${inputColors.hoverBorder}`,
         boxShadow: 'none',
         '& span': {
           marginLeft: '-6px',
         },
       },
       '&:checked ~ div:first-of-type': {
-        borderColor: themePrimary.main,
+        borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
       },
       '&:disabled:checked ~ div:first-of-type': {
         borderColor: themePrimary.light,
-        backgroundColor: themePrimary.light,
+        backgroundColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
       },
     }),
   }),
@@ -182,7 +211,7 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
       boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}px ${colors.soap200}`,
     },
   }),
-  ({theme, error}) => {
+  ({theme, error, variant}) => {
     const errorColors = getErrorColors(error, theme);
 
     if (errorColors.outer === errorColors.inner) {
@@ -191,24 +220,24 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
 
     const errorStyles = {
       '& ~ div:first-of-type': {
-        border: `1px solid ${errorColors.inner}`,
+        border:
+          variant === 'inverse' ? `1px solid ${colors.soap300}` : `1px solid ${errorColors.inner}`,
         boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
       },
       '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
         '~ div:first-of-type': {
-          borderColor: errorColors.inner,
+          borderColor: variant === 'inverse' ? `1px solid ${colors.soap300}` : errorColors.inner,
         },
       },
       '&:checked ~ div:first-of-type': {
-        borderColor: theme.canvas.palette.primary.main,
+        borderColor: variant === 'inverse' ? colors.soap300 : theme.canvas.palette.primary.main,
         boxShadow: `
-            0 0 0 2px ${colors.frenchVanilla100},
-            0 0 0 4px ${errorColors.inner},
-            0 0 0 5px ${errorColors.outer}`,
+              0 0 0 2px ${colors.frenchVanilla100},
+              0 0 0 4px ${errorColors.inner},
+              0 0 0 5px ${errorColors.outer}`,
       },
     };
     return {
-      ...errorStyles,
       // Error rings take precedence over focus
       ...mouseFocusBehavior({
         ...errorStyles,
@@ -217,25 +246,30 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
           boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
         },
       }),
+      ...errorStyles,
     };
   }
 );
 
-const CheckboxBackground = styled('div')<CheckboxProps>({
-  alignItems: 'center',
-  backgroundColor: colors.frenchVanilla100,
-  borderRadius: borderRadius.s,
-  border: '1px solid ' + inputColors.border,
-  boxSizing: 'border-box',
-  display: 'flex',
-  height: checkboxHeight,
-  justifyContent: 'center',
-  padding: '0px 2px',
-  pointerEvents: 'none',
-  position: 'absolute',
-  transition: 'border 200ms ease, background 200ms',
-  width: checkboxWidth,
-});
+const CheckboxBackground = styled('div')<CheckboxProps>(
+  {
+    alignItems: 'center',
+    backgroundColor: colors.frenchVanilla100,
+    borderRadius: borderRadius.s,
+    boxSizing: 'border-box',
+    display: 'flex',
+    height: checkboxHeight,
+    justifyContent: 'center',
+    padding: '0px 2px',
+    pointerEvents: 'none',
+    position: 'absolute',
+    transition: 'border 200ms ease, background 200ms',
+    width: checkboxWidth,
+  },
+  ({variant}) => ({
+    border: `1px solid ${variant === 'inverse' ? colors.soap300 : inputColors.border}`,
+  })
+);
 
 const CheckboxCheck = styled('div')<Pick<CheckboxProps, 'checked'>>(
   {
@@ -261,22 +295,32 @@ const CheckboxCheck = styled('div')<Pick<CheckboxProps, 'checked'>>(
   })
 );
 
-const IndeterminateBox = styled('div')(
+const IndeterminateBox = styled('div')<CheckboxProps>(
   {
     width: '10px',
     height: '2px',
   },
-  ({theme}) => ({
-    backgroundColor: theme.canvas.palette.primary.contrast,
+  ({theme, variant}) => ({
+    backgroundColor:
+      variant === 'inverse'
+        ? theme.canvas.palette.primary.main
+        : theme.canvas.palette.primary.contrast,
   })
 );
 
-const CheckboxLabel = styled('label')<{disabled?: boolean}>(
+const CheckboxLabel = styled('label')<{disabled?: boolean; variant?: string}>(
   {
     ...canvas.type.levels.subtext.large,
     paddingLeft: checkboxLabelDistance,
   },
-  ({disabled}) => (disabled ? {color: inputColors.disabled.text} : {cursor: 'pointer'})
+  ({variant}) => (variant === 'inverse' ? {color: colors.frenchVanilla100} : undefined),
+  ({disabled, variant}) =>
+    disabled
+      ? {
+          color: variant === 'inverse' ? colors.frenchVanilla100 : inputColors.disabled.text,
+          opacity: variant === 'inverse' ? '.4' : '1',
+        }
+      : {cursor: 'pointer'}
 );
 
 export const Checkbox = createComponent('input')({
@@ -294,6 +338,7 @@ export const Checkbox = createComponent('input')({
       value,
       error,
       indeterminate,
+      variant,
       ...elemProps
     }: CheckboxProps,
     ref,
@@ -313,22 +358,30 @@ export const Checkbox = createComponent('input')({
             type="checkbox"
             value={value}
             error={error}
+            variant={variant}
             aria-checked={indeterminate ? 'mixed' : checked}
             {...elemProps}
           />
-          <CheckboxRipple />
-          <CheckboxBackground checked={checked} disabled={disabled}>
+          <CheckboxRipple variant={variant} />
+          <CheckboxBackground variant={variant} checked={checked} disabled={disabled}>
             <CheckboxCheck checked={checked}>
               {indeterminate ? (
-                <IndeterminateBox />
+                <IndeterminateBox variant={variant} />
               ) : (
-                <SystemIcon icon={checkSmallIcon} color={theme.canvas.palette.primary.contrast} />
+                <SystemIcon
+                  icon={checkSmallIcon}
+                  color={
+                    variant === 'inverse'
+                      ? theme.canvas.palette.primary.main
+                      : theme.canvas.palette.primary.contrast
+                  }
+                />
               )}
             </CheckboxCheck>
           </CheckboxBackground>
         </CheckboxInputWrapper>
         {label && (
-          <CheckboxLabel htmlFor={inputId} disabled={disabled}>
+          <CheckboxLabel variant={variant} htmlFor={inputId} disabled={disabled}>
             {label}
           </CheckboxLabel>
         )}
@@ -339,5 +392,3 @@ export const Checkbox = createComponent('input')({
     ErrorType,
   },
 });
-
-export default Checkbox;

package/checkbox/package.json

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

package/collection/index.ts

@@ -9,9 +9,11 @@ export * from './lib/useListResetCursorOnBlur';
 export * from './lib/useListItemRovingFocus';
 export * from './lib/useListItemSelect';
 export * from './lib/useListModel';
+export * from './lib/useGridModel';
 export {ListBox} from './lib/ListBox';
 export {
   singleSelectionManager,
   multiSelectionManager,
   isSelected,
 } from './lib/useSelectionListModel';
+export {wrappingNavigationManager, navigationManager} from './lib/useCursorListModel';

package/collection/lib/ListBox.tsx

@@ -10,7 +10,7 @@ import {useListModel} from './useListModel';
 import {useListRenderItems} from './useListRenderItem';
 import {useListItemRegister} from './useListItemRegister';
 
-export interface ListBoxProps extends BoxProps {
+export interface ListBoxProps extends Omit<BoxProps, 'children'> {
   children?: React.ReactNode | ((item: any) => React.ReactNode);
 }
 

package/collection/lib/useBaseListModel.tsx

@@ -170,7 +170,7 @@ export const useBaseListModel = createModelHook({
         return items.concat({
           id: getId(data.item),
           value: data.item,
-          index: items.length - 1,
+          index: items.length,
           textValue: data.textValue,
         });
       });