@workday/canvas-kit-react 15.0.0-alpha.1326-next.0 → 15.0.1

package/checkbox/lib/CheckboxInput.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import {createComponent, focusRing, ErrorType} from '@workday/canvas-kit-react/common';
 
-import {calc, createStencil, handleCsProp, px2rem, CSProps} from '@workday/canvas-kit-styling';
-import {brand, system} from '@workday/canvas-tokens-web';
+import {ErrorType, createComponent, focusRing} from '@workday/canvas-kit-react/common';
+import {CSProps, calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
 import {checkboxBackgroundStencil} from './CheckBackground';
+import {checkboxRippleStencil} from './CheckboxRipple';
 
 export interface CheckboxProps extends CSProps {
   /**
@@ -51,10 +53,10 @@ export interface CheckboxProps extends CSProps {
 
 const checkboxInputStencil = createStencil({
   base: {
-    borderRadius: system.shape.half,
-    width: system.space.x6,
-    height: system.space.x6,
-    margin: system.space.zero,
+    borderRadius: system.legacy.shape.sm,
+    width: base.legacy.size300,
+    height: base.legacy.size300,
+    margin: 0,
     marginTop: calc.negate(px2rem(3)),
     marginInlineStart: calc.negate(px2rem(3)),
     position: 'absolute',
@@ -64,110 +66,99 @@ const checkboxInputStencil = createStencil({
       cursor: 'pointer',
     },
 
-    '&:where(:hover,.hover) ~ span:first-of-type': {
-      boxShadow: `0 0 0 ${px2rem(7)} ${system.color.bg.alt.soft}`,
+    [`&:where(:hover,.hover) ~ [data-part="${checkboxRippleStencil.parts.ripple['data-part']}"]`]: {
+      boxShadow: `0 0 0 ${px2rem(7)} ${system.legacy.color.surface.overlay.hover.default}`,
     },
 
-    // Disabled State
-    '&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
+    // Hover state and not disabled
+    [`&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]:
       {
-        borderColor: system.color.border.input.strong,
+        borderColor: system.legacy.color.border.input.hover,
+      },
+
+    [`&:where(:checked, :indeterminate) ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]:
+      {
+        borderColor: system.legacy.color.brand.accent.primary,
+        backgroundColor: system.legacy.color.brand.accent.primary,
+      },
+
+    [`&:where(:disabled, .disabled) ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]:
+      {
+        opacity: system.opacity.disabled,
       },
-    '&:where(:checked, :indeterminate) ~ div:first-of-type': {
-      borderColor: brand.primary.base,
-      backgroundColor: brand.primary.base,
-    },
-    '&:disabled ~ div:first-of-type': {
-      borderColor: system.color.border.input.disabled,
-      backgroundColor: system.color.bg.alt.softer,
-      opacity: system.opacity.full,
-    },
-    '&:disabled:where(:checked, :indeterminate) ~ div:first-of-type': {
-      borderColor: brand.primary.light,
-      backgroundColor: brand.primary.light,
-    },
 
     // Focus State
     '&:where(:focus-visible, :active, .focus, .active)': {
       outline: 'none',
     },
-    '&:where(:focus-visible, .focus) ~ div:first-of-type': {
-      borderColor: brand.primary.base,
-      borderWidth: px2rem(2),
-      ...focusRing({
-        width: 0,
-        separation: 0,
-        animate: false,
-      }),
-    },
+    // When not checked, the border is within the input
+    [`&:where(:focus-visible, .focus) ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]:
+      {
+        borderColor: system.legacy.color.brand.border.primary,
+        borderWidth: px2rem(2),
+        ...focusRing({
+          width: 0,
+          separation: 0,
+          animate: false,
+        }),
+      },
+    // When checked, the border is outside the input
     '&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus':
       {
-        '& ~ div:first-of-type': {
+        [`& ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]: {
           ...focusRing({
             width: 2,
             separation: 2,
             animate: false,
-            outerColor: brand.common.focusOutline,
+            outerColor: system.legacy.color.brand.border.primary,
           }),
-          borderColor: brand.primary.base,
+          borderColor: system.legacy.color.brand.accent.primary,
           borderWidth: px2rem(2),
-          span: {
-            marginInlineStart: calc.negate(px2rem(7)),
-          },
         },
       },
   },
   modifiers: {
     variant: {
       inverse: {
-        '& ~ span:first-of-type': {
-          opacity: system.opacity.disabled,
-        },
-
-        '& ~ div:first-of-type': {
-          borderColor: system.color.border.input.inverse,
+        [`& ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]: {
+          borderColor: system.legacy.color.focus.inverse,
         },
 
-        // Disabled State for inverse variant
-        '&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
+        // Hover state and not disabled
+        [`&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]:
           {
-            borderColor: system.color.border.input.inverse,
+            borderColor: system.legacy.color.focus.inverse,
           },
-        '&:where(:checked, :indeterminate) ~ div:first-of-type': {
-          borderColor: system.color.border.input.inverse,
-          backgroundColor: system.color.bg.default,
-        },
-        '&:disabled ~ div:first-of-type': {
-          backgroundColor: system.color.bg.alt.default,
+        [`&:where(:hover,.hover) ~ [data-part="${checkboxRippleStencil.parts.ripple['data-part']}"]`]:
+          {
+            boxShadow: `0 0 0 ${px2rem(7)} ${system.legacy.color.surface.overlay.hover.inverse}`,
+          },
+        [`&:where(:checked, :indeterminate):not(:disabled):not(.disabled) ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]:
+          {
+            borderColor: system.legacy.color.focus.inverse,
+            backgroundColor: system.legacy.color.surface.inverse,
+          },
+        // Disabled State for inverse variant (applies to all disabled states: unchecked, checked, and indeterminate)
+        [`&:disabled ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]: {
           opacity: system.opacity.disabled,
         },
-        '&:disabled:where(:checked, :indeterminate) ~ div:first-of-type': {
-          borderColor: system.color.border.input.inverse,
-          backgroundColor: system.color.bg.default,
-        },
+        // Disabled + checked/indeterminate state for inverse variant
+        [`&:where(:checked, :indeterminate):where(:disabled, .disabled) ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]:
+          {
+            backgroundColor: system.legacy.color.surface.inverse,
+          },
 
         // Focus state for inverse variant
-        '&:where(:focus-visible, .focus) ~ div:first-of-type': {
-          borderColor: system.color.border.contrast.default,
-          ...focusRing({
-            width: 2,
-            separation: 0,
-            animate: false,
-            innerColor: system.color.border.contrast.default,
-            outerColor: system.color.border.inverse,
-          }),
-        },
+        [`&:where(:focus-visible, .focus) ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]:
+          {
+            borderColor: system.color.border.contrast.default,
+            boxShadow: `0 0 0 ${px2rem(0)}  ${system.color.border.contrast.default} ,0 0 0 ${px2rem(2)}  ${system.legacy.color.focus.inverse} `,
+          },
         '&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus':
           {
             '& ~ div:first-of-type': {
-              ...focusRing({
-                width: 2,
-                separation: 2,
-                animate: false,
-                innerColor: system.color.border.contrast.default,
-                outerColor: system.color.border.inverse,
-              }),
-              borderColor: system.color.border.inverse,
+              boxShadow: `0 0 0 ${px2rem(2)}  ${system.color.border.contrast.default} ,0 0 0 ${px2rem(4)}  ${system.legacy.color.focus.inverse} `,
+              borderColor: system.legacy.color.focus.inverse,
             },
           },
       },
@@ -190,7 +181,7 @@ const checkboxInputStencil = createStencil({
         '&:where(:checked, :indeterminate) ~ div:first-of-type': {
           borderColor: 'transparent',
           boxShadow: `
-            0 0 0 ${px2rem(2)} ${system.color.border.inverse},
+            0 0 0 ${px2rem(2)} ${system.legacy.color.focus.inverse},
             0 0 0 ${px2rem(4)} ${checkboxBackgroundStencil.vars.errorRingColorInner},
             0 0 0 ${px2rem(5)} ${checkboxBackgroundStencil.vars.errorRingColorOuter}`,
         },
@@ -206,14 +197,14 @@ const checkboxInputStencil = createStencil({
       modifiers: {variant: 'inverse', error: true},
       styles: {
         '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': {
-          border: `${px2rem(1)} solid ${system.color.border.input.inverse}`,
+          border: `${px2rem(1)} solid ${system.legacy.color.focus.inverse}`,
         },
         '&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
           {
-            borderColor: system.color.border.input.inverse,
+            borderColor: system.legacy.color.focus.inverse,
           },
         '&:where(:checked, :indeterminate) ~ div:first-of-type': {
-          borderColor: system.color.border.input.inverse,
+          borderColor: system.legacy.color.focus.inverse,
         },
       },
     },

package/checkbox/lib/CheckboxRipple.tsx

@@ -1,13 +1,16 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {calc, CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {CSProps, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
-const checkboxRippleStencil = createStencil({
+export const checkboxRippleStencil = createStencil({
+  parts: {
+    ripple: 'checkbox-ripple',
+  },
   base: {
-    borderRadius: system.shape.round,
+    borderRadius: system.legacy.shape.full,
     boxShadow: 'none',
-    height: calc.add(system.space.x4, px2rem(2)),
-    width: calc.add(system.space.x4, px2rem(2)),
+    height: base.legacy.size225,
+    width: base.legacy.size225,
     transition: 'box-shadow 150ms ease-out',
     position: 'absolute',
     pointerEvents: 'none',
@@ -17,6 +20,11 @@ const checkboxRippleStencil = createStencil({
 export const CheckboxRipple = createComponent('span')({
   displayName: 'CheckboxRipple',
   Component: (elemProps: CSProps) => {
-    return <span {...handleCsProp(elemProps, checkboxRippleStencil())} />;
+    return (
+      <span
+        {...handleCsProp(elemProps, checkboxRippleStencil())}
+        {...checkboxRippleStencil.parts.ripple}
+      />
+    );
   },
 });

package/collection/lib/ListBox.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   createContainer,
   createElemPropsHook,
@@ -6,11 +7,10 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
 
+import {useListItemRegister} from './useListItemRegister';
 import {useListModel} from './useListModel';
 import {useListRenderItems} from './useListRenderItem';
-import {useListItemRegister} from './useListItemRegister';
 
 export interface ListBoxProps<T = any> extends Omit<FlexProps, 'children'> {
   children?: React.ReactNode | ((item: T, index: number) => React.ReactNode);
@@ -52,12 +52,14 @@ export const useListBox = createElemPropsHook(useListModel)(model => {
 });
 
 const listBoxContainerStencil = createStencil({
+  parts: {
+    listBoxContainer: 'list-box-container',
+  },
   base: {
     '& :where([data-part="list"])': {
       display: 'flex',
       flexDirection: 'column',
-      marginBlockStart: system.space.zero,
-      marginBlockEnd: system.space.zero,
+      marginBlock: 0,
     },
   },
   modifiers: {
@@ -119,6 +121,7 @@ export const ListBox = createContainer('ul')({
     return (
       <div
         ref={model.state.containerRef}
+        {...listBoxContainerStencil.parts.listBoxContainer}
         {...handleCsProp(
           {
             style: {

package/collection/lib/focusOnCurrentCursor.ts

@@ -1,4 +1,5 @@
 import {slugify} from '@workday/canvas-kit-styling';
+
 import {useCursorListModel} from './useCursorListModel';
 
 // retry a function each frame so we don't rely on the timing mechanism of React's render cycle.

package/collection/lib/keyUtils.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import {useCursorListModel} from './useCursorListModel';
 
 import {isElementRTL} from '@workday/canvas-kit-react/common';
 
+import {useCursorListModel} from './useCursorListModel';
+
 export const orientationKeyMap = {
   horizontal: {
     ArrowLeft: 'goToPrevious',

package/collection/lib/useBaseListModel.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import {useVirtualizer} from '@tanstack/react-virtual';
+import React from 'react';
 
-import {useUniqueId, createModelHook, Generic} from '@workday/canvas-kit-react/common';
+import {Generic, createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
 
 export type Orientation = 'horizontal' | 'vertical';
 
@@ -16,9 +16,12 @@ export const defaultGetId = (item: Generic): string => {
   return item === undefined ? '' : typeof item === 'string' ? item : item.id || '';
 };
 
+let hasWarnedNoGetTextValue = false;
+
 export const defaultGetTextValue = (item: Generic): string => {
   if (process.env.NODE_ENV === 'development') {
-    if (typeof item === 'object' && item.text === undefined) {
+    if (!hasWarnedNoGetTextValue && typeof item === 'object' && item.text === undefined) {
+      hasWarnedNoGetTextValue = true;
       console.warn(
         "List item was an object, but no `getTextValue` was passed to the model to inform the list where to find the item's text value. The item's text value is used for accessibility. Please pass a `getTextValue` to the list model"
       );

package/collection/lib/useCursorListModel.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import {createModelHook, Generic} from '@workday/canvas-kit-react/common';
 
-import {useBaseListModel, Item} from './useBaseListModel';
+import {Generic, createModelHook} from '@workday/canvas-kit-react/common';
+
+import {Item, useBaseListModel} from './useBaseListModel';
 
 type NavigationInput = Pick<ReturnType<typeof useCursorListModel>, 'state'>;
 

package/collection/lib/useGridModel.ts

@@ -1,4 +1,5 @@
 import {createModelHook} from '@workday/canvas-kit-react/common';
+
 import {navigationManager} from './useCursorListModel';
 import {useListModel} from './useListModel';
 

package/collection/lib/useListItemActiveDescendant.ts

@@ -16,11 +16,13 @@ import {isCursor, useCursorListModel} from './useCursorListModel';
  * );
 ```
  */
-export const useListItemActiveDescendant = createElemPropsHook(useCursorListModel)(
-  (model, _ref, elemProps: {'data-id'?: string} = {}) => {
-    const id = elemProps['data-id'] || '';
-    return {
-      className: isCursor(model.state, id) ? 'focus' : '',
-    };
-  }
-);
+export const useListItemActiveDescendant = createElemPropsHook(useCursorListModel)((
+  model,
+  _ref,
+  elemProps: {'data-id'?: string} = {}
+) => {
+  const id = elemProps['data-id'] || '';
+  return {
+    className: isCursor(model.state, id) ? 'focus' : '',
+  };
+});

package/collection/lib/useListItemAllowChildStrings.ts

@@ -1,5 +1,5 @@
+import {Item, useListModel} from '@workday/canvas-kit-react/collection';
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
-import {useListModel, Item} from '@workday/canvas-kit-react/collection';
 
 /**
  * This elemProps hook allows for children values to be considered identifiers if the children are
@@ -26,13 +26,15 @@ import {useListModel, Item} from '@workday/canvas-kit-react/collection';
  * </MyList>
  * ```
  */
-export const useListItemAllowChildStrings = createElemPropsHook(useListModel)(
-  (_, __, elemProps: {'data-id'?: string; children?: React.ReactNode; item?: Item<any>} = {}) => {
-    const props: {'data-id'?: string} = {};
-    if (!elemProps['data-id'] && !elemProps.item && typeof elemProps.children === 'string') {
-      props['data-id'] = elemProps.children;
-    }
-
-    return props;
+export const useListItemAllowChildStrings = createElemPropsHook(useListModel)((
+  _,
+  __,
+  elemProps: {'data-id'?: string; children?: React.ReactNode; item?: Item<any>} = {}
+) => {
+  const props: {'data-id'?: string} = {};
+  if (!elemProps['data-id'] && !elemProps.item && typeof elemProps.children === 'string') {
+    props['data-id'] = elemProps.children;
   }
-);
+
+  return props;
+});

package/collection/lib/useListItemRegister.tsx

@@ -1,11 +1,11 @@
 import React, {CSSProperties} from 'react';
 
 import {
-  useMountLayout,
   createElemPropsHook,
-  useLocalRef,
-  useForkRef,
   slugify,
+  useForkRef,
+  useLocalRef,
+  useMountLayout,
 } from '@workday/canvas-kit-react/common';
 
 import {useListModel} from './useListModel';
@@ -24,86 +24,84 @@ import {ListRenderItemContext} from './useListRenderItem';
  * );
  * ```
  */
-export const useListItemRegister = createElemPropsHook(useListModel)(
-  (
-    model,
-    ref,
-    elemProps: {
-      'data-id'?: string;
-      'data-text'?: string;
-      'data-has-children'?: boolean;
-      children?: React.ReactNode;
-      index?: number;
-      disabled?: boolean;
-    } = {}
-  ) => {
-    const {state, events} = model;
-
-    const {item, virtual} = React.useContext(ListRenderItemContext);
-    const [localId, setLocalId] = React.useState(elemProps['data-id'] || item?.id || '');
+export const useListItemRegister = createElemPropsHook(useListModel)((
+  model,
+  ref,
+  elemProps: {
+    'data-id'?: string;
+    'data-text'?: string;
+    'data-has-children'?: boolean;
+    children?: React.ReactNode;
+    index?: number;
+    disabled?: boolean;
+  } = {}
+) => {
+  const {state, events} = model;
 
-    const {localRef, elementRef} = useLocalRef(
-      useForkRef(
-        ref as React.Ref<HTMLElement>,
-        virtual ? model.state.UNSTABLE_virtual.measureElement : null
-      )
-    );
+  const {item, virtual} = React.useContext(ListRenderItemContext);
+  const [localId, setLocalId] = React.useState(elemProps['data-id'] || item?.id || '');
 
-    // if the list is virtual, force the correct styling. Without this, weird things happen...
-    const style: CSSProperties = virtual
-      ? {
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          transform: `translateY(${virtual.start}px)`,
-        }
-      : {};
+  const {localRef, elementRef} = useLocalRef(
+    useForkRef(
+      ref as React.Ref<HTMLElement>,
+      virtual ? model.state.UNSTABLE_virtual.measureElement : null
+    )
+  );
 
-    useMountLayout(() => {
-      if (virtual?.index === 0 && localRef.current?.clientHeight) {
-        // TODO: This update doesn't seem to be working correctly
-        // events.updateItemHeight?.(localRef.current!.clientHeight);
+  // if the list is virtual, force the correct styling. Without this, weird things happen...
+  const style: CSSProperties = virtual
+    ? {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        transform: `translateY(${virtual.start}px)`,
       }
-      // if an item is already provided, there's nothing left to do
-      if (item) {
-        return;
-      }
-      const defaultId = state.indexRef.current;
-      const itemId =
-        localId || (elemProps['data-has-children'] ? `${state.id}-` : '') + String(defaultId);
+    : {};
 
-      // TODO: Better lookup that using `items.find`. We need a more generic collection to handle seeing if an item already exists
-      // bail early if item already exists. This happens if items were already provided.
-      if (state.items.find(item => item.id === itemId)) {
-        return;
-      }
+  useMountLayout(() => {
+    if (virtual?.index === 0 && localRef.current?.clientHeight) {
+      // TODO: This update doesn't seem to be working correctly
+      // events.updateItemHeight?.(localRef.current!.clientHeight);
+    }
+    // if an item is already provided, there's nothing left to do
+    if (item) {
+      return;
+    }
+    const defaultId = state.indexRef.current;
+    const itemId =
+      localId || (elemProps['data-has-children'] ? `${state.id}-` : '') + String(defaultId);
+
+    // TODO: Better lookup that using `items.find`. We need a more generic collection to handle seeing if an item already exists
+    // bail early if item already exists. This happens if items were already provided.
+    if (state.items.find(item => item.id === itemId)) {
+      return;
+    }
 
-      const registeredItem = {
-        id: itemId,
-        textValue: elemProps['data-text']
-          ? elemProps['data-text']
-          : typeof elemProps.children === 'string'
+    const registeredItem = {
+      id: itemId,
+      textValue: elemProps['data-text']
+        ? elemProps['data-text']
+        : typeof elemProps.children === 'string'
           ? elemProps.children
           : '',
-      };
-      events.registerItem(registeredItem);
-
-      setLocalId(itemId);
+    };
+    events.registerItem(registeredItem);
 
-      return () => {
-        events.unregisterItem({id: itemId});
-      };
-    });
+    setLocalId(itemId);
 
-    return {
-      ref: elementRef,
-      'data-id': localId,
-      disabled: elemProps.disabled || state.nonInteractiveIds.includes(localId) ? true : undefined,
-      'aria-setsize': virtual ? state.UNSTABLE_virtual.options.count : undefined,
-      'aria-posinset': virtual ? item!.index + 1 : undefined,
-      'data-index': virtual ? item!.index : undefined,
-      style,
-      id: slugify(`${state.id}-${localId}`),
+    return () => {
+      events.unregisterItem({id: itemId});
     };
-  }
-);
+  });
+
+  return {
+    ref: elementRef,
+    'data-id': localId,
+    disabled: elemProps.disabled || state.nonInteractiveIds.includes(localId) ? true : undefined,
+    'aria-setsize': virtual ? state.UNSTABLE_virtual.options.count : undefined,
+    'aria-posinset': virtual ? item!.index + 1 : undefined,
+    'data-index': virtual ? item!.index : undefined,
+    style,
+    id: slugify(`${state.id}-${localId}`),
+  };
+});

package/collection/lib/useListItemRemoveOnDeleteKey.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 
-import {useSelectionListModel} from './useSelectionListModel';
 import {focusOnCurrentCursor} from './focusOnCurrentCursor';
 import {listItemRemove} from './listItemRemove';
+import {useSelectionListModel} from './useSelectionListModel';
 
 /**
  * This elemProps hook is used when a menu item is expected to be removed. It will advance the cursor to