@workday/canvas-kit-react 10.0.0-alpha.540-next.0 → 10.0.0-alpha.546-next.0

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
+);

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 {};
+});