@react-fabric/form 1.0.0-beta.9 → 1.0.2

package/dist/esm/select/AutoComplete.js

@@ -1,51 +1,54 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloating, autoUpdate, shift, flip, offset, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
-import { Chip, Icon, CoreIcons } from '@react-fabric/core';
-import { isArray, isEmpty } from '@react-fabric/utilities';
-import classNames from 'classnames';
+import { Chip, Icon } from '@react-fabric/core';
+import { EMPTY_ARRAY, isArray, isEmpty, cn } from '@react-fabric/utilities';
 import { useRef, useId, useMemo, useCallback, useLayoutEffect } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
+import { getWrapperProps } from '../utils/getProps.js';
 import { Options } from './Options.js';
 import { useSelect } from './useSelect.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "expandOnEdit", "error", "history", "multiple", "onChange", "onSelect", "onInput", "onFocus", "onBlur", "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 AutoComplete = function AutoComplete(_ref) {
-  var _refs$reference$curre;
-  _ref.ref;
-    var name = _ref.name,
-    value = _ref.value,
-    invalid = _ref.invalid,
-    readOnly = _ref.readOnly,
-    disabled = _ref.disabled,
-    required = _ref.required,
-    placeholder = _ref.placeholder;
-    _ref.autoFocus;
-    var expandOnEdit = _ref.expandOnEdit,
-    error = _ref.error,
-    history = _ref.history,
-    multiple = _ref.multiple,
-    onChange = _ref.onChange,
-    onSelect = _ref.onSelect,
-    onInput = _ref.onInput,
-    onFocus = _ref.onFocus,
-    _onBlur = _ref.onBlur,
-    onEnterPressed = _ref.onEnterPressed,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var options = useRef(history);
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
+/**
+ * AutoComplete component for selecting or entering values with history suggestions.
+ * It supports multiple selections, history suggestions, and custom styling.
+ */
+function AutoComplete(props) {
+  var _refs$domReference$cu2, _refs$domReference$cu3, _refs$reference$curre;
+  var ref = props.ref,
+    name = props.name,
+    value = props.value,
+    invalid = props.invalid,
+    readOnly = props.readOnly,
+    disabled = props.disabled,
+    placeholder = props.placeholder,
+    autoFocus = props.autoFocus,
+    expandOnEdit = props.expandOnEdit,
+    _props$history = props.history,
+    history = _props$history === void 0 ? EMPTY_ARRAY : _props$history,
+    multiple = props.multiple,
+    allowClear = props.allowClear,
+    onChange = props.onChange,
+    onSelect = props.onSelect,
+    _onInput = props.onInput,
+    onFocus = props.onFocus,
+    _onBlur = props.onBlur,
+    onQuery = props.onQuery,
+    onEnterPressed = props.onEnterPressed;
+  var optionsRef = useRef(history);
   var submitRef = useRef(null);
   var _useSelect = useSelect({
       value: value,
       autoComplete: true,
-      options: options.current,
+      options: optionsRef.current,
       multiple: multiple,
       onChange: onChange,
-      onSelect: onSelect
+      onSelect: onSelect,
+      onQuery: onQuery
     }),
     state = _useSelect.state,
     listRef = _useSelect.listRef,
@@ -57,11 +60,11 @@ var AutoComplete = function AutoComplete(_ref) {
     handleQuery = _useSelect.handleQuery,
     setItemRef = _useSelect.setItemRef,
     setActiveIndex = _useSelect.setActiveIndex;
-  var dropdownKey = useId();
+  var dropdownKeyId = useId();
   var _useFloating = useFloating({
       open: state.open,
-      onOpenChange: function onOpenChange(open, evt, reason) {
-        !open && (listRef.current = []);
+      onOpenChange: function onOpenChange(open) {
+        if (!open) listRef.current = [];
         setOpen(open);
       },
       strategy: "fixed",
@@ -98,7 +101,7 @@ var AutoComplete = function AutoComplete(_ref) {
       });
     },
     onMatch: function onMatch(index) {
-      state.open && setActiveIndex(index);
+      if (state.open) setActiveIndex(index);
     }
   });
   var _useInteractions = useInteractions([dismiss, navigation, typeahead]),
@@ -111,12 +114,12 @@ var AutoComplete = function AutoComplete(_ref) {
       onFocus: onFocus,
       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, "\"]"))) {
+        if ((_evt$relatedTarget = evt.relatedTarget) !== null && _evt$relatedTarget !== void 0 && _evt$relatedTarget.closest("[data-select-dropdown=\"".concat(dropdownKeyId, "\"]"))) {
           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;
         }
-        state.open && handleChange(state.query);
+        if (state.open) handleChange(state.query);
         handleQuery("");
         setOpen(false);
         _onBlur === null || _onBlur === void 0 || _onBlur(evt);
@@ -132,29 +135,29 @@ var AutoComplete = function AutoComplete(_ref) {
             handleChange("");
             return false;
           } else {
-            var _submitRef$current;
             onEnterPressed === null || onEnterPressed === void 0 || onEnterPressed(evt);
-            (_submitRef$current = submitRef.current) === null || _submitRef$current === void 0 || _submitRef$current.click();
+            setOpen(false);
           }
         } else if (evt.key === "Backspace") {
-          !state.query && multiple && handleRemove();
+          if (!state.query && multiple) handleRemove();
         } else if (["ArrowUp", "ArrowDown"].includes(evt.key)) {
           if (["ArrowUp", "ArrowDown"].includes(evt.key) && state.activeIndex === null) {
             setActiveIndex(state.selectedIndex);
           }
           setTimeout(function () {
             var _props$onKeyDown;
+            // @ts-expect-error ignore
             (_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 || _props$onKeyDown.call(props, evt);
           }, 50);
         }
       }
     });
-  }, [getReferenceProps, onEnterPressed, handleQuery, onFocus, _onBlur, multiple, refs, state.query, state.activeIndex]);
+  }, [getReferenceProps, onFocus, dropdownKeyId, state.open, state.query, state.activeIndex, state.selectedIndex, handleChange, handleQuery, setOpen, _onBlur, refs.domReference, listContentRef, onEnterPressed, multiple, handleRemove, setActiveIndex]);
   var floatingProps = useMemo(function () {
     return getFloatingProps({
-      "data-select-dropdown": dropdownKey
+      "data-select-dropdown": dropdownKeyId
     });
-  }, [getFloatingProps]);
+  }, [dropdownKeyId, getFloatingProps]);
   var makeItemProps = useCallback(function (item) {
     var _state$value, _state$value$includes;
     var selected = 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;
@@ -168,44 +171,51 @@ var AutoComplete = function AutoComplete(_ref) {
   var displayValue = useMemo(function () {
     if (isArray(state.value)) {
       return state.value.map(function (item, index) {
-        return /*#__PURE__*/jsx(Chip, {
-          onRemove: function onRemove() {
-            return handleRemove(index);
-          },
-          children: item
-        }, index);
+        return (
+          /*#__PURE__*/
+          // eslint-disable-next-line @eslint-react/no-array-index-key
+          jsx(Chip, {
+            onRemove: function onRemove() {
+              return handleRemove(index);
+            },
+            children: item
+          }, index)
+        );
       });
     }
-  }, [state.value, state.query, placeholder]);
+  }, [state.value, handleRemove]);
   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]);
+    if (state.open) {
+      var tmr = setTimeout(function () {
+        var _listRef$current$stat;
+        if (state.selectedIndex) (_listRef$current$stat = listRef.current[state.selectedIndex]) === null || _listRef$current$stat === void 0 || _listRef$current$stat.scrollIntoView({
+          block: "center"
+        });
+      }, 100);
+      return function () {
+        clearTimeout(tmr);
+      };
+    }
+  }, [listRef, state.open, state.selectedIndex]);
   var inputValue = useMemo(function () {
-    var _state$query, _ref2, _state$query2;
+    var _state$query, _ref, _state$query2;
     if (multiple) return (_state$query = state.query) !== null && _state$query !== void 0 ? _state$query : "";
-    return (_ref2 = (_state$query2 = state.query) !== null && _state$query2 !== void 0 ? _state$query2 : state.value) !== null && _ref2 !== void 0 ? _ref2 : "";
+    return (_ref = (_state$query2 = state.query) !== null && _state$query2 !== void 0 ? _state$query2 : state.value) !== null && _ref !== void 0 ? _ref : "";
   }, [multiple, state.query, state.value]);
   return /*#__PURE__*/jsxs(InputWrapper, _objectSpread(_objectSpread({
-    showClear: !isEmpty(state.value),
+    isOpen: state.open,
+    showClear: allowClear && !isEmpty(state.value),
     onClear: handleChange,
-    invalid: invalid,
-    readOnly: readOnly,
-    disabled: disabled,
-    required: required,
-    error: error,
-    wrapperRef: refs.setReference,
-    className: !multiple && expandOnEdit && state.open ? "!z-[99]" : "",
+    ref: function ref(el) {
+      return refs.setReference(el);
+    },
+    className: !multiple && expandOnEdit && state.open ? "z-99!" : "",
     floatingExpand: !multiple && expandOnEdit && state.open
-  }, rest), {}, {
+  }, getWrapperProps(props)), {}, {
     children: [/*#__PURE__*/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"),
+      className: cn("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();
@@ -217,10 +227,14 @@ var AutoComplete = function AutoComplete(_ref) {
         "aria-invalid": invalid,
         "data-testid": name,
         name: name,
-        size: 1,
-        onInput: onInput,
+        ref: ref,
+        autoComplete: "off",
+        onInput: function onInput(e) {
+          return _onInput === null || _onInput === void 0 ? void 0 : _onInput(e.currentTarget.value);
+        },
+        autoFocus: autoFocus,
         rows: !multiple && expandOnEdit && state.open ? 5 : 1,
-        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 resize-none", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24 overflow-hidden", !state.open && "overflow-hidden whitespace-nowrap"),
+        className: cn("appearance-none bg-transparent outline-none border-none ring-0 flex-1 resize-none", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24 overflow-hidden", !state.open && "overflow-hidden whitespace-nowrap"),
         placeholder: isEmpty(state.value) ? placeholder : ""
       }, referenceProps), {}, {
         onChange: function onChange(evt) {
@@ -233,17 +247,20 @@ var AutoComplete = function AutoComplete(_ref) {
         className: "opacity-0 absolute"
       })]
     }), state.loading && /*#__PURE__*/jsx(Icon, {
-      animate: "spin",
-      className: classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none"),
-      icon: CoreIcons.spinner
+      className: cn("flex-content p-2 z-0 order-9 text-muted pointer-events-none"),
+      icon: "icon-[svg-spinners--eclipse]"
     }), state.open && !state.loading && /*#__PURE__*/jsx(FloatingPortal, {
+      root: (_refs$domReference$cu2 = (_refs$domReference$cu3 = refs.domReference.current) === null || _refs$domReference$cu3 === void 0 ? void 0 : _refs$domReference$cu3.closest(".theme-base")) !== null && _refs$domReference$cu2 !== void 0 ? _refs$domReference$cu2 : undefined,
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
         initialFocus: -1,
         visuallyHiddenDismiss: true,
+        closeOnFocusOut: true,
         children: /*#__PURE__*/jsx(Options, _objectSpread(_objectSpread({
-          ref: refs.setFloating,
-          className: "outline shadow-lg max-h-[40vh] z-[var(--z-popover)]",
+          ref: function ref(el) {
+            return refs.setFloating(el);
+          },
+          className: "outline shadow-lg max-h-[40vh] z-(--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)
@@ -263,6 +280,6 @@ var AutoComplete = function AutoComplete(_ref) {
       })
     })]
   }));
-};
+}
 
 export { AutoComplete };