@basic-ui/core 0.0.53 → 0.0.56

package/build/esm/ComboBox/context.js

@@ -1,8 +1,7 @@
 import { createContext, useContext } from 'react';
-var comboboxContext = /*#__PURE__*/createContext(null);
-var ComboBoxProvider = comboboxContext.Provider;
-export { ComboBoxProvider };
-export var useComboBoxContext = function useComboBoxContext() {
-  return useContext(comboboxContext);
-};
+const comboboxContext = /*#__PURE__*/createContext(null);
+export const {
+  Provider: ComboBoxProvider
+} = comboboxContext;
+export const useComboBoxContext = () => useContext(comboboxContext);
 //# sourceMappingURL=context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["createContext","useContext","comboboxContext","ComboBoxProvider","Provider","useComboBoxContext"],"sources":["../../../src/ComboBox/context.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { createContext, useContext } from 'react';\n\nimport type { ActionTypes, StateTypes, ReducerState } from './hooks';\nimport type { SelectEventHandler } from './Combobox';\nimport type { Scope } from '../hooks';\n\nexport interface ComboBoxContextProps {\n  data: Omit<ReducerState, 'state'>;\n  inputRef: MutableRefObject<HTMLInputElement | null>;\n  popoverRef: MutableRefObject<HTMLDivElement | null>;\n  buttonRef: MutableRefObject<HTMLButtonElement | null>;\n  onSelect?: SelectEventHandler;\n  optionsRef: MutableRefObject<{\n    [itemId: string]: {\n      value: string | unknown;\n      text: string;\n    };\n  }>;\n  listScope: Scope<HTMLElement>;\n  state: StateTypes;\n  transition: (action: ActionTypes, payload?: any) => void;\n  listboxIdRef: MutableRefObject<string | undefined>;\n  labelIdRef: MutableRefObject<string | undefined>;\n  autocompletePropRef: MutableRefObject<boolean>;\n  persistSelectionRef: MutableRefObject<boolean>;\n  clearOnEscapeRef: MutableRefObject<boolean>;\n  isVisible: boolean;\n  openOnFocus: boolean;\n  selectOnBlur: boolean;\n}\n\nconst comboboxContext = createContext<ComboBoxContextProps>(null as any);\nexport const { Provider: ComboBoxProvider } = comboboxContext;\nexport const useComboBoxContext = () => useContext(comboboxContext);\n"],"mappings":"AACA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AA+BA,IAAMC,eAAe,gBAAGF,aAAa,CAAuB,IAAvB,CAArC;AACO,IAAkBG,gBAAlB,GAAuCD,eAAvC,CAAQE,QAAR;;AACP,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB;EAAA,OAAMJ,UAAU,CAACC,eAAD,CAAhB;AAAA,CAA3B"}
+{"version":3,"file":"context.js","names":["createContext","useContext","comboboxContext","Provider","ComboBoxProvider","useComboBoxContext"],"sources":["../../../src/ComboBox/context.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { createContext, useContext } from 'react';\n\nimport type { ActionTypes, StateTypes, ReducerState } from './hooks';\nimport type { SelectEventHandler } from './Combobox';\nimport type { Scope } from '../hooks';\n\nexport interface ComboBoxContextProps {\n  data: Omit<ReducerState, 'state'>;\n  inputRef: MutableRefObject<HTMLInputElement | null>;\n  popoverRef: MutableRefObject<HTMLDivElement | null>;\n  buttonRef: MutableRefObject<HTMLButtonElement | null>;\n  onSelect?: SelectEventHandler;\n  optionsRef: MutableRefObject<{\n    [itemId: string]: {\n      value: string | unknown;\n      text: string;\n    };\n  }>;\n  listScope: Scope<HTMLElement>;\n  state: StateTypes;\n  transition: (action: ActionTypes, payload?: any) => void;\n  listboxIdRef: MutableRefObject<string | undefined>;\n  labelIdRef: MutableRefObject<string | undefined>;\n  autocompletePropRef: MutableRefObject<boolean>;\n  persistSelectionRef: MutableRefObject<boolean>;\n  clearOnEscapeRef: MutableRefObject<boolean>;\n  isVisible: boolean;\n  openOnFocus: boolean;\n  selectOnBlur: boolean;\n}\n\nconst comboboxContext = createContext<ComboBoxContextProps>(null as any);\nexport const { Provider: ComboBoxProvider } = comboboxContext;\nexport const useComboBoxContext = () => useContext(comboboxContext);\n"],"mappings":"AACA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AA+BjD,MAAMC,eAAe,gBAAGF,aAAa,CAAuB,IAAW,CAAC;AACxE,OAAO,MAAM;EAAEG,QAAQ,EAAEC;AAAiB,CAAC,GAAGF,eAAe;AAC7D,OAAO,MAAMG,kBAAkB,GAAGA,CAAA,KAAMJ,UAAU,CAACC,eAAe,CAAC","ignoreList":[]}

package/build/esm/ComboBox/hooks.d.ts

@@ -3,7 +3,7 @@ import type { StateChart as GenericStateChart, StateMachineState } from '../hook
 export declare const IDLE = "IDLE";
 declare const SUGGESTING = "SUGGESTING";
 export declare const NAVIGATING = "NAVIGATING";
-export declare type StateTypes = typeof IDLE | typeof SUGGESTING | typeof NAVIGATING;
+export type StateTypes = typeof IDLE | typeof SUGGESTING | typeof NAVIGATING;
 export declare const INIT = "INIT";
 export declare const CLEAR = "CLEAR";
 export declare const CLEAR_SELECTION = "CLEAR_SELECTION";
@@ -16,7 +16,7 @@ declare const BLUR = "BLUR";
 export declare const FOCUS = "FOCUS";
 export declare const OPEN_WITH_BUTTON = "OPEN_WITH_BUTTON";
 export declare const CLOSE_WITH_BUTTON = "CLOSE_WITH_BUTTON";
-export declare type ActionTypes = typeof CLEAR | typeof CLEAR_SELECTION | typeof CHANGE | typeof INIT | typeof NAVIGATE | typeof SELECT_WITH_KEYBOARD | typeof SELECT_WITH_CLICK | typeof ESCAPE | typeof BLUR | typeof FOCUS | typeof OPEN_WITH_BUTTON | typeof CLOSE_WITH_BUTTON;
+export type ActionTypes = typeof CLEAR | typeof CLEAR_SELECTION | typeof CHANGE | typeof INIT | typeof NAVIGATE | typeof SELECT_WITH_KEYBOARD | typeof SELECT_WITH_CLICK | typeof ESCAPE | typeof BLUR | typeof FOCUS | typeof OPEN_WITH_BUTTON | typeof CLOSE_WITH_BUTTON;
 export declare const stateChart: GenericStateChart<StateTypes, ActionTypes>;
 export interface ReducerState extends StateMachineState<StateTypes, ActionTypes> {
     item: string;

package/build/esm/ComboBox/hooks.js

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