acud 0.0.60

package/es/select/src/generate.js

@@ -0,0 +1,913 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+/**
+ * To match accessibility requirement, we always provide an input in the component.
+ * Other element will not set `tabIndex` to avoid `onBlur` sequence problem.
+ * For focused select, we set `aria-live="polite"` to update the accessibility content.
+ *
+ * ref:
+ * - keyboard: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Keyboard_interactions
+ */
+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 * as React from 'react';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import KeyCode from "rc-util/es/KeyCode";
+import classNames from 'classnames';
+import useMergedState from "rc-util/es/hooks/useMergedState";
+import Selector from './Selector';
+import SelectTrigger from './SelectTrigger';
+import { INTERNAL_PROPS_MARK } from './interface/generator';
+import { toInnerValue, toOuterValues, removeLastEnabledValue, getUUID } from './utils/commonUtil';
+import TransBtn from './TransBtn';
+import getIcons from '../utils/iconUtil';
+import useLock from './hooks/useLock';
+import useDelayReset from './hooks/useDelayReset';
+import useLayoutEffect from './hooks/useLayoutEffect';
+import { getSeparatedContent } from './utils/valueUtil';
+import useSelectTriggerControl from './hooks/useSelectTriggerControl';
+import useCacheDisplayValue from './hooks/useCacheDisplayValue';
+import useCacheOptions from './hooks/useCacheOptions';
+var DEFAULT_OMIT_PROPS = ['removeIcon', 'placeholder', 'autoFocus', 'maxTagCount', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'tabIndex'];
+/**
+ * This function is in internal usage.
+ * Do not use it in your prod env since we may refactor this.
+ */
+
+export default function generateSelector(config) {
+  var defaultPrefixCls = config.prefixCls,
+      OptionList = config.components.optionList,
+      convertChildrenToData = config.convertChildrenToData,
+      flattenOptions = config.flattenOptions,
+      getLabeledValue = config.getLabeledValue,
+      filterOptions = config.filterOptions,
+      isValueDisabled = config.isValueDisabled,
+      findValueOption = config.findValueOption,
+      warningProps = config.warningProps,
+      fillOptionsWithMissingValue = config.fillOptionsWithMissingValue,
+      omitDOMProps = config.omitDOMProps; // Use raw define since `React.FC` not support generic
+
+  function Select(props, ref) {
+    var _classNames2;
+
+    var _props$prefixCls = props.prefixCls,
+        prefixCls = _props$prefixCls === void 0 ? defaultPrefixCls : _props$prefixCls,
+        className = props.className,
+        id = props.id,
+        open = props.open,
+        defaultOpen = props.defaultOpen,
+        options = props.options,
+        children = props.children,
+        mode = props.mode,
+        value = props.value,
+        defaultValue = props.defaultValue,
+        labelInValue = props.labelInValue,
+        showSearch = props.showSearch,
+        inputValue = props.inputValue,
+        searchValue = props.searchValue,
+        filterOption = props.filterOption,
+        filterSort = props.filterSort,
+        _props$optionFilterPr = props.optionFilterProp,
+        optionFilterProp = _props$optionFilterPr === void 0 ? 'value' : _props$optionFilterPr,
+        _props$autoClearSearc = props.autoClearSearchValue,
+        autoClearSearchValue = _props$autoClearSearc === void 0 ? true : _props$autoClearSearc,
+        onSearch = props.onSearch,
+        suffixIconPre = props.suffixIconPre,
+        removeIcon = props.removeIcon,
+        allowClear = props.allowClear,
+        clearIcon = props.clearIcon,
+        showArrow = props.showArrow,
+        menuItemSelectedIcon = props.menuItemSelectedIcon,
+        disabled = props.disabled,
+        loading = props.loading,
+        defaultActiveFirstOption = props.defaultActiveFirstOption,
+        notFoundContent = props.notFoundContent,
+        optionLabelProp = props.optionLabelProp,
+        backfill = props.backfill,
+        tabIndex = props.tabIndex,
+        getInputElement = props.getInputElement,
+        getPopupContainer = props.getPopupContainer,
+        _props$listHeight = props.listHeight,
+        listHeight = _props$listHeight === void 0 ? 200 : _props$listHeight,
+        _props$listItemHeight = props.listItemHeight,
+        listItemHeight = _props$listItemHeight === void 0 ? 20 : _props$listItemHeight,
+        animation = props.animation,
+        transitionName = props.transitionName,
+        virtual = props.virtual,
+        dropdownStyle = props.dropdownStyle,
+        dropdownClassName = props.dropdownClassName,
+        dropdownMatchSelectWidth = props.dropdownMatchSelectWidth,
+        dropdownRender = props.dropdownRender,
+        dropdownAlign = props.dropdownAlign,
+        _props$showAction = props.showAction,
+        showAction = _props$showAction === void 0 ? [] : _props$showAction,
+        direction = props.direction,
+        tokenSeparators = props.tokenSeparators,
+        tagRender = props.tagRender,
+        renderEmpty = props.renderEmpty,
+        defaultExpandGroupKey = props.defaultExpandGroupKey,
+        onPopupScroll = props.onPopupScroll,
+        onDropdownVisibleChange = props.onDropdownVisibleChange,
+        onFocus = props.onFocus,
+        onBlur = props.onBlur,
+        onKeyUp = props.onKeyUp,
+        onKeyDown = props.onKeyDown,
+        onMouseDown = props.onMouseDown,
+        onChange = props.onChange,
+        onSelect = props.onSelect,
+        onDeselect = props.onDeselect,
+        onClear = props.onClear,
+        _props$internalProps = props.internalProps,
+        internalProps = _props$internalProps === void 0 ? {} : _props$internalProps,
+        restProps = __rest(props, ["prefixCls", "className", "id", "open", "defaultOpen", "options", "children", "mode", "value", "defaultValue", "labelInValue", "showSearch", "inputValue", "searchValue", "filterOption", "filterSort", "optionFilterProp", "autoClearSearchValue", "onSearch", "suffixIconPre", "removeIcon", "allowClear", "clearIcon", "showArrow", "menuItemSelectedIcon", "disabled", "loading", "defaultActiveFirstOption", "notFoundContent", "optionLabelProp", "backfill", "tabIndex", "getInputElement", "getPopupContainer", "listHeight", "listItemHeight", "animation", "transitionName", "virtual", "dropdownStyle", "dropdownClassName", "dropdownMatchSelectWidth", "dropdownRender", "dropdownAlign", "showAction", "direction", "tokenSeparators", "tagRender", "renderEmpty", "defaultExpandGroupKey", "onPopupScroll", "onDropdownVisibleChange", "onFocus", "onBlur", "onKeyUp", "onKeyDown", "onMouseDown", "onChange", "onSelect", "onDeselect", "onClear", "internalProps"]);
+
+    var useInternalProps = internalProps.mark === INTERNAL_PROPS_MARK;
+    var domProps = omitDOMProps ? omitDOMProps(restProps) : restProps;
+    DEFAULT_OMIT_PROPS.forEach(function (prop) {
+      delete domProps[prop];
+    });
+    var containerRef = useRef(null);
+    var triggerRef = useRef(null);
+    var selectorRef = useRef(null);
+    var listRef = useRef(null);
+    var tokenWithEnter = useMemo(function () {
+      return (tokenSeparators || []).some(function (tokenSeparator) {
+        return ['\n', '\r\n'].includes(tokenSeparator);
+      });
+    }, [tokenSeparators]);
+    /** Used for component focused management */
+
+    var _useDelayReset = useDelayReset(),
+        _useDelayReset2 = _slicedToArray(_useDelayReset, 3),
+        mockFocused = _useDelayReset2[0],
+        setMockFocused = _useDelayReset2[1],
+        cancelSetMockFocused = _useDelayReset2[2]; // Inner id for accessibility usage. Only work in client side
+
+
+    var _useState = useState(),
+        _useState2 = _slicedToArray(_useState, 2),
+        innerId = _useState2[0],
+        setInnerId = _useState2[1];
+
+    useEffect(function () {
+      setInnerId("rc_select_".concat(getUUID()));
+    }, []);
+    var mergedId = id || innerId; // optionLabelProp
+
+    var mergedOptionLabelProp = optionLabelProp;
+
+    if (mergedOptionLabelProp === undefined) {
+      mergedOptionLabelProp = options ? 'label' : 'children';
+    } // labelInValue
+
+
+    var mergedLabelInValue = mode === 'combobox' ? false : labelInValue;
+    var isMultiple = mode === 'tags' || mode === 'multiple';
+    var mergedShowSearch = showSearch !== undefined ? showSearch : isMultiple || mode === 'combobox'; // ============================== Ref ===============================
+
+    var selectorDomRef = useRef(null);
+    React.useImperativeHandle(ref, function () {
+      var _a, _b, _c;
+
+      return {
+        focus: (_a = selectorRef.current) === null || _a === void 0 ? void 0 : _a.focus,
+        blur: (_b = selectorRef.current) === null || _b === void 0 ? void 0 : _b.blur,
+        scrollTo: (_c = listRef.current) === null || _c === void 0 ? void 0 : _c.scrollTo
+      };
+    }); // ============================= Value ==============================
+
+    var _useMergedState = useMergedState(defaultValue, {
+      value: value
+    }),
+        _useMergedState2 = _slicedToArray(_useMergedState, 2),
+        mergedValue = _useMergedState2[0],
+        setMergedValue = _useMergedState2[1];
+    /** Unique raw values */
+
+
+    var _useMemo = useMemo(function () {
+      return toInnerValue(mergedValue, {
+        labelInValue: mergedLabelInValue,
+        combobox: mode === 'combobox'
+      });
+    }, [mergedValue, mergedLabelInValue]),
+        _useMemo2 = _slicedToArray(_useMemo, 2),
+        mergedRawValue = _useMemo2[0],
+        mergedValueMap = _useMemo2[1];
+    /** We cache a set of raw values to speed up check */
+
+
+    var rawValues = useMemo(function () {
+      return new Set(mergedRawValue);
+    }, [mergedRawValue]); // ============================= Option =============================
+    // Set by option list active, it will merge into search input when mode is `combobox`
+
+    var _useState3 = useState(null),
+        _useState4 = _slicedToArray(_useState3, 2),
+        activeValue = _useState4[0],
+        setActiveValue = _useState4[1];
+
+    var _useState5 = useState(''),
+        _useState6 = _slicedToArray(_useState5, 2),
+        innerSearchValue = _useState6[0],
+        setInnerSearchValue = _useState6[1];
+
+    var mergedSearchValue = innerSearchValue;
+
+    if (mode === 'combobox' && mergedValue !== undefined) {
+      mergedSearchValue = mergedValue;
+    } else if (searchValue !== undefined) {
+      mergedSearchValue = searchValue;
+    } else if (inputValue) {
+      mergedSearchValue = inputValue;
+    }
+
+    var mergedOptions = useMemo(function () {
+      var newOptions = options;
+
+      if (newOptions === undefined) {
+        newOptions = convertChildrenToData(children);
+      }
+      /**
+      * `tags` should fill un-list item.
+      * This is not cool here since TreeSelect do not need this
+      */
+
+
+      if (mode === 'tags' && fillOptionsWithMissingValue) {
+        newOptions = fillOptionsWithMissingValue(newOptions, mergedValue, mergedOptionLabelProp, labelInValue);
+      }
+
+      return newOptions || [];
+    }, [options, children, mode, mergedValue]);
+    var mergedFlattenOptions = useMemo(function () {
+      return flattenOptions(mergedOptions, props);
+    }, [mergedOptions]);
+    var getValueOption = useCacheOptions(mergedFlattenOptions); // Display options for OptionList
+
+    var displayOptions = useMemo(function () {
+      if (!mergedSearchValue || !mergedShowSearch) {
+        return _toConsumableArray(mergedOptions);
+      }
+
+      var filteredOptions = filterOptions(mergedSearchValue, mergedOptions, {
+        optionFilterProp: optionFilterProp,
+        filterOption: mode === 'combobox' && filterOption === undefined ? function () {
+          return true;
+        } : filterOption
+      });
+
+      if (mode === 'tags' && filteredOptions.every(function (opt) {
+        return opt[optionFilterProp] !== mergedSearchValue;
+      })) {
+        filteredOptions.unshift({
+          value: mergedSearchValue,
+          label: mergedSearchValue,
+          key: '__RC_SELECT_TAG_PLACEHOLDER__'
+        });
+      }
+
+      if (filterSort && Array.isArray(filteredOptions)) {
+        return _toConsumableArray(filteredOptions).sort(filterSort);
+      }
+
+      return filteredOptions;
+    }, [mergedOptions, mergedSearchValue, mode, mergedShowSearch, filterSort]);
+    var displayFlattenOptions = useMemo(function () {
+      return flattenOptions(displayOptions, props);
+    }, [displayOptions]);
+    useEffect(function () {
+      if (listRef.current && listRef.current.scrollTo) {
+        listRef.current.scrollTo(0);
+      }
+    }, [mergedSearchValue]); // ============================ Selector ============================
+
+    var displayValues = useMemo(function () {
+      var tmpValues = mergedRawValue.map(function (val) {
+        var valueOptions = getValueOption([val]);
+        var displayValue = getLabeledValue(val, {
+          options: valueOptions,
+          prevValueMap: mergedValueMap,
+          labelInValue: mergedLabelInValue,
+          optionLabelProp: mergedOptionLabelProp
+        });
+        return _extends(_extends({}, displayValue), {
+          disabled: isValueDisabled(val, valueOptions)
+        });
+      });
+
+      if (!mode && tmpValues.length === 1 && tmpValues[0].value === null && tmpValues[0].label === null) {
+        return [];
+      }
+
+      return tmpValues;
+    }, [mergedValue, mergedOptions, mode]); // Polyfill with cache label
+
+    displayValues = useCacheDisplayValue(displayValues);
+
+    var triggerSelect = function triggerSelect(newValue, isSelect, source) {
+      var newValueOption = getValueOption([newValue]);
+      var outOption = findValueOption([newValue], newValueOption)[0];
+
+      if (!internalProps.skipTriggerSelect) {
+        // Skip trigger `onSelect` or `onDeselect` if configured
+        var selectValue = mergedLabelInValue ? getLabeledValue(newValue, {
+          options: newValueOption,
+          prevValueMap: mergedValueMap,
+          labelInValue: mergedLabelInValue,
+          optionLabelProp: mergedOptionLabelProp
+        }) : newValue;
+
+        if (isSelect && onSelect) {
+          onSelect(selectValue, outOption);
+        } else if (!isSelect && onDeselect) {
+          onDeselect(selectValue, outOption);
+        }
+      } // Trigger internal event
+
+
+      if (useInternalProps) {
+        if (isSelect && internalProps.onRawSelect) {
+          internalProps.onRawSelect(newValue, outOption, source);
+        } else if (!isSelect && internalProps.onRawDeselect) {
+          internalProps.onRawDeselect(newValue, outOption, source);
+        }
+      }
+    }; // We need cache options here in case user update the option list
+
+
+    var _useState7 = useState([]),
+        _useState8 = _slicedToArray(_useState7, 2),
+        prevValueOptions = _useState8[0],
+        setPrevValueOptions = _useState8[1];
+
+    var triggerChange = function triggerChange(newRawValues) {
+      if (useInternalProps && internalProps.skipTriggerChange) {
+        return;
+      }
+
+      var newRawValuesOptions = getValueOption(newRawValues);
+      var outValues = toOuterValues(Array.from(newRawValues), {
+        labelInValue: mergedLabelInValue,
+        options: newRawValuesOptions,
+        getLabeledValue: getLabeledValue,
+        prevValueMap: mergedValueMap,
+        optionLabelProp: mergedOptionLabelProp
+      });
+      var outValue = isMultiple ? outValues : outValues[0]; // Skip trigger if prev & current value is both empty
+
+      if (onChange && (mergedRawValue.length !== 0 || outValues.length !== 0)) {
+        var outOptions = findValueOption(newRawValues, newRawValuesOptions, {
+          prevValueOptions: prevValueOptions
+        }); // We will cache option in case it removed by ajax
+
+        setPrevValueOptions(outOptions.map(function (option, index) {
+          var clone = _extends({}, option);
+
+          Object.defineProperty(clone, '_INTERNAL_OPTION_VALUE_', {
+            get: function get() {
+              return newRawValues[index];
+            }
+          });
+          return clone;
+        }));
+        onChange(outValue, isMultiple ? outOptions : outOptions[0]);
+      }
+
+      setMergedValue(outValue);
+    };
+
+    var onInternalSelect = function onInternalSelect(newValue, _ref) {
+      var selected = _ref.selected,
+          source = _ref.source;
+
+      if (disabled) {
+        return;
+      }
+
+      var newRawValue;
+
+      if (isMultiple) {
+        newRawValue = new Set(mergedRawValue);
+
+        if (selected) {
+          newRawValue.add(newValue);
+        } else {
+          newRawValue["delete"](newValue);
+        }
+      } else {
+        newRawValue = new Set();
+        newRawValue.add(newValue);
+      } // Multiple always trigger change and single should change if value changed
+
+
+      if (isMultiple || !isMultiple && Array.from(mergedRawValue)[0] !== newValue) {
+        triggerChange(Array.from(newRawValue));
+      } // Trigger `onSelect`. Single mode always trigger select
+
+
+      triggerSelect(newValue, !isMultiple || selected, source); // Clean search value if single or configured
+
+      if (mode === 'combobox') {
+        setInnerSearchValue(String(newValue));
+        setActiveValue('');
+      } else if (!isMultiple || autoClearSearchValue) {
+        setInnerSearchValue('');
+        setActiveValue('');
+      }
+    };
+
+    var onInternalOptionSelect = function onInternalOptionSelect(newValue, info) {
+      onInternalSelect(newValue, _extends(_extends({}, info), {
+        source: 'option'
+      }));
+    };
+
+    var onInternalSelectionSelect = function onInternalSelectionSelect(newValue, info) {
+      onInternalSelect(newValue, _extends(_extends({}, info), {
+        source: 'selection'
+      }));
+    }; // ============================= Input ==============================
+    // Only works in `combobox`
+
+
+    var customizeInputElement = mode === 'combobox' && getInputElement && getInputElement() || null; // ============================== Open ==============================
+
+    var _useMergedState3 = useMergedState(undefined, {
+      defaultValue: defaultOpen,
+      value: open
+    }),
+        _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+        innerOpen = _useMergedState4[0],
+        setInnerOpen = _useMergedState4[1];
+
+    var mergedOpen = innerOpen; // Not trigger `open` in `combobox` when `notFoundContent` is empty
+
+    var emptyListContent = !notFoundContent && !displayOptions.length;
+
+    if (disabled || emptyListContent && mergedOpen && mode === 'combobox') {
+      mergedOpen = false;
+    } // const triggerOpen = emptyListContent ? false : mergedOpen;
+
+
+    var triggerOpen = mergedOpen;
+
+    var onToggleOpen = function onToggleOpen(newOpen) {
+      var nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;
+
+      if (innerOpen !== nextOpen && !disabled) {
+        setInnerOpen(nextOpen);
+
+        if (onDropdownVisibleChange) {
+          onDropdownVisibleChange(nextOpen);
+        }
+      }
+    }; // ===================== Icons =====================
+
+
+    var _getIcons = getIcons({
+      suffixIcon: suffixIconPre,
+      clearIcon: clearIcon,
+      menuItemSelectedIcon: menuItemSelectedIcon,
+      removeIcon: removeIcon,
+      loading: loading,
+      prefixCls: prefixCls,
+      multiple: isMultiple,
+      triggerOpen: triggerOpen
+    }),
+        inputIcon = _getIcons.suffixIcon;
+
+    useSelectTriggerControl([containerRef.current, triggerRef.current && triggerRef.current.getPopupElement()], triggerOpen, onToggleOpen); // ============================= Search =============================
+
+    var triggerSearch = function triggerSearch(searchText, fromTyping, isCompositing) {
+      var ret = true;
+      var newSearchText = searchText;
+      setActiveValue(null); // Check if match the `tokenSeparators`
+
+      var patchLabels = isCompositing ? null : getSeparatedContent(searchText, tokenSeparators);
+      var patchRawValues = patchLabels;
+
+      if (mode === 'combobox') {
+        // Only typing will trigger onChange
+        if (fromTyping) {
+          triggerChange([newSearchText]);
+        }
+      } else if (patchLabels) {
+        newSearchText = '';
+
+        if (mode !== 'tags') {
+          patchRawValues = patchLabels.map(function (label) {
+            var item = mergedFlattenOptions.find(function (_ref2) {
+              var data = _ref2.data;
+              return data[mergedOptionLabelProp] === label;
+            });
+            return item ? item.data.value : null;
+          }).filter(function (val) {
+            return val !== null;
+          });
+        }
+
+        var newRawValues = Array.from(new Set([].concat(_toConsumableArray(mergedRawValue), _toConsumableArray(patchRawValues))));
+        triggerChange(newRawValues);
+        newRawValues.forEach(function (newRawValue) {
+          triggerSelect(newRawValue, true, 'input');
+        }); // Should close when paste finish
+
+        onToggleOpen(false); // Tell Selector that break next actions
+
+        ret = false;
+      }
+
+      setInnerSearchValue(newSearchText);
+
+      if (onSearch && mergedSearchValue !== newSearchText) {
+        onSearch(newSearchText);
+      }
+
+      return ret;
+    }; // Only triggered when menu is closed & mode is tags
+    // If menu is open, OptionList will take charge
+    // If mode isn't tags, press enter is not meaningful when you can't see any option
+
+
+    var onSearchSubmit = function onSearchSubmit(searchText) {
+      var newRawValues = Array.from(new Set([].concat(_toConsumableArray(mergedRawValue), [searchText])));
+      triggerChange(newRawValues);
+      newRawValues.forEach(function (newRawValue) {
+        triggerSelect(newRawValue, true, 'input');
+      });
+      setInnerSearchValue('');
+    }; // Close dropdown when disabled change
+
+
+    useEffect(function () {
+      if (innerOpen && !!disabled) {
+        setInnerOpen(false);
+      }
+    }, [disabled]); // Close will clean up single mode search text
+
+    useEffect(function () {
+      if (!mergedOpen && !isMultiple && mode !== 'combobox') {
+        triggerSearch('', false, false);
+      }
+    }, [mergedOpen]); // ============================ Keyboard ============================
+
+    /**
+     * We record input value here to check if can press to clean up by backspace
+     * - null: Key is not down, this is reset by key up
+     * - true: Search text is empty when first time backspace down
+     * - false: Search text is not empty when first time backspace down
+     */
+
+    var _useLock = useLock(),
+        _useLock2 = _slicedToArray(_useLock, 2),
+        getClearLock = _useLock2[0],
+        setClearLock = _useLock2[1]; // KeyDown
+
+
+    var onInternalKeyDown = function onInternalKeyDown(event) {
+      var clearLock = getClearLock();
+      var which = event.which; // We only manage open state here, close logic should handle by list component
+
+      if (!mergedOpen && which === KeyCode.ENTER) {
+        onToggleOpen(true);
+      }
+
+      setClearLock(!!mergedSearchValue); // Remove value by `backspace`
+
+      if (which === KeyCode.BACKSPACE && !clearLock && isMultiple && !mergedSearchValue && mergedRawValue.length) {
+        var removeInfo = removeLastEnabledValue(displayValues, mergedRawValue);
+
+        if (removeInfo.removedValue !== null) {
+          triggerChange(removeInfo.values);
+          triggerSelect(removeInfo.removedValue, false, 'input');
+        }
+      }
+
+      for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        rest[_key - 1] = arguments[_key];
+      }
+
+      if (mergedOpen && listRef.current) {
+        var _listRef$current;
+
+        (_listRef$current = listRef.current).onKeyDown.apply(_listRef$current, [event].concat(rest));
+      }
+
+      if (onKeyDown) {
+        onKeyDown.apply(void 0, [event].concat(rest));
+      }
+    }; // KeyUp
+
+
+    var onInternalKeyUp = function onInternalKeyUp(event) {
+      for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        rest[_key2 - 1] = arguments[_key2];
+      }
+
+      if (mergedOpen && listRef.current) {
+        var _listRef$current2;
+
+        (_listRef$current2 = listRef.current).onKeyUp.apply(_listRef$current2, [event].concat(rest));
+      }
+
+      if (onKeyUp) {
+        onKeyUp.apply(void 0, [event].concat(rest));
+      }
+    }; // ========================== Focus / Blur ==========================
+
+    /** Record real focus status */
+
+
+    var focusRef = useRef(false);
+
+    var onContainerFocus = function onContainerFocus() {
+      setMockFocused(true);
+
+      if (!disabled) {
+        if (onFocus && !focusRef.current) {
+          onFocus.apply(void 0, arguments);
+        } // `showAction` should handle `focus` if set
+
+
+        if (showAction.includes('focus')) {
+          onToggleOpen(true);
+        }
+      }
+
+      focusRef.current = true;
+    };
+
+    var onContainerBlur = function onContainerBlur() {
+      setMockFocused(false, function () {
+        focusRef.current = false;
+        onToggleOpen(false);
+      });
+
+      if (disabled) {
+        return;
+      }
+
+      if (mergedSearchValue) {
+        // `tags` mode should move `searchValue` into values
+        if (mode === 'tags') {
+          triggerSearch('', false, false);
+          triggerChange(Array.from(new Set([].concat(_toConsumableArray(mergedRawValue), [mergedSearchValue]))));
+        } else if (mode === 'multiple') {
+          // `multiple` mode only clean the search value but not trigger event
+          setTimeout(function () {
+            setInnerSearchValue('');
+          }, 100);
+        }
+      }
+
+      if (onBlur) {
+        onBlur.apply(void 0, arguments);
+      }
+    };
+
+    var activeTimeoutIds = [];
+    useEffect(function () {
+      return function () {
+        activeTimeoutIds.forEach(function (timeoutId) {
+          return clearTimeout(timeoutId);
+        });
+        activeTimeoutIds.splice(0, activeTimeoutIds.length);
+      };
+    }, []);
+
+    var onInternalMouseDown = function onInternalMouseDown(event) {
+      var target = event.target;
+      var popupElement = triggerRef.current && triggerRef.current.getPopupElement(); // We should give focus back to selector if clicked item is not focusable
+
+      if (popupElement && popupElement.contains(target)) {
+        var timeoutId = setTimeout(function () {
+          var index = activeTimeoutIds.indexOf(timeoutId);
+
+          if (index !== -1) {
+            activeTimeoutIds.splice(index, 1);
+          }
+
+          cancelSetMockFocused();
+
+          if (!popupElement.contains(document.activeElement)) {
+            selectorRef.current.focus();
+          }
+        });
+        activeTimeoutIds.push(timeoutId);
+      }
+
+      if (onMouseDown) {
+        for (var _len3 = arguments.length, restArgs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+          restArgs[_key3 - 1] = arguments[_key3];
+        }
+
+        onMouseDown.apply(void 0, [event].concat(restArgs));
+      }
+    }; // ========================= Accessibility ==========================
+
+
+    var _useState9 = useState(0),
+        _useState10 = _slicedToArray(_useState9, 2),
+        accessibilityIndex = _useState10[0],
+        setAccessibilityIndex = _useState10[1];
+
+    var mergedDefaultActiveFirstOption = defaultActiveFirstOption !== undefined ? defaultActiveFirstOption : mode !== 'combobox';
+
+    var onActiveValue = function onActiveValue(active, index) {
+      var _ref3 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+          _ref3$source = _ref3.source,
+          source = _ref3$source === void 0 ? 'keyboard' : _ref3$source;
+
+      setAccessibilityIndex(index);
+
+      if (backfill && mode === 'combobox' && active !== null && source === 'keyboard') {
+        setActiveValue(String(active));
+      }
+    }; // ============================= Popup ==============================
+
+
+    var _useState11 = useState(null),
+        _useState12 = _slicedToArray(_useState11, 2),
+        containerWidth = _useState12[0],
+        setContainerWidth = _useState12[1];
+
+    var _useState13 = useState({}),
+        _useState14 = _slicedToArray(_useState13, 2),
+        forceUpdate = _useState14[1]; // We need force update here since popup dom is render async
+
+
+    function onPopupMouseEnter() {
+      forceUpdate({});
+    }
+
+    useLayoutEffect(function () {
+      if (triggerOpen) {
+        var newWidth = Math.ceil(containerRef.current.offsetWidth);
+
+        if (containerWidth !== newWidth) {
+          setContainerWidth(newWidth);
+        }
+      }
+    }, [triggerOpen]);
+    var popupNode = /*#__PURE__*/React.createElement(OptionList, {
+      ref: listRef,
+      prefixCls: prefixCls,
+      id: mergedId,
+      open: mergedOpen,
+      childrenAsData: !options,
+      options: displayOptions,
+      flattenOptions: displayFlattenOptions,
+      multiple: isMultiple,
+      values: rawValues,
+      height: listHeight,
+      itemHeight: listItemHeight,
+      onSelect: onInternalOptionSelect,
+      onToggleOpen: onToggleOpen,
+      onActiveValue: onActiveValue,
+      defaultActiveFirstOption: mergedDefaultActiveFirstOption,
+      notFoundContent: notFoundContent,
+      renderEmpty: renderEmpty,
+      defaultExpandGroupKey: defaultExpandGroupKey,
+      onScroll: onPopupScroll,
+      searchValue: mergedSearchValue,
+      menuItemSelectedIcon: menuItemSelectedIcon,
+      virtual: virtual !== false && dropdownMatchSelectWidth !== false,
+      onMouseEnter: onPopupMouseEnter,
+      triggerChange: triggerChange,
+      setInnerOpen: setInnerOpen
+    }); // ============================= Clear ==============================
+
+    var clearNode;
+
+    var onClearMouseDown = function onClearMouseDown() {
+      // Trigger internal `onClear` event
+      if (useInternalProps && internalProps.onClear) {
+        internalProps.onClear();
+      }
+
+      if (onClear) {
+        onClear();
+      }
+
+      var disabledValues = displayValues.filter(function (value) {
+        return !!value.disabled;
+      });
+      triggerChange(disabledValues.map(function (v) {
+        return v.value;
+      }));
+      triggerSearch('', false, false);
+    };
+
+    if (!disabled && allowClear && (mergedRawValue.length || mergedSearchValue)) {
+      clearNode = /*#__PURE__*/React.createElement(TransBtn, {
+        className: "".concat(prefixCls, "-clear"),
+        onMouseDown: onClearMouseDown,
+        customizeIcon: clearIcon
+      }, "\xD7");
+    } // ============================= Arrow ==============================
+
+
+    var mergedShowArrow = showArrow !== undefined ? showArrow : loading || mode !== 'combobox';
+    var arrowNode;
+
+    if (mergedShowArrow) {
+      arrowNode = /*#__PURE__*/React.createElement(TransBtn, {
+        className: classNames("".concat(prefixCls, "-arrow"), _defineProperty({}, "".concat(prefixCls, "-arrow-loading"), loading)),
+        customizeIcon: inputIcon,
+        customizeIconProps: {
+          loading: loading,
+          searchValue: mergedSearchValue,
+          open: mergedOpen,
+          focused: mockFocused,
+          showSearch: mergedShowSearch
+        }
+      });
+    } // ============================ Warning =============================
+
+
+    if (process.env.NODE_ENV !== 'production' && warningProps) {
+      warningProps(props);
+    } // ============================= Render =============================
+
+
+    var mergedClassName = classNames(prefixCls, className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-focused"), mockFocused), _defineProperty(_classNames2, "".concat(prefixCls, "-multiple"), isMultiple), _defineProperty(_classNames2, "".concat(prefixCls, "-single"), !isMultiple), _defineProperty(_classNames2, "".concat(prefixCls, "-allow-clear"), allowClear), _defineProperty(_classNames2, "".concat(prefixCls, "-show-arrow"), mergedShowArrow), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-loading"), loading), _defineProperty(_classNames2, "".concat(prefixCls, "-open"), mergedOpen), _defineProperty(_classNames2, "".concat(prefixCls, "-customize-input"), customizeInputElement), _defineProperty(_classNames2, "".concat(prefixCls, "-show-search"), mergedShowSearch), _classNames2));
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: mergedClassName
+    }, domProps, {
+      ref: containerRef,
+      onMouseDown: onInternalMouseDown,
+      onKeyDown: onInternalKeyDown,
+      onKeyUp: onInternalKeyUp,
+      onFocus: onContainerFocus,
+      onBlur: onContainerBlur
+    }), mockFocused && !mergedOpen && /*#__PURE__*/React.createElement("span", {
+      style: {
+        width: 0,
+        height: 0,
+        display: 'flex',
+        overflow: 'hidden',
+        opacity: 0
+      },
+      "aria-live": "polite"
+    }, "".concat(mergedRawValue.join(', '))), /*#__PURE__*/React.createElement(SelectTrigger, {
+      ref: triggerRef,
+      disabled: disabled,
+      prefixCls: prefixCls,
+      visible: triggerOpen,
+      popupElement: popupNode,
+      multiple: isMultiple,
+      containerWidth: containerWidth,
+      animation: animation,
+      transitionName: transitionName,
+      dropdownStyle: dropdownStyle,
+      dropdownClassName: dropdownClassName,
+      direction: direction,
+      dropdownMatchSelectWidth: dropdownMatchSelectWidth,
+      dropdownRender: dropdownRender,
+      dropdownAlign: dropdownAlign,
+      getPopupContainer: getPopupContainer,
+      empty: !mergedOptions.length,
+      getTriggerDOMNode: function getTriggerDOMNode() {
+        return selectorDomRef.current;
+      }
+    }, /*#__PURE__*/React.createElement(Selector, _extends({}, props, {
+      domRef: selectorDomRef,
+      prefixCls: prefixCls,
+      inputElement: customizeInputElement,
+      ref: selectorRef,
+      id: mergedId,
+      showSearch: mergedShowSearch,
+      mode: mode,
+      accessibilityIndex: accessibilityIndex,
+      multiple: isMultiple,
+      tagRender: tagRender,
+      values: displayValues,
+      open: mergedOpen,
+      onToggleOpen: onToggleOpen,
+      searchValue: mergedSearchValue,
+      activeValue: activeValue,
+      onSearch: triggerSearch,
+      onSearchSubmit: onSearchSubmit,
+      onSelect: onInternalSelectionSelect,
+      tokenWithEnter: tokenWithEnter
+    }))), arrowNode, clearNode);
+  }
+
+  var RefSelect = /*#__PURE__*/React.forwardRef(Select);
+  return RefSelect;
+}