@rc-component/dialog 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/dist/10509781610555453368.hot-update-url-map.json +1 -0
  2. package/dist/10509781610555453368.hot-update.json +1 -0
  3. package/dist/11977476592833392720.hot-update-url-map.json +1 -0
  4. package/dist/11977476592833392720.hot-update.json +1 -0
  5. package/dist/14397576132152343869.hot-update-url-map.json +1 -0
  6. package/dist/14397576132152343869.hot-update.json +1 -0
  7. package/dist/14597408625395534096.hot-update-url-map.json +1 -0
  8. package/dist/14597408625395534096.hot-update.json +1 -0
  9. package/dist/15104553912779929595.hot-update-url-map.json +1 -0
  10. package/dist/15104553912779929595.hot-update.json +1 -0
  11. package/dist/4361192314875393955.hot-update-url-map.json +1 -0
  12. package/dist/4361192314875393955.hot-update.json +1 -0
  13. package/dist/4704580574928883170.hot-update-url-map.json +1 -0
  14. package/dist/4704580574928883170.hot-update.json +1 -0
  15. package/dist/5496443382647786649.hot-update-url-map.json +1 -0
  16. package/dist/5496443382647786649.hot-update.json +1 -0
  17. package/dist/7338948553039754745.hot-update-url-map.json +1 -0
  18. package/dist/7338948553039754745.hot-update.json +1 -0
  19. package/dist/7441995189917427860.hot-update-url-map.json +1 -0
  20. package/dist/7441995189917427860.hot-update.json +1 -0
  21. package/dist/8425845753817463333.hot-update-url-map.json +1 -0
  22. package/dist/8425845753817463333.hot-update.json +1 -0
  23. package/dist/8742625841545363477.hot-update-url-map.json +1 -0
  24. package/dist/8742625841545363477.hot-update.json +1 -0
  25. package/dist/960384830459946830.hot-update-url-map.json +1 -0
  26. package/dist/960384830459946830.hot-update.json +1 -0
  27. package/dist/9707589364653732454.hot-update-url-map.json +1 -0
  28. package/dist/9707589364653732454.hot-update.json +1 -0
  29. package/dist/common-async.10509781610555453368.hot-update.js +268 -0
  30. package/dist/common-async.10509781610555453368.hot-update.js.map +1 -0
  31. package/dist/common-async.11977476592833392720.hot-update.js +395 -0
  32. package/dist/common-async.11977476592833392720.hot-update.js.map +1 -0
  33. package/dist/common-async.14397576132152343869.hot-update.js +395 -0
  34. package/dist/common-async.14397576132152343869.hot-update.js.map +1 -0
  35. package/dist/common-async.14597408625395534096.hot-update.js +268 -0
  36. package/dist/common-async.14597408625395534096.hot-update.js.map +1 -0
  37. package/dist/common-async.15104553912779929595.hot-update.js +268 -0
  38. package/dist/common-async.15104553912779929595.hot-update.js.map +1 -0
  39. package/dist/common-async.4361192314875393955.hot-update.js +268 -0
  40. package/dist/common-async.4361192314875393955.hot-update.js.map +1 -0
  41. package/dist/common-async.4704580574928883170.hot-update.js +268 -0
  42. package/dist/common-async.4704580574928883170.hot-update.js.map +1 -0
  43. package/dist/common-async.5496443382647786649.hot-update.js +391 -0
  44. package/dist/common-async.5496443382647786649.hot-update.js.map +1 -0
  45. package/dist/common-async.7338948553039754745.hot-update.js +395 -0
  46. package/dist/common-async.7338948553039754745.hot-update.js.map +1 -0
  47. package/dist/common-async.7441995189917427860.hot-update.js +394 -0
  48. package/dist/common-async.7441995189917427860.hot-update.js.map +1 -0
  49. package/dist/common-async.8425845753817463333.hot-update.js +268 -0
  50. package/dist/common-async.8425845753817463333.hot-update.js.map +1 -0
  51. package/dist/common-async.8742625841545363477.hot-update.js +268 -0
  52. package/dist/common-async.8742625841545363477.hot-update.js.map +1 -0
  53. package/dist/common-async.960384830459946830.hot-update.js +268 -0
  54. package/dist/common-async.960384830459946830.hot-update.js.map +1 -0
  55. package/dist/common-async.9707589364653732454.hot-update.js +268 -0
  56. package/dist/common-async.9707589364653732454.hot-update.js.map +1 -0
  57. package/dist/common-async.js +1180 -0
  58. package/dist/common-async.js.map +1 -0
  59. package/dist/demos-async.7338948553039754745.hot-update.js +395 -0
  60. package/dist/demos-async.7338948553039754745.hot-update.js.map +1 -0
  61. package/dist/demos-async.css +396 -0
  62. package/dist/demos-async.css.map +1 -0
  63. package/dist/demos-async.js +1242 -0
  64. package/dist/demos-async.js.map +1 -0
  65. package/dist/docs_changelog_md-async.js +2159 -0
  66. package/dist/docs_changelog_md-async.js.map +1 -0
  67. package/dist/docs_demo_ant-design_md-async.js +119 -0
  68. package/dist/docs_demo_ant-design_md-async.js.map +1 -0
  69. package/dist/docs_demo_bootstrap_md-async.js +119 -0
  70. package/dist/docs_demo_bootstrap_md-async.js.map +1 -0
  71. package/dist/docs_demo_draggable_md-async.js +119 -0
  72. package/dist/docs_demo_draggable_md-async.js.map +1 -0
  73. package/dist/docs_demo_multiple-Portal_md-async.js +119 -0
  74. package/dist/docs_demo_multiple-Portal_md-async.js.map +1 -0
  75. package/dist/docs_demo_pure_md-async.js +119 -0
  76. package/dist/docs_demo_pure_md-async.js.map +1 -0
  77. package/dist/docs_index_md-async.js +1717 -0
  78. package/dist/docs_index_md-async.js.map +1 -0
  79. package/dist/dumi__tmp__dumi__theme__ContextWrapper-async.js +201 -0
  80. package/dist/dumi__tmp__dumi__theme__ContextWrapper-async.js.map +1 -0
  81. package/dist/meta__docs-async.7338948553039754745.hot-update.js +395 -0
  82. package/dist/meta__docs-async.7338948553039754745.hot-update.js.map +1 -0
  83. package/dist/meta__docs-async.css +396 -0
  84. package/dist/meta__docs-async.css.map +1 -0
  85. package/dist/meta__docs-async.js +2391 -0
  86. package/dist/meta__docs-async.js.map +1 -0
  87. package/dist/nm__dumi__dist__client__pages__404-async.js +69 -0
  88. package/dist/nm__dumi__dist__client__pages__404-async.js.map +1 -0
  89. package/dist/nm__dumi__dist__client__pages__Demo__index-async.js +63 -0
  90. package/dist/nm__dumi__dist__client__pages__Demo__index-async.js.map +1 -0
  91. package/dist/node_modules__dumi_2_4_17_dumi_dist_client_misc_reactDemoCompiler_js-async.js +368 -0
  92. package/dist/node_modules__dumi_2_4_17_dumi_dist_client_misc_reactDemoCompiler_js-async.js.map +1 -0
  93. package/dist/node_modules__dumi_2_4_17_dumi_theme-default_layouts_DocLayout_index_js-async.js +1077 -0
  94. package/dist/node_modules__dumi_2_4_17_dumi_theme-default_layouts_DocLayout_index_js-async.js.map +1 -0
  95. package/dist/node_modules__react-dom_18_3_1_react-dom_server_browser_js-async.js +18 -0
  96. package/dist/node_modules__react-dom_18_3_1_react-dom_server_browser_js-async.js.map +1 -0
  97. package/dist/umi.css +1302 -0
  98. package/dist/umi.css.map +1 -0
  99. package/dist/umi.js +80442 -0
  100. package/dist/umi.js.map +1 -0
  101. package/dist/vendors-async.css +22545 -0
  102. package/dist/vendors-async.css.map +1 -0
  103. package/dist/vendors-async.js +53289 -0
  104. package/dist/vendors-async.js.map +1 -0
  105. package/es/Dialog/Content/Panel.d.ts +2 -2
  106. package/es/Dialog/Content/Panel.js +1 -1
  107. package/es/Dialog/Content/index.d.ts +4 -1
  108. package/es/Dialog/Content/index.js +12 -4
  109. package/es/Dialog/Mask.js +2 -2
  110. package/es/Dialog/index.js +26 -18
  111. package/es/DialogWrap.js +1 -1
  112. package/lib/Dialog/Content/Panel.d.ts +2 -2
  113. package/lib/Dialog/Content/Panel.js +4 -4
  114. package/lib/Dialog/Content/index.d.ts +4 -1
  115. package/lib/Dialog/Content/index.js +15 -7
  116. package/lib/Dialog/Mask.js +5 -5
  117. package/lib/Dialog/index.js +30 -22
  118. package/lib/DialogWrap.js +3 -3
  119. package/lib/index.js +1 -1
  120. package/package.json +10 -15
@@ -7,9 +7,9 @@ export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
7
7
  onMouseUp?: React.MouseEventHandler;
8
8
  holderRef?: React.Ref<HTMLDivElement>;
9
9
  }
10
- export type ContentRef = {
10
+ export type PanelRef = {
11
11
  focus: () => void;
12
12
  changeActive: (next: boolean) => void;
13
13
  };
14
- declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<ContentRef>>;
14
+ declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<PanelRef>>;
15
15
  export default Panel;
@@ -1,4 +1,4 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
  import classNames from 'classnames';
3
3
  import { useComposeRef } from "@rc-component/util/es/ref";
4
4
  import React, { useMemo, useRef } from 'react';
@@ -1,5 +1,8 @@
1
1
  import * as React from 'react';
2
- import type { PanelProps, ContentRef } from './Panel';
2
+ import type { PanelProps, PanelRef } from './Panel';
3
+ import type { CSSMotionRef } from '@rc-component/motion/es/CSSMotion';
4
+ export type CSSMotionStateRef = Pick<CSSMotionRef, 'inMotion' | 'enableMotion'>;
5
+ export type ContentRef = PanelRef & CSSMotionStateRef;
3
6
  export type ContentProps = {
4
7
  motionName: string;
5
8
  ariaId: string;
@@ -1,8 +1,8 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
  import * as React from 'react';
3
3
  import { useRef } from 'react';
4
4
  import classNames from 'classnames';
5
- import CSSMotion from 'rc-motion';
5
+ import CSSMotion from '@rc-component/motion';
6
6
  import { offset } from "../../util";
7
7
  import Panel from "./Panel";
8
8
  const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -20,6 +20,14 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
20
20
  mousePosition
21
21
  } = props;
22
22
  const dialogRef = useRef();
23
+ const panelRef = useRef();
24
+
25
+ // ============================== Refs ==============================
26
+ React.useImperativeHandle(ref, () => ({
27
+ ...panelRef.current,
28
+ inMotion: dialogRef.current.inMotion,
29
+ enableMotion: dialogRef.current.enableMotion
30
+ }));
23
31
 
24
32
  // ============================= Style ==============================
25
33
  const [transformOrigin, setTransformOrigin] = React.useState();
@@ -28,7 +36,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
28
36
  contentStyle.transformOrigin = transformOrigin;
29
37
  }
30
38
  function onPrepare() {
31
- const elementOffset = offset(dialogRef.current);
39
+ const elementOffset = offset(dialogRef.current.nativeElement);
32
40
  setTransformOrigin(mousePosition && (mousePosition.x || mousePosition.y) ? `${mousePosition.x - elementOffset.left}px ${mousePosition.y - elementOffset.top}px` : '');
33
41
  }
34
42
 
@@ -46,7 +54,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
46
54
  className: motionClassName,
47
55
  style: motionStyle
48
56
  }, motionRef) => /*#__PURE__*/React.createElement(Panel, _extends({}, props, {
49
- ref: ref,
57
+ ref: panelRef,
50
58
  title: title,
51
59
  ariaId: ariaId,
52
60
  prefixCls: prefixCls,
package/es/Dialog/Mask.js CHANGED
@@ -1,7 +1,7 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
  import * as React from 'react';
3
3
  import classNames from 'classnames';
4
- import CSSMotion from 'rc-motion';
4
+ import CSSMotion from '@rc-component/motion';
5
5
  const Mask = props => {
6
6
  const {
7
7
  prefixCls,
@@ -1,4 +1,4 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
  import classNames from 'classnames';
3
3
  import contains from "@rc-component/util/es/Dom/contains";
4
4
  import useId from "@rc-component/util/es/hooks/useId";
@@ -69,28 +69,34 @@ const Dialog = props => {
69
69
  }
70
70
 
71
71
  // ========================= Events =========================
72
+ // Close action will trigger by:
73
+ // 1. When hide motion end
74
+ // 2. Controlled `open` to `false` immediately after set to `true` which will not trigger motion
75
+ function doClose() {
76
+ // Clean up scroll bar & focus back
77
+ setAnimatedVisible(false);
78
+ if (mask && lastOutSideActiveElementRef.current && focusTriggerAfterClose) {
79
+ try {
80
+ lastOutSideActiveElementRef.current.focus({
81
+ preventScroll: true
82
+ });
83
+ } catch (e) {
84
+ // Do nothing
85
+ }
86
+ lastOutSideActiveElementRef.current = null;
87
+ }
88
+
89
+ // Trigger afterClose only when change visible from true to false
90
+ if (animatedVisible) {
91
+ afterClose?.();
92
+ }
93
+ }
72
94
  function onDialogVisibleChanged(newVisible) {
73
95
  // Try to focus
74
96
  if (newVisible) {
75
97
  focusDialogContent();
76
98
  } else {
77
- // Clean up scroll bar & focus back
78
- setAnimatedVisible(false);
79
- if (mask && lastOutSideActiveElementRef.current && focusTriggerAfterClose) {
80
- try {
81
- lastOutSideActiveElementRef.current.focus({
82
- preventScroll: true
83
- });
84
- } catch (e) {
85
- // Do nothing
86
- }
87
- lastOutSideActiveElementRef.current = null;
88
- }
89
-
90
- // Trigger afterClose only when change visible from true to false
91
- if (animatedVisible) {
92
- afterClose?.();
93
- }
99
+ doClose();
94
100
  }
95
101
  afterOpenChange?.(newVisible);
96
102
  }
@@ -143,6 +149,8 @@ const Dialog = props => {
143
149
  if (visible) {
144
150
  setAnimatedVisible(true);
145
151
  saveLastOutSideActiveElementRef();
152
+ } else if (animatedVisible && contentRef.current.enableMotion() && !contentRef.current.inMotion()) {
153
+ doClose();
146
154
  }
147
155
  }, [visible]);
148
156
 
package/es/DialogWrap.js CHANGED
@@ -1,4 +1,4 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
  import Portal from '@rc-component/portal';
3
3
  import * as React from 'react';
4
4
  import { RefContext } from "./context";
@@ -7,9 +7,9 @@ export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
7
7
  onMouseUp?: React.MouseEventHandler;
8
8
  holderRef?: React.Ref<HTMLDivElement>;
9
9
  }
10
- export type ContentRef = {
10
+ export type PanelRef = {
11
11
  focus: () => void;
12
12
  changeActive: (next: boolean) => void;
13
13
  };
14
- declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<ContentRef>>;
14
+ declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<PanelRef>>;
15
15
  export default Panel;
@@ -1,11 +1,9 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.default = void 0;
8
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
7
  var _classnames = _interopRequireDefault(require("classnames"));
10
8
  var _ref = require("@rc-component/util/lib/ref");
11
9
  var _react = _interopRequireWildcard(require("react"));
@@ -14,6 +12,8 @@ var _MemoChildren = _interopRequireDefault(require("./MemoChildren"));
14
12
  var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
15
13
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
16
14
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
15
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
17
17
  const sentinelStyle = {
18
18
  width: 0,
19
19
  height: 0,
@@ -120,7 +120,7 @@ const Panel = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
120
120
  }, [closable, closeIcon, prefixCls]);
121
121
  const ariaProps = (0, _pickAttrs.default)(closableObj, true);
122
122
  const closeBtnIsDisabled = typeof closable === 'object' && closable.disabled;
123
- const closerNode = closable ? /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
123
+ const closerNode = closable ? /*#__PURE__*/_react.default.createElement("button", _extends({
124
124
  type: "button",
125
125
  onClick: onClose,
126
126
  "aria-label": "Close"
@@ -131,7 +131,7 @@ const Panel = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
131
131
  const content = /*#__PURE__*/_react.default.createElement("div", {
132
132
  className: (0, _classnames.default)(`${prefixCls}-section`, modalClassNames?.section),
133
133
  style: modalStyles?.section
134
- }, closerNode, headerNode, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
134
+ }, closerNode, headerNode, /*#__PURE__*/_react.default.createElement("div", _extends({
135
135
  className: (0, _classnames.default)(`${prefixCls}-body`, modalClassNames?.body),
136
136
  style: {
137
137
  ...bodyStyle,
@@ -1,5 +1,8 @@
1
1
  import * as React from 'react';
2
- import type { PanelProps, ContentRef } from './Panel';
2
+ import type { PanelProps, PanelRef } from './Panel';
3
+ import type { CSSMotionRef } from '@rc-component/motion/es/CSSMotion';
4
+ export type CSSMotionStateRef = Pick<CSSMotionRef, 'inMotion' | 'enableMotion'>;
5
+ export type ContentRef = PanelRef & CSSMotionStateRef;
3
6
  export type ContentProps = {
4
7
  motionName: string;
5
8
  ariaId: string;
@@ -1,19 +1,19 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.default = void 0;
8
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
7
  var _react = _interopRequireWildcard(require("react"));
10
8
  var React = _react;
11
9
  var _classnames = _interopRequireDefault(require("classnames"));
12
- var _rcMotion = _interopRequireDefault(require("rc-motion"));
10
+ var _motion = _interopRequireDefault(require("@rc-component/motion"));
13
11
  var _util = require("../../util");
14
12
  var _Panel = _interopRequireDefault(require("./Panel"));
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
14
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
16
15
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
16
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
17
17
  const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
18
18
  const {
19
19
  prefixCls,
@@ -29,6 +29,14 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
29
29
  mousePosition
30
30
  } = props;
31
31
  const dialogRef = (0, _react.useRef)();
32
+ const panelRef = (0, _react.useRef)();
33
+
34
+ // ============================== Refs ==============================
35
+ React.useImperativeHandle(ref, () => ({
36
+ ...panelRef.current,
37
+ inMotion: dialogRef.current.inMotion,
38
+ enableMotion: dialogRef.current.enableMotion
39
+ }));
32
40
 
33
41
  // ============================= Style ==============================
34
42
  const [transformOrigin, setTransformOrigin] = React.useState();
@@ -37,12 +45,12 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
37
45
  contentStyle.transformOrigin = transformOrigin;
38
46
  }
39
47
  function onPrepare() {
40
- const elementOffset = (0, _util.offset)(dialogRef.current);
48
+ const elementOffset = (0, _util.offset)(dialogRef.current.nativeElement);
41
49
  setTransformOrigin(mousePosition && (mousePosition.x || mousePosition.y) ? `${mousePosition.x - elementOffset.left}px ${mousePosition.y - elementOffset.top}px` : '');
42
50
  }
43
51
 
44
52
  // ============================= Render =============================
45
- return /*#__PURE__*/React.createElement(_rcMotion.default, {
53
+ return /*#__PURE__*/React.createElement(_motion.default, {
46
54
  visible: visible,
47
55
  onVisibleChanged: onVisibleChanged,
48
56
  onAppearPrepare: onPrepare,
@@ -54,8 +62,8 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
54
62
  }, ({
55
63
  className: motionClassName,
56
64
  style: motionStyle
57
- }, motionRef) => /*#__PURE__*/React.createElement(_Panel.default, (0, _extends2.default)({}, props, {
58
- ref: ref,
65
+ }, motionRef) => /*#__PURE__*/React.createElement(_Panel.default, _extends({}, props, {
66
+ ref: panelRef,
59
67
  title: title,
60
68
  ariaId: ariaId,
61
69
  prefixCls: prefixCls,
@@ -1,16 +1,16 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.default = void 0;
8
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
7
  var React = _interopRequireWildcard(require("react"));
10
8
  var _classnames = _interopRequireDefault(require("classnames"));
11
- var _rcMotion = _interopRequireDefault(require("rc-motion"));
9
+ var _motion = _interopRequireDefault(require("@rc-component/motion"));
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
11
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
13
12
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
13
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
14
14
  const Mask = props => {
15
15
  const {
16
16
  prefixCls,
@@ -20,7 +20,7 @@ const Mask = props => {
20
20
  motionName,
21
21
  className
22
22
  } = props;
23
- return /*#__PURE__*/React.createElement(_rcMotion.default, {
23
+ return /*#__PURE__*/React.createElement(_motion.default, {
24
24
  key: "mask",
25
25
  visible: visible,
26
26
  motionName: motionName,
@@ -28,7 +28,7 @@ const Mask = props => {
28
28
  }, ({
29
29
  className: motionClassName,
30
30
  style: motionStyle
31
- }, ref) => /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
31
+ }, ref) => /*#__PURE__*/React.createElement("div", _extends({
32
32
  ref: ref,
33
33
  style: {
34
34
  ...motionStyle,
@@ -1,11 +1,9 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.default = void 0;
8
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
7
  var _classnames = _interopRequireDefault(require("classnames"));
10
8
  var _contains = _interopRequireDefault(require("@rc-component/util/lib/Dom/contains"));
11
9
  var _useId = _interopRequireDefault(require("@rc-component/util/lib/hooks/useId"));
@@ -19,6 +17,8 @@ var _Mask = _interopRequireDefault(require("./Mask"));
19
17
  var _warning = require("@rc-component/util/lib/warning");
20
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
21
19
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
20
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
22
22
  const Dialog = props => {
23
23
  const {
24
24
  prefixCls = 'rc-dialog',
@@ -78,28 +78,34 @@ const Dialog = props => {
78
78
  }
79
79
 
80
80
  // ========================= Events =========================
81
+ // Close action will trigger by:
82
+ // 1. When hide motion end
83
+ // 2. Controlled `open` to `false` immediately after set to `true` which will not trigger motion
84
+ function doClose() {
85
+ // Clean up scroll bar & focus back
86
+ setAnimatedVisible(false);
87
+ if (mask && lastOutSideActiveElementRef.current && focusTriggerAfterClose) {
88
+ try {
89
+ lastOutSideActiveElementRef.current.focus({
90
+ preventScroll: true
91
+ });
92
+ } catch (e) {
93
+ // Do nothing
94
+ }
95
+ lastOutSideActiveElementRef.current = null;
96
+ }
97
+
98
+ // Trigger afterClose only when change visible from true to false
99
+ if (animatedVisible) {
100
+ afterClose?.();
101
+ }
102
+ }
81
103
  function onDialogVisibleChanged(newVisible) {
82
104
  // Try to focus
83
105
  if (newVisible) {
84
106
  focusDialogContent();
85
107
  } else {
86
- // Clean up scroll bar & focus back
87
- setAnimatedVisible(false);
88
- if (mask && lastOutSideActiveElementRef.current && focusTriggerAfterClose) {
89
- try {
90
- lastOutSideActiveElementRef.current.focus({
91
- preventScroll: true
92
- });
93
- } catch (e) {
94
- // Do nothing
95
- }
96
- lastOutSideActiveElementRef.current = null;
97
- }
98
-
99
- // Trigger afterClose only when change visible from true to false
100
- if (animatedVisible) {
101
- afterClose?.();
102
- }
108
+ doClose();
103
109
  }
104
110
  afterOpenChange?.(newVisible);
105
111
  }
@@ -152,6 +158,8 @@ const Dialog = props => {
152
158
  if (visible) {
153
159
  setAnimatedVisible(true);
154
160
  saveLastOutSideActiveElementRef();
161
+ } else if (animatedVisible && contentRef.current.enableMotion() && !contentRef.current.inMotion()) {
162
+ doClose();
155
163
  }
156
164
  }, [visible]);
157
165
 
@@ -167,7 +175,7 @@ const Dialog = props => {
167
175
  };
168
176
 
169
177
  // ========================= Render =========================
170
- return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
178
+ return /*#__PURE__*/React.createElement("div", _extends({
171
179
  className: (0, _classnames.default)(`${prefixCls}-root`, rootClassName),
172
180
  style: rootStyle
173
181
  }, (0, _pickAttrs.default)(props, {
@@ -183,14 +191,14 @@ const Dialog = props => {
183
191
  },
184
192
  maskProps: maskProps,
185
193
  className: modalClassNames?.mask
186
- }), /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
194
+ }), /*#__PURE__*/React.createElement("div", _extends({
187
195
  tabIndex: -1,
188
196
  onKeyDown: onWrapperKeyDown,
189
197
  className: (0, _classnames.default)(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper),
190
198
  ref: wrapperRef,
191
199
  onClick: onWrapperClick,
192
200
  style: mergedStyle
193
- }, wrapProps), /*#__PURE__*/React.createElement(_Content.default, (0, _extends2.default)({}, props, {
201
+ }, wrapProps), /*#__PURE__*/React.createElement(_Content.default, _extends({}, props, {
194
202
  onMouseDown: onContentMouseDown,
195
203
  onMouseUp: onContentMouseUp,
196
204
  ref: contentRef,
package/lib/DialogWrap.js CHANGED
@@ -1,17 +1,17 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.default = void 0;
8
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
7
  var _portal = _interopRequireDefault(require("@rc-component/portal"));
10
8
  var React = _interopRequireWildcard(require("react"));
11
9
  var _context = require("./context");
12
10
  var _Dialog = _interopRequireDefault(require("./Dialog"));
13
11
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
14
12
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
15
15
  // fix issue #10656
16
16
  /*
17
17
  * getContainer remarks
@@ -51,7 +51,7 @@ const DialogWrap = props => {
51
51
  autoDestroy: false,
52
52
  getContainer: getContainer,
53
53
  autoLock: visible || animatedVisible
54
- }, /*#__PURE__*/React.createElement(_Dialog.default, (0, _extends2.default)({}, props, {
54
+ }, /*#__PURE__*/React.createElement(_Dialog.default, _extends({}, props, {
55
55
  destroyOnClose: destroyOnClose,
56
56
  afterClose: () => {
57
57
  afterClose?.();
package/lib/index.js CHANGED
@@ -1,6 +1,5 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
@@ -13,4 +12,5 @@ Object.defineProperty(exports, "Panel", {
13
12
  exports.default = void 0;
14
13
  var _DialogWrap = _interopRequireDefault(require("./DialogWrap"));
15
14
  var _Panel = _interopRequireDefault(require("./Dialog/Content/Panel"));
15
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
16
  var _default = exports.default = _DialogWrap.default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/dialog",
3
- "version": "1.0.1",
3
+ "version": "1.1.0",
4
4
  "description": "dialog ui component for react",
5
5
  "keywords": [
6
6
  "react",
@@ -37,7 +37,7 @@
37
37
  "lint:tsc": "tsc -p tsconfig.json --noEmit",
38
38
  "now-build": "npm run docs:build",
39
39
  "prepare": "husky install",
40
- "prepublishOnly": "npm run compile && np --yolo --no-publish",
40
+ "prepublishOnly": "npm run compile && rc-np",
41
41
  "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
42
42
  "start": "dumi dev",
43
43
  "test": "rc-test"
@@ -49,17 +49,16 @@
49
49
  ]
50
50
  },
51
51
  "dependencies": {
52
- "@babel/runtime": "^7.10.1",
53
52
  "@rc-component/portal": "^1.0.0-8",
54
53
  "@rc-component/util": "^1.0.1",
55
54
  "classnames": "^2.2.6",
56
- "rc-motion": "^2.3.0"
55
+ "@rc-component/motion": "^1.1.3"
57
56
  },
58
57
  "devDependencies": {
59
- "@rc-component/father-plugin": "^2.0.1",
58
+ "@rc-component/father-plugin": "^2.0.2",
59
+ "@rc-component/np": "^1.0.3",
60
60
  "@testing-library/jest-dom": "^6.1.6",
61
- "@testing-library/react": "^12.0.0",
62
- "@types/enzyme": "^3.10.7",
61
+ "@testing-library/react": "^13.0.0",
63
62
  "@types/jest": "^29.4.0",
64
63
  "@types/keyv": "3.1.4",
65
64
  "@types/react": "^18.0.24",
@@ -69,9 +68,6 @@
69
68
  "cheerio": "1.0.0-rc.12",
70
69
  "cross-env": "^7.0.0",
71
70
  "dumi": "^2.1.3",
72
- "enzyme": "^3.1.1",
73
- "enzyme-adapter-react-16": "^1.0.1",
74
- "enzyme-to-json": "^3.1.2",
75
71
  "eslint": "^7.1.0",
76
72
  "eslint-config-airbnb": "^19.0.4",
77
73
  "eslint-plugin-react": "^7.20.6",
@@ -81,18 +77,17 @@
81
77
  "husky": "^8.0.3",
82
78
  "less": "^4.1.3",
83
79
  "lint-staged": "^15.2.0",
84
- "np": "^10.0.5",
85
80
  "prettier": "^3.2.1",
86
81
  "rc-drawer": "^7.0.0",
87
82
  "rc-select": "^14.11.0",
88
83
  "rc-test": "^7.0.14",
89
- "react": "^16.9.0",
90
- "react-dom": "^16.9.0",
84
+ "react": "^18.0.0",
85
+ "react-dom": "^18.0.0",
91
86
  "react-draggable": "^4.4.3",
92
87
  "typescript": "^5.4.3"
93
88
  },
94
89
  "peerDependencies": {
95
- "react": ">=16.9.0",
96
- "react-dom": ">=16.9.0"
90
+ "react": ">=18.0.0",
91
+ "react-dom": ">=18.0.0"
97
92
  }
98
93
  }