@rc-component/dialog 1.5.1 → 1.6.0

package/es/Dialog/Content/Panel.d.ts

@@ -9,7 +9,6 @@ export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
 }
 export type PanelRef = {
     focus: () => void;
-    changeActive: (next: boolean) => void;
 };
 declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<PanelRef>>;
 export default Panel;

package/es/Dialog/Content/Panel.js

@@ -1,19 +1,11 @@
 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); }
 import { clsx } from 'clsx';
 import { useComposeRef } from "@rc-component/util/es/ref";
+import { useLockFocus } from "@rc-component/util/es/Dom/focus";
 import React, { useMemo, useRef } from 'react';
 import { RefContext } from "../../context";
 import MemoChildren from "./MemoChildren";
 import pickAttrs from "@rc-component/util/es/pickAttrs";
-const sentinelStyle = {
-  width: 0,
-  height: 0,
-  overflow: 'hidden',
-  outline: 'none'
-};
-const entityStyle = {
-  outline: 'none'
-};
 const Panel = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     prefixCls,
@@ -44,28 +36,14 @@ const Panel = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     panel: panelRef
   } = React.useContext(RefContext);
-  const mergedRef = useComposeRef(holderRef, panelRef);
-  const sentinelStartRef = useRef(null);
-  const sentinelEndRef = useRef(null);
+  const internalRef = useRef(null);
+  const mergedRef = useComposeRef(holderRef, panelRef, internalRef);
+  useLockFocus(visible, () => internalRef.current);
   React.useImperativeHandle(ref, () => ({
     focus: () => {
-      sentinelStartRef.current?.focus({
+      internalRef.current?.focus({
         preventScroll: true
       });
-    },
-    changeActive: next => {
-      const {
-        activeElement
-      } = document;
-      if (next && activeElement === sentinelEndRef.current) {
-        sentinelStartRef.current.focus({
-          preventScroll: true
-        });
-      } else if (!next && activeElement === sentinelStartRef.current) {
-        sentinelEndRef.current.focus({
-          preventScroll: true
-        });
-      }
     }
   }));
 
@@ -141,18 +119,11 @@ const Panel = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     className: clsx(prefixCls, className),
     onMouseDown: onMouseDown,
-    onMouseUp: onMouseUp
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: sentinelStartRef,
-    tabIndex: 0,
-    style: entityStyle
+    onMouseUp: onMouseUp,
+    tabIndex: -1
   }, /*#__PURE__*/React.createElement(MemoChildren, {
     shouldUpdate: visible || forceRender
-  }, modalRender ? modalRender(content) : content)), /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
-    ref: sentinelEndRef,
-    style: sentinelStyle
-  }));
+  }, modalRender ? modalRender(content) : content));
 });
 if (process.env.NODE_ENV !== 'production') {
   Panel.displayName = 'Panel';

package/es/Dialog/index.js

@@ -43,7 +43,6 @@ const Dialog = props => {
   } = props;
   if (process.env.NODE_ENV !== 'production') {
     ['wrapStyle', 'bodyStyle', 'maskStyle'].forEach(prop => {
-      // (prop in props) && console.error(`Warning: ${prop} is deprecated, please use styles instead.`)
       warning(!(prop in props), `${prop} is deprecated, please use styles instead.`);
     });
     if ('wrapClassName' in props) {
@@ -137,11 +136,6 @@ const Dialog = props => {
       onInternalClose(e);
       return;
     }
-
-    // keep focus inside dialog
-    if (visible && e.keyCode === KeyCode.TAB) {
-      contentRef.current.changeActive(!e.shiftKey);
-    }
   }
 
   // ========================= Effect =========================
@@ -183,7 +177,6 @@ const Dialog = props => {
     maskProps: maskProps,
     className: modalClassNames?.mask
   }), /*#__PURE__*/React.createElement("div", _extends({
-    tabIndex: -1,
     onKeyDown: onWrapperKeyDown,
     className: clsx(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper),
     ref: wrapperRef,

package/lib/Dialog/Content/Panel.d.ts

@@ -9,7 +9,6 @@ export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
 }
 export type PanelRef = {
     focus: () => void;
-    changeActive: (next: boolean) => void;
 };
 declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<PanelRef>>;
 export default Panel;

package/lib/Dialog/Content/Panel.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _clsx = require("clsx");
 var _ref = require("@rc-component/util/lib/ref");
+var _focus = require("@rc-component/util/lib/Dom/focus");
 var _react = _interopRequireWildcard(require("react"));
 var _context = require("../../context");
 var _MemoChildren = _interopRequireDefault(require("./MemoChildren"));
@@ -14,15 +15,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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); }
 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; }
 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); }
-const sentinelStyle = {
-  width: 0,
-  height: 0,
-  overflow: 'hidden',
-  outline: 'none'
-};
-const entityStyle = {
-  outline: 'none'
-};
 const Panel = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     prefixCls,
@@ -53,28 +45,14 @@ const Panel = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     panel: panelRef
   } = _react.default.useContext(_context.RefContext);
-  const mergedRef = (0, _ref.useComposeRef)(holderRef, panelRef);
-  const sentinelStartRef = (0, _react.useRef)(null);
-  const sentinelEndRef = (0, _react.useRef)(null);
+  const internalRef = (0, _react.useRef)(null);
+  const mergedRef = (0, _ref.useComposeRef)(holderRef, panelRef, internalRef);
+  (0, _focus.useLockFocus)(visible, () => internalRef.current);
   _react.default.useImperativeHandle(ref, () => ({
     focus: () => {
-      sentinelStartRef.current?.focus({
+      internalRef.current?.focus({
         preventScroll: true
       });
-    },
-    changeActive: next => {
-      const {
-        activeElement
-      } = document;
-      if (next && activeElement === sentinelEndRef.current) {
-        sentinelStartRef.current.focus({
-          preventScroll: true
-        });
-      } else if (!next && activeElement === sentinelStartRef.current) {
-        sentinelEndRef.current.focus({
-          preventScroll: true
-        });
-      }
     }
   }));
 
@@ -150,18 +128,11 @@ const Panel = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     },
     className: (0, _clsx.clsx)(prefixCls, className),
     onMouseDown: onMouseDown,
-    onMouseUp: onMouseUp
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: sentinelStartRef,
-    tabIndex: 0,
-    style: entityStyle
+    onMouseUp: onMouseUp,
+    tabIndex: -1
   }, /*#__PURE__*/_react.default.createElement(_MemoChildren.default, {
     shouldUpdate: visible || forceRender
-  }, modalRender ? modalRender(content) : content)), /*#__PURE__*/_react.default.createElement("div", {
-    tabIndex: 0,
-    ref: sentinelEndRef,
-    style: sentinelStyle
-  }));
+  }, modalRender ? modalRender(content) : content));
 });
 if (process.env.NODE_ENV !== 'production') {
   Panel.displayName = 'Panel';

package/lib/Dialog/index.js

@@ -52,7 +52,6 @@ const Dialog = props => {
   } = props;
   if (process.env.NODE_ENV !== 'production') {
     ['wrapStyle', 'bodyStyle', 'maskStyle'].forEach(prop => {
-      // (prop in props) && console.error(`Warning: ${prop} is deprecated, please use styles instead.`)
       (0, _warning.warning)(!(prop in props), `${prop} is deprecated, please use styles instead.`);
     });
     if ('wrapClassName' in props) {
@@ -146,11 +145,6 @@ const Dialog = props => {
       onInternalClose(e);
       return;
     }
-
-    // keep focus inside dialog
-    if (visible && e.keyCode === _KeyCode.default.TAB) {
-      contentRef.current.changeActive(!e.shiftKey);
-    }
   }
 
   // ========================= Effect =========================
@@ -192,7 +186,6 @@ const Dialog = props => {
     maskProps: maskProps,
     className: modalClassNames?.mask
   }), /*#__PURE__*/React.createElement("div", _extends({
-    tabIndex: -1,
     onKeyDown: onWrapperKeyDown,
     className: (0, _clsx.clsx)(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper),
     ref: wrapperRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/dialog",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "dialog ui component for react",
   "keywords": [
     "react",
@@ -52,7 +52,7 @@
   "dependencies": {
     "@rc-component/motion": "^1.1.3",
     "@rc-component/portal": "^2.0.0",
-    "@rc-component/util": "^1.0.1",
+    "@rc-component/util": "^1.5.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {