@rc-component/dialog 1.6.1 → 1.7.0

package/es/Dialog/Content/index.js

@@ -36,6 +36,9 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     contentStyle.transformOrigin = transformOrigin;
   }
   function onPrepare() {
+    if (!dialogRef.current?.nativeElement) {
+      return;
+    }
     const elementOffset = offset(dialogRef.current.nativeElement);
     setTransformOrigin(mousePosition && (mousePosition.x || mousePosition.y) ? `${mousePosition.x - elementOffset.left}px ${mousePosition.y - elementOffset.top}px` : '');
   }

package/es/Dialog/index.js

@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import { clsx } from 'clsx';
 import contains from "@rc-component/util/es/Dom/contains";
 import useId from "@rc-component/util/es/hooks/useId";
-import KeyCode from "@rc-component/util/es/KeyCode";
 import pickAttrs from "@rc-component/util/es/pickAttrs";
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
@@ -15,10 +14,7 @@ const Dialog = props => {
     prefixCls = 'rc-dialog',
     zIndex,
     visible = false,
-    keyboard = true,
     focusTriggerAfterClose = true,
-    // scrollLocker,
-    // Wrapper
     wrapStyle,
     wrapClassName,
     wrapProps,
@@ -131,13 +127,6 @@ const Dialog = props => {
       }
     };
   }
-  function onWrapperKeyDown(e) {
-    if (keyboard && e.keyCode === KeyCode.ESC) {
-      e.stopPropagation();
-      onInternalClose(e);
-      return;
-    }
-  }
 
   // ========================= Effect =========================
   useEffect(() => {
@@ -184,7 +173,6 @@ const Dialog = props => {
     maskProps: maskProps,
     className: modalClassNames?.mask
   }), /*#__PURE__*/React.createElement("div", _extends({
-    onKeyDown: onWrapperKeyDown,
     className: clsx(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper),
     ref: wrapperRef,
     onClick: onWrapperClick,

package/es/DialogWrap.js

@@ -20,12 +20,24 @@ const DialogWrap = props => {
     destroyOnHidden = false,
     afterClose,
     closable,
-    panelRef
+    panelRef,
+    keyboard = true,
+    onClose
   } = props;
   const [animatedVisible, setAnimatedVisible] = React.useState(visible);
   const refContext = React.useMemo(() => ({
     panel: panelRef
   }), [panelRef]);
+  const onEsc = ({
+    top,
+    event
+  }) => {
+    if (top && keyboard) {
+      event.stopPropagation();
+      onClose?.(event);
+      return;
+    }
+  };
   React.useEffect(() => {
     if (visible) {
       setAnimatedVisible(true);
@@ -40,6 +52,7 @@ const DialogWrap = props => {
     value: refContext
   }, /*#__PURE__*/React.createElement(Portal, {
     open: visible || forceRender || animatedVisible,
+    onEsc: onEsc,
     autoDestroy: false,
     getContainer: getContainer,
     autoLock: visible || animatedVisible

package/es/IDialogPropTypes.d.ts

@@ -17,7 +17,7 @@ export type IDialogPropTypes = {
     children?: React.ReactNode;
     afterClose?: () => any;
     afterOpenChange?: (open: boolean) => void;
-    onClose?: (e: SyntheticEvent) => any;
+    onClose?: (e: SyntheticEvent | KeyboardEvent) => any;
     closable?: boolean | (ClosableType & React.AriaAttributes);
     maskClosable?: boolean;
     visible?: boolean;

package/lib/Dialog/Content/index.js

@@ -45,6 +45,9 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     contentStyle.transformOrigin = transformOrigin;
   }
   function onPrepare() {
+    if (!dialogRef.current?.nativeElement) {
+      return;
+    }
     const elementOffset = (0, _util.offset)(dialogRef.current.nativeElement);
     setTransformOrigin(mousePosition && (mousePosition.x || mousePosition.y) ? `${mousePosition.x - elementOffset.left}px ${mousePosition.y - elementOffset.top}px` : '');
   }

package/lib/Dialog/index.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _clsx = require("clsx");
 var _contains = _interopRequireDefault(require("@rc-component/util/lib/Dom/contains"));
 var _useId = _interopRequireDefault(require("@rc-component/util/lib/hooks/useId"));
-var _KeyCode = _interopRequireDefault(require("@rc-component/util/lib/KeyCode"));
 var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
@@ -24,10 +23,7 @@ const Dialog = props => {
     prefixCls = 'rc-dialog',
     zIndex,
     visible = false,
-    keyboard = true,
     focusTriggerAfterClose = true,
-    // scrollLocker,
-    // Wrapper
     wrapStyle,
     wrapClassName,
     wrapProps,
@@ -140,13 +136,6 @@ const Dialog = props => {
       }
     };
   }
-  function onWrapperKeyDown(e) {
-    if (keyboard && e.keyCode === _KeyCode.default.ESC) {
-      e.stopPropagation();
-      onInternalClose(e);
-      return;
-    }
-  }
 
   // ========================= Effect =========================
   (0, _react.useEffect)(() => {
@@ -193,7 +182,6 @@ const Dialog = props => {
     maskProps: maskProps,
     className: modalClassNames?.mask
   }), /*#__PURE__*/React.createElement("div", _extends({
-    onKeyDown: onWrapperKeyDown,
     className: (0, _clsx.clsx)(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper),
     ref: wrapperRef,
     onClick: onWrapperClick,

package/lib/DialogWrap.js

@@ -29,12 +29,24 @@ const DialogWrap = props => {
     destroyOnHidden = false,
     afterClose,
     closable,
-    panelRef
+    panelRef,
+    keyboard = true,
+    onClose
   } = props;
   const [animatedVisible, setAnimatedVisible] = React.useState(visible);
   const refContext = React.useMemo(() => ({
     panel: panelRef
   }), [panelRef]);
+  const onEsc = ({
+    top,
+    event
+  }) => {
+    if (top && keyboard) {
+      event.stopPropagation();
+      onClose?.(event);
+      return;
+    }
+  };
   React.useEffect(() => {
     if (visible) {
       setAnimatedVisible(true);
@@ -49,6 +61,7 @@ const DialogWrap = props => {
     value: refContext
   }, /*#__PURE__*/React.createElement(_portal.default, {
     open: visible || forceRender || animatedVisible,
+    onEsc: onEsc,
     autoDestroy: false,
     getContainer: getContainer,
     autoLock: visible || animatedVisible

package/lib/IDialogPropTypes.d.ts

@@ -17,7 +17,7 @@ export type IDialogPropTypes = {
     children?: React.ReactNode;
     afterClose?: () => any;
     afterOpenChange?: (open: boolean) => void;
-    onClose?: (e: SyntheticEvent) => any;
+    onClose?: (e: SyntheticEvent | KeyboardEvent) => any;
     closable?: boolean | (ClosableType & React.AriaAttributes);
     maskClosable?: boolean;
     visible?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/dialog",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "dialog ui component for react",
   "keywords": [
     "react",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@rc-component/motion": "^1.1.3",
-    "@rc-component/portal": "^2.0.0",
+    "@rc-component/portal": "^2.1.0",
     "@rc-component/util": "^1.5.0",
     "clsx": "^2.1.1"
   },
@@ -67,10 +67,10 @@
     "@types/node": "^24.0.8",
     "@types/react": "^19.1.4",
     "@types/react-dom": "^19.1.5",
-    "@umijs/fabric": "^3.0.0",
+    "@umijs/fabric": "^4.0.0",
     "bootstrap": "^5.3.7",
     "dumi": "^2.1.3",
-    "eslint": "^7.1.0",
+    "eslint": "8.x",
     "father": "^4.1.5",
     "gh-pages": "^6.1.1",
     "glob": "^11.0.0",
@@ -88,4 +88,4 @@
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   }
-}
+}