@basic-ui/core 0.0.36 → 0.0.39

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ComboBox/ComboboxOption.tsx"],"names":["forwardRef","useEffect","useRef","SELECT_WITH_CLICK","CLEAR_SELECTION","wrapEvent","useComboBoxContext","makeHash","ComboboxOption","ref","children","id","idProp","value","valueProp","text","textProp","onClick","as","Comp","innerAs","props","onSelect","data","navigationItem","transition","optionsRef","transitionCleanupRef","isActiveRef","length","Error","String","opts","current","handleClick","item","undefined"],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport { forwardRef, useEffect, useRef } from 'react';\n\nimport type * as React from 'react';\nimport { SELECT_WITH_CLICK, CLEAR_SELECTION } from './hooks';\nimport { wrapEvent } from '../utils/wrapEvent';\nimport { useComboBoxContext } from './context';\nimport { makeHash } from './makeHash';\n\nexport interface ComboboxOptionProps\n  extends React.LiHTMLAttributes<HTMLLIElement> {\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  id: string;\n  value: any;\n  text?: string;\n  onClick?: React.MouseEventHandler<HTMLLIElement>;\n  children?: React.ReactNode;\n}\n\nexport const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps>(\n  function ComboboxOption(\n    {\n      children,\n      id: idProp,\n      value: valueProp,\n      text: textProp,\n      onClick,\n      as: Comp = 'li',\n      innerAs,\n      ...props\n    },\n    ref\n  ) {\n    const {\n      onSelect,\n      data: { navigationItem },\n      transition,\n      optionsRef,\n    } = useComboBoxContext();\n    const transitionCleanupRef = useRef(transition);\n    const isActiveRef = useRef(false);\n\n    const value: any = valueProp;\n    let text: string = textProp ? textProp : '';\n\n    if (text.length === 0) {\n      if (typeof valueProp === 'string' && valueProp.length > 0) {\n        text = valueProp;\n      } else {\n        throw new Error('Missing text for <ComboboxOption />');\n      }\n    }\n\n    const id = String(makeHash(idProp));\n\n    useEffect(() => {\n      const opts = optionsRef.current;\n      opts[id] = { value, text };\n\n      return () => {\n        delete opts[id];\n      };\n    }, [optionsRef, id, text, value]);\n\n    // Keep updating this ref with the current\n    // function pointer for transition, so it can\n    // be used by the unmount effect below.\n    transitionCleanupRef.current = transition;\n    isActiveRef.current = navigationItem === id;\n\n    useEffect(() => {\n      return () => {\n        if (isActiveRef.current === true) {\n          // clean up selections if this option is getting\n          // unmounted and it was the currently selected item\n          transitionCleanupRef.current(CLEAR_SELECTION);\n        }\n      };\n    }, []);\n\n    const handleClick = () => {\n      onSelect && onSelect(text, id, value);\n      transition(SELECT_WITH_CLICK, { text, item: id });\n    };\n\n    return (\n      <Comp\n        {...props}\n        as={innerAs}\n        data-reach-combobox-option=\"\"\n        ref={ref}\n        id={id}\n        role=\"option\"\n        aria-selected={isActiveRef.current}\n        data-highlighted={isActiveRef.current ? '' : undefined}\n        // without this the menu will close from `onBlur`, but with it the\n        // element can be `document.activeElement` and then our focus checks in\n        // onBlur will work as intended\n        tabIndex=\"-1\"\n        onClick={wrapEvent(onClick, handleClick)}\n      >\n        {children || text}\n      </Comp>\n    );\n  }\n);\n"],"file":"ComboboxOption.js"}
+{"version":3,"sources":["../../../src/ComboBox/ComboboxOption.tsx"],"names":["forwardRef","useEffect","useRef","React","SELECT_WITH_CLICK","CLEAR_SELECTION","wrapEvent","useComboBoxContext","makeHash","ComboboxOption","ref","children","idProp","id","valueProp","value","textProp","text","onClick","as","Comp","innerAs","props","onSelect","navigationItem","data","transition","optionsRef","transitionCleanupRef","isActiveRef","length","Error","String","opts","current","handleClick","item","undefined"],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport { forwardRef, useEffect, useRef } from 'react';\nimport * as React from 'react';\n\nimport { SELECT_WITH_CLICK, CLEAR_SELECTION } from './hooks';\nimport { wrapEvent } from '../utils/wrapEvent';\nimport { useComboBoxContext } from './context';\nimport { makeHash } from './makeHash';\n\nexport interface ComboboxOptionProps\n  extends React.LiHTMLAttributes<HTMLLIElement> {\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  id: string;\n  value: any;\n  text?: string;\n  onClick?: React.MouseEventHandler<HTMLLIElement>;\n  children?: React.ReactNode;\n}\n\nexport const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps>(\n  function ComboboxOption(\n    {\n      children,\n      id: idProp,\n      value: valueProp,\n      text: textProp,\n      onClick,\n      as: Comp = 'li',\n      innerAs,\n      ...props\n    },\n    ref\n  ) {\n    const {\n      onSelect,\n      data: { navigationItem },\n      transition,\n      optionsRef,\n    } = useComboBoxContext();\n    const transitionCleanupRef = useRef(transition);\n    const isActiveRef = useRef(false);\n\n    const value: any = valueProp;\n    let text: string = textProp ? textProp : '';\n\n    if (text.length === 0) {\n      if (typeof valueProp === 'string' && valueProp.length > 0) {\n        text = valueProp;\n      } else {\n        throw new Error('Missing text for <ComboboxOption />');\n      }\n    }\n\n    const id = String(makeHash(idProp));\n\n    useEffect(() => {\n      const opts = optionsRef.current;\n      opts[id] = { value, text };\n\n      return () => {\n        delete opts[id];\n      };\n    }, [optionsRef, id, text, value]);\n\n    // Keep updating this ref with the current\n    // function pointer for transition, so it can\n    // be used by the unmount effect below.\n    transitionCleanupRef.current = transition;\n    isActiveRef.current = navigationItem === id;\n\n    useEffect(() => {\n      return () => {\n        if (isActiveRef.current === true) {\n          // clean up selections if this option is getting\n          // unmounted and it was the currently selected item\n          transitionCleanupRef.current(CLEAR_SELECTION);\n        }\n      };\n    }, []);\n\n    const handleClick = () => {\n      onSelect && onSelect(text, id, value);\n      transition(SELECT_WITH_CLICK, { text, item: id });\n    };\n\n    return (\n      <Comp\n        {...props}\n        as={innerAs}\n        data-reach-combobox-option=\"\"\n        ref={ref}\n        id={id}\n        role=\"option\"\n        aria-selected={isActiveRef.current}\n        data-highlighted={isActiveRef.current ? '' : undefined}\n        // without this the menu will close from `onBlur`, but with it the\n        // element can be `document.activeElement` and then our focus checks in\n        // onBlur will work as intended\n        tabIndex=\"-1\"\n        onClick={wrapEvent(onClick, handleClick)}\n      >\n        {children || text}\n      </Comp>\n    );\n  }\n);\n"],"file":"ComboboxOption.js"}

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

@@ -1,4 +1,4 @@
-import type * as React from 'react';
+import * as React from 'react';
 export interface ComboboxPopoverProps extends React.HTMLAttributes<HTMLDivElement> {
     as?: React.ElementType<any>;
     innerAs?: React.ElementType<any>;

package/build/esm/ComboBox/ComboboxPopover.js

@@ -1,27 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { forwardRef } from 'react';
+import * as React from 'react';
 import { useKeyDown, useBlur } from './hooks';
 import { wrapEvent } from '../utils/wrapEvent';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { useComboBoxContext } from './context';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ComboboxPopover = /*#__PURE__*/forwardRef(function ComboboxPopover(_ref, forwardedRef) {
-  let {
-    // wrapped events
-    onKeyDown,
-    onBlur,
-    as: Comp = 'div',
-    innerAs
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["onKeyDown", "onBlur", "as", "innerAs"]);
+export var ComboboxPopover = /*#__PURE__*/forwardRef(function ComboboxPopover(_ref, forwardedRef) {
+  var onKeyDown = _ref.onKeyDown,
+      onBlur = _ref.onBlur,
+      _ref$as = _ref.as,
+      Comp = _ref$as === void 0 ? 'div' : _ref$as,
+      innerAs = _ref.innerAs,
+      props = _objectWithoutProperties(_ref, ["onKeyDown", "onBlur", "as", "innerAs"]);
 
-  const {
-    popoverRef,
-    isVisible
-  } = useComboBoxContext();
-  const handleKeyDown = useKeyDown();
-  const handleBlur = useBlur(); // Instead of conditionally rendering the popover we use the `hidden` prop
+  var _useComboBoxContext = useComboBoxContext(),
+      popoverRef = _useComboBoxContext.popoverRef,
+      isVisible = _useComboBoxContext.isVisible;
+
+  var handleKeyDown = useKeyDown();
+  var handleBlur = useBlur(); // Instead of conditionally rendering the popover we use the `hidden` prop
   // because we don't want to unmount on close (from escape or onSelect).  If
   // we unmounted, then we'd lose the optionsRef and the user wouldn't be able
   // to use the arrow keys to pop the list back open. However, the developer
@@ -29,7 +28,7 @@ export const ComboboxPopover = /*#__PURE__*/forwardRef(function ComboboxPopover(
   // mount/unmount based on the app's own data (like results.length or
   // whatever).
 
-  const hidden = !isVisible;
+  var hidden = !isVisible;
   return /*#__PURE__*/_jsx(Comp, _extends({}, props, {
     as: innerAs,
     "data-reach-combobox-popover": "",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ComboBox/ComboboxPopover.tsx"],"names":["forwardRef","useKeyDown","useBlur","wrapEvent","assignMultipleRefs","useComboBoxContext","ComboboxPopover","forwardedRef","onKeyDown","onBlur","as","Comp","innerAs","props","popoverRef","isVisible","handleKeyDown","handleBlur","hidden"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AAEA,SAASC,UAAT,EAAqBC,OAArB,QAAoC,SAApC;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,kBAAT,QAAmC,oBAAnC;AACA,SAASC,kBAAT,QAAmC,WAAnC;;AAWA,OAAO,MAAMC,eAAe,gBAAGN,UAAU,CACvC,SAASM,eAAT,OAUEC,YAVF,EAWE;AAAA,MAVA;AACE;AACAC,IAAAA,SAFF;AAGEC,IAAAA,MAHF;AAKEC,IAAAA,EAAE,EAAEC,IAAI,GAAG,KALb;AAMEC,IAAAA;AANF,GAUA;AAAA,MAHKC,KAGL;;AACA,QAAM;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA4BV,kBAAkB,EAApD;AACA,QAAMW,aAAa,GAAGf,UAAU,EAAhC;AACA,QAAMgB,UAAU,GAAGf,OAAO,EAA1B,CAHA,CAKA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,QAAMgB,MAAM,GAAG,CAACH,SAAhB;AAEA,sBACE,KAAC,IAAD,eACMF,KADN;AAEE,IAAA,EAAE,EAAED,OAFN;AAGE,mCAA4B,EAH9B;AAIE,IAAA,GAAG,EAAER,kBAAkB,CAACU,UAAD,EAAaP,YAAb,CAJzB;AAKE,IAAA,SAAS,EAAEJ,SAAS,CAACK,SAAD,EAAYQ,aAAZ,CALtB;AAME,IAAA,MAAM,EAAEb,SAAS,CAACM,MAAD,EAASQ,UAAT,CANnB;AAOE,IAAA,MAAM,EAAEC,MAPV,CAQE;AACA;AATF;AAUE,IAAA,QAAQ,EAAC;AAVX,KADF;AAcD,CAxCsC,CAAlC","sourcesContent":["import { forwardRef } from 'react';\nimport type * as React from 'react';\nimport { useKeyDown, useBlur } from './hooks';\nimport { wrapEvent } from '../utils/wrapEvent';\nimport { assignMultipleRefs } from '../utils/assignRef';\nimport { useComboBoxContext } from './context';\n\nexport interface ComboboxPopoverProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n  children?: React.ReactNode;\n}\n\nexport const ComboboxPopover = forwardRef<HTMLDivElement, ComboboxPopoverProps>(\n  function ComboboxPopover(\n    {\n      // wrapped events\n      onKeyDown,\n      onBlur,\n\n      as: Comp = 'div',\n      innerAs,\n      ...props\n    },\n    forwardedRef\n  ) {\n    const { popoverRef, isVisible } = useComboBoxContext();\n    const handleKeyDown = useKeyDown();\n    const handleBlur = useBlur();\n\n    // Instead of conditionally rendering the popover we use the `hidden` prop\n    // because we don't want to unmount on close (from escape or onSelect).  If\n    // we unmounted, then we'd lose the optionsRef and the user wouldn't be able\n    // to use the arrow keys to pop the list back open. However, the developer\n    // can conditionally render the ComboboxPopover if they do want to cause\n    // mount/unmount based on the app's own data (like results.length or\n    // whatever).\n    const hidden = !isVisible;\n\n    return (\n      <Comp\n        {...props}\n        as={innerAs}\n        data-reach-combobox-popover=\"\"\n        ref={assignMultipleRefs(popoverRef, forwardedRef)}\n        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n        onBlur={wrapEvent(onBlur, handleBlur)}\n        hidden={hidden}\n        // Allow the user to click empty space inside the popover without causing\n        // to close from useBlur\n        tabIndex=\"-1\"\n      />\n    );\n  }\n);\n"],"file":"ComboboxPopover.js"}
+{"version":3,"sources":["../../../src/ComboBox/ComboboxPopover.tsx"],"names":["forwardRef","React","useKeyDown","useBlur","wrapEvent","assignMultipleRefs","useComboBoxContext","ComboboxPopover","forwardedRef","onKeyDown","onBlur","as","Comp","innerAs","props","popoverRef","isVisible","handleKeyDown","handleBlur","hidden"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAEA,SAASC,UAAT,EAAqBC,OAArB,QAAoC,SAApC;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,kBAAT,QAAmC,oBAAnC;AACA,SAASC,kBAAT,QAAmC,WAAnC;;AAWA,OAAO,IAAMC,eAAe,gBAAGP,UAAU,CACvC,SAASO,eAAT,OAUEC,YAVF,EAWE;AAAA,MAREC,SAQF,QAREA,SAQF;AAAA,MAPEC,MAOF,QAPEA,MAOF;AAAA,qBALEC,EAKF;AAAA,MALMC,IAKN,wBALa,KAKb;AAAA,MAJEC,OAIF,QAJEA,OAIF;AAAA,MAHKC,KAGL;;AAAA,4BACkCR,kBAAkB,EADpD;AAAA,MACQS,UADR,uBACQA,UADR;AAAA,MACoBC,SADpB,uBACoBA,SADpB;;AAEA,MAAMC,aAAa,GAAGf,UAAU,EAAhC;AACA,MAAMgB,UAAU,GAAGf,OAAO,EAA1B,CAHA,CAKA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMgB,MAAM,GAAG,CAACH,SAAhB;AAEA,sBACE,KAAC,IAAD,eACMF,KADN;AAEE,IAAA,EAAE,EAAED,OAFN;AAGE,mCAA4B,EAH9B;AAIE,IAAA,GAAG,EAAER,kBAAkB,CAACU,UAAD,EAAaP,YAAb,CAJzB;AAKE,IAAA,SAAS,EAAEJ,SAAS,CAACK,SAAD,EAAYQ,aAAZ,CALtB;AAME,IAAA,MAAM,EAAEb,SAAS,CAACM,MAAD,EAASQ,UAAT,CANnB;AAOE,IAAA,MAAM,EAAEC,MAPV,CAQE;AACA;AATF;AAUE,IAAA,QAAQ,EAAC;AAVX,KADF;AAcD,CAxCsC,CAAlC","sourcesContent":["import { forwardRef } from 'react';\nimport * as React from 'react';\n\nimport { useKeyDown, useBlur } from './hooks';\nimport { wrapEvent } from '../utils/wrapEvent';\nimport { assignMultipleRefs } from '../utils/assignRef';\nimport { useComboBoxContext } from './context';\n\nexport interface ComboboxPopoverProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n  children?: React.ReactNode;\n}\n\nexport const ComboboxPopover = forwardRef<HTMLDivElement, ComboboxPopoverProps>(\n  function ComboboxPopover(\n    {\n      // wrapped events\n      onKeyDown,\n      onBlur,\n\n      as: Comp = 'div',\n      innerAs,\n      ...props\n    },\n    forwardedRef\n  ) {\n    const { popoverRef, isVisible } = useComboBoxContext();\n    const handleKeyDown = useKeyDown();\n    const handleBlur = useBlur();\n\n    // Instead of conditionally rendering the popover we use the `hidden` prop\n    // because we don't want to unmount on close (from escape or onSelect).  If\n    // we unmounted, then we'd lose the optionsRef and the user wouldn't be able\n    // to use the arrow keys to pop the list back open. However, the developer\n    // can conditionally render the ComboboxPopover if they do want to cause\n    // mount/unmount based on the app's own data (like results.length or\n    // whatever).\n    const hidden = !isVisible;\n\n    return (\n      <Comp\n        {...props}\n        as={innerAs}\n        data-reach-combobox-popover=\"\"\n        ref={assignMultipleRefs(popoverRef, forwardedRef)}\n        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n        onBlur={wrapEvent(onBlur, handleBlur)}\n        hidden={hidden}\n        // Allow the user to click empty space inside the popover without causing\n        // to close from useBlur\n        tabIndex=\"-1\"\n      />\n    );\n  }\n);\n"],"file":"ComboboxPopover.js"}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { ActionTypes, StateTypes, ReducerState } from './hooks';
-import { SelectEventHandler } from './Combobox';
-import { Scope } from '../hooks';
+import type { ActionTypes, StateTypes, ReducerState } from './hooks';
+import type { SelectEventHandler } from './Combobox';
+import type { Scope } from '../hooks';
 export interface ComboBoxContextProps {
     data: Omit<ReducerState, 'state'>;
     inputRef: React.MutableRefObject<HTMLInputElement | null>;

package/build/esm/ComboBox/context.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ComboBox/context.ts"],"names":["createContext","useContext","comboboxContext","Provider","ComboBoxProvider","useComboBoxContext"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AA8BA,MAAMC,eAAe,gBAAGF,aAAa,CAAuB,IAAvB,CAArC;AACA,OAAO,MAAM;AAAEG,EAAAA,QAAQ,EAAEC;AAAZ,IAAiCF,eAAvC;AACP,OAAO,MAAMG,kBAAkB,GAAG,MAAMJ,UAAU,CAACC,eAAD,CAA3C","sourcesContent":["import { createContext, useContext } from 'react';\nimport { ActionTypes, StateTypes, ReducerState } from './hooks';\nimport { SelectEventHandler } from './Combobox';\nimport { Scope } from '../hooks';\n\nexport interface ComboBoxContextProps {\n  data: Omit<ReducerState, 'state'>;\n  inputRef: React.MutableRefObject<HTMLInputElement | null>;\n  popoverRef: React.MutableRefObject<HTMLDivElement | null>;\n  buttonRef: React.MutableRefObject<HTMLButtonElement | null>;\n  onSelect?: SelectEventHandler;\n  optionsRef: React.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: React.MutableRefObject<string | undefined>;\n  labelIdRef: React.MutableRefObject<string | undefined>;\n  autocompletePropRef: React.MutableRefObject<boolean>;\n  persistSelectionRef: React.MutableRefObject<boolean>;\n  clearOnEscapeRef: React.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"],"file":"context.js"}
+{"version":3,"sources":["../../../src/ComboBox/context.ts"],"names":["createContext","useContext","comboboxContext","ComboBoxProvider","Provider","useComboBoxContext"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AA+BA,IAAMC,eAAe,gBAAGF,aAAa,CAAuB,IAAvB,CAArC;IACyBG,gB,GAAqBD,e,CAA/BE,Q;;AACf,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB;AAAA,SAAMJ,UAAU,CAACC,eAAD,CAAhB;AAAA,CAA3B","sourcesContent":["import { 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: React.MutableRefObject<HTMLInputElement | null>;\n  popoverRef: React.MutableRefObject<HTMLDivElement | null>;\n  buttonRef: React.MutableRefObject<HTMLButtonElement | null>;\n  onSelect?: SelectEventHandler;\n  optionsRef: React.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: React.MutableRefObject<string | undefined>;\n  labelIdRef: React.MutableRefObject<string | undefined>;\n  autocompletePropRef: React.MutableRefObject<boolean>;\n  persistSelectionRef: React.MutableRefObject<boolean>;\n  clearOnEscapeRef: React.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"],"file":"context.js"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { StateChart as GenericStateChart, StateMachineState } from '../hooks/useReducerMachine';
+import type { StateChart as GenericStateChart, StateMachineState } from '../hooks/useReducerMachine';
 export declare const IDLE = "IDLE";
 declare const SUGGESTING = "SUGGESTING";
 export declare const NAVIGATING = "NAVIGATING";

package/build/esm/ComboBox/hooks.js

@@ -1,4 +1,7 @@
 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 */
 
@@ -10,82 +13,46 @@ import { scopeQuery } from './scopeQuery'; /////////////////////////////////////
 // States
 // Nothing going on, waiting for the user to type or use the arrow keys
 
-export const IDLE = 'IDLE'; // The component is suggesting options as the user types
+export var IDLE = 'IDLE'; // The component is suggesting options as the user types
 
-const SUGGESTING = 'SUGGESTING'; // The user is using the keyboard to navigate the list, not typing
+var SUGGESTING = 'SUGGESTING'; // The user is using the keyboard to navigate the list, not typing
 
-export const NAVIGATING = 'NAVIGATING';
+export var NAVIGATING = 'NAVIGATING';
 ////////////////////////////////////////////////////////////////////////////////
 // Actions:
 // Used to sync the state with controlled state, right after mounting
-export const INIT = 'INIT'; // User cleared the value w/ backspace, but input still has focus
+export var INIT = 'INIT'; // User cleared the value w/ backspace, but input still has focus
 
-export const CLEAR = 'CLEAR'; // User cleared the value w/ backspace, but input still has focus
+export var CLEAR = 'CLEAR'; // User cleared the value w/ backspace, but input still has focus
 
-export const CLEAR_SELECTION = 'CLEAR_SELECTION'; // User is typing
+export var CLEAR_SELECTION = 'CLEAR_SELECTION'; // User is typing
 
-export const CHANGE = 'CHANGE'; // User is navigating w/ the keyboard
+export var CHANGE = 'CHANGE'; // User is navigating w/ the keyboard
 
-export const NAVIGATE = 'NAVIGATE'; // User can be navigating with keyboard and then click instead, we want the
+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
 
-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
+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
 
-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';
+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';
 ////////////////////////////////////////////////////////////////////////////////
-export const stateChart = {
+export var stateChart = {
   initial: IDLE,
-  states: {
-    [IDLE]: {
-      on: {
-        [BLUR]: IDLE,
-        [CLEAR]: IDLE,
-        [INIT]: IDLE,
-        [CLEAR_SELECTION]: IDLE,
-        [CHANGE]: SUGGESTING,
-        [FOCUS]: SUGGESTING,
-        [NAVIGATE]: NAVIGATING,
-        [OPEN_WITH_BUTTON]: SUGGESTING
-      }
-    },
-    [SUGGESTING]: {
-      on: {
-        [CHANGE]: SUGGESTING,
-        [FOCUS]: SUGGESTING,
-        [INIT]: SUGGESTING,
-        [NAVIGATE]: NAVIGATING,
-        [CLEAR]: IDLE,
-        [CLEAR_SELECTION]: SUGGESTING,
-        [ESCAPE]: IDLE,
-        [BLUR]: IDLE,
-        [SELECT_WITH_CLICK]: IDLE,
-        [CLOSE_WITH_BUTTON]: IDLE
-      }
-    },
-    [NAVIGATING]: {
-      on: {
-        [CHANGE]: SUGGESTING,
-        [FOCUS]: SUGGESTING,
-        [INIT]: NAVIGATING,
-        [CLEAR]: IDLE,
-        [CLEAR_SELECTION]: NAVIGATING,
-        [BLUR]: IDLE,
-        [ESCAPE]: IDLE,
-        [NAVIGATE]: NAVIGATING,
-        [SELECT_WITH_KEYBOARD]: IDLE,
-        [SELECT_WITH_CLICK]: IDLE,
-        [CLOSE_WITH_BUTTON]: IDLE
-      }
-    }
-  }
+  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)
 };
 export function comboboxReducer(data, action) {
-  const nextState = _extends({}, data, {
+  var nextState = _extends({}, data, {
     state: action.nextState,
     lastActionType: action.type
   });
@@ -154,8 +121,10 @@ export function comboboxReducer(data, action) {
       throw new Error("Unknown action ".concat(action.type));
   }
 }
-const visibleStates = [SUGGESTING, NAVIGATING];
-export const isVisible = state => visibleStates.indexOf(state) >= 0; ////////////////////////////////////////////////////////////////////////////////
+var visibleStates = [SUGGESTING, NAVIGATING];
+export var isVisible = function isVisible(state) {
+  return 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
@@ -164,7 +133,7 @@ export const isVisible = state => visibleStates.indexOf(state) >= 0; ///////////
 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(() => {
+  useEffect(function () {
     if (lastActionType === NAVIGATE || lastActionType === ESCAPE || lastActionType === SELECT_WITH_CLICK || lastActionType === OPEN_WITH_BUTTON) {
       inputRef.current && inputRef.current.focus();
     }
@@ -172,8 +141,10 @@ export function useFocusManagement(lastActionType, inputRef) {
 }
 
 function getNextItem(currentItem, incr, optionsItems, autocomplete) {
-  const index = currentItem === '' ? -1 : optionsItems.findIndex(n => String(n.id) === currentItem);
-  const optionsLen = optionsItems.length; // Nothing selected, either go to start, or end
+  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 (incr > 0) {
@@ -184,7 +155,7 @@ function getNextItem(currentItem, incr, optionsItems, autocomplete) {
       return optionsItems[optionsLen - 1].id;
     }
   } else if (autocomplete) {
-    const nextIndex = index + incr;
+    var nextIndex = index + incr;
 
     if (nextIndex < 0 || nextIndex >= optionsLen) {
       // Next is outside the bounds of list, return nothing selected
@@ -200,23 +171,22 @@ function getNextItem(currentItem, incr, optionsItems, autocomplete) {
 
 
 export function useKeyDown() {
-  const {
-    data: {
-      text,
-      navigationItem
-    },
-    onSelect,
-    optionsRef,
-    inputRef,
-    state,
-    transition,
-    autocompletePropRef,
-    clearOnEscapeRef,
-    persistSelectionRef,
-    listScope
-  } = useComboBoxContext();
+  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;
+
   return function handleKeyDown(event) {
-    const optionNodes = listScope.current.queryAllNodes(scopeQuery);
+    var optionNodes = listScope.current.queryAllNodes(scopeQuery);
 
     switch (event.key) {
       case 'ArrowUp':
@@ -224,7 +194,7 @@ export function useKeyDown() {
         {
           // Don't scroll the page
           event.preventDefault();
-          const optionsLen = optionNodes.length; // If the developer didn't render any options, there's no point in
+          var 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.
 
@@ -239,14 +209,14 @@ export function useKeyDown() {
             });
           } else {
             // ArrowUp decreases index, ArrowDown increases
-            const incr = event.key === 'ArrowUp' ? -1 : 1; // When autocompletting, we'll not cycle through the list directly
+            var incr = event.key === 'ArrowUp' ? -1 : 1; // When autocompletting, we'll not cycle through the list directly
 
-            const autocomplete = autocompletePropRef.current; // Get next selected item
+            var autocomplete = autocompletePropRef.current; // Get next selected item
 
-            const nextItem = getNextItem(navigationItem, incr, optionNodes, autocomplete);
-            const value = nextItem !== '' ? optionsRef.current[nextItem].text : null;
+            var nextItem = getNextItem(navigationItem, incr, optionNodes, autocomplete);
+            var value = nextItem !== '' ? optionsRef.current[nextItem].text : null;
             transition(NAVIGATE, {
-              value,
+              value: value,
               item: nextItem
             });
           }
@@ -264,18 +234,19 @@ export function useKeyDown() {
             } // emulate a inputRef change event, might not work in future versions of React
 
 
-            const lastValue = inputRef.current.value;
+            var lastValue = inputRef.current.value;
             inputRef.current.value = '';
-            const tracker = inputRef.current._valueTracker;
+            var tracker = inputRef.current._valueTracker;
 
             if (tracker) {
               tracker.setValue(lastValue);
             }
 
-            const event = new Event('change', {
+            var _event = new Event('change', {
               bubbles: true
             });
-            inputRef.current.dispatchEvent(event);
+
+            inputRef.current.dispatchEvent(_event);
           }
 
           break;
@@ -284,10 +255,9 @@ export function useKeyDown() {
       case 'Enter':
         {
           if (state === NAVIGATING && navigationItem !== '') {
-            const {
-              value: navigationValue,
-              text: navigationText
-            } = optionsRef.current[navigationItem]; // don't want to submit forms
+            var _optionsRef$current$n = optionsRef.current[navigationItem],
+                navigationValue = _optionsRef$current$n.value,
+                navigationText = _optionsRef$current$n.text; // don't want to submit forms
 
             event.preventDefault();
             onSelect && onSelect(navigationText, navigationItem, navigationValue);
@@ -303,22 +273,20 @@ export function useKeyDown() {
   };
 }
 export function useBlur() {
-  const {
-    data: {
-      navigationItem,
-      text: stateText
-    },
-    transition,
-    optionsRef,
-    popoverRef,
-    inputRef,
-    buttonRef,
-    onSelect,
-    selectOnBlur // not implemented yet
-
-  } = useComboBoxContext();
+  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;
+
   return function handleBlur() {
-    requestAnimationFrame(() => {
+    requestAnimationFrame(function () {
       // 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
@@ -335,10 +303,9 @@ export function useBlur() {
             });
           } else {
             // select the currently selected item
-            const {
-              value: navigationValue,
-              text: navigationText
-            } = optionsRef.current[navigationItem];
+            var _optionsRef$current$n2 = optionsRef.current[navigationItem],
+                navigationValue = _optionsRef$current$n2.value,
+                navigationText = _optionsRef$current$n2.text;
             onSelect && onSelect(navigationText, navigationItem, navigationValue);
             transition(BLUR, {
               text: navigationText,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ComboBox/hooks.tsx"],"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"],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable default-case */\nimport { useEffect } from 'react';\nimport {\n  StateChart as GenericStateChart,\n  StateMachineState,\n} from '../hooks/useReducerMachine';\nimport { getCircularIndex } from '../utils/getCircularIndex';\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: React.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: React.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 {\n            value: navigationValue,\n            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 {\n              value: navigationValue,\n              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"],"file":"hooks.js"}
+{"version":3,"sources":["../../../src/ComboBox/hooks.tsx"],"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"],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable default-case */\nimport { useEffect } from 'react';\n\nimport type {\n  StateChart as GenericStateChart,\n  StateMachineState,\n} from '../hooks/useReducerMachine';\nimport { getCircularIndex } from '../utils/getCircularIndex';\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: React.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: React.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"],"file":"hooks.js"}