@workday/canvas-kit-react 10.0.0-alpha.539-next.0 → 10.0.0-alpha.543-next.0

package/checkbox/lib/Checkbox.tsx

@@ -12,13 +12,7 @@ import {
   Themeable,
   useLocalRef,
 } from '@workday/canvas-kit-react/common';
-import {
-  borderRadius,
-  colors,
-  inputColors,
-  space,
-  spaceNumbers,
-} from '@workday/canvas-kit-react/tokens';
+import {borderRadius, colors, inputColors, space} from '@workday/canvas-kit-react/tokens';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {checkSmallIcon} from '@workday/canvas-system-icons-web';
 import {LabelText} from '@workday/canvas-kit-react/text';
@@ -67,17 +61,10 @@ export interface CheckboxProps extends Themeable {
   variant?: 'inverse' | undefined;
 }
 
-const checkboxHeight = (spaceNumbers.xl - spaceNumbers.xxxs) / 2;
-const checkboxTapArea = space.m;
-const checkboxContainerHeight = checkboxTapArea;
-const checkboxLabelDistance = `${spaceNumbers.xs}rem`;
-const checkboxWidth = checkboxHeight;
-const rippleRadius = (spaceNumbers.l - checkboxWidth) / 2;
-
 const CheckboxContainer = styled('div')({
   display: 'flex',
   alignItems: 'center',
-  minHeight: checkboxContainerHeight,
+  minHeight: space.m,
   position: 'relative',
 });
 
@@ -88,8 +75,8 @@ const CheckboxContainer = styled('div')({
  */
 const CheckboxInputWrapper = styled('div')<Pick<CheckboxProps, 'disabled'>>({
   display: 'flex',
-  height: `${checkboxHeight}rem`,
-  minWidth: `${checkboxWidth}rem`,
+  height: `calc(${space.s} + 2px)`,
+  minWidth: `calc(${space.s} + 2px)`,
   marginTop: '3px',
   alignSelf: 'flex-start',
 });
@@ -98,9 +85,9 @@ const CheckboxRipple = styled('span')<Pick<CheckboxProps, 'disabled' | 'variant'
   {
     borderRadius: borderRadius.circle,
     boxShadow: `0 0 0 0 ${colors.soap200}`,
-    height: `${checkboxHeight}rem`,
+    height: `calc(${space.s} + 2px)`,
     transition: 'box-shadow 150ms ease-out',
-    width: `${checkboxWidth}rem`,
+    width: `calc(${space.s} + 2px)`,
     position: 'absolute',
     pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
   },
@@ -126,8 +113,8 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
     variant,
   }) => ({
     borderRadius: borderRadius.s,
-    width: checkboxTapArea,
-    height: checkboxTapArea,
+    width: space.m,
+    height: space.m,
     margin: 0,
     marginTop: '-3px',
     marginLeft: '-3px',
@@ -139,11 +126,12 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
     },
 
     // States
-    '&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active': {
-      '~ div:first-of-type': {
-        borderColor: variant === 'inverse' ? colors.soap300 : inputColors.hoverBorder,
+    '&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active':
+      {
+        '~ div:first-of-type': {
+          borderColor: variant === 'inverse' ? colors.soap300 : inputColors.hoverBorder,
+        },
       },
-    },
     '&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
       borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
       backgroundColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
@@ -210,7 +198,9 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
   }),
   ({disabled}) => ({
     '&:hover ~ span:first-of-type': {
-      boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}rem ${colors.soap200}`,
+      boxShadow: disabled
+        ? undefined
+        : `0 0 0 calc((${space.l} - (${space.s} + 2px)) / 2) ${colors.soap200}`,
     },
   }),
   ({theme, error, variant}) => {
@@ -226,11 +216,12 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
           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(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active': {
-        '~ div:first-of-type': {
-          borderColor: variant === 'inverse' ? `1px solid ${colors.soap300}` : errorColors.inner,
+      '&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active':
+        {
+          '~ div:first-of-type': {
+            borderColor: variant === 'inverse' ? `1px solid ${colors.soap300}` : errorColors.inner,
+          },
         },
-      },
       '&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
         borderColor: variant === 'inverse' ? colors.soap300 : theme.canvas.palette.primary.main,
         boxShadow: `
@@ -260,13 +251,13 @@ const CheckboxBackground = styled('div')<CheckboxProps>(
     borderRadius: borderRadius.s,
     boxSizing: 'border-box',
     display: 'flex',
-    height: `${checkboxHeight}rem`,
+    height: `calc(${space.s} + 2px)`,
     justifyContent: 'center',
     padding: '0px 2px',
     pointerEvents: 'none',
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
-    width: `${checkboxWidth}rem`,
+    width: `calc(${space.s} + 2px)`,
   },
   ({variant}) => ({
     border: `1px solid ${variant === 'inverse' ? colors.soap300 : inputColors.border}`,
@@ -373,7 +364,7 @@ export const Checkbox = createComponent('input')({
             htmlFor={inputId}
             disabled={disabled}
             variant={variant}
-            paddingInlineStart={checkboxLabelDistance}
+            paddingInlineStart={space.xs}
             cursor="pointer"
           >
             {label}

package/collection/index.ts

@@ -15,6 +15,7 @@ export * from './lib/useGridModel';
 export * from './lib/useListActiveDescendant';
 export * from './lib/useListItemAllowChildStrings';
 export {ListBox, ListBoxProps} from './lib/ListBox';
+export {keyboardEventToCursorEvents} from './lib/keyUtils';
 export {
   singleSelectionManager,
   multiSelectionManager,

package/collection/lib/useBaseListModel.tsx

@@ -10,7 +10,7 @@ export const defaultGetId = (item: any): string => {
 };
 
 export const defaultGetTextValue = (item: any): string => {
-  return typeof item === 'string' ? item : item.text || '';
+  return typeof item === 'string' ? item : item.text || item.id || '';
 };
 
 export interface Item<T> {
@@ -20,7 +20,7 @@ export interface Item<T> {
   /**
    * Used by components that allow jumping to an item based on typing
    */
-  textValue?: string;
+  textValue: string;
 }
 
 // interface Collection<T> {
@@ -124,7 +124,7 @@ export const useBaseListModel = createModelHook({
   const getTextValueRef = React.useRef(defaultGetTextValue);
 
   const getId = config.getId || defaultGetId;
-  const getTextValue = config.getTextValue || defaultGetTextValue;
+  const getTextValue = config.getTextValue || config.getId || defaultGetTextValue;
   getIdRef.current = getId;
   getTextValueRef.current = getTextValue;
 

package/collection/lib/useListItemRegister.tsx

@@ -94,7 +94,7 @@ export const useListItemRegister = createElemPropsHook(useListModel)(
       disabled: elemProps.disabled || state.nonInteractiveIds.includes(localId) ? true : undefined,
       item: null, // remove `item` from prop list
       virtual: null, // remove `virtual` from prop list
-      'aria-setsize': elemProps.virtual?.size,
+      'aria-setsize': elemProps.virtual ? state.UNSTABLE_virtual.totalSize : undefined,
       'aria-posinset': elemProps.virtual ? elemProps.item!.index + 1 : undefined,
       style,
       id: slugify(`${state.id}-${localId}`),

package/collection/lib/useListRenderItem.tsx

@@ -34,7 +34,7 @@ export function useListRenderItems<T>(
                 // 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,
+                key: item.id || item.index,
                 item,
               });
             }
@@ -44,7 +44,7 @@ export function useListRenderItems<T>(
             const child = children(item.value, item.index);
             if (React.isValidElement(child)) {
               return React.cloneElement(child, {
-                key: item.id,
+                key: item.id || item.index,
                 item: item.value,
               });
             }

package/combobox/index.ts

@@ -2,7 +2,14 @@ export {Combobox} from './lib/Combobox';
 export {useComboboxCard} from './lib/ComboboxCard';
 export {useComboboxMenuItem} from './lib/ComboboxMenuItem';
 export {useComboboxMenuList} from './lib/ComboboxMenuList';
-export {useComboboxInput} from './lib/ComboboxInput';
-export {useComboboxLoader} from './lib/useComboboxLoader';
-export {useComboboxModel} from './lib/useComboboxModel';
-export {useComboboxInputOpenWithArrowKeys as useComboboxOpenWithArrowKeys} from './lib/useComboboxInputOpenWithArrowKeys';
+export {
+  useComboboxLoader,
+  useComboboxModel,
+  useComboboxInputOpenWithArrowKeys,
+  useComboboxKeyboardTypeAhead,
+  useSetPopupWidth,
+  useComboboxMoveCursorToSelected,
+  useComboboxInput,
+  useComboboxListKeyboardHandler,
+  useComboboxResetCursorToSelected,
+} from './lib/hooks';

package/combobox/lib/Combobox.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {createContainer} from '@workday/canvas-kit-react/common';
 
-import {useComboboxModel} from './useComboboxModel';
+import {useComboboxModel} from './hooks';
 import {ComboboxInput} from './ComboboxInput';
 import {ComboboxMenu} from './ComboboxMenu';
 export interface ComboboxProps {

package/combobox/lib/ComboboxCard.tsx

@@ -7,7 +7,7 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {Menu} from '@workday/canvas-kit-react/menu';
 
-import {useComboboxModel} from './useComboboxModel';
+import {useComboboxModel} from './hooks';
 
 export interface ComboboxCardProps extends ExtractProps<typeof Menu.Card> {}
 

package/combobox/lib/ComboboxInput.tsx

@@ -1,97 +1,9 @@
 import React from 'react';
 
-import {
-  composeHooks,
-  createElemPropsHook,
-  createSubcomponent,
-  dispatchInputEvent,
-  ExtractProps,
-  useForkRef,
-} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {usePopupTarget} from '@workday/canvas-kit-react/popup';
-import {
-  useListActiveDescendant,
-  useListKeyboardHandler,
-} from '@workday/canvas-kit-react/collection';
 
-import {useComboboxModel} from './useComboboxModel';
-import {useComboboxInputOpenWithArrowKeys} from './useComboboxInputOpenWithArrowKeys';
-
-/**
- * Adds all attributes necessary to start with a {@link ComboboxInput Combobox.Input}. It opens the
- * menu with arrow keys, uses {@link useListActiveDescendant}, and handles keyboard arrows to
- * navigate items of the menu. You may also compose this hook to add more specific behaviors for
- * your {@link ComboboxInput Combobox.Input}.
- */
-export const useComboboxInput = composeHooks(
-  createElemPropsHook(useComboboxModel)((model, ref) => {
-    const elementRef = useForkRef(ref, model.state.inputRef);
-
-    React.useEffect(() => {
-      if (model.state.cursorId && model.state.visibility === 'visible') {
-        const item = model.navigation.getItem(model.state.cursorId, model);
-        if (model.state.isVirtualized && item) {
-          model.state.UNSTABLE_virtual.scrollToIndex(item.index);
-        } else {
-          const listboxId = model.state.inputRef.current?.getAttribute('aria-controls');
-          if (listboxId) {
-            const menuItem = document.querySelector(
-              `[id="${listboxId}"] [data-id="${model.state.cursorId}"]`
-            );
-            if (menuItem) {
-              menuItem.scrollIntoView({block: 'nearest'});
-            }
-          }
-        }
-      }
-
-      // we only want to run this effect if the cursor changes and not any other time
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [model.state.cursorId]);
-
-    return {
-      onKeyDown(event: React.KeyboardEvent) {
-        if (event.key === 'Escape') {
-          dispatchInputEvent(event.currentTarget as HTMLElement, '');
-        }
-        if (event.key === 'Enter' && !event.metaKey && model.state.visibility === 'visible') {
-          const element = document.querySelector(`[data-id="${model.state.cursorId}"]`);
-          if (element && element?.getAttribute('aria-disabled') !== 'true') {
-            model.events.select({id: model.state.cursorId});
-            if (model.state.mode === 'single') {
-              model.events.hide(event);
-            }
-          }
-
-          // We don't want to submit forms while the combobox is open
-          event.preventDefault();
-        }
-      },
-      onBlur(event: React.FocusEvent) {
-        model.events.hide(event);
-      },
-      onChange: model.onChange,
-      onClick(event: React.MouseEvent) {
-        if (model.state.visibility === 'hidden') {
-          model.events.setWidth(event.currentTarget.clientWidth);
-        }
-      },
-      value: model.state.value,
-      role: 'combobox',
-      'aria-haspopup': true,
-      'aria-expanded': model.state.visibility === 'visible',
-      'aria-autocomplete': 'list',
-      'aria-controls': `${model.state.id}-list`,
-      id: model.state.id,
-      ref: elementRef,
-    } as const;
-  }),
-  useComboboxInputOpenWithArrowKeys,
-  useListActiveDescendant,
-  useListKeyboardHandler,
-  usePopupTarget
-);
+import {useComboboxModel, useComboboxInput} from './hooks';
 
 export const ComboboxInput = createSubcomponent(TextInput)({
   modelHook: useComboboxModel,

package/combobox/lib/ComboboxMenu.tsx

@@ -3,10 +3,11 @@ import React from 'react';
 import {createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Menu} from '@workday/canvas-kit-react/menu';
 
-import {useComboboxModel} from './useComboboxModel';
+import {useComboboxModel} from './hooks';
 import {ComboboxMenuList} from './ComboboxMenuList';
 import {ComboboxMenuItem} from './ComboboxMenuItem';
 import {ComboboxCard} from './ComboboxCard';
+import {ComboboxMenuPopper} from './ComboboxPopper';
 
 export interface ComboboxMenuProps {
   /**
@@ -23,9 +24,9 @@ export const ComboboxMenu = createSubcomponent()({
      * {@link ComboboxInput Combobox.Input}. It renders a `div` element that is portalled to the
      * `document.body` which is controlled by the {@link PopupStack}. The `PopupStack` is not part
      * of React. This means no extra props given to this component will be forwarded to the `div`
-     * element, but the `ref` will be forwarded.
+     * element, but the `ref` will be forwarded. Also fallback placements for the popper with be either `top` or `bottom`.
      */
-    Popper: Menu.Popper,
+    Popper: ComboboxMenuPopper,
     /**
      * The combobox menu list follows the Collections API. A list can either contain static items or
      * a render prop and `items` to the model.

package/combobox/lib/ComboboxMenuItem.tsx

@@ -4,15 +4,17 @@ import {
   composeHooks,
   createElemPropsHook,
   createSubcomponent,
+  styled,
 } from '@workday/canvas-kit-react/common';
 import {StyledMenuItem, useMenuModel} from '@workday/canvas-kit-react/menu';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {
   useListItemAllowChildStrings,
   useListItemRegister,
 } from '@workday/canvas-kit-react/collection';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
 
-import {useComboboxModel} from './useComboboxModel';
+import {useComboboxModel} from './hooks';
 
 export interface ComboboxMenuItemProps {
   children: React.ReactNode;
@@ -26,17 +28,13 @@ export interface ComboboxMenuItemProps {
  * added when the item has "focus" (when the cursor is on the item).
  */
 export const useComboboxMenuItem = composeHooks(
-  createElemPropsHook(useMenuModel)((model, _, elemProps: {'data-id'?: string} = {}) => {
+  createElemPropsHook(useMenuModel)((model, ref, elemProps: {'data-id'?: string} = {}) => {
     const id = elemProps['data-id'] || '';
+
     const onMouseDown = (event: React.MouseEvent<HTMLElement>) => {
-      if (
-        model.state.nonInteractiveIds.includes(id) ||
-        event.currentTarget.hasAttribute('aria-disabled')
-      ) {
-        return;
-      }
       if (event.currentTarget.getAttribute('aria-disabled') !== 'true') {
         model.events.select({id});
+
         if (model.state.mode === 'single') {
           model.events.hide(event);
         }
@@ -63,6 +61,9 @@ export const useComboboxMenuItem = composeHooks(
 export const ComboboxMenuItem = createSubcomponent('li')({
   modelHook: useComboboxModel,
   elemPropsHook: useComboboxMenuItem,
+  subComponents: {
+    Icon: styled(SystemIcon)({alignSelf: 'start'}),
+  },
 })<ComboboxMenuItemProps>(({children, ...elemProps}, Element) => {
   return (
     <OverflowTooltip placement="left">

package/combobox/lib/ComboboxMenuList.tsx

@@ -5,7 +5,7 @@ import {createElemPropsHook, createSubcomponent} from '@workday/canvas-kit-react
 import {useMenuModel} from '@workday/canvas-kit-react/menu';
 import {ListBox, ListBoxProps} from '@workday/canvas-kit-react/collection';
 
-import {useComboboxModel} from './useComboboxModel';
+import {useComboboxModel} from './hooks';
 
 export interface ComboboxMenuListProps<T = any> extends ListBoxProps<T> {}
 

package/combobox/lib/ComboboxPopper.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {usePopupPopper, Popper} from '@workday/canvas-kit-react/popup';
+
+import {Menu, useMenuModel} from '@workday/canvas-kit-react/menu';
+
+export const useMenuPopper = usePopupPopper;
+
+export const ComboboxMenuPopper = createSubcomponent('div')({
+  displayName: 'Combobox.Menu.Popper',
+  modelHook: useMenuModel,
+  elemPropsHook: useMenuPopper,
+})<ExtractProps<typeof Popper>>(({children, ...elemProps}) => {
+  return (
+    <Menu.Popper fallbackPlacements={['top', 'bottom']} {...elemProps}>
+      {children}
+    </Menu.Popper>
+  );
+});

package/combobox/lib/hooks/index.ts

@@ -0,0 +1,9 @@
+export * from './useComboboxInputOpenWithArrowKeys';
+export * from './useComboboxLoader';
+export * from './useComboboxModel';
+export * from './useComboboxMoveCursorToSelected';
+export * from './useSetPopupWidth';
+export * from './useComboboxKeyboardTypeAhead';
+export * from './useComboboxListKeyboardHandler';
+export * from './useComboboxInput';
+export * from './useComboboxResetCursorToSelected';

package/combobox/lib/hooks/useComboboxInput.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import {composeHooks, createElemPropsHook, useForkRef} from '@workday/canvas-kit-react/common';
+import {usePopupTarget} from '@workday/canvas-kit-react/popup';
+
+import {useListActiveDescendant} from '@workday/canvas-kit-react/collection';
+
+import {
+  useComboboxModel,
+  useComboboxInputOpenWithArrowKeys,
+  useSetPopupWidth,
+  useComboboxListKeyboardHandler,
+} from './index';
+
+/**
+ * `useComboboxInput` Adds all attributes necessary to start with a {@link ComboboxInput Combobox.Input}. It opens the
+ * menu with arrow keys, uses {@link useListActiveDescendant}, and handles keyboard arrows to
+ * navigate items of the menu. You may also compose this hook to add more specific behaviors for
+ * your {@link ComboboxInput Combobox.Input}.
+ */
+export const useComboboxInput = composeHooks(
+  createElemPropsHook(useComboboxModel)((model, ref) => {
+    const elementRef = useForkRef(ref, model.state.inputRef);
+
+    React.useEffect(() => {
+      if (model.state.cursorId && model.state.visibility === 'visible') {
+        const item = model.navigation.getItem(model.state.cursorId, model);
+        if (model.state.isVirtualized && item) {
+          model.state.UNSTABLE_virtual.scrollToIndex(item.index);
+        } else {
+          const listboxId = model.state.inputRef.current?.getAttribute('aria-controls');
+          if (listboxId) {
+            const menuItem = document.querySelector(
+              `[id="${listboxId}"] [data-id="${model.state.cursorId}"]`
+            );
+            if (menuItem) {
+              requestAnimationFrame(() => {
+                menuItem.scrollIntoView({block: 'nearest'});
+              });
+            }
+          }
+        }
+      }
+
+      // we only want to run this effect if the cursor, visibility and selectedIds change and not any other time
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [model.state.cursorId, model.state.selectedIds, model.state.visibility]);
+
+    return {
+      onKeyDown(event: React.KeyboardEvent) {
+        if (event.key === 'Enter' && !event.metaKey && model.state.visibility === 'visible') {
+          const element = document.querySelector(`[data-id="${model.state.cursorId}"]`);
+          if (element && element?.getAttribute('aria-disabled') !== 'true') {
+            model.events.select({id: model.state.cursorId});
+            if (model.state.mode === 'single') {
+              model.events.hide(event);
+            }
+          }
+
+          // We don't want to submit forms while the combobox is open
+          event.preventDefault();
+        }
+      },
+      onBlur(event: React.FocusEvent) {
+        model.events.hide(event);
+      },
+      onChange: model.onChange,
+      onClick(event: React.MouseEvent) {
+        if (model.state.visibility === 'hidden') {
+          model.events.setWidth(event.currentTarget.clientWidth);
+        }
+      },
+      value: model.state.value,
+      role: 'combobox',
+      'aria-haspopup': true,
+      'aria-expanded': model.state.visibility === 'visible',
+      'aria-autocomplete': 'list',
+      'aria-controls': `${model.state.id}-list`,
+      id: model.state.id,
+      ref: elementRef,
+    } as const;
+  }),
+  useSetPopupWidth,
+  useComboboxInputOpenWithArrowKeys,
+  useListActiveDescendant,
+  useComboboxListKeyboardHandler,
+  usePopupTarget
+);