@qsxy/element-plus-react 1.0.0-next.8 → 1.0.2

package/dist/Select/SelectCore.js

@@ -1,433 +1,262 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Select/SelectCore.tsx
-var SelectCore_exports = {};
-__export(SelectCore_exports, {
-  default: () => SelectCore_default
-});
-module.exports = __toCommonJS(SelectCore_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_filter = __toESM(require("lodash/filter"));
-var import_find = __toESM(require("lodash/find"));
-var import_max = __toESM(require("lodash/max"));
-var import_min = __toESM(require("lodash/min"));
-var import_omit = __toESM(require("lodash/omit"));
-var import_react = __toESM(require("react"));
-var import_Icon = require("../Icon");
-var import_Input = require("../Input");
-var import_Popper = require("../Popper");
-var import_Tag = require("../Tag");
-var import_Tooltip = __toESM(require("../Tooltip/Tooltip"));
-var import_Util = require("../Util");
-var import_hooks = require("../hooks");
-var import_SelectDropdown = __toESM(require("./SelectDropdown"));
-var SelectCore = (0, import_react.forwardRef)((props, ref) => {
-  props = (0, import_Util.mergeDefaultProps)(
-    {
-      placeholder: "请选择",
-      noDataText: "无数据",
-      noMatchText: "没有找到匹配的结果",
-      loadingText: /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { prefix: "fas", name: "spinner", spin: true }), " 加载中..."),
-      clearable: true,
-      filterable: false,
-      error: false,
-      required: false,
-      disabled: false,
-      maxWidth: 500,
-      collapseTagsTooltip: true,
-      maxCollapseTags: 1
-    },
-    props
-  );
-  const { b, e, be, m, is } = (0, import_hooks.useClassNames)("select");
-  const containerRef = (0, import_react.useRef)(null);
-  const contentRef = (0, import_react.useRef)(null);
-  const wrapperRef = (0, import_react.useRef)(null);
-  const createInputRef = (0, import_react.useRef)(null);
-  const popperInstRef = (0, import_react.useRef)(null);
-  const selectDropdownRef = (0, import_react.useRef)(null);
-  const inputInstance = (0, import_react.useRef)(null);
-  const searchInstance = (0, import_react.useRef)(null);
-  const {
-    filterable,
-    clearable,
-    error,
-    warning,
-    multiple,
-    collapseTags = false,
-    maxCollapseTags,
-    collapseTagsTooltip,
-    collapseTips,
-    filterMethod,
-    onChange,
-    allowCreate,
-    onEnter,
-    afterLeave,
-    prepend,
-    append,
-    onLoadSuccess,
-    ...rest
-  } = props;
-  const [htmlInputProps] = (0, import_hooks.partitionHTMLProps)(rest);
-  const [transitionProps] = (0, import_hooks.partitionAnimationProps)(rest);
-  const [popperProps] = (0, import_hooks.partitionPopperPropsUtils)(rest);
-  const [value, setValue] = (0, import_hooks.useControlled)(props.value, props.defaultValue);
-  const [createItem, setCreateItem] = (0, import_react.useState)("");
-  const disabled = (0, import_hooks.useDisabled)(props.disabled);
-  const size = (0, import_hooks.useSize)(props.size);
-  const multiValue = (0, import_react.useMemo)(() => {
-    if (multiple) {
-      if (value instanceof Array) {
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import classNames from 'classnames';
+import React, { forwardRef, useImperativeHandle } from 'react';
+import Icon from "../Icon/Icon";
+import Popper from "../Popper/Popper";
+import Tag from "../Tag/Tag";
+import Tooltip from "../Tooltip/Tooltip";
+import { isEmpty, isNotEmpty } from "../Util";
+import { useCalcInputWidth } from "../hooks/useCalcInputWidth";
+import SelectDropdown from "./SelectDropdown";
+import useSelect from "./useSelect";
+var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props = useSelect(props);
+  var nsSelect = _props.nsSelect,
+    containerRef = _props.containerRef,
+    contentRef = _props.contentRef,
+    wrapperRef = _props.wrapperRef,
+    suffixWrapperRef = _props.suffixWrapperRef,
+    popperInstRef = _props.popperInstRef,
+    selectDropdownRef = _props.selectDropdownRef,
+    tagTooltipRef = _props.tagTooltipRef,
+    inputRef = _props.inputRef,
+    inputValue = _props.inputValue,
+    setInputHovering = _props.setInputHovering,
+    setInputValue = _props.setInputValue,
+    setIsFocused = _props.setIsFocused,
+    filterable = _props.filterable,
+    remote = _props.remote,
+    clearIcon = _props.clearIcon,
+    multiple = _props.multiple,
+    collapseTags = _props.collapseTags,
+    maxCollapseTags = _props.maxCollapseTags,
+    collapseTagsTooltip = _props.collapseTagsTooltip,
+    tagType = _props.tagType,
+    tagEffect = _props.tagEffect,
+    showArrow = _props.showArrow,
+    collapseTips = _props.collapseTips,
+    allowCreate = _props.allowCreate,
+    prepend = _props.prepend,
+    append = _props.append,
+    transitionProps = _props.transitionProps,
+    popperProps = _props.popperProps,
+    value = _props.value,
+    setValue = _props.setValue,
+    disabled = _props.disabled,
+    size = _props.size,
+    multiValue = _props.multiValue,
+    multiOptionData = _props.multiOptionData,
+    label = _props.label,
+    visible = _props.visible,
+    setVisible = _props.setVisible,
+    popperStyle = _props.popperStyle,
+    placeholder = _props.placeholder,
+    shouldShowPlaceholder = _props.shouldShowPlaceholder,
+    handleEnter = _props.handleEnter,
+    handleAfterLeave = _props.handleAfterLeave,
+    toggleMenu = _props.toggleMenu,
+    onCloseTag = _props.onCloseTag,
+    onClear = _props.onClear,
+    onChoose = _props.onChoose,
+    labelFormat = _props.labelFormat,
+    iconComponent = _props.iconComponent,
+    iconReverse = _props.iconReverse,
+    handleCompositionStart = _props.handleCompositionStart,
+    handleCompositionUpdate = _props.handleCompositionUpdate,
+    handleCompositionEnd = _props.handleCompositionEnd,
+    tag = _props.tag;
+  var b = nsSelect.b,
+    e = nsSelect.e,
+    m = nsSelect.m,
+    is = nsSelect.is;
+  var _useCalcInputWidth = useCalcInputWidth(),
+    calculatorRef = _useCalcInputWidth.calculatorRef,
+    inputStyle = _useCalcInputWidth.inputStyle;
+  useImperativeHandle(ref, function () {
+    return {
+      popperInstRef: popperInstRef,
+      getValue: function getValue() {
         return value;
-      } else if (typeof value === "string") {
-        return [value];
-      }
-    }
-    return [];
-  }, [multiple, value]);
-  const [label, setLabel] = (0, import_react.useState)("");
-  const [visible, setVisible] = (0, import_react.useState)(false);
-  const [popperStyle, setPopperStyle] = (0, import_react.useState)({});
-  const [inputHeight, setInputHeight] = (0, import_react.useState)(32);
-  const placeholder = (0, import_react.useMemo)(() => {
-    return multiple && (0, import_Util.isNotEmpty)(multiValue) || (0, import_Util.isNotEmpty)(createItem) ? "" : props.placeholder;
-  }, [createItem, multiValue, multiple, props.placeholder]);
-  const getOptionInstance = (0, import_hooks.useChildrenInstance)("Select.Option", "OptionGroup");
-  const optionData = (0, import_react.useMemo)(() => {
-    if (props.children) {
-      const componentChildren = getOptionInstance(props.children);
-      return componentChildren.map((node) => {
-        var _a;
-        return {
-          label: ((_a = node.props) == null ? void 0 : _a.label) ?? node.props.value,
-          value: node.props.value
-        };
-      });
-    }
-    return [];
-  }, [getOptionInstance, props.children]);
-  const multiLabel = (0, import_react.useMemo)(() => {
-    if (multiple) {
-      return multiValue.map((item) => {
-        var _a;
-        return ((_a = (0, import_find.default)(optionData, { value: item })) == null ? void 0 : _a.label) ?? item;
-      });
+      },
+      setValue: setValue,
+      onClear: onClear,
+      clear: onClear,
+      setVisible: setVisible
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(b(), e(_templateObject || (_templateObject = _taggedTemplateLiteral(["default"]))), is({
+      disabled: disabled
+    }), m(_defineProperty({}, size, size)), props.className),
+    style: append || prepend ? {} : props.style,
+    ref: containerRef,
+    onMouseEnter: function onMouseEnter() {
+      return setInputHovering(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setInputHovering(false);
     }
-    return [];
-  }, [multiValue, multiple, optionData]);
-  const handleEnter = (0, import_react.useCallback)(
-    (node) => {
-      var _a;
-      if (visible && contentRef.current && containerRef.current) {
-        const rect = containerRef.current.getBoundingClientRect();
-        const options = Array.from(contentRef.current.querySelectorAll(`.${be("dropdown", "item")}>span`));
-        const maxWidth = (options.length > 0 ? (0, import_max.default)(options.map((item) => (item == null ? void 0 : item.offsetWidth) ?? 0)) : 0) + 35;
-        if (maxWidth && maxWidth < rect.width) {
-          setPopperStyle({
-            ...popperStyle,
-            width: rect.width
-          });
-        } else {
-          setPopperStyle({
-            ...popperStyle,
-            width: (0, import_min.default)([maxWidth, props.maxWidth])
-          });
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef,
+    className: classNames(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["wrapper"]))), is({
+      disabled: disabled,
+      filterable: filterable
+    })),
+    style: props.style,
+    onClick: toggleMenu
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["selection"]))), is({
+      near: multiple && multiValue.length > 0
+    }))
+  }, multiple && (tag ? tag({
+    data: multiOptionData,
+    selectDisabled: disabled,
+    deleteTag: onCloseTag
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, (collapseTags ? multiOptionData.slice(0, maxCollapseTags) : multiOptionData).map(function (item, i) {
+    var _item$label;
+    return /*#__PURE__*/React.createElement("div", {
+      key: "".concat(item.value, "_").concat(i),
+      className: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["selected-item"])))
+    }, /*#__PURE__*/React.createElement(Tag, {
+      type: tagType,
+      closable: !disabled,
+      effect: tagEffect,
+      onClick: toggleMenu,
+      onClose: function onClose(event) {
+        return onCloseTag(event, item);
+      },
+      disableTransitions: true
+    }, isNotEmpty(item.value) && typeof item.value === 'string' && labelFormat ? labelFormat === null || labelFormat === void 0 ? void 0 : labelFormat(-1, item.value, item.label) : (_item$label = item.label) !== null && _item$label !== void 0 ? _item$label : item.value));
+  }), collapseTags && (multiValue === null || multiValue === void 0 ? void 0 : multiValue.length) > maxCollapseTags && /*#__PURE__*/React.createElement(Tooltip, {
+    ref: tagTooltipRef,
+    popperClass: e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["tooltip"]))),
+    placement: "top",
+    disabled: !collapseTagsTooltip,
+    content: /*#__PURE__*/React.createElement("div", {
+      className: e(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["selection"])))
+    }, multiOptionData.slice(maxCollapseTags, multiOptionData.length).map(function (item, i) {
+      var _item$label2;
+      return /*#__PURE__*/React.createElement("div", {
+        key: "".concat(item.value, "_").concat(i),
+        className: e(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["selected-item"])))
+      }, /*#__PURE__*/React.createElement(Tag, {
+        type: tagType,
+        disableTransitions: true,
+        closable: !disabled,
+        effect: tagEffect,
+        onClick: toggleMenu,
+        onClose: function onClose(evt) {
+          return onCloseTag(evt, item);
         }
-        (_a = selectDropdownRef.current) == null ? void 0 : _a.scrollToSelected();
-        onEnter == null ? void 0 : onEnter(node);
-      }
-    },
-    [be, onEnter, popperStyle, props.maxWidth, visible]
-  );
-  const handleAfterLeave = (0, import_react.useCallback)(
-    (node) => {
-      var _a;
-      (_a = selectDropdownRef.current) == null ? void 0 : _a.clear();
-      afterLeave == null ? void 0 : afterLeave(node);
-    },
-    [afterLeave]
-  );
-  const onClick = (0, import_react.useCallback)(
-    (event) => {
-      event.preventDefault();
-      event == null ? void 0 : event.stopPropagation();
-      if (disabled) {
-        setVisible(false);
-        return;
-      }
-      setVisible(!visible);
+      }, isNotEmpty(item.value) && typeof item.value === 'string' && labelFormat ? labelFormat === null || labelFormat === void 0 ? void 0 : labelFormat(-1, item.value, item.label) : (_item$label2 = item.label) !== null && _item$label2 !== void 0 ? _item$label2 : item.value));
+    })),
+    effect: "light",
+    enterable: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["selected-item"])))
+  }, /*#__PURE__*/React.createElement(Tag, {
+    type: tagType,
+    onClick: toggleMenu,
+    disableTransitions: true,
+    effect: tagEffect
+  }, collapseTips ? collapseTips(multiOptionData.length - maxCollapseTags, multiOptionData.length) : "+ ".concat(multiOptionData.length - maxCollapseTags)))))), /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["selected-item"]))), e(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["input-wrapper"]))), is({
+      hidden: !filterable
+    }))
+  }, /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    value: inputValue,
+    type: "text",
+    className: classNames(e(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["input"]))), is(size)),
+    style: inputStyle,
+    disabled: disabled,
+    readOnly: !filterable,
+    onClick: toggleMenu,
+    onCompositionStart: handleCompositionStart,
+    onCompositionUpdate: handleCompositionUpdate,
+    onCompositionEnd: handleCompositionEnd,
+    onChange: function onChange(event) {
+      setInputValue(event.target.value);
+      setVisible(true);
     },
-    [disabled, visible]
-  );
-  const onCloseTag = (0, import_react.useCallback)(
-    (item) => {
-      const res = (0, import_filter.default)(multiValue, (item1) => item1 !== item);
-      setValue(res);
-      onChange == null ? void 0 : onChange(res, multiLabel);
-    },
-    [multiLabel, multiValue, onChange, setValue]
-  );
-  const onClear = (0, import_react.useCallback)(() => {
-    var _a;
-    setValue(multiple ? [] : "");
-    setLabel("");
-    (_a = selectDropdownRef.current) == null ? void 0 : _a.hover("");
-    onChange == null ? void 0 : onChange(multiple ? [] : "", multiple ? [] : "");
-    setCreateItem("");
-  }, [multiple, onChange, setValue]);
-  const onChoose = (0, import_react.useCallback)(
-    (val, text, event) => {
-      event.preventDefault();
-      if ((0, import_Util.isNotEmpty)(val)) {
-        let result = val;
-        if (multiple) {
-          if (multiValue.includes(val)) {
-            result = (0, import_filter.default)(multiValue, (item) => item !== val);
-          } else {
-            result = [...multiValue, val];
-          }
-        } else {
-          if (val !== createItem) {
-            setCreateItem("");
-          }
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter') {
+        if (allowCreate && isNotEmpty(inputValue)) {
+          onChoose(inputValue, {
+            value: inputValue,
+            label: inputValue
+          }, event);
         }
-        setValue(result);
-        setLabel(multiple ? "" : text);
-        onChange == null ? void 0 : onChange(result, multiple ? result.map((item) => {
-          var _a;
-          return ((_a = (0, import_find.default)(optionData, { value: item })) == null ? void 0 : _a.label) ?? item;
-        }) : text);
-        !multiple && onClick(event);
-      } else {
-        setVisible(false);
       }
     },
-    [multiple, setValue, onChange, multiValue, onClick, createItem, optionData]
-  );
-  (0, import_react.useEffect)(() => {
-    var _a;
-    if (visible && filterable && !allowCreate) {
-      (_a = searchInstance.current) == null ? void 0 : _a.focus();
-    }
-  }, [visible]);
-  (0, import_react.useEffect)(() => {
-    var _a;
-    if (popperInstRef.current && popperInstRef.current.update) {
-      (_a = popperInstRef.current) == null ? void 0 : _a.update();
-    }
-  }, [popperStyle]);
-  (0, import_react.useEffect)(() => {
-    var _a, _b;
-    if (wrapperRef.current) {
-      const height = ((_a = wrapperRef.current) == null ? void 0 : _a.clientHeight) + 4;
-      setInputHeight(height <= 32 ? 32 : height + 32);
-    }
-    if (popperInstRef.current && popperInstRef.current.update) {
-      (_b = popperInstRef.current) == null ? void 0 : _b.update();
-    }
-  }, [multiValue]);
-  (0, import_react.useEffect)(() => {
-    const labels = (value instanceof Array ? value : [value]).map((item) => {
-      var _a;
-      return (_a = (0, import_find.default)(optionData, { value: item })) == null ? void 0 : _a.label;
-    }).filter((item) => !!item);
-    if (labels.length > 0) {
-      setLabel(multiple ? "" : labels.join(","));
-    } else {
-      if ((0, import_Util.isNotEmpty)(value)) {
-        setLabel(value instanceof Array ? value.join(",") : value + "");
-      } else {
-        setLabel("");
-      }
-    }
-    onLoadSuccess == null ? void 0 : onLoadSuccess(value, labels);
-  }, [multiple, onLoadSuccess, optionData, value]);
-  (0, import_react.useImperativeHandle)(ref, () => ({
-    popperInstRef,
-    label,
-    setLabel,
-    inputInstance,
-    searchInstance,
-    getValue: () => value,
-    setValue,
-    onClear,
-    clear: onClear,
-    setVisible
-  }));
-  (0, import_react.useImperativeHandle)(ref, () => containerRef.current);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b(), e`default`, is({ disabled }), m({ [size]: size }), props.className), style: append || prepend ? {} : props.style, ref: containerRef }, /* @__PURE__ */ import_react.default.createElement("div", { className: e`trigger` }, multiple && /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: e`tags`,
-      onMouseEnter: () => {
-        var _a;
-        return (_a = inputInstance.current) == null ? void 0 : _a.showClear(multiple ? multiValue.join(",") : createItem || label);
-      },
-      onMouseLeave: () => {
-        var _a;
-        return (_a = inputInstance.current) == null ? void 0 : _a.hideClear();
-      }
+    onFocus: function onFocus() {
+      return setIsFocused(true);
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b`tags-wrapper`, "has-prefix"), onClick, ref: wrapperRef }, (collapseTags ? multiLabel.slice(0, maxCollapseTags) : multiLabel).map((item, i) => {
-      return /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, { type: "info", key: multiValue[i], closable: !disabled, onClick, onClose: () => onCloseTag(multiValue[i]), disableTransitions: true }, item);
-    }), collapseTags && (multiValue == null ? void 0 : multiValue.length) > maxCollapseTags && /* @__PURE__ */ import_react.default.createElement(
-      import_Tooltip.default,
-      {
-        popperClass: e`tooltip`,
-        placement: "top",
-        disabled: !collapseTagsTooltip,
-        content: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, multiLabel.slice(maxCollapseTags, multiLabel.length).map((item) => /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, { key: item, type: "info", disableTransitions: true }, item))),
-        effect: "light",
-        enterable: true
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, { type: "info", onClick, disableTransitions: true }, collapseTips ? collapseTips(multiLabel.length - maxCollapseTags, multiLabel.length) : `+ ${multiLabel.length - maxCollapseTags}`)
-    )),
-    allowCreate && /* @__PURE__ */ import_react.default.createElement(
-      "input",
-      {
-        type: "text",
-        className: e`input`,
-        style: { marginLeft: 5, flexGrow: 1, width: "0.111111%", maxWidth: 170 },
-        ref: createInputRef,
-        onClick: () => setVisible(!visible),
-        onInput: (event) => {
-          var _a;
-          setVisible(true);
-          setCreateItem(event.target.value);
-          if (popperInstRef.current && popperInstRef.current.update) {
-            (_a = popperInstRef.current) == null ? void 0 : _a.update();
-          }
-        },
-        onKeyDown: (event) => {
-          if (event.key === "Enter") {
-            onChoose(createItem, createItem, event);
-            setCreateItem("");
-            if (createInputRef.current) {
-              createInputRef.current.value = "";
-            }
-          }
-        },
-        onBlur: () => {
-          setTimeout(() => {
-            setCreateItem("");
-            if (createInputRef.current) {
-              createInputRef.current.value = "";
-            }
-          }, 200);
-        }
-      }
-    )
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_Input.Input,
-    {
-      ref: inputInstance,
-      value: multiple ? multiValue.join(",") : createItem || label,
-      hiddenValue: multiple,
-      placeholder,
-      readOnly: !allowCreate,
-      clearable: clearable && !disabled,
-      disabled,
-      onClick,
-      onClear,
-      plain: props.plain,
-      className: (0, import_classnames.default)(is({ active: visible })),
-      size,
-      onChange: (val) => {
-        setVisible(true);
-        setCreateItem(val + "");
-      },
-      onKeyDown: (event) => {
-        if (event.key === "Enter") {
-          onChoose(createItem, createItem, event);
-        }
-      },
-      onBlur: () => {
-        setTimeout(() => {
-          setCreateItem("");
-        }, 200);
-      },
-      error,
-      warning,
-      innerStyle: multiple ? { height: inputHeight } : {},
-      suffix: /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { prefix: "fal", name: "angle-down", rotate: visible ? 180 : null, onClick }),
-      ...(0, import_omit.default)(htmlInputProps, [
-        "value",
-        "defaultValue",
-        "onInput",
-        "size",
-        "prefix",
-        "onChange",
-        "style",
-        "placeholder",
-        "readOnly",
-        "onKeyDown",
-        "disabled",
-        "className",
-        "type",
-        "name",
-        "minLength",
-        "maxLength"
-      ])
+    onBlur: function onBlur() {
+      return setIsFocused(false);
     }
-  )), /* @__PURE__ */ import_react.default.createElement(
-    import_Popper.Popper,
-    {
-      referenceElement: containerRef,
-      visible,
-      popperInstRef,
-      popperStyle,
-      onDestroy: () => setVisible(false),
-      onEnter: handleEnter,
-      afterLeave: handleAfterLeave,
-      placement: "bottom-start",
-      transitionAppear: true,
-      unmountOnExit: true,
-      ...transitionProps,
-      ...popperProps
+    // error={error}
+    // warning={warning}
+    // style={multiple ? { height: inputHeight } : {}}
+    // suffix={<Icon prefix="fal" name="angle-down" rotate={visible ? 180 : null} onClick={toggleMenu} />}
+  }), filterable ? /*#__PURE__*/React.createElement("span", {
+    ref: calculatorRef,
+    "aria-hidden": "true",
+    className: e(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["input-calculator"])))
+  }, inputValue) : null), shouldShowPlaceholder && /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["selected-item"]))), e(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["placeholder"]))), is({
+      transparent: isEmpty(label) || visible && !inputValue
+    }))
+  }, isNotEmpty(value) && typeof value === 'string' && labelFormat ? labelFormat === null || labelFormat === void 0 ? void 0 : labelFormat(-1, value, placeholder) : /*#__PURE__*/React.createElement("span", null, placeholder))), /*#__PURE__*/React.createElement("div", {
+    ref: suffixWrapperRef,
+    className: classNames(e(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["suffix"]))), is(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["hidden-clear"]))))
+  }, iconComponent ? /*#__PURE__*/React.createElement(Icon, {
+    name: iconComponent,
+    className: classNames(e(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["caret"]))), e(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["icon"]))), e(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["arrow"]))), iconReverse),
+    onClick: toggleMenu
+  }) : null, clearIcon ? /*#__PURE__*/React.createElement(Icon, {
+    prefix: "fal",
+    name: clearIcon,
+    className: classNames(e(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["caret"]))), e(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["icon"]))), e(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["clear"])))),
+    onClick: onClear
+  }) : null)), /*#__PURE__*/React.createElement(Popper, _extends({
+    referenceElement: containerRef,
+    visible: visible,
+    popperClass: e(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["popper"]))),
+    popperInstRef: popperInstRef,
+    popperStyle: _objectSpread(_objectSpread({}, popperStyle), {}, {
+      visibility: filterable && remote && isEmpty(inputValue) ? 'hidden' : 'visible'
+    }),
+    onDestroy: function onDestroy() {
+      setVisible(false);
+      setInputValue('');
+      setIsFocused(false);
     },
-    /* @__PURE__ */ import_react.default.createElement(
-      import_SelectDropdown.default,
-      {
-        ref: selectDropdownRef,
-        value,
-        searchInstance,
-        createItem,
-        setCreateItem,
-        onChoose,
-        contentRef,
-        createInputRef,
-        popperInstRef,
-        ...props
-      },
-      props.children
-    )
-  ));
+    onEnter: handleEnter,
+    afterLeave: handleAfterLeave,
+    placement: 'bottom-start',
+    transitionAppear: true,
+    unmountOnExit: true,
+    showArrow: showArrow
+  }, transitionProps, popperProps), /*#__PURE__*/React.createElement(SelectDropdown, _extends({
+    ref: selectDropdownRef,
+    value: value,
+    inputValue: inputValue,
+    setInputValue: setInputValue,
+    onChoose: onChoose,
+    contentRef: contentRef,
+    popperInstRef: popperInstRef
+  }, _props, {
+    onClear: props.onClear
+  }), props.children)));
 });
-SelectCore.displayName = "SelectCore";
-var SelectCore_default = SelectCore;
+SelectCore.displayName = 'SelectCore';
+export default SelectCore;