@react-fabric/form 1.0.0-beta.0

package/dist/cjs/select/Select.js

@@ -0,0 +1,283 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react$1 = require('@floating-ui/react');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var react = require('react');
+var InputWrapper = require('../internal/InputWrapper.js');
+var Options = require('./Options.js');
+var useSelect = require('./useSelect.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "options", "groupProperty", "labelProperty", "valueProperty", "multiple", "searchable", "allowCreate", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Select = function Select(_ref) {
+  var _state$query, _refs$reference$curre;
+  var ref = _ref.ref,
+    name = _ref.name,
+    value = _ref.value,
+    invalid = _ref.invalid,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled,
+    required = _ref.required,
+    placeholder = _ref.placeholder,
+    autoFocus = _ref.autoFocus,
+    error = _ref.error,
+    options = _ref.options,
+    groupProperty = _ref.groupProperty,
+    _ref$labelProperty = _ref.labelProperty,
+    labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
+    _ref$valueProperty = _ref.valueProperty,
+    valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
+    multiple = _ref.multiple,
+    searchable = _ref.searchable,
+    allowCreate = _ref.allowCreate,
+    createOption = _ref.createOption,
+    matcher = _ref.matcher,
+    renderer = _ref.renderer,
+    onQuery = _ref.onQuery,
+    onChange = _ref.onChange,
+    onSelect = _ref.onSelect,
+    onEnterPressed = _ref.onEnterPressed,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useSelect = useSelect.useSelect({
+      value: value,
+      options: options,
+      multiple: multiple,
+      groupProperty: groupProperty,
+      labelProperty: labelProperty,
+      valueProperty: valueProperty,
+      allowCreate: allowCreate,
+      createOption: createOption,
+      matcher: matcher,
+      onChange: onChange,
+      onSelect: onSelect,
+      onQuery: onQuery
+    }),
+    state = _useSelect.state,
+    listRef = _useSelect.listRef,
+    listContentRef = _useSelect.listContentRef,
+    setOpen = _useSelect.setOpen,
+    macthOption = _useSelect.macthOption,
+    handleChange = _useSelect.handleChange,
+    handleRemove = _useSelect.handleRemove,
+    handleQuery = _useSelect.handleQuery,
+    setItemRef = _useSelect.setItemRef,
+    setActiveIndex = _useSelect.setActiveIndex;
+  var dropdownKey = react.useId();
+  var _useFloating = react$1.useFloating({
+      open: state.open,
+      onOpenChange: function onOpenChange(open, evt, reason) {
+        !open && (listRef.current = []);
+        setOpen(open);
+      },
+      strategy: "fixed",
+      placement: "bottom",
+      whileElementsMounted: react$1.autoUpdate,
+      middleware: [react$1.shift({
+        padding: 8
+      }), react$1.flip(), react$1.offset(2)]
+    }),
+    context = _useFloating.context,
+    floatingStyles = _useFloating.floatingStyles,
+    refs = _useFloating.refs;
+
+  // floating interactions
+  var click = react$1.useClick(context, {});
+  var dismiss = react$1.useDismiss(context, {
+    // referencePress: true,
+  });
+  var navigation = react$1.useListNavigation(context, {
+    listRef: listRef,
+    activeIndex: state.activeIndex,
+    selectedIndex: state.selectedIndex,
+    loop: true,
+    virtual: true,
+    focusItemOnOpen: false,
+    onNavigate: setActiveIndex
+  });
+  var typeahead = react$1.useTypeahead(context, {
+    listRef: listContentRef,
+    activeIndex: state.activeIndex,
+    selectedIndex: state.selectedIndex,
+    findMatch: function findMatch(list, typedString) {
+      return list.find(function (item) {
+        return macthOption(item, typedString);
+      });
+    },
+    onMatch: function onMatch(index) {
+      state.open && setActiveIndex(index);
+      !searchable && !multiple && !state.open && handleChange(listContentRef.current[index]);
+    }
+  });
+  var _useInteractions = react$1.useInteractions([dismiss, searchable ? undefined : click, navigation, typeahead]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps,
+    getItemProps = _useInteractions.getItemProps;
+  var referenceProps = react.useMemo(function () {
+    var props = getReferenceProps();
+    return _objectSpread(_objectSpread({}, props), {}, {
+      onBlur: function onBlur(evt) {
+        var _evt$relatedTarget;
+        if ((_evt$relatedTarget = evt.relatedTarget) !== null && _evt$relatedTarget !== void 0 && _evt$relatedTarget.closest("[data-select-dropdown=\"".concat(dropdownKey, "\"]"))) {
+          var _refs$domReference$cu;
+          (_refs$domReference$cu = refs.domReference.current) === null || _refs$domReference$cu === void 0 || (_refs$domReference$cu = _refs$domReference$cu.querySelector("input")) === null || _refs$domReference$cu === void 0 || _refs$domReference$cu.focus();
+          return;
+        }
+        handleQuery("");
+        setOpen(false);
+      },
+      onKeyDown: function onKeyDown(evt) {
+        if (evt.key === "Enter") {
+          if (state.activeIndex !== null) {
+            handleChange(listContentRef.current[state.activeIndex]);
+            evt.preventDefault();
+            evt.stopPropagation();
+            return false;
+          } else if (state.query) {
+            handleQuery("");
+          } else {
+            onEnterPressed === null || onEnterPressed === void 0 || onEnterPressed(evt);
+          }
+        } else if (evt.key === "Tab" && state.activeIndex !== null) {
+          handleChange(listContentRef.current[state.activeIndex]);
+        } else if (evt.key === "Backspace") {
+          !state.query && handleRemove();
+        } else if (!searchable || ["ArrowUp", "ArrowDown"].includes(evt.key)) {
+          if (["ArrowUp", "ArrowDown"].includes(evt.key) && state.activeIndex === null) {
+            setActiveIndex(state.selectedIndex);
+          }
+          setTimeout(function () {
+            var _props$onKeyDown;
+            (_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 || _props$onKeyDown.call(props, evt);
+          }, 50);
+        }
+      }
+    });
+  }, [getReferenceProps, onEnterPressed, handleQuery, refs, state.query, state.activeIndex]);
+  var floatingProps = react.useMemo(function () {
+    return getFloatingProps({
+      "data-select-dropdown": dropdownKey
+    });
+  }, [getFloatingProps]);
+  var makeItemProps = react.useCallback(function (item) {
+    var _state$value, _state$value$includes;
+    var selected = utilities.isArray(state.value) ? (_state$value = state.value) === null || _state$value === void 0 || (_state$value$includes = _state$value.includes) === null || _state$value$includes === void 0 ? void 0 : _state$value$includes.call(_state$value, item) : state.value === item;
+    return getItemProps({
+      "data-selected": selected ? true : undefined,
+      onClick: function onClick() {
+        handleChange(item);
+      }
+    });
+  }, [getItemProps, handleChange, state.value]);
+  var displayValue = react.useMemo(function () {
+    if (utilities.isArray(state.value)) {
+      return state.value.map(function (item, index) {
+        var _ref2, _renderer;
+        return /*#__PURE__*/jsxRuntime.jsx(core.Chip, {
+          onRemove: function onRemove() {
+            return handleRemove(index);
+          },
+          children: (_ref2 = (_renderer = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer !== void 0 ? _renderer : item[labelProperty]) !== null && _ref2 !== void 0 ? _ref2 : item
+        }, index);
+      });
+    } else if (!utilities.isEmpty(state.value) && !state.query) {
+      var _ref3, _renderer2;
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "self-center pointer-events-none select-none",
+        children: (_ref3 = (_renderer2 = renderer === null || renderer === void 0 ? void 0 : renderer(state.value)) !== null && _renderer2 !== void 0 ? _renderer2 : state.value[labelProperty]) !== null && _ref3 !== void 0 ? _ref3 : state.value
+      });
+    }
+  }, [state.value, state.query, placeholder, renderer]);
+  var openDropdown = react.useCallback(function () {
+    var _refs$domReference$cu2;
+    setOpen(true);
+    (_refs$domReference$cu2 = refs.domReference.current) === null || _refs$domReference$cu2 === void 0 || (_refs$domReference$cu2 = _refs$domReference$cu2.querySelector("input")) === null || _refs$domReference$cu2 === void 0 || _refs$domReference$cu2.focus();
+  }, []);
+  react.useLayoutEffect(function () {
+    state.open && setTimeout(function () {
+      var _listRef$current$stat;
+      state.selectedIndex && ((_listRef$current$stat = listRef.current[state.selectedIndex]) === null || _listRef$current$stat === void 0 ? void 0 : _listRef$current$stat.scrollIntoView({
+        block: "center"
+      }));
+    }, 100);
+  }, [state.open]);
+  return /*#__PURE__*/jsxRuntime.jsxs(InputWrapper.InputWrapper, _objectSpread(_objectSpread({
+    showClear: !utilities.isEmpty(state.value),
+    onClear: handleChange,
+    invalid: invalid,
+    readOnly: readOnly,
+    disabled: disabled,
+    required: required,
+    error: error,
+    wrapperRef: refs.setReference,
+    className: state.open ? "!z-[99]" : ""
+  }, rest), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      role: "none",
+      "data-select-display": "true",
+      className: classNames("group flex-1 py-1 px-2 truncate text-start flex gap-1 relative min-h-5 justify-start", multiple ? "flex-wrap" : "flex-nowrap overflow-hidden"),
+      onMouseUp: function onMouseUp(e) {
+        var _e$currentTarget$quer;
+        return (_e$currentTarget$quer = e.currentTarget.querySelector("input")) === null || _e$currentTarget$quer === void 0 ? void 0 : _e$currentTarget$quer.focus();
+      },
+      children: [displayValue, /*#__PURE__*/jsxRuntime.jsx("input", _objectSpread(_objectSpread({
+        readOnly: !searchable || readOnly,
+        disabled: disabled,
+        value: (_state$query = state.query) !== null && _state$query !== void 0 ? _state$query : "",
+        "aria-invalid": invalid,
+        "data-testid": name,
+        name: name,
+        size: 1,
+        ref: ref,
+        autoFocus: autoFocus,
+        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
+        placeholder: utilities.isEmpty(state.value) ? placeholder : ""
+      }, referenceProps), {}, {
+        onChange: function onChange(evt) {
+          return handleQuery(evt.target.value);
+        }
+      }))]
+    }), !state.loading && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+      className: classNames("flex-content p-2 z-0 order-9 text-muted cursor-pointer self-stretch flex items-center h-auto", state.open && "-scale-y-100 pointer-events-none", disabled && "pointer-events-none"),
+      onClick: function onClick() {
+        return !disabled && openDropdown();
+      },
+      icon: core.CoreIcons.chevronDown
+    }), state.loading && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+      animate: "spin",
+      className: classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none"),
+      icon: core.CoreIcons.spinner
+    }), state.open && !state.loading && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+      children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
+        context: context,
+        initialFocus: -1,
+        visuallyHiddenDismiss: true,
+        children: /*#__PURE__*/jsxRuntime.jsx(Options.Options, _objectSpread(_objectSpread({
+          ref: refs.setFloating,
+          className: "outline shadow-lg max-h-[40vh] z-[var(--z-popover)]",
+          style: _objectSpread({
+            width: (_refs$reference$curre = refs.reference.current) === null || _refs$reference$curre === void 0 ? void 0 : _refs$reference$curre.getBoundingClientRect().width
+          }, floatingStyles)
+        }, floatingProps), {}, {
+          items: state.items,
+          active: state.activeIndex,
+          valueProperty: valueProperty,
+          labelProperty: labelProperty,
+          itemRef: setItemRef,
+          itemProps: makeItemProps,
+          children: function children(item, label) {
+            var _renderer3;
+            return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
+          }
+        }))
+      })
+    })]
+  }));
+};
+
+exports.Select = Select;

package/dist/cjs/select/helpers.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var utilities = require('@react-fabric/utilities');
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var makeOption = function makeOption(query) {
+  return query;
+};
+var getSelectedValue = function getSelectedValue(value, emptyValue) {
+  var _ref, _value$valueProperty;
+  var valueProperty = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
+  return utilities.isArray(value) ? value.map(function (val) {
+    var _val$valueProperty;
+    return (_val$valueProperty = val[valueProperty]) !== null && _val$valueProperty !== void 0 ? _val$valueProperty : val;
+  }) : (_ref = (_value$valueProperty = value === null || value === void 0 ? void 0 : value[valueProperty]) !== null && _value$valueProperty !== void 0 ? _value$valueProperty : value) !== null && _ref !== void 0 ? _ref : emptyValue;
+};
+
+exports.getSelectedValue = getSelectedValue;
+exports.makeOption = makeOption;

package/dist/cjs/select/useSelect.js

@@ -0,0 +1,337 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var helpers = require('./helpers.js');
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useSelect = function useSelect(_ref) {
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? utilities.EMPTY_ARRAY : _ref$options,
+    value = _ref.value,
+    autoComplete = _ref.autoComplete,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+    _ref$allowCreate = _ref.allowCreate,
+    allowCreate = _ref$allowCreate === void 0 ? false : _ref$allowCreate,
+    _ref$groupProperty = _ref.groupProperty,
+    groupProperty = _ref$groupProperty === void 0 ? "" : _ref$groupProperty,
+    _ref$valueProperty = _ref.valueProperty,
+    valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
+    _ref$labelProperty = _ref.labelProperty,
+    labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
+    _ref$createOption = _ref.createOption,
+    createOption = _ref$createOption === void 0 ? helpers.makeOption : _ref$createOption,
+    matcher = _ref.matcher,
+    onQuery = _ref.onQuery,
+    onChange = _ref.onChange,
+    onSelect = _ref.onSelect;
+  // value state
+  var emptyValue = react.useMemo(function () {
+    return multiple ? [] : "";
+  }, [multiple]);
+  var deferred = react.useDeferredValue(value !== null && value !== void 0 ? value : emptyValue);
+
+  // list items
+  var listRef = react.useRef([]);
+  var focusableRef = react.useRef(null);
+  var listContentRef = react.useRef([]);
+  var optionsRef = react.useRef([]);
+  var macthOption = react.useCallback(function (item, query) {
+    var _matcher, _item$labelProperty;
+    return (_matcher = matcher === null || matcher === void 0 ? void 0 : matcher(item, query)) !== null && _matcher !== void 0 ? _matcher : utilities.matchString((_item$labelProperty = item[labelProperty]) !== null && _item$labelProperty !== void 0 ? _item$labelProperty : item, query);
+  }, [matcher]);
+  var fireChange = react.useCallback(function (value) {
+    setTimeout(function () {
+      onSelect === null || onSelect === void 0 || onSelect(value !== null && value !== void 0 ? value : emptyValue);
+      onChange === null || onChange === void 0 || onChange(helpers.getSelectedValue(value, emptyValue, valueProperty));
+    }, 50);
+  }, [emptyValue, onSelect, onChange]);
+  var _useReducer = react.useReducer(function (state, action) {
+      if (action.type === "open") {
+        var index = state.items.indexOf(state.multiple ? state.value[0] : state.value);
+        return _objectSpread(_objectSpread({}, state), {}, {
+          open: true,
+          activeIndex: index > -1 ? index : null
+        });
+      }
+      if (action.type === "close") {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          activeIndex: null,
+          open: false
+        });
+      }
+      if (action.type === "active" && state.open) {
+        if (autoComplete && action.index !== null) state.query = state.items[action.index];
+        return _objectSpread(_objectSpread({}, state), {}, {
+          activeIndex: action.index
+        });
+      }
+      if (action.type === "setValue") {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          value: action.value,
+          selectedIndex: state.items.indexOf(state.multiple ? action.value[0] : action.value)
+        });
+      }
+      if (action.type === "changeValue") {
+        var _action$value;
+        var newState = _objectSpread(_objectSpread({}, state), {}, {
+          value: state.emptyValue,
+          activeIndex: null,
+          selectedIndex: autoComplete ? state.multiple ? (_action$value = action.value) === null || _action$value === void 0 ? void 0 : _action$value.length : 0 : state.items.indexOf(action.value)
+        });
+        if (action.value !== undefined) {
+          if (multiple) {
+            var values = [];
+            if (action.value && autoComplete) values.push.apply(values, _toConsumableArray(action.value.split(/,\s?/)));else if (action.value) values.push(action.value);
+            newState.value = _toConsumableArray(state.value);
+            values.forEach(function (value) {
+              var _newState$value$inclu, _newState$value;
+              newState.value = (_newState$value$inclu = (_newState$value = newState.value).includes) !== null && _newState$value$inclu !== void 0 && _newState$value$inclu.call(_newState$value, value) ? newState.value.filter(function (item) {
+                return item !== value;
+              }) : [].concat(_toConsumableArray(newState.value), [value]);
+            });
+          } else {
+            newState.value = action.value;
+          }
+        }
+        if (!state.multiple) newState.open = false;
+        fireChange(newState.value);
+        return newState;
+      }
+      if (action.type === "removeItem") {
+        var newValue = state.value;
+        if (state.multiple) {
+          var _action$index;
+          newValue = _toConsumableArray(newValue);
+          newValue.splice((_action$index = action.index) !== null && _action$index !== void 0 ? _action$index : -1, 1);
+        } else {
+          newValue = "";
+        }
+        fireChange(newValue);
+        return _objectSpread(_objectSpread({}, state), {}, {
+          value: newValue
+        });
+      }
+      if (action.type === "startQuery") {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          loading: true,
+          query: action.query
+        });
+      }
+      if (action.type === "options") {
+        var _newState = _objectSpread(_objectSpread({}, state), {}, {
+          loading: false,
+          query: action.query
+        });
+        var optionList = _toConsumableArray(action.options);
+        if (autoComplete && action.query !== undefined) {
+          optionList = utilities.dedupe([action.query].concat(_toConsumableArray(optionList)));
+        }
+        var grouped = utilities.groupBy(optionList, groupProperty, "");
+        if (action.open) _newState.open = true;
+        _newState.items = [];
+        // add new item if allowCreate
+        if (allowCreate && action.query) _newState.items.push({
+          ___create___: true,
+          value: createOption(action.query)
+        });
+        Object.entries(grouped).forEach(function (_ref2) {
+          var _newState$items;
+          var _ref3 = _slicedToArray(_ref2, 2),
+            key = _ref3[0],
+            list = _ref3[1];
+          if (key) {
+            _newState.items.push({
+              ___group___: true,
+              label: key
+            });
+          }
+          (_newState$items = _newState.items).push.apply(_newState$items, _toConsumableArray(list));
+        });
+        if (action.setActive) {
+          var _index = _newState.items.findIndex(function (opt) {
+            return !opt.___group___;
+          });
+          _newState.activeIndex = _index >= 0 ? _index : null;
+        } else {
+          _newState.activeIndex = null;
+        }
+        listContentRef.current = _newState.items;
+        return _newState;
+      }
+      return state;
+    }, {
+      multiple: multiple,
+      emptyValue: emptyValue,
+      open: false,
+      loading: false,
+      activeIndex: null,
+      selectedIndex: null,
+      value: emptyValue,
+      // filter
+      query: undefined,
+      // dropdown items
+      items: []
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  react.useEffect(function () {
+    if (!multiple) {
+      var _ref4;
+      var newOption = (allowCreate || autoComplete) && deferred ? createOption(deferred) : undefined;
+      var hasValue = options.find(function (opt) {
+        var _opt$valueProperty;
+        return ((_opt$valueProperty = opt[valueProperty]) !== null && _opt$valueProperty !== void 0 ? _opt$valueProperty : opt) === deferred;
+      });
+      optionsRef.current = options;
+      // if current value missing in list inject it
+      if (!hasValue && newOption) {
+        optionsRef.current = [newOption].concat(_toConsumableArray(options !== null && options !== void 0 ? options : []));
+      }
+      dispatch({
+        type: "options",
+        options: optionsRef.current
+      });
+      dispatch({
+        type: "setValue",
+        value: (_ref4 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref4 !== void 0 ? _ref4 : ""
+      });
+    }
+    if (multiple) {
+      optionsRef.current = [];
+      var _value = (deferred !== null && deferred !== void 0 ? deferred : []).map(function (item) {
+        var _ref5;
+        var newOption = (allowCreate || autoComplete) && item ? createOption(item) : undefined;
+        var hasValue = options.find(function (opt) {
+          var _opt$valueProperty2;
+          return ((_opt$valueProperty2 = opt[valueProperty]) !== null && _opt$valueProperty2 !== void 0 ? _opt$valueProperty2 : opt) === deferred;
+        });
+        if (!hasValue && newOption) {
+          optionsRef.current.push(newOption);
+        }
+        return (_ref5 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref5 !== void 0 ? _ref5 : "";
+      });
+      optionsRef.current = [].concat(_toConsumableArray(optionsRef.current), _toConsumableArray(options !== null && options !== void 0 ? options : []));
+      dispatch({
+        type: "options",
+        options: optionsRef.current
+      });
+      dispatch({
+        type: "setValue",
+        value: _value
+      });
+    }
+  }, [deferred, options, multiple, allowCreate, autoComplete, createOption]);
+  var fireQuery = core.useDebounce(function (query) {
+    void Promise.resolve(onQuery === null || onQuery === void 0 ? void 0 : onQuery(query)).then(function (options) {
+      var newOptions = _toConsumableArray(options);
+      // if autocomplete inject other filtered options from history
+      if (autoComplete) {
+        newOptions.push.apply(newOptions, _toConsumableArray(optionsRef.current.filter(function (opt) {
+          return macthOption === null || macthOption === void 0 ? void 0 : macthOption(opt, query);
+        })));
+      }
+      dispatch({
+        type: "options",
+        query: query,
+        options: newOptions,
+        open: true,
+        setActive: true
+      });
+    });
+  }, [onQuery]);
+
+  // handlers
+  var handleQuery = react.useCallback(function (query) {
+    if (!query) {
+      dispatch({
+        type: "options",
+        query: "",
+        options: optionsRef.current
+      });
+    } else {
+      if (onQuery) {
+        dispatch({
+          type: "startQuery",
+          query: query
+        });
+        return fireQuery(query);
+      }
+      dispatch({
+        type: "options",
+        query: query,
+        open: true,
+        setActive: true,
+        options: optionsRef.current.filter(function (opt) {
+          return macthOption === null || macthOption === void 0 ? void 0 : macthOption(opt, query);
+        })
+      });
+    }
+  }, [macthOption, onQuery]);
+  var handleChange = react.useCallback(function (value) {
+    var values = value;
+    if (autoComplete && multiple && value) {
+      values = value.split(/,\s?/);
+    }
+    dispatch({
+      type: "changeValue",
+      value: value !== null && value !== void 0 && value.___create___ ? value.value : value
+    });
+    if (value !== null && value !== void 0 && value.___create___) {
+      optionsRef.current = [].concat(_toConsumableArray(optionsRef.current), [createOption(value.value)]);
+    }
+    if (autoComplete) {
+      optionsRef.current = utilities.dedupe([].concat(_toConsumableArray(utilities.isArray(values) ? values : [values]), _toConsumableArray(optionsRef.current)));
+    }
+    dispatch({
+      type: "options",
+      options: optionsRef.current
+    });
+  }, []);
+  var handleRemove = react.useCallback(function (index) {
+    dispatch({
+      type: "removeItem",
+      index: index
+    });
+  }, []);
+  var setOpen = react.useCallback(function (open) {
+    dispatch({
+      type: open ? "open" : "close"
+    });
+    dispatch({
+      type: "options",
+      query: undefined,
+      options: optionsRef.current
+    });
+  }, []);
+  var setActiveIndex = react.useCallback(function (index) {
+    dispatch({
+      type: "active",
+      index: index
+    });
+  }, []);
+  return {
+    state: state,
+    listRef: listRef,
+    focusableRef: focusableRef,
+    listContentRef: listContentRef,
+    handleChange: handleChange,
+    handleRemove: handleRemove,
+    handleQuery: handleQuery,
+    macthOption: macthOption,
+    setActiveIndex: setActiveIndex,
+    setOpen: setOpen,
+    setItemRef: function setItemRef(index, node) {
+      listRef.current[index] = node;
+    }
+  };
+};
+
+exports.useSelect = useSelect;