@react-fabric/form 1.0.0-beta.0

package/dist/cjs/ranger/index.js

@@ -0,0 +1,352 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var core = require('@react-fabric/core');
+var react = require('react');
+var utils = require('./utils.js');
+
+var useGetLatest = function useGetLatest(val) {
+  var ref = react.useRef(val);
+  ref.current = val;
+  return react.useCallback(function () {
+    return ref.current;
+  }, []);
+};
+var useRanger = function useRanger(opts) {
+  var _opts$tickSize;
+  var tickSize = (_opts$tickSize = opts.tickSize) !== null && _opts$tickSize !== void 0 ? _opts$tickSize : 10;
+  var values = opts.values;
+  var min = opts.min;
+  var max = opts.max;
+  var isVertical = opts.vertical;
+  var controlledTicks = opts.ticks;
+  var steps = "steps" in opts ? opts.steps : undefined;
+  var onChange = opts.onChange;
+  var onDrag = opts.onDrag;
+  var onDragStart = opts.onDragStart;
+  var onDragEnd = opts.onDragEnd;
+  var stepSize = "stepSize" in opts ? opts.stepSize : 1;
+  var _useState = react.useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeHandleIndex = _useState2[0],
+    setActiveHandleIndex = _useState2[1];
+  var _useState3 = react.useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    segmentStart = _useState4[0],
+    setSegmentStart = _useState4[1];
+  var _useState5 = react.useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tempValues = _useState6[0],
+    setTempValues = _useState6[1];
+  var isRtl = core.useIsRtl();
+  var positionProp = react.useMemo(function () {
+    return isVertical ? "bottom" : isRtl ? "right" : "left";
+  }, [isVertical, isRtl]);
+  var marginProp = react.useMemo(function () {
+    return isVertical ? "marginBottom" : isRtl ? "marginRight" : "marginLeft";
+  }, [isVertical, isRtl]);
+  var getLatest = useGetLatest({
+    activeHandleIndex: activeHandleIndex,
+    segmentStart: segmentStart,
+    onChange: onChange,
+    onDrag: onDrag,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd,
+    values: values,
+    tempValues: tempValues
+  });
+  var trackElRef = react.useRef(null);
+  var segmentElRef = react.useRef(null);
+  var getValueForClientX = react.useCallback(function (clientX) {
+    var trackDims = utils.getBoundingClientRect(trackElRef.current);
+    return utils.linearInterpolator.getValueForClientX(clientX, trackDims, min, max, isRtl);
+  }, [max, min, isRtl]);
+  var getValueForClientY = react.useCallback(function (clientY) {
+    var trackDims = utils.getBoundingClientRect(trackElRef.current);
+    return utils.linearInterpolator.getValueForClientY(clientY, trackDims, min, max);
+  }, [max, min]);
+  var getNextStep = react.useCallback(function (val, direction) {
+    if (steps) {
+      var currIndex = steps.indexOf(val);
+      var nextIndex = currIndex + direction;
+      if (nextIndex >= 0 && nextIndex < steps.length) {
+        return steps[nextIndex];
+      } else {
+        return val;
+      }
+    } else {
+      if (process.env.NODE_ENV !== "production") {
+        if (typeof stepSize === "undefined") {
+          throw new Error("Warning: The option `stepSize` is expected in `useRanger`, but its value is `undefined`");
+        }
+      }
+      var nextVal = val + stepSize * direction;
+      if (nextVal >= min && nextVal <= max) {
+        return nextVal;
+      } else {
+        return val;
+      }
+    }
+  }, [max, min, stepSize, steps]);
+  var roundToStep = react.useCallback(function (val) {
+    var left = min;
+    var right = max;
+    if (steps) {
+      steps.forEach(function (step) {
+        if (step <= val && step > left) {
+          left = step;
+        }
+        if (step >= val && step < right) {
+          right = step;
+        }
+      });
+    } else {
+      if (process.env.NODE_ENV !== "production") {
+        if (typeof stepSize === "undefined") {
+          throw new Error("Warning: The option `stepSize` is expected in `useRanger`, but its value is `undefined`");
+        }
+      }
+      while (left < val && left + stepSize < val) {
+        left += stepSize;
+      }
+      right = Math.min(left + stepSize, max);
+    }
+    if (val - left < right - val) {
+      return +left.toFixed(3);
+    }
+    return +right.toFixed(3);
+  }, [max, min, stepSize, steps]);
+  var handleDrag = react.useCallback(function (e) {
+    var _getLatest = getLatest(),
+      activeHandleIndex = _getLatest.activeHandleIndex,
+      onDrag = _getLatest.onDrag;
+    var clientX =
+    // @ts-expect-error ignore
+    e.type === "touchmove" ? e.changedTouches[0].clientX : e.clientX;
+    var clientY =
+    // @ts-expect-error ignore
+    e.type === "touchmove" ? e.changedTouches[0].clientY : e.clientY;
+    var newValue = isVertical ? getValueForClientY(clientY) : getValueForClientX(clientX);
+    var newRoundedValue = roundToStep(newValue);
+    var newValues = [].concat(_toConsumableArray(values.slice(0, activeHandleIndex)), [newRoundedValue], _toConsumableArray(values.slice(+activeHandleIndex + 1)));
+    onDrag === null || onDrag === void 0 || onDrag(newValues);
+    setTempValues(newValues);
+  }, [getLatest, getValueForClientX, getValueForClientY, roundToStep, values, isVertical]);
+  var handleSegmentDrag = react.useCallback(function (e) {
+    var _getLatest2 = getLatest(),
+      _getLatest2$segmentSt = _slicedToArray(_getLatest2.segmentStart, 2),
+      segX = _getLatest2$segmentSt[0],
+      segY = _getLatest2$segmentSt[1],
+      tempValues = _getLatest2.tempValues,
+      onDrag = _getLatest2.onDrag;
+    var _getBoundingClientRec = utils.getBoundingClientRect(segmentElRef.current),
+      left = _getBoundingClientRec.left,
+      bottom = _getBoundingClientRec.bottom;
+    var clientX =
+    // @ts-expect-error ignore
+    e.type === "touchmove" ? e.changedTouches[0].clientX : e.clientX;
+    var clientY =
+    // @ts-expect-error ignore
+    e.type === "touchmove" ? e.changedTouches[0].clientY : e.clientY;
+    var start = isVertical ? getValueForClientX(bottom + (clientY - segY)) : getValueForClientX(left + (clientX - segX));
+    var diff = roundToStep(start) - tempValues[0];
+    if (+tempValues[1] + diff > max) diff = 0;
+    var newValues = [+tempValues[0] + diff, +tempValues[1] + diff];
+    if (tempValues[0] !== newValues[0] || tempValues[1] !== newValues[1]) {
+      onDrag === null || onDrag === void 0 || onDrag(newValues);
+      setTempValues(newValues);
+      setSegmentStart([clientX, clientY]);
+    }
+  }, [getLatest, getValueForClientX, getValueForClientY, roundToStep, values, isVertical, max]);
+  var handleKeyDown = react.useCallback(function (e, i) {
+    var _getLatest3 = getLatest(),
+      values = _getLatest3.values,
+      onChange = _getLatest3.onChange;
+    if (["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"].includes(e.key)) {
+      setActiveHandleIndex(i);
+      var direction = ["ArrowLeft", "ArrowDown"].includes(e.key) ? -1 : 1;
+      var _newValue = +getNextStep(values[i], direction).toFixed(3);
+      var newValues = [].concat(_toConsumableArray(values.slice(0, i)), [_newValue], _toConsumableArray(values.slice(i + 1)));
+      var sortedValues = utils.sortNumList(newValues);
+      onChange === null || onChange === void 0 || onChange(sortedValues);
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }, [getLatest, getNextStep]);
+  var handlePress = react.useCallback(function (e, i) {
+    var _getLatest4 = getLatest(),
+      onDragStart = _getLatest4.onDragStart,
+      values = _getLatest4.values;
+    if (i === -1) {
+      var clientX = e.type === "touchmove" ?
+      // @ts-expect-error ignore
+      e.nativeEvent.changedTouches[0].clientX :
+      // @ts-expect-error ignore
+      e.nativeEvent.clientX;
+      var clientY = e.type === "touchmove" ?
+      // @ts-expect-error ignore
+      e.nativeEvent.changedTouches[0].clientY :
+      // @ts-expect-error ignore
+      e.nativeEvent.clientY;
+      setTempValues(values);
+      setSegmentStart([clientX, clientY]);
+    } else {
+      setActiveHandleIndex(i);
+    }
+    var handleRelease = function handleRelease(e) {
+      var _getLatest5 = getLatest(),
+        tempValues = _getLatest5.tempValues,
+        onChange = _getLatest5.onChange,
+        onDragEnd = _getLatest5.onDragEnd;
+      document.removeEventListener("mousemove", i === -1 ? handleSegmentDrag : handleDrag);
+      document.removeEventListener("touchmove", i === -1 ? handleSegmentDrag : handleDrag);
+      document.removeEventListener("mouseup", handleRelease, {
+        capture: true
+      });
+      document.removeEventListener("touchend", handleRelease, {
+        capture: true
+      });
+      var sortedValues = utils.sortNumList(tempValues || values);
+      onDragEnd === null || onDragEnd === void 0 || onDragEnd();
+      onChange === null || onChange === void 0 || onChange(sortedValues);
+      setActiveHandleIndex(undefined);
+      setSegmentStart(undefined);
+      setTempValues(undefined);
+    };
+    onDragStart === null || onDragStart === void 0 || onDragStart();
+    document.addEventListener("mousemove", i === -1 ? handleSegmentDrag : handleDrag);
+    document.addEventListener("touchmove", i === -1 ? handleSegmentDrag : handleDrag);
+    document.addEventListener("mouseup", handleRelease, {
+      capture: true
+    });
+    document.addEventListener("touchend", handleRelease, {
+      capture: true
+    });
+  }, [getLatest, handleDrag]);
+  var getPercentageForValue = react.useCallback(function (val) {
+    return utils.linearInterpolator.getPercentageForValue(val, min, max);
+  }, [max, min]);
+  var trackClicked = react.useCallback(function (e) {
+    var _getLatest6 = getLatest(),
+      onChange = _getLatest6.onChange,
+      values = _getLatest6.values;
+    var clientX = e.type === "touchmove" ?
+    // @ts-expect-error ignore
+    e.changedTouches[0].clientX :
+    // @ts-expect-error ignore
+    e.clientX;
+    var clientY = e.type === "touchmove" ?
+    // @ts-expect-error ignore
+    e.changedTouches[0].clientY :
+    // @ts-expect-error ignore
+    e.clientY;
+    var newValue = isVertical ? getValueForClientY(clientY) : getValueForClientX(clientX);
+    var newRoundedValue = roundToStep(newValue);
+    var newValues = [newRoundedValue];
+    if (values.length === 2) {
+      if (values[0] > newRoundedValue) newValues = [newRoundedValue, values[1]];else if (values[1] < newRoundedValue) newValues = [values[0], newRoundedValue];else {
+        var diff = (values[1] - values[0]) / 2;
+        if (values[0] + diff >= newRoundedValue) newValues = [newRoundedValue, values[1]];
+        if (values[1] - diff <= newRoundedValue) newValues = [values[0], newRoundedValue];
+      }
+    }
+    onChange(newValues);
+  }, [getLatest, getValueForClientX, getValueForClientY, isVertical]);
+  react.useEffect(function () {
+    var _trackElRef$current;
+    (_trackElRef$current = trackElRef.current) === null || _trackElRef$current === void 0 || _trackElRef$current.addEventListener("mousedown", trackClicked);
+  }, [trackClicked]);
+  // Build the ticks
+  var ticks = react.useMemo(function () {
+    var ticks = controlledTicks !== null && controlledTicks !== void 0 ? controlledTicks : steps;
+    if (!ticks) {
+      ticks = [min];
+      var count = tickSize - tickSize % stepSize;
+      while (ticks[ticks.length - 1] < max - count) {
+        ticks.push(ticks[ticks.length - 1] + count);
+      }
+      ticks.push(max);
+    }
+    return ticks.map(function (value, i) {
+      return {
+        key: i,
+        value: value,
+        percentage: getPercentageForValue(value),
+        styles: _defineProperty(_defineProperty({}, positionProp, "".concat(getPercentageForValue(value), "%")), marginProp, "-0.125rem")
+      };
+    });
+  }, [controlledTicks, getPercentageForValue, max, min, steps, tickSize, positionProp, marginProp]);
+  var segments = react.useMemo(function () {
+    var sortedValues = utils.sortNumList(tempValues !== null && tempValues !== void 0 ? tempValues : values);
+    return [].concat(_toConsumableArray(sortedValues), [max]).map(function (value, i) {
+      var active = i === sortedValues.length - 1;
+      return {
+        key: i,
+        value: value,
+        active: active,
+        props: active ? {
+          ref: segmentElRef,
+          onMouseDownCapture: function onMouseDownCapture(e) {
+            e.stopPropagation();
+            e.persist();
+            handlePress(e, -1);
+          },
+          onTouchStartCapture: function onTouchStartCapture(e) {
+            e.stopPropagation();
+            e.persist();
+            handlePress(e, -1);
+          }
+        } : {},
+        styles: function () {
+          var left = getPercentageForValue(sortedValues[i - 1] ? sortedValues[i - 1] : min);
+          var width = getPercentageForValue(value) - left;
+          return _defineProperty(_defineProperty({}, positionProp, "".concat(left, "%")), isVertical ? "height" : "width", "".concat(width, "%"));
+        }()
+      };
+    });
+  }, [getPercentageForValue, max, min, tempValues, values, positionProp, marginProp]);
+  var handles = react.useMemo(function () {
+    return (tempValues !== null && tempValues !== void 0 ? tempValues : values).map(function (value, i) {
+      return {
+        key: i,
+        value: value,
+        percentage: getPercentageForValue(value),
+        active: i === activeHandleIndex,
+        props: {
+          role: "slider",
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": value,
+          onKeyDown: function onKeyDown(e) {
+            e.stopPropagation();
+            e.persist();
+            handleKeyDown(e, i);
+          },
+          onMouseDownCapture: function onMouseDownCapture(e) {
+            e.stopPropagation();
+            e.persist();
+            handlePress(e, i);
+          },
+          onTouchStartCapture: function onTouchStartCapture(e) {
+            e.stopPropagation();
+            e.persist();
+            handlePress(e, i);
+          }
+        },
+        styles: _defineProperty(_defineProperty({}, positionProp, "".concat(getPercentageForValue(value), "%")), marginProp, "-0.375rem"),
+        valueStyles: _defineProperty({}, positionProp, "".concat(getPercentageForValue(value), "%"))
+      };
+    });
+  }, [activeHandleIndex, getPercentageForValue, handleKeyDown, handlePress, min, max, tempValues, values, positionProp, marginProp]);
+  return {
+    trackElRef: trackElRef,
+    activeHandleIndex: activeHandleIndex,
+    ticks: ticks,
+    segments: segments,
+    handles: handles
+  };
+};
+
+exports.useRanger = useRanger;

package/dist/cjs/ranger/utils.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+
+/**
+ * react-ranger
+ * https://github.com/TanStack/ranger
+ */
+
+var getBoundingClientRect = function getBoundingClientRect(element) {
+  var rect = element.getBoundingClientRect();
+  return {
+    top: Math.ceil(rect.top),
+    left: Math.ceil(rect.left),
+    right: Math.ceil(rect.right),
+    width: Math.ceil(rect.width),
+    bottom: Math.ceil(rect.bottom),
+    height: Math.ceil(rect.height)
+  };
+};
+var sortNumList = function sortNumList(arr) {
+  return _toConsumableArray(arr).map(Number).sort(function (a, b) {
+    return a - b;
+  });
+};
+var linearInterpolator = {
+  getPercentageForValue: function getPercentageForValue(val, min, max) {
+    return Math.max(0, Math.min(100, (val - min) / (max - min) * 100));
+  },
+  getValueForClientX: function getValueForClientX(clientX, trackDims, min, max, isRtl) {
+    var left = trackDims.left,
+      right = trackDims.right,
+      width = trackDims.width;
+    var percentageValue = (isRtl ? right - clientX : clientX - left) / width;
+    var value = (max - min) * percentageValue;
+    return value + min;
+  },
+  getValueForClientY: function getValueForClientY(clientY, trackDims, min, max) {
+    var height = trackDims.height,
+      bottom = trackDims.bottom;
+    var percentageValue = (bottom - clientY) / height;
+    var value = (max - min) * percentageValue;
+    return value + min;
+  }
+};
+
+exports.getBoundingClientRect = getBoundingClientRect;
+exports.linearInterpolator = linearInterpolator;
+exports.sortNumList = sortNumList;

package/dist/cjs/select/AutoComplete.js

@@ -0,0 +1,268 @@
+'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", "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 = react.useRef(history);
+  var submitRef = react.useRef(null);
+  var _useSelect = useSelect.useSelect({
+      value: value,
+      autoComplete: true,
+      options: options.current,
+      multiple: multiple,
+      onChange: onChange,
+      onSelect: onSelect
+    }),
+    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 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);
+    }
+  });
+  var _useInteractions = react$1.useInteractions([dismiss, navigation, typeahead]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps,
+    getItemProps = _useInteractions.getItemProps;
+  var referenceProps = react.useMemo(function () {
+    var props = getReferenceProps();
+    return _objectSpread(_objectSpread({}, props), {}, {
+      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, "\"]"))) {
+          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);
+        handleQuery("");
+        setOpen(false);
+        _onBlur === null || _onBlur === void 0 || _onBlur(evt);
+      },
+      onKeyDown: function onKeyDown(evt) {
+        if (evt.key === "Enter") {
+          evt.preventDefault();
+          if (state.activeIndex !== null) {
+            handleChange(listContentRef.current[state.activeIndex]);
+            evt.stopPropagation();
+            return false;
+          } else if (state.query !== undefined) {
+            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();
+          }
+        } else if (evt.key === "Backspace") {
+          !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;
+            (_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]);
+  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) {
+        return /*#__PURE__*/jsxRuntime.jsx(core.Chip, {
+          onRemove: function onRemove() {
+            return handleRemove(index);
+          },
+          children: item
+        }, index);
+      });
+    }
+  }, [state.value, state.query, placeholder]);
+  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]);
+  var inputValue = react.useMemo(function () {
+    var _state$query, _ref2, _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 : "";
+  }, [multiple, state.query, state.value]);
+  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: !multiple && expandOnEdit && state.open ? "!z-[99]" : "",
+    floatingExpand: !multiple && expandOnEdit && state.open
+  }, 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("textarea", _objectSpread(_objectSpread({
+        readOnly: readOnly,
+        disabled: disabled,
+        value: inputValue,
+        "aria-invalid": invalid,
+        "data-testid": name,
+        name: name,
+        size: 1,
+        onInput: onInput,
+        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"),
+        placeholder: utilities.isEmpty(state.value) ? placeholder : ""
+      }, referenceProps), {}, {
+        onChange: function onChange(evt) {
+          return handleQuery(evt.target.value);
+        }
+      })), /*#__PURE__*/jsxRuntime.jsx("button", {
+        type: "submit",
+        ref: submitRef,
+        tabIndex: -1,
+        className: "opacity-0 absolute"
+      })]
+    }), 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,
+          itemRef: setItemRef,
+          itemProps: makeItemProps,
+          empty: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "text-muted text-sm px-2 py-1",
+            children: "No history available"
+          }),
+          children: function children(item) {
+            return item;
+          }
+        }))
+      })
+    })]
+  }));
+};
+
+exports.AutoComplete = AutoComplete;