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

package/lib/BaseSelect/index.js

@@ -4,28 +4,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isMultiple = exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
-var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
-var _useMergedState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useMergedState"));
-var _isMobile = _interopRequireDefault(require("@rc-component/util/lib/isMobile"));
-var _ref = require("@rc-component/util/lib/ref");
+var _clsx = require("clsx");
 var _findDOMNode = require("@rc-component/util/lib/Dom/findDOMNode");
 var React = _interopRequireWildcard(require("react"));
 var _useAllowClear = require("../hooks/useAllowClear");
 var _useBaseProps = require("../hooks/useBaseProps");
-var _useDelayReset = _interopRequireDefault(require("../hooks/useDelayReset"));
 var _useLock = _interopRequireDefault(require("../hooks/useLock"));
 var _useSelectTriggerControl = _interopRequireDefault(require("../hooks/useSelectTriggerControl"));
-var _Selector = _interopRequireDefault(require("../Selector"));
 var _SelectTrigger = _interopRequireDefault(require("../SelectTrigger"));
-var _TransBtn = _interopRequireDefault(require("../TransBtn"));
 var _valueUtil = require("../utils/valueUtil");
 var _Polite = _interopRequireDefault(require("./Polite"));
+var _useOpen = _interopRequireDefault(require("../hooks/useOpen"));
+var _util = require("@rc-component/util");
+var _SelectInput = _interopRequireDefault(require("../SelectInput"));
+var _useComponents = _interopRequireDefault(require("../hooks/useComponents"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
-const DEFAULT_OMIT_PROPS = ['value', 'onChange', 'removeIcon', 'placeholder', 'autoFocus', 'maxTagCount', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'onPopupScroll', 'tabIndex'];
+/**
+ * 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.
+ */
+
 const isMultiple = mode => mode === 'tags' || mode === 'multiple';
 exports.isMultiple = isMultiple;
 const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -47,6 +51,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     notFoundContent = 'Not Found',
     onClear,
     maxCount,
+    placeholder,
     // Mode
     mode,
     // Status
@@ -72,6 +77,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     // Icons
     allowClear,
     prefix,
+    suffix,
     suffixIcon,
     clearIcon,
     // Dropdown
@@ -94,49 +100,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((0, _isMobile.default)());
-  }, []);
 
   // ============================== 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] = (0, _useDelayReset.default)();
+  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 || (0, _findDOMNode.getDOM)(customDomRef.current)
+    nativeElement: (0, _findDOMNode.getDOM)(containerRef.current)
   }));
 
+  // =========================== Components ===========================
+  const mergedComponents = (0, _useComponents.default)(components, getInputElement, getRawInputElement);
+
   // ========================== Search Value ==========================
   const mergedSearchValue = React.useMemo(() => {
     if (mode !== 'combobox') {
@@ -150,37 +141,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 = (0, _ref.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);
-  (0, _useLayoutEffect.default)(() => {
-    setRendered(true);
-  }, []);
-  const [innerOpen, setInnerOpen] = (0, _useMergedState.default)(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] = (0, _useOpen.default)(open, onPopupVisibleChange, nextOpen => disabled || emptyListContent ? false : nextOpen);
 
   // ============================= Search =============================
   const tokenWithEnter = React.useMemo(() => (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
@@ -202,7 +166,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;
@@ -212,6 +176,11 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
         source: fromTyping ? 'typing' : 'effect'
       });
     }
+
+    // Open if from typing
+    if (searchText && fromTyping && ret) {
+      triggerOpen(true);
+    }
     return ret;
   };
 
@@ -238,15 +207,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 ============================
   /**
@@ -259,7 +225,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
@@ -273,7 +239,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);
@@ -302,9 +268,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
@@ -319,13 +285,13 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
 
   // ============================ Selector ============================
-  const onSelectorRemove = val => {
+  const onSelectorRemove = (0, _util.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;
@@ -333,31 +299,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') {
@@ -371,17 +326,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
@@ -389,18 +338,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);
   };
@@ -414,58 +354,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
-  (0, _useSelectTriggerControl.default)(() => [containerRef.current, triggerRef.current?.getPopupElement()], triggerOpen, onToggleOpen, !!customizeRawInputElement);
+  (0, _useSelectTriggerControl.default)(() => [(0, _findDOMNode.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.default, {
-      className: (0, _classnames.default)(`${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
@@ -475,7 +410,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     allowClear: mergedAllowClear,
     clearIcon: clearNode
-  } = (0, _useAllowClear.useAllowClear)(prefixCls, onClearMouseDown, displayValues, allowClear, clearIcon, disabled, mergedSearchValue, mode);
+  } = (0, _useAllowClear.useAllowClear)(prefixCls, displayValues, allowClear, clearIcon, disabled, mergedSearchValue, mode);
 
   // =========================== OptionList ===========================
   const optionList = /*#__PURE__*/React.createElement(OptionList, {
@@ -483,25 +418,69 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   });
 
   // ============================= Select =============================
-  const mergedClassName = (0, _classnames.default)(prefixCls, className, {
-    [`${prefixCls}-focused`]: mockFocused,
+  const mergedClassName = (0, _clsx.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.default, {
+  // >>> Render
+  let renderNode = /*#__PURE__*/React.createElement(_SelectInput.default, _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.default, {
     ref: triggerRef,
     disabled: disabled,
     prefixCls: prefixCls,
-    visible: triggerOpen,
+    visible: mergedOpen,
     popupElement: optionList,
     animation: animation,
     transitionName: transitionName,
@@ -516,58 +495,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.default, _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.default, {
-      visible: mockFocused && !mergedOpen,
-      values: displayValues
-    }), selectorNode, arrowNode, mergedAllowClear && clearNode);
-  }
+    onPopupMouseEnter: onPopupMouseEnter,
+    onPopupMouseDown: onInternalMouseDown
+  }, renderNode);
   return /*#__PURE__*/React.createElement(_useBaseProps.BaseSelectContext.Provider, {
     value: baseSelectContext
-  }, renderNode);
+  }, /*#__PURE__*/React.createElement(_Polite.default, {
+    visible: focused && !mergedOpen,
+    values: displayValues
+  }), renderNode);
 });
 
 // Set display name for dev

package/lib/OptionList.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _KeyCode = _interopRequireDefault(require("@rc-component/util/lib/KeyCode"));
 var _useMemo = _interopRequireDefault(require("@rc-component/util/lib/hooks/useMemo"));
 var _omit = _interopRequireDefault(require("@rc-component/util/lib/omit"));
@@ -324,7 +324,7 @@ const OptionList = (_, ref) => {
     if (group) {
       const groupTitle = data.title ?? (isTitleType(label) ? label.toString() : undefined);
       return /*#__PURE__*/React.createElement("div", {
-        className: (0, _classnames.default)(itemPrefixCls, `${itemPrefixCls}-group`, data.className),
+        className: (0, _clsx.clsx)(itemPrefixCls, `${itemPrefixCls}-group`, data.className),
         title: groupTitle
       }, label !== undefined ? label : key);
     }
@@ -342,7 +342,7 @@ const OptionList = (_, ref) => {
     const selected = isSelected(value);
     const mergedDisabled = disabled || !selected && overMaxCount;
     const optionPrefixCls = `${itemPrefixCls}-option`;
-    const optionClassName = (0, _classnames.default)(itemPrefixCls, optionPrefixCls, className, contextClassNames?.popup?.listItem, {
+    const optionClassName = (0, _clsx.clsx)(itemPrefixCls, optionPrefixCls, className, contextClassNames?.popup?.listItem, {
       [`${optionPrefixCls}-grouped`]: groupOption,
       [`${optionPrefixCls}-active`]: activeIndex === itemIndex && !mergedDisabled,
       [`${optionPrefixCls}-disabled`]: mergedDisabled,

package/lib/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/lib/Select.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _useMergedState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useMergedState"));
+var _useControlledState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useControlledState"));
 var _warning = _interopRequireDefault(require("@rc-component/util/lib/warning"));
 var React = _interopRequireWildcard(require("react"));
 var _BaseSelect = _interopRequireWildcard(require("./BaseSelect"));
@@ -107,7 +107,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     optionFilterProp: legacyOptionFilterProp,
     filterSort: legacyFilterSort
   };
-  const [mergedShowSearch, searchConfig] = (0, _useSearchConfig.default)(showSearch, searchProps);
+  const [mergedShowSearch, searchConfig] = (0, _useSearchConfig.default)(showSearch, searchProps, mode);
   const {
     filterOption,
     searchValue,
@@ -134,10 +134,8 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
   /* eslint-enable react-hooks/exhaustive-deps */);
 
   // =========================== Search ===========================
-  const [mergedSearchValue, setSearchValue] = (0, _useMergedState.default)('', {
-    value: searchValue,
-    postState: search => search || ''
-  });
+  const [internalSearchValue, setSearchValue] = (0, _useControlledState.default)('', searchValue);
+  const mergedSearchValue = internalSearchValue || '';
 
   // =========================== Option ===========================
   const parsedOptions = (0, _useOptions.default)(options, children, mergedFieldNames, optionFilterProp, optionLabelProp);
@@ -192,9 +190,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [mergedFieldNames, optionLabelProp, valueOptions]);
 
   // =========================== Values ===========================
-  const [internalValue, setInternalValue] = (0, _useMergedState.default)(defaultValue, {
-    value
-  });
+  const [internalValue, setInternalValue] = (0, _useControlledState.default)(defaultValue, value);
 
   // Merged value with LabelValueType
   const rawLabeledValues = React.useMemo(() => {

package/lib/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;