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

package/combobox/lib/ComboboxCard.tsx

@@ -1,9 +1,11 @@
 import {
+  ExtractProps,
   createElemPropsHook,
   createSubcomponent,
-  ExtractProps,
 } from '@workday/canvas-kit-react/common';
 import {Menu} from '@workday/canvas-kit-react/menu';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 import {useComboboxModel} from './hooks/useComboboxModel';
 
@@ -19,12 +21,20 @@ export const useComboboxCard = createElemPropsHook(useComboboxModel)(model => {
   } as const;
 });
 
+export const comboboxCardStencil = createStencil({
+  base: {
+    '& :where([data-part="list-box-container"])': {
+      borderRadius: system.legacy.shape.xxl,
+    },
+  },
+});
+
 export const ComboboxCard = createSubcomponent('div')({
   modelHook: useComboboxModel,
   elemPropsHook: useComboboxCard,
 })<ComboboxCardProps>(({children, ...elemProps}, Element) => {
   return (
-    <Menu.Card as={Element} {...elemProps}>
+    <Menu.Card as={Element} {...handleCsProp(elemProps, comboboxCardStencil())}>
       {children}
     </Menu.Card>
   );

package/combobox/lib/ComboboxInput.tsx

@@ -1,8 +1,8 @@
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
-import {useComboboxModel} from './hooks/useComboboxModel';
 import {useComboboxInput} from './hooks/useComboboxInput';
+import {useComboboxModel} from './hooks/useComboboxModel';
 
 export const ComboboxInput = createSubcomponent(TextInput)({
   modelHook: useComboboxModel,

package/combobox/lib/ComboboxMenu.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 import {createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Menu} from '@workday/canvas-kit-react/menu';
 
-import {useComboboxModel} from './hooks/useComboboxModel';
-import {ComboboxMenuList} from './ComboboxMenuList';
 import {ComboboxCard} from './ComboboxCard';
+import {ComboboxMenuList} from './ComboboxMenuList';
 import {ComboboxMenuPopper} from './ComboboxPopper';
+import {useComboboxModel} from './hooks/useComboboxModel';
 
 export interface ComboboxMenuProps {
   /**

package/combobox/lib/ComboboxMenuList.tsx

@@ -1,10 +1,10 @@
-import {createElemPropsHook, createSubcomponent} from '@workday/canvas-kit-react/common';
-import {useMenuModel, menuListStencil} from '@workday/canvas-kit-react/menu';
 import {ListBox, ListBoxProps} from '@workday/canvas-kit-react/collection';
+import {createElemPropsHook, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {menuListStencil, useMenuModel} from '@workday/canvas-kit-react/menu';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {useComboboxModel} from './hooks/useComboboxModel';
-import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
 
 export interface ComboboxMenuListProps<T = any> extends ListBoxProps<T> {}
 
@@ -34,7 +34,7 @@ export const ComboboxMenuList = createSubcomponent('ul')({
     <ListBox
       as={Element}
       model={model}
-      marginY={cssVar(system.space.x2)}
+      marginY={system.legacy.gap.none}
       {...handleCsProp(elemProps, comboboxMenuListStencil({orientation: model.state.orientation}))}
     >
       {children}

package/combobox/lib/ComboboxPopper.tsx

@@ -1,7 +1,6 @@
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {usePopupPopper, Popper} from '@workday/canvas-kit-react/popup';
-
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Menu, useMenuModel} from '@workday/canvas-kit-react/menu';
+import {Popper, usePopupPopper} from '@workday/canvas-kit-react/popup';
 
 export const useMenuPopper = usePopupPopper;
 

package/combobox/lib/hooks/useComboboxInput.ts

@@ -1,14 +1,13 @@
 import React from 'react';
 
+import {getCursor, useListActiveDescendant} from '@workday/canvas-kit-react/collection';
 import {composeHooks, createElemPropsHook, useForkRef} from '@workday/canvas-kit-react/common';
 import {usePopupTarget} from '@workday/canvas-kit-react/popup';
 
-import {getCursor, useListActiveDescendant} from '@workday/canvas-kit-react/collection';
-
-import {useComboboxModel} from './useComboboxModel';
 import {useComboboxInputOpenWithArrowKeys} from './useComboboxInputOpenWithArrowKeys';
-import {useSetPopupWidth} from './useSetPopupWidth';
 import {useComboboxListKeyboardHandler} from './useComboboxListKeyboardHandler';
+import {useComboboxModel} from './useComboboxModel';
+import {useSetPopupWidth} from './useSetPopupWidth';
 
 /**
  * `useComboboxInput` Adds all attributes necessary to start with a {@link ComboboxInput Combobox.Input}. It opens the
@@ -57,11 +56,11 @@ export const useComboboxInput = composeHooks(
         }
       },
       onBlur(event: React.FocusEvent) {
-        // model.events.hide(event);
+        model.events.hide(event);
       },
       onClick(event: React.MouseEvent) {
         if (model.state.visibility === 'hidden') {
-          model.events.setWidth(event.currentTarget.clientWidth);
+          model.events.setWidth(event.currentTarget.getBoundingClientRect().width);
         }
       },
       value: model.state.value,

package/combobox/lib/hooks/useComboboxInputArbitrary.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+
 import {
   createElemPropsHook,
-  useLocalRef,
   dispatchInputEvent,
+  useLocalRef,
 } from '@workday/canvas-kit-react/common';
+
 import {useComboboxModel} from './useComboboxModel';
 
 /**

package/combobox/lib/hooks/useComboboxInputConstrained.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+
 import {
   createElemPropsHook,
-  useLocalRef,
   dispatchInputEvent,
+  useLocalRef,
 } from '@workday/canvas-kit-react/common';
+
 import {useComboboxModel} from './useComboboxModel';
 
 function onlyDefined<T>(input: T | undefined): input is T {
@@ -17,158 +19,150 @@ function onlyDefined<T>(input: T | undefined): input is T {
  * keeping the inputs and the model in sync with each other and working with a browser's
  * autocomplete, form libraries and the model.
  */
-export const useComboboxInputConstrained = createElemPropsHook(useComboboxModel)(
-  (
-    model,
-    ref,
-    {
-      disabled,
-      value: reactValue,
-      onChange,
-      name,
-    }: Pick<
-      React.InputHTMLAttributes<HTMLInputElement>,
-      'disabled' | 'value' | 'onChange' | 'name'
-    > = {}
-  ) => {
-    // The user element is what the user sees
-    const {elementRef: userElementRef, localRef: userLocalRef} = useLocalRef(
-      model.state.targetRef as React.Ref<HTMLInputElement>
-    );
-
-    // The form element is what is seen in `FormData` during for submission to the server
-    const {elementRef: formElementRef, localRef: formLocalRef} = useLocalRef(
-      ref as React.Ref<HTMLInputElement>
-    );
-
-    // Create React refs so we can get the current value inside an Effect without using those values
-    // as part of the dependency array.
-    const modelNavigationRef = React.useRef(model.navigation);
-    modelNavigationRef.current = model.navigation;
-    const modelStateRef = React.useRef(model.state);
-    modelStateRef.current = model.state;
-
-    // Watch the `value` prop passed from React props and update the model accordingly
-    React.useLayoutEffect(() => {
-      if (formLocalRef.current && typeof reactValue === 'string') {
-        if (reactValue !== formLocalRef.current.value) {
-          model.events.setSelectedIds(reactValue ? reactValue.split(', ') : []);
-        }
+export const useComboboxInputConstrained = createElemPropsHook(useComboboxModel)((
+  model,
+  ref,
+  {
+    disabled,
+    value: reactValue,
+    onChange,
+    name,
+  }: Pick<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'disabled' | 'value' | 'onChange' | 'name'
+  > = {}
+) => {
+  // The user element is what the user sees
+  const {elementRef: userElementRef, localRef: userLocalRef} = useLocalRef(
+    model.state.targetRef as React.Ref<HTMLInputElement>
+  );
+
+  // The form element is what is seen in `FormData` during for submission to the server
+  const {elementRef: formElementRef, localRef: formLocalRef} = useLocalRef(
+    ref as React.Ref<HTMLInputElement>
+  );
+
+  // Create React refs so we can get the current value inside an Effect without using those values
+  // as part of the dependency array.
+  const modelNavigationRef = React.useRef(model.navigation);
+  modelNavigationRef.current = model.navigation;
+  const modelStateRef = React.useRef(model.state);
+  modelStateRef.current = model.state;
+
+  // Watch the `value` prop passed from React props and update the model accordingly
+  React.useLayoutEffect(() => {
+    if (formLocalRef.current && typeof reactValue === 'string') {
+      if (reactValue !== formLocalRef.current.value) {
+        model.events.setSelectedIds(reactValue ? reactValue.split(', ') : []);
       }
-    }, [reactValue, formLocalRef, model.events]);
-
-    // useImperativeHandle allows us to modify the `ref` before it is sent to the application,
-    // but after it is defined. We can add value watches, and redirect methods here.
-    React.useImperativeHandle(
-      formElementRef,
-      () => {
-        if (formLocalRef.current && userLocalRef.current) {
-          const formElement = formLocalRef.current;
-          const userElement = userLocalRef.current;
-
-          // Hook into the DOM `value` property of the form input element and update the model
-          // accordingly
-          Object.defineProperty(formElement, 'value', {
-            get() {
-              const value = Object.getOwnPropertyDescriptor(
-                Object.getPrototypeOf(formElement),
-                'value'
-              )?.get?.call(formElement);
-              return value;
-            },
-            set(value: string) {
-              if (
-                formElement &&
-                value !==
-                  (modelStateRef.current.selectedIds === 'all'
-                    ? []
-                    : modelStateRef.current.selectedIds
-                  ).join(', ')
-              ) {
-                model.events.setSelectedIds(value ? value.split(', ') : []);
-              }
-            },
-          });
-
-          // forward calls to `.focus()` and `.blur()` to the user input
-          // https://github.com/testing-library/user-event/pull/1252 doesn't allow writable, but
-          // allows reconfiguration, so we use `Object.defineProperty`.
-          Object.defineProperty(formElement, 'focus', {
-            configurable: true,
-            writable: true,
-            value: (options: FocusOptions) => userElement!.focus(options),
-          });
-
-          Object.defineProperty(formElement, 'blur', {
-            configurable: true,
-            writable: true,
-            value: () => userElement!.blur(),
-          });
-          return formElement;
-        }
-        return formLocalRef.current!;
-      },
-      [formLocalRef, userLocalRef, model.events]
-    );
-
-    // sync model selection state with inputs
-    React.useLayoutEffect(() => {
-      if (userLocalRef.current) {
-        const userValue =
-          model.state.items.length === 0
-            ? ''
-            : (model.state.selectedIds === 'all'
+    }
+  }, [reactValue, formLocalRef, model.events]);
+
+  // useImperativeHandle allows us to modify the `ref` before it is sent to the application,
+  // but after it is defined. We can add value watches, and redirect methods here.
+  React.useImperativeHandle(formElementRef, () => {
+    if (formLocalRef.current && userLocalRef.current) {
+      const formElement = formLocalRef.current;
+      const userElement = userLocalRef.current;
+
+      // Hook into the DOM `value` property of the form input element and update the model
+      // accordingly
+      Object.defineProperty(formElement, 'value', {
+        get() {
+          const value = Object.getOwnPropertyDescriptor(
+            Object.getPrototypeOf(formElement),
+            'value'
+          )?.get?.call(formElement);
+          return value;
+        },
+        set(value: string) {
+          if (
+            formElement &&
+            value !==
+              (modelStateRef.current.selectedIds === 'all'
                 ? []
-                : model.state.selectedIds
-                    .map(id =>
-                      modelNavigationRef.current.getItem(id, {state: modelStateRef.current})
-                    )
-                    .filter(onlyDefined)
-                    .map(item => item.textValue)
-              ).join(', ');
-
-        if (userValue !== userLocalRef.current.value) {
-          dispatchInputEvent(userLocalRef.current, userValue);
-        }
+                : modelStateRef.current.selectedIds
+              ).join(', ')
+          ) {
+            model.events.setSelectedIds(value ? value.split(', ') : []);
+          }
+        },
+      });
+
+      // forward calls to `.focus()` and `.blur()` to the user input
+      // https://github.com/testing-library/user-event/pull/1252 doesn't allow writable, but
+      // allows reconfiguration, so we use `Object.defineProperty`.
+      Object.defineProperty(formElement, 'focus', {
+        configurable: true,
+        writable: true,
+        value: (options: FocusOptions) => userElement!.focus(options),
+      });
+
+      Object.defineProperty(formElement, 'blur', {
+        configurable: true,
+        writable: true,
+        value: () => userElement!.blur(),
+      });
+      return formElement;
+    }
+    return formLocalRef.current!;
+  }, [formLocalRef, userLocalRef, model.events]);
+
+  // sync model selection state with inputs
+  React.useLayoutEffect(() => {
+    if (userLocalRef.current) {
+      const userValue =
+        model.state.items.length === 0
+          ? ''
+          : (model.state.selectedIds === 'all'
+              ? []
+              : model.state.selectedIds
+                  .map(id => modelNavigationRef.current.getItem(id, {state: modelStateRef.current}))
+                  .filter(onlyDefined)
+                  .map(item => item.textValue)
+            ).join(', ');
+
+      if (userValue !== userLocalRef.current.value) {
+        dispatchInputEvent(userLocalRef.current, userValue);
       }
+    }
 
-      if (formLocalRef.current) {
-        const formValue = (model.state.selectedIds === 'all' ? [] : model.state.selectedIds).join(
-          ', '
-        );
+    if (formLocalRef.current) {
+      const formValue = (model.state.selectedIds === 'all' ? [] : model.state.selectedIds).join(
+        ', '
+      );
 
-        if (formValue !== formLocalRef.current.value) {
-          dispatchInputEvent(formLocalRef.current, formValue);
-        }
+      if (formValue !== formLocalRef.current.value) {
+        dispatchInputEvent(formLocalRef.current, formValue);
       }
-    }, [model.state.selectedIds, model.state.items, formLocalRef, userLocalRef]);
+    }
+  }, [model.state.selectedIds, model.state.items, formLocalRef, userLocalRef]);
 
-    // The props here will go to the user input.
-    return {
-      ref: userElementRef,
-      form: '', // We don't want the user input to be part of the form [elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements)
-      value: null,
-      onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
-        model.onFilterChange?.(event);
-        return null; // Prevent further `onChange` callbacks from firing
-      },
+  // The props here will go to the user input.
+  return {
+    ref: userElementRef,
+    form: '', // We don't want the user input to be part of the form [elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements)
+    value: null,
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
+      model.onFilterChange?.(event);
+      return null; // Prevent further `onChange` callbacks from firing
+    },
 
-      name: null,
+    name: null,
+    disabled,
+    /**
+     * These props should be spread onto the form input.
+     */
+    formInputProps: {
       disabled,
-      /**
-       * These props should be spread onto the form input.
-       */
-      formInputProps: {
-        disabled,
-        tabIndex: -1,
-        'aria-hidden': true,
-        ref: formElementRef,
-        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
-          onChange?.(event);
-          model.onChange?.(event);
-        },
-        name,
+      tabIndex: -1,
+      'aria-hidden': true,
+      ref: formElementRef,
+      onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
+        onChange?.(event);
+        model.onChange?.(event);
       },
-    };
-  }
-);
+      name,
+    },
+  };
+});

package/combobox/lib/hooks/useComboboxInputOpenWithArrowKeys.ts

@@ -14,7 +14,7 @@ export const useComboboxInputOpenWithArrowKeys = createElemPropsHook(useCombobox
         (event.key === 'ArrowUp' && model.state.visibility !== 'visible')
       ) {
         model.events.show(event);
-        model.events.setWidth(event.currentTarget.clientWidth);
+        model.events.setWidth(event.currentTarget.getBoundingClientRect().width);
       }
     },
   };

package/combobox/lib/hooks/useComboboxKeyboardTypeAhead.ts

@@ -1,6 +1,8 @@
 import React from 'react';
-import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {getCursor} from '@workday/canvas-kit-react/collection';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {useComboboxModel} from './useComboboxModel';
 
 /**

package/combobox/lib/hooks/useComboboxListKeyboardHandler.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {keyboardEventToCursorEvents} from '@workday/canvas-kit-react/collection';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 
 import {useComboboxModel} from './useComboboxModel';
 

package/combobox/lib/hooks/useComboboxLoader.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {useListLoader} from '@workday/canvas-kit-react/collection';
+
 import {useComboboxModel} from './useComboboxModel';
 
 const useDebounce = () => {
@@ -11,7 +12,6 @@ const useDebounce = () => {
       // We want to clear any timeout on unload. We disable the ESLint rule because this is actually
       // what we want
 
-      // eslint-disable-next-line react-hooks/exhaustive-deps
       clearTimeout(debounceTimer.current);
     };
   }, []);

package/combobox/lib/hooks/useComboboxModel.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {createModelHook} from '@workday/canvas-kit-react/common';
 import {useMenuModel} from '@workday/canvas-kit-react/menu';
 

package/combobox/lib/hooks/useComboboxMoveCursorToSelected.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {useComboboxModel} from './useComboboxModel';
 
 /**

package/combobox/lib/hooks/useComboboxResetCursorToSelected.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {useComboboxModel} from './useComboboxModel';
 
 /**
@@ -12,7 +14,6 @@ export const useComboboxResetCursorToSelected = createElemPropsHook(useComboboxM
     if (!visible && model.state.selectedIds.length) {
       model.events.goTo({id: model.state.selectedIds[0]});
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible, model.events, model.state.selectedIds]);
   return {};
 });

package/combobox/lib/hooks/useSetPopupWidth.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {useComboboxModel} from './useComboboxModel';
 
 /**
@@ -9,7 +11,7 @@ export const useSetPopupWidth = createElemPropsHook(useComboboxModel)(model => {
   const visible = model.state.visibility !== 'hidden';
   React.useLayoutEffect(() => {
     if (visible) {
-      model.events.setWidth(model.state.targetRef.current?.clientWidth || 0);
+      model.events.setWidth(model.state.targetRef.current?.getBoundingClientRect().width || 0);
     }
   }, [visible, model.events, model.state.targetRef]);
   return {};

package/common/index.ts

@@ -1,12 +1,11 @@
 export * from './lib/parts';
 export * from './lib/types';
-export * from './lib/genericStyles';
 export * from './lib/theming';
 export * from './lib/styles';
 export * from './lib/utils';
+export * from './lib/genericStyles';
 export * from './lib/AccessibleHide';
 export * from './lib/AriaLiveRegion';
 export * from './lib/CanvasProvider';
 export * from './lib/EllipsisText';
-export * from './lib/forwardFitTokens';
 export * from './lib/responsive/useResponsiveContainerStyles';

package/common/lib/AccessibleHide.tsx

@@ -1,4 +1,5 @@
-import {createStyles, CSProps, handleCsProp} from '@workday/canvas-kit-styling';
+import {CSProps, createStyles, handleCsProp} from '@workday/canvas-kit-styling';
+
 import {createComponent} from './utils/components';
 
 /**

package/common/lib/AriaLiveRegion.tsx

@@ -1,5 +1,6 @@
+import {CSProps, handleCsProp} from '@workday/canvas-kit-styling';
+
 import {createComponent} from './utils/components';
-import {handleCsProp, CSProps} from '@workday/canvas-kit-styling';
 
 export interface AriaLiveRegionProps extends CSProps {
   /**