@basic-ui/core 0.0.43 → 0.0.46

package/build/esm/ComboBox/hooks.js

@@ -140,32 +140,55 @@ export function useFocusManagement(lastActionType, inputRef) {
   });
 }
 
-function getNextItem(currentItem, incr, optionsItems, autocomplete) {
+function getNextItem(currentItem, key, optionsItems, autocomplete) {
+  var jumpToStartOrEnd = key === 'Home' || key === 'End';
+  var 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;
+  }
+
   var index = currentItem === '' ? -1 : optionsItems.findIndex(function (n) {
     return String(n.id) === currentItem;
   });
   var optionsLen = optionsItems.length; // Nothing selected, either go to start, or end
 
-  if (index < 0) {
+  if (index < 0 || jumpToStartOrEnd) {
     if (incr > 0) {
       // Go to start
-      return optionsItems[0].id;
+      return optionsItems[0];
     } else {
       // Go to end
-      return optionsItems[optionsLen - 1].id;
+      return optionsItems[optionsLen - 1];
     }
   } else if (autocomplete) {
     var nextIndex = index + incr;
 
     if (nextIndex < 0 || nextIndex >= optionsLen) {
       // Next is outside the bounds of list, return nothing selected
-      return '';
+      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)].id;
+  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.
 
@@ -189,6 +212,10 @@ export function useKeyDown() {
     var optionNodes = listScope.current.queryAllNodes(scopeQuery);
 
     switch (event.key) {
+      case 'Home':
+      case 'End':
+      case 'PageUp':
+      case 'PageDown':
       case 'ArrowUp':
       case 'ArrowDown':
         {
@@ -208,17 +235,26 @@ export function useKeyDown() {
               persistSelection: persistSelectionRef.current
             });
           } else {
-            // ArrowUp decreases index, ArrowDown increases
-            var incr = event.key === 'ArrowUp' ? -1 : 1; // When autocompletting, we'll not cycle through the list directly
-
+            // When autocompletting, we'll not cycle through the list directly
             var autocomplete = autocompletePropRef.current; // Get next selected item
 
-            var nextItem = getNextItem(navigationItem, incr, optionNodes, autocomplete);
-            var value = nextItem !== '' ? optionsRef.current[nextItem].text : null;
-            transition(NAVIGATE, {
-              value: value,
-              item: nextItem
-            });
+            var 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;

package/build/esm/ComboBox/hooks.js.map

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

package/build/esm/Menu/MenuItem.js

@@ -45,7 +45,6 @@ export var MenuItem = /*#__PURE__*/forwardRef(function MenuItem(props, forwarded
   var handleKeyDown = function handleKeyDown(e) {
     switch (e.key) {
       case 'Enter':
-      case ' ':
         if (!disabled) {
           handleSelect(e);
         }

package/build/esm/Menu/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","names":["forwardRef","useRef","useId","useMenuContext","useMenuListContext","assignMultipleRefs","wrapEvent","MenuItem","props","forwardedRef","as","Comp","disabled","onSelect","onClick","onKeyDown","otherProps","onChange","buttonRef","navigationItem","onNavigate","ref","itemId","isActive","current","handleSelect","e","focus","preventDefault","handleClick","handleKeyDown","key","undefined"],"sources":["../../../src/Menu/MenuItem.tsx"],"sourcesContent":["import type {\n  LiHTMLAttributes,\n  ElementType,\n  MouseEvent,\n  KeyboardEvent,\n  KeyboardEventHandler,\n} from 'react';\nimport { forwardRef, useRef, useId } from 'react';\n\nimport { useMenuContext, useMenuListContext } from './context';\nimport { assignMultipleRefs } from '../utils/assign-ref';\nimport { wrapEvent } from '../utils';\n\nexport interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  onSelect?: (\n    e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>\n  ) => void;\n  disabled?: boolean;\n}\n\nexport const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(\n  props,\n  forwardedRef\n) {\n  const {\n    as: Comp = 'li',\n    disabled,\n    onSelect,\n    onClick,\n    onKeyDown,\n    ...otherProps\n  } = props;\n  const { onChange, buttonRef } = useMenuContext();\n  const { navigationItem, onNavigate } = useMenuListContext();\n  const ref = useRef<HTMLLIElement>();\n  const itemId = useId();\n\n  const isActive = ref.current && ref.current === navigationItem;\n\n  const handleSelect = wrapEvent(\n    onSelect,\n    (e: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => {\n      onChange && onChange(e, false);\n      buttonRef.current?.focus();\n      e.preventDefault();\n    }\n  );\n\n  const handleClick = (e: MouseEvent<HTMLLIElement>) => {\n    if (!disabled) {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      onNavigate && onNavigate(ref.current!);\n      handleSelect(e);\n    }\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLLIElement> = (e) => {\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        if (!disabled) {\n          handleSelect(e);\n        }\n        break;\n    }\n  };\n\n  return (\n    <Comp\n      ref={assignMultipleRefs(ref, forwardedRef)}\n      id={disabled ? undefined : itemId}\n      data-menu-item=\"\"\n      data-highlighted={isActive ? '' : undefined}\n      role=\"menuitem\"\n      onClick={wrapEvent(onClick, handleClick)}\n      tabIndex={disabled ? -1 : 0}\n      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n      data-disabled={disabled ? '' : undefined}\n      aria-disabled={disabled ? '' : undefined}\n      disabled={disabled}\n      {...otherProps}\n    />\n  );\n});\n"],"mappings":";;;AAOA,SAASA,UAAT,EAAqBC,MAArB,EAA6BC,KAA7B,QAA0C,OAA1C;AAEA,SAASC,cAAT,EAAyBC,kBAAzB,QAAmD,WAAnD;AACA,SAASC,kBAAT,QAAmC,qBAAnC;AACA,SAASC,SAAT,QAA0B,UAA1B;;AAWA,OAAO,IAAMC,QAAQ,gBAAGP,UAAU,CAAqB,SAASO,QAAT,CACrDC,KADqD,EAErDC,YAFqD,EAGrD;EACA,gBAOID,KAPJ,CACEE,EADF;EAAA,IACMC,IADN,0BACa,IADb;EAAA,IAEEC,QAFF,GAOIJ,KAPJ,CAEEI,QAFF;EAAA,IAGEC,QAHF,GAOIL,KAPJ,CAGEK,QAHF;EAAA,IAIEC,OAJF,GAOIN,KAPJ,CAIEM,OAJF;EAAA,IAKEC,SALF,GAOIP,KAPJ,CAKEO,SALF;EAAA,IAMKC,UANL,4BAOIR,KAPJ;;EAQA,sBAAgCL,cAAc,EAA9C;EAAA,IAAQc,QAAR,mBAAQA,QAAR;EAAA,IAAkBC,SAAlB,mBAAkBA,SAAlB;;EACA,0BAAuCd,kBAAkB,EAAzD;EAAA,IAAQe,cAAR,uBAAQA,cAAR;EAAA,IAAwBC,UAAxB,uBAAwBA,UAAxB;;EACA,IAAMC,GAAG,GAAGpB,MAAM,EAAlB;EACA,IAAMqB,MAAM,GAAGpB,KAAK,EAApB;EAEA,IAAMqB,QAAQ,GAAGF,GAAG,CAACG,OAAJ,IAAeH,GAAG,CAACG,OAAJ,KAAgBL,cAAhD;EAEA,IAAMM,YAAY,GAAGnB,SAAS,CAC5BO,QAD4B,EAE5B,UAACa,CAAD,EAAiE;IAAA;;IAC/DT,QAAQ,IAAIA,QAAQ,CAACS,CAAD,EAAI,KAAJ,CAApB;IACA,sBAAAR,SAAS,CAACM,OAAV,0EAAmBG,KAAnB;IACAD,CAAC,CAACE,cAAF;EACD,CAN2B,CAA9B;;EASA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACH,CAAD,EAAkC;IACpD,IAAI,CAACd,QAAL,EAAe;MACb;MACAQ,UAAU,IAAIA,UAAU,CAACC,GAAG,CAACG,OAAL,CAAxB;MACAC,YAAY,CAACC,CAAD,CAAZ;IACD;EACF,CAND;;EAQA,IAAMI,aAAkD,GAAG,SAArDA,aAAqD,CAACJ,CAAD,EAAO;IAChE,QAAQA,CAAC,CAACK,GAAV;MACE,KAAK,OAAL;MACA,KAAK,GAAL;QACE,IAAI,CAACnB,QAAL,EAAe;UACba,YAAY,CAACC,CAAD,CAAZ;QACD;;QACD;IANJ;EAQD,CATD;;EAWA,oBACE,KAAC,IAAD;IACE,GAAG,EAAErB,kBAAkB,CAACgB,GAAD,EAAMZ,YAAN,CADzB;IAEE,EAAE,EAAEG,QAAQ,GAAGoB,SAAH,GAAeV,MAF7B;IAGE,kBAAe,EAHjB;IAIE,oBAAkBC,QAAQ,GAAG,EAAH,GAAQS,SAJpC;IAKE,IAAI,EAAC,UALP;IAME,OAAO,EAAE1B,SAAS,CAACQ,OAAD,EAAUe,WAAV,CANpB;IAOE,QAAQ,EAAEjB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAP5B;IAQE,SAAS,EAAEN,SAAS,CAACS,SAAD,EAAYe,aAAZ,CARtB;IASE,iBAAelB,QAAQ,GAAG,EAAH,GAAQoB,SATjC;IAUE,iBAAepB,QAAQ,GAAG,EAAH,GAAQoB,SAVjC;IAWE,QAAQ,EAAEpB;EAXZ,GAYMI,UAZN,EADF;AAgBD,CA/DiC,CAA3B"}
+{"version":3,"file":"MenuItem.js","names":["forwardRef","useRef","useId","useMenuContext","useMenuListContext","assignMultipleRefs","wrapEvent","MenuItem","props","forwardedRef","as","Comp","disabled","onSelect","onClick","onKeyDown","otherProps","onChange","buttonRef","navigationItem","onNavigate","ref","itemId","isActive","current","handleSelect","e","focus","preventDefault","handleClick","handleKeyDown","key","undefined"],"sources":["../../../src/Menu/MenuItem.tsx"],"sourcesContent":["import type {\n  LiHTMLAttributes,\n  ElementType,\n  MouseEvent,\n  KeyboardEvent,\n  KeyboardEventHandler,\n} from 'react';\nimport { forwardRef, useRef, useId } from 'react';\n\nimport { useMenuContext, useMenuListContext } from './context';\nimport { assignMultipleRefs } from '../utils/assign-ref';\nimport { wrapEvent } from '../utils';\n\nexport interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  onSelect?: (\n    e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>\n  ) => void;\n  disabled?: boolean;\n}\n\nexport const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(\n  props,\n  forwardedRef\n) {\n  const {\n    as: Comp = 'li',\n    disabled,\n    onSelect,\n    onClick,\n    onKeyDown,\n    ...otherProps\n  } = props;\n  const { onChange, buttonRef } = useMenuContext();\n  const { navigationItem, onNavigate } = useMenuListContext();\n  const ref = useRef<HTMLLIElement>();\n  const itemId = useId();\n\n  const isActive = ref.current && ref.current === navigationItem;\n\n  const handleSelect = wrapEvent(\n    onSelect,\n    (e: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => {\n      onChange && onChange(e, false);\n      buttonRef.current?.focus();\n      e.preventDefault();\n    }\n  );\n\n  const handleClick = (e: MouseEvent<HTMLLIElement>) => {\n    if (!disabled) {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      onNavigate && onNavigate(ref.current!);\n      handleSelect(e);\n    }\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLLIElement> = (e) => {\n    switch (e.key) {\n      case 'Enter':\n        if (!disabled) {\n          handleSelect(e);\n        }\n        break;\n    }\n  };\n\n  return (\n    <Comp\n      ref={assignMultipleRefs(ref, forwardedRef)}\n      id={disabled ? undefined : itemId}\n      data-menu-item=\"\"\n      data-highlighted={isActive ? '' : undefined}\n      role=\"menuitem\"\n      onClick={wrapEvent(onClick, handleClick)}\n      tabIndex={disabled ? -1 : 0}\n      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n      data-disabled={disabled ? '' : undefined}\n      aria-disabled={disabled ? '' : undefined}\n      disabled={disabled}\n      {...otherProps}\n    />\n  );\n});\n"],"mappings":";;;AAOA,SAASA,UAAT,EAAqBC,MAArB,EAA6BC,KAA7B,QAA0C,OAA1C;AAEA,SAASC,cAAT,EAAyBC,kBAAzB,QAAmD,WAAnD;AACA,SAASC,kBAAT,QAAmC,qBAAnC;AACA,SAASC,SAAT,QAA0B,UAA1B;;AAWA,OAAO,IAAMC,QAAQ,gBAAGP,UAAU,CAAqB,SAASO,QAAT,CACrDC,KADqD,EAErDC,YAFqD,EAGrD;EACA,gBAOID,KAPJ,CACEE,EADF;EAAA,IACMC,IADN,0BACa,IADb;EAAA,IAEEC,QAFF,GAOIJ,KAPJ,CAEEI,QAFF;EAAA,IAGEC,QAHF,GAOIL,KAPJ,CAGEK,QAHF;EAAA,IAIEC,OAJF,GAOIN,KAPJ,CAIEM,OAJF;EAAA,IAKEC,SALF,GAOIP,KAPJ,CAKEO,SALF;EAAA,IAMKC,UANL,4BAOIR,KAPJ;;EAQA,sBAAgCL,cAAc,EAA9C;EAAA,IAAQc,QAAR,mBAAQA,QAAR;EAAA,IAAkBC,SAAlB,mBAAkBA,SAAlB;;EACA,0BAAuCd,kBAAkB,EAAzD;EAAA,IAAQe,cAAR,uBAAQA,cAAR;EAAA,IAAwBC,UAAxB,uBAAwBA,UAAxB;;EACA,IAAMC,GAAG,GAAGpB,MAAM,EAAlB;EACA,IAAMqB,MAAM,GAAGpB,KAAK,EAApB;EAEA,IAAMqB,QAAQ,GAAGF,GAAG,CAACG,OAAJ,IAAeH,GAAG,CAACG,OAAJ,KAAgBL,cAAhD;EAEA,IAAMM,YAAY,GAAGnB,SAAS,CAC5BO,QAD4B,EAE5B,UAACa,CAAD,EAAiE;IAAA;;IAC/DT,QAAQ,IAAIA,QAAQ,CAACS,CAAD,EAAI,KAAJ,CAApB;IACA,sBAAAR,SAAS,CAACM,OAAV,0EAAmBG,KAAnB;IACAD,CAAC,CAACE,cAAF;EACD,CAN2B,CAA9B;;EASA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACH,CAAD,EAAkC;IACpD,IAAI,CAACd,QAAL,EAAe;MACb;MACAQ,UAAU,IAAIA,UAAU,CAACC,GAAG,CAACG,OAAL,CAAxB;MACAC,YAAY,CAACC,CAAD,CAAZ;IACD;EACF,CAND;;EAQA,IAAMI,aAAkD,GAAG,SAArDA,aAAqD,CAACJ,CAAD,EAAO;IAChE,QAAQA,CAAC,CAACK,GAAV;MACE,KAAK,OAAL;QACE,IAAI,CAACnB,QAAL,EAAe;UACba,YAAY,CAACC,CAAD,CAAZ;QACD;;QACD;IALJ;EAOD,CARD;;EAUA,oBACE,KAAC,IAAD;IACE,GAAG,EAAErB,kBAAkB,CAACgB,GAAD,EAAMZ,YAAN,CADzB;IAEE,EAAE,EAAEG,QAAQ,GAAGoB,SAAH,GAAeV,MAF7B;IAGE,kBAAe,EAHjB;IAIE,oBAAkBC,QAAQ,GAAG,EAAH,GAAQS,SAJpC;IAKE,IAAI,EAAC,UALP;IAME,OAAO,EAAE1B,SAAS,CAACQ,OAAD,EAAUe,WAAV,CANpB;IAOE,QAAQ,EAAEjB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAP5B;IAQE,SAAS,EAAEN,SAAS,CAACS,SAAD,EAAYe,aAAZ,CARtB;IASE,iBAAelB,QAAQ,GAAG,EAAH,GAAQoB,SATjC;IAUE,iBAAepB,QAAQ,GAAG,EAAH,GAAQoB,SAVjC;IAWE,QAAQ,EAAEpB;EAXZ,GAYMI,UAZN,EADF;AAgBD,CA9DiC,CAA3B"}

package/build/esm/Menu/MenuList.js

@@ -21,6 +21,9 @@ export var MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forwarded
       defaultActiveItemValue = props.defaultActiveItemValue,
       otherProps = _objectWithoutProperties(props, _excluded);
 
+  var itemSearchStr = useRef('');
+  var itemSearchClearTimeout = useRef();
+
   var _useMenuContext = useMenuContext(),
       menuListIdRef = _useMenuContext.menuListIdRef,
       buttonRef = _useMenuContext.buttonRef,
@@ -89,6 +92,7 @@ export var MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forwarded
           onChange && onChange(e, false);
           e.preventDefault(); // prevents focusing on next element, because we will be handling it
 
+          itemSearchStr.current = '';
           (_buttonRef$current2 = buttonRef.current) === null || _buttonRef$current2 === void 0 ? void 0 : _buttonRef$current2.focus();
           break;
         }
@@ -98,6 +102,7 @@ export var MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forwarded
       case 'ArrowDown':
       case 'ArrowUp':
         e.preventDefault();
+        itemSearchStr.current = '';
         var allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
         var currentIndex = allItems.findIndex(function (e) {
           return e === navigationItem;
@@ -135,27 +140,36 @@ export var MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forwarded
 
       default:
         {
-          if (e.key.length === 1) {
+          if (e.key.length === 1 && !e.ctrlKey && !e.altKey) {
             // A-Z
             e.preventDefault();
 
+            if (itemSearchStr.current.length === 0 || itemSearchStr.current.slice(-1) !== e.key) {
+              itemSearchStr.current = itemSearchStr.current + e.key;
+            }
+
+            clearTimeout(itemSearchClearTimeout.current);
+            itemSearchClearTimeout.current = setTimeout(function () {
+              itemSearchStr.current = '';
+            }, 500);
+
             var _allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
 
             var _currentIndex = _allItems.findIndex(function (e) {
               return e === navigationItem;
             });
 
-            var firstLetter = e.key.toLowerCase();
+            var searchStr = itemSearchStr.current;
 
             var _nextIndex = -1;
 
-            for (var i = 1; i < _allItems.length; i++) {
+            for (var i = searchStr.length === 1 ? 1 : 0; i < _allItems.length; i++) {
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               var idx = getCircularIndex(_currentIndex + i, _allItems.length);
               var dom = _allItems[idx];
               var domText = dom.innerText.toLowerCase();
 
-              if (domText.length > 0 && domText.charAt(0) === firstLetter) {
+              if (domText.length > 0 && domText.startsWith(searchStr)) {
                 _nextIndex = idx;
                 break;
               }

package/build/esm/Menu/MenuList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.js","names":["forwardRef","useEffect","useRef","useState","useLayoutEffect","useMenuContext","MenuListProvider","assignMultipleRefs","useOnClickOutside","useScope","queryScope","getCircularIndex","wrapEvent","useEnhancedEffect","window","MenuList","props","forwardedRef","as","Comp","onKeyDown","preferredId","id","defaultActiveItemValue","otherProps","menuListIdRef","buttonRef","onChange","openWithArrowKeyRef","open","navigationItem","setNavigationItem","mounted","setMounted","menuListRef","scope","onNavigate","el","focus","current","allItems","queryAllNodes","index","length","i","dataset","value","e","target","HTMLElement","contains","preventDefault","handleKeyDown","key","currentIndex","findIndex","nextIndex","firstLetter","toLowerCase","idx","dom","domText","innerText","charAt"],"sources":["../../../src/Menu/MenuList.tsx"],"sourcesContent":["import type { HTMLAttributes, ElementType, KeyboardEvent } from 'react';\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  useLayoutEffect,\n} from 'react';\n\nimport { useMenuContext, MenuListProvider } from './context';\nimport { assignMultipleRefs } from '../utils/assign-ref';\nimport { useOnClickOutside } from '../hooks/useOnClickOutside';\nimport { useScope } from '../hooks';\nimport { queryScope } from './scope';\nimport { getCircularIndex, wrapEvent } from '../utils';\n\nconst useEnhancedEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport interface MenuListProps extends HTMLAttributes<HTMLUListElement> {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  defaultActiveItemValue?: string;\n}\n\nexport const MenuList = forwardRef<HTMLUListElement, MenuListProps>(\n  function MenuList(props, forwardedRef) {\n    const {\n      as: Comp = 'ul',\n      onKeyDown,\n      id: preferredId,\n      defaultActiveItemValue,\n      ...otherProps\n    } = props;\n\n    const { menuListIdRef, buttonRef, onChange, openWithArrowKeyRef, open } =\n      useMenuContext();\n\n    const [navigationItem, setNavigationItem] = useState<\n      HTMLElement | undefined\n    >();\n\n    const [mounted, setMounted] = useState(false);\n\n    const menuListRef = useRef<HTMLUListElement>();\n\n    const scope = useScope<HTMLLIElement, HTMLUListElement>(menuListRef);\n\n    const onNavigate = (el: HTMLElement) => {\n      el.focus();\n      setNavigationItem(el);\n    };\n\n    menuListIdRef.current = preferredId || menuListIdRef.current;\n\n    useEnhancedEffect(() => {\n      if (!mounted) {\n        const allItems = scope.current.queryAllNodes(queryScope);\n        let index = getCircularIndex(\n          openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0,\n          allItems.length\n        );\n\n        if (defaultActiveItemValue) {\n          for (let i = 0; i < allItems.length; i++) {\n            if (allItems[i].dataset.value === defaultActiveItemValue) {\n              index = i;\n              break;\n            }\n          }\n        }\n\n        if (index !== null) {\n          onNavigate && onNavigate(allItems[index]);\n        }\n      }\n\n      openWithArrowKeyRef.current = null;\n      setMounted(true);\n    }, [\n      mounted,\n      navigationItem,\n      onNavigate,\n      openWithArrowKeyRef,\n      scope,\n      defaultActiveItemValue,\n    ]);\n\n    useOnClickOutside(\n      menuListRef,\n      (e) => {\n        if (\n          e.target instanceof HTMLElement &&\n          e.target !== buttonRef.current &&\n          !buttonRef.current?.contains(e.target)\n        ) {\n          onChange && onChange(e as any, false);\n        }\n        e.preventDefault();\n      },\n      true\n    );\n\n    function handleKeyDown(e: KeyboardEvent<HTMLUListElement>) {\n      switch (e.key) {\n        case 'Escape':\n        case 'Tab': {\n          onChange && onChange(e, false);\n          e.preventDefault(); // prevents focusing on next element, because we will be handling it\n          buttonRef.current?.focus();\n          break;\n        }\n        case 'Home':\n        case 'End':\n        case 'ArrowDown':\n        case 'ArrowUp':\n          e.preventDefault();\n          const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];\n          const currentIndex = allItems.findIndex((e) => e === navigationItem);\n          if (allItems.length === 0) {\n            return;\n          }\n          let nextIndex: number = currentIndex;\n          switch (e.key) {\n            case 'ArrowUp':\n              nextIndex += -1;\n              break;\n            case 'ArrowDown':\n              nextIndex += 1;\n              break;\n            case 'Home':\n              nextIndex = 0;\n              break;\n            case 'End':\n              nextIndex = -1;\n              break;\n          }\n          // We already checked if allItems.length = 0 above\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          nextIndex = getCircularIndex(nextIndex, allItems.length)!;\n          onNavigate && onNavigate(allItems[nextIndex]);\n          break;\n        default: {\n          if (e.key.length === 1) {\n            // A-Z\n            e.preventDefault();\n            const allItems = scope\n              ? scope.current.queryAllNodes(queryScope)\n              : [];\n            const currentIndex = allItems.findIndex(\n              (e) => e === navigationItem\n            );\n            const firstLetter = e.key.toLowerCase();\n            let nextIndex = -1;\n            for (let i = 1; i < allItems.length; i++) {\n              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n              const idx = getCircularIndex(currentIndex + i, allItems.length)!;\n              const dom = allItems[idx];\n              const domText = dom.innerText.toLowerCase();\n              if (domText.length > 0 && domText.charAt(0) === firstLetter) {\n                nextIndex = idx;\n                break;\n              }\n            }\n            if (nextIndex >= 0 && nextIndex < allItems.length) {\n              onNavigate && onNavigate(allItems[nextIndex]);\n            }\n          }\n        }\n      }\n    }\n\n    if (!open) {\n      return null;\n    }\n\n    return (\n      <MenuListProvider\n        value={{\n          navigationItem,\n          onNavigate,\n        }}\n      >\n        <Comp\n          ref={assignMultipleRefs(forwardedRef, menuListRef)}\n          id={menuListIdRef.current}\n          role=\"menu\"\n          aria-labelledby={buttonRef.current?.id}\n          data-menu-list=\"\"\n          tabIndex=\"-1\"\n          onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n          {...otherProps}\n        />\n      </MenuListProvider>\n    );\n  }\n);\n"],"mappings":"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"}
+{"version":3,"file":"MenuList.js","names":["forwardRef","useEffect","useRef","useState","useLayoutEffect","useMenuContext","MenuListProvider","assignMultipleRefs","useOnClickOutside","useScope","queryScope","getCircularIndex","wrapEvent","useEnhancedEffect","window","MenuList","props","forwardedRef","as","Comp","onKeyDown","preferredId","id","defaultActiveItemValue","otherProps","itemSearchStr","itemSearchClearTimeout","menuListIdRef","buttonRef","onChange","openWithArrowKeyRef","open","navigationItem","setNavigationItem","mounted","setMounted","menuListRef","scope","onNavigate","el","focus","current","allItems","queryAllNodes","index","length","i","dataset","value","e","target","HTMLElement","contains","preventDefault","handleKeyDown","key","currentIndex","findIndex","nextIndex","ctrlKey","altKey","slice","clearTimeout","setTimeout","searchStr","idx","dom","domText","innerText","toLowerCase","startsWith"],"sources":["../../../src/Menu/MenuList.tsx"],"sourcesContent":["import type { HTMLAttributes, ElementType, KeyboardEvent } from 'react';\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  useLayoutEffect,\n} from 'react';\n\nimport { useMenuContext, MenuListProvider } from './context';\nimport { assignMultipleRefs } from '../utils/assign-ref';\nimport { useOnClickOutside } from '../hooks/useOnClickOutside';\nimport { useScope } from '../hooks';\nimport { queryScope } from './scope';\nimport { getCircularIndex, wrapEvent } from '../utils';\n\nconst useEnhancedEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport interface MenuListProps extends HTMLAttributes<HTMLUListElement> {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  defaultActiveItemValue?: string;\n}\n\nexport const MenuList = forwardRef<HTMLUListElement, MenuListProps>(\n  function MenuList(props, forwardedRef) {\n    const {\n      as: Comp = 'ul',\n      onKeyDown,\n      id: preferredId,\n      defaultActiveItemValue,\n      ...otherProps\n    } = props;\n\n    const itemSearchStr = useRef('');\n    const itemSearchClearTimeout = useRef<ReturnType<typeof setTimeout>>();\n\n    const { menuListIdRef, buttonRef, onChange, openWithArrowKeyRef, open } =\n      useMenuContext();\n\n    const [navigationItem, setNavigationItem] = useState<\n      HTMLElement | undefined\n    >();\n\n    const [mounted, setMounted] = useState(false);\n\n    const menuListRef = useRef<HTMLUListElement>();\n\n    const scope = useScope<HTMLLIElement, HTMLUListElement>(menuListRef);\n\n    const onNavigate = (el: HTMLElement) => {\n      el.focus();\n      setNavigationItem(el);\n    };\n\n    menuListIdRef.current = preferredId || menuListIdRef.current;\n\n    useEnhancedEffect(() => {\n      if (!mounted) {\n        const allItems = scope.current.queryAllNodes(queryScope);\n        let index = getCircularIndex(\n          openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0,\n          allItems.length\n        );\n\n        if (defaultActiveItemValue) {\n          for (let i = 0; i < allItems.length; i++) {\n            if (allItems[i].dataset.value === defaultActiveItemValue) {\n              index = i;\n              break;\n            }\n          }\n        }\n\n        if (index !== null) {\n          onNavigate && onNavigate(allItems[index]);\n        }\n      }\n\n      openWithArrowKeyRef.current = null;\n      setMounted(true);\n    }, [\n      mounted,\n      navigationItem,\n      onNavigate,\n      openWithArrowKeyRef,\n      scope,\n      defaultActiveItemValue,\n    ]);\n\n    useOnClickOutside(\n      menuListRef,\n      (e) => {\n        if (\n          e.target instanceof HTMLElement &&\n          e.target !== buttonRef.current &&\n          !buttonRef.current?.contains(e.target)\n        ) {\n          onChange && onChange(e as any, false);\n        }\n        e.preventDefault();\n      },\n      true\n    );\n\n    function handleKeyDown(e: KeyboardEvent<HTMLUListElement>) {\n      switch (e.key) {\n        case 'Escape':\n        case 'Tab': {\n          onChange && onChange(e, false);\n          e.preventDefault(); // prevents focusing on next element, because we will be handling it\n          itemSearchStr.current = '';\n          buttonRef.current?.focus();\n          break;\n        }\n        case 'Home':\n        case 'End':\n        case 'ArrowDown':\n        case 'ArrowUp':\n          e.preventDefault();\n          itemSearchStr.current = '';\n          const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];\n          const currentIndex = allItems.findIndex((e) => e === navigationItem);\n          if (allItems.length === 0) {\n            return;\n          }\n          let nextIndex: number = currentIndex;\n          switch (e.key) {\n            case 'ArrowUp':\n              nextIndex += -1;\n              break;\n            case 'ArrowDown':\n              nextIndex += 1;\n              break;\n            case 'Home':\n              nextIndex = 0;\n              break;\n            case 'End':\n              nextIndex = -1;\n              break;\n          }\n          // We already checked if allItems.length = 0 above\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          nextIndex = getCircularIndex(nextIndex, allItems.length)!;\n          onNavigate && onNavigate(allItems[nextIndex]);\n          break;\n        default: {\n          if (e.key.length === 1 && !e.ctrlKey && !e.altKey) {\n            // A-Z\n            e.preventDefault();\n\n            if (\n              itemSearchStr.current.length === 0 ||\n              itemSearchStr.current.slice(-1) !== e.key\n            ) {\n              itemSearchStr.current = itemSearchStr.current + e.key;\n            }\n            clearTimeout(itemSearchClearTimeout.current as any);\n            itemSearchClearTimeout.current = setTimeout(() => {\n              itemSearchStr.current = '';\n            }, 500);\n\n            const allItems = scope\n              ? scope.current.queryAllNodes(queryScope)\n              : [];\n            const currentIndex = allItems.findIndex(\n              (e) => e === navigationItem\n            );\n            const searchStr = itemSearchStr.current;\n            let nextIndex = -1;\n            for (\n              let i = searchStr.length === 1 ? 1 : 0;\n              i < allItems.length;\n              i++\n            ) {\n              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n              const idx = getCircularIndex(currentIndex + i, allItems.length)!;\n              const dom = allItems[idx];\n              const domText = dom.innerText.toLowerCase();\n              if (domText.length > 0 && domText.startsWith(searchStr)) {\n                nextIndex = idx;\n                break;\n              }\n            }\n            if (nextIndex >= 0 && nextIndex < allItems.length) {\n              onNavigate && onNavigate(allItems[nextIndex]);\n            }\n          }\n        }\n      }\n    }\n\n    if (!open) {\n      return null;\n    }\n\n    return (\n      <MenuListProvider\n        value={{\n          navigationItem,\n          onNavigate,\n        }}\n      >\n        <Comp\n          ref={assignMultipleRefs(forwardedRef, menuListRef)}\n          id={menuListIdRef.current}\n          role=\"menu\"\n          aria-labelledby={buttonRef.current?.id}\n          data-menu-list=\"\"\n          tabIndex=\"-1\"\n          onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n          {...otherProps}\n        />\n      </MenuListProvider>\n    );\n  }\n);\n"],"mappings":"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"}

package/build/esm/Menu/fixtures/countryList.d.ts

@@ -0,0 +1 @@
+export declare const countryList: string[];

package/build/esm/Menu/fixtures/countryList.js

@@ -0,0 +1,2 @@
+export var countryList = ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Brazil', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burundi', "Côte d'Ivoire", 'Cabo Verde', 'Cambodia', 'Cameroon', 'Canada', 'Central African Republic', 'Central American Republic', 'Chad', 'Chile', 'China', 'Colombia', 'Comoros', 'Congo (Congo-Brazzaville)', 'Costa Rica', 'Croatia', 'Cuba', 'Cyprus', 'Czechia (Czech Republic)', 'Democratic Republic of the Congo', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Eswatini (fmr. "Swaziland")', 'Ethiopia', 'Fiji', 'Finland', 'France', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Greece', 'Grenada', 'Guatemala', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Holy See', 'Honduras', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan', 'Kenya', 'Kiribati', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Mauritania', 'Mauritius', 'Mexico', 'Micronesia', 'Moldova', 'Monaco', 'Mongolia', 'Montenegro', 'Morocco', 'Mozambique', 'Myanmar (formerly Burma)', 'Namibia', 'Nauru', 'Nepal', 'Netherlands', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'North Korea', 'North Macedonia', 'Norway', 'Oman', 'Pakistan', 'Palau', 'Palestine State', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Poland', 'Portugal', 'Qatar', 'Romania', 'Russia', 'Rwanda', 'Saint Kitts and Nevis', 'Saint Lucia', 'Saint Vincent and the Grenadines', 'Samoa', 'San Marino', 'Sao Tome and Principe', 'Saudi Arabia', 'Senegal', 'Serbia', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'South Korea', 'South Sudan', 'Spain', 'Sri Lanka', 'Sudan', 'Suriname', 'Sweden', 'Switzerland', 'Syria', 'Tajikistan', 'Tanzania', 'Thailand', 'Timor-Leste', 'Togo', 'Tonga', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Tuvalu', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States of America', 'Uruguay', 'Uzbekistan', 'Vanuatu', 'Venezuela', 'Vietnam', 'Yemen', 'Zambia', 'Zimbabwe'];
+//# sourceMappingURL=countryList.js.map

package/build/esm/Menu/fixtures/countryList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"countryList.js","names":["countryList"],"sources":["../../../../src/Menu/fixtures/countryList.ts"],"sourcesContent":["export const countryList = [\n  'Afghanistan',\n  'Albania',\n  'Algeria',\n  'Andorra',\n  'Angola',\n  'Antigua and Barbuda',\n  'Argentina',\n  'Armenia',\n  'Australia',\n  'Austria',\n  'Azerbaijan',\n  'Bahamas',\n  'Bahrain',\n  'Bangladesh',\n  'Barbados',\n  'Belarus',\n  'Belgium',\n  'Belize',\n  'Benin',\n  'Bhutan',\n  'Bolivia',\n  'Bosnia and Herzegovina',\n  'Botswana',\n  'Brazil',\n  'Brunei',\n  'Bulgaria',\n  'Burkina Faso',\n  'Burundi',\n  \"Côte d'Ivoire\",\n  'Cabo Verde',\n  'Cambodia',\n  'Cameroon',\n  'Canada',\n  'Central African Republic',\n  'Central American Republic',\n  'Chad',\n  'Chile',\n  'China',\n  'Colombia',\n  'Comoros',\n  'Congo (Congo-Brazzaville)',\n  'Costa Rica',\n  'Croatia',\n  'Cuba',\n  'Cyprus',\n  'Czechia (Czech Republic)',\n  'Democratic Republic of the Congo',\n  'Denmark',\n  'Djibouti',\n  'Dominica',\n  'Dominican Republic',\n  'Ecuador',\n  'Egypt',\n  'El Salvador',\n  'Equatorial Guinea',\n  'Eritrea',\n  'Estonia',\n  'Eswatini (fmr. \"Swaziland\")',\n  'Ethiopia',\n  'Fiji',\n  'Finland',\n  'France',\n  'Gabon',\n  'Gambia',\n  'Georgia',\n  'Germany',\n  'Ghana',\n  'Greece',\n  'Grenada',\n  'Guatemala',\n  'Guinea',\n  'Guinea-Bissau',\n  'Guyana',\n  'Haiti',\n  'Holy See',\n  'Honduras',\n  'Hungary',\n  'Iceland',\n  'India',\n  'Indonesia',\n  'Iran',\n  'Iraq',\n  'Ireland',\n  'Israel',\n  'Italy',\n  'Jamaica',\n  'Japan',\n  'Jordan',\n  'Kazakhstan',\n  'Kenya',\n  'Kiribati',\n  'Kuwait',\n  'Kyrgyzstan',\n  'Laos',\n  'Latvia',\n  'Lebanon',\n  'Lesotho',\n  'Liberia',\n  'Libya',\n  'Liechtenstein',\n  'Lithuania',\n  'Luxembourg',\n  'Madagascar',\n  'Malawi',\n  'Malaysia',\n  'Maldives',\n  'Mali',\n  'Malta',\n  'Marshall Islands',\n  'Mauritania',\n  'Mauritius',\n  'Mexico',\n  'Micronesia',\n  'Moldova',\n  'Monaco',\n  'Mongolia',\n  'Montenegro',\n  'Morocco',\n  'Mozambique',\n  'Myanmar (formerly Burma)',\n  'Namibia',\n  'Nauru',\n  'Nepal',\n  'Netherlands',\n  'New Zealand',\n  'Nicaragua',\n  'Niger',\n  'Nigeria',\n  'North Korea',\n  'North Macedonia',\n  'Norway',\n  'Oman',\n  'Pakistan',\n  'Palau',\n  'Palestine State',\n  'Panama',\n  'Papua New Guinea',\n  'Paraguay',\n  'Peru',\n  'Philippines',\n  'Poland',\n  'Portugal',\n  'Qatar',\n  'Romania',\n  'Russia',\n  'Rwanda',\n  'Saint Kitts and Nevis',\n  'Saint Lucia',\n  'Saint Vincent and the Grenadines',\n  'Samoa',\n  'San Marino',\n  'Sao Tome and Principe',\n  'Saudi Arabia',\n  'Senegal',\n  'Serbia',\n  'Seychelles',\n  'Sierra Leone',\n  'Singapore',\n  'Slovakia',\n  'Slovenia',\n  'Solomon Islands',\n  'Somalia',\n  'South Africa',\n  'South Korea',\n  'South Sudan',\n  'Spain',\n  'Sri Lanka',\n  'Sudan',\n  'Suriname',\n  'Sweden',\n  'Switzerland',\n  'Syria',\n  'Tajikistan',\n  'Tanzania',\n  'Thailand',\n  'Timor-Leste',\n  'Togo',\n  'Tonga',\n  'Trinidad and Tobago',\n  'Tunisia',\n  'Turkey',\n  'Turkmenistan',\n  'Tuvalu',\n  'Uganda',\n  'Ukraine',\n  'United Arab Emirates',\n  'United Kingdom',\n  'United States of America',\n  'Uruguay',\n  'Uzbekistan',\n  'Vanuatu',\n  'Venezuela',\n  'Vietnam',\n  'Yemen',\n  'Zambia',\n  'Zimbabwe',\n];\n"],"mappings":"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"}

package/build/esm/Slider/Slider.d.ts

@@ -1,24 +1,3 @@
-/**
- * Welcome to @reach/slider!
- *
- * A UI input component where the user selects a value from within a given
- * range. A Slider has a handle that can be moved along a track to change its
- * value. When the user's mouse or focus is on the Slider's handle, the value
- * can be incremented with keyboard controls.
- *
- * Random thoughts/notes:
- *  - Currently testing this against the behavior of the native input range
- *    element to get our slider on par. We'll explore animated and multi-handle
- *    sliders next.
- *  - We may want to research some use cases for reversed sliders in RTL
- *    languages if that's a thing
- *
- * @see Docs     https://reach.tech/slider
- * @see Source   https://github.com/reach/reach-ui/tree/main/packages/slider
- * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#slider
- * @see Example  https://github.com/Stanko/aria-progress-range-slider
- * @see Example  http://www.oaa-accessibility.org/examplep/slider1/
- */
 import type { ReactNode, KeyboardEvent } from 'react';
 import type * as Polymorphic from '../utils/polymorphic';
 declare type SliderOrientation = 'horizontal' | 'vertical';

package/build/esm/Slider/Slider.js

@@ -3,12 +3,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["children"],
-    _excluded2 = ["aria-label", "aria-labelledby", "aria-valuetext", "as", "defaultValue", "disabled", "value", "getAriaLabel", "getAriaValueText", "handleAlignment", "max", "min", "name", "onChange", "onKeyDown", "onMouseDown", "onMouseMove", "onMouseUp", "onPointerDown", "onPointerUp", "onTouchEnd", "onTouchMove", "onTouchStart", "orientation", "step", "children"],
+    _excluded2 = ["aria-label", "aria-labelledby", "aria-valuetext", "as", "innerAs", "defaultValue", "disabled", "value", "getAriaLabel", "getAriaValueText", "handleAlignment", "max", "min", "name", "onChange", "onKeyDown", "onMouseDown", "onMouseMove", "onMouseUp", "onPointerDown", "onPointerUp", "onTouchEnd", "onTouchMove", "onTouchStart", "orientation", "step", "children"],
     _excluded3 = ["ref"],
-    _excluded4 = ["as", "children", "style"],
-    _excluded5 = ["as", "children", "style"],
-    _excluded6 = ["as", "onBlur", "onFocus", "style", "onKeyDown"],
-    _excluded7 = ["as", "children", "style", "value"];
+    _excluded4 = ["as", "innerAs", "children", "style"],
+    _excluded5 = ["as", "innerAs", "children", "style"],
+    _excluded6 = ["as", "innerAs", "onBlur", "onFocus", "style", "onKeyDown"],
+    _excluded7 = ["as", "innerAs", "children", "style", "value"];
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 
 /**
  * Welcome to @reach/slider!
@@ -90,6 +92,7 @@ var SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwardedR
       ariaValueTextProp = _ref2['aria-valuetext'],
       _ref2$as = _ref2.as,
       Comp = _ref2$as === void 0 ? 'div' : _ref2$as,
+      innerAs = _ref2.innerAs,
       defaultValue = _ref2.defaultValue,
       _ref2$disabled = _ref2.disabled,
       disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
@@ -441,6 +444,8 @@ var SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwardedR
     rangeStyle: rangeStyle,
     updateValue: onChange,
     children: /*#__PURE__*/_jsxs(Comp, _extends(_extends({}, rest), {}, {
+      // @ts-ignore
+      as: innerAs,
       ref: assignMultipleRefs(sliderRef, forwardedRef),
       "data-reach-slider-input": "",
       "data-disabled": disabled ? '' : undefined,
@@ -482,6 +487,7 @@ var SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwardedR
 var SliderTrackImpl = /*#__PURE__*/forwardRef(function SliderTrack(_ref3, forwardedRef) {
   var _ref3$as = _ref3.as,
       Comp = _ref3$as === void 0 ? 'div' : _ref3$as,
+      innerAs = _ref3.innerAs,
       children = _ref3.children,
       _ref3$style = _ref3.style,
       style = _ref3$style === void 0 ? {} : _ref3$style,
@@ -493,7 +499,9 @@ var SliderTrackImpl = /*#__PURE__*/forwardRef(function SliderTrack(_ref3, forwar
       trackRef = _useSliderContext.trackRef;
 
   return /*#__PURE__*/_jsx(Comp, _extends(_extends({
-    ref: assignMultipleRefs(trackRef, forwardedRef),
+    ref: assignMultipleRefs(trackRef, forwardedRef) // @ts-ignore
+    ,
+    as: innerAs,
     style: _extends(_extends({}, style), {}, {
       position: 'relative'
     })
@@ -522,6 +530,7 @@ var SliderTrack = /*#__PURE__*/memo(SliderTrackImpl);
 var SliderRangeImpl = /*#__PURE__*/forwardRef(function SliderRange(_ref4, forwardedRef) {
   var _ref4$as = _ref4.as,
       Comp = _ref4$as === void 0 ? 'div' : _ref4$as,
+      innerAs = _ref4.innerAs,
       children = _ref4.children,
       _ref4$style = _ref4.style,
       style = _ref4$style === void 0 ? {} : _ref4$style,
@@ -533,7 +542,9 @@ var SliderRangeImpl = /*#__PURE__*/forwardRef(function SliderRange(_ref4, forwar
       rangeStyle = _useSliderContext2.rangeStyle;
 
   return /*#__PURE__*/_jsx(Comp, _extends(_extends({
-    ref: forwardedRef,
+    ref: forwardedRef // @ts-ignore
+    ,
+    as: innerAs,
     style: _extends(_extends({
       position: 'absolute'
     }, rangeStyle), style)
@@ -564,6 +575,7 @@ var SliderRange = /*#__PURE__*/memo(SliderRangeImpl);
 var SliderHandleImpl = /*#__PURE__*/forwardRef(function SliderHandle(_ref5, forwardedRef) {
   var _ref5$as = _ref5.as,
       Comp = _ref5$as === void 0 ? 'div' : _ref5$as,
+      innerAs = _ref5.innerAs,
       onBlur = _ref5.onBlur,
       onFocus = _ref5.onFocus,
       _ref5$style = _ref5.style,
@@ -586,7 +598,9 @@ var SliderHandleImpl = /*#__PURE__*/forwardRef(function SliderHandle(_ref5, forw
       sliderMax = _useSliderContext3.sliderMax,
       value = _useSliderContext3.value;
 
-  return /*#__PURE__*/_jsx(Comp, _extends(_extends({
+  return /*#__PURE__*/_jsx(Comp // @ts-ignore
+  , _extends(_extends({
+    as: innerAs,
     "aria-disabled": disabled || undefined // If the slider has a visible label, it is referenced by
     // `aria-labelledby` on the slider element. Otherwise, the slider
     // element has a label provided by `aria-label`.
@@ -662,6 +676,7 @@ var SliderHandle = /*#__PURE__*/memo(SliderHandleImpl);
 var SliderMarkerImpl = /*#__PURE__*/forwardRef(function SliderMarker(_ref6, forwardedRef) {
   var _ref6$as = _ref6.as,
       Comp = _ref6$as === void 0 ? 'div' : _ref6$as,
+      innerAs = _ref6.innerAs,
       children = _ref6.children,
       _ref6$style = _ref6.style,
       style = _ref6$style === void 0 ? {} : _ref6$style,
@@ -676,11 +691,13 @@ var SliderMarkerImpl = /*#__PURE__*/forwardRef(function SliderMarker(_ref6, forw
       sliderMax = _useSliderContext4.sliderMax,
       sliderValue = _useSliderContext4.value;
 
-  var inRange = !(value < sliderMin || value > sliderMax);
+  var inRange = value >= sliderMin && value <= sliderMax;
   var absoluteStartPosition = "".concat(valueToPercent(value, sliderMin, sliderMax), "%");
   var state = value < sliderValue ? 'under-value' : value === sliderValue ? 'at-value' : 'over-value';
   return inRange ? /*#__PURE__*/_jsx(Comp, _extends(_extends({
-    ref: forwardedRef,
+    ref: forwardedRef // @ts-ignore
+    ,
+    as: innerAs,
     style: _extends(_extends({
       position: 'absolute'
     }, isVertical ? {