@basic-ui/core 0.0.38 → 0.0.41

package/build/esm/ComboBox/Combobox.js

@@ -1,50 +1,48 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { forwardRef, useRef, useMemo, useId } from 'react';
 import { stateChart, comboboxReducer, isVisible, INIT } from './hooks';
 import { ComboBoxProvider } from './context';
 import { useReducerMachine } from '../hooks/useReducerMachine';
 import { getScope } from '../hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Combobox = /*#__PURE__*/forwardRef(function Combobox(_ref, ref) {
-  let {
-    // Called whenever the user selects an item from the list
-    onSelect,
-    // opens the list when the input receives focused (but only if there are
-    // items in the list)
-    openOnFocus = false,
-    // if set to true, it will select an item after blurring
-    selectOnBlur = false,
-    children,
-    as: Comp = 'div',
-    innerAs
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["onSelect", "openOnFocus", "selectOnBlur", "children", "as", "innerAs"]);
+export var Combobox = /*#__PURE__*/forwardRef(function Combobox(_ref, ref) {
+  var onSelect = _ref.onSelect,
+      _ref$openOnFocus = _ref.openOnFocus,
+      openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
+      _ref$selectOnBlur = _ref.selectOnBlur,
+      selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
+      children = _ref.children,
+      _ref$as = _ref.as,
+      Comp = _ref$as === void 0 ? 'div' : _ref$as,
+      innerAs = _ref.innerAs,
+      rest = _objectWithoutProperties(_ref, ["onSelect", "openOnFocus", "selectOnBlur", "children", "as", "innerAs"]);
 
   // We store the values of all the ComboboxOptions on this ref. This makes it
   // possible to perform the keyboard navigation from the input on the list. We
   // manipulate this array through context so that we don't have to enforce a
   // parent/child relationship between ComboboxList and ComboboxOption.
-  const optionsRef = useRef({});
-  const listScope = useRef(getScope({
+  var optionsRef = useRef({});
+  var listScope = useRef(getScope({
     current: null
   })); // Need this to focus it
 
-  const inputRef = useRef(null);
-  const popoverRef = useRef(null);
-  const buttonRef = useRef(null); // When <ComboboxInput autocomplete={false} /> we don't want cycle back to
+  var inputRef = useRef(null);
+  var popoverRef = useRef(null);
+  var buttonRef = useRef(null); // When <ComboboxInput autocomplete={false} /> we don't want cycle back to
   // the user's value while navigating (because it's always the user's value),
   // but we need to know this in useKeyDown which is far away from the prop
   // here, so we do something sneaky and write it to this ref on context so we
   // can use it anywhere else 😛. Another new trick for me and I'm excited
   // about this one too!
 
-  const autocompletePropRef = useRef(false);
-  const persistSelectionRef = useRef(false);
-  const clearOnEscapeRef = useRef(false);
-  const listboxIdRef = useRef();
-  const labelIdRef = useRef();
-  const defaultData = {
+  var autocompletePropRef = useRef(false);
+  var persistSelectionRef = useRef(false);
+  var clearOnEscapeRef = useRef(false);
+  var listboxIdRef = useRef();
+  var labelIdRef = useRef();
+  var defaultData = {
     // initial state
     state: stateChart.initial,
     // the value the user has typed, we derived this also when the developer is
@@ -58,28 +56,36 @@ export const Combobox = /*#__PURE__*/forwardRef(function Combobox(_ref, ref) {
     // the last submitted action
     lastActionType: INIT
   };
-  const [state, data, transition] = useReducerMachine(stateChart, comboboxReducer, defaultData);
+
+  var _useReducerMachine = useReducerMachine(stateChart, comboboxReducer, defaultData),
+      _useReducerMachine2 = _slicedToArray(_useReducerMachine, 3),
+      state = _useReducerMachine2[0],
+      data = _useReducerMachine2[1],
+      transition = _useReducerMachine2[2];
+
   listboxIdRef.current = useId();
   labelIdRef.current = useId();
-  const context = useMemo(() => ({
-    data,
-    inputRef,
-    popoverRef,
-    buttonRef,
-    onSelect,
-    optionsRef,
-    listScope,
-    state,
-    transition,
-    listboxIdRef,
-    labelIdRef,
-    autocompletePropRef,
-    persistSelectionRef,
-    clearOnEscapeRef,
-    isVisible: isVisible(state),
-    openOnFocus,
-    selectOnBlur
-  }), [data, onSelect, listScope, state, transition, openOnFocus, selectOnBlur]);
+  var context = useMemo(function () {
+    return {
+      data: data,
+      inputRef: inputRef,
+      popoverRef: popoverRef,
+      buttonRef: buttonRef,
+      onSelect: onSelect,
+      optionsRef: optionsRef,
+      listScope: listScope,
+      state: state,
+      transition: transition,
+      listboxIdRef: listboxIdRef,
+      labelIdRef: labelIdRef,
+      autocompletePropRef: autocompletePropRef,
+      persistSelectionRef: persistSelectionRef,
+      clearOnEscapeRef: clearOnEscapeRef,
+      isVisible: isVisible(state),
+      openOnFocus: openOnFocus,
+      selectOnBlur: selectOnBlur
+    };
+  }, [data, onSelect, listScope, state, transition, openOnFocus, selectOnBlur]);
   return /*#__PURE__*/_jsx(ComboBoxProvider, {
     value: context,
     children: /*#__PURE__*/_jsx(Comp, _extends({}, rest, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ComboBox/Combobox.tsx"],"names":["forwardRef","useRef","useMemo","useId","stateChart","comboboxReducer","isVisible","INIT","ComboBoxProvider","useReducerMachine","getScope","Combobox","ref","onSelect","openOnFocus","selectOnBlur","children","as","Comp","innerAs","rest","optionsRef","listScope","current","inputRef","popoverRef","buttonRef","autocompletePropRef","persistSelectionRef","clearOnEscapeRef","listboxIdRef","labelIdRef","defaultData","state","initial","text","item","navigationItem","lastActionType","data","transition","context"],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useMemo, useId } from 'react';\nimport type * as React from 'react';\nimport {\n  stateChart,\n  comboboxReducer,\n  isVisible,\n  INIT,\n  ActionTypes,\n} from './hooks';\nimport { ComboBoxProvider, ComboBoxContextProps } from './context';\nimport { useReducerMachine } from '../hooks/useReducerMachine';\nimport { Scope, getScope } from '../hooks';\n\nexport type SelectEventHandler = (\n  text: string,\n  itemId: string,\n  obj: any\n) => void;\n\nexport type ComboboxProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onSelect'\n> & {\n  onSelect?: SelectEventHandler;\n  openOnFocus?: boolean;\n  selectOnBlur?: boolean;\n  children?: React.ReactNode;\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n};\n\nexport const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(\n  function Combobox(\n    {\n      // Called whenever the user selects an item from the list\n      onSelect,\n\n      // opens the list when the input receives focused (but only if there are\n      // items in the list)\n      openOnFocus = false,\n\n      // if set to true, it will select an item after blurring\n      selectOnBlur = false,\n\n      children,\n      as: Comp = 'div',\n      innerAs,\n      ...rest\n    }: ComboboxProps,\n    ref\n  ) {\n    // We store the values of all the ComboboxOptions on this ref. This makes it\n    // possible to perform the keyboard navigation from the input on the list. We\n    // manipulate this array through context so that we don't have to enforce a\n    // parent/child relationship between ComboboxList and ComboboxOption.\n    const optionsRef = useRef<{\n      [itemId: string]: {\n        value: string | unknown;\n        text: string;\n      };\n    }>({});\n\n    const listScope: Scope<HTMLElement> = useRef(getScope({ current: null }));\n\n    // Need this to focus it\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const popoverRef = useRef<HTMLDivElement>(null);\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n\n    // When <ComboboxInput autocomplete={false} /> we don't want cycle back to\n    // the user's value while navigating (because it's always the user's value),\n    // but we need to know this in useKeyDown which is far away from the prop\n    // here, so we do something sneaky and write it to this ref on context so we\n    // can use it anywhere else 😛. Another new trick for me and I'm excited\n    // about this one too!\n    const autocompletePropRef = useRef<boolean>(false);\n\n    const persistSelectionRef = useRef<boolean>(false);\n\n    const clearOnEscapeRef = useRef<boolean>(false);\n\n    const listboxIdRef = useRef<string | undefined>();\n\n    const labelIdRef = useRef<string | undefined>();\n\n    const defaultData = {\n      // initial state\n      state: stateChart.initial,\n      // the value the user has typed, we derived this also when the developer is\n      // controlling the value of ComboboxInput\n      text: '',\n      // the index the user has typed, we derived this also when the developer is\n      // controlling the value of ComboboxInput\n      item: '',\n      // the hash of the currently navigated item\n      navigationItem: '',\n      // the last submitted action\n      lastActionType: INIT as ActionTypes,\n    };\n\n    const [state, data, transition] = useReducerMachine(\n      stateChart,\n      comboboxReducer,\n      defaultData\n    );\n\n    listboxIdRef.current = useId();\n\n    labelIdRef.current = useId();\n\n    const context = useMemo(\n      (): ComboBoxContextProps => ({\n        data,\n        inputRef,\n        popoverRef,\n        buttonRef,\n        onSelect,\n        optionsRef,\n        listScope,\n        state,\n        transition,\n        listboxIdRef,\n        labelIdRef,\n        autocompletePropRef,\n        persistSelectionRef,\n        clearOnEscapeRef,\n        isVisible: isVisible(state),\n        openOnFocus,\n        selectOnBlur,\n      }),\n      [data, onSelect, listScope, state, transition, openOnFocus, selectOnBlur]\n    );\n\n    return (\n      <ComboBoxProvider value={context}>\n        <Comp\n          {...rest}\n          as={innerAs}\n          data-reach-combobox=\"\"\n          ref={ref}\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-owns={listboxIdRef.current}\n          aria-expanded={context.isVisible}\n        >\n          {children}\n        </Comp>\n      </ComboBoxProvider>\n    );\n  }\n);\n"],"file":"Combobox.js"}
+{"version":3,"sources":["../../../src/ComboBox/Combobox.tsx"],"names":["forwardRef","useRef","useMemo","useId","stateChart","comboboxReducer","isVisible","INIT","ComboBoxProvider","useReducerMachine","getScope","Combobox","ref","onSelect","openOnFocus","selectOnBlur","children","as","Comp","innerAs","rest","optionsRef","listScope","current","inputRef","popoverRef","buttonRef","autocompletePropRef","persistSelectionRef","clearOnEscapeRef","listboxIdRef","labelIdRef","defaultData","state","initial","text","item","navigationItem","lastActionType","data","transition","context"],"mappings":"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","sourcesContent":["import type { HTMLAttributes, ReactNode, ElementType } from 'react';\nimport { forwardRef, useRef, useMemo, useId } from 'react';\n\nimport type { ActionTypes } from './hooks';\nimport { stateChart, comboboxReducer, isVisible, INIT } from './hooks';\nimport type { ComboBoxContextProps } from './context';\nimport { ComboBoxProvider } from './context';\nimport { useReducerMachine } from '../hooks/useReducerMachine';\nimport type { Scope } from '../hooks';\nimport { getScope } from '../hooks';\n\nexport type SelectEventHandler = (\n  text: string,\n  itemId: string,\n  obj: any\n) => void;\n\nexport type ComboboxProps = Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n  onSelect?: SelectEventHandler;\n  openOnFocus?: boolean;\n  selectOnBlur?: boolean;\n  children?: ReactNode;\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n};\n\nexport const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(\n  function Combobox(\n    {\n      // Called whenever the user selects an item from the list\n      onSelect,\n\n      // opens the list when the input receives focused (but only if there are\n      // items in the list)\n      openOnFocus = false,\n\n      // if set to true, it will select an item after blurring\n      selectOnBlur = false,\n\n      children,\n      as: Comp = 'div',\n      innerAs,\n      ...rest\n    }: ComboboxProps,\n    ref\n  ) {\n    // We store the values of all the ComboboxOptions on this ref. This makes it\n    // possible to perform the keyboard navigation from the input on the list. We\n    // manipulate this array through context so that we don't have to enforce a\n    // parent/child relationship between ComboboxList and ComboboxOption.\n    const optionsRef = useRef<{\n      [itemId: string]: {\n        value: string | unknown;\n        text: string;\n      };\n    }>({});\n\n    const listScope: Scope<HTMLElement> = useRef(getScope({ current: null }));\n\n    // Need this to focus it\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const popoverRef = useRef<HTMLDivElement>(null);\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n\n    // When <ComboboxInput autocomplete={false} /> we don't want cycle back to\n    // the user's value while navigating (because it's always the user's value),\n    // but we need to know this in useKeyDown which is far away from the prop\n    // here, so we do something sneaky and write it to this ref on context so we\n    // can use it anywhere else 😛. Another new trick for me and I'm excited\n    // about this one too!\n    const autocompletePropRef = useRef<boolean>(false);\n\n    const persistSelectionRef = useRef<boolean>(false);\n\n    const clearOnEscapeRef = useRef<boolean>(false);\n\n    const listboxIdRef = useRef<string | undefined>();\n\n    const labelIdRef = useRef<string | undefined>();\n\n    const defaultData = {\n      // initial state\n      state: stateChart.initial,\n      // the value the user has typed, we derived this also when the developer is\n      // controlling the value of ComboboxInput\n      text: '',\n      // the index the user has typed, we derived this also when the developer is\n      // controlling the value of ComboboxInput\n      item: '',\n      // the hash of the currently navigated item\n      navigationItem: '',\n      // the last submitted action\n      lastActionType: INIT as ActionTypes,\n    };\n\n    const [state, data, transition] = useReducerMachine(\n      stateChart,\n      comboboxReducer,\n      defaultData\n    );\n\n    listboxIdRef.current = useId();\n\n    labelIdRef.current = useId();\n\n    const context = useMemo(\n      (): ComboBoxContextProps => ({\n        data,\n        inputRef,\n        popoverRef,\n        buttonRef,\n        onSelect,\n        optionsRef,\n        listScope,\n        state,\n        transition,\n        listboxIdRef,\n        labelIdRef,\n        autocompletePropRef,\n        persistSelectionRef,\n        clearOnEscapeRef,\n        isVisible: isVisible(state),\n        openOnFocus,\n        selectOnBlur,\n      }),\n      [data, onSelect, listScope, state, transition, openOnFocus, selectOnBlur]\n    );\n\n    return (\n      <ComboBoxProvider value={context}>\n        <Comp\n          {...rest}\n          as={innerAs}\n          data-reach-combobox=\"\"\n          ref={ref}\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-owns={listboxIdRef.current}\n          aria-expanded={context.isVisible}\n        >\n          {children}\n        </Comp>\n      </ComboBoxProvider>\n    );\n  }\n);\n"],"file":"Combobox.js"}

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

@@ -1,9 +1,9 @@
-import type * as React from 'react';
-export interface ComboboxButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    as?: React.ElementType<any>;
-    innerAs?: React.ElementType<any>;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
-    children?: React.ReactNode;
+import type { ButtonHTMLAttributes, ElementType, KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
+export interface ComboboxButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    as?: ElementType<any>;
+    innerAs?: ElementType<any>;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+    children?: ReactNode;
 }
-export declare const ComboboxButton: React.ForwardRefExoticComponent<ComboboxButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxButton: import("react").ForwardRefExoticComponent<ComboboxButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/build/esm/ComboBox/ComboboxButton.js

@@ -1,32 +1,31 @@
 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 { useComboBoxContext } from './context';
 import { useKeyDown, IDLE, OPEN_WITH_BUTTON, CLOSE_WITH_BUTTON } from './hooks';
 import { wrapEvent } from '../utils/wrapEvent';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ComboboxButton = /*#__PURE__*/forwardRef(function ComboboxButton(_ref, ref) {
-  let {
-    as: Comp = 'button',
-    innerAs,
-    onClick,
-    onKeyDown
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "innerAs", "onClick", "onKeyDown"]);
+export var ComboboxButton = /*#__PURE__*/forwardRef(function ComboboxButton(_ref, ref) {
+  var _ref$as = _ref.as,
+      Comp = _ref$as === void 0 ? 'button' : _ref$as,
+      innerAs = _ref.innerAs,
+      onClick = _ref.onClick,
+      onKeyDown = _ref.onKeyDown,
+      props = _objectWithoutProperties(_ref, ["as", "innerAs", "onClick", "onKeyDown"]);
 
-  const {
-    transition,
-    data,
-    state,
-    buttonRef,
-    listboxIdRef,
-    isVisible
-  } = useComboBoxContext();
-  const handleKeyDown = useKeyDown();
+  var _useComboBoxContext = useComboBoxContext(),
+      transition = _useComboBoxContext.transition,
+      data = _useComboBoxContext.data,
+      state = _useComboBoxContext.state,
+      buttonRef = _useComboBoxContext.buttonRef,
+      listboxIdRef = _useComboBoxContext.listboxIdRef,
+      isVisible = _useComboBoxContext.isVisible;
 
-  const handleClick = () => {
-    const payload = {
+  var handleKeyDown = useKeyDown();
+
+  var handleClick = function handleClick() {
+    var payload = {
       item: data.navigationItem
     };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ComboBox/ComboboxButton.tsx"],"names":["forwardRef","useComboBoxContext","useKeyDown","IDLE","OPEN_WITH_BUTTON","CLOSE_WITH_BUTTON","wrapEvent","assignMultipleRefs","ComboboxButton","ref","as","Comp","innerAs","onClick","onKeyDown","props","transition","data","state","buttonRef","listboxIdRef","isVisible","handleKeyDown","handleClick","payload","item","navigationItem","current"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AAEA,SAASC,kBAAT,QAAmC,WAAnC;AACA,SAASC,UAAT,EAAqBC,IAArB,EAA2BC,gBAA3B,EAA6CC,iBAA7C,QAAsE,SAAtE;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,kBAAT,QAAmC,oBAAnC;;AAWA,OAAO,MAAMC,cAAc,gBAAGR,UAAU,CAGtC,SAASQ,cAAT,OAEAC,GAFA,EAGA;AAAA,MAFA;AAAEC,IAAAA,EAAE,EAAEC,IAAI,GAAG,QAAb;AAAuBC,IAAAA,OAAvB;AAAgCC,IAAAA,OAAhC;AAAyCC,IAAAA;AAAzC,GAEA;AAAA,MAFuDC,KAEvD;;AACA,QAAM;AACJC,IAAAA,UADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,KAHI;AAIJC,IAAAA,SAJI;AAKJC,IAAAA,YALI;AAMJC,IAAAA;AANI,MAOFpB,kBAAkB,EAPtB;AASA,QAAMqB,aAAa,GAAGpB,UAAU,EAAhC;;AAEA,QAAMqB,WAAW,GAAG,MAAM;AACxB,UAAMC,OAAO,GAAG;AACdC,MAAAA,IAAI,EAAER,IAAI,CAACS;AADG,KAAhB;;AAIA,QAAIR,KAAK,KAAKf,IAAd,EAAoB;AAClBa,MAAAA,UAAU,CAACZ,gBAAD,EAAmBoB,OAAnB,CAAV;AACD,KAFD,MAEO;AACLR,MAAAA,UAAU,CAACX,iBAAD,EAAoBmB,OAApB,CAAV;AACD;AACF,GAVD;;AAYA,sBACE,KAAC,IAAD;AACE,IAAA,EAAE,EAAEZ,OADN;AAEE,kCAA2B,EAF7B;AAGE,qBAAeQ,YAAY,CAACO,OAH9B;AAIE,qBAAc,SAJhB;AAKE,qBAAeN,SALjB;AAME,IAAA,GAAG,EAAEd,kBAAkB,CAACE,GAAD,EAAMU,SAAN,CANzB;AAOE,IAAA,OAAO,EAAEb,SAAS,CAACO,OAAD,EAAUU,WAAV,CAPpB;AAQE,IAAA,SAAS,EAAEjB,SAAS,CAACQ,SAAD,EAAYQ,aAAZ;AARtB,KASMP,KATN,EADF;AAaD,CA3CuC,CAAjC","sourcesContent":["import { forwardRef } from 'react';\nimport type * as React from 'react';\nimport { useComboBoxContext } from './context';\nimport { useKeyDown, IDLE, OPEN_WITH_BUTTON, CLOSE_WITH_BUTTON } from './hooks';\nimport { wrapEvent } from '../utils/wrapEvent';\nimport { assignMultipleRefs } from '../utils/assignRef';\n\nexport interface ComboboxButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n  children?: React.ReactNode;\n}\n\nexport const ComboboxButton = forwardRef<\n  HTMLButtonElement,\n  ComboboxButtonProps\n>(function ComboboxButton(\n  { as: Comp = 'button', innerAs, onClick, onKeyDown, ...props },\n  ref\n) {\n  const {\n    transition,\n    data,\n    state,\n    buttonRef,\n    listboxIdRef,\n    isVisible,\n  } = useComboBoxContext();\n\n  const handleKeyDown = useKeyDown();\n\n  const handleClick = () => {\n    const payload = {\n      item: data.navigationItem,\n    };\n\n    if (state === IDLE) {\n      transition(OPEN_WITH_BUTTON, payload);\n    } else {\n      transition(CLOSE_WITH_BUTTON, payload);\n    }\n  };\n\n  return (\n    <Comp\n      as={innerAs}\n      data-reach-combobox-button=\"\"\n      aria-controls={listboxIdRef.current}\n      aria-haspopup=\"listbox\"\n      aria-expanded={isVisible}\n      ref={assignMultipleRefs(ref, buttonRef)}\n      onClick={wrapEvent(onClick, handleClick)}\n      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n      {...props}\n    />\n  );\n});\n"],"file":"ComboboxButton.js"}
+{"version":3,"sources":["../../../src/ComboBox/ComboboxButton.tsx"],"names":["forwardRef","useComboBoxContext","useKeyDown","IDLE","OPEN_WITH_BUTTON","CLOSE_WITH_BUTTON","wrapEvent","assignMultipleRefs","ComboboxButton","ref","as","Comp","innerAs","onClick","onKeyDown","props","transition","data","state","buttonRef","listboxIdRef","isVisible","handleKeyDown","handleClick","payload","item","navigationItem","current"],"mappings":";;AAOA,SAASA,UAAT,QAA2B,OAA3B;AAEA,SAASC,kBAAT,QAAmC,WAAnC;AACA,SAASC,UAAT,EAAqBC,IAArB,EAA2BC,gBAA3B,EAA6CC,iBAA7C,QAAsE,SAAtE;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,kBAAT,QAAmC,oBAAnC;;AAWA,OAAO,IAAMC,cAAc,gBAAGR,UAAU,CAGtC,SAASQ,cAAT,OAEAC,GAFA,EAGA;AAAA,qBAFEC,EAEF;AAAA,MAFMC,IAEN,wBAFa,QAEb;AAAA,MAFuBC,OAEvB,QAFuBA,OAEvB;AAAA,MAFgCC,OAEhC,QAFgCA,OAEhC;AAAA,MAFyCC,SAEzC,QAFyCA,SAEzC;AAAA,MAFuDC,KAEvD;;AAAA,4BAEEd,kBAAkB,EAFpB;AAAA,MACQe,UADR,uBACQA,UADR;AAAA,MACoBC,IADpB,uBACoBA,IADpB;AAAA,MAC0BC,KAD1B,uBAC0BA,KAD1B;AAAA,MACiCC,SADjC,uBACiCA,SADjC;AAAA,MAC4CC,YAD5C,uBAC4CA,YAD5C;AAAA,MAC0DC,SAD1D,uBAC0DA,SAD1D;;AAIA,MAAMC,aAAa,GAAGpB,UAAU,EAAhC;;AAEA,MAAMqB,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAMC,OAAO,GAAG;AACdC,MAAAA,IAAI,EAAER,IAAI,CAACS;AADG,KAAhB;;AAIA,QAAIR,KAAK,KAAKf,IAAd,EAAoB;AAClBa,MAAAA,UAAU,CAACZ,gBAAD,EAAmBoB,OAAnB,CAAV;AACD,KAFD,MAEO;AACLR,MAAAA,UAAU,CAACX,iBAAD,EAAoBmB,OAApB,CAAV;AACD;AACF,GAVD;;AAYA,sBACE,KAAC,IAAD;AACE,IAAA,EAAE,EAAEZ,OADN;AAEE,kCAA2B,EAF7B;AAGE,qBAAeQ,YAAY,CAACO,OAH9B;AAIE,qBAAc,SAJhB;AAKE,qBAAeN,SALjB;AAME,IAAA,GAAG,EAAEd,kBAAkB,CAACE,GAAD,EAAMU,SAAN,CANzB;AAOE,IAAA,OAAO,EAAEb,SAAS,CAACO,OAAD,EAAUU,WAAV,CAPpB;AAQE,IAAA,SAAS,EAAEjB,SAAS,CAACQ,SAAD,EAAYQ,aAAZ;AARtB,KASMP,KATN,EADF;AAaD,CArCuC,CAAjC","sourcesContent":["import type {\n  ButtonHTMLAttributes,\n  ElementType,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\n\nimport { useComboBoxContext } from './context';\nimport { useKeyDown, IDLE, OPEN_WITH_BUTTON, CLOSE_WITH_BUTTON } from './hooks';\nimport { wrapEvent } from '../utils/wrapEvent';\nimport { assignMultipleRefs } from '../utils/assignRef';\n\nexport interface ComboboxButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;\n  children?: ReactNode;\n}\n\nexport const ComboboxButton = forwardRef<\n  HTMLButtonElement,\n  ComboboxButtonProps\n>(function ComboboxButton(\n  { as: Comp = 'button', innerAs, onClick, onKeyDown, ...props },\n  ref\n) {\n  const { transition, data, state, buttonRef, listboxIdRef, isVisible } =\n    useComboBoxContext();\n\n  const handleKeyDown = useKeyDown();\n\n  const handleClick = () => {\n    const payload = {\n      item: data.navigationItem,\n    };\n\n    if (state === IDLE) {\n      transition(OPEN_WITH_BUTTON, payload);\n    } else {\n      transition(CLOSE_WITH_BUTTON, payload);\n    }\n  };\n\n  return (\n    <Comp\n      as={innerAs}\n      data-reach-combobox-button=\"\"\n      aria-controls={listboxIdRef.current}\n      aria-haspopup=\"listbox\"\n      aria-expanded={isVisible}\n      ref={assignMultipleRefs(ref, buttonRef)}\n      onClick={wrapEvent(onClick, handleClick)}\n      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n      {...props}\n    />\n  );\n});\n"],"file":"ComboboxButton.js"}

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

@@ -1,17 +1,17 @@
-import type * as React from 'react';
-export interface ComboboxInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+import type { ChangeEventHandler, ElementType, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, MouseEventHandler } from 'react';
+export interface ComboboxInputProps extends InputHTMLAttributes<HTMLInputElement> {
     clearOnEscape?: boolean;
     selectOnClick?: boolean;
     autocomplete?: boolean;
     defaultValue?: string;
     value?: string;
-    onClick?: React.MouseEventHandler<HTMLInputElement>;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
-    as?: React.ElementType<any>;
-    innerAs?: React.ElementType<any>;
+    onClick?: MouseEventHandler<HTMLInputElement>;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    as?: ElementType<any>;
+    innerAs?: ElementType<any>;
     id?: string;
 }
-export declare const ComboboxInput: React.ForwardRefExoticComponent<ComboboxInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const ComboboxInput: import("react").ForwardRefExoticComponent<ComboboxInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/build/esm/ComboBox/ComboboxInput.js

@@ -1,54 +1,54 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { forwardRef, useEffect, useRef } from 'react';
 import { useBlur, CLEAR, CHANGE, useKeyDown, SELECT_WITH_CLICK, FOCUS, NAVIGATING, INIT, useFocusManagement } from './hooks';
 import { assignMultipleRefs, wrapEvent } from '../utils';
 import { useComboBoxContext } from './context';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ComboboxInput = /*#__PURE__*/forwardRef(function ComboboxInput(_ref, forwardedRef) {
-  let {
-    as: Comp = 'input',
-    innerAs,
-    selectOnClick = false,
-    autocomplete = true,
-    clearOnEscape = false,
-    // wrapped events
-    onClick,
-    onChange,
-    onKeyDown,
-    onBlur,
-    onFocus,
-    id: preferredId,
-    defaultValue = '',
-    // might be controlled
-    value: controlledValue
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "innerAs", "selectOnClick", "autocomplete", "clearOnEscape", "onClick", "onChange", "onKeyDown", "onBlur", "onFocus", "id", "defaultValue", "value"]);
+export var ComboboxInput = /*#__PURE__*/forwardRef(function ComboboxInput(_ref, forwardedRef) {
+  var _ref$as = _ref.as,
+      Comp = _ref$as === void 0 ? 'input' : _ref$as,
+      innerAs = _ref.innerAs,
+      _ref$selectOnClick = _ref.selectOnClick,
+      selectOnClick = _ref$selectOnClick === void 0 ? false : _ref$selectOnClick,
+      _ref$autocomplete = _ref.autocomplete,
+      autocomplete = _ref$autocomplete === void 0 ? true : _ref$autocomplete,
+      _ref$clearOnEscape = _ref.clearOnEscape,
+      clearOnEscape = _ref$clearOnEscape === void 0 ? false : _ref$clearOnEscape,
+      onClick = _ref.onClick,
+      onChange = _ref.onChange,
+      onKeyDown = _ref.onKeyDown,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      preferredId = _ref.id,
+      _ref$defaultValue = _ref.defaultValue,
+      defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+      controlledValue = _ref.value,
+      props = _objectWithoutProperties(_ref, ["as", "innerAs", "selectOnClick", "autocomplete", "clearOnEscape", "onClick", "onChange", "onKeyDown", "onBlur", "onFocus", "id", "defaultValue", "value"]);
+
+  var _useComboBoxContext = useComboBoxContext(),
+      _useComboBoxContext$d = _useComboBoxContext.data,
+      navigationItem = _useComboBoxContext$d.navigationItem,
+      text = _useComboBoxContext$d.text,
+      lastActionType = _useComboBoxContext$d.lastActionType,
+      inputRef = _useComboBoxContext.inputRef,
+      state = _useComboBoxContext.state,
+      transition = _useComboBoxContext.transition,
+      listboxIdRef = _useComboBoxContext.listboxIdRef,
+      autocompletePropRef = _useComboBoxContext.autocompletePropRef,
+      clearOnEscapeRef = _useComboBoxContext.clearOnEscapeRef,
+      openOnFocus = _useComboBoxContext.openOnFocus,
+      optionsRef = _useComboBoxContext.optionsRef,
+      labelIdRef = _useComboBoxContext.labelIdRef; // Keep focus on the input component
 
-  const {
-    data: {
-      navigationItem,
-      text,
-      lastActionType
-    },
-    inputRef,
-    state,
-    transition,
-    listboxIdRef,
-    autocompletePropRef,
-    clearOnEscapeRef,
-    openOnFocus,
-    optionsRef,
-    labelIdRef
-  } = useComboBoxContext(); // Keep focus on the input component
 
   useFocusManagement(lastActionType, inputRef); // Keep using the defaultValue until the user started interacting
 
-  const hasStartedInteracting = useRef(false); // Because we close the List on blur, we need to track if the blur is
+  var hasStartedInteracting = useRef(false); // Because we close the List on blur, we need to track if the blur is
   // caused by clicking inside the list, and if so, don't close the List.
 
-  const selectOnClickRef = useRef(false);
-  const handleBlur = useBlur(); // Update ref props
+  var selectOnClickRef = useRef(false);
+  var handleBlur = useBlur(); // Update ref props
 
   autocompletePropRef.current = autocomplete;
   clearOnEscapeRef.current = clearOnEscape;
@@ -56,23 +56,23 @@ export const ComboboxInput = /*#__PURE__*/forwardRef(function ComboboxInput(_ref
   // types, instead the developer controls it with the normal input onChange
   // prop
 
-  const handleChange = e => {
+  var handleChange = function handleChange(e) {
     // After the user started typing, lets forget the defaultValue
     hasStartedInteracting.current = true;
-    const text = e.target.value;
+    var text = e.target.value;
 
     if (text.trim() === '') {
       transition(CLEAR);
     } else {
       transition(CHANGE, {
-        text
+        text: text
       });
     }
   };
 
-  const handleKeyDown = useKeyDown();
+  var handleKeyDown = useKeyDown();
 
-  const handleFocus = () => {
+  var handleFocus = function handleFocus() {
     if (selectOnClick) {
       selectOnClickRef.current = true;
     } // If we select an option with click, useFocusManagement will focus the
@@ -87,22 +87,24 @@ export const ComboboxInput = /*#__PURE__*/forwardRef(function ComboboxInput(_ref
     }
   };
 
-  const handleClick = () => {
+  var handleClick = function handleClick() {
     if (selectOnClickRef.current) {
       selectOnClickRef.current = false;
       inputRef.current && inputRef.current.select();
     }
   };
 
-  const navigationText = navigationItem !== '' ? optionsRef.current[navigationItem].text : undefined;
-  const fallbackValue = hasStartedInteracting.current ? '' : defaultValue;
-  const inputStrings = // When idle, we don't have a navigationText on ArrowUp/Down
+  var navigationText = navigationItem !== '' ? optionsRef.current[navigationItem].text : undefined;
+  var fallbackValue = hasStartedInteracting.current ? '' : defaultValue;
+  var inputStrings = // When idle, we don't have a navigationText on ArrowUp/Down
   autocomplete && state === NAVIGATING ? [navigationText, controlledValue, text, fallbackValue] : [controlledValue, text, fallbackValue];
-  const inputValue = inputStrings.find(str => str !== undefined); // If they are controlling the value we still need to do our transitions, so
+  var inputValue = inputStrings.find(function (str) {
+    return str !== undefined;
+  }); // If they are controlling the value we still need to do our transitions, so
   // we have this derived state to emulate onChange of the input as we receive
   // new `value`s ...[*]
 
-  useEffect(() => {
+  useEffect(function () {
     transition(INIT, {
       text: inputValue,
       item: ''

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ComboBox/ComboboxInput.tsx"],"names":["forwardRef","useEffect","useRef","useBlur","CLEAR","CHANGE","useKeyDown","SELECT_WITH_CLICK","FOCUS","NAVIGATING","INIT","useFocusManagement","assignMultipleRefs","wrapEvent","useComboBoxContext","ComboboxInput","forwardedRef","as","Comp","innerAs","selectOnClick","autocomplete","clearOnEscape","onClick","onChange","onKeyDown","onBlur","onFocus","id","preferredId","defaultValue","value","controlledValue","props","data","navigationItem","text","lastActionType","inputRef","state","transition","listboxIdRef","autocompletePropRef","clearOnEscapeRef","openOnFocus","optionsRef","labelIdRef","hasStartedInteracting","selectOnClickRef","handleBlur","current","handleChange","e","target","trim","handleKeyDown","handleFocus","item","handleClick","select","navigationText","undefined","fallbackValue","inputStrings","inputValue","find","str"],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type * as React from 'react';\nimport {\n  useBlur,\n  CLEAR,\n  CHANGE,\n  useKeyDown,\n  SELECT_WITH_CLICK,\n  FOCUS,\n  NAVIGATING,\n  INIT,\n  useFocusManagement,\n} from './hooks';\nimport { assignMultipleRefs, wrapEvent } from '../utils';\nimport { useComboBoxContext } from './context';\n\nexport interface ComboboxInputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  // clear on ESC\n  clearOnEscape?: boolean;\n  // highlights all the text in the box on click when true\n  selectOnClick?: boolean;\n  // updates the value in the input when navigating w/ the keyboard\n  autocomplete?: boolean;\n  // initial value for uncontrolled mode\n  defaultValue?: string;\n  // value for controlled mode\n  value?: string;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  id?: string;\n}\n\nexport const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(\n  function ComboboxInput(\n    {\n      as: Comp = 'input',\n      innerAs,\n      selectOnClick = false,\n      autocomplete = true,\n      clearOnEscape = false,\n\n      // wrapped events\n      onClick,\n      onChange,\n      onKeyDown,\n      onBlur,\n      onFocus,\n\n      id: preferredId,\n\n      defaultValue = '',\n\n      // might be controlled\n      value: controlledValue,\n      ...props\n    },\n    forwardedRef\n  ) {\n    const {\n      data: { navigationItem, text, lastActionType },\n      inputRef,\n      state,\n      transition,\n      listboxIdRef,\n      autocompletePropRef,\n      clearOnEscapeRef,\n      openOnFocus,\n      optionsRef,\n      labelIdRef,\n    } = useComboBoxContext();\n\n    // Keep focus on the input component\n    useFocusManagement(lastActionType, inputRef);\n\n    // Keep using the defaultValue until the user started interacting\n    const hasStartedInteracting = useRef(false);\n\n    // Because we close the List on blur, we need to track if the blur is\n    // caused by clicking inside the list, and if so, don't close the List.\n    const selectOnClickRef = useRef(false);\n\n    const handleBlur = useBlur();\n\n    // Update ref props\n    autocompletePropRef.current = autocomplete;\n    clearOnEscapeRef.current = clearOnEscape;\n    listboxIdRef.current = preferredId || listboxIdRef.current;\n\n    // [*]... and when controlled, we don't trigger handleValueChange as the user\n    // types, instead the developer controls it with the normal input onChange\n    // prop\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      // After the user started typing, lets forget the defaultValue\n      hasStartedInteracting.current = true;\n\n      const text = e.target.value;\n      if (text.trim() === '') {\n        transition(CLEAR);\n      } else {\n        transition(CHANGE, { text });\n      }\n    };\n\n    const handleKeyDown = useKeyDown();\n\n    const handleFocus = () => {\n      if (selectOnClick) {\n        selectOnClickRef.current = true;\n      }\n      // If we select an option with click, useFocusManagement will focus the\n      // input, in those cases we don't want to cause the menu to open back up,\n      // so we guard behind these states\n      if (openOnFocus && lastActionType !== SELECT_WITH_CLICK) {\n        transition(FOCUS, {\n          item: navigationItem,\n        });\n      }\n    };\n\n    const handleClick = () => {\n      if (selectOnClickRef.current) {\n        selectOnClickRef.current = false;\n        inputRef.current && inputRef.current.select();\n      }\n    };\n\n    const navigationText =\n      navigationItem !== ''\n        ? optionsRef.current[navigationItem].text\n        : undefined;\n\n    const fallbackValue = hasStartedInteracting.current ? '' : defaultValue;\n\n    const inputStrings =\n      // When idle, we don't have a navigationText on ArrowUp/Down\n      autocomplete && state === NAVIGATING\n        ? [navigationText, controlledValue, text, fallbackValue]\n        : [controlledValue, text, fallbackValue];\n\n    const inputValue = inputStrings.find((str) => str !== undefined);\n\n    // If they are controlling the value we still need to do our transitions, so\n    // we have this derived state to emulate onChange of the input as we receive\n    // new `value`s ...[*]\n    useEffect(() => {\n      transition(INIT, { text: inputValue, item: '' });\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    return (\n      <Comp\n        {...props}\n        as={innerAs}\n        data-reach-combobox-input=\"\"\n        ref={assignMultipleRefs(inputRef, forwardedRef)}\n        value={inputValue}\n        onClick={wrapEvent(onClick, handleClick)}\n        onBlur={wrapEvent(onBlur, handleBlur)}\n        onFocus={wrapEvent(onFocus, handleFocus)}\n        onChange={wrapEvent(onChange, handleChange)}\n        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n        aria-labelledby={labelIdRef.current}\n        id={listboxIdRef.current}\n        aria-autocomplete=\"both\"\n        aria-activedescendant={\n          navigationItem !== '' ? navigationItem : undefined\n        }\n        autoComplete=\"off\"\n      />\n    );\n  }\n);\n"],"file":"ComboboxInput.js"}
+{"version":3,"sources":["../../../src/ComboBox/ComboboxInput.tsx"],"names":["forwardRef","useEffect","useRef","useBlur","CLEAR","CHANGE","useKeyDown","SELECT_WITH_CLICK","FOCUS","NAVIGATING","INIT","useFocusManagement","assignMultipleRefs","wrapEvent","useComboBoxContext","ComboboxInput","forwardedRef","as","Comp","innerAs","selectOnClick","autocomplete","clearOnEscape","onClick","onChange","onKeyDown","onBlur","onFocus","preferredId","id","defaultValue","controlledValue","value","props","data","navigationItem","text","lastActionType","inputRef","state","transition","listboxIdRef","autocompletePropRef","clearOnEscapeRef","openOnFocus","optionsRef","labelIdRef","hasStartedInteracting","selectOnClickRef","handleBlur","current","handleChange","e","target","trim","handleKeyDown","handleFocus","item","handleClick","select","navigationText","undefined","fallbackValue","inputStrings","inputValue","find","str"],"mappings":"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","sourcesContent":["import type {\n  ChangeEvent,\n  ChangeEventHandler,\n  ElementType,\n  FocusEventHandler,\n  InputHTMLAttributes,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from 'react';\nimport { forwardRef, useEffect, useRef } from 'react';\n\nimport {\n  useBlur,\n  CLEAR,\n  CHANGE,\n  useKeyDown,\n  SELECT_WITH_CLICK,\n  FOCUS,\n  NAVIGATING,\n  INIT,\n  useFocusManagement,\n} from './hooks';\nimport { assignMultipleRefs, wrapEvent } from '../utils';\nimport { useComboBoxContext } from './context';\n\nexport interface ComboboxInputProps\n  extends InputHTMLAttributes<HTMLInputElement> {\n  // clear on ESC\n  clearOnEscape?: boolean;\n  // highlights all the text in the box on click when true\n  selectOnClick?: boolean;\n  // updates the value in the input when navigating w/ the keyboard\n  autocomplete?: boolean;\n  // initial value for uncontrolled mode\n  defaultValue?: string;\n  // value for controlled mode\n  value?: string;\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  id?: string;\n}\n\nexport const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(\n  function ComboboxInput(\n    {\n      as: Comp = 'input',\n      innerAs,\n      selectOnClick = false,\n      autocomplete = true,\n      clearOnEscape = false,\n\n      // wrapped events\n      onClick,\n      onChange,\n      onKeyDown,\n      onBlur,\n      onFocus,\n\n      id: preferredId,\n\n      defaultValue = '',\n\n      // might be controlled\n      value: controlledValue,\n      ...props\n    },\n    forwardedRef\n  ) {\n    const {\n      data: { navigationItem, text, lastActionType },\n      inputRef,\n      state,\n      transition,\n      listboxIdRef,\n      autocompletePropRef,\n      clearOnEscapeRef,\n      openOnFocus,\n      optionsRef,\n      labelIdRef,\n    } = useComboBoxContext();\n\n    // Keep focus on the input component\n    useFocusManagement(lastActionType, inputRef);\n\n    // Keep using the defaultValue until the user started interacting\n    const hasStartedInteracting = useRef(false);\n\n    // Because we close the List on blur, we need to track if the blur is\n    // caused by clicking inside the list, and if so, don't close the List.\n    const selectOnClickRef = useRef(false);\n\n    const handleBlur = useBlur();\n\n    // Update ref props\n    autocompletePropRef.current = autocomplete;\n    clearOnEscapeRef.current = clearOnEscape;\n    listboxIdRef.current = preferredId || listboxIdRef.current;\n\n    // [*]... and when controlled, we don't trigger handleValueChange as the user\n    // types, instead the developer controls it with the normal input onChange\n    // prop\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      // After the user started typing, lets forget the defaultValue\n      hasStartedInteracting.current = true;\n\n      const text = e.target.value;\n      if (text.trim() === '') {\n        transition(CLEAR);\n      } else {\n        transition(CHANGE, { text });\n      }\n    };\n\n    const handleKeyDown = useKeyDown();\n\n    const handleFocus = () => {\n      if (selectOnClick) {\n        selectOnClickRef.current = true;\n      }\n      // If we select an option with click, useFocusManagement will focus the\n      // input, in those cases we don't want to cause the menu to open back up,\n      // so we guard behind these states\n      if (openOnFocus && lastActionType !== SELECT_WITH_CLICK) {\n        transition(FOCUS, {\n          item: navigationItem,\n        });\n      }\n    };\n\n    const handleClick = () => {\n      if (selectOnClickRef.current) {\n        selectOnClickRef.current = false;\n        inputRef.current && inputRef.current.select();\n      }\n    };\n\n    const navigationText =\n      navigationItem !== ''\n        ? optionsRef.current[navigationItem].text\n        : undefined;\n\n    const fallbackValue = hasStartedInteracting.current ? '' : defaultValue;\n\n    const inputStrings =\n      // When idle, we don't have a navigationText on ArrowUp/Down\n      autocomplete && state === NAVIGATING\n        ? [navigationText, controlledValue, text, fallbackValue]\n        : [controlledValue, text, fallbackValue];\n\n    const inputValue = inputStrings.find((str) => str !== undefined);\n\n    // If they are controlling the value we still need to do our transitions, so\n    // we have this derived state to emulate onChange of the input as we receive\n    // new `value`s ...[*]\n    useEffect(() => {\n      transition(INIT, { text: inputValue, item: '' });\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    return (\n      <Comp\n        {...props}\n        as={innerAs}\n        data-reach-combobox-input=\"\"\n        ref={assignMultipleRefs(inputRef, forwardedRef)}\n        value={inputValue}\n        onClick={wrapEvent(onClick, handleClick)}\n        onBlur={wrapEvent(onBlur, handleBlur)}\n        onFocus={wrapEvent(onFocus, handleFocus)}\n        onChange={wrapEvent(onChange, handleChange)}\n        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n        aria-labelledby={labelIdRef.current}\n        id={listboxIdRef.current}\n        aria-autocomplete=\"both\"\n        aria-activedescendant={\n          navigationItem !== '' ? navigationItem : undefined\n        }\n        autoComplete=\"off\"\n      />\n    );\n  }\n);\n"],"file":"ComboboxInput.js"}

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

@@ -1,7 +1,7 @@
-import type * as React from 'react';
-export interface ComboboxLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
-    as?: React.ElementType<any>;
-    innerAs?: React.ElementType<any>;
+import type { ElementType, LabelHTMLAttributes } from 'react';
+export interface ComboboxLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    as?: ElementType<any>;
+    innerAs?: ElementType<any>;
     id?: string;
 }
-export declare const ComboboxLabel: React.ForwardRefExoticComponent<ComboboxLabelProps & React.RefAttributes<HTMLLabelElement>>;
+export declare const ComboboxLabel: import("react").ForwardRefExoticComponent<ComboboxLabelProps & import("react").RefAttributes<HTMLLabelElement>>;

package/build/esm/ComboBox/ComboboxLabel.js

@@ -1,20 +1,19 @@
 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 { useComboBoxContext } from './context';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ComboboxLabel = /*#__PURE__*/forwardRef(function ComboboxButton(_ref, ref) {
-  let {
-    as: Comp = 'label',
-    innerAs,
-    id: preferredId
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "innerAs", "id"]);
+export var ComboboxLabel = /*#__PURE__*/forwardRef(function ComboboxButton(_ref, ref) {
+  var _ref$as = _ref.as,
+      Comp = _ref$as === void 0 ? 'label' : _ref$as,
+      innerAs = _ref.innerAs,
+      preferredId = _ref.id,
+      props = _objectWithoutProperties(_ref, ["as", "innerAs", "id"]);
+
+  var _useComboBoxContext = useComboBoxContext(),
+      listboxIdRef = _useComboBoxContext.listboxIdRef,
+      labelIdRef = _useComboBoxContext.labelIdRef;
 
-  const {
-    listboxIdRef,
-    labelIdRef
-  } = useComboBoxContext();
   labelIdRef.current = preferredId || labelIdRef.current;
   return /*#__PURE__*/_jsx(Comp, _extends({
     as: innerAs,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ComboBox/ComboboxLabel.tsx"],"names":["forwardRef","useComboBoxContext","ComboboxLabel","ComboboxButton","ref","as","Comp","innerAs","id","preferredId","props","listboxIdRef","labelIdRef","current"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AAEA,SAASC,kBAAT,QAAmC,WAAnC;;AASA,OAAO,MAAMC,aAAa,gBAAGF,UAAU,CACrC,SAASG,cAAT,OAEEC,GAFF,EAGE;AAAA,MAFA;AAAEC,IAAAA,EAAE,EAAEC,IAAI,GAAG,OAAb;AAAsBC,IAAAA,OAAtB;AAA+BC,IAAAA,EAAE,EAAEC;AAAnC,GAEA;AAAA,MAFmDC,KAEnD;;AACA,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAA+BX,kBAAkB,EAAvD;AAEAW,EAAAA,UAAU,CAACC,OAAX,GAAqBJ,WAAW,IAAIG,UAAU,CAACC,OAA/C;AAEA,sBACE,KAAC,IAAD;AACE,IAAA,EAAE,EAAEN,OADN;AAEE,iCAA0B,EAF5B;AAGE,IAAA,OAAO,EAAEI,YAAY,CAACE,OAHxB;AAIE,IAAA,EAAE,EAAED,UAAU,CAACC,OAJjB;AAKE,IAAA,GAAG,EAAET;AALP,KAMMM,KANN,EADF;AAUD,CAnBoC,CAAhC","sourcesContent":["import { forwardRef } from 'react';\nimport type * as React from 'react';\nimport { useComboBoxContext } from './context';\n\nexport interface ComboboxLabelProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  id?: string;\n}\n\nexport const ComboboxLabel = forwardRef<HTMLLabelElement, ComboboxLabelProps>(\n  function ComboboxButton(\n    { as: Comp = 'label', innerAs, id: preferredId, ...props },\n    ref\n  ) {\n    const { listboxIdRef, labelIdRef } = useComboBoxContext();\n\n    labelIdRef.current = preferredId || labelIdRef.current;\n\n    return (\n      <Comp\n        as={innerAs}\n        data-reach-combobox-label=\"\"\n        htmlFor={listboxIdRef.current}\n        id={labelIdRef.current}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\n"],"file":"ComboboxLabel.js"}
+{"version":3,"sources":["../../../src/ComboBox/ComboboxLabel.tsx"],"names":["forwardRef","useComboBoxContext","ComboboxLabel","ComboboxButton","ref","as","Comp","innerAs","preferredId","id","props","listboxIdRef","labelIdRef","current"],"mappings":";;AACA,SAASA,UAAT,QAA2B,OAA3B;AAEA,SAASC,kBAAT,QAAmC,WAAnC;;AASA,OAAO,IAAMC,aAAa,gBAAGF,UAAU,CACrC,SAASG,cAAT,OAEEC,GAFF,EAGE;AAAA,qBAFEC,EAEF;AAAA,MAFMC,IAEN,wBAFa,OAEb;AAAA,MAFsBC,OAEtB,QAFsBA,OAEtB;AAAA,MAFmCC,WAEnC,QAF+BC,EAE/B;AAAA,MAFmDC,KAEnD;;AAAA,4BACqCT,kBAAkB,EADvD;AAAA,MACQU,YADR,uBACQA,YADR;AAAA,MACsBC,UADtB,uBACsBA,UADtB;;AAGAA,EAAAA,UAAU,CAACC,OAAX,GAAqBL,WAAW,IAAII,UAAU,CAACC,OAA/C;AAEA,sBACE,KAAC,IAAD;AACE,IAAA,EAAE,EAAEN,OADN;AAEE,iCAA0B,EAF5B;AAGE,IAAA,OAAO,EAAEI,YAAY,CAACE,OAHxB;AAIE,IAAA,EAAE,EAAED,UAAU,CAACC,OAJjB;AAKE,IAAA,GAAG,EAAET;AALP,KAMMM,KANN,EADF;AAUD,CAnBoC,CAAhC","sourcesContent":["import type { ElementType, LabelHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useComboBoxContext } from './context';\n\nexport interface ComboboxLabelProps\n  extends LabelHTMLAttributes<HTMLLabelElement> {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  id?: string;\n}\n\nexport const ComboboxLabel = forwardRef<HTMLLabelElement, ComboboxLabelProps>(\n  function ComboboxButton(\n    { as: Comp = 'label', innerAs, id: preferredId, ...props },\n    ref\n  ) {\n    const { listboxIdRef, labelIdRef } = useComboBoxContext();\n\n    labelIdRef.current = preferredId || labelIdRef.current;\n\n    return (\n      <Comp\n        as={innerAs}\n        data-reach-combobox-label=\"\"\n        htmlFor={listboxIdRef.current}\n        id={labelIdRef.current}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\n"],"file":"ComboboxLabel.js"}

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

@@ -1,8 +1,8 @@
-import type * as React from 'react';
-export interface ComboboxListProps extends React.HTMLAttributes<HTMLUListElement> {
-    as?: React.ElementType<any>;
-    innerAs?: React.ElementType<any>;
+import type { HTMLAttributes, ElementType, ReactNode } from 'react';
+export interface ComboboxListProps extends HTMLAttributes<HTMLUListElement> {
+    as?: ElementType<any>;
+    innerAs?: ElementType<any>;
     persistSelection?: boolean;
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
-export declare const ComboboxList: React.ForwardRefExoticComponent<ComboboxListProps & React.RefAttributes<HTMLUListElement>>;
+export declare const ComboboxList: import("react").ForwardRefExoticComponent<ComboboxListProps & import("react").RefAttributes<HTMLUListElement>>;