tntd 2.7.29-beta.1 → 2.7.30

package/es/tntd-select/rc-select/Select.js

@@ -28,16 +28,13 @@
  * - `combobox` mode trigger `onChange` will get `undefined` if no `value` match in Option
  * - `combobox` mode not support `optionLabelProp`
  */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 };
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import warning from 'rc-util/lib/warning';
@@ -57,372 +54,387 @@ import { fillFieldNames, flattenOptions, injectPropsWithOption } from './utils/v
 import warningProps, { warningNullOptions } from './utils/warningPropsUtil';
 const OMIT_DOM_PROPS = ['inputValue'];
 function isRawValue(value) {
-    return !value || typeof value !== 'object';
+  return !value || typeof value !== 'object';
 }
 const Select = React.forwardRef((props, ref) => {
-    const { id, mode, prefixCls = 'rc-select', backfill, fieldNames, 
-    // Search
-    inputValue, searchValue, onSearch, autoClearSearchValue = true, 
-    // Select
-    onSelect, onDeselect, dropdownMatchSelectWidth = true, 
-    // Options
-    filterOption, filterSort, optionFilterProp, optionLabelProp, options, optionRender, children, defaultActiveFirstOption, menuItemSelectedIcon, virtual, direction, listHeight = 200, listItemHeight = 20, 
-    // Value
-    value, defaultValue, labelInValue, onChange } = props, restProps = __rest(props, ["id", "mode", "prefixCls", "backfill", "fieldNames", "inputValue", "searchValue", "onSearch", "autoClearSearchValue", "onSelect", "onDeselect", "dropdownMatchSelectWidth", "filterOption", "filterSort", "optionFilterProp", "optionLabelProp", "options", "optionRender", "children", "defaultActiveFirstOption", "menuItemSelectedIcon", "virtual", "direction", "listHeight", "listItemHeight", "value", "defaultValue", "labelInValue", "onChange"]);
-    const mergedId = useId(id);
-    const multiple = isMultiple(mode);
-    const childrenAsData = !!(!options && children);
-    const mergedFilterOption = React.useMemo(() => {
-        if (filterOption === undefined && mode === 'combobox') {
-            return false;
+  const {
+      id,
+      mode,
+      prefixCls = 'rc-select',
+      backfill,
+      fieldNames,
+      // Search
+      inputValue,
+      searchValue,
+      onSearch,
+      autoClearSearchValue = true,
+      // Select
+      onSelect,
+      onDeselect,
+      dropdownMatchSelectWidth = true,
+      // Options
+      filterOption,
+      filterSort,
+      optionFilterProp,
+      optionLabelProp,
+      options,
+      optionRender,
+      children,
+      defaultActiveFirstOption,
+      menuItemSelectedIcon,
+      virtual,
+      direction,
+      listHeight = 200,
+      listItemHeight = 20,
+      // Value
+      value,
+      defaultValue,
+      labelInValue,
+      onChange
+    } = props,
+    restProps = __rest(props, ["id", "mode", "prefixCls", "backfill", "fieldNames", "inputValue", "searchValue", "onSearch", "autoClearSearchValue", "onSelect", "onDeselect", "dropdownMatchSelectWidth", "filterOption", "filterSort", "optionFilterProp", "optionLabelProp", "options", "optionRender", "children", "defaultActiveFirstOption", "menuItemSelectedIcon", "virtual", "direction", "listHeight", "listItemHeight", "value", "defaultValue", "labelInValue", "onChange"]);
+  const mergedId = useId(id);
+  const multiple = isMultiple(mode);
+  const childrenAsData = !!(!options && children);
+  const mergedFilterOption = React.useMemo(() => {
+    if (filterOption === undefined && mode === 'combobox') {
+      return false;
+    }
+    return filterOption;
+  }, [filterOption, mode]);
+  // ========================= FieldNames =========================
+  const mergedFieldNames = React.useMemo(() => fillFieldNames(fieldNames, childrenAsData), /* eslint-disable react-hooks/exhaustive-deps */
+  [
+  // We stringify fieldNames to avoid unnecessary re-renders.
+  JSON.stringify(fieldNames), childrenAsData]);
+  // =========================== Search ===========================
+  const [mergedSearchValue, setSearchValue] = useMergedState('', {
+    value: searchValue !== undefined ? searchValue : inputValue,
+    postState: search => search || ''
+  });
+  // =========================== Option ===========================
+  const parsedOptions = useOptions(options, children, mergedFieldNames, optionFilterProp, optionLabelProp);
+  const {
+    valueOptions,
+    labelOptions,
+    options: mergedOptions
+  } = parsedOptions;
+  // ========================= Wrap Value =========================
+  const convert2LabelValues = React.useCallback(draftValues => {
+    // Convert to array
+    const valueList = toArray(draftValues);
+    // Convert to labelInValue type
+    return valueList.map(val => {
+      var _a, _b;
+      let rawValue;
+      let rawLabel;
+      let rawKey;
+      let rawDisabled;
+      let rawTitle;
+      // Fill label & value
+      if (isRawValue(val)) {
+        rawValue = val;
+      } else {
+        rawKey = val.key;
+        rawLabel = val.label;
+        rawValue = (_a = val.value) !== null && _a !== void 0 ? _a : rawKey;
+      }
+      const option = valueOptions.get(rawValue);
+      if (option) {
+        // Fill missing props
+        if (rawLabel === undefined) rawLabel = option === null || option === void 0 ? void 0 : option[optionLabelProp || mergedFieldNames.label];
+        if (rawKey === undefined) rawKey = (_b = option === null || option === void 0 ? void 0 : option.key) !== null && _b !== void 0 ? _b : rawValue;
+        rawDisabled = option === null || option === void 0 ? void 0 : option.disabled;
+        rawTitle = option === null || option === void 0 ? void 0 : option.title;
+        // Warning if label not same as provided
+        if (process.env.NODE_ENV !== 'production' && !optionLabelProp) {
+          const optionLabel = option === null || option === void 0 ? void 0 : option[mergedFieldNames.label];
+          if (optionLabel !== undefined && !React.isValidElement(optionLabel) && !React.isValidElement(rawLabel) && optionLabel !== rawLabel) {
+            warning(false, '`label` of `value` is not same as `label` in Select options.');
+          }
         }
-        return filterOption;
-    }, [filterOption, mode]);
-    // ========================= FieldNames =========================
-    const mergedFieldNames = React.useMemo(() => fillFieldNames(fieldNames, childrenAsData), 
-    /* eslint-disable react-hooks/exhaustive-deps */
-    [
-        // We stringify fieldNames to avoid unnecessary re-renders.
-        JSON.stringify(fieldNames),
-        childrenAsData,
-    ]);
-    // =========================== Search ===========================
-    const [mergedSearchValue, setSearchValue] = useMergedState('', {
-        value: searchValue !== undefined ? searchValue : inputValue,
-        postState: (search) => search || '',
-    });
-    // =========================== Option ===========================
-    const parsedOptions = useOptions(options, children, mergedFieldNames, optionFilterProp, optionLabelProp);
-    const { valueOptions, labelOptions, options: mergedOptions } = parsedOptions;
-    // ========================= Wrap Value =========================
-    const convert2LabelValues = React.useCallback((draftValues) => {
-        // Convert to array
-        const valueList = toArray(draftValues);
-        // Convert to labelInValue type
-        return valueList.map((val) => {
-            var _a, _b;
-            let rawValue;
-            let rawLabel;
-            let rawKey;
-            let rawDisabled;
-            let rawTitle;
-            // Fill label & value
-            if (isRawValue(val)) {
-                rawValue = val;
-            }
-            else {
-                rawKey = val.key;
-                rawLabel = val.label;
-                rawValue = (_a = val.value) !== null && _a !== void 0 ? _a : rawKey;
-            }
-            const option = valueOptions.get(rawValue);
-            if (option) {
-                // Fill missing props
-                if (rawLabel === undefined)
-                    rawLabel = option === null || option === void 0 ? void 0 : option[optionLabelProp || mergedFieldNames.label];
-                if (rawKey === undefined)
-                    rawKey = (_b = option === null || option === void 0 ? void 0 : option.key) !== null && _b !== void 0 ? _b : rawValue;
-                rawDisabled = option === null || option === void 0 ? void 0 : option.disabled;
-                rawTitle = option === null || option === void 0 ? void 0 : option.title;
-                // Warning if label not same as provided
-                if (process.env.NODE_ENV !== 'production' && !optionLabelProp) {
-                    const optionLabel = option === null || option === void 0 ? void 0 : option[mergedFieldNames.label];
-                    if (optionLabel !== undefined &&
-                        !React.isValidElement(optionLabel) &&
-                        !React.isValidElement(rawLabel) &&
-                        optionLabel !== rawLabel) {
-                        warning(false, '`label` of `value` is not same as `label` in Select options.');
-                    }
-                }
-            }
-            return {
-                label: rawLabel,
-                value: rawValue,
-                key: rawKey,
-                disabled: rawDisabled,
-                title: rawTitle,
-            };
-        });
-    }, [mergedFieldNames, optionLabelProp, valueOptions]);
-    // =========================== Values ===========================
-    const [internalValue, setInternalValue] = useMergedState(defaultValue, {
-        value,
+      }
+      return {
+        label: rawLabel,
+        value: rawValue,
+        key: rawKey,
+        disabled: rawDisabled,
+        title: rawTitle
+      };
     });
-    // Merged value with LabelValueType
-    const rawLabeledValues = React.useMemo(() => {
-        var _a;
-        const values = convert2LabelValues(internalValue);
-        // combobox no need save value when it's no value (exclude value equal 0)
-        if (mode === 'combobox' && isComboNoValue((_a = values[0]) === null || _a === void 0 ? void 0 : _a.value)) {
-            return [];
-        }
-        return values;
-    }, [internalValue, convert2LabelValues, mode]);
-    // Fill label with cache to avoid option remove
-    const [mergedValues, getMixedOption] = useCache(rawLabeledValues, valueOptions);
-    const displayValues = React.useMemo(() => {
-        // `null` need show as placeholder instead
-        // https://github.com/ant-design/ant-design/issues/25057
-        if (!mode && mergedValues.length === 1) {
-            const firstValue = mergedValues[0];
-            if (firstValue.value === null &&
-                (firstValue.label === null || firstValue.label === undefined)) {
-                return [];
-            }
-        }
-        return mergedValues.map((item) => {
-            var _a;
-            return (Object.assign(Object.assign({}, item), { label: (_a = item.label) !== null && _a !== void 0 ? _a : item.value }));
-        });
-    }, [mode, mergedValues]);
-    /** Convert `displayValues` to raw value type set */
-    const rawValues = React.useMemo(() => new Set(mergedValues.map((val) => val.value)), [mergedValues]);
-    React.useEffect(() => {
-        var _a;
-        if (mode === 'combobox') {
-            const strValue = (_a = mergedValues[0]) === null || _a === void 0 ? void 0 : _a.value;
-            setSearchValue(hasValue(strValue) ? String(strValue) : '');
-        }
-    }, [mergedValues]);
-    // ======================= Display Option =======================
-    // Create a placeholder item if not exist in `options`
-    const createTagOption = useRefFunc((val, label) => {
-        const mergedLabel = label !== null && label !== void 0 ? label : val;
-        return {
-            [mergedFieldNames.value]: val,
-            [mergedFieldNames.label]: mergedLabel,
-        };
+  }, [mergedFieldNames, optionLabelProp, valueOptions]);
+  // =========================== Values ===========================
+  const [internalValue, setInternalValue] = useMergedState(defaultValue, {
+    value
+  });
+  // Merged value with LabelValueType
+  const rawLabeledValues = React.useMemo(() => {
+    var _a;
+    const values = convert2LabelValues(internalValue);
+    // combobox no need save value when it's no value (exclude value equal 0)
+    if (mode === 'combobox' && isComboNoValue((_a = values[0]) === null || _a === void 0 ? void 0 : _a.value)) {
+      return [];
+    }
+    return values;
+  }, [internalValue, convert2LabelValues, mode]);
+  // Fill label with cache to avoid option remove
+  const [mergedValues, getMixedOption] = useCache(rawLabeledValues, valueOptions);
+  const displayValues = React.useMemo(() => {
+    // `null` need show as placeholder instead
+    // https://github.com/ant-design/ant-design/issues/25057
+    if (!mode && mergedValues.length === 1) {
+      const firstValue = mergedValues[0];
+      if (firstValue.value === null && (firstValue.label === null || firstValue.label === undefined)) {
+        return [];
+      }
+    }
+    return mergedValues.map(item => {
+      var _a;
+      return Object.assign(Object.assign({}, item), {
+        label: (_a = item.label) !== null && _a !== void 0 ? _a : item.value
+      });
     });
-    // Fill tag as option if mode is `tags`
-    const filledTagOptions = React.useMemo(() => {
-        if (mode !== 'tags') {
-            return mergedOptions;
-        }
-        // >>> Tag mode
-        const cloneOptions = [...mergedOptions];
-        // Check if value exist in options (include new patch item)
-        const existOptions = (val) => valueOptions.has(val);
-        // Fill current value as option
-        [...mergedValues]
-            .sort((a, b) => (a.value < b.value ? -1 : 1))
-            .forEach((item) => {
-            const val = item.value;
-            if (!existOptions(val)) {
-                cloneOptions.push(createTagOption(val, item.label));
-            }
-        });
-        return cloneOptions;
-    }, [createTagOption, mergedOptions, valueOptions, mergedValues, mode]);
-    const filteredOptions = useFilterOptions(filledTagOptions, mergedFieldNames, mergedSearchValue, mergedFilterOption, optionFilterProp);
-    // Fill options with search value if needed
-    const filledSearchOptions = React.useMemo(() => {
-        if (mode !== 'tags' ||
-            !mergedSearchValue ||
-            filteredOptions.some((item) => item[optionFilterProp || 'value'] === mergedSearchValue)) {
-            return filteredOptions;
-        }
-        // ignore when search value equal select input value
-        if (filteredOptions.some((item) => item[mergedFieldNames.value] === mergedSearchValue)) {
-            return filteredOptions;
-        }
-        // Fill search value as option
-        return [createTagOption(mergedSearchValue), ...filteredOptions];
-    }, [
-        createTagOption,
-        optionFilterProp,
-        mode,
-        filteredOptions,
-        mergedSearchValue,
-        mergedFieldNames,
-    ]);
-    const orderedFilteredOptions = React.useMemo(() => {
-        if (!filterSort) {
-            return filledSearchOptions;
-        }
-        return [...filledSearchOptions].sort((a, b) => filterSort(a, b));
-    }, [filledSearchOptions, filterSort]);
-    const displayOptions = React.useMemo(() => flattenOptions(orderedFilteredOptions, {
-        fieldNames: mergedFieldNames,
-        childrenAsData,
-    }), [orderedFilteredOptions, mergedFieldNames, childrenAsData]);
-    // =========================== Change ===========================
-    const triggerChange = (values) => {
-        const labeledValues = convert2LabelValues(values);
-        setInternalValue(labeledValues);
-        if (onChange &&
-            // Trigger event only when value changed
-            (labeledValues.length !== mergedValues.length ||
-                labeledValues.some((newVal, index) => { var _a; return ((_a = mergedValues[index]) === null || _a === void 0 ? void 0 : _a.value) !== (newVal === null || newVal === void 0 ? void 0 : newVal.value); }))) {
-            const returnValues = labelInValue ? labeledValues : labeledValues.map((v) => v.value);
-            const returnOptions = labeledValues.map((v) => injectPropsWithOption(getMixedOption(v.value)));
-            onChange(
-            // Value
-            multiple ? returnValues : returnValues[0], 
-            // Option
-            multiple ? returnOptions : returnOptions[0]);
-        }
-    };
-    // ======================= Accessibility ========================
-    const [activeValue, setActiveValue] = React.useState(null);
-    const [accessibilityIndex, setAccessibilityIndex] = React.useState(0);
-    const mergedDefaultActiveFirstOption = defaultActiveFirstOption !== undefined ? defaultActiveFirstOption : mode !== 'combobox';
-    const onActiveValue = React.useCallback((active, index, { source = 'keyboard' } = {}) => {
-        setAccessibilityIndex(index);
-        if (backfill && mode === 'combobox' && active !== null && source === 'keyboard') {
-            setActiveValue(String(active));
-        }
-    }, [backfill, mode]);
-    // ========================= OptionList =========================
-    const triggerSelect = (val, selected, type) => {
-        const getSelectEnt = () => {
-            var _a;
-            const option = getMixedOption(val);
-            return [
-                labelInValue
-                    ? {
-                        label: option === null || option === void 0 ? void 0 : option[mergedFieldNames.label],
-                        value: val,
-                        key: (_a = option === null || option === void 0 ? void 0 : option.key) !== null && _a !== void 0 ? _a : val,
-                    }
-                    : val,
-                injectPropsWithOption(option),
-            ];
-        };
-        if (selected && onSelect) {
-            const [wrappedValue, option] = getSelectEnt();
-            onSelect(wrappedValue, option);
-        }
-        else if (!selected && onDeselect && type !== 'clear') {
-            const [wrappedValue, option] = getSelectEnt();
-            onDeselect(wrappedValue, option);
-        }
+  }, [mode, mergedValues]);
+  /** Convert `displayValues` to raw value type set */
+  const rawValues = React.useMemo(() => new Set(mergedValues.map(val => val.value)), [mergedValues]);
+  React.useEffect(() => {
+    var _a;
+    if (mode === 'combobox') {
+      const strValue = (_a = mergedValues[0]) === null || _a === void 0 ? void 0 : _a.value;
+      setSearchValue(hasValue(strValue) ? String(strValue) : '');
+    }
+  }, [mergedValues]);
+  // ======================= Display Option =======================
+  // Create a placeholder item if not exist in `options`
+  const createTagOption = useRefFunc((val, label) => {
+    const mergedLabel = label !== null && label !== void 0 ? label : val;
+    return {
+      [mergedFieldNames.value]: val,
+      [mergedFieldNames.label]: mergedLabel
     };
-    // Used for OptionList selection
-    const onInternalSelect = useRefFunc((val, info) => {
-        let cloneValues;
-        // Single mode always trigger select only with option list
-        const mergedSelect = multiple ? info.selected : true;
-        if (mergedSelect) {
-            cloneValues = multiple ? [...mergedValues, val] : [val];
-        }
-        else {
-            cloneValues = mergedValues.filter((v) => v.value !== val);
-        }
-        triggerChange(cloneValues);
-        triggerSelect(val, mergedSelect);
-        // Clean search value if single or configured
-        if (mode === 'combobox') {
-            // setSearchValue(String(val));
-            setActiveValue('');
-        }
-        else if (!isMultiple || autoClearSearchValue) {
-            setSearchValue('');
-            setActiveValue('');
-        }
+  });
+  // Fill tag as option if mode is `tags`
+  const filledTagOptions = React.useMemo(() => {
+    if (mode !== 'tags') {
+      return mergedOptions;
+    }
+    // >>> Tag mode
+    const cloneOptions = [...mergedOptions];
+    // Check if value exist in options (include new patch item)
+    const existOptions = val => valueOptions.has(val);
+    // Fill current value as option
+    [...mergedValues].sort((a, b) => a.value < b.value ? -1 : 1).forEach(item => {
+      const val = item.value;
+      if (!existOptions(val)) {
+        cloneOptions.push(createTagOption(val, item.label));
+      }
     });
-    // ======================= Display Change =======================
-    // BaseSelect display values change
-    const onDisplayValuesChange = (nextValues, info) => {
-        triggerChange(nextValues);
-        const { type, values } = info;
-        if (type === 'remove' || type === 'clear') {
-            values.forEach((item) => {
-                triggerSelect(item.value, false, type);
-            });
-        }
-    };
-    // =========================== Search ===========================
-    const onInternalSearch = (searchText, info) => {
-        setSearchValue(searchText);
-        setActiveValue(null);
-        // [Submit] Tag mode should flush input
-        if (info.source === 'submit') {
-            const formatted = (searchText || '').trim();
-            // prevent empty tags from appearing when you click the Enter button
-            if (formatted) {
-                const newRawValues = Array.from(new Set([...rawValues, formatted]));
-                triggerChange(newRawValues);
-                triggerSelect(formatted, true);
-                setSearchValue('');
-            }
-            return;
-        }
-        if (info.source !== 'blur') {
-            if (mode === 'combobox') {
-                triggerChange(searchText);
-            }
-            onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchText);
-        }
+    return cloneOptions;
+  }, [createTagOption, mergedOptions, valueOptions, mergedValues, mode]);
+  const filteredOptions = useFilterOptions(filledTagOptions, mergedFieldNames, mergedSearchValue, mergedFilterOption, optionFilterProp);
+  // Fill options with search value if needed
+  const filledSearchOptions = React.useMemo(() => {
+    if (mode !== 'tags' || !mergedSearchValue || filteredOptions.some(item => item[optionFilterProp || 'value'] === mergedSearchValue)) {
+      return filteredOptions;
+    }
+    // ignore when search value equal select input value
+    if (filteredOptions.some(item => item[mergedFieldNames.value] === mergedSearchValue)) {
+      return filteredOptions;
+    }
+    // Fill search value as option
+    return [createTagOption(mergedSearchValue), ...filteredOptions];
+  }, [createTagOption, optionFilterProp, mode, filteredOptions, mergedSearchValue, mergedFieldNames]);
+  const orderedFilteredOptions = React.useMemo(() => {
+    if (!filterSort) {
+      return filledSearchOptions;
+    }
+    return [...filledSearchOptions].sort((a, b) => filterSort(a, b));
+  }, [filledSearchOptions, filterSort]);
+  const displayOptions = React.useMemo(() => flattenOptions(orderedFilteredOptions, {
+    fieldNames: mergedFieldNames,
+    childrenAsData
+  }), [orderedFilteredOptions, mergedFieldNames, childrenAsData]);
+  // =========================== Change ===========================
+  const triggerChange = values => {
+    const labeledValues = convert2LabelValues(values);
+    setInternalValue(labeledValues);
+    if (onChange && (
+    // Trigger event only when value changed
+    labeledValues.length !== mergedValues.length || labeledValues.some((newVal, index) => {
+      var _a;
+      return ((_a = mergedValues[index]) === null || _a === void 0 ? void 0 : _a.value) !== (newVal === null || newVal === void 0 ? void 0 : newVal.value);
+    }))) {
+      const returnValues = labelInValue ? labeledValues : labeledValues.map(v => v.value);
+      const returnOptions = labeledValues.map(v => injectPropsWithOption(getMixedOption(v.value)));
+      onChange(
+      // Value
+      multiple ? returnValues : returnValues[0],
+      // Option
+      multiple ? returnOptions : returnOptions[0]);
+    }
+  };
+  // ======================= Accessibility ========================
+  const [activeValue, setActiveValue] = React.useState(null);
+  const [accessibilityIndex, setAccessibilityIndex] = React.useState(0);
+  const mergedDefaultActiveFirstOption = defaultActiveFirstOption !== undefined ? defaultActiveFirstOption : mode !== 'combobox';
+  const onActiveValue = React.useCallback((active, index, {
+    source = 'keyboard'
+  } = {}) => {
+    setAccessibilityIndex(index);
+    if (backfill && mode === 'combobox' && active !== null && source === 'keyboard') {
+      setActiveValue(String(active));
+    }
+  }, [backfill, mode]);
+  // ========================= OptionList =========================
+  const triggerSelect = (val, selected, type) => {
+    const getSelectEnt = () => {
+      var _a;
+      const option = getMixedOption(val);
+      return [labelInValue ? {
+        label: option === null || option === void 0 ? void 0 : option[mergedFieldNames.label],
+        value: val,
+        key: (_a = option === null || option === void 0 ? void 0 : option.key) !== null && _a !== void 0 ? _a : val
+      } : val, injectPropsWithOption(option)];
     };
-    const onInternalSearchSplit = (words) => {
-        let patchValues = words;
-        if (mode !== 'tags') {
-            patchValues = words
-                .map((word) => {
-                const opt = labelOptions.get(word);
-                return opt === null || opt === void 0 ? void 0 : opt.value;
-            })
-                .filter((val) => val !== undefined);
-        }
-        const newRawValues = Array.from(new Set([...rawValues, ...patchValues]));
+    if (selected && onSelect) {
+      const [wrappedValue, option] = getSelectEnt();
+      onSelect(wrappedValue, option);
+    } else if (!selected && onDeselect && type !== 'clear') {
+      const [wrappedValue, option] = getSelectEnt();
+      onDeselect(wrappedValue, option);
+    }
+  };
+  // Used for OptionList selection
+  const onInternalSelect = useRefFunc((val, info) => {
+    let cloneValues;
+    // Single mode always trigger select only with option list
+    const mergedSelect = multiple ? info.selected : true;
+    if (mergedSelect) {
+      cloneValues = multiple ? [...mergedValues, val] : [val];
+    } else {
+      cloneValues = mergedValues.filter(v => v.value !== val);
+    }
+    triggerChange(cloneValues);
+    triggerSelect(val, mergedSelect);
+    // Clean search value if single or configured
+    if (mode === 'combobox') {
+      // setSearchValue(String(val));
+      setActiveValue('');
+    } else if (!isMultiple || autoClearSearchValue) {
+      setSearchValue('');
+      setActiveValue('');
+    }
+  });
+  // ======================= Display Change =======================
+  // BaseSelect display values change
+  const onDisplayValuesChange = (nextValues, info) => {
+    triggerChange(nextValues);
+    const {
+      type,
+      values
+    } = info;
+    if (type === 'remove' || type === 'clear') {
+      values.forEach(item => {
+        triggerSelect(item.value, false, type);
+      });
+    }
+  };
+  // =========================== Search ===========================
+  const onInternalSearch = (searchText, info) => {
+    setSearchValue(searchText);
+    setActiveValue(null);
+    // [Submit] Tag mode should flush input
+    if (info.source === 'submit') {
+      const formatted = (searchText || '').trim();
+      // prevent empty tags from appearing when you click the Enter button
+      if (formatted) {
+        const newRawValues = Array.from(new Set([...rawValues, formatted]));
         triggerChange(newRawValues);
-        newRawValues.forEach((newRawValue) => {
-            triggerSelect(newRawValue, true);
-        });
-    };
-    // ========================== Context ===========================
-    const selectContext = React.useMemo(() => {
-        const realVirtual = virtual !== false && dropdownMatchSelectWidth !== false;
-        return Object.assign(Object.assign({}, parsedOptions), { flattenOptions: displayOptions, onActiveValue, defaultActiveFirstOption: mergedDefaultActiveFirstOption, onSelect: onInternalSelect, menuItemSelectedIcon,
-            rawValues, fieldNames: mergedFieldNames, virtual: realVirtual, direction,
-            listHeight,
-            listItemHeight,
-            childrenAsData,
-            optionRender });
-    }, [
-        parsedOptions,
-        displayOptions,
-        onActiveValue,
-        mergedDefaultActiveFirstOption,
-        onInternalSelect,
-        menuItemSelectedIcon,
-        rawValues,
-        mergedFieldNames,
-        virtual,
-        dropdownMatchSelectWidth,
-        listHeight,
-        listItemHeight,
-        childrenAsData,
-        optionRender,
-    ]);
-    // ========================== Warning ===========================
-    if (process.env.NODE_ENV !== 'production') {
-        warningProps(props);
-        warningNullOptions(mergedOptions, mergedFieldNames);
+        triggerSelect(formatted, true);
+        setSearchValue('');
+      }
+      return;
+    }
+    if (info.source !== 'blur') {
+      if (mode === 'combobox') {
+        triggerChange(searchText);
+      }
+      onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchText);
+    }
+  };
+  const onInternalSearchSplit = words => {
+    let patchValues = words;
+    if (mode !== 'tags') {
+      patchValues = words.map(word => {
+        const opt = labelOptions.get(word);
+        return opt === null || opt === void 0 ? void 0 : opt.value;
+      }).filter(val => val !== undefined);
     }
-    // ==============================================================
-    // ==                          Render                          ==
-    // ==============================================================
-    return (React.createElement(SelectContext.Provider, { value: selectContext },
-        React.createElement(BaseSelect, Object.assign({}, restProps, { 
-            // >>> MISC
-            id: mergedId, prefixCls: prefixCls, ref: ref, omitDomProps: OMIT_DOM_PROPS, mode: mode, 
-            // >>> Values
-            displayValues: displayValues, onDisplayValuesChange: onDisplayValuesChange, 
-            // >>> Trigger
-            direction: direction, 
-            // >>> Search
-            searchValue: mergedSearchValue, onSearch: onInternalSearch, autoClearSearchValue: autoClearSearchValue, onSearchSplit: onInternalSearchSplit, dropdownMatchSelectWidth: dropdownMatchSelectWidth, 
-            // >>> OptionList
-            OptionList: OptionList, emptyOptions: !displayOptions.length, 
-            // >>> Accessibility
-            activeValue: activeValue, activeDescendantId: `${mergedId}_list_${accessibilityIndex}` }))));
+    const newRawValues = Array.from(new Set([...rawValues, ...patchValues]));
+    triggerChange(newRawValues);
+    newRawValues.forEach(newRawValue => {
+      triggerSelect(newRawValue, true);
+    });
+  };
+  // ========================== Context ===========================
+  const selectContext = React.useMemo(() => {
+    const realVirtual = virtual !== false && dropdownMatchSelectWidth !== false;
+    return Object.assign(Object.assign({}, parsedOptions), {
+      flattenOptions: displayOptions,
+      onActiveValue,
+      defaultActiveFirstOption: mergedDefaultActiveFirstOption,
+      onSelect: onInternalSelect,
+      menuItemSelectedIcon,
+      rawValues,
+      fieldNames: mergedFieldNames,
+      virtual: realVirtual,
+      direction,
+      listHeight,
+      listItemHeight,
+      childrenAsData,
+      optionRender
+    });
+  }, [parsedOptions, displayOptions, onActiveValue, mergedDefaultActiveFirstOption, onInternalSelect, menuItemSelectedIcon, rawValues, mergedFieldNames, virtual, dropdownMatchSelectWidth, listHeight, listItemHeight, childrenAsData, optionRender]);
+  // ========================== Warning ===========================
+  if (process.env.NODE_ENV !== 'production') {
+    warningProps(props);
+    warningNullOptions(mergedOptions, mergedFieldNames);
+  }
+  // ==============================================================
+  // ==                          Render                          ==
+  // ==============================================================
+  return React.createElement(SelectContext.Provider, {
+    value: selectContext
+  }, React.createElement(BaseSelect, Object.assign({}, restProps, {
+    // >>> MISC
+    id: mergedId,
+    prefixCls: prefixCls,
+    ref: ref,
+    omitDomProps: OMIT_DOM_PROPS,
+    mode: mode,
+    // >>> Values
+    displayValues: displayValues,
+    onDisplayValuesChange: onDisplayValuesChange,
+    // >>> Trigger
+    direction: direction,
+    // >>> Search
+    searchValue: mergedSearchValue,
+    onSearch: onInternalSearch,
+    autoClearSearchValue: autoClearSearchValue,
+    onSearchSplit: onInternalSearchSplit,
+    dropdownMatchSelectWidth: dropdownMatchSelectWidth,
+    // >>> OptionList
+    OptionList: OptionList,
+    emptyOptions: !displayOptions.length,
+    // >>> Accessibility
+    activeValue: activeValue,
+    activeDescendantId: `${mergedId}_list_${accessibilityIndex}`
+  })));
 });
 if (process.env.NODE_ENV !== 'production') {
-    Select.displayName = 'Select';
+  Select.displayName = 'Select';
 }
 const TypedSelect = Select;
 TypedSelect.Option = Option;
 TypedSelect.OptGroup = OptGroup;
-export default TypedSelect;
-//# sourceMappingURL=Select.js.map
+export default TypedSelect;