chore: replace components

Author: zombieJ

src/BaseSelect/index.tsx

@@ -1,7 +1,5 @@
 import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface';
 import { clsx } from 'clsx';
-import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
-import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
 import isMobile from '@rc-component/util/lib/isMobile';
 import { useComposeRef } from '@rc-component/util/lib/ref';
 import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
@@ -10,7 +8,6 @@ import * as React from 'react';
 import { useAllowClear } from '../hooks/useAllowClear';
 import { BaseSelectContext } from '../hooks/useBaseProps';
 import type { BaseSelectContextProps } from '../hooks/useBaseProps';
-import useDelayReset from '../hooks/useDelayReset';
 import useLock from '../hooks/useLock';
 import useSelectTriggerControl from '../hooks/useSelectTriggerControl';
 import useComponents, { type ComponentsConfig } from '../hooks/useComponents';
@@ -24,14 +21,13 @@ import type {
   RenderNode,
 } from '../interface';
 import type { RefSelectorProps } from '../Selector';
-import Selector from '../Selector';
 import type { RefTriggerProps } from '../SelectTrigger';
 import SelectTrigger from '../SelectTrigger';
-import TransBtn from '../TransBtn';
 import { getSeparatedContent, isValidCount } from '../utils/valueUtil';
 import Polite from './Polite';
 import useOpen from '../hooks/useOpen';
 import { useEvent } from '@rc-component/util';
+import type { SelectInputRef } from '../SelectInput';
 export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input' | 'clear';
 
 /**
@@ -347,7 +343,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   }, []);
 
   // ============================== Refs ==============================
-  const containerRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<SelectInputRef>(null);
   const triggerRef = React.useRef<RefTriggerProps>(null);
   const selectorRef = React.useRef<RefSelectorProps>(null);
   const listRef = React.useRef<RefOptionListProps>(null);

src/SelectInput/Input.tsx

@@ -34,8 +34,16 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     autoComplete,
     ...restProps
   } = props;
-  const { prefixCls, mode, onSearch, onSearchSubmit, onInputBlur, autoFocus, tokenWithEnter } =
-    useSelectInputContext();
+  const {
+    prefixCls,
+    mode,
+    onSearch,
+    onSearchSubmit,
+    onInputBlur,
+    autoFocus,
+    tokenWithEnter,
+    components: { input: InputComponent },
+  } = useSelectInputContext();
   const { id, classNames, styles, open, activeDescendantId, role, disabled } = useBaseProps() || {};
 
   const inputCls = clsx(`${prefixCls}-input`, classNames?.input, className);
@@ -144,7 +152,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
 
   // ============================= Render =============================
   return (
-    <input
+    <InputComponent
       id={id}
       type={mode === 'combobox' ? 'text' : 'search'}
       {...restProps}

src/SelectInput/index.tsx

@@ -3,6 +3,13 @@ import Affix from './Affix';
 import SelectContent from './Content';
 import SelectInputContext from './context';
 import type { DisplayValueType, Mode } from '../interface';
+import useBaseProps from '../hooks/useBaseProps';
+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 { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
 
 export interface SelectInputRef {
   focus: (options?: FocusOptions) => void;
@@ -36,13 +43,8 @@ export interface SelectInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   className?: string;
   style?: React.CSSProperties;
   focused?: boolean;
-  [key: string]: any;
+  components: FilledComponentsConfig;
 }
-import useBaseProps from '../hooks/useBaseProps';
-import { omit, useEvent } from '@rc-component/util';
-import KeyCode from '@rc-component/util/lib/KeyCode';
-import { isValidateOpenKey } from '../utils/keyUtil';
-import clsx from 'clsx';
 
 const DEFAULT_OMIT_PROPS = [
   'value',
@@ -172,7 +174,9 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
   // ====================== Open ======================
   const onInternalMouseDown: SelectInputProps['onMouseDown'] = useEvent((event) => {
     if (!disabled) {
-      event.preventDefault();
+      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)
@@ -181,13 +185,6 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
       if (!(event.nativeEvent as any)._select_lazy) {
         inputRef.current?.focus();
 
-        // Clear search value if autoClearSearchValue is not false when closing
-        if ((mode !== 'combobox' && (!showSearch || shouldPreventClose)) || !triggerOpen) {
-          if (triggerOpen && autoClearSearchValue !== false) {
-            onSearch?.('', true, false);
-          }
-        }
-
         // Only toggle open if we should not prevent close
         if (!shouldPreventClose) {
           toggleOpen();

src/hooks/useComponents.ts

@@ -1,20 +1,17 @@
 import * as React from 'react';
-import SelectInput, { type SelectInputProps } from '../SelectInput';
+import SelectInput, { type SelectInputRef, type SelectInputProps } from '../SelectInput';
 
 export interface ComponentsConfig {
   root?: React.ComponentType<any> | string;
-  input?:
-    | React.ComponentType<
-        | React.TextareaHTMLAttributes<HTMLTextAreaElement>
-        | React.InputHTMLAttributes<HTMLInputElement>
-      >
-    | string;
+  input?: React.ComponentType<any> | string;
 }
 
 export interface FilledComponentsConfig {
-  root: React.ComponentType<SelectInputProps>;
-  input: React.ComponentType<
-    React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.InputHTMLAttributes<HTMLInputElement>
+  root: React.ForwardRefExoticComponent<SelectInputProps & React.RefAttributes<SelectInputRef>>;
+  input: React.ForwardRefExoticComponent<
+    | React.TextareaHTMLAttributes<HTMLTextAreaElement>
+    | (React.InputHTMLAttributes<HTMLInputElement> &
+        React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>)
   >;
 }
 

tests/Multiple.test.tsx

@@ -678,7 +678,7 @@ describe('Select.Multiple', () => {
       const { container } = render(
         <Select mode="multiple" open={false} showSearch={true} searchValue="test" />,
       );
-      expect(container.querySelector('input').value).toBe('');
+      expect(container.querySelector('input')).toHaveValue('');
     });
     it('search value should show when autoClearSearchValue is false', () => {
       const { container } = render(
@@ -690,7 +690,7 @@ describe('Select.Multiple', () => {
           searchValue="test"
         />,
       );
-      expect(container.querySelector('input').value).toBe('test');
+      expect(container.querySelector('input')).toHaveValue('test');
     });
     it('search value should no clear when autoClearSearchValue is false', () => {
       const { container } = render(
@@ -704,15 +704,15 @@ describe('Select.Multiple', () => {
 
       toggleOpen(container);
       toggleOpen(container);
-      expect(container.querySelector('input').value).toBe('test');
+      expect(container.querySelector('input')).toHaveValue('test');
     });
     it('search value should clear when autoClearSearchValue is true', () => {
       const { container } = render(
         <Select mode="multiple" autoClearSearchValue={true} showSearch={true} searchValue="test" />,
       );
       toggleOpen(container);
       toggleOpen(container);
-      expect(container.querySelector('input').value).toBe('');
+      expect(container.querySelector('input')).toHaveValue('');
     });
   });
 });