tntd 2.7.29-beta.1 → 2.7.30

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

@@ -1,13 +1,10 @@
-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 classNames from 'classnames';
 import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
@@ -25,405 +22,503 @@ import Selector from './Selector';
 import SelectTrigger from './SelectTrigger';
 import TransBtn from './TransBtn';
 import { getSeparatedContent } from './utils/valueUtil';
-const DEFAULT_OMIT_PROPS = [
-    'value',
-    'onChange',
-    'removeIcon',
-    'placeholder',
-    'autoFocus',
-    'maxTagCount',
-    'maxTagTextLength',
-    'maxTagPlaceholder',
-    'choiceTransitionName',
-    'onInputKeyDown',
-    'onPopupScroll',
-    'tabIndex',
-];
+const DEFAULT_OMIT_PROPS = ['value', 'onChange', 'removeIcon', 'placeholder', 'autoFocus', 'maxTagCount', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'onPopupScroll', 'tabIndex'];
 export function isMultiple(mode) {
-    return mode === 'tags' || mode === 'multiple';
+  return mode === 'tags' || mode === 'multiple';
 }
 const BaseSelect = React.forwardRef((props, ref) => {
-    var _a;
-    const { id, prefixCls, className, showSearch, tagRender, direction, omitDomProps, 
-    // Value
-    displayValues, onDisplayValuesChange, emptyOptions, notFoundContent = 'Not Found', onClear, 
-    // Mode
-    mode, 
-    // Status
-    disabled, loading, 
-    // Customize Input
-    getInputElement, getRawInputElement, 
-    // Open
-    open, defaultOpen, onDropdownVisibleChange, 
-    // Active
-    activeValue, onActiveValueChange, activeDescendantId, 
-    // Search
-    searchValue, autoClearSearchValue, onSearch, onSearchSplit, tokenSeparators, 
-    // Icons
-    allowClear, suffixIcon, clearIcon, 
-    // Dropdown
-    OptionList, animation, transitionName, dropdownStyle, dropdownClassName, dropdownMatchSelectWidth, dropdownRender, dropdownAlign, placement, builtinPlacements, getPopupContainer, 
-    // Focus
-    showAction = [], onFocus, onBlur, 
-    // Rest Events
-    onKeyUp, onKeyDown, onMouseDown } = props, 
+  var _a;
+  const {
+      id,
+      prefixCls,
+      className,
+      showSearch,
+      tagRender,
+      direction,
+      omitDomProps,
+      // Value
+      displayValues,
+      onDisplayValuesChange,
+      emptyOptions,
+      notFoundContent = 'Not Found',
+      onClear,
+      // Mode
+      mode,
+      // Status
+      disabled,
+      loading,
+      // Customize Input
+      getInputElement,
+      getRawInputElement,
+      // Open
+      open,
+      defaultOpen,
+      onDropdownVisibleChange,
+      // Active
+      activeValue,
+      onActiveValueChange,
+      activeDescendantId,
+      // Search
+      searchValue,
+      autoClearSearchValue,
+      onSearch,
+      onSearchSplit,
+      tokenSeparators,
+      // Icons
+      allowClear,
+      suffixIcon,
+      clearIcon,
+      // Dropdown
+      OptionList,
+      animation,
+      transitionName,
+      dropdownStyle,
+      dropdownClassName,
+      dropdownMatchSelectWidth,
+      dropdownRender,
+      dropdownAlign,
+      placement,
+      builtinPlacements,
+      getPopupContainer,
+      // Focus
+      showAction = [],
+      onFocus,
+      onBlur,
+      // Rest Events
+      onKeyUp,
+      onKeyDown,
+      onMouseDown
+    } = props,
     // Rest Props
     restProps = __rest(props, ["id", "prefixCls", "className", "showSearch", "tagRender", "direction", "omitDomProps", "displayValues", "onDisplayValuesChange", "emptyOptions", "notFoundContent", "onClear", "mode", "disabled", "loading", "getInputElement", "getRawInputElement", "open", "defaultOpen", "onDropdownVisibleChange", "activeValue", "onActiveValueChange", "activeDescendantId", "searchValue", "autoClearSearchValue", "onSearch", "onSearchSplit", "tokenSeparators", "allowClear", "suffixIcon", "clearIcon", "OptionList", "animation", "transitionName", "dropdownStyle", "dropdownClassName", "dropdownMatchSelectWidth", "dropdownRender", "dropdownAlign", "placement", "builtinPlacements", "getPopupContainer", "showAction", "onFocus", "onBlur", "onKeyUp", "onKeyDown", "onMouseDown"]);
-    // ============================== MISC ==============================
-    const multiple = isMultiple(mode);
-    const mergedShowSearch = (showSearch !== undefined ? showSearch : multiple) || mode === 'combobox';
-    const domProps = Object.assign({}, restProps);
-    DEFAULT_OMIT_PROPS.forEach((propName) => {
-        delete domProps[propName];
-    });
-    omitDomProps === null || omitDomProps === void 0 ? void 0 : omitDomProps.forEach((propName) => {
-        delete domProps[propName];
+  // ============================== MISC ==============================
+  const multiple = isMultiple(mode);
+  const mergedShowSearch = (showSearch !== undefined ? showSearch : multiple) || mode === 'combobox';
+  const domProps = Object.assign({}, restProps);
+  DEFAULT_OMIT_PROPS.forEach(propName => {
+    delete domProps[propName];
+  });
+  omitDomProps === null || omitDomProps === void 0 ? void 0 : omitDomProps.forEach(propName => {
+    delete domProps[propName];
+  });
+  // ============================= Mobile =============================
+  const [mobile, setMobile] = React.useState(false);
+  React.useEffect(() => {
+    // Only update on the client side
+    setMobile(isMobile());
+  }, []);
+  // ============================== Refs ==============================
+  const containerRef = React.useRef(null);
+  const selectorDomRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const selectorRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const blurRef = React.useRef(false);
+  /** Used for component focused management */
+  const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset();
+  // =========================== Imperative ===========================
+  React.useImperativeHandle(ref, () => {
+    var _a, _b;
+    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: arg => {
+        var _a;
+        return (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(arg);
+      }
+    };
+  });
+  // ========================== Search Value ==========================
+  const mergedSearchValue = React.useMemo(() => {
+    var _a;
+    if (mode !== 'combobox') {
+      return searchValue;
+    }
+    const val = (_a = displayValues[0]) === null || _a === void 0 ? void 0 : _a.value;
+    return typeof val === 'string' || typeof val === 'number' ? String(val) : '';
+  }, [searchValue, mode, displayValues]);
+  // ========================== Custom Input ==========================
+  // Only works in `combobox`
+  const customizeInputElement = mode === 'combobox' && typeof getInputElement === 'function' && getInputElement() || null;
+  // Used for customize replacement for `rc-cascader`
+  const customizeRawInputElement = typeof getRawInputElement === 'function' && getRawInputElement();
+  const customizeRawInputRef = useComposeRef(selectorDomRef, (_a = customizeRawInputElement === null || customizeRawInputElement === void 0 ? void 0 : customizeRawInputElement.props) === null || _a === void 0 ? void 0 : _a.ref);
+  // ============================== Open ==============================
+  // SSR not support Portal which means we need delay `open` for the first time render
+  const [rendered, setRendered] = React.useState(false);
+  useLayoutEffect(() => {
+    setRendered(true);
+  }, []);
+  const [innerOpen, setInnerOpen] = useMergedState(false, {
+    defaultValue: defaultOpen,
+    value: open
+  });
+  let mergedOpen = rendered ? innerOpen : false;
+  // Not trigger `open` in `combobox` when `notFoundContent` is empty
+  const emptyListContent = !notFoundContent && emptyOptions;
+  if (disabled || emptyListContent && mergedOpen && mode === 'combobox') {
+    mergedOpen = false;
+  }
+  const triggerOpen = emptyListContent ? false : mergedOpen;
+  const onToggleOpen = React.useCallback(newOpen => {
+    const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;
+    if (!disabled) {
+      setInnerOpen(nextOpen);
+      if (mergedOpen !== nextOpen) {
+        onDropdownVisibleChange === null || onDropdownVisibleChange === void 0 ? void 0 : onDropdownVisibleChange(nextOpen);
+      }
+    }
+  }, [disabled, mergedOpen, setInnerOpen, onDropdownVisibleChange]);
+  // ============================= Search =============================
+  const tokenWithEnter = React.useMemo(() => (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
+  const onInternalSearch = (searchText, fromTyping, isCompositing) => {
+    let ret = true;
+    let newSearchText = searchText;
+    onActiveValueChange === null || onActiveValueChange === void 0 ? void 0 : onActiveValueChange(null);
+    // Check if match the `tokenSeparators`
+    const patchLabels = isCompositing ? null : getSeparatedContent(searchText, tokenSeparators);
+    // Ignore combobox since it's not split-able
+    if (mode !== 'combobox' && patchLabels) {
+      newSearchText = '';
+      onSearchSplit === null || onSearchSplit === void 0 ? void 0 : onSearchSplit(patchLabels);
+      // Should close when paste finish
+      onToggleOpen(false);
+      // Tell Selector that break next actions
+      ret = false;
+    }
+    if (onSearch && mergedSearchValue !== newSearchText) {
+      onSearch(newSearchText, {
+        source: fromTyping ? 'typing' : 'effect'
+      });
+    }
+    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
+  const onInternalSearchSubmit = searchText => {
+    // prevent empty tags from appearing when you click the Enter button
+    if (!searchText || !searchText.trim()) {
+      return;
+    }
+    onSearch(searchText, {
+      source: 'submit'
     });
-    // ============================= Mobile =============================
-    const [mobile, setMobile] = React.useState(false);
-    React.useEffect(() => {
-        // Only update on the client side
-        setMobile(isMobile());
-    }, []);
-    // ============================== Refs ==============================
-    const containerRef = React.useRef(null);
-    const selectorDomRef = React.useRef(null);
-    const triggerRef = React.useRef(null);
-    const selectorRef = React.useRef(null);
-    const listRef = React.useRef(null);
-    const blurRef = React.useRef(false);
-    /** Used for component focused management */
-    const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset();
-    // =========================== Imperative ===========================
-    React.useImperativeHandle(ref, () => {
-        var _a, _b;
-        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: (arg) => { var _a; return (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(arg); },
+  };
+  // Close will clean up single mode search text
+  React.useEffect(() => {
+    if (!mergedOpen && !multiple && mode !== 'combobox') {
+      onInternalSearch('', false, false);
+    }
+  }, [mergedOpen]);
+  // ============================ Disabled ============================
+  // Close dropdown & remove focus state when disabled change
+  React.useEffect(() => {
+    if (innerOpen && disabled) {
+      setInnerOpen(false);
+    }
+    // After onBlur is triggered, the focused does not need to be reset
+    if (disabled && !blurRef.current) {
+      setMockFocused(false);
+    }
+  }, [disabled]);
+  // ============================ 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
+   */
+  const [getClearLock, setClearLock] = useLock();
+  // KeyDown
+  const onInternalKeyDown = (event, ...rest) => {
+    const clearLock = getClearLock();
+    const {
+      which
+    } = event;
+    if (which === KeyCode.ENTER) {
+      // Do not submit form when type in the input
+      if (mode !== 'combobox') {
+        event.preventDefault();
+      }
+      // We only manage open state here, close logic should handle by list component
+      if (!mergedOpen) {
+        onToggleOpen(true);
+      }
+    }
+    setClearLock(!!mergedSearchValue);
+    // Remove value by `backspace`
+    if (which === KeyCode.BACKSPACE && !clearLock && multiple && !mergedSearchValue && displayValues.length) {
+      const cloneDisplayValues = [...displayValues];
+      let removedDisplayValue = null;
+      for (let i = cloneDisplayValues.length - 1; i >= 0; i -= 1) {
+        const current = cloneDisplayValues[i];
+        if (!current.disabled) {
+          cloneDisplayValues.splice(i, 1);
+          removedDisplayValue = current;
+          break;
+        }
+      }
+      if (removedDisplayValue) {
+        onDisplayValuesChange(cloneDisplayValues, {
+          type: 'remove',
+          values: [removedDisplayValue]
         });
+      }
+    }
+    if (mergedOpen && listRef.current) {
+      listRef.current.onKeyDown(event, ...rest);
+    }
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event, ...rest);
+  };
+  // KeyUp
+  const onInternalKeyUp = (event, ...rest) => {
+    if (mergedOpen && listRef.current) {
+      listRef.current.onKeyUp(event, ...rest);
+    }
+    onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event, ...rest);
+  };
+  // ============================ Selector ============================
+  const onSelectorRemove = val => {
+    const newValues = displayValues.filter(i => i !== val);
+    onDisplayValuesChange(newValues, {
+      type: 'remove',
+      values: [val]
     });
-    // ========================== Search Value ==========================
-    const mergedSearchValue = React.useMemo(() => {
-        var _a;
-        if (mode !== 'combobox') {
-            return searchValue;
-        }
-        const val = (_a = displayValues[0]) === null || _a === void 0 ? void 0 : _a.value;
-        return typeof val === 'string' || typeof val === 'number' ? String(val) : '';
-    }, [searchValue, mode, displayValues]);
-    // ========================== Custom Input ==========================
-    // Only works in `combobox`
-    const customizeInputElement = (mode === 'combobox' && typeof getInputElement === 'function' && getInputElement()) || null;
-    // Used for customize replacement for `rc-cascader`
-    const customizeRawInputElement = typeof getRawInputElement === 'function' && getRawInputElement();
-    const customizeRawInputRef = useComposeRef(selectorDomRef, (_a = customizeRawInputElement === null || customizeRawInputElement === void 0 ? void 0 : customizeRawInputElement.props) === null || _a === void 0 ? void 0 : _a.ref);
-    // ============================== Open ==============================
-    // SSR not support Portal which means we need delay `open` for the first time render
-    const [rendered, setRendered] = React.useState(false);
-    useLayoutEffect(() => {
-        setRendered(true);
-    }, []);
-    const [innerOpen, setInnerOpen] = useMergedState(false, {
-        defaultValue: defaultOpen,
-        value: open,
+  };
+  // ========================== Focus / Blur ==========================
+  /** Record real focus status */
+  const focusRef = React.useRef(false);
+  const onContainerFocus = (...args) => {
+    setMockFocused(true);
+    if (!disabled) {
+      if (onFocus && !focusRef.current) {
+        onFocus(...args);
+      }
+      // `showAction` should handle `focus` if set
+      if (showAction.includes('focus')) {
+        onToggleOpen(true);
+      }
+    }
+    focusRef.current = true;
+  };
+  const onContainerBlur = (...args) => {
+    blurRef.current = true;
+    setMockFocused(false, () => {
+      focusRef.current = false;
+      blurRef.current = false;
+      onToggleOpen(false);
     });
-    let mergedOpen = rendered ? innerOpen : false;
-    // Not trigger `open` in `combobox` when `notFoundContent` is empty
-    const emptyListContent = !notFoundContent && emptyOptions;
-    if (disabled || (emptyListContent && mergedOpen && mode === 'combobox')) {
-        mergedOpen = false;
+    if (disabled) {
+      return;
     }
-    const triggerOpen = emptyListContent ? false : mergedOpen;
-    const onToggleOpen = React.useCallback((newOpen) => {
-        const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;
-        if (!disabled) {
-            setInnerOpen(nextOpen);
-            if (mergedOpen !== nextOpen) {
-                onDropdownVisibleChange === null || onDropdownVisibleChange === void 0 ? void 0 : onDropdownVisibleChange(nextOpen);
-            }
-        }
-    }, [disabled, mergedOpen, setInnerOpen, onDropdownVisibleChange]);
-    // ============================= Search =============================
-    const tokenWithEnter = React.useMemo(() => (tokenSeparators || []).some((tokenSeparator) => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
-    const onInternalSearch = (searchText, fromTyping, isCompositing) => {
-        let ret = true;
-        let newSearchText = searchText;
-        onActiveValueChange === null || onActiveValueChange === void 0 ? void 0 : onActiveValueChange(null);
-        // Check if match the `tokenSeparators`
-        const patchLabels = isCompositing
-            ? null
-            : getSeparatedContent(searchText, tokenSeparators);
-        // Ignore combobox since it's not split-able
-        if (mode !== 'combobox' && patchLabels) {
-            newSearchText = '';
-            onSearchSplit === null || onSearchSplit === void 0 ? void 0 : onSearchSplit(patchLabels);
-            // Should close when paste finish
-            onToggleOpen(false);
-            // Tell Selector that break next actions
-            ret = false;
-        }
-        if (onSearch && mergedSearchValue !== newSearchText) {
-            onSearch(newSearchText, {
-                source: fromTyping ? 'typing' : 'effect',
-            });
-        }
-        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
-    const onInternalSearchSubmit = (searchText) => {
-        // prevent empty tags from appearing when you click the Enter button
-        if (!searchText || !searchText.trim()) {
-            return;
-        }
-        onSearch(searchText, { source: 'submit' });
-    };
-    // Close will clean up single mode search text
-    React.useEffect(() => {
-        if (!mergedOpen && !multiple && mode !== 'combobox') {
-            onInternalSearch('', false, false);
-        }
-    }, [mergedOpen]);
-    // ============================ Disabled ============================
-    // Close dropdown & remove focus state when disabled change
-    React.useEffect(() => {
-        if (innerOpen && disabled) {
-            setInnerOpen(false);
-        }
-        // After onBlur is triggered, the focused does not need to be reset
-        if (disabled && !blurRef.current) {
-            setMockFocused(false);
-        }
-    }, [disabled]);
-    // ============================ 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
-     */
-    const [getClearLock, setClearLock] = useLock();
-    // KeyDown
-    const onInternalKeyDown = (event, ...rest) => {
-        const clearLock = getClearLock();
-        const { which } = event;
-        if (which === KeyCode.ENTER) {
-            // Do not submit form when type in the input
-            if (mode !== 'combobox') {
-                event.preventDefault();
-            }
-            // We only manage open state here, close logic should handle by list component
-            if (!mergedOpen) {
-                onToggleOpen(true);
-            }
-        }
-        setClearLock(!!mergedSearchValue);
-        // Remove value by `backspace`
-        if (which === KeyCode.BACKSPACE &&
-            !clearLock &&
-            multiple &&
-            !mergedSearchValue &&
-            displayValues.length) {
-            const cloneDisplayValues = [...displayValues];
-            let removedDisplayValue = null;
-            for (let i = cloneDisplayValues.length - 1; i >= 0; i -= 1) {
-                const current = cloneDisplayValues[i];
-                if (!current.disabled) {
-                    cloneDisplayValues.splice(i, 1);
-                    removedDisplayValue = current;
-                    break;
-                }
-            }
-            if (removedDisplayValue) {
-                onDisplayValuesChange(cloneDisplayValues, {
-                    type: 'remove',
-                    values: [removedDisplayValue],
-                });
-            }
-        }
-        if (mergedOpen && listRef.current) {
-            listRef.current.onKeyDown(event, ...rest);
-        }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event, ...rest);
-    };
-    // KeyUp
-    const onInternalKeyUp = (event, ...rest) => {
-        if (mergedOpen && listRef.current) {
-            listRef.current.onKeyUp(event, ...rest);
-        }
-        onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event, ...rest);
-    };
-    // ============================ Selector ============================
-    const onSelectorRemove = (val) => {
-        const newValues = displayValues.filter((i) => i !== val);
-        onDisplayValuesChange(newValues, {
-            type: 'remove',
-            values: [val],
+    if (mergedSearchValue) {
+      // `tags` mode should move `searchValue` into values
+      if (mode === 'tags') {
+        onSearch(mergedSearchValue, {
+          source: 'submit'
         });
-    };
-    // ========================== Focus / Blur ==========================
-    /** Record real focus status */
-    const focusRef = React.useRef(false);
-    const onContainerFocus = (...args) => {
-        setMockFocused(true);
-        if (!disabled) {
-            if (onFocus && !focusRef.current) {
-                onFocus(...args);
-            }
-            // `showAction` should handle `focus` if set
-            if (showAction.includes('focus')) {
-                onToggleOpen(true);
-            }
-        }
-        focusRef.current = true;
-    };
-    const onContainerBlur = (...args) => {
-        blurRef.current = true;
-        setMockFocused(false, () => {
-            focusRef.current = false;
-            blurRef.current = false;
-            onToggleOpen(false);
+      } else if (mode === 'multiple') {
+        // `multiple` mode only clean the search value but not trigger event
+        onSearch('', {
+          source: 'blur'
         });
-        if (disabled) {
-            return;
-        }
-        if (mergedSearchValue) {
-            // `tags` mode should move `searchValue` into values
-            if (mode === 'tags') {
-                onSearch(mergedSearchValue, { source: 'submit' });
-            }
-            else if (mode === 'multiple') {
-                // `multiple` mode only clean the search value but not trigger event
-                onSearch('', {
-                    source: 'blur',
-                });
-            }
-        }
-        if (onBlur) {
-            onBlur(...args);
-        }
-    };
-    // Give focus back of Select
-    const activeTimeoutIds = [];
-    React.useEffect(() => () => {
-        activeTimeoutIds.forEach((timeoutId) => clearTimeout(timeoutId));
-        activeTimeoutIds.splice(0, activeTimeoutIds.length);
-    }, []);
-    const onInternalMouseDown = (event, ...restArgs) => {
-        var _a;
-        const { target } = event;
-        const popupElement = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getPopupElement();
-        // We should give focus back to selector if clicked item is not focusable
-        if (popupElement && popupElement.contains(target)) {
-            const timeoutId = setTimeout(() => {
-                var _a;
-                const index = activeTimeoutIds.indexOf(timeoutId);
-                if (index !== -1) {
-                    activeTimeoutIds.splice(index, 1);
-                }
-                cancelSetMockFocused();
-                if (!mobile && !popupElement.contains(document.activeElement)) {
-                    (_a = selectorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }
-            });
-            activeTimeoutIds.push(timeoutId);
-        }
-        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event, ...restArgs);
-    };
-    // ============================ Dropdown ============================
-    const [, forceUpdate] = React.useState({});
-    // We need force update here since popup dom is render async
-    function onPopupMouseEnter() {
-        forceUpdate({});
-    }
-    // Used for raw custom input trigger
-    let onTriggerVisibleChange;
-    if (customizeRawInputElement) {
-        onTriggerVisibleChange = (newOpen) => {
-            onToggleOpen(newOpen);
-        };
+      }
     }
-    // Close when click on non-select element
-    useSelectTriggerControl(() => { var _a; return [containerRef.current, (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getPopupElement()]; }, triggerOpen, onToggleOpen, !!customizeRawInputElement);
-    // ============================ Context =============================
-    const baseSelectContext = React.useMemo(() => (Object.assign(Object.assign({}, props), { notFoundContent, open: mergedOpen, triggerOpen,
-        id, showSearch: mergedShowSearch, multiple, toggleOpen: onToggleOpen })), [props, notFoundContent, triggerOpen, mergedOpen, id, mergedShowSearch, multiple, onToggleOpen]);
-    // ==================================================================
-    // ==                            Render                            ==
-    // ==================================================================
-    // ============================= Arrow ==============================
-    const showSuffixIcon = !!suffixIcon || loading;
-    let arrowNode;
-    if (showSuffixIcon) {
-        arrowNode = (React.createElement(TransBtn, { className: classNames(`${prefixCls}-arrow`, {
-                [`${prefixCls}-arrow-loading`]: loading,
-            }), customizeIcon: suffixIcon, customizeIconProps: {
-                loading,
-                searchValue: mergedSearchValue,
-                open: mergedOpen,
-                focused: mockFocused,
-                showSearch: mergedShowSearch,
-            } }));
+    if (onBlur) {
+      onBlur(...args);
     }
-    // ============================= Clear ==============================
-    const onClearMouseDown = () => {
+  };
+  // Give focus back of Select
+  const activeTimeoutIds = [];
+  React.useEffect(() => () => {
+    activeTimeoutIds.forEach(timeoutId => clearTimeout(timeoutId));
+    activeTimeoutIds.splice(0, activeTimeoutIds.length);
+  }, []);
+  const onInternalMouseDown = (event, ...restArgs) => {
+    var _a;
+    const {
+      target
+    } = event;
+    const popupElement = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getPopupElement();
+    // We should give focus back to selector if clicked item is not focusable
+    if (popupElement && popupElement.contains(target)) {
+      const timeoutId = setTimeout(() => {
         var _a;
-        onClear === null || onClear === void 0 ? void 0 : onClear();
-        (_a = selectorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        onDisplayValuesChange([], {
-            type: 'clear',
-            values: displayValues,
-        });
-        onInternalSearch('', false, false);
+        const index = activeTimeoutIds.indexOf(timeoutId);
+        if (index !== -1) {
+          activeTimeoutIds.splice(index, 1);
+        }
+        cancelSetMockFocused();
+        if (!mobile && !popupElement.contains(document.activeElement)) {
+          (_a = selectorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+      });
+      activeTimeoutIds.push(timeoutId);
+    }
+    onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event, ...restArgs);
+  };
+  // ============================ Dropdown ============================
+  const [, forceUpdate] = React.useState({});
+  // We need force update here since popup dom is render async
+  function onPopupMouseEnter() {
+    forceUpdate({});
+  }
+  // Used for raw custom input trigger
+  let onTriggerVisibleChange;
+  if (customizeRawInputElement) {
+    onTriggerVisibleChange = newOpen => {
+      onToggleOpen(newOpen);
     };
-    const { allowClear: mergedAllowClear, clearIcon: clearNode } = useAllowClear(prefixCls, onClearMouseDown, displayValues, allowClear, clearIcon, disabled, mergedSearchValue, mode);
-    // =========================== OptionList ===========================
-    const optionList = React.createElement(OptionList, { ref: listRef });
-    // ============================= Select =============================
-    const mergedClassName = classNames(prefixCls, className, {
-        [`${prefixCls}-focused`]: mockFocused,
-        [`${prefixCls}-multiple`]: multiple,
-        [`${prefixCls}-single`]: !multiple,
-        [`${prefixCls}-allow-clear`]: allowClear,
-        [`${prefixCls}-show-arrow`]: showSuffixIcon,
-        [`${prefixCls}-disabled`]: disabled,
-        [`${prefixCls}-loading`]: loading,
-        [`${prefixCls}-open`]: mergedOpen,
-        [`${prefixCls}-customize-input`]: customizeInputElement,
-        [`${prefixCls}-show-search`]: mergedShowSearch,
+  }
+  // Close when click on non-select element
+  useSelectTriggerControl(() => {
+    var _a;
+    return [containerRef.current, (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getPopupElement()];
+  }, triggerOpen, onToggleOpen, !!customizeRawInputElement);
+  // ============================ Context =============================
+  const baseSelectContext = React.useMemo(() => Object.assign(Object.assign({}, props), {
+    notFoundContent,
+    open: mergedOpen,
+    triggerOpen,
+    id,
+    showSearch: mergedShowSearch,
+    multiple,
+    toggleOpen: onToggleOpen
+  }), [props, notFoundContent, triggerOpen, mergedOpen, id, mergedShowSearch, multiple, onToggleOpen]);
+  // ==================================================================
+  // ==                            Render                            ==
+  // ==================================================================
+  // ============================= Arrow ==============================
+  const showSuffixIcon = !!suffixIcon || loading;
+  let arrowNode;
+  if (showSuffixIcon) {
+    arrowNode = React.createElement(TransBtn, {
+      className: classNames(`${prefixCls}-arrow`, {
+        [`${prefixCls}-arrow-loading`]: loading
+      }),
+      customizeIcon: suffixIcon,
+      customizeIconProps: {
+        loading,
+        searchValue: mergedSearchValue,
+        open: mergedOpen,
+        focused: mockFocused,
+        showSearch: mergedShowSearch
+      }
     });
-    // >>> Selector
-    const selectorNode = (React.createElement(SelectTrigger, { ref: triggerRef, disabled: disabled, prefixCls: prefixCls, visible: triggerOpen, popupElement: optionList, animation: animation, transitionName: transitionName, dropdownStyle: dropdownStyle, dropdownClassName: dropdownClassName, direction: direction, dropdownMatchSelectWidth: dropdownMatchSelectWidth, dropdownRender: dropdownRender, dropdownAlign: dropdownAlign, placement: placement, builtinPlacements: builtinPlacements, getPopupContainer: getPopupContainer, empty: emptyOptions, getTriggerDOMNode: () => selectorDomRef.current, onPopupVisibleChange: onTriggerVisibleChange, onPopupMouseEnter: onPopupMouseEnter }, customizeRawInputElement ? (React.cloneElement(customizeRawInputElement, {
-        ref: customizeRawInputRef,
-    })) : (React.createElement(Selector, Object.assign({}, props, { domRef: selectorDomRef, prefixCls: prefixCls, inputElement: customizeInputElement, ref: selectorRef, id: id, showSearch: mergedShowSearch, autoClearSearchValue: autoClearSearchValue, mode: mode, activeDescendantId: activeDescendantId, tagRender: tagRender, values: displayValues, open: mergedOpen, onToggleOpen: onToggleOpen, activeValue: activeValue, searchValue: mergedSearchValue, onSearch: onInternalSearch, onSearchSubmit: onInternalSearchSubmit, onRemove: onSelectorRemove, tokenWithEnter: tokenWithEnter })))));
-    // >>> Render
-    let renderNode;
-    // Render raw
-    if (customizeRawInputElement) {
-        renderNode = selectorNode;
-    }
-    else {
-        renderNode = (React.createElement("div", Object.assign({ className: mergedClassName }, domProps, { ref: containerRef, onMouseDown: onInternalMouseDown, onKeyDown: onInternalKeyDown, onKeyUp: onInternalKeyUp, onFocus: onContainerFocus, onBlur: onContainerBlur }),
-            mockFocused && !mergedOpen && (React.createElement("span", { style: {
-                    width: 0,
-                    height: 0,
-                    position: 'absolute',
-                    overflow: 'hidden',
-                    opacity: 0,
-                }, "aria-live": "polite" }, `${displayValues
-                .map(({ label, value }) => ['number', 'string'].includes(typeof label) ? label : value)
-                .join(', ')}`)),
-            selectorNode,
-            arrowNode,
-            mergedAllowClear && clearNode));
-    }
-    return (React.createElement(BaseSelectContext.Provider, { value: baseSelectContext }, renderNode));
+  }
+  // ============================= Clear ==============================
+  const onClearMouseDown = () => {
+    var _a;
+    onClear === null || onClear === void 0 ? void 0 : onClear();
+    (_a = selectorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    onDisplayValuesChange([], {
+      type: 'clear',
+      values: displayValues
+    });
+    onInternalSearch('', false, false);
+  };
+  const {
+    allowClear: mergedAllowClear,
+    clearIcon: clearNode
+  } = useAllowClear(prefixCls, onClearMouseDown, displayValues, allowClear, clearIcon, disabled, mergedSearchValue, mode);
+  // =========================== OptionList ===========================
+  const optionList = React.createElement(OptionList, {
+    ref: listRef
+  });
+  // ============================= Select =============================
+  const mergedClassName = classNames(prefixCls, className, {
+    [`${prefixCls}-focused`]: mockFocused,
+    [`${prefixCls}-multiple`]: multiple,
+    [`${prefixCls}-single`]: !multiple,
+    [`${prefixCls}-allow-clear`]: allowClear,
+    [`${prefixCls}-show-arrow`]: showSuffixIcon,
+    [`${prefixCls}-disabled`]: disabled,
+    [`${prefixCls}-loading`]: loading,
+    [`${prefixCls}-open`]: mergedOpen,
+    [`${prefixCls}-customize-input`]: customizeInputElement,
+    [`${prefixCls}-show-search`]: mergedShowSearch
+  });
+  // >>> Selector
+  const selectorNode = React.createElement(SelectTrigger, {
+    ref: triggerRef,
+    disabled: disabled,
+    prefixCls: prefixCls,
+    visible: triggerOpen,
+    popupElement: optionList,
+    animation: animation,
+    transitionName: transitionName,
+    dropdownStyle: dropdownStyle,
+    dropdownClassName: dropdownClassName,
+    direction: direction,
+    dropdownMatchSelectWidth: dropdownMatchSelectWidth,
+    dropdownRender: dropdownRender,
+    dropdownAlign: dropdownAlign,
+    placement: placement,
+    builtinPlacements: builtinPlacements,
+    getPopupContainer: getPopupContainer,
+    empty: emptyOptions,
+    getTriggerDOMNode: () => selectorDomRef.current,
+    onPopupVisibleChange: onTriggerVisibleChange,
+    onPopupMouseEnter: onPopupMouseEnter
+  }, customizeRawInputElement ? React.cloneElement(customizeRawInputElement, {
+    ref: customizeRawInputRef
+  }) : React.createElement(Selector, Object.assign({}, props, {
+    domRef: selectorDomRef,
+    prefixCls: prefixCls,
+    inputElement: customizeInputElement,
+    ref: selectorRef,
+    id: id,
+    showSearch: mergedShowSearch,
+    autoClearSearchValue: autoClearSearchValue,
+    mode: mode,
+    activeDescendantId: activeDescendantId,
+    tagRender: tagRender,
+    values: displayValues,
+    open: mergedOpen,
+    onToggleOpen: onToggleOpen,
+    activeValue: activeValue,
+    searchValue: mergedSearchValue,
+    onSearch: onInternalSearch,
+    onSearchSubmit: onInternalSearchSubmit,
+    onRemove: onSelectorRemove,
+    tokenWithEnter: tokenWithEnter
+  })));
+  // >>> Render
+  let renderNode;
+  // Render raw
+  if (customizeRawInputElement) {
+    renderNode = selectorNode;
+  } else {
+    renderNode = React.createElement("div", Object.assign({
+      className: mergedClassName
+    }, domProps, {
+      ref: containerRef,
+      onMouseDown: onInternalMouseDown,
+      onKeyDown: onInternalKeyDown,
+      onKeyUp: onInternalKeyUp,
+      onFocus: onContainerFocus,
+      onBlur: onContainerBlur
+    }), mockFocused && !mergedOpen && React.createElement("span", {
+      style: {
+        width: 0,
+        height: 0,
+        position: 'absolute',
+        overflow: 'hidden',
+        opacity: 0
+      },
+      "aria-live": "polite"
+    }, `${displayValues.map(({
+      label,
+      value
+    }) => ['number', 'string'].includes(typeof label) ? label : value).join(', ')}`), selectorNode, arrowNode, mergedAllowClear && clearNode);
+  }
+  return React.createElement(BaseSelectContext.Provider, {
+    value: baseSelectContext
+  }, renderNode);
 });
 // Set display name for dev
 if (process.env.NODE_ENV !== 'production') {
-    BaseSelect.displayName = 'BaseSelect';
+  BaseSelect.displayName = 'BaseSelect';
 }
-export default BaseSelect;
-//# sourceMappingURL=BaseSelect.js.map
+export default BaseSelect;