@workday/canvas-kit-react 11.0.0-alpha.671-next.0 → 11.0.0-alpha.693-next.0

package/select/lib/Select.tsx

@@ -15,9 +15,9 @@ import {useSelectModel} from './hooks/useSelectModel';
 import {useSelectCard} from './hooks/useSelectCard';
 import {useSelectInput} from './hooks/useSelectInput';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {createStyles} from '@workday/canvas-kit-styling';
+import {createStyles, CSProps} from '@workday/canvas-kit-styling';
 
-export interface SelectInputProps extends ExtractProps<typeof TextInput> {
+export interface SelectInputProps extends ExtractProps<typeof TextInput>, CSProps {
   /**
    * The Icon to render at the start of the `input`. Use this prop if your options
    * include icons that you would like to render in the `input` when selected.
@@ -34,11 +34,40 @@ const selectInputStyles = createStyles({
   },
 });
 
+const hiddenSelectStyles = createStyles({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  opacity: 0,
+  cursor: 'default',
+  pointerEvents: 'none',
+});
+
 export const SelectInput = createSubcomponent(TextInput)({
   modelHook: useSelectModel,
   elemPropsHook: useSelectInput,
 })<SelectInputProps>(
-  ({placeholder = 'Choose an option', inputStartIcon, width, ...elemProps}, Element, model) => {
+  (
+    {
+      placeholder = 'Choose an option',
+      inputStartIcon,
+      error,
+      textInputProps,
+      disabled,
+      width,
+      ref,
+      onChange,
+      onInput,
+      onFocus,
+      value,
+      name,
+      ...elemProps
+    },
+    Element,
+    model
+  ) => {
     return (
       <InputGroup width={width} data-width="ck-formfield-width">
         {inputStartIcon && model.state.selectedIds.length > 0 && (
@@ -46,11 +75,29 @@ export const SelectInput = createSubcomponent(TextInput)({
             <SystemIcon icon={inputStartIcon} />
           </InputGroup.InnerStart>
         )}
+        {/* Hidden input to handle ids */}
+        <InputGroup.Input
+          error={error}
+          disabled={disabled}
+          className={hiddenSelectStyles}
+          tabIndex={-1}
+          aria-hidden={true}
+          onChange={onChange}
+          onInput={onInput}
+          value={value}
+          onFocus={onFocus}
+          name={name}
+          ref={ref}
+        />
+        {/* Visual input */}
         <InputGroup.Input
           as={Element}
+          disabled={disabled}
           placeholder={placeholder}
+          error={error}
+          {...textInputProps}
           {...mergeStyles(elemProps, [selectInputStyles])}
-        ></InputGroup.Input>
+        />
         <InputGroup.InnerEnd position="absolute" pointerEvents="none">
           <SystemIcon icon={caretDownSmallIcon} />
         </InputGroup.InnerEnd>

package/select/lib/hooks/useSelectInput.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import {
   composeHooks,
   createElemPropsHook,
-  useForkRef,
   useLocalRef,
   useResizeObserver,
+  dispatchInputEvent,
 } from '@workday/canvas-kit-react/common';
 import {
   useComboboxInput,
@@ -18,56 +18,98 @@ import {useSelectModel} from './useSelectModel';
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput}  and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
  */
 export const useSelectInput = composeHooks(
-  createElemPropsHook(useSelectModel)((model, ref, elemProps: {keySofar?: string} = {}) => {
-    const {localRef, elementRef} = useLocalRef<HTMLInputElement>(
-      useForkRef(ref as React.Ref<HTMLElement>, ref)
-    );
+  createElemPropsHook(useSelectModel)(
+    (model, ref, elemProps: {keySofar?: string; placeholder?: string} = {}) => {
+      const {elementRef} = useLocalRef<HTMLInputElement>(ref as any);
+      const textInputRef = React.useRef<HTMLInputElement>(null);
 
-    useResizeObserver({
-      ref: localRef,
-      onResize: data => {
-        if (model.state.visibility === 'visible') {
-          // Width of the Input + 2px border + 8px padding
-          const calculatedWidth = data.width ? data.width + 42 + 8 : 0;
-          model.events.setWidth(calculatedWidth);
+      // Update the text value of the input
+      const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value = model.navigation.getItem(event.target.value, model)?.textValue;
+        const nativeInputValue = Object.getOwnPropertyDescriptor(
+          Object.getPrototypeOf(textInputRef.current),
+          'value'
+        );
+        if (nativeInputValue && nativeInputValue.set) {
+          nativeInputValue.set.call(textInputRef.current, value);
         }
-      },
-    });
+      };
 
-    return {
-      onKeyDown(event: React.KeyboardEvent) {
-        // Prevent the keys from being enter in the input
-        if (event.key !== 'Tab') {
-          event.preventDefault();
-        }
-
-        // Select should open if Spacebar is typed and nothing has been typed AND the menu is hidden
-        if (
-          event.key === 'Spacebar' ||
-          (event.key === ' ' && model.state.visibility === 'hidden' && elemProps?.keySofar === '')
-        ) {
-          model.events.show();
-        }
-        // if the menu is visible
+      useResizeObserver({
+        ref: textInputRef,
+        onResize: data => {
+          if (model.state.visibility === 'visible') {
+            // Width of the Input + 2px border + 8px padding
+            const calculatedWidth = data.width ? data.width + 42 + 8 : 0;
+            model.events.setWidth(calculatedWidth);
+          }
+        },
+      });
+      // The intent is if items are loaded after the component is rendered, it will update the input with the value.
+      // **Note: We might need to watch for other things or how often we should do this**
+      React.useEffect(() => {
         if (
-          (event.key === 'Spacebar' || event.key === ' ') &&
-          model.state.visibility === 'visible'
+          model.state.inputRef.current &&
+          model.state.items.length > 0 &&
+          model.state.selectedIds[0]
         ) {
-          // If key so far is empty, they're done typing, select the item where the cursor is located and hide the menu
-          if (elemProps?.keySofar === '') {
-            model.events.select({
-              id: model.state.cursorId,
-            });
-            model.events.hide();
+          const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
+          if (model.state.inputRef.current.value !== value) {
+            // Programmatically dispatch an onChange once items are loaded. This account for when a consumer wants an initial selected item and they're loading them from a server.
+            dispatchInputEvent(model.state.inputRef.current, value);
           }
         }
-      },
-      ref: elementRef,
-      autoComplete: 'off',
-      defaultValue:
-        model.navigation.getItem(model.state.selectedIds[0], model).textValue || model.state.value,
-    } as const;
-  }),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [model.state.inputRef, model.state.items.length]);
+
+      return {
+        onKeyDown(event: React.KeyboardEvent) {
+          // Prevent the keys from being enter in the input
+          if (event.key !== 'Tab') {
+            event.preventDefault();
+          }
+
+          // Select should open if Spacebar is typed and nothing has been typed AND the menu is hidden
+          if (
+            event.key === 'Spacebar' ||
+            (event.key === ' ' && model.state.visibility === 'hidden' && elemProps?.keySofar === '')
+          ) {
+            model.events.show();
+          }
+          // if the menu is visible
+          if (
+            (event.key === 'Spacebar' || event.key === ' ') &&
+            model.state.visibility === 'visible'
+          ) {
+            // If key so far is empty, they're done typing, select the item where the cursor is located and hide the menu
+            if (elemProps?.keySofar === '') {
+              model.events.select({
+                id: model.state.cursorId,
+              });
+              model.events.hide();
+            }
+          }
+        },
+        onChange: handleOnChange,
+        autoComplete: 'off',
+        // When the hidden input is focused, we want to show the focus/hover states of the input that sits below it.
+        onFocus() {
+          textInputRef.current?.focus();
+        },
+        textInputProps: {
+          ref: textInputRef,
+        },
+        ref: elementRef,
+
+        // Account for the case where an initial item is selected when the Select first renders
+        defaultValue:
+          model.state.selectedIds.length > 0 && model.state.items.length > 0
+            ? model.navigation.getItem(model.state.selectedIds[0], model).textValue ||
+              model.state.value
+            : undefined,
+      } as const;
+    }
+  ),
   useComboboxKeyboardTypeAhead,
   useComboboxResetCursorToSelected,
   useComboboxMoveCursorToSelected,

package/select/lib/hooks/useSelectModel.tsx

@@ -25,6 +25,5 @@ export const useSelectModel = createModelHook({
   },
   contextOverride: useComboboxModel.Context,
 })(config => {
-  const model = useComboboxModel(config);
-  return model;
+  return useComboboxModel(config);
 });

package/text-input/lib/TextInput.tsx

@@ -38,10 +38,10 @@ const StyledTextInput = styled('input')<
     '&::placeholder': {
       color: inputColors.placeholder,
     },
-    '&:hover': {
+    '&:hover, &.hover': {
       borderColor: inputColors.hoverBorder,
     },
-    '&:focus:not([disabled])': {
+    '&:focus-visible:not([disabled]), &.focus:not([disabled]), &:focus:not([disabled])': {
       borderColor: inputColors.focusBorder,
       boxShadow: `inset 0 0 0 1px ${inputColors.focusBorder}`,
       outline: 'none',
@@ -68,7 +68,7 @@ const StyledTextInput = styled('input')<
     },
   ({theme, error}) => {
     return {
-      '&:focus:not([disabled])': {
+      '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
         borderColor: theme.canvas.palette.common.focusOutline,
         boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
         outline: 'none',

package/tooltip/lib/OverflowTooltip.tsx

@@ -59,9 +59,10 @@ const isOverflowed = (element: Element) => {
   const overflowElement = findEllipsisElement(element) || findOverflowElement(element);
 
   if (overflowElement) {
+    const clientRect = overflowElement.getBoundingClientRect();
     return (
-      overflowElement.scrollWidth > overflowElement.clientWidth ||
-      overflowElement.scrollHeight > overflowElement.clientHeight
+      overflowElement.scrollWidth > clientRect.width ||
+      overflowElement.scrollHeight > clientRect.height
     );
   }
   return false;