chore: support components

Author: zombieJ

src/BaseSelect/index.tsx

@@ -10,7 +10,6 @@ import { BaseSelectContext } from '../hooks/useBaseProps';
 import type { BaseSelectContextProps } from '../hooks/useBaseProps';
 import useLock from '../hooks/useLock';
 import useSelectTriggerControl from '../hooks/useSelectTriggerControl';
-import useComponents, { type ComponentsConfig } from '../hooks/useComponents';
 import type {
   DisplayInfoType,
   DisplayValueType,
@@ -28,6 +27,8 @@ import Polite from './Polite';
 import useOpen from '../hooks/useOpen';
 import { useEvent } from '@rc-component/util';
 import type { SelectInputRef } from '../SelectInput';
+import SelectInput from '../SelectInput';
+import type { ComponentsConfig } from '../hooks/useComponents';
 export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input' | 'clear';
 
 /**
@@ -312,7 +313,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     onMouseDown,
 
     // Components
-    components,
+    components = {},
 
     // Rest Props
     ...restProps
@@ -904,11 +905,8 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   //   );
   // }
 
-  const mergedComponents = useComponents(components);
-  const { root: RootComponent } = mergedComponents;
-
   renderNode = (
-    <RootComponent
+    <SelectInput
       {...restProps}
       // Ref
       ref={containerRef}
@@ -943,7 +941,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       // Open
       onMouseDown={onInternalMouseDown}
       // Components
-      components={mergedComponents}
+      components={components}
     />
   );
 

src/SelectInput/Input.tsx

@@ -42,7 +42,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     onInputBlur,
     autoFocus,
     tokenWithEnter,
-    components: { input: InputComponent },
+    components: { input: InputComponent = 'input' },
   } = useSelectInputContext();
   const { id, classNames, styles, open, activeDescendantId, role, disabled } = useBaseProps() || {};
 

src/SelectInput/index.tsx

@@ -8,7 +8,7 @@ import { omit, useEvent } from '@rc-component/util';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import { isValidateOpenKey } from '../utils/keyUtil';
 import clsx from 'clsx';
-import type { FilledComponentsConfig } from '../hooks/useComponents';
+import type { ComponentsConfig } from '../hooks/useComponents';
 import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
 
 export interface SelectInputRef {
@@ -43,7 +43,7 @@ export interface SelectInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   className?: string;
   style?: React.CSSProperties;
   focused?: boolean;
-  components: FilledComponentsConfig;
+  components: ComponentsConfig;
 }
 
 const DEFAULT_OMIT_PROPS = [
@@ -104,19 +104,14 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
     // Token handling
     tokenWithEnter,
 
+    // Components
+    components,
+
     ...restProps
   } = props;
 
-  const {
-    triggerOpen,
-    toggleOpen,
-    showSearch,
-    disabled,
-    loading,
-    classNames,
-    styles,
-    autoClearSearchValue,
-  } = useBaseProps();
+  const { triggerOpen, toggleOpen, showSearch, disabled, loading, classNames, styles } =
+    useBaseProps();
 
   const rootRef = React.useRef<HTMLDivElement>(null);
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -161,10 +156,10 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
     () => ({
       focus: (options?: FocusOptions) => {
         // Focus the inner input if available, otherwise fall back to root div.
-        inputRef.current.focus?.(options);
+        (inputRef.current || rootRef.current).focus?.(options);
       },
       blur: () => {
-        inputRef.current.blur?.();
+        (inputRef.current || rootRef.current).blur?.();
       },
       nativeElement: rootRef.current,
     }),
@@ -203,6 +198,9 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
     onBlur?.(event);
   };
 
+  // =================== Components ===================
+  const { root: RootComponent } = components;
+
   // ===================== Render =====================
   const domProps = omit(restProps, DEFAULT_OMIT_PROPS);
 
@@ -212,6 +210,31 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
     onInputKeyDown: onInternalInputKeyDown,
   };
 
+  const sharedProps = {
+    // Open
+    onMouseDown: onInternalMouseDown,
+    onBlur: onInternalBlur,
+  } as const;
+
+  if (RootComponent) {
+    if (React.isValidElement<any>(RootComponent)) {
+      const oriProps = RootComponent.props || {};
+      return React.cloneElement(RootComponent, {
+        ...sharedProps,
+        onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {
+          sharedProps.onMouseDown(e);
+          oriProps.onMouseDown?.(e);
+        },
+        onBlur: (e: React.FocusEvent<HTMLDivElement>) => {
+          sharedProps.onBlur(e);
+          oriProps.onBlur?.(e);
+        },
+        ref: rootRef,
+      });
+    }
+    return <RootComponent {...sharedProps} ref={rootRef} />;
+  }
+
   return (
     <SelectInputContext.Provider value={contextValue}>
       <div
@@ -220,9 +243,8 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
         ref={rootRef}
         className={className}
         style={style}
-        // Open
-        onMouseDown={onInternalMouseDown}
-        onBlur={onInternalBlur}
+        // Shared Props
+        {...sharedProps}
       >
         {/* Prefix */}
         <Affix className={clsx(`${prefixCls}-prefix`, classNames?.prefix)} style={styles?.prefix}>

src/hooks/useComponents.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import SelectInput, { type SelectInputRef, type SelectInputProps } from '../SelectInput';
+import type { SelectInputRef, SelectInputProps } from '../SelectInput';
 
 export interface ComponentsConfig {
-  root?: React.ComponentType<any> | string;
+  root?: React.ComponentType<any> | string | React.ReactElement;
   input?: React.ComponentType<any> | string;
 }
 
@@ -17,7 +17,7 @@ export interface FilledComponentsConfig {
 
 export default function useComponents(components?: ComponentsConfig) {
   return React.useMemo(() => {
-    const { root: RootComponent = SelectInput, input: InputComponent = 'input' } = components || {};
+    const { root: RootComponent, input: InputComponent } = components || {};
 
     return { root: RootComponent, input: InputComponent } as FilledComponentsConfig;
   }, [components]);