fix: Clean up hooks

manuel.carrera · manuel.carrera · commit bc222b295cbd · 2023-09-06T16:07:04.000-06:00
diff --git a/modules/react/combobox/index.ts b/modules/react/combobox/index.ts
@@ -3,6 +3,11 @@ 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 as useComboboxOpenWithArrowKeys,
+  useScrollToIndexOnClick,
+  useSetPopupWidth,
+  useMoveCursorToIndex,
+} from './lib/hooks';
diff --git a/modules/react/combobox/lib/Combobox.tsx b/modules/react/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 {
diff --git a/modules/react/combobox/lib/ComboboxCard.tsx b/modules/react/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> {}
 
diff --git a/modules/react/combobox/lib/ComboboxInput.tsx b/modules/react/combobox/lib/ComboboxInput.tsx
@@ -16,8 +16,12 @@ import {
   keyboardEventToCursorEvents,
 } from '@workday/canvas-kit-react/collection';
 
-import {useComboboxModel} from './useComboboxModel';
-import {useComboboxInputOpenWithArrowKeys} from './useComboboxInputOpenWithArrowKeys';
+import {
+  useComboboxModel,
+  useComboboxInputOpenWithArrowKeys,
+  useMoveCursorToIndex,
+  useSetPopupWidth,
+} from './hooks';
 
 export const useListKeyboardHandler = createElemPropsHook(useComboboxModel)(model => {
   const isRTL = useIsRTL();
@@ -104,6 +108,8 @@ export const useComboboxInput = composeHooks(
       ref: elementRef,
     } as const;
   }),
+  useSetPopupWidth,
+  useMoveCursorToIndex,
   useComboboxInputOpenWithArrowKeys,
   useListActiveDescendant,
   useListKeyboardHandler,
diff --git a/modules/react/combobox/lib/ComboboxMenu.tsx b/modules/react/combobox/lib/ComboboxMenu.tsx
@@ -3,7 +3,7 @@ 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';
diff --git a/modules/react/combobox/lib/ComboboxMenuItem.tsx b/modules/react/combobox/lib/ComboboxMenuItem.tsx
@@ -14,7 +14,7 @@ import {
 } 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;
diff --git a/modules/react/combobox/lib/ComboboxMenuList.tsx b/modules/react/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> {}
 
diff --git a/modules/react/combobox/lib/hooks/index.ts b/modules/react/combobox/lib/hooks/index.ts
@@ -0,0 +1,6 @@
+export * from './useComboboxInputOpenWithArrowKeys';
+export * from './useComboboxLoader';
+export * from './useComboboxModel';
+export * from './useMoveCursorToIndex';
+export * from './useScrollToIndexOnClick';
+export * from './useSetPopupWidth';
diff --git a/modules/react/combobox/lib/hooks/useComboboxInputOpenWithArrowKeys.ts b/modules/react/combobox/lib/hooks/useComboboxInputOpenWithArrowKeys.ts
diff --git a/modules/react/combobox/lib/hooks/useComboboxLoader.ts b/modules/react/combobox/lib/hooks/useComboboxLoader.ts
diff --git a/modules/react/combobox/lib/hooks/useComboboxModel.tsx b/modules/react/combobox/lib/hooks/useComboboxModel.tsx
diff --git a/modules/react/combobox/lib/hooks/useMoveCursorToIndex.tsx b/modules/react/combobox/lib/hooks/useMoveCursorToIndex.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useComboboxModel} from './useComboboxModel';
+
+export const useMoveCursorToIndex = createElemPropsHook(useComboboxModel)(model => {
+  React.useLayoutEffect(() => {
+    // If there is no selected item and items exists we want to set the cursor to the first item in the array
+    if (model.state.selectedIds.length === 0 && model.state.items.length > 0) {
+      model.events.goTo({id: model.state.items[0].id});
+    } else {
+      // If the user wants an item selected by default by passing `initialSelectedId` we select that item
+      if (model.state.selectedIds.length > 0) {
+        const selectedItem = model.state.items.findIndex(
+          (item: {id: string}) => item.id === model.state.selectedIds[0]
+        );
+        model.events.goTo({id: model.state.items[selectedItem].id});
+        model.events.select({id: model.state.items[selectedItem].id});
+      }
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {};
+});
diff --git a/modules/react/combobox/lib/hooks/useScrollToIndexOnClick.ts b/modules/react/combobox/lib/hooks/useScrollToIndexOnClick.ts
@@ -0,0 +1,17 @@
+import React from 'react';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useComboboxModel} from './useComboboxModel';
+
+export const useScrollToIndexOnClick = createElemPropsHook(useComboboxModel)(model => {
+  return {
+    onClick: (event: React.MouseEvent) => {
+      if (model.state.selectedIds.length > 0) {
+        const foundIndex = model.state.items.findIndex(
+          (item: {id: string}) => item.id === model.state.selectedIds[0]
+        );
+        model.events.goTo({id: model.state.items[foundIndex].id});
+        model.state.UNSTABLE_virtual.scrollToIndex(foundIndex);
+      }
+    },
+  };
+});
diff --git a/modules/react/combobox/lib/hooks/useSetPopupWidth.ts b/modules/react/combobox/lib/hooks/useSetPopupWidth.ts
@@ -0,0 +1,12 @@
+import React from 'react';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useComboboxModel} from './useComboboxModel';
+
+export const useSetPopupWidth = createElemPropsHook(useComboboxModel)(model => {
+  React.useLayoutEffect(() => {
+    // If there is no selected item and items exists we want to set the cursor to the first item in the array
+    model.events.setWidth(model.state.targetRef.current?.clientWidth || 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {};
+});
diff --git a/modules/react/select/lib/Select.tsx b/modules/react/select/lib/Select.tsx
@@ -10,10 +10,9 @@ import {Combobox} from '@workday/canvas-kit-react/combobox';
 import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
-import {useSelectModel, useSelectItem} from './hooks';
+import {useSelectModel, useSelectItem, useSelectCard} from './hooks';
 import {useSelectInput} from './hooks/useSelectInput';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {useSelectCard} from './hooks/useSelectCard';
 
 export interface SelectInputProps extends ExtractProps<typeof TextInput> {
   /**
diff --git a/modules/react/select/lib/hooks/index.ts b/modules/react/select/lib/hooks/index.ts
@@ -1,3 +1,4 @@
 export * from './useSelectModel';
 export * from './useSelectItem';
 export * from './useSelectInput';
+export * from './useSelectCard';
diff --git a/modules/react/select/lib/hooks/useSelectInput.ts b/modules/react/select/lib/hooks/useSelectInput.ts
@@ -1,36 +1,18 @@
 import React from 'react';
 import {composeHooks, createElemPropsHook} from '@workday/canvas-kit-react/common';
-import {useComboboxInput} from '@workday/canvas-kit-react/combobox';
+import {useComboboxInput, useScrollToIndexOnClick} from '@workday/canvas-kit-react/combobox';
 import {useSelectModel} from './useSelectModel';
 
 /**
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput}  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(
   useComboboxInput,
+  useScrollToIndexOnClick,
   createElemPropsHook(useSelectModel)((model, ref) => {
     const keySofar = React.useRef('');
     const timer = React.useRef<ReturnType<typeof setTimeout>>();
 
-    React.useLayoutEffect(() => {
-      model.events.setWidth(model.state.targetRef.current?.clientWidth || 0);
-      // If there is no selected item and items exists we want to set the cursor to the first item in the array
-      if (model.state.selectedIds.length === 0 && model.state.items.length > 0) {
-        model.events.goTo({id: model.state.items[0].id});
-      } else {
-        // If the user wants an item selected by default by passing `initialSelectedId` we select that item
-        if (model.state.selectedIds.length > 0) {
-          const selectedItem = model.state.items.findIndex(
-            (item: {id: string}) => item.id === model.state.selectedIds[0]
-          );
-          model.events.goTo({id: model.state.items[selectedItem].id});
-          model.events.select({id: model.state.items[selectedItem].id});
-        }
-      }
-
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
     // Reset after each keystroke to support type ahead
     const startClearKeysSoFarTimer = () => {
       if (timer.current) {
@@ -118,9 +100,8 @@ export const useSelectInput = composeHooks(
         event.preventDefault();
 
         // Select should open if Enter, ArrowUp, ArrowDown and Spacebar is typed
-        const keysToOpenSelect = ['Enter', 'Spacebar', 'ArrowUp', 'ArrowDown'];
         if (
-          keysToOpenSelect.includes(event.key) ||
+          event.key === 'Spacebar' ||
           (event.key === ' ' && model.state.visibility === 'hidden' && keySofar.current === '')
         ) {
           //show the menu when enter is typed
@@ -134,7 +115,7 @@ export const useSelectInput = composeHooks(
 
         // If the dropdown is NOT visible and ArrowUp, ArrowDown, Enter and Spacebar is typed, when the dropdown opens
         // it should go to the current selected item in the dropdown.
-        if (keysToOpenSelect.includes(event.key) || event.key === ' ') {
+        if (event.key === 'Spacebar' || event.key === ' ') {
           if (model.state.visibility === 'hidden') {
             model.events.goTo({id: model.state.items[foundIndex].id});
 
@@ -144,18 +125,6 @@ export const useSelectInput = composeHooks(
           }
         }
 
-        // If the dropdown is visible and Enter is typed, it should select that item
-        // where the cursor is located in the list and close the dropdown
-        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);
-            }
-          }
-        }
-
         // If spacebar is typed
         if (
           (event.key === 'Spacebar' || event.key === ' ') &&
@@ -186,18 +155,6 @@ export const useSelectInput = composeHooks(
           }
         }
       },
-
-      onClick(event: React.MouseEvent) {
-        // When you click the menu and there's a selected item
-        // scroll to that selected item
-        if (model.state.selectedIds.length > 0) {
-          const foundIndex = model.state.items.findIndex(
-            (item: {id: string}) => item.id === model.state.selectedIds[0]
-          );
-          model.events.goTo({id: model.state.items[foundIndex].id});
-          model.state.UNSTABLE_virtual.scrollToIndex(foundIndex);
-        }
-      },
       autoComplete: 'off',
     } as const;
   })
diff --git a/modules/react/select/stories/examples/DisabledOption.tsx b/modules/react/select/stories/examples/DisabledOption.tsx
@@ -27,8 +27,8 @@ export const DisabledOptions = () => {
   return (
     <Flex flexDirection="column">
       <Select items={options} nonInteractiveIds={disabledItems}>
-        <FormField label="Contact" inputId="disabled-option-select">
-          <Select.Input onChange={e => handleChange(e)} id="disabled-option-select" />
+        <FormField label="Contact" inputId="contact-select">
+          <Select.Input onChange={e => handleChange(e)} id="contact-select" />
           <Select.Popper>
             <Select.Card maxHeight="200px">
               <Select.List>
