@basic-ui/core 0.0.54 → 0.0.56

package/src/ComboBox/hooks.tsx

@@ -1,451 +1,448 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-/* eslint-disable default-case */
-import type { KeyboardEvent, MutableRefObject } from 'react';
-import { useEffect } from 'react';
-
-import type {
-  StateChart as GenericStateChart,
-  StateMachineState,
-} from '../hooks/useReducerMachine';
-import { getCircularIndex } from '../utils/get-circular-index';
-import { useComboBoxContext } from './context';
-import { scopeQuery } from './scopeQuery';
-
-////////////////////////////////////////////////////////////////////////////////
-// States
-
-// Nothing going on, waiting for the user to type or use the arrow keys
-export const IDLE = 'IDLE';
-
-// The component is suggesting options as the user types
-const SUGGESTING = 'SUGGESTING';
-
-// The user is using the keyboard to navigate the list, not typing
-export const NAVIGATING = 'NAVIGATING';
-
-export type StateTypes = typeof IDLE | typeof SUGGESTING | typeof NAVIGATING;
-
-////////////////////////////////////////////////////////////////////////////////
-// Actions:
-
-// Used to sync the state with controlled state, right after mounting
-export const INIT = 'INIT';
-
-// User cleared the value w/ backspace, but input still has focus
-export const CLEAR = 'CLEAR';
-
-// User cleared the value w/ backspace, but input still has focus
-export const CLEAR_SELECTION = 'CLEAR_SELECTION';
-
-// User is typing
-export const CHANGE = 'CHANGE';
-
-// User is navigating w/ the keyboard
-export const NAVIGATE = 'NAVIGATE';
-
-// User can be navigating with keyboard and then click instead, we want the
-// value from the click, not the current nav item
-const SELECT_WITH_KEYBOARD = 'SELECT_WITH_KEYBOARD';
-export const SELECT_WITH_CLICK = 'SELECT_WITH_CLICK';
-
-// Pretty self-explanatory, user can hit escape or blur to close the popover
-const ESCAPE = 'ESCAPE';
-const BLUR = 'BLUR';
-
-export const FOCUS = 'FOCUS';
-
-export const OPEN_WITH_BUTTON = 'OPEN_WITH_BUTTON';
-
-export const CLOSE_WITH_BUTTON = 'CLOSE_WITH_BUTTON';
-
-export type ActionTypes =
-  | typeof CLEAR
-  | typeof CLEAR_SELECTION
-  | typeof CHANGE
-  | typeof INIT
-  | typeof NAVIGATE
-  | typeof SELECT_WITH_KEYBOARD
-  | typeof SELECT_WITH_CLICK
-  | typeof ESCAPE
-  | typeof BLUR
-  | typeof FOCUS
-  | typeof OPEN_WITH_BUTTON
-  | typeof CLOSE_WITH_BUTTON;
-
-////////////////////////////////////////////////////////////////////////////////
-export const stateChart: GenericStateChart<StateTypes, ActionTypes> = {
-  initial: IDLE,
-  states: {
-    [IDLE]: {
-      on: {
-        [BLUR]: IDLE,
-        [CLEAR]: IDLE,
-        [INIT]: IDLE,
-        [CLEAR_SELECTION]: IDLE,
-        [CHANGE]: SUGGESTING,
-        [FOCUS]: SUGGESTING,
-        [NAVIGATE]: NAVIGATING,
-        [OPEN_WITH_BUTTON]: SUGGESTING,
-      },
-    },
-    [SUGGESTING]: {
-      on: {
-        [CHANGE]: SUGGESTING,
-        [FOCUS]: SUGGESTING,
-        [INIT]: SUGGESTING,
-        [NAVIGATE]: NAVIGATING,
-        [CLEAR]: IDLE,
-        [CLEAR_SELECTION]: SUGGESTING,
-        [ESCAPE]: IDLE,
-        [BLUR]: IDLE,
-        [SELECT_WITH_CLICK]: IDLE,
-        [CLOSE_WITH_BUTTON]: IDLE,
-      },
-    },
-    [NAVIGATING]: {
-      on: {
-        [CHANGE]: SUGGESTING,
-        [FOCUS]: SUGGESTING,
-        [INIT]: NAVIGATING,
-        [CLEAR]: IDLE,
-        [CLEAR_SELECTION]: NAVIGATING,
-        [BLUR]: IDLE,
-        [ESCAPE]: IDLE,
-        [NAVIGATE]: NAVIGATING,
-        [SELECT_WITH_KEYBOARD]: IDLE,
-        [SELECT_WITH_CLICK]: IDLE,
-        [CLOSE_WITH_BUTTON]: IDLE,
-      },
-    },
-  },
-};
-
-export interface ReducerState
-  extends StateMachineState<StateTypes, ActionTypes> {
-  item: string;
-  navigationItem: string;
-  text: string;
-}
-
-interface ActionObject {
-  type: ActionTypes;
-  state: StateTypes;
-  nextState: StateTypes;
-  [rest: string]: any;
-}
-
-export function comboboxReducer(
-  data: Readonly<ReducerState>,
-  action: ActionObject
-): ReducerState {
-  const nextState = {
-    ...data,
-    state: action.nextState,
-    lastActionType: action.type,
-  };
-
-  switch (action.type) {
-    case INIT:
-    case CHANGE:
-      return {
-        ...nextState,
-        text: action.text,
-        navigationItem: '',
-        item: '',
-      };
-    case NAVIGATE:
-    case OPEN_WITH_BUTTON:
-      if (action.persistSelection) {
-        return {
-          ...nextState,
-          navigationItem: data.item,
-        };
-      }
-
-      return {
-        ...nextState,
-        navigationItem: action.item,
-      };
-    case CLEAR_SELECTION:
-      return {
-        ...nextState,
-        navigationItem: '',
-      };
-    case CLEAR:
-      return {
-        ...nextState,
-        text: '',
-        navigationItem: '',
-        item: '',
-      };
-    case BLUR:
-      return {
-        ...nextState,
-        text: action.text,
-        navigationItem: '',
-        item: action.item,
-      };
-    case CLOSE_WITH_BUTTON:
-    case ESCAPE:
-      return {
-        ...nextState,
-        navigationItem: '',
-        item: '',
-      };
-    case SELECT_WITH_CLICK:
-    case SELECT_WITH_KEYBOARD:
-      return {
-        ...nextState,
-        text: action.text,
-        item: action.item,
-        navigationItem: '',
-      };
-    case FOCUS:
-      return {
-        ...nextState,
-        navigationItem: action.item,
-      };
-
-    default:
-      throw new Error(`Unknown action ${action.type}`);
-  }
-}
-
-const visibleStates = [SUGGESTING, NAVIGATING];
-export const isVisible = (state: any) => visibleStates.indexOf(state) >= 0;
-
-////////////////////////////////////////////////////////////////////////////////
-// The rest is all implementation details
-
-// Move focus back to the input if we start navigating w/ the
-// keyboard after focus has moved to any focusable content in
-// the popup.
-export function useFocusManagement(
-  lastActionType: ActionTypes,
-  inputRef: MutableRefObject<HTMLInputElement | null>
-) {
-  // useEffect so that the cursor goes to the end of the input instead
-  // of awkwardly at the beginning, unclear to me why ...
-  useEffect(() => {
-    if (
-      lastActionType === NAVIGATE ||
-      lastActionType === ESCAPE ||
-      lastActionType === SELECT_WITH_CLICK ||
-      lastActionType === OPEN_WITH_BUTTON
-    ) {
-      inputRef.current && inputRef.current.focus();
-    }
-  });
-}
-
-function getNextItem(
-  currentItem: string,
-  key: 'ArrowDown' | 'ArrowUp' | 'PageDown' | 'PageUp' | 'Home' | 'End',
-  optionsItems: HTMLElement[],
-  autocomplete: boolean
-): HTMLElement | null {
-  const jumpToStartOrEnd = key === 'Home' || key === 'End';
-  let incr = 1;
-  switch (key) {
-    case 'PageUp':
-      incr = -10;
-      break;
-    case 'PageDown':
-      incr = 10;
-      break;
-    case 'End':
-    case 'ArrowUp':
-      incr = -1;
-      break;
-    case 'Home':
-    case 'ArrowDown':
-      incr = 1;
-      break;
-  }
-
-  const index =
-    currentItem === ''
-      ? -1
-      : optionsItems.findIndex((n) => String(n.id) === currentItem);
-
-  const optionsLen = optionsItems.length;
-
-  // Nothing selected, either go to start, or end
-  if (index < 0 || jumpToStartOrEnd) {
-    if (incr > 0) {
-      // Go to start
-      return optionsItems[0];
-    } else {
-      // Go to end
-      return optionsItems[optionsLen - 1];
-    }
-  } else if (autocomplete) {
-    const nextIndex = index + incr;
-
-    if (nextIndex < 0 || nextIndex >= optionsLen) {
-      // Next is outside the bounds of list, return nothing selected
-      return null;
-    }
-  }
-
-  // I'm sure it won't be null, we already check optionsLen above
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  return optionsItems[getCircularIndex(index + incr, optionsLen)!];
-}
-
-// We want the same events when the input or the popup have focus (HOW COOL ARE
-// HOOKS BTW?) This is probably the hairiest piece but it's not bad.
-export function useKeyDown() {
-  const {
-    data: { text, navigationItem },
-    onSelect,
-    optionsRef,
-    inputRef,
-    state,
-    transition,
-    autocompletePropRef,
-    clearOnEscapeRef,
-    persistSelectionRef,
-    listScope,
-  } = useComboBoxContext();
-
-  return function handleKeyDown(event: KeyboardEvent<any>) {
-    const optionNodes = listScope.current.queryAllNodes(scopeQuery);
-
-    switch (event.key) {
-      case 'Home':
-      case 'End':
-      case 'PageUp':
-      case 'PageDown':
-      case 'ArrowUp':
-      case 'ArrowDown': {
-        // Don't scroll the page
-        event.preventDefault();
-
-        const optionsLen = optionNodes.length;
-
-        // If the developer didn't render any options, there's no point in
-        // trying to navigate--but seriously what the heck? Give us some
-        // options fam.
-        if (optionsLen === 0) {
-          return;
-        }
-
-        if (state === IDLE) {
-          // Opening a closed list
-          transition(NAVIGATE, {
-            persistSelection: persistSelectionRef.current,
-          });
-        } else {
-          // When autocompletting, we'll not cycle through the list directly
-          const autocomplete = autocompletePropRef.current;
-
-          // Get next selected item
-          const nextItem = getNextItem(
-            navigationItem,
-            event.key,
-            optionNodes,
-            autocomplete
-          );
-
-          if (nextItem !== null) {
-            nextItem.scrollIntoView({ behavior: 'auto', block: 'nearest' });
-            transition(NAVIGATE, {
-              value: optionsRef.current[nextItem.id].text,
-              item: nextItem.id,
-            });
-          } else {
-            transition(NAVIGATE, { value: null, item: '' });
-          }
-        }
-        break;
-      }
-      case 'Escape': {
-        if (state !== IDLE) {
-          transition(ESCAPE);
-        } else if (state === IDLE && text !== '') {
-          if (!inputRef.current || !clearOnEscapeRef.current) {
-            break;
-          }
-
-          // emulate a inputRef change event, might not work in future versions of React
-          const lastValue = inputRef.current.value;
-          inputRef.current.value = '';
-
-          const tracker = (inputRef.current as any)._valueTracker;
-          if (tracker) {
-            tracker.setValue(lastValue);
-          }
-
-          const event = new Event('change', { bubbles: true });
-          inputRef.current.dispatchEvent(event);
-        }
-        break;
-      }
-      case 'Enter': {
-        if (state === NAVIGATING && navigationItem !== '') {
-          const { value: navigationValue, text: navigationText } =
-            optionsRef.current[navigationItem];
-
-          // don't want to submit forms
-          event.preventDefault();
-          onSelect && onSelect(navigationText, navigationItem, navigationValue);
-          transition(SELECT_WITH_KEYBOARD, {
-            text: navigationText,
-            item: navigationItem,
-          });
-        }
-        break;
-      }
-    }
-  };
-}
-
-export function useBlur() {
-  const {
-    data: { navigationItem, text: stateText },
-    transition,
-    optionsRef,
-    popoverRef,
-    inputRef,
-    buttonRef,
-    onSelect,
-    selectOnBlur, // not implemented yet
-  } = useComboBoxContext();
-
-  return function handleBlur() {
-    requestAnimationFrame(() => {
-      // we on want to close only if focus rests outside the combobox
-      if (
-        document.activeElement !== inputRef.current &&
-        document.activeElement !== buttonRef.current &&
-        popoverRef.current
-      ) {
-        if (popoverRef.current.contains(document.activeElement)) {
-          // focus landed inside the combobox, keep it open
-          // in the future, we can make it not close, select, or anything
-          // this way we can have like... checkboxes available in the
-          // menu item, etc.
-        } else {
-          // focus landed outside the combobox, close it.
-          if (!selectOnBlur || navigationItem === '') {
-            // we don't wanna select on blur, or navigationIndex is invalid
-            transition(BLUR, { text: stateText, item: '' });
-          } else {
-            // select the currently selected item
-            const { value: navigationValue, text: navigationText } =
-              optionsRef.current[navigationItem];
-
-            onSelect &&
-              onSelect(navigationText, navigationItem, navigationValue);
-
-            transition(BLUR, {
-              text: navigationText,
-              item: navigationItem,
-            });
-          }
-        }
-      }
-    });
-  };
-}
+import type { KeyboardEvent, MutableRefObject } from 'react';
+import { useEffect } from 'react';
+
+import type {
+  StateChart as GenericStateChart,
+  StateMachineState,
+} from '../hooks/useReducerMachine';
+import { getCircularIndex } from '../utils/get-circular-index';
+import { useComboBoxContext } from './context';
+import { scopeQuery } from './scopeQuery';
+
+////////////////////////////////////////////////////////////////////////////////
+// States
+
+// Nothing going on, waiting for the user to type or use the arrow keys
+export const IDLE = 'IDLE';
+
+// The component is suggesting options as the user types
+const SUGGESTING = 'SUGGESTING';
+
+// The user is using the keyboard to navigate the list, not typing
+export const NAVIGATING = 'NAVIGATING';
+
+export type StateTypes = typeof IDLE | typeof SUGGESTING | typeof NAVIGATING;
+
+////////////////////////////////////////////////////////////////////////////////
+// Actions:
+
+// Used to sync the state with controlled state, right after mounting
+export const INIT = 'INIT';
+
+// User cleared the value w/ backspace, but input still has focus
+export const CLEAR = 'CLEAR';
+
+// User cleared the value w/ backspace, but input still has focus
+export const CLEAR_SELECTION = 'CLEAR_SELECTION';
+
+// User is typing
+export const CHANGE = 'CHANGE';
+
+// User is navigating w/ the keyboard
+export const NAVIGATE = 'NAVIGATE';
+
+// User can be navigating with keyboard and then click instead, we want the
+// value from the click, not the current nav item
+const SELECT_WITH_KEYBOARD = 'SELECT_WITH_KEYBOARD';
+export const SELECT_WITH_CLICK = 'SELECT_WITH_CLICK';
+
+// Pretty self-explanatory, user can hit escape or blur to close the popover
+const ESCAPE = 'ESCAPE';
+const BLUR = 'BLUR';
+
+export const FOCUS = 'FOCUS';
+
+export const OPEN_WITH_BUTTON = 'OPEN_WITH_BUTTON';
+
+export const CLOSE_WITH_BUTTON = 'CLOSE_WITH_BUTTON';
+
+export type ActionTypes =
+  | typeof CLEAR
+  | typeof CLEAR_SELECTION
+  | typeof CHANGE
+  | typeof INIT
+  | typeof NAVIGATE
+  | typeof SELECT_WITH_KEYBOARD
+  | typeof SELECT_WITH_CLICK
+  | typeof ESCAPE
+  | typeof BLUR
+  | typeof FOCUS
+  | typeof OPEN_WITH_BUTTON
+  | typeof CLOSE_WITH_BUTTON;
+
+////////////////////////////////////////////////////////////////////////////////
+export const stateChart: GenericStateChart<StateTypes, ActionTypes> = {
+  initial: IDLE,
+  states: {
+    [IDLE]: {
+      on: {
+        [BLUR]: IDLE,
+        [CLEAR]: IDLE,
+        [INIT]: IDLE,
+        [CLEAR_SELECTION]: IDLE,
+        [CHANGE]: SUGGESTING,
+        [FOCUS]: SUGGESTING,
+        [NAVIGATE]: NAVIGATING,
+        [OPEN_WITH_BUTTON]: SUGGESTING,
+      },
+    },
+    [SUGGESTING]: {
+      on: {
+        [CHANGE]: SUGGESTING,
+        [FOCUS]: SUGGESTING,
+        [INIT]: SUGGESTING,
+        [NAVIGATE]: NAVIGATING,
+        [CLEAR]: IDLE,
+        [CLEAR_SELECTION]: SUGGESTING,
+        [ESCAPE]: IDLE,
+        [BLUR]: IDLE,
+        [SELECT_WITH_CLICK]: IDLE,
+        [CLOSE_WITH_BUTTON]: IDLE,
+      },
+    },
+    [NAVIGATING]: {
+      on: {
+        [CHANGE]: SUGGESTING,
+        [FOCUS]: SUGGESTING,
+        [INIT]: NAVIGATING,
+        [CLEAR]: IDLE,
+        [CLEAR_SELECTION]: NAVIGATING,
+        [BLUR]: IDLE,
+        [ESCAPE]: IDLE,
+        [NAVIGATE]: NAVIGATING,
+        [SELECT_WITH_KEYBOARD]: IDLE,
+        [SELECT_WITH_CLICK]: IDLE,
+        [CLOSE_WITH_BUTTON]: IDLE,
+      },
+    },
+  },
+};
+
+export interface ReducerState
+  extends StateMachineState<StateTypes, ActionTypes> {
+  item: string;
+  navigationItem: string;
+  text: string;
+}
+
+interface ActionObject {
+  type: ActionTypes;
+  state: StateTypes;
+  nextState: StateTypes;
+  [rest: string]: any;
+}
+
+export function comboboxReducer(
+  data: Readonly<ReducerState>,
+  action: ActionObject
+): ReducerState {
+  const nextState = {
+    ...data,
+    state: action.nextState,
+    lastActionType: action.type,
+  };
+
+  switch (action.type) {
+    case INIT:
+    case CHANGE:
+      return {
+        ...nextState,
+        text: action.text,
+        navigationItem: '',
+        item: '',
+      };
+    case NAVIGATE:
+    case OPEN_WITH_BUTTON:
+      if (action.persistSelection) {
+        return {
+          ...nextState,
+          navigationItem: data.item,
+        };
+      }
+
+      return {
+        ...nextState,
+        navigationItem: action.item,
+      };
+    case CLEAR_SELECTION:
+      return {
+        ...nextState,
+        navigationItem: '',
+      };
+    case CLEAR:
+      return {
+        ...nextState,
+        text: '',
+        navigationItem: '',
+        item: '',
+      };
+    case BLUR:
+      return {
+        ...nextState,
+        text: action.text,
+        navigationItem: '',
+        item: action.item,
+      };
+    case CLOSE_WITH_BUTTON:
+    case ESCAPE:
+      return {
+        ...nextState,
+        navigationItem: '',
+        item: '',
+      };
+    case SELECT_WITH_CLICK:
+    case SELECT_WITH_KEYBOARD:
+      return {
+        ...nextState,
+        text: action.text,
+        item: action.item,
+        navigationItem: '',
+      };
+    case FOCUS:
+      return {
+        ...nextState,
+        navigationItem: action.item,
+      };
+
+    default:
+      throw new Error(`Unknown action ${action.type}`);
+  }
+}
+
+const visibleStates = [SUGGESTING, NAVIGATING];
+export const isVisible = (state: any) => visibleStates.indexOf(state) >= 0;
+
+////////////////////////////////////////////////////////////////////////////////
+// The rest is all implementation details
+
+// Move focus back to the input if we start navigating w/ the
+// keyboard after focus has moved to any focusable content in
+// the popup.
+export function useFocusManagement(
+  lastActionType: ActionTypes,
+  inputRef: MutableRefObject<HTMLInputElement | null>
+) {
+  // useEffect so that the cursor goes to the end of the input instead
+  // of awkwardly at the beginning, unclear to me why ...
+  useEffect(() => {
+    if (
+      lastActionType === NAVIGATE ||
+      lastActionType === ESCAPE ||
+      lastActionType === SELECT_WITH_CLICK ||
+      lastActionType === OPEN_WITH_BUTTON
+    ) {
+      inputRef.current && inputRef.current.focus();
+    }
+  });
+}
+
+function getNextItem(
+  currentItem: string,
+  key: 'ArrowDown' | 'ArrowUp' | 'PageDown' | 'PageUp' | 'Home' | 'End',
+  optionsItems: HTMLElement[],
+  autocomplete: boolean
+): HTMLElement | null {
+  const jumpToStartOrEnd = key === 'Home' || key === 'End';
+  let incr = 1;
+  switch (key) {
+    case 'PageUp':
+      incr = -10;
+      break;
+    case 'PageDown':
+      incr = 10;
+      break;
+    case 'End':
+    case 'ArrowUp':
+      incr = -1;
+      break;
+    case 'Home':
+    case 'ArrowDown':
+      incr = 1;
+      break;
+  }
+
+  const index =
+    currentItem === ''
+      ? -1
+      : optionsItems.findIndex((n) => String(n.id) === currentItem);
+
+  const optionsLen = optionsItems.length;
+
+  // Nothing selected, either go to start, or end
+  if (index < 0 || jumpToStartOrEnd) {
+    if (incr > 0) {
+      // Go to start
+      return optionsItems[0];
+    } else {
+      // Go to end
+      return optionsItems[optionsLen - 1];
+    }
+  } else if (autocomplete) {
+    const nextIndex = index + incr;
+
+    if (nextIndex < 0 || nextIndex >= optionsLen) {
+      // Next is outside the bounds of list, return nothing selected
+      return null;
+    }
+  }
+
+  // I'm sure it won't be null, we already check optionsLen above
+  return optionsItems[getCircularIndex(index + incr, optionsLen)!];
+}
+
+// We want the same events when the input or the popup have focus (HOW COOL ARE
+// HOOKS BTW?) This is probably the hairiest piece but it's not bad.
+export function useKeyDown() {
+  const {
+    data: { text, navigationItem },
+    onSelect,
+    optionsRef,
+    inputRef,
+    state,
+    transition,
+    autocompletePropRef,
+    clearOnEscapeRef,
+    persistSelectionRef,
+    listScope,
+  } = useComboBoxContext();
+
+  return function handleKeyDown(event: KeyboardEvent<any>) {
+    const optionNodes = listScope.current.queryAllNodes(scopeQuery);
+
+    switch (event.key) {
+      case 'Home':
+      case 'End':
+      case 'PageUp':
+      case 'PageDown':
+      case 'ArrowUp':
+      case 'ArrowDown': {
+        // Don't scroll the page
+        event.preventDefault();
+
+        const optionsLen = optionNodes.length;
+
+        // If the developer didn't render any options, there's no point in
+        // trying to navigate--but seriously what the heck? Give us some
+        // options fam.
+        if (optionsLen === 0) {
+          return;
+        }
+
+        if (state === IDLE) {
+          // Opening a closed list
+          transition(NAVIGATE, {
+            persistSelection: persistSelectionRef.current,
+          });
+        } else {
+          // When autocompletting, we'll not cycle through the list directly
+          const autocomplete = autocompletePropRef.current;
+
+          // Get next selected item
+          const nextItem = getNextItem(
+            navigationItem,
+            event.key,
+            optionNodes,
+            autocomplete
+          );
+
+          if (nextItem !== null) {
+            nextItem.scrollIntoView({ behavior: 'auto', block: 'nearest' });
+            transition(NAVIGATE, {
+              value: optionsRef.current[nextItem.id].text,
+              item: nextItem.id,
+            });
+          } else {
+            transition(NAVIGATE, { value: null, item: '' });
+          }
+        }
+        break;
+      }
+      case 'Escape': {
+        if (state !== IDLE) {
+          transition(ESCAPE);
+        } else if (state === IDLE && text !== '') {
+          if (!inputRef.current || !clearOnEscapeRef.current) {
+            break;
+          }
+
+          // emulate a inputRef change event, might not work in future versions of React
+          const lastValue = inputRef.current.value;
+          inputRef.current.value = '';
+
+          const tracker = (inputRef.current as any)._valueTracker;
+          if (tracker) {
+            tracker.setValue(lastValue);
+          }
+
+          const event = new Event('change', { bubbles: true });
+          inputRef.current.dispatchEvent(event);
+        }
+        break;
+      }
+      case 'Enter': {
+        if (state === NAVIGATING && navigationItem !== '') {
+          const { value: navigationValue, text: navigationText } =
+            optionsRef.current[navigationItem];
+
+          // don't want to submit forms
+          event.preventDefault();
+          onSelect && onSelect(navigationText, navigationItem, navigationValue);
+          transition(SELECT_WITH_KEYBOARD, {
+            text: navigationText,
+            item: navigationItem,
+          });
+        }
+        break;
+      }
+    }
+  };
+}
+
+export function useBlur() {
+  const {
+    data: { navigationItem, text: stateText },
+    transition,
+    optionsRef,
+    popoverRef,
+    inputRef,
+    buttonRef,
+    onSelect,
+    selectOnBlur, // not implemented yet
+  } = useComboBoxContext();
+
+  return function handleBlur() {
+    requestAnimationFrame(() => {
+      // we on want to close only if focus rests outside the combobox
+      if (
+        document.activeElement !== inputRef.current &&
+        document.activeElement !== buttonRef.current &&
+        popoverRef.current
+      ) {
+        if (popoverRef.current.contains(document.activeElement)) {
+          // focus landed inside the combobox, keep it open
+          // in the future, we can make it not close, select, or anything
+          // this way we can have like... checkboxes available in the
+          // menu item, etc.
+        } else {
+          // focus landed outside the combobox, close it.
+          if (!selectOnBlur || navigationItem === '') {
+            // we don't wanna select on blur, or navigationIndex is invalid
+            transition(BLUR, { text: stateText, item: '' });
+          } else {
+            // select the currently selected item
+            const { value: navigationValue, text: navigationText } =
+              optionsRef.current[navigationItem];
+
+            onSelect &&
+              onSelect(navigationText, navigationItem, navigationValue);
+
+            transition(BLUR, {
+              text: navigationText,
+              item: navigationItem,
+            });
+          }
+        }
+      }
+    });
+  };
+}