chore: merge master

Author: zombieJ

.dumirc.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'dumi';
+import path from 'path';
+
+export default defineConfig({
+  alias: {
+    'rc-dialog$': path.resolve('src'),
+    'rc-dialog/es': path.resolve('src'),
+  },
+  favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'],
+  themeConfig: {
+    name: 'Dialog',
+    logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
+  },
+});;

.gitignore

@@ -41,3 +41,8 @@ package-lock.json
 .umi-production
 .umi-test
 .env.local
+
+
+# dumi
+.dumi/tmp
+.dumi/tmp-production

.umirc.ts

@@ -2,20 +2,16 @@
 
 react dialog component
 
-[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![Dependencies][david-image]][david-url] [![DevDependencies][david-dev-image]][david-dev-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
+[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
 
 [npm-image]: http://img.shields.io/npm/v/rc-dialog.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/rc-dialog
 [github-actions-image]: https://github.com/react-component/dialog/workflows/CI/badge.svg
 [github-actions-url]: https://github.com/react-component/dialog/actions
 [circleci-image]: https://img.shields.io/circleci/react-component/dialog/master?style=flat-square
 [circleci-url]: https://circleci.com/gh/react-component/dialog
-[coveralls-image]: https://img.shields.io/coveralls/react-component/dialog.svg?style=flat-square
-[coveralls-url]: https://coveralls.io/r/react-component/dialog?branch=master
-[david-url]: https://david-dm.org/react-component/dialog
-[david-image]: https://david-dm.org/react-component/dialog/status.svg?style=flat-square
-[david-dev-url]: https://david-dm.org/react-component/dialog?type=dev
-[david-dev-image]: https://david-dm.org/react-component/dialog/dev-status.svg?style=flat-square
+[codecov-image]: https://img.shields.io/codecov/c/github/react-component/dialog/master.svg?style=flat-square
+[codecov-url]: https://app.codecov.io/gh/react-component/dialog
 [download-image]: https://img.shields.io/npm/dm/rc-dialog.svg?style=flat-square
 [download-url]: https://npmjs.org/package/rc-dialog
 [bundlephobia-url]: https://bundlephobia.com/result?p=rc-dialog

README.md

@@ -1,3 +1,8 @@
-## ant-design
+---
+title: ant-design
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/ant-design.tsx">
+<code src="../examples/ant-design.tsx"></code>

docs/demo/ant-design.md

@@ -1,3 +1,8 @@
-## bootstrap
+---
+title: bootstrap
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/bootstrap.tsx">
+<code src="../examples/bootstrap.tsx"></code>

docs/demo/bootstrap.md

@@ -1,3 +1,8 @@
-## draggable
+---
+title: draggable
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/draggable.tsx">
+<code src="../examples/draggable.tsx"></code>

docs/demo/draggable.md

@@ -1,3 +1,8 @@
-## multiple-Portal
+---
+title: multiple-Portal
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/multiple-Portal.tsx">
+<code src="../examples/multiple-Portal.tsx"></code>

docs/demo/multiple-Portal.md

@@ -1,3 +1,8 @@
-## pure-debug
+---
+title: pure-debug
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/pure.tsx">
+<code src="../examples/pure.tsx"></code>

docs/demo/pure.md

@@ -1,5 +1,7 @@
 ---
-title: rc-dialog
+hero:
+  title: rc-dialog
+  description: React Dialog Component
 ---
 
 <embed src="../README.md"></embed>

docs/index.md

@@ -5,7 +5,7 @@
     {
       "src": "package.json",
       "use": "@now/static-build",
-      "config": { "distDir": ".doc" }
+      "config": { "distDir": "dist" }
     }
   ],
   "routes": [

now.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-dialog",
-  "version": "9.0.1",
+  "version": "9.0.2",
   "description": "dialog ui component for react",
   "keywords": [
     "react",
@@ -59,12 +59,12 @@
     "@types/jest": "^26.0.14",
     "@types/keyv": "3.1.4",
     "@types/react": "^18.0.24",
-    "@types/react-dom": "^17.0.9",
-    "@umijs/fabric": "^2.0.0",
+    "@types/react-dom": "^18.0.8",
+    "@umijs/fabric": "^3.0.0",
     "bluebird": "~3.7.2",
     "bootstrap": "^4.3.1",
     "cross-env": "^7.0.0",
-    "dumi": "^1.1.0",
+    "dumi": "^2.1.3",
     "enzyme": "^3.1.1",
     "enzyme-adapter-react-16": "^1.0.1",
     "enzyme-to-json": "^3.1.2",

package.json

@@ -51,14 +51,23 @@ export default function Dialog(props: IDialogPropTypes) {
   // ========================== Init ==========================
   const ariaId = useId();
 
+  function saveLastOutSideActiveElementRef() {
+    if (!contains(wrapperRef.current, document.activeElement)) {
+      lastOutSideActiveElementRef.current = document.activeElement as HTMLElement;
+    }
+  }
+
+  function focusDialogContent() {
+    if (!contains(wrapperRef.current, document.activeElement)) {
+      contentRef.current?.focus();
+    }
+  }
+
   // ========================= Events =========================
   function onDialogVisibleChanged(newVisible: boolean) {
+    // Try to focus
     if (newVisible) {
-      // Try to focus
-      if (!contains(wrapperRef.current, document.activeElement)) {
-        lastOutSideActiveElementRef.current = document.activeElement as HTMLElement;
-        contentRef.current?.focus();
-      }
+      focusDialogContent();
     } else {
       // Clean up scroll bar & focus back
       setAnimatedVisible(false);
@@ -131,6 +140,7 @@ export default function Dialog(props: IDialogPropTypes) {
   useEffect(() => {
     if (visible) {
       setAnimatedVisible(true);
+      saveLastOutSideActiveElementRef();
     }
   }, [visible]);
 

src/Dialog/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-render-return-value, max-classes-per-file, func-names, no-console */
-import React, { cloneElement } from 'react';
+import React, { cloneElement, useEffect } from 'react';
 import { act } from 'react-dom/test-utils';
 import { render } from '@testing-library/react';
 import type { ReactWrapper } from 'enzyme';
@@ -362,6 +362,60 @@ describe('dialog', () => {
     expect(modalRender.find('.rc-dialog-content').props().style.background).toEqual('#1890ff');
   });
 
+  describe('focusTriggerAfterClose', () => {
+    it('should focus trigger after close dialog', () => {
+      const Demo = () => {
+        const [visible, setVisible] = React.useState(false);
+        return (
+          <>
+            <button onClick={() => setVisible(true)}>trigger</button>
+            <Dialog visible={visible} onClose={() => setVisible(false)}>
+              content
+            </Dialog>
+          </>
+        );
+      };
+      const wrapper = mount(<Demo />, { attachTo: document.body });
+      const trigger = wrapper.find('button').at(0);
+      (trigger.getDOMNode() as any).focus();
+      trigger.simulate('click');
+      jest.runAllTimers();
+      const closeButton = wrapper.find('.rc-dialog-close');
+      closeButton.simulate('click');
+      jest.runAllTimers();
+      expect(document.activeElement).toBe(trigger.getDOMNode());
+      wrapper.unmount();
+    });
+
+    it('should focus trigger after close dialog when contains focusable element', () => {
+      const Demo = () => {
+        const [visible, setVisible] = React.useState(false);
+        const inputRef = React.useRef(null);
+        useEffect(() => {
+          inputRef.current?.focus();
+        }, []);
+        return (
+          <>
+            <button onClick={() => setVisible(true)}>trigger</button>
+            <Dialog visible={visible} onClose={() => setVisible(false)}>
+              <input ref={inputRef} />
+            </Dialog>
+          </>
+        );
+      };
+      const wrapper = mount(<Demo />, { attachTo: document.body });
+      const trigger = wrapper.find('button').at(0);
+      (trigger.getDOMNode() as any).focus();
+      trigger.simulate('click');
+      jest.runAllTimers();
+      const closeButton = wrapper.find('.rc-dialog-close');
+      closeButton.simulate('click');
+      jest.runAllTimers();
+      expect(document.activeElement).toBe(trigger.getDOMNode());
+      wrapper.unmount();
+    });
+  });
+
   describe('size should work', () => {
     it('width', () => {
       const wrapper = mount(<Dialog visible width={1128} />);

tests/index.spec.tsx

@@ -9,8 +9,9 @@
     "esModuleInterop": true,
     "paths": {
       "@/*": ["src/*"],
-      "@@/*": ["src/.umi/*"],
+      "@@/*": [".dumi/tmp/*"],
       "rc-dialog": ["src/index.ts"]
     }
-  }
+  },
+  "include": [".dumi/**/*", ".dumirc.ts", "./src/**/*.ts", "./src/**/*.tsx", "./docs/**/*.tsx", "./tests/**/*.tsx"]
 }