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

package/es/SelectInput/index.js

@@ -0,0 +1,189 @@
+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 * as React from 'react';
+import Affix from "./Affix";
+import SelectContent from "./Content";
+import SelectInputContext from "./context";
+import useBaseProps from "../hooks/useBaseProps";
+import { omit, useEvent } from '@rc-component/util';
+import KeyCode from "@rc-component/util/es/KeyCode";
+import { isValidateOpenKey } from "../utils/keyUtil";
+import { clsx } from 'clsx';
+import { getDOM } from "@rc-component/util/es/Dom/findDOMNode";
+import { composeRef } from "@rc-component/util/es/ref";
+const DEFAULT_OMIT_PROPS = ['value', 'onChange', 'removeIcon', 'placeholder', 'maxTagCount', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'onPopupScroll', 'tabIndex', 'activeValue', 'onSelectorRemove', 'focused'];
+export default /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
+  const {
+    // Style
+    prefixCls,
+    className,
+    style,
+    // UI
+    prefix,
+    suffix,
+    clearIcon,
+    children,
+    // Data
+    multiple,
+    displayValues,
+    placeholder,
+    mode,
+    // Search
+    searchValue,
+    onSearch,
+    onSearchSubmit,
+    onInputBlur,
+    // Input
+    maxLength,
+    autoFocus,
+    // Events
+    onMouseDown,
+    onBlur,
+    onClearMouseDown,
+    onInputKeyDown,
+    onSelectorRemove,
+    // Token handling
+    tokenWithEnter,
+    // Components
+    components,
+    ...restProps
+  } = props;
+  const {
+    triggerOpen,
+    toggleOpen,
+    showSearch,
+    disabled,
+    loading,
+    classNames,
+    styles
+  } = useBaseProps();
+  const rootRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+
+  // Handle keyboard events similar to original Selector
+  const onInternalInputKeyDown = useEvent(event => {
+    const {
+      which
+    } = event;
+
+    // Compatible with multiple lines in TextArea
+    const isTextAreaElement = inputRef.current instanceof HTMLTextAreaElement;
+
+    // Prevent default behavior for up/down arrows when dropdown is open
+    if (!isTextAreaElement && triggerOpen && (which === KeyCode.UP || which === KeyCode.DOWN)) {
+      event.preventDefault();
+    }
+
+    // Call the original onInputKeyDown callback
+    if (onInputKeyDown) {
+      onInputKeyDown(event);
+    }
+
+    // Move within the text box for TextArea
+    if (isTextAreaElement && !triggerOpen && ~[KeyCode.UP, KeyCode.DOWN, KeyCode.LEFT, KeyCode.RIGHT].indexOf(which)) {
+      return;
+    }
+
+    // Open dropdown when a valid open key is pressed
+    if (isValidateOpenKey(which)) {
+      toggleOpen(true);
+    }
+  });
+
+  // ====================== Refs ======================
+  React.useImperativeHandle(ref, () => {
+    return {
+      focus: options => {
+        // Focus the inner input if available, otherwise fall back to root div.
+        (inputRef.current || rootRef.current).focus?.(options);
+      },
+      blur: () => {
+        (inputRef.current || rootRef.current).blur?.();
+      },
+      nativeElement: rootRef.current
+    };
+  });
+
+  // ====================== Open ======================
+  const onInternalMouseDown = useEvent(event => {
+    if (!disabled) {
+      if (event.target !== getDOM(inputRef.current)) {
+        event.preventDefault();
+      }
+
+      // Check if we should prevent closing when clicking on selector
+      // Don't close if: open && not multiple && (combobox mode || showSearch)
+      const shouldPreventClose = triggerOpen && !multiple && (mode === 'combobox' || showSearch);
+      if (!event.nativeEvent._select_lazy) {
+        inputRef.current?.focus();
+
+        // Only toggle open if we should not prevent close
+        if (!shouldPreventClose) {
+          toggleOpen();
+        }
+      } else if (triggerOpen) {
+        // Lazy should also close when click clear icon
+        toggleOpen(false);
+      }
+    }
+    onMouseDown?.(event);
+  });
+  const onInternalBlur = event => {
+    toggleOpen(false);
+    onBlur?.(event);
+  };
+
+  // =================== Components ===================
+  const {
+    root: RootComponent
+  } = components;
+
+  // ===================== Render =====================
+  const domProps = omit(restProps, DEFAULT_OMIT_PROPS);
+
+  // Create context value with wrapped callbacks
+  const contextValue = {
+    ...props,
+    onInputKeyDown: onInternalInputKeyDown
+  };
+  if (RootComponent) {
+    if ( /*#__PURE__*/React.isValidElement(RootComponent)) {
+      return /*#__PURE__*/React.cloneElement(RootComponent, {
+        ...domProps,
+        ref: composeRef(RootComponent.ref, rootRef)
+      });
+    }
+    return /*#__PURE__*/React.createElement(RootComponent, _extends({}, domProps, {
+      ref: rootRef
+    }));
+  }
+  return /*#__PURE__*/React.createElement(SelectInputContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("div", _extends({}, domProps, {
+    // Style
+    ref: rootRef,
+    className: className,
+    style: style
+    // Mouse Events
+    ,
+    onMouseDown: onInternalMouseDown,
+    onBlur: onInternalBlur
+  }), /*#__PURE__*/React.createElement(Affix, {
+    className: clsx(`${prefixCls}-prefix`, classNames?.prefix),
+    style: styles?.prefix
+  }, prefix), /*#__PURE__*/React.createElement(SelectContent, {
+    ref: inputRef
+  }), /*#__PURE__*/React.createElement(Affix, {
+    className: clsx(`${prefixCls}-suffix`, {
+      [`${prefixCls}-suffix-loading`]: loading
+    }, classNames?.suffix),
+    style: styles?.suffix
+  }, suffix), clearIcon && /*#__PURE__*/React.createElement(Affix, {
+    className: clsx(`${prefixCls}-clear`, classNames?.clear),
+    style: styles?.clear,
+    onMouseDown: e => {
+      // Mark to tell not trigger open or focus
+      e.nativeEvent._select_lazy = true;
+      onClearMouseDown?.(e);
+    }
+  }, clearIcon), children));
+});

package/es/SelectTrigger.d.ts

@@ -24,6 +24,7 @@ export interface SelectTriggerProps {
     empty: boolean;
     onPopupVisibleChange?: (visible: boolean) => void;
     onPopupMouseEnter: () => void;
+    onPopupMouseDown: React.MouseEventHandler<HTMLDivElement>;
 }
 declare const RefSelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<RefTriggerProps>>;
 export default RefSelectTrigger;

package/es/SelectTrigger.js

@@ -1,6 +1,6 @@
 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 Trigger from '@rc-component/trigger';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 const getBuiltInPlacements = popupMatchSelectWidth => {
   // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
@@ -65,6 +65,7 @@ const SelectTrigger = (props, ref) => {
     empty,
     onPopupVisibleChange,
     onPopupMouseEnter,
+    onPopupMouseDown,
     ...restProps
   } = props;
 
@@ -115,14 +116,15 @@ const SelectTrigger = (props, ref) => {
       motionName: mergedTransitionName
     },
     popup: /*#__PURE__*/React.createElement("div", {
-      onMouseEnter: onPopupMouseEnter
+      onMouseEnter: onPopupMouseEnter,
+      onMouseDown: onPopupMouseDown
     }, popupNode),
     ref: triggerPopupRef,
     stretch: stretch,
     popupAlign: popupAlign,
     popupVisible: visible,
     getPopupContainer: getPopupContainer,
-    popupClassName: classNames(popupClassName, {
+    popupClassName: clsx(popupClassName, {
       [`${popupPrefixCls}-empty`]: empty
     }),
     popupStyle: mergedPopupStyle,

package/es/TransBtn.d.ts

@@ -9,5 +9,15 @@ export interface TransBtnProps {
     onClick?: React.MouseEventHandler<HTMLSpanElement>;
     children?: React.ReactNode;
 }
+/**
+ * Small wrapper for Select icons (clear/arrow/etc.).
+ * Prevents default mousedown to avoid blurring or caret moves, and
+ * renders a custom icon or a fallback icon span.
+ *
+ * DOM structure:
+ * <span className={className} ...>
+ *   { icon || <span className={`${className}-icon`}>{children}</span> }
+ * </span>
+ */
 declare const TransBtn: React.FC<TransBtnProps>;
 export default TransBtn;

package/es/TransBtn.js

@@ -1,5 +1,15 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
+/**
+ * Small wrapper for Select icons (clear/arrow/etc.).
+ * Prevents default mousedown to avoid blurring or caret moves, and
+ * renders a custom icon or a fallback icon span.
+ *
+ * DOM structure:
+ * <span className={className} ...>
+ *   { icon || <span className={`${className}-icon`}>{children}</span> }
+ * </span>
+ */
 const TransBtn = props => {
   const {
     className,
@@ -26,7 +36,7 @@ const TransBtn = props => {
     onClick: onClick,
     "aria-hidden": true
   }, icon !== undefined ? icon : /*#__PURE__*/React.createElement("span", {
-    className: classNames(className.split(/\s+/).map(cls => `${cls}-icon`))
+    className: clsx(className.split(/\s+/).map(cls => `${cls}-icon`))
   }, children));
 };
 export default TransBtn;

package/es/hooks/useAllowClear.d.ts

@@ -1,8 +1,9 @@
-import type { DisplayValueType, Mode, RenderNode } from '../interface';
-import React from 'react';
-export declare const useAllowClear: (prefixCls: string, onClearMouseDown: React.MouseEventHandler<HTMLSpanElement>, displayValues: DisplayValueType[], allowClear?: boolean | {
-    clearIcon?: RenderNode;
-}, clearIcon?: RenderNode, disabled?: boolean, mergedSearchValue?: string, mode?: Mode) => {
+import type { DisplayValueType, Mode } from '../interface';
+import type React from 'react';
+export interface AllowClearConfig {
     allowClear: boolean;
-    clearIcon: React.JSX.Element;
-};
+    clearIcon: React.ReactNode;
+}
+export declare const useAllowClear: (prefixCls: string, displayValues: DisplayValueType[], allowClear?: boolean | {
+    clearIcon?: React.ReactNode;
+}, clearIcon?: React.ReactNode, disabled?: boolean, mergedSearchValue?: string, mode?: Mode) => AllowClearConfig;

package/es/hooks/useAllowClear.js

@@ -1,26 +1,24 @@
-import TransBtn from "../TransBtn";
-import React from 'react';
-export const useAllowClear = (prefixCls, onClearMouseDown, displayValues, allowClear, clearIcon, disabled = false, mergedSearchValue, mode) => {
-  const mergedClearIcon = React.useMemo(() => {
-    if (typeof allowClear === 'object') {
-      return allowClear.clearIcon;
+import { useMemo } from 'react';
+export const useAllowClear = (prefixCls, displayValues, allowClear, clearIcon, disabled = false, mergedSearchValue, mode) => {
+  // Convert boolean to object first
+  const allowClearConfig = useMemo(() => {
+    if (typeof allowClear === 'boolean') {
+      return {
+        allowClear
+      };
     }
-    if (clearIcon) {
-      return clearIcon;
+    if (allowClear && typeof allowClear === 'object') {
+      return allowClear;
     }
-  }, [allowClear, clearIcon]);
-  const mergedAllowClear = React.useMemo(() => {
-    if (!disabled && !!allowClear && (displayValues.length || mergedSearchValue) && !(mode === 'combobox' && mergedSearchValue === '')) {
-      return true;
-    }
-    return false;
-  }, [allowClear, disabled, displayValues.length, mergedSearchValue, mode]);
-  return {
-    allowClear: mergedAllowClear,
-    clearIcon: /*#__PURE__*/React.createElement(TransBtn, {
-      className: `${prefixCls}-clear`,
-      onMouseDown: onClearMouseDown,
-      customizeIcon: mergedClearIcon
-    }, "\xD7")
-  };
+    return {
+      allowClear: false
+    };
+  }, [allowClear]);
+  return useMemo(() => {
+    const mergedAllowClear = !disabled && allowClearConfig.allowClear !== false && (displayValues.length || mergedSearchValue) && !(mode === 'combobox' && mergedSearchValue === '');
+    return {
+      allowClear: mergedAllowClear,
+      clearIcon: mergedAllowClear ? allowClearConfig.clearIcon || clearIcon || '×' : null
+    };
+  }, [allowClearConfig, clearIcon, disabled, displayValues.length, mergedSearchValue, mode]);
 };

package/es/hooks/useBaseProps.d.ts

@@ -8,6 +8,7 @@ export interface BaseSelectContextProps extends BaseSelectProps {
     triggerOpen: boolean;
     multiple: boolean;
     toggleOpen: (open?: boolean) => void;
+    role?: React.AriaRole;
 }
 export declare const BaseSelectContext: React.Context<BaseSelectContextProps>;
 export default function useBaseProps(): BaseSelectContextProps;

package/es/hooks/useComponents.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { SelectInputRef, SelectInputProps } from '../SelectInput';
+import type { BaseSelectProps } from '../BaseSelect';
+export interface ComponentsConfig {
+    root?: React.ComponentType<any> | string | React.ReactElement;
+    input?: React.ComponentType<any> | string | React.ReactElement;
+}
+export interface FilledComponentsConfig {
+    root: React.ForwardRefExoticComponent<SelectInputProps & React.RefAttributes<SelectInputRef>>;
+    input: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> | (React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>)>;
+}
+export default function useComponents(components?: ComponentsConfig, getInputElement?: BaseSelectProps['getInputElement'], getRawInputElement?: BaseSelectProps['getRawInputElement']): ComponentsConfig;

package/es/hooks/useComponents.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export default function useComponents(components, getInputElement, getRawInputElement) {
+  return React.useMemo(() => {
+    let {
+      root,
+      input
+    } = components || {};
+
+    // root: getRawInputElement
+    if (getRawInputElement) {
+      root = getRawInputElement();
+    }
+
+    // input: getInputElement
+    if (getInputElement) {
+      input = getInputElement();
+    }
+    return {
+      root,
+      input
+    };
+  }, [components, getInputElement, getRawInputElement]);
+}

package/es/hooks/useOpen.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Trigger by latest open call, if nextOpen is undefined, means toggle.
+ * ignoreNext will skip next call in the macro task queue.
+ */
+export type TriggerOpenType = (nextOpen?: boolean, ignoreNext?: boolean) => void;
+/**
+ * When `open` is controlled, follow the controlled value;
+ * Otherwise use uncontrolled logic.
+ * Setting `open` takes effect immediately,
+ * but setting it to `false` is delayed via MessageChannel.
+ *
+ * SSR handling: During SSR, `open` is always false to avoid Portal issues.
+ * On client-side hydration, it syncs with the actual open state.
+ */
+export default function useOpen(propOpen: boolean, onOpen: (nextOpen: boolean) => void, postOpen: (nextOpen: boolean) => boolean): [boolean, TriggerOpenType];

package/es/hooks/useOpen.js

@@ -0,0 +1,76 @@
+import { useControlledState, useEvent } from '@rc-component/util';
+import { useRef, useState, useEffect } from 'react';
+const internalMacroTask = fn => {
+  const channel = new MessageChannel();
+  channel.port1.onmessage = fn;
+  channel.port2.postMessage(null);
+};
+const macroTask = (fn, times = 1) => {
+  if (times <= 0) {
+    fn();
+    return;
+  }
+  internalMacroTask(() => {
+    macroTask(fn, times - 1);
+  });
+};
+
+/**
+ * Trigger by latest open call, if nextOpen is undefined, means toggle.
+ * ignoreNext will skip next call in the macro task queue.
+ */
+
+/**
+ * When `open` is controlled, follow the controlled value;
+ * Otherwise use uncontrolled logic.
+ * Setting `open` takes effect immediately,
+ * but setting it to `false` is delayed via MessageChannel.
+ *
+ * SSR handling: During SSR, `open` is always false to avoid Portal issues.
+ * On client-side hydration, it syncs with the actual open state.
+ */
+export default function useOpen(propOpen, onOpen, postOpen) {
+  // SSR not support Portal which means we need delay `open` for the first time render
+  const [rendered, setRendered] = useState(false);
+  useEffect(() => {
+    setRendered(true);
+  }, []);
+  const [stateOpen, internalSetOpen] = useControlledState(false, propOpen);
+
+  // During SSR, always return false for open state
+  const ssrSafeOpen = rendered ? stateOpen : false;
+  const mergedOpen = postOpen(ssrSafeOpen);
+  const taskIdRef = useRef(0);
+  const taskLockRef = useRef(false);
+  const triggerEvent = useEvent(nextOpen => {
+    if (onOpen && mergedOpen !== nextOpen) {
+      onOpen(nextOpen);
+    }
+    internalSetOpen(nextOpen);
+  });
+  const toggleOpen = useEvent((nextOpen, ignoreNext = false) => {
+    taskIdRef.current += 1;
+    const id = taskIdRef.current;
+    const nextOpenVal = typeof nextOpen === 'boolean' ? nextOpen : !mergedOpen;
+
+    // Since `mergedOpen` is post-processed, we need to check if the value really changed
+    if (nextOpenVal) {
+      triggerEvent(true);
+
+      // Lock if needed
+      if (ignoreNext) {
+        taskLockRef.current = ignoreNext;
+        macroTask(() => {
+          taskLockRef.current = false;
+        }, 2);
+      }
+      return;
+    }
+    macroTask(() => {
+      if (id === taskIdRef.current && !taskLockRef.current) {
+        triggerEvent(false);
+      }
+    });
+  });
+  return [mergedOpen, toggleOpen];
+}

package/es/hooks/useSearchConfig.d.ts

@@ -1,2 +1,2 @@
-import type { SearchConfig, DefaultOptionType } from "../Select";
-export default function useSearchConfig(showSearch: boolean | SearchConfig<DefaultOptionType> | undefined, props: SearchConfig<DefaultOptionType>): [boolean, SearchConfig<DefaultOptionType>];
+import type { SearchConfig, DefaultOptionType, SelectProps } from '../Select';
+export default function useSearchConfig(showSearch: boolean | SearchConfig<DefaultOptionType> | undefined, props: SearchConfig<DefaultOptionType>, mode: SelectProps<DefaultOptionType>['mode']): [boolean, SearchConfig<DefaultOptionType>];

package/es/hooks/useSearchConfig.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 // Convert `showSearch` to unique config
-export default function useSearchConfig(showSearch, props) {
+export default function useSearchConfig(showSearch, props, mode) {
   const {
     filterOption,
     searchValue,
@@ -21,6 +21,6 @@ export default function useSearchConfig(showSearch, props) {
       autoClearSearchValue,
       ...(isObject ? showSearch : {})
     };
-    return [isObject ? true : showSearch, searchConfig];
-  }, [showSearch, filterOption, searchValue, optionFilterProp, filterSort, onSearch, autoClearSearchValue]);
+    return [isObject || mode === 'combobox' || mode === 'tags' || mode === 'multiple' && showSearch === undefined ? true : showSearch, searchConfig];
+  }, [mode, showSearch, filterOption, searchValue, optionFilterProp, filterSort, onSearch, autoClearSearchValue]);
 }

package/es/hooks/useSelectTriggerControl.d.ts

@@ -1 +1 @@
-export default function useSelectTriggerControl(elements: () => (HTMLElement | undefined)[], open: boolean, triggerOpen: (open: boolean) => void, customizedTrigger: boolean): void;
+export default function useSelectTriggerControl(elements: () => (HTMLElement | SVGElement | undefined)[], open: boolean, triggerOpen: (open: boolean) => void, customizedTrigger: boolean): void;

package/es/hooks/useSelectTriggerControl.js

@@ -1,27 +1,22 @@
 import * as React from 'react';
+import { useEvent } from '@rc-component/util';
 export default function useSelectTriggerControl(elements, open, triggerOpen, customizedTrigger) {
-  const propsRef = React.useRef(null);
-  propsRef.current = {
-    open,
-    triggerOpen,
-    customizedTrigger
-  };
-  React.useEffect(() => {
-    function onGlobalMouseDown(event) {
-      // If trigger is customized, Trigger will take control of popupVisible
-      if (propsRef.current?.customizedTrigger) {
-        return;
-      }
-      let target = event.target;
-      if (target.shadowRoot && event.composed) {
-        target = event.composedPath()[0] || target;
-      }
-      if (propsRef.current.open && elements().filter(element => element).every(element => !element.contains(target) && element !== target)) {
-        // Should trigger close
-        propsRef.current.triggerOpen(false);
-      }
+  const onGlobalMouseDown = useEvent(event => {
+    // If trigger is customized, Trigger will take control of popupVisible
+    if (customizedTrigger) {
+      return;
+    }
+    let target = event.target;
+    if (target.shadowRoot && event.composed) {
+      target = event.composedPath()[0] || target;
     }
+    if (open && elements().filter(element => element).every(element => !element.contains(target) && element !== target)) {
+      // Should trigger close
+      triggerOpen(false);
+    }
+  });
+  React.useEffect(() => {
     window.addEventListener('mousedown', onGlobalMouseDown);
     return () => window.removeEventListener('mousedown', onGlobalMouseDown);
-  }, []);
+  }, [onGlobalMouseDown]);
 }

package/es/utils/keyUtil.js

@@ -10,6 +10,10 @@ export function isValidateOpenKey(currentKeyCode) {
     ![
     // System function button
     KeyCode.ESC, KeyCode.SHIFT, KeyCode.BACKSPACE, KeyCode.TAB, KeyCode.WIN_KEY, KeyCode.ALT, KeyCode.META, KeyCode.WIN_KEY_RIGHT, KeyCode.CTRL, KeyCode.SEMICOLON, KeyCode.EQUALS, KeyCode.CAPS_LOCK, KeyCode.CONTEXT_MENU,
+    // Arrow keys - should not trigger open when navigating in input
+    KeyCode.UP,
+    // KeyCode.DOWN,
+    KeyCode.LEFT, KeyCode.RIGHT,
     // F1-F12
     KeyCode.F1, KeyCode.F2, KeyCode.F3, KeyCode.F4, KeyCode.F5, KeyCode.F6, KeyCode.F7, KeyCode.F8, KeyCode.F9, KeyCode.F10, KeyCode.F11, KeyCode.F12].includes(currentKeyCode)
   );

package/lib/BaseSelect/index.d.ts

@@ -2,7 +2,15 @@ import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/int
 import type { ScrollConfig, ScrollTo } from 'rc-virtual-list/lib/List';
 import * as React from 'react';
 import type { DisplayInfoType, DisplayValueType, Mode, Placement, RawValueType, RenderDOMFunc, RenderNode } from '../interface';
-export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input';
+import type { ComponentsConfig } from '../hooks/useComponents';
+export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input' | 'clear';
+/**
+ * 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 type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType, };
 export interface RefOptionListProps {
     onKeyDown: React.KeyboardEventHandler;
@@ -84,15 +92,17 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
     maxTagPlaceholder?: React.ReactNode | ((omittedValues: DisplayValueType[]) => React.ReactNode);
     tokenSeparators?: string[];
     allowClear?: boolean | {
-        clearIcon?: RenderNode;
+        clearIcon?: React.ReactNode;
     };
     prefix?: React.ReactNode;
+    /** @deprecated Please use `suffix` instead. */
     suffixIcon?: RenderNode;
+    suffix?: RenderNode;
     /**
      * Clear all icon
      * @deprecated Please use `allowClear` instead
      **/
-    clearIcon?: RenderNode;
+    clearIcon?: React.ReactNode;
     /** Selector remove icon */
     removeIcon?: RenderNode;
     animation?: string;
@@ -116,6 +126,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    components?: ComponentsConfig;
 }
 export declare const isMultiple: (mode: Mode) => boolean;
 declare const BaseSelect: React.ForwardRefExoticComponent<BaseSelectProps & React.RefAttributes<BaseSelectRef>>;