@rc-component/select 1.1.4 → 1.2.0-alpha.0

package/es/BaseSelect/index.js

@@ -1,22 +1,27 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import cls from 'classnames';
-import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
-import useMergedState from "@rc-component/util/es/hooks/useMergedState";
-import isMobile from "@rc-component/util/es/isMobile";
-import { useComposeRef } from "@rc-component/util/es/ref";
+import { clsx } from 'clsx';
 import { getDOM } from "@rc-component/util/es/Dom/findDOMNode";
 import * as React from 'react';
 import { useAllowClear } from "../hooks/useAllowClear";
 import { BaseSelectContext } from "../hooks/useBaseProps";
-import useDelayReset from "../hooks/useDelayReset";
 import useLock from "../hooks/useLock";
 import useSelectTriggerControl from "../hooks/useSelectTriggerControl";
-import Selector from "../Selector";
 import SelectTrigger from "../SelectTrigger";
-import TransBtn from "../TransBtn";
 import { getSeparatedContent, isValidCount } from "../utils/valueUtil";
 import Polite from "./Polite";
-const DEFAULT_OMIT_PROPS = ['value', 'onChange', 'removeIcon', 'placeholder', 'autoFocus', 'maxTagCount', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'onPopupScroll', 'tabIndex'];
+import useOpen from "../hooks/useOpen";
+import { useEvent } from '@rc-component/util';
+import SelectInput from "../SelectInput";
+import useComponents from "../hooks/useComponents";
+
+/**
+ * ZombieJ:
+ * We are currently refactoring the semantic structure of the component. Changelog:
+ * - Remove `suffixIcon` and change to `suffix`.
+ * - Add `components.root` for replacing response element.
+ *   - Remove `getInputElement` and `getRawInputElement` since we can use `components.input` instead.
+ */
+
 export const isMultiple = mode => mode === 'tags' || mode === 'multiple';
 const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -37,6 +42,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     notFoundContent = 'Not Found',
     onClear,
     maxCount,
+    placeholder,
     // Mode
     mode,
     // Status
@@ -62,6 +68,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     // Icons
     allowClear,
     prefix,
+    suffix,
     suffixIcon,
     clearIcon,
     // Dropdown
@@ -84,49 +91,34 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     onKeyUp,
     onKeyDown,
     onMouseDown,
+    // Components
+    components,
     // Rest Props
     ...restProps
   } = props;
 
   // ============================== MISC ==============================
   const multiple = isMultiple(mode);
-  const mergedShowSearch = (showSearch !== undefined ? showSearch : multiple) || mode === 'combobox';
-  const domProps = {
-    ...restProps
-  };
-  DEFAULT_OMIT_PROPS.forEach(propName => {
-    delete domProps[propName];
-  });
-  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 triggerRef = React.useRef(null);
-  const selectorRef = React.useRef(null);
   const listRef = React.useRef(null);
-  const blurRef = React.useRef(false);
-  const customDomRef = React.useRef(null);
 
   /** Used for component focused management */
-  const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset();
+  const [focused, setFocused] = React.useState(false);
 
   // =========================== Imperative ===========================
   React.useImperativeHandle(ref, () => ({
-    focus: selectorRef.current?.focus,
-    blur: selectorRef.current?.blur,
+    focus: containerRef.current?.focus,
+    blur: containerRef.current?.blur,
     scrollTo: arg => listRef.current?.scrollTo(arg),
-    nativeElement: containerRef.current || selectorRef.current?.nativeElement || getDOM(customDomRef.current)
+    nativeElement: getDOM(containerRef.current)
   }));
 
+  // =========================== Components ===========================
+  const mergedComponents = useComponents(components, getInputElement, getRawInputElement);
+
   // ========================== Search Value ==========================
   const mergedSearchValue = React.useMemo(() => {
     if (mode !== 'combobox') {
@@ -140,37 +132,10 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   // 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(customDomRef, customizeRawInputElement?.props?.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
+  // Not trigger `open` 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) {
-        onPopupVisibleChange?.(nextOpen);
-      }
-    }
-  }, [disabled, mergedOpen, setInnerOpen, onPopupVisibleChange]);
+  const [mergedOpen, triggerOpen] = useOpen(open, onPopupVisibleChange, nextOpen => disabled || emptyListContent ? false : nextOpen);
 
   // ============================= Search =============================
   const tokenWithEnter = React.useMemo(() => (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
@@ -192,7 +157,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       onSearchSplit?.(patchLabels);
 
       // Should close when paste finish
-      onToggleOpen(false);
+      triggerOpen(false);
 
       // Tell Selector that break next actions
       ret = false;
@@ -202,6 +167,11 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
         source: fromTyping ? 'typing' : 'effect'
       });
     }
+
+    // Open if from typing
+    if (searchText && fromTyping && ret) {
+      triggerOpen(true);
+    }
     return ret;
   };
 
@@ -228,15 +198,12 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   // ============================ 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);
+    if (disabled) {
+      triggerOpen(false);
+      setFocused(false);
     }
-  }, [disabled]);
+  }, [disabled, mergedOpen]);
 
   // ============================ Keyboard ============================
   /**
@@ -249,7 +216,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   const keyLockRef = React.useRef(false);
 
   // KeyDown
-  const onInternalKeyDown = (event, ...rest) => {
+  const onInternalKeyDown = event => {
     const clearLock = getClearLock();
     const {
       key
@@ -263,7 +230,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
 
       // We only manage open state here, close logic should handle by list component
       if (!mergedOpen) {
-        onToggleOpen(true);
+        triggerOpen(true);
       }
     }
     setClearLock(!!mergedSearchValue);
@@ -292,9 +259,9 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       if (isEnterKey) {
         keyLockRef.current = true;
       }
-      listRef.current?.onKeyDown(event, ...rest);
+      listRef.current?.onKeyDown(event);
     }
-    onKeyDown?.(event, ...rest);
+    onKeyDown?.(event);
   };
 
   // KeyUp
@@ -309,13 +276,13 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
 
   // ============================ Selector ============================
-  const onSelectorRemove = val => {
+  const onSelectorRemove = useEvent(val => {
     const newValues = displayValues.filter(i => i !== val);
     onDisplayValuesChange(newValues, {
       type: 'remove',
       values: [val]
     });
-  };
+  });
   const onInputBlur = () => {
     // Unlock the Enter key after the input blur; otherwise, the Enter key needs to be pressed twice to trigger the correct effect.
     keyLockRef.current = false;
@@ -323,31 +290,20 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // ========================== Focus / Blur ==========================
   /** Record real focus status */
-  const focusRef = React.useRef(false);
-  const onContainerFocus = (...args) => {
-    setMockFocused(true);
-    if (!disabled) {
-      if (onFocus && !focusRef.current) {
-        onFocus(...args);
-      }
+  // const focusRef = React.useRef<boolean>(false);
 
+  const onInternalFocus = event => {
+    setFocused(true);
+    if (!disabled) {
       // `showAction` should handle `focus` if set
       if (showAction.includes('focus')) {
-        onToggleOpen(true);
+        triggerOpen(true);
       }
+      onFocus?.(event);
     }
-    focusRef.current = true;
   };
-  const onContainerBlur = (...args) => {
-    blurRef.current = true;
-    setMockFocused(false, () => {
-      focusRef.current = false;
-      blurRef.current = false;
-      onToggleOpen(false);
-    });
-    if (disabled) {
-      return;
-    }
+  const onInternalBlur = event => {
+    setFocused(false);
     if (mergedSearchValue) {
       // `tags` mode should move `searchValue` into values
       if (mode === 'tags') {
@@ -361,17 +317,11 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
         });
       }
     }
-    if (onBlur) {
-      onBlur(...args);
+    if (!disabled) {
+      triggerOpen(false);
+      onBlur?.(event);
     }
   };
-
-  // Give focus back of Select
-  const activeTimeoutIds = [];
-  React.useEffect(() => () => {
-    activeTimeoutIds.forEach(timeoutId => clearTimeout(timeoutId));
-    activeTimeoutIds.splice(0, activeTimeoutIds.length);
-  }, []);
   const onInternalMouseDown = (event, ...restArgs) => {
     const {
       target
@@ -379,18 +329,9 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     const popupElement = triggerRef.current?.getPopupElement();
 
     // We should give focus back to selector if clicked item is not focusable
-    if (popupElement && popupElement.contains(target)) {
-      const timeoutId = setTimeout(() => {
-        const index = activeTimeoutIds.indexOf(timeoutId);
-        if (index !== -1) {
-          activeTimeoutIds.splice(index, 1);
-        }
-        cancelSetMockFocused();
-        if (!mobile && !popupElement.contains(document.activeElement)) {
-          selectorRef.current?.focus();
-        }
-      });
-      activeTimeoutIds.push(timeoutId);
+    if (popupElement?.contains(target) && triggerOpen) {
+      // Tell `open` not to close since it's safe in the popup
+      triggerOpen(true, true);
     }
     onMouseDown?.(event, ...restArgs);
   };
@@ -404,58 +345,53 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Used for raw custom input trigger
   let onTriggerVisibleChange;
-  if (customizeRawInputElement) {
+  if (!!mergedComponents.root) {
     onTriggerVisibleChange = newOpen => {
-      onToggleOpen(newOpen);
+      triggerOpen(newOpen);
     };
   }
 
   // Close when click on non-select element
-  useSelectTriggerControl(() => [containerRef.current, triggerRef.current?.getPopupElement()], triggerOpen, onToggleOpen, !!customizeRawInputElement);
+  useSelectTriggerControl(() => [getDOM(containerRef.current), triggerRef.current?.getPopupElement()], mergedOpen, triggerOpen, !!mergedComponents.root);
 
   // ============================ Context =============================
   const baseSelectContext = React.useMemo(() => ({
     ...props,
     notFoundContent,
     open: mergedOpen,
-    triggerOpen,
+    triggerOpen: mergedOpen,
     id,
-    showSearch: mergedShowSearch,
+    showSearch,
     multiple,
-    toggleOpen: onToggleOpen,
+    toggleOpen: triggerOpen,
     showScrollBar,
     styles,
     classNames
-  }), [props, notFoundContent, triggerOpen, mergedOpen, id, mergedShowSearch, multiple, onToggleOpen, showScrollBar, styles, classNames]);
+  }), [props, notFoundContent, triggerOpen, id, showSearch, multiple, mergedOpen, showScrollBar, styles, classNames]);
 
   // ==================================================================
   // ==                            Render                            ==
   // ==================================================================
 
-  // ============================= Arrow ==============================
-  const showSuffixIcon = !!suffixIcon || loading;
-  let arrowNode;
-  if (showSuffixIcon) {
-    arrowNode = /*#__PURE__*/React.createElement(TransBtn, {
-      className: cls(`${prefixCls}-arrow`, classNames?.suffix, {
-        [`${prefixCls}-arrow-loading`]: loading
-      }),
-      style: styles?.suffix,
-      customizeIcon: suffixIcon,
-      customizeIconProps: {
-        loading,
+  // ============================= Suffix =============================
+  const mergedSuffixIcon = React.useMemo(() => {
+    const nextSuffix = suffix ?? suffixIcon;
+    if (typeof nextSuffix === 'function') {
+      return nextSuffix({
         searchValue: mergedSearchValue,
         open: mergedOpen,
-        focused: mockFocused,
-        showSearch: mergedShowSearch
-      }
-    });
-  }
+        focused,
+        showSearch,
+        loading
+      });
+    }
+    return nextSuffix;
+  }, [suffix, suffixIcon, mergedSearchValue, mergedOpen, focused, showSearch, loading]);
 
   // ============================= Clear ==============================
   const onClearMouseDown = () => {
     onClear?.();
-    selectorRef.current?.focus();
+    containerRef.current?.focus();
     onDisplayValuesChange([], {
       type: 'clear',
       values: displayValues
@@ -465,7 +401,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     allowClear: mergedAllowClear,
     clearIcon: clearNode
-  } = useAllowClear(prefixCls, onClearMouseDown, displayValues, allowClear, clearIcon, disabled, mergedSearchValue, mode);
+  } = useAllowClear(prefixCls, displayValues, allowClear, clearIcon, disabled, mergedSearchValue, mode);
 
   // =========================== OptionList ===========================
   const optionList = /*#__PURE__*/React.createElement(OptionList, {
@@ -473,25 +409,69 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   });
 
   // ============================= Select =============================
-  const mergedClassName = cls(prefixCls, className, {
-    [`${prefixCls}-focused`]: mockFocused,
+  const mergedClassName = clsx(prefixCls, className, {
+    [`${prefixCls}-focused`]: focused,
     [`${prefixCls}-multiple`]: multiple,
     [`${prefixCls}-single`]: !multiple,
-    [`${prefixCls}-allow-clear`]: allowClear,
-    [`${prefixCls}-show-arrow`]: showSuffixIcon,
+    [`${prefixCls}-allow-clear`]: mergedAllowClear,
+    [`${prefixCls}-show-arrow`]: mergedSuffixIcon !== undefined && mergedSuffixIcon !== null,
     [`${prefixCls}-disabled`]: disabled,
     [`${prefixCls}-loading`]: loading,
     [`${prefixCls}-open`]: mergedOpen,
     [`${prefixCls}-customize-input`]: customizeInputElement,
-    [`${prefixCls}-show-search`]: mergedShowSearch
+    [`${prefixCls}-show-search`]: showSearch
   });
 
-  // >>> Selector
-  const selectorNode = /*#__PURE__*/React.createElement(SelectTrigger, {
+  // >>> Render
+  let renderNode = /*#__PURE__*/React.createElement(SelectInput, _extends({}, restProps, {
+    // Ref
+    ref: containerRef
+    // Style
+    ,
+    prefixCls: prefixCls,
+    className: mergedClassName
+    // Focus state
+    ,
+    focused: focused
+    // UI
+    ,
+    prefix: prefix,
+    suffix: mergedSuffixIcon,
+    clearIcon: clearNode
+    // Type or mode
+    ,
+    multiple: multiple,
+    mode: mode
+    // Values
+    ,
+    displayValues: displayValues,
+    placeholder: placeholder,
+    searchValue: mergedSearchValue,
+    activeValue: activeValue,
+    onSearch: onInternalSearch,
+    onSearchSubmit: onInternalSearchSubmit,
+    onInputBlur: onInputBlur,
+    onFocus: onInternalFocus,
+    onBlur: onInternalBlur,
+    onClearMouseDown: onClearMouseDown,
+    onKeyDown: onInternalKeyDown,
+    onKeyUp: onInternalKeyUp,
+    onSelectorRemove: onSelectorRemove
+    // Token handling
+    ,
+    tokenWithEnter: tokenWithEnter
+    // Open
+    ,
+    onMouseDown: onInternalMouseDown
+    // Components
+    ,
+    components: mergedComponents
+  }));
+  renderNode = /*#__PURE__*/React.createElement(SelectTrigger, {
     ref: triggerRef,
     disabled: disabled,
     prefixCls: prefixCls,
-    visible: triggerOpen,
+    visible: mergedOpen,
     popupElement: optionList,
     animation: animation,
     transitionName: transitionName,
@@ -506,58 +486,15 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     getPopupContainer: getPopupContainer,
     empty: emptyOptions,
     onPopupVisibleChange: onTriggerVisibleChange,
-    onPopupMouseEnter: onPopupMouseEnter
-  }, customizeRawInputElement ? ( /*#__PURE__*/React.cloneElement(customizeRawInputElement, {
-    ref: customizeRawInputRef
-  })) : /*#__PURE__*/React.createElement(Selector, _extends({}, props, {
-    prefixClassName: classNames?.prefix,
-    prefixStyle: styles?.prefix,
-    prefixCls: prefixCls,
-    inputElement: customizeInputElement,
-    ref: selectorRef,
-    id: id,
-    prefix: prefix,
-    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,
-    onInputBlur: onInputBlur
-  })));
-
-  // >>> Render
-  let renderNode;
-
-  // Render raw
-  if (customizeRawInputElement) {
-    renderNode = selectorNode;
-  } else {
-    renderNode = /*#__PURE__*/React.createElement("div", _extends({
-      className: mergedClassName
-    }, domProps, {
-      ref: containerRef,
-      onMouseDown: onInternalMouseDown,
-      onKeyDown: onInternalKeyDown,
-      onKeyUp: onInternalKeyUp,
-      onFocus: onContainerFocus,
-      onBlur: onContainerBlur
-    }), /*#__PURE__*/React.createElement(Polite, {
-      visible: mockFocused && !mergedOpen,
-      values: displayValues
-    }), selectorNode, arrowNode, mergedAllowClear && clearNode);
-  }
+    onPopupMouseEnter: onPopupMouseEnter,
+    onPopupMouseDown: onInternalMouseDown
+  }, renderNode);
   return /*#__PURE__*/React.createElement(BaseSelectContext.Provider, {
     value: baseSelectContext
-  }, renderNode);
+  }, /*#__PURE__*/React.createElement(Polite, {
+    visible: focused && !mergedOpen,
+    values: displayValues
+  }), renderNode);
 });
 
 // Set display name for dev

package/es/OptionList.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import KeyCode from "@rc-component/util/es/KeyCode";
 import useMemo from "@rc-component/util/es/hooks/useMemo";
 import omit from "@rc-component/util/es/omit";
@@ -316,7 +316,7 @@ const OptionList = (_, ref) => {
     if (group) {
       const groupTitle = data.title ?? (isTitleType(label) ? label.toString() : undefined);
       return /*#__PURE__*/React.createElement("div", {
-        className: classNames(itemPrefixCls, `${itemPrefixCls}-group`, data.className),
+        className: clsx(itemPrefixCls, `${itemPrefixCls}-group`, data.className),
         title: groupTitle
       }, label !== undefined ? label : key);
     }
@@ -334,7 +334,7 @@ const OptionList = (_, ref) => {
     const selected = isSelected(value);
     const mergedDisabled = disabled || !selected && overMaxCount;
     const optionPrefixCls = `${itemPrefixCls}-option`;
-    const optionClassName = classNames(itemPrefixCls, optionPrefixCls, className, contextClassNames?.popup?.listItem, {
+    const optionClassName = clsx(itemPrefixCls, optionPrefixCls, className, contextClassNames?.popup?.listItem, {
       [`${optionPrefixCls}-grouped`]: groupOption,
       [`${optionPrefixCls}-active`]: activeIndex === itemIndex && !mergedDisabled,
       [`${optionPrefixCls}-disabled`]: mergedDisabled,

package/es/Select.d.ts

@@ -125,7 +125,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     classNames?: Partial<Record<SemanticName, string>>;
     styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
-declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;
     OptGroup: typeof OptGroup;
 };

package/es/Select.js

@@ -30,7 +30,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  * - `combobox` mode not support `optionLabelProp`
  */
 
-import useMergedState from "@rc-component/util/es/hooks/useMergedState";
+import useControlledState from "@rc-component/util/es/hooks/useControlledState";
 import warning from "@rc-component/util/es/warning";
 import * as React from 'react';
 import BaseSelect, { isMultiple } from "./BaseSelect";
@@ -100,7 +100,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     optionFilterProp: legacyOptionFilterProp,
     filterSort: legacyFilterSort
   };
-  const [mergedShowSearch, searchConfig] = useSearchConfig(showSearch, searchProps);
+  const [mergedShowSearch, searchConfig] = useSearchConfig(showSearch, searchProps, mode);
   const {
     filterOption,
     searchValue,
@@ -127,10 +127,8 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
   /* eslint-enable react-hooks/exhaustive-deps */);
 
   // =========================== Search ===========================
-  const [mergedSearchValue, setSearchValue] = useMergedState('', {
-    value: searchValue,
-    postState: search => search || ''
-  });
+  const [internalSearchValue, setSearchValue] = useControlledState('', searchValue);
+  const mergedSearchValue = internalSearchValue || '';
 
   // =========================== Option ===========================
   const parsedOptions = useOptions(options, children, mergedFieldNames, optionFilterProp, optionLabelProp);
@@ -185,9 +183,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [mergedFieldNames, optionLabelProp, valueOptions]);
 
   // =========================== Values ===========================
-  const [internalValue, setInternalValue] = useMergedState(defaultValue, {
-    value
-  });
+  const [internalValue, setInternalValue] = useControlledState(defaultValue, value);
 
   // Merged value with LabelValueType
   const rawLabeledValues = React.useMemo(() => {

package/es/SelectInput/Affix.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface AffixProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export default function Affix(props: AffixProps): React.JSX.Element;

package/es/SelectInput/Affix.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+// Affix is a simple wrapper which should not read context or logical props
+export default function Affix(props) {
+  const {
+    children,
+    ...restProps
+  } = props;
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", restProps, children);
+}

package/es/SelectInput/Content/MultipleContent.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { SharedContentProps } from '.';
+declare const _default: React.ForwardRefExoticComponent<SharedContentProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;