@basic-ui/core 0.0.44 → 0.0.45

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/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 ? {