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

package/combobox/lib/hooks/useComboboxKeyboardTypeAhead.ts

@@ -0,0 +1,127 @@
+import React from 'react';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useComboboxModel} from './useComboboxModel';
+
+/**
+ * `useComboboxKeyboardTypeAhead` handles type-ahead. It will try and find a matching item in the list. It also returns the keys types so far.
+ * This hook is best used when composing hooks and in conjunction with `useComboboxInput`.
+ *
+ * ```tsx
+ * // Example for a `Select` input
+ * export const useSelectInput = composeHooks(
+ * createElemPropsHook(useComboboxModel)((model, ref, elemProps: {keySofar?: string} = {}) => {
+ *  return {
+ *    onKeyDown(event: React.KeyboardEvent) {
+ *     // onKeyDown logic ...
+ *    },
+ *  } as const;
+ * }),
+ * useComboboxKeyboardTypeAhead,
+ * useComboboxInput
+ * );
+ * ```
+ */
+export const useComboboxKeyboardTypeAhead = createElemPropsHook(useComboboxModel)(model => {
+  const keySofar = React.useRef('');
+  const timer = React.useRef<ReturnType<typeof setTimeout>>();
+  const [keyTypedSofar, setKeyTypedSofar] = React.useState(keySofar.current);
+
+  const startClearKeysSoFarTimer = () => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    timer.current = setTimeout(() => {
+      keySofar.current = '';
+      setKeyTypedSofar(keySofar.current);
+    }, 500);
+  };
+
+  // Based on the the key typed, this will try and find an index in the array where it matches the string
+  // so if a user types `de` it will try and find an index in the array whose id matches `de` like denver
+  const getIndexByStartString = (
+    startIndex: number,
+    startString: string,
+    endIndex: number = model.state.items.length,
+    ignoreDisabled: boolean = true
+  ): number => {
+    for (let i = startIndex; i < endIndex; i++) {
+      const label = model.state.items[i].textValue.toLowerCase();
+      if (
+        label.startsWith(startString.toLowerCase()) &&
+        (!ignoreDisabled ||
+          (ignoreDisabled && !model.state.nonInteractiveIds.includes(model.state.items[i].id)))
+      ) {
+        return i;
+      }
+    }
+    return -1;
+  };
+
+  const currentItem = model.navigation.getItem(model.state.cursorId, model);
+  const cursorFocusedIndex = currentItem.index;
+
+  const handleKeyboardTypeAhead = (key: string, numOptions: number) => {
+    // If the starting point is beyond the list of options, reset it
+    // to the beginning of the list
+    const startNumber = keySofar.current.length === 0 ? cursorFocusedIndex + 1 : cursorFocusedIndex;
+
+    const start = startNumber === numOptions ? 0 : startNumber;
+
+    // Keeps track of the current key types and adds to it
+    // if you type `de` vs `d` for denver
+    keySofar.current += key;
+    setKeyTypedSofar(keySofar.current);
+    startClearKeysSoFarTimer();
+
+    // First, look for a match from start to end
+    let matchIndex = getIndexByStartString(start, keySofar.current);
+    getIndexByStartString(start, keySofar.current);
+
+    // If a match isn't found between start and end, wrap the search
+    // around and search again from the beginning (0) to start
+    if (matchIndex === -1) {
+      matchIndex = getIndexByStartString(0, keySofar.current, start);
+    }
+
+    // A match was found...
+    if (matchIndex > -1) {
+      model.events.goTo({id: model.state.items[matchIndex].id});
+      if (model.state.visibility === 'hidden') {
+        // If the menu is closed, fire the change event
+        // go to that item and select based on its id
+        model.events.select({id: model.state.items[matchIndex].id});
+      }
+    }
+  };
+
+  return {
+    onKeyDown(event: React.KeyboardEvent) {
+      // Call type ahead excluding backspace
+      if (event.key.length === 1 && event.key.match(/\S/)) {
+        handleKeyboardTypeAhead(event.key, model.state.items.length);
+      }
+
+      // If spacebar is typed
+      if (
+        (event.key === 'Spacebar' || event.key === ' ') &&
+        model.state.visibility === 'visible' &&
+        keySofar.current !== ''
+      ) {
+        // If the user is in the middle of typing a string, treat
+        // space key as type-ahead rather than option selection
+        handleKeyboardTypeAhead(' ', model.state.items.length);
+      }
+
+      if (
+        (event.key === 'Spacebar' || event.key === ' ') &&
+        model.state.visibility === 'hidden' &&
+        keySofar.current !== ''
+      ) {
+        // If the user is in the middle of typing a string, treat
+        // space key as type-ahead rather than option selection
+        handleKeyboardTypeAhead(' ', model.state.items.length);
+      }
+    },
+    keySofar: keyTypedSofar,
+  };
+});

package/combobox/lib/hooks/useComboboxListKeyboardHandler.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import {createElemPropsHook, useIsRTL} from '@workday/canvas-kit-react/common';
+import {keyboardEventToCursorEvents} from '@workday/canvas-kit-react/collection';
+
+import {useComboboxModel} from './index';
+
+/**
+ * `useComboboxListKeyboardHandler` handle calling keyboard events like ArrowUp and ArrowDown only when the menu is visible.
+ */
+export const useComboboxListKeyboardHandler = createElemPropsHook(useComboboxModel)(model => {
+  const isRTL = useIsRTL();
+
+  return {
+    onKeyDown(event: React.KeyboardEvent) {
+      if (model.state.visibility === 'visible') {
+        const handled = keyboardEventToCursorEvents(event, model, isRTL);
+        if (handled) {
+          event.preventDefault();
+        }
+      }
+    },
+  };
+});

package/combobox/lib/{useComboboxModel.tsx → hooks/useComboboxModel.tsx}

@@ -43,21 +43,25 @@ export const useComboboxModel = createModelHook({
   defaultConfig: {
     ...useInputModel.defaultConfig,
     ...useMenuModel.defaultConfig,
+    shouldVirtualize: true,
   },
+
   requiredConfig: {
     ...useInputModel.requiredConfig,
     ...useMenuModel.requiredConfig,
   },
 })(config => {
   const input = useInputModel(config);
+
   const menu = useMenuModel(
     useMenuModel.mergeConfig(config, {
-      shouldVirtualize: true,
       onSelect({id}) {
-        dispatchInputEvent(menu.state.targetRef.current, id);
+        const textValue = menu.navigation.getItem(id, menu).textValue || id;
+        dispatchInputEvent(menu.state.targetRef.current, textValue);
       },
     })
   );
+
   const [width, setWidth] = React.useState(0);
 
   const state = {

package/combobox/lib/hooks/useComboboxMoveCursorToSelected.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useComboboxModel} from './useComboboxModel';
+
+/**
+ * If there is nothing selected, move cursor to the first item, otherwise, move the cursor to the selected item
+ */
+export const useComboboxMoveCursorToSelected = createElemPropsHook(useComboboxModel)(model => {
+  React.useLayoutEffect(() => {
+    const cursorItemId = model.state.items.find(item => item.id === model.state.cursorId)?.id;
+    // 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 && model.state.items.length && !cursorItemId) {
+      model.events.goTo({id: model.state.items[0].id});
+    } else if (model.state.selectedIds.length && !cursorItemId) {
+      // If the user wants an item selected by default by passing `initialSelectedId` we select that item
+      model.events.goTo({id: model.state.selectedIds[0]});
+    }
+  }, [
+    model.state.selectedIds,
+    model.events,
+    model.state.items,
+    model.state.cursorId,
+    model.state.visibility,
+  ]);
+
+  return {};
+});

package/combobox/lib/hooks/useComboboxResetCursorToSelected.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useComboboxModel} from './useComboboxModel';
+
+/**
+ * Reset the cursor to the selected item when the Menu is closed
+ */
+export const useComboboxResetCursorToSelected = createElemPropsHook(useComboboxModel)(model => {
+  const visible = model.state.visibility !== 'hidden';
+  React.useEffect(() => {
+    // when closed, the cursor should reset to the selected item if something is selected
+    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

@@ -0,0 +1,16 @@
+import React from 'react';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useComboboxModel} from './useComboboxModel';
+
+/**
+ * Sets the width of the Menu to the target element when the menu is visible
+ */
+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);
+    }
+  }, [visible, model.events, model.state.targetRef]);
+  return {};
+});