update destroyOnClose to destroyOnHidden

.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
+bun.lockb

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.

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>

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}

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",

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,
 );

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: () => {

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;

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 = () => {

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;

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;

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();
         }, []);