Merge branch 'develop' into rylan/fix/form/clone

Author: RylanBot

packages/common

@@ -1,5 +1,6 @@
 import { isString } from 'lodash-es';
 import { getCssVarsValue } from './style';
+import type { AttachNode } from '../common';
 
 // 用于判断是否可使用 dom
 export const canUseDocument = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
@@ -13,7 +14,7 @@ export const canUseDocument = !!(typeof window !== 'undefined' && window.documen
  */
 export const isWindow = (val: unknown): val is Window => val === window;
 
-export const getAttach = (node: any): HTMLElement => {
+export const getAttach = (node: AttachNode): HTMLElement => {
   const attachNode = typeof node === 'function' ? node() : node;
   if (!attachNode) {
     return document.body;

packages/components/_util/composeRefs.ts

@@ -2,9 +2,14 @@ import { canUseDocument } from './dom';
 
 export const on = ((): any => {
   if (canUseDocument && document.addEventListener) {
-    return (element: Node, event: string, handler: EventListenerOrEventListenerObject): any => {
+    return (
+      element: Node,
+      event: string,
+      handler: EventListenerOrEventListenerObject,
+      options?: AddEventListenerOptions,
+    ): any => {
       if (element && event && handler) {
-        element.addEventListener(event, handler, false);
+        element.addEventListener(event, handler, options ?? false);
       }
     };
   }
@@ -17,9 +22,14 @@ export const on = ((): any => {
 
 export const off = ((): any => {
   if (canUseDocument && document.removeEventListener) {
-    return (element: Node, event: string, handler: EventListenerOrEventListenerObject): any => {
+    return (
+      element: Node,
+      event: string,
+      handler: EventListenerOrEventListenerObject,
+      options?: EventListenerOptions,
+    ): any => {
       if (element && event) {
-        element.removeEventListener(event, handler, false);
+        element.removeEventListener(event, handler, options ?? false);
       }
     };
   }

packages/components/_util/dom.ts

@@ -38,6 +38,7 @@ export const supportRef = (nodeOrComponent: any): boolean => {
 // 获取 ref 中的 dom 元素
 export function getRefDom(domRef: React.RefObject<any>) {
   if (domRef.current && typeof domRef.current === 'object' && 'currentElement' in domRef.current) {
+    // 兼容 TD 部分组件的 ref 被 useImperativeHandle 覆盖，无法拿到实际 DOM 节点的情况
     return domRef.current.currentElement;
   }
   return domRef.current;
@@ -70,3 +71,17 @@ export const getNodeRef: <T = any>(node: React.ReactNode) => React.Ref<T> | null
   }
   return null;
 };
+
+export function composeRefs<T>(...refs: React.Ref<T>[]) {
+  return (instance: T) => {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const ref of refs) {
+      if (typeof ref === 'function') {
+        ref(instance);
+      } else if (ref) {
+        (ref as any).current = instance;
+      }
+    }
+  };
+}
+

packages/components/_util/listener.ts

@@ -16,7 +16,7 @@ import { useLocaleReceiver } from '../locale/LocalReceiver';
 import { TdAlertProps } from './type';
 import { StyledProps } from '../common';
 import { alertDefaultProps } from './defaultProps';
-import composeRefs from '../_util/composeRefs';
+import { composeRefs } from '../_util/ref';
 import useDefaultProps from '../hooks/useDefaultProps';
 
 const transitionTime = 200;

packages/components/_util/ref.ts

@@ -22,6 +22,8 @@ export interface AutoCompleteRef {
 
 const AutoComplete = forwardRef<AutoCompleteRef, AutoCompleteProps>((originalProps, ref) => {
   const props = useDefaultProps(originalProps, autoCompleteDefaultProps);
+  const readOnly = props.readOnly || props.readonly;
+
   const inputRef = useRef(null);
   const popupRef = useRef(null);
   const [tValue, setTValue] = useControlled(props, 'value', props.onChange);
@@ -104,7 +106,7 @@ const AutoComplete = forwardRef<AutoCompleteRef, AutoCompleteProps>((originalPro
   };
 
   const onInnerSelect: OptionsListProps['onSelect'] = (value, context) => {
-    if (props.readonly || props.disabled) return;
+    if (readOnly || props.disabled) return;
     setPopupVisible(false);
     setTValue(value, context);
     props.onSelect?.(value, context);
@@ -123,7 +125,7 @@ const AutoComplete = forwardRef<AutoCompleteRef, AutoCompleteProps>((originalPro
       placeholder={props.placeholder ?? global.placeholder}
       tips={props.tips}
       status={props.status}
-      readonly={props.readonly}
+      readOnly={readOnly}
       disabled={props.disabled}
       clearable={props.clearable}
       autofocus={props.autofocus}

packages/components/alert/Alert.tsx

@@ -173,17 +173,17 @@ describe('AutoComplete Component', () => {
     expect(customClassNameDom).toBeTruthy();
   });
 
-  it('props.readonly works fine', () => {
+  it('props.readOnly works fine', () => {
     // readonly default value is
     const wrapper1 = getNormalAutoCompleteMount(AutoComplete);
     const container1 = wrapper1.container.querySelector('.t-input');
     expect(container1.querySelector(`.${'t-is-readonly'}`)).toBeFalsy();
     // readonly = true
-    const wrapper2 = getNormalAutoCompleteMount(AutoComplete, { readonly: true });
+    const wrapper2 = getNormalAutoCompleteMount(AutoComplete, { readOnly: true });
     const container2 = wrapper2.container.querySelector('.t-input');
     expect(container2).toHaveClass('t-is-readonly');
     // readonly = false
-    const wrapper3 = getNormalAutoCompleteMount(AutoComplete, { readonly: false });
+    const wrapper3 = getNormalAutoCompleteMount(AutoComplete, { readOnly: false });
     const container3 = wrapper3.container.querySelector('.t-input');
     expect(container3.querySelector(`.${'t-is-readonly'}`)).toBeFalsy();
   });

packages/components/auto-complete/AutoComplete.tsx

@@ -20,7 +20,7 @@ const AutoCompleteStatus = () => {
         value={value}
         options={options}
         onChange={setValue}
-        readonly
+        readOnly
         tips="这是只读状态"
         placeholder="请输入关键词搜索"
       />

packages/components/auto-complete/__tests__/vitest-auto-complete.test.jsx

@@ -22,9 +22,9 @@ options | Array | - | Typescript: `Array<T>` | N
 panelBottomContent | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 panelTopContent | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 placeholder | String | undefined | \- | N
-popupProps | Object | - | Typescript: `PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/auto-complete/type.ts) | N
-readonly | Boolean | - | \- | N
-size | String | medium | options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/auto-complete/type.ts) | N
+readOnly | Boolean | - | \- | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 status | String | default | options: default/success/warning/error | N
 textareaProps | Object | - | Typescript: `TextareaProps`，[Textarea API Documents](./textarea?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/auto-complete/type.ts) | N
 tips | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N