Repository: react-component/dialog
Pull request #475: update destroyOnClose to destroyOnHidden
Author: login: li-jia-nan
Created: 2025-05-18T03:23:35Z | Merged: 2025-05-19T06:53:37Z



<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **文档**
  - 将 API 文档和示例中的 `destroyOnClose` 属性重命名为 `destroyOnHidden`，并更新相关描述和示例代码。
  - 优化 README.md 表格格式，调整部分空白和排版。

- **新特性**
  - `DialogWrap` 组件属性由 `destroyOnClose` 更名为 `destroyOnHidden`，默认值为 `false`，语义更清晰。

- **测试**
  - 测试用例同步更新为 `destroyOnHidden`，并完善类型声明。

- **杂项**
  - 升级 React 及 React DOM 的 TypeScript 类型定义至 19.x，新增 Node.js 类型依赖。
  - 优化部分类型声明和 ref 初始化，提升类型安全性。
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/.gitignore b/.gitignore
index 41ad2dce..a3cbef29 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,6 +34,7 @@ coverage
 /android/
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 .storybook
 .doc
 
@@ -48,4 +49,4 @@ package-lock.json
 .dumi/tmp
 .dumi/tmp-production
 
-bun.lockb
\ No newline at end of file
+bun.lockb
diff --git a/README.md b/README.md
index 6d45b458..087792a5 100644
--- a/README.md
+++ b/README.md
@@ -49,34 +49,34 @@ ReactDOM.render(
 
 ### rc-dialog
 
-| Name                   | Type                           | Default   | Description                                                                     | Version |
-| ---------------------- | ------------------------------ | --------- | ------------------------------------------------------------------------------- | ------- |
-| prefixCls              | String                         | rc-dialog | The dialog dom node's prefixCls                                                 |         |
-| className              | String                         |           | additional className for dialog                                                 |         |
-| classNames             | { header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string;  } |           | pass className to target area |         |
-| styles                 | { header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties;  } |    | pass styles to target area |         |
-| style                  | Object                         | {}        | Root style for dialog element.Such as width, height                             |         |
-| zIndex                 | Number                         |           |                                                                                 |         |
-| visible                | Boolean                        | false     | current dialog's visible status                                                 |         |
-| animation              | String                         |           | part of dialog animation css class name                                         |         |
-| maskAnimation          | String                         |           | part of dialog's mask animation css class name                                  |         |
-| transitionName         | String                         |           | dialog animation css class name                                                 |         |
-| maskTransitionName     | String                         |           | mask animation css class name                                                   |         |
-| title                  | String\|React.Element          |           | Title of the dialog                                                             |         |
-| footer                 | React.Element                  |           | footer of the dialog                                                            |         |
-| closable               | Boolean \| ({ closeIcon?: React.ReactNode; disabled?: boolean  } & React.AriaAttributes | true   | whether show close button |         |
-| mask                   | Boolean                        | true      | whether show mask                                                               |         |
-| maskClosable           | Boolean                        | true      | whether click mask to close                                                     |         |
-| keyboard               | Boolean                        | true      | whether support press esc to close                                              |         |
-| mousePosition          | {x:number,y:number}            |           | set pageX and pageY of current mouse(it will cause transform origin to be set). |         |
-| onClose                | function()                     |           | called when click close button or mask                                          |         |
-| afterClose             | function()                     |           | called when close animation end                                                 |         |
-| getContainer           | function(): HTMLElement        |           | to determine where Dialog will be mounted                                       |         |
-| destroyOnClose         | Boolean                        | false     | to unmount child compenents on onClose                                          |         |
-| closeIcon              | ReactNode                      |           | specific the close icon.                                                        |         |
-| forceRender            | Boolean                        | false     | Create dialog dom node before dialog first show                                 |         |
-| focusTriggerAfterClose | Boolean                        | true      | focus trigger element when dialog closed                                        |         |
-| modalRender            | (node: ReactNode) => ReactNode |           | Custom modal content render                                                     | 8.3.0   |
+| Name | Type | Default | Description | Version |
+| --- | --- | --- | --- | --- |
+| prefixCls | String | rc-dialog | The dialog dom node's prefixCls |  |
+| className | String |  | additional className for dialog |  |
+| classNames | { header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string; } |  | pass className to target area |  |
+| styles | { header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } |  | pass styles to target area |  |
+| style | Object | {} | Root style for dialog element.Such as width, height |  |
+| zIndex | Number |  |  |  |
+| visible | Boolean | false | current dialog's visible status |  |
+| animation | String |  | part of dialog animation css class name |  |
+| maskAnimation | String |  | part of dialog's mask animation css class name |  |
+| transitionName | String |  | dialog animation css class name |  |
+| maskTransitionName | String |  | mask animation css class name |  |
+| title | String\|React.Element |  | Title of the dialog |  |
+| footer | React.Element |  | footer of the dialog |  |
+| closable | Boolean \| ({ closeIcon?: React.ReactNode; disabled?: boolean } & React.AriaAttributes | true | whether show close button |  |
+| mask | Boolean | true | whether show mask |  |
+| maskClosable | Boolean | true | whether click mask to close |  |
+| keyboard | Boolean | true | whether support press esc to close |  |
+| mousePosition | {x:number,y:number} |  | set pageX and pageY of current mouse(it will cause transform origin to be set). |  |
+| onClose | function() |  | called when click close button or mask |  |
+| afterClose | function() |  | called when close animation end |  |
+| getContainer | function(): HTMLElement |  | to determine where Dialog will be mounted |  |
+| destroyOnHidden | Boolean | false | to unmount child compenents on onClose |  |
+| closeIcon | ReactNode |  | specific the close icon. |  |
+| forceRender | Boolean | false | Create dialog dom node before dialog first show |  |
+| focusTriggerAfterClose | Boolean | true | focus trigger element when dialog closed |  |
+| modalRender | (node: ReactNode) => ReactNode |  | Custom modal content render | 8.3.0 |
 
 ## Development
 
@@ -85,8 +85,6 @@ npm install
 npm start
 ```
 
-
-
 ## Test Case
 
 ```
@@ -102,7 +100,6 @@ npm run coverage
 
 open coverage/ dir
 
-
 ## License
 
 rc-dialog is released under the MIT license.
diff --git a/docs/examples/ant-design.tsx b/docs/examples/ant-design.tsx
index d1ffab74..f3376b90 100644
--- a/docs/examples/ant-design.tsx
+++ b/docs/examples/ant-design.tsx
@@ -31,7 +31,7 @@ const MyControl: React.FC = () => {
   const [visible2, setVisible2] = React.useState(false);
   const [visible3, setVisible3] = React.useState(false);
   const [width, setWidth] = React.useState(600);
-  const [destroyOnClose, setDestroyOnClose] = React.useState(false);
+  const [destroyOnHidden, setDestroyOnHidden] = React.useState(false);
   const [center, setCenter] = React.useState(false);
   const [mousePosition, setMousePosition] = React.useState({ x: null, y: null });
   const [useIcon, setUseIcon] = React.useState(false);
@@ -60,8 +60,8 @@ const MyControl: React.FC = () => {
     setVisible3(false);
   };
 
-  const onDestroyOnCloseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setDestroyOnClose(e.target.checked);
+  const onDestroyOnHiddenChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setDestroyOnHidden(e.target.checked);
   };
 
   const onForceRenderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -97,7 +97,7 @@ const MyControl: React.FC = () => {
       style={style}
       title="dialog1"
       mousePosition={mousePosition}
-      destroyOnClose={destroyOnClose}
+      destroyOnHidden={destroyOnHidden}
       closeIcon={useIcon ? getSvg(clearPath, {}, true) : undefined}
       forceRender={forceRender}
       focusTriggerAfterClose={false}
@@ -210,8 +210,8 @@ const MyControl: React.FC = () => {
           </button>
           &nbsp;
           <label>
-            destroy on close:
-            <input type="checkbox" checked={destroyOnClose} onChange={onDestroyOnCloseChange} />
+            destroy on hidden:
+            <input type="checkbox" checked={destroyOnHidden} onChange={onDestroyOnHiddenChange} />
           </label>
           &nbsp;
           <label>
diff --git a/docs/examples/bootstrap.tsx b/docs/examples/bootstrap.tsx
index 8eada881..37feefba 100644
--- a/docs/examples/bootstrap.tsx
+++ b/docs/examples/bootstrap.tsx
@@ -11,7 +11,7 @@ const InnerRender: React.FC = () => {
 
 const MyControl: React.FC = () => {
   const [visible, setVisible] = React.useState(false);
-  const [destroyOnClose, setDestroyOnClose] = React.useState(false);
+  const [destroyOnHidden, setDestroyOnHidden] = React.useState(false);
 
   const onClick = () => {
     setVisible(true);
@@ -21,14 +21,14 @@ const MyControl: React.FC = () => {
     setVisible(false);
   };
 
-  const onDestroyOnCloseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setDestroyOnClose(e.target.checked);
+  const onDestroyOnHiddenChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setDestroyOnHidden(e.target.checked);
   };
 
   const dialog = (
     <Dialog
       visible={visible}
-      destroyOnClose={destroyOnClose}
+      destroyOnHidden={destroyOnHidden}
       animation="slide-fade"
       maskAnimation="fade"
       onClose={onClose}
@@ -120,8 +120,8 @@ const MyControl: React.FC = () => {
         </button>
         &nbsp;
         <label>
-          destroy on close:
-          <input type="checkbox" checked={destroyOnClose} onChange={onDestroyOnCloseChange} />
+          destroy on hidden:
+          <input type="checkbox" checked={destroyOnHidden} onChange={onDestroyOnHiddenChange} />
         </label>
       </p>
       {dialog}
diff --git a/package.json b/package.json
index d1d6575b..35eadb99 100644
--- a/package.json
+++ b/package.json
@@ -57,15 +57,16 @@
   },
   "devDependencies": {
     "@rc-component/drawer": "^1.0.0",
-    "@rc-component/select": "^1.0.0",
     "@rc-component/father-plugin": "^2.0.2",
     "@rc-component/np": "^1.0.3",
+    "@rc-component/select": "^1.0.0",
     "@testing-library/jest-dom": "^6.1.6",
     "@testing-library/react": "^13.0.0",
     "@types/jest": "^29.4.0",
     "@types/keyv": "3.1.4",
-    "@types/react": "^18.0.24",
-    "@types/react-dom": "^18.0.8",
+    "@types/node": "^22.15.18",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
     "@umijs/fabric": "^3.0.0",
     "bootstrap": "^4.3.1",
     "cheerio": "1.0.0-rc.12",
diff --git a/src/Dialog/Content/MemoChildren.tsx b/src/Dialog/Content/MemoChildren.tsx
index 345402f3..d2ecee42 100644
--- a/src/Dialog/Content/MemoChildren.tsx
+++ b/src/Dialog/Content/MemoChildren.tsx
@@ -6,6 +6,6 @@ export type MemoChildrenProps = {
 };
 
 export default React.memo(
-  ({ children }: MemoChildrenProps) => children as React.ReactElement,
+  ({ children }: MemoChildrenProps) => children as React.ReactElement<any>,
   (_, { shouldUpdate }) => !shouldUpdate,
 );
diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx
index 2439fe7f..e06678c4 100644
--- a/src/Dialog/Content/Panel.tsx
+++ b/src/Dialog/Content/Panel.tsx
@@ -6,8 +6,16 @@ import type { IDialogPropTypes } from '../../IDialogPropTypes';
 import MemoChildren from './MemoChildren';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
 
-const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' };
-const entityStyle = { outline: 'none' };
+const sentinelStyle: React.CSSProperties = {
+  width: 0,
+  height: 0,
+  overflow: 'hidden',
+  outline: 'none',
+};
+
+const entityStyle: React.CSSProperties = {
+  outline: 'none',
+};
 
 export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
   prefixCls: string;
@@ -53,8 +61,8 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
 
   const mergedRef = useComposeRef(holderRef, panelRef);
 
-  const sentinelStartRef = useRef<HTMLDivElement>();
-  const sentinelEndRef = useRef<HTMLDivElement>();
+  const sentinelStartRef = useRef<HTMLDivElement>(null);
+  const sentinelEndRef = useRef<HTMLDivElement>(null);
 
   React.useImperativeHandle(ref, () => ({
     focus: () => {
diff --git a/src/Dialog/Content/index.tsx b/src/Dialog/Content/index.tsx
index 4985a194..df6a97ea 100644
--- a/src/Dialog/Content/index.tsx
+++ b/src/Dialog/Content/index.tsx
@@ -25,20 +25,16 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
     className,
     visible,
     forceRender,
-    destroyOnClose,
+    destroyOnHidden,
     motionName,
     ariaId,
     onVisibleChanged,
     mousePosition,
   } = props;
 
-  const dialogRef = useRef<
-    {
-      nativeElement: HTMLElement;
-    } & CSSMotionStateRef
-  >();
+  const dialogRef = useRef<{ nativeElement: HTMLElement } & CSSMotionStateRef>(null);
 
-  const panelRef = useRef<PanelRef>();
+  const panelRef = useRef<PanelRef>(null);
 
   // ============================== Refs ==============================
   React.useImperativeHandle(ref, () => ({
@@ -74,7 +70,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
       onEnterPrepare={onPrepare}
       forceRender={forceRender}
       motionName={motionName}
-      removeOnLeave={destroyOnClose}
+      removeOnLeave={destroyOnHidden}
       ref={dialogRef}
     >
       {({ className: motionClassName, style: motionStyle }, motionRef) => (
@@ -93,6 +89,8 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
   );
 });
 
-Content.displayName = 'Content';
+if (process.env.NODE_ENV !== 'production') {
+  Content.displayName = 'Content';
+}
 
 export default Content;
diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx
index 5f417657..3512e772 100644
--- a/src/Dialog/index.tsx
+++ b/src/Dialog/index.tsx
@@ -55,9 +55,9 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
     }
   }
 
-  const lastOutSideActiveElementRef = useRef<HTMLElement>();
-  const wrapperRef = useRef<HTMLDivElement>();
-  const contentRef = useRef<ContentRef>();
+  const lastOutSideActiveElementRef = useRef<HTMLElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<ContentRef>(null);
 
   const [animatedVisible, setAnimatedVisible] = React.useState(visible);
 
@@ -115,7 +115,7 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
 
   // >>> Content
   const contentClickRef = useRef(false);
-  const contentTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const contentTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
 
   // We need record content click incase content popup out of dialog
   const onContentMouseDown: React.MouseEventHandler = () => {
diff --git a/src/DialogWrap.tsx b/src/DialogWrap.tsx
index 7d84fc4d..58db3a5c 100644
--- a/src/DialogWrap.tsx
+++ b/src/DialogWrap.tsx
@@ -18,7 +18,7 @@ const DialogWrap: React.FC<IDialogPropTypes> = (props) => {
     visible,
     getContainer,
     forceRender,
-    destroyOnClose = false,
+    destroyOnHidden = false,
     afterClose,
     panelRef,
   } = props;
@@ -33,7 +33,7 @@ const DialogWrap: React.FC<IDialogPropTypes> = (props) => {
   }, [visible]);
 
   // Destroy on close will remove wrapped div
-  if (!forceRender && destroyOnClose && !animatedVisible) {
+  if (!forceRender && destroyOnHidden && !animatedVisible) {
     return null;
   }
 
@@ -47,7 +47,7 @@ const DialogWrap: React.FC<IDialogPropTypes> = (props) => {
       >
         <Dialog
           {...props}
-          destroyOnClose={destroyOnClose}
+          destroyOnHidden={destroyOnHidden}
           afterClose={() => {
             afterClose?.();
             setAnimatedVisible(false);
@@ -58,6 +58,8 @@ const DialogWrap: React.FC<IDialogPropTypes> = (props) => {
   );
 };
 
-DialogWrap.displayName = 'Dialog';
+if (process.env.NODE_ENV !== 'production') {
+  DialogWrap.displayName = 'Dialog';
+}
 
 export default DialogWrap;
diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx
index b9fbb8fd..8a5b305c 100644
--- a/src/IDialogPropTypes.tsx
+++ b/src/IDialogPropTypes.tsx
@@ -20,7 +20,7 @@ export type IDialogPropTypes = {
   closable?: boolean | ({ closeIcon?: React.ReactNode; disabled?: boolean } & React.AriaAttributes);
   maskClosable?: boolean;
   visible?: boolean;
-  destroyOnClose?: boolean;
+  destroyOnHidden?: boolean;
   mousePosition?: {
     x: number;
     y: number;
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index e54f0def..e6c075ea 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -113,7 +113,7 @@ describe('dialog', () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
-  describe('destroyOnClose', () => {
+  describe('destroyOnHidden', () => {
     it('default is false', () => {
       const { rerender } = render(
         <Dialog visible>
@@ -128,8 +128,8 @@ describe('dialog', () => {
     });
 
     it('destroy on hide should unmount child components on close', () => {
-      const Demo = (props?: Partial<DialogProps>) => (
-        <Dialog destroyOnClose {...props}>
+      const Demo: React.FC<Partial<DialogProps>> = (props) => (
+        <Dialog destroyOnHidden {...props}>
           <input className="test-input" />
         </Dialog>
       );
@@ -384,7 +384,7 @@ describe('dialog', () => {
     render(
       <Dialog
         visible
-        modalRender={(node: React.ReactElement) =>
+        modalRender={(node: React.ReactElement<any>) =>
           cloneElement(node, { ...node.props, style: { background: '#1890ff' } })
         }
       />,
@@ -394,7 +394,7 @@ describe('dialog', () => {
 
   describe('focusTriggerAfterClose', () => {
     it('should focus trigger after close dialog', () => {
-      const Demo = () => {
+      const Demo: React.FC = () => {
         const [visible, setVisible] = React.useState(false);
         return (
           <>
@@ -417,9 +417,9 @@ describe('dialog', () => {
     });
 
     it('should focus trigger after close dialog when contains focusable element', () => {
-      const Demo = () => {
+      const Demo: React.FC = () => {
         const [visible, setVisible] = React.useState(false);
-        const inputRef = React.useRef(null);
+        const inputRef = React.useRef<HTMLInputElement>(null);
         useEffect(() => {
           inputRef.current?.focus();
         }, []);


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 2**

<details>
<summary>🧹 Nitpick comments (1)</summary><blockquote>

<details>
<summary>README.md (1)</summary><blockquote>

`75-75`: **修复拼写错误**  
将 “compenents” 更正为 “components”。

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between f7f399f385a91242fb6fca7cf12abd59f5aaf892 and 5d6312049993a07e0c928f4dc1a1500f4fcd4ee7.

</details>

<details>
<summary>📒 Files selected for processing (11)</summary>

* `.gitignore` (2 hunks)
* `README.md` (1 hunks)
* `docs/examples/ant-design.tsx` (4 hunks)
* `docs/examples/bootstrap.tsx` (3 hunks)
* `package.json` (1 hunks)
* `src/Dialog/Content/Panel.tsx` (2 hunks)
* `src/Dialog/Content/index.tsx` (3 hunks)
* `src/Dialog/index.tsx` (2 hunks)
* `src/DialogWrap.tsx` (3 hunks)
* `src/IDialogPropTypes.tsx` (1 hunks)
* `tests/index.spec.tsx` (3 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (2)</summary>

<details>
<summary>src/Dialog/Content/index.tsx (1)</summary><blockquote>

<details>
<summary>src/Dialog/Content/Panel.tsx (1)</summary>

* `PanelRef` (28-31)

</details>

</blockquote></details>
<details>
<summary>src/Dialog/index.tsx (1)</summary><blockquote>

<details>
<summary>src/Dialog/Content/index.tsx (1)</summary>

* `ContentRef` (12-12)

</details>

</blockquote></details>

</details><details>
<summary>🪛 GitHub Actions: ✅ test</summary>

<details>
<summary>tests/index.spec.tsx</summary>

[error] 388-388: TypeScript error TS2698: Spread types may only be created from object types.

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (28)</summary><blockquote>

<details>
<summary>src/Dialog/Content/Panel.tsx (3)</summary>

`9-14`: **添加了明确的类型注解，提高了类型安全性**

为`sentinelStyle`常量添加了明确的`React.CSSProperties`类型注解，使类型定义更加清晰，有助于提高代码的可维护性和类型安全性。

---

`16-18`: **添加了明确的类型注解，提高了类型安全性**

为`entityStyle`常量添加了明确的`React.CSSProperties`类型注解，使类型定义更加清晰，有助于提高代码的可维护性和类型安全性。

---

`64-65`: **改进了ref的初始化方式，提高了类型安全性**

将`useRef`钩子明确初始化为`null`而不是未初始化状态，这符合React的最佳实践并提高了类型安全性。

</details>
<details>
<summary>.gitignore (2)</summary>

`37-37`: **添加pnpm锁文件到忽略列表**

将`pnpm-lock.yaml`添加到忽略列表中，与现有的`yarn.lock`和`package-lock.json`忽略模式保持一致，确保不同包管理器的锁文件都被正确排除在版本控制之外。

---

`52-52`: **添加Bun锁文件到忽略列表**

将`bun.lockb`添加到忽略列表中，确保Bun包管理器的锁文件被排除在版本控制之外，与其他包管理器的处理方式保持一致。

</details>
<details>
<summary>src/IDialogPropTypes.tsx (1)</summary>

`23-23`: **属性重命名：destroyOnClose 改为 destroyOnHidden**

将接口中的属性名从`destroyOnClose`更改为`destroyOnHidden`，使命名更加准确和一致。这项更改与PR的主要目标一致，即在整个代码库中统一使用`destroyOnHidden`命名。

</details>
<details>
<summary>src/Dialog/Content/index.tsx (5)</summary>

`28-28`: **属性重命名：destroyOnClose 改为 destroyOnHidden**

将解构的属性名从`destroyOnClose`更改为`destroyOnHidden`，与整个代码库中的命名保持一致，使API命名更加准确。

---

`35-35`: **改进了ref的初始化方式，提高了类型安全性**

将`dialogRef`明确初始化为`null`而不是未初始化状态，这符合React的最佳实践并提高了类型安全性。

---

`37-37`: **改进了ref的初始化方式，提高了类型安全性**

将`panelRef`明确初始化为`null`而不是未初始化状态，这符合React的最佳实践并提高了类型安全性。

---

`73-73`: **属性重命名：使用重命名后的属性作为CSSMotion的prop**

将`CSSMotion`组件的`removeOnLeave`属性的值从`destroyOnClose`更改为`destroyOnHidden`，保持与重命名一致。

---

`92-94`: **优化生产环境构建**

添加了环境检查条件，仅在非生产环境下设置`Content.displayName`，这有助于减小生产环境代码的体积，是React组件的最佳实践。

</details>
<details>
<summary>src/Dialog/index.tsx (2)</summary>

`58-60`: **初始化 refs 初始值为 null 以提升类型安全性**  
将未初始化的 ref 统一设置为 `null`，避免了 `undefined` 的类型风险，符合最佳实践。

---

`118-118`: **初始化 contentTimeoutRef 为 null 以保证一致性**  
显式将 `contentTimeoutRef` 初始值设置为 `null`，与其他 ref 初始化保持一致，提升可维护性。

</details>
<details>
<summary>docs/examples/bootstrap.tsx (3)</summary>

`14-14`: **状态变量命名正确更新为 destroyOnHidden**  
将 `destroyOnClose` 重命名为 `destroyOnHidden` 并初始化为 `false`，与 API 一致。

---

`24-26`: **事件处理函数名同步更新**  
将 `onDestroyOnHiddenChange` 与状态名保持一致，变更逻辑清晰且与示例中其他处理函数规范一致。

---

`31-31`: **Dialog 组件 prop 重命名正确**  
将 `destroyOnClose` 改为 `destroyOnHidden`，与最新的属性定义保持一致。

</details>
<details>
<summary>package.json (2)</summary>

`62-62`: **确认 devDependencies 中 @rc-component/select 位置调整无误**  
仅变动了条目顺序，版本保持一致，无需额外调整。

---

`67-69`: **TypeScript 与 Node 类型声明版本升级合理**  
添加了 `@types/node@^22.15.18` 并将 `@types/react`、`@types/react-dom` 升级至 19.x，以匹配 React 19 类型，支持更高的类型安全。

</details>
<details>
<summary>README.md (1)</summary>

`52-57`: **API 文档属性表已更新为 destroyOnHidden**  
成功将属性重命名并统一描述，与代码实现保持一致。

</details>
<details>
<summary>docs/examples/ant-design.tsx (3)</summary>

`34-34`: **状态变量命名正确更新为 destroyOnHidden**  
将 `destroyOnClose` 重命名为 `destroyOnHidden` 并初始化为 `false`，与 API 保持一致。

---

`63-65`: **事件处理函数名同步更新**  
将 `onDestroyOnHiddenChange` 与状态名保持一致，逻辑清晰，无额外问题。

---

`100-100`: **Dialog 组件 prop 重命名正确**  
将 `destroyOnClose` 改为 `destroyOnHidden`，与最新的属性定义一致。

</details>
<details>
<summary>tests/index.spec.tsx (3)</summary>

`116-116`: **将 destroyOnClose 重命名为 destroyOnHidden**

测试描述块的名称已从 `destroyOnClose` 更改为 `destroyOnHidden`，这与整个代码库中的属性重命名保持一致。

---

`131-132`: **类型定义更加明确，属性名称更新**

这里有两处改进：
1. 为 `Demo` 组件添加了明确的 React 函数组件类型 `React.FC<Partial<DialogProps>>`
2. 将 `destroyOnClose` 属性重命名为 `destroyOnHidden`

这两项更改提高了代码的类型安全性并保持了命名一致性。

---

`420-422`: **改进了类型定义并使用正确的 ref 初始化**

这里的改进包括：
1. 为 `Demo` 组件添加了明确的 React 函数组件类型 `React.FC`
2. 为 `inputRef` 添加了明确的类型 `React.useRef<HTMLInputElement>(null)`，并用 `null` 正确初始化

这些变更遵循了 React 中的最佳实践，提高了代码的类型安全性和可维护性。

</details>
<details>
<summary>src/DialogWrap.tsx (3)</summary>

`21-21`: **将 destroyOnClose 重命名为 destroyOnHidden**

属性名称从 `destroyOnClose` 更改为 `destroyOnHidden`，默认值为 `false`。这个名称更准确地反映了该属性的功能 - 即在对话框隐藏时销毁内容，而不仅仅是关闭时。

---

`36-36`: **更新条件判断中的属性名称**

将条件判断中的 `destroyOnClose` 更改为 `destroyOnHidden`，保持了整个组件中命名的一致性。这个条件判断负责在对话框隐藏且设置了销毁选项时移除包装的 div。

---

`50-50`: **将传递给 Dialog 组件的属性重命名**

将传递给 `Dialog` 组件的属性从 `destroyOnClose` 更新为 `destroyOnHidden`，确保了整个组件层次结构中属性名称的一致性。

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-18T03:26:16Z
user: login: zombieJ
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-19T06:51:44Z

Review comments:
diff_hunk: @@ -121,7 +121,7 @@ const MyControl: React.FC = () => {
         &nbsp;
         <label>
           destroy on close:
-          <input type="checkbox" checked={destroyOnClose} onChange={onDestroyOnCloseChange} />
+          <input type="checkbox" checked={destroyOnHidden} onChange={onDestroyOnHiddenChange} />
         </label>
path: docs/examples/bootstrap.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**更新 UI 文案以反映属性重命名**  
当前标签文本依然是 “destroy on close:”，会导致用户误解。建议改为 “destroy on hidden:” 或更本地化的 “隐藏时销毁：”。

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In docs/examples/bootstrap.tsx around lines 123 to 125, the label text still
reads "destroy on close:" which is misleading after the property was renamed.
Update the label text to "destroy on hidden:" or a localized version like
"隐藏时销毁：" to accurately reflect the current property name and avoid user
confusion.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-18T03:26:16Z
author_association: NONE
diff_hunk: @@ -211,7 +211,7 @@ const MyControl: React.FC = () => {
           &nbsp;
           <label>
             destroy on close:
-            <input type="checkbox" checked={destroyOnClose} onChange={onDestroyOnCloseChange} />
+            <input type="checkbox" checked={destroyOnHidden} onChange={onDestroyOnHiddenChange} />
           </label>
path: docs/examples/ant-design.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**更新 UI 文案以反映属性重命名**  
当前标签文本依然是 “destroy on close:”，与变量名及功能不符，建议改为 “destroy on hidden:” 或中文 “隐藏时销毁：”。

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In docs/examples/ant-design.tsx around lines 213 to 215, the label text "destroy
on close:" does not match the renamed variable destroyOnHidden. Update the label
text to "destroy on hidden:" or the Chinese equivalent "隐藏时销毁：" to accurately
reflect the property name and functionality.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-18T03:26:16Z
author_association: NONE

PR comments:
user: login: vercel[bot]
created_at: 2025-05-18T03:23:39Z
body: [vc]: #gdCMCiSDGiw4TmtaeAAC1DTJn+Zi4nDnRu9jVvD2JAM=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJkaWFsb2ciLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vcmVhY3QtY29tcG9uZW50L2RpYWxvZy9IQ2JSZ1dpRDFOWGZidkticnFlcVA0NDRzUkRQIiwicHJldmlld1VybCI6ImRpYWxvZy1naXQtdXBkYXRlLWFwaS1yZWFjdC1jb21wb25lbnQudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJkaWFsb2ctZ2l0LXVwZGF0ZS1hcGktcmVhY3QtY29tcG9uZW50LnZlcmNlbC5hcHAifSwicm9vdERpcmVjdG9yeSI6bnVsbH1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **dialog** | ✅ Ready ([Inspect](https://vercel.com/react-component/dialog/HCbRgWiD1NXfbvKbrqeqP444sRDP)) | [Visit Preview](https://dialog-git-update-api-react-component.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/dialog-git-update-api-react-component.vercel.app?via=pr-comment-feedback-link) | May 18, 2025 3:31am |


author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-05-18T03:23:42Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

"""
## Walkthrough

本次更新主要将对话框组件相关的 `destroyOnClose` 属性统一重命名为 `destroyOnHidden`，涉及文档、示例、类型声明、核心组件实现和测试用例。同时，部分 TypeScript 类型声明和 React 相关依赖也进行了升级，代码中的 ref 初始化方式更为规范，提升了类型安全性。

## Changes

| 文件/路径分组                           | 变更摘要                                                                                                 |
|----------------------------------------|--------------------------------------------------------------------------------------------------------|
| .gitignore                             | 新增忽略 `pnpm-lock.yaml` 文件。                                                                        |
| README.md                              | API 文档属性表重构，`destroyOnClose` 重命名为 `destroyOnHidden`，相关描述同步调整。                      |
| docs/examples/ant-design.tsx<br>docs/examples/bootstrap.tsx | 示例代码中变量、handler、prop 从 `destroyOnClose` 重命名为 `destroyOnHidden`。                         |
| package.json                           | 升级 `@types/react` 和 `@types/react-dom` 到 19.x，新增 `@types/node`，调整依赖顺序。                   |
| src/Dialog/Content/Panel.tsx           | `sentinelStyle` 和 `entityStyle` 增加显式类型，ref 初始化为 `null`。                                    |
| src/Dialog/Content/index.tsx           | prop `destroyOnClose` 改为 `destroyOnHidden`，ref 初始化为 `null`，`displayName` 仅在非生产环境赋值。   |
| src/Dialog/index.tsx                   | 多个 React ref 初始化为 `null`，提升类型安全。                                                          |
| src/DialogWrap.tsx                     | prop 及内部变量 `destroyOnClose` 全部重命名为 `destroyOnHidden`，默认值为 `false`。                    |
| src/IDialogPropTypes.tsx               | 类型定义中 `destroyOnClose` 属性重命名为 `destroyOnHidden`。                                           |
| tests/index.spec.tsx                   | 测试用例中 `destroyOnClose` 均重命名为 `destroyOnHidden`，增加类型注解。                               |
| src/Dialog/Content/MemoChildren.tsx   | `children` 类型断言由 `React.ReactElement` 改为更通用的 `React.ReactElement<any>`。                    |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant DialogWrap
    participant Dialog
    participant Content

    User->>DialogWrap: 设置 destroyOnHidden={true}
    DialogWrap->>Dialog: 传递 destroyOnHidden
    Dialog->>Content: 传递 destroyOnHidden
    Content-->>Dialog: 根据 destroyOnHidden 判断是否卸载子组件
    Dialog-->>DialogWrap: 动画结束后根据 destroyOnHidden 决定是否移除 DOM
```

## Suggested reviewers

- thinkasany
- zombieJ

## Poem

> 小兔挥笔更名忙，  
> destroyOnClose 说再见，  
> destroyOnHidden 新登场。  
> 类型升级更安全，  
> 文档示例齐换装。  
> 代码整洁如春草，  
> 兔子鼓掌跳三跳！ 🐇✨
"""

<!-- walkthrough_end -->
<!-- This is an auto-generated comment: all tool run failures by coderabbit.ai -->

> [!WARNING]
> There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.
> 
> <details>
> <summary>🔧 ESLint</summary>
> 
> > If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.
> 
> <details>
> <summary>docs/examples/ant-design.tsx</summary>
> 
> 
> Oops! Something went wrong! :(
> 
> ESLint: 7.32.0
> 
> ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.
> 
> The config "prettier" was referenced from the config file in "/.eslintrc.js".
> 
> If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.
> 
> 
> </details>
> 
> <details>
> <summary>docs/examples/bootstrap.tsx</summary>
> 
> 
> Oops! Something went wrong! :(
> 
> ESLint: 7.32.0
> 
> ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.
> 
> The config "prettier" was referenced from the config file in "/.eslintrc.js".
> 
> If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.
> 
> 
> </details>
> 
> <details>
> <summary>src/Dialog/Content/MemoChildren.tsx</summary>
> 
> 
> Oops! Something went wrong! :(
> 
> ESLint: 7.32.0
> 
> ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.
> 
> The config "prettier" was referenced from the config file in "/.eslintrc.js".
> 
> If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.
> 
> 
> </details>
> 
> + 2 others
> 
> </details>

<!-- end of auto-generated comment: all tool run failures by coderabbit.ai -->

<!-- announcements_start -->

> [!NOTE]
> <details>
> <summary>⚡️ AI Code Reviews for VS Code, Cursor, Windsurf</summary>
> 
> CodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback.
> Learn more [here](http://coderabbit.ai/ide).
> 
> </details>

---

> [!NOTE]
> <details>
> <summary>⚡️ Faster reviews with caching</summary>
> 
> CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure `Review - Disable Cache` at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the `Data Retention` setting under your Organization Settings.
> Enjoy the performance boost—your workflow just got faster.
> 
> </details>

<!-- announcements_end -->

---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 5d6312049993a07e0c928f4dc1a1500f4fcd4ee7 and 91c06310d6a37ba8507afc409df3d5146b71739f.

</details>

<details>
<summary>📒 Files selected for processing (5)</summary>

* `docs/examples/ant-design.tsx` (4 hunks)
* `docs/examples/bootstrap.tsx` (3 hunks)
* `src/Dialog/Content/MemoChildren.tsx` (1 hunks)
* `src/DialogWrap.tsx` (4 hunks)
* `tests/index.spec.tsx` (5 hunks)

</details>

<details>
<summary>✅ Files skipped from review due to trivial changes (1)</summary>

* src/Dialog/Content/MemoChildren.tsx

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (4)</summary>

* docs/examples/bootstrap.tsx
* docs/examples/ant-design.tsx
* src/DialogWrap.tsx
* tests/index.spec.tsx

</details>

</details>
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings
<details open="true">
<summary>🧪 Generate Unit Tests</summary>

- [ ] <!-- {"checkboxId": "f47ac10b-58cc-4372-a567-0e02b2c3d479", "radioGroupId": "utg-output-choice-group-unknown_comment_id"} -->   Create PR with Unit Tests
- [ ] <!-- {"checkboxId": "6ba7b810-9dad-11d1-80b4-00c04fd430c8", "radioGroupId": "utg-output-choice-group-unknown_comment_id"} -->   Commit Unit Tests in branch `update-api`
- [ ] <!-- {"checkboxId": "07f1e7d6-8a8e-4e23-9900-8731c2c87f58", "radioGroupId": "utg-output-choice-group-unknown_comment_id"} -->   Post Copyable Unit Tests in Comment

</details>

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=react-component/dialog&utm_content=475):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai explain this code block.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and explain its main purpose.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai generate unit tests` to generate unit tests for this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: socket-security[bot]
created_at: 2025-05-18T03:24:41Z
body: **Review the following changes in direct dependencies.** Learn more about [Socket for GitHub](https://socket.dev?utm_medium=gh).

<table>
<thead>
<tr>
<th>Diff</th>
<th width="200px">Package</th>
<th align="center" width="100px">Supply Chain<br/>Security</th>
<th align="center" width="100px">Vulnerability</th>
<th align="center" width="100px">Quality</th>
<th align="center" width="100px">Maintenance</th>
<th align="center" width="100px">License</th>
</tr>
</thead>
<tbody>
<tr><td align="center"><a href="https://socket.dev/dashboard/org/react-component/diff/373dce77-e2d2-4059-946b-2cd918705395/381342cc-c9ca-4b7d-8c0e-be177f88054c?tab=dependencies&dependency_item_key=30717712766"><img src="https://github-app-statics.socket.dev/diff-added.svg" title="Added" alt="Added" width="20" height="20"></a></td><td><a href="https://socket.dev/dashboard/org/react-component/diff/373dce77-e2d2-4059-946b-2cd918705395/381342cc-c9ca-4b7d-8c0e-be177f88054c?tab=dependencies&dependency_item_key=30717712766">@​types/​react-dom@​19.1.5</a></td><td align="center"><a href="https://socket.dev/dashboard/org/react-component/diff/373dce77-e2d2-4059-946b-2cd918705395/381342cc-c9ca-4b7d-8c0e-be177f88054c?tab=dependencies&dependency_item_key=30717712766"><img src="https://github-app-statics.socket.dev/score-100.svg" title="Supply Chain Security" width="40" height="40" alt="100"></a></td><td align="center"><a href="https://socket.dev/dashboard/org/react-component/diff/373dce77-e2d2-4059-946b-2cd918705395/381342cc-c9ca-4b7d-8c0e-be177f88054c?tab=dependencies&dependency_item_key=30717712766"><img src="https://github-app-statics.socket.dev/score-100.svg" title="Vulnerability" width="40" height="40" alt="100"></a></td><td align="center"><a href="https://socket.dev/dashboard/org/react-component/diff/373dce77-e2d2-4059-946b-2cd918705395/381342cc-c9ca-4b7d-8c0e-be177f88054c?tab=dependencies&dependency_item_key=30717712766"><img src="https://github-app-statics.socket.dev/score-72.svg" title="Quality" width="40" height="40" alt="72"></a></td><td align="center"><a href="https://socket.dev/dashboard/org/react-component/diff/373dce77-e2d2-4059-946b-2cd918705395/381342cc-c9ca-4b7d-8c0e-be177f88054c?tab=dependencies&dependency_item_key=30717712766"><img src="https://github-app-statics.socket.dev/score-95.svg" title="Maintenance" width="40" height="40" alt="95"></a></td><td align="center"><a href="https://socket.dev/dashboard/org/react-component/diff/373dce77-e2d2-4059-946b-2cd918705395/381342cc-c9ca-4b7d-8c0e-be177f88054c?tab=dependencies&dependency_item_key=30717712766"><img src="https://github-app-statics.socket.dev/score-100.svg" title="License" width="40" height="40" alt="100"></a></td></tr>
<tr><td align="center"><a href="https://socket.dev/dashboard/org/react-component/diff/373dce77-e2d2-4059-946b-2cd918705395/381342cc-c9ca-4b7d-8c0e-be177f88054c?tab=dependencies&dependency_item_key=30509800396"><img src="https://github-app-statics.socket.dev/diff-added.svg" title="Added" alt="Added" width="20" height="20"></a></td><td><a href="https://socket.dev/dashboard/org/react-component/diff/373dce77-e2d2-4059-946b-2cd918705395/381342cc-c9ca-4b7d-8c0e-be177f88054c?tab=dependencies&dependency_item_key=30509800396">@​types/​react@​19.1.4</a></td><td align="center"><a href="https://socket.dev/dashboard/org/react-component/diff/373dce77-e2d2-4059-946b-2cd918705395/381342cc-c9ca-4b7d-8c0e-be177f88054c?tab=dependencies&dependency_item_key=30509800396"><img src="https://github-app-statics.socket.dev/score-100.svg" title="Supply Chain Security" width="40" height="40" alt="100"></a></td><td align="center"><a href="https://socket.dev/dashboard/org/react-component/diff/373dce77-e2d2-4059-946b-2cd918705395/381342cc-c9ca-4b7d-8c0e-be177f88054c?tab=dependencies&dependency_item_key=30509800396"><img src="https://github-app-statics.socket.dev/score-100.svg" title="Vulnerability" width="40" height="40" alt="100"></a></td><td align="center"><a href="https://socket.dev/dashboard/org/react-component/diff/373dce77-e2d2-4059-946b-2cd918705395/381342cc-c9ca-4b7d-8c0e-be177f88054c?tab=dependencies&dependency_item_key=30509800396"><img src="https://github-app-statics.socket.dev/score-78.svg" title="Quality" width="40" height="40" alt="78"></a></td><td align="center"><a href="https://socket.dev/dashboard/org/react-component/diff/373dce77-e2d2-4059-946b-2cd918705395/381342cc-c9ca-4b7d-8c0e-be177f88054c?tab=dependencies&dependency_item_key=30509800396"><img src="https://github-app-statics.socket.dev/score-95.svg" title="Maintenance" width="40" height="40" alt="95"></a></td><td align="center"><a href="https://socket.dev/dashboard/org/react-component/diff/373dce77-e2d2-4059-946b-2cd918705395/381342cc-c9ca-4b7d-8c0e-be177f88054c?tab=dependencies&dependency_item_key=30509800396"><img src="https://github-app-statics.socket.dev/score-100.svg" title="License" width="40" height="40" alt="100"></a></td></tr>
</tbody>
</table>

[View full report](https://socket.dev/dashboard/org/react-component/diff/373dce77-e2d2-4059-946b-2cd918705395/381342cc-c9ca-4b7d-8c0e-be177f88054c?tab=dependencies)

<!-- overview-comment -->
author_association: NONE
user: login: codecov[bot]
created_at: 2025-05-18T03:27:28Z
body: ## [Codecov](https://app.codecov.io/gh/react-component/dialog/pull/475?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=react-component) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 98.43%. Comparing base [(`f7f399f`)](https://app.codecov.io/gh/react-component/dialog/commit/f7f399f385a91242fb6fca7cf12abd59f5aaf892?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=react-component) to head [(`91c0631`)](https://app.codecov.io/gh/react-component/dialog/commit/91c06310d6a37ba8507afc409df3d5146b71739f?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=react-component).
> Report is 2 commits behind head on master.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##           master     #475      +/-   ##
==========================================
+ Coverage   98.42%   98.43%   +0.01%     
==========================================
  Files           8        8              
  Lines         190      192       +2     
  Branches       64       66       +2     
==========================================
+ Hits          187      189       +2     
  Misses          3        3              
```

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/react-component/dialog/pull/475?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=react-component).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=react-component).

<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE