@rc-component/dialog 1.5.1 → 1.6.1

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

@@ -6,10 +6,11 @@ export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
     onMouseDown?: React.MouseEventHandler;
     onMouseUp?: React.MouseEventHandler;
     holderRef?: React.Ref<HTMLDivElement>;
+    /** Used for focus lock. When true and open, focus will lock into the panel */
+    isFixedPos?: boolean;
 }
 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,
@@ -37,35 +29,22 @@ const Panel = /*#__PURE__*/React.forwardRef((props, ref) => {
     width,
     height,
     classNames: modalClassNames,
-    styles: modalStyles
+    styles: modalStyles,
+    isFixedPos
   } = props;
 
   // ================================= Refs =================================
   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 && isFixedPos, () => 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 +120,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) {
@@ -54,6 +53,7 @@ const Dialog = props => {
   const wrapperRef = useRef(null);
   const contentRef = useRef(null);
   const [animatedVisible, setAnimatedVisible] = React.useState(visible);
+  const [isFixedPos, setIsFixedPos] = React.useState(false);
 
   // ========================== Init ==========================
   const ariaId = useId();
@@ -108,7 +108,7 @@ const Dialog = props => {
   const contentClickRef = useRef(false);
   const contentTimeoutRef = useRef(null);
 
-  // We need record content click incase content popup out of dialog
+  // We need record content click in case content popup out of dialog
   const onContentMouseDown = () => {
     clearTimeout(contentTimeoutRef.current);
     contentClickRef.current = true;
@@ -137,11 +137,6 @@ const Dialog = props => {
       onInternalClose(e);
       return;
     }
-
-    // keep focus inside dialog
-    if (visible && e.keyCode === KeyCode.TAB) {
-      contentRef.current.changeActive(!e.shiftKey);
-    }
   }
 
   // ========================= Effect =========================
@@ -149,6 +144,12 @@ const Dialog = props => {
     if (visible) {
       setAnimatedVisible(true);
       saveLastOutSideActiveElementRef();
+
+      // Calc the position style
+      if (wrapperRef.current) {
+        const computedWrapStyle = getComputedStyle(wrapperRef.current);
+        setIsFixedPos(computedWrapStyle.position === 'fixed');
+      }
     } else if (animatedVisible && contentRef.current.enableMotion() && !contentRef.current.inMotion()) {
       doClose();
     }
@@ -183,13 +184,13 @@ 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,
     onClick: onWrapperClick,
     style: mergedStyle
   }, wrapProps), /*#__PURE__*/React.createElement(Content, _extends({}, props, {
+    isFixedPos: isFixedPos,
     onMouseDown: onContentMouseDown,
     onMouseUp: onContentMouseUp,
     ref: contentRef,

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

@@ -6,10 +6,11 @@ export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
     onMouseDown?: React.MouseEventHandler;
     onMouseUp?: React.MouseEventHandler;
     holderRef?: React.Ref<HTMLDivElement>;
+    /** Used for focus lock. When true and open, focus will lock into the panel */
+    isFixedPos?: boolean;
 }
 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,
@@ -46,35 +38,22 @@ const Panel = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     width,
     height,
     classNames: modalClassNames,
-    styles: modalStyles
+    styles: modalStyles,
+    isFixedPos
   } = props;
 
   // ================================= Refs =================================
   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 && isFixedPos, () => 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 +129,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) {
@@ -63,6 +62,7 @@ const Dialog = props => {
   const wrapperRef = (0, _react.useRef)(null);
   const contentRef = (0, _react.useRef)(null);
   const [animatedVisible, setAnimatedVisible] = React.useState(visible);
+  const [isFixedPos, setIsFixedPos] = React.useState(false);
 
   // ========================== Init ==========================
   const ariaId = (0, _useId.default)();
@@ -117,7 +117,7 @@ const Dialog = props => {
   const contentClickRef = (0, _react.useRef)(false);
   const contentTimeoutRef = (0, _react.useRef)(null);
 
-  // We need record content click incase content popup out of dialog
+  // We need record content click in case content popup out of dialog
   const onContentMouseDown = () => {
     clearTimeout(contentTimeoutRef.current);
     contentClickRef.current = true;
@@ -146,11 +146,6 @@ const Dialog = props => {
       onInternalClose(e);
       return;
     }
-
-    // keep focus inside dialog
-    if (visible && e.keyCode === _KeyCode.default.TAB) {
-      contentRef.current.changeActive(!e.shiftKey);
-    }
   }
 
   // ========================= Effect =========================
@@ -158,6 +153,12 @@ const Dialog = props => {
     if (visible) {
       setAnimatedVisible(true);
       saveLastOutSideActiveElementRef();
+
+      // Calc the position style
+      if (wrapperRef.current) {
+        const computedWrapStyle = getComputedStyle(wrapperRef.current);
+        setIsFixedPos(computedWrapStyle.position === 'fixed');
+      }
     } else if (animatedVisible && contentRef.current.enableMotion() && !contentRef.current.inMotion()) {
       doClose();
     }
@@ -192,13 +193,13 @@ 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,
     onClick: onWrapperClick,
     style: mergedStyle
   }, wrapProps), /*#__PURE__*/React.createElement(_Content.default, _extends({}, props, {
+    isFixedPos: isFixedPos,
     onMouseDown: onContentMouseDown,
     onMouseUp: onContentMouseUp,
     ref: contentRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/dialog",
-  "version": "1.5.1",
+  "version": "1.6.1",
   "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": {