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

package/lib/SelectInput/Input.js

@@ -0,0 +1,223 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _clsx = require("clsx");
+var _context = require("./context");
+var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
+var _useBaseProps = _interopRequireDefault(require("../hooks/useBaseProps"));
+var _ref = require("@rc-component/util/lib/ref");
+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; }
+const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    onChange,
+    onKeyDown,
+    onBlur,
+    style,
+    syncWidth,
+    value,
+    className,
+    autoComplete,
+    ...restProps
+  } = props;
+  const {
+    prefixCls,
+    mode,
+    onSearch,
+    onSearchSubmit,
+    onInputBlur,
+    autoFocus,
+    tokenWithEnter,
+    components: {
+      input: InputComponent = 'input'
+    }
+  } = (0, _context.useSelectInputContext)();
+  const {
+    id,
+    classNames,
+    styles,
+    open,
+    activeDescendantId,
+    role,
+    disabled
+  } = (0, _useBaseProps.default)() || {};
+  const inputCls = (0, _clsx.clsx)(`${prefixCls}-input`, classNames?.input, className);
+
+  // Used to handle input method composition status
+  const compositionStatusRef = React.useRef(false);
+
+  // Used to handle paste content, similar to original Selector implementation
+  const pastedTextRef = React.useRef(null);
+
+  // ============================== Refs ==============================
+  const inputRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => inputRef.current);
+
+  // ============================== Data ==============================
+  // Handle input changes
+  const handleChange = event => {
+    let {
+      value: nextVal
+    } = event.target;
+
+    // Handle pasted text with tokenWithEnter, similar to original Selector implementation
+    if (tokenWithEnter && pastedTextRef.current && /[\r\n]/.test(pastedTextRef.current)) {
+      // CRLF will be treated as a single space for input element
+      const replacedText = pastedTextRef.current.replace(/[\r\n]+$/, '').replace(/\r\n/g, ' ').replace(/[\r\n]/g, ' ');
+      nextVal = nextVal.replace(replacedText, pastedTextRef.current);
+    }
+
+    // Reset pasted text reference
+    pastedTextRef.current = null;
+
+    // Call onSearch callback
+    if (onSearch) {
+      onSearch(nextVal, true, compositionStatusRef.current);
+    }
+
+    // Call original onChange callback
+    onChange?.(event);
+  };
+
+  // ============================ Keyboard ============================
+  // Handle keyboard events
+  const handleKeyDown = event => {
+    const {
+      key
+    } = event;
+    const {
+      value: nextVal
+    } = event.currentTarget;
+
+    // Handle Enter key submission - referencing Selector implementation
+    if (key === 'Enter' && mode === 'tags' && !compositionStatusRef.current && onSearchSubmit) {
+      onSearchSubmit(nextVal);
+    }
+
+    // Call original onKeyDown callback
+    onKeyDown?.(event);
+  };
+
+  // Handle blur events
+  const handleBlur = event => {
+    // Call onInputBlur callback
+    onInputBlur?.();
+
+    // Call original onBlur callback
+    onBlur?.(event);
+  };
+
+  // Handle input method composition start
+  const handleCompositionStart = () => {
+    compositionStatusRef.current = true;
+  };
+
+  // Handle input method composition end
+  const handleCompositionEnd = event => {
+    compositionStatusRef.current = false;
+
+    // Trigger search when input method composition ends, similar to original Selector
+    if (mode !== 'combobox') {
+      const {
+        value: nextVal
+      } = event.currentTarget;
+      onSearch?.(nextVal, true, false);
+    }
+  };
+
+  // Handle paste events to track pasted content
+  const handlePaste = event => {
+    const {
+      clipboardData
+    } = event;
+    const pastedValue = clipboardData?.getData('text');
+    pastedTextRef.current = pastedValue || '';
+  };
+
+  // ============================= Width ==============================
+  const [widthCssVar, setWidthCssVar] = React.useState(undefined);
+
+  // When syncWidth is enabled, adjust input width based on content
+  (0, _useLayoutEffect.default)(() => {
+    const input = inputRef.current;
+    if (syncWidth && input) {
+      input.style.width = '0px';
+      const scrollWidth = input.scrollWidth;
+      setWidthCssVar(scrollWidth);
+
+      // Reset input style
+      input.style.width = '';
+    }
+  }, [syncWidth, value]);
+
+  // ============================= Render =============================
+  // Extract shared input props
+  const sharedInputProps = {
+    id,
+    type: mode === 'combobox' ? 'text' : 'search',
+    ...restProps,
+    ref: inputRef,
+    style: {
+      ...styles?.input,
+      ...style,
+      '--select-input-width': widthCssVar
+    },
+    autoFocus,
+    autoComplete: autoComplete || 'off',
+    className: inputCls,
+    disabled,
+    value: value || '',
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onBlur: handleBlur,
+    onPaste: handlePaste,
+    onCompositionStart: handleCompositionStart,
+    onCompositionEnd: handleCompositionEnd,
+    // Accessibility attributes
+    role: role || 'combobox',
+    'aria-expanded': open || false,
+    'aria-haspopup': 'listbox',
+    'aria-owns': `${id}_list`,
+    'aria-autocomplete': 'list',
+    'aria-controls': `${id}_list`,
+    'aria-activedescendant': open ? activeDescendantId : undefined
+  };
+
+  // Handle different InputComponent types
+  if ( /*#__PURE__*/React.isValidElement(InputComponent)) {
+    // If InputComponent is a ReactElement, use cloneElement with merged props
+    const existingProps = InputComponent.props || {};
+
+    // Start with shared props as base
+    const mergedProps = {
+      ...sharedInputProps,
+      ...existingProps
+    };
+
+    // Batch update function calls
+    Object.keys(existingProps).forEach(key => {
+      const existingValue = existingProps[key];
+      if (typeof existingValue === 'function') {
+        // Merge event handlers
+        mergedProps[key] = (...args) => {
+          existingValue(...args);
+          sharedInputProps[key]?.(...args);
+        };
+      }
+    });
+
+    // Update ref
+    mergedProps.ref = (0, _ref.composeRef)(InputComponent.ref, sharedInputProps.ref);
+    return /*#__PURE__*/React.cloneElement(InputComponent, mergedProps);
+  }
+
+  // If InputComponent is a component type, render normally
+  const Component = InputComponent;
+  return /*#__PURE__*/React.createElement(Component, sharedInputProps);
+});
+var _default = exports.default = Input;

package/lib/SelectInput/context.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { SelectInputProps } from '.';
+export type ContentContextProps = SelectInputProps;
+declare const SelectInputContext: React.Context<SelectInputProps>;
+export declare function useSelectInputContext(): SelectInputProps;
+export default SelectInputContext;

package/lib/SelectInput/context.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useSelectInputContext = useSelectInputContext;
+var React = _interopRequireWildcard(require("react"));
+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; }
+const SelectInputContext = /*#__PURE__*/React.createContext(null);
+function useSelectInputContext() {
+  return React.useContext(SelectInputContext);
+}
+var _default = exports.default = SelectInputContext;

package/lib/SelectInput/index.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import type { DisplayValueType, Mode, RenderNode } from '../interface';
+import type { ComponentsConfig } from '../hooks/useComponents';
+export interface SelectInputRef {
+    focus: (options?: FocusOptions) => void;
+    blur: () => void;
+    nativeElement: HTMLDivElement;
+}
+export interface SelectInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'prefix'> {
+    prefixCls: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    clearIcon?: React.ReactNode;
+    removeIcon?: RenderNode;
+    multiple?: boolean;
+    displayValues: DisplayValueType[];
+    placeholder?: React.ReactNode;
+    searchValue?: string;
+    activeValue?: string;
+    mode?: Mode;
+    autoClearSearchValue?: boolean;
+    onSearch?: (searchText: string, fromTyping: boolean, isCompositing: boolean) => void;
+    onSearchSubmit?: (searchText: string) => void;
+    onInputBlur?: () => void;
+    onClearMouseDown?: React.MouseEventHandler<HTMLElement>;
+    onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onSelectorRemove?: (value: DisplayValueType) => void;
+    maxLength?: number;
+    autoFocus?: boolean;
+    /** Check if `tokenSeparators` contains `\n` or `\r\n` */
+    tokenWithEnter?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    focused?: boolean;
+    components: ComponentsConfig;
+    children?: React.ReactElement;
+}
+declare const _default: React.ForwardRefExoticComponent<SelectInputProps & React.RefAttributes<SelectInputRef>>;
+export default _default;

package/lib/SelectInput/index.js

@@ -0,0 +1,198 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Affix = _interopRequireDefault(require("./Affix"));
+var _Content = _interopRequireDefault(require("./Content"));
+var _context = _interopRequireDefault(require("./context"));
+var _useBaseProps = _interopRequireDefault(require("../hooks/useBaseProps"));
+var _util = require("@rc-component/util");
+var _KeyCode = _interopRequireDefault(require("@rc-component/util/lib/KeyCode"));
+var _keyUtil = require("../utils/keyUtil");
+var _clsx = require("clsx");
+var _findDOMNode = require("@rc-component/util/lib/Dom/findDOMNode");
+var _ref = require("@rc-component/util/lib/ref");
+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 _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', 'maxTagCount', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'onPopupScroll', 'tabIndex', 'activeValue', 'onSelectorRemove', 'focused'];
+var _default = exports.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
+  } = (0, _useBaseProps.default)();
+  const rootRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+
+  // Handle keyboard events similar to original Selector
+  const onInternalInputKeyDown = (0, _util.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.default.UP || which === _KeyCode.default.DOWN)) {
+      event.preventDefault();
+    }
+
+    // Call the original onInputKeyDown callback
+    if (onInputKeyDown) {
+      onInputKeyDown(event);
+    }
+
+    // Move within the text box for TextArea
+    if (isTextAreaElement && !triggerOpen && ~[_KeyCode.default.UP, _KeyCode.default.DOWN, _KeyCode.default.LEFT, _KeyCode.default.RIGHT].indexOf(which)) {
+      return;
+    }
+
+    // Open dropdown when a valid open key is pressed
+    if ((0, _keyUtil.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 = (0, _util.useEvent)(event => {
+    if (!disabled) {
+      if (event.target !== (0, _findDOMNode.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 = (0, _util.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: (0, _ref.composeRef)(RootComponent.ref, rootRef)
+      });
+    }
+    return /*#__PURE__*/React.createElement(RootComponent, _extends({}, domProps, {
+      ref: rootRef
+    }));
+  }
+  return /*#__PURE__*/React.createElement(_context.default.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.default, {
+    className: (0, _clsx.clsx)(`${prefixCls}-prefix`, classNames?.prefix),
+    style: styles?.prefix
+  }, prefix), /*#__PURE__*/React.createElement(_Content.default, {
+    ref: inputRef
+  }), /*#__PURE__*/React.createElement(_Affix.default, {
+    className: (0, _clsx.clsx)(`${prefixCls}-suffix`, {
+      [`${prefixCls}-suffix-loading`]: loading
+    }, classNames?.suffix),
+    style: styles?.suffix
+  }, suffix), clearIcon && /*#__PURE__*/React.createElement(_Affix.default, {
+    className: (0, _clsx.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/lib/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/lib/SelectTrigger.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _trigger = _interopRequireDefault(require("@rc-component/trigger"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var React = _interopRequireWildcard(require("react"));
 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; }
@@ -74,6 +74,7 @@ const SelectTrigger = (props, ref) => {
     empty,
     onPopupVisibleChange,
     onPopupMouseEnter,
+    onPopupMouseDown,
     ...restProps
   } = props;
 
@@ -124,14 +125,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: (0, _classnames.default)(popupClassName, {
+    popupClassName: (0, _clsx.clsx)(popupClassName, {
       [`${popupPrefixCls}-empty`]: empty
     }),
     popupStyle: mergedPopupStyle,

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

@@ -5,10 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _clsx = require("clsx");
 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; }
+/**
+ * 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,
@@ -35,7 +44,7 @@ const TransBtn = props => {
     onClick: onClick,
     "aria-hidden": true
   }, icon !== undefined ? icon : /*#__PURE__*/React.createElement("span", {
-    className: (0, _classnames.default)(className.split(/\s+/).map(cls => `${cls}-icon`))
+    className: (0, _clsx.clsx)(className.split(/\s+/).map(cls => `${cls}-icon`))
   }, children));
 };
 var _default = exports.default = TransBtn;

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

@@ -4,31 +4,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAllowClear = void 0;
-var _TransBtn = _interopRequireDefault(require("../TransBtn"));
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const useAllowClear = (prefixCls, onClearMouseDown, displayValues, allowClear, clearIcon, disabled = false, mergedSearchValue, mode) => {
-  const mergedClearIcon = _react.default.useMemo(() => {
-    if (typeof allowClear === 'object') {
-      return allowClear.clearIcon;
+var _react = require("react");
+const useAllowClear = (prefixCls, displayValues, allowClear, clearIcon, disabled = false, mergedSearchValue, mode) => {
+  // Convert boolean to object first
+  const allowClearConfig = (0, _react.useMemo)(() => {
+    if (typeof allowClear === 'boolean') {
+      return {
+        allowClear
+      };
     }
-    if (clearIcon) {
-      return clearIcon;
+    if (allowClear && typeof allowClear === 'object') {
+      return allowClear;
     }
-  }, [allowClear, clearIcon]);
-  const mergedAllowClear = _react.default.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.default.createElement(_TransBtn.default, {
-      className: `${prefixCls}-clear`,
-      onMouseDown: onClearMouseDown,
-      customizeIcon: mergedClearIcon
-    }, "\xD7")
-  };
+    return {
+      allowClear: false
+    };
+  }, [allowClear]);
+  return (0, _react.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]);
 };
 exports.useAllowClear = useAllowClear;

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