@rc-component/dialog 1.6.0 → 1.6.1

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

@@ -6,6 +6,8 @@ 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;

package/es/Dialog/Content/Panel.js

@@ -29,7 +29,8 @@ const Panel = /*#__PURE__*/React.forwardRef((props, ref) => {
     width,
     height,
     classNames: modalClassNames,
-    styles: modalStyles
+    styles: modalStyles,
+    isFixedPos
   } = props;
 
   // ================================= Refs =================================
@@ -38,7 +39,7 @@ const Panel = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = React.useContext(RefContext);
   const internalRef = useRef(null);
   const mergedRef = useComposeRef(holderRef, panelRef, internalRef);
-  useLockFocus(visible, () => internalRef.current);
+  useLockFocus(visible && isFixedPos, () => internalRef.current);
   React.useImperativeHandle(ref, () => ({
     focus: () => {
       internalRef.current?.focus({

package/es/Dialog/index.js

@@ -53,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();
@@ -107,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;
@@ -143,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,6 +190,7 @@ const Dialog = props => {
     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,6 +6,8 @@ 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;

package/lib/Dialog/Content/Panel.js

@@ -38,7 +38,8 @@ const Panel = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     width,
     height,
     classNames: modalClassNames,
-    styles: modalStyles
+    styles: modalStyles,
+    isFixedPos
   } = props;
 
   // ================================= Refs =================================
@@ -47,7 +48,7 @@ const Panel = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   } = _react.default.useContext(_context.RefContext);
   const internalRef = (0, _react.useRef)(null);
   const mergedRef = (0, _ref.useComposeRef)(holderRef, panelRef, internalRef);
-  (0, _focus.useLockFocus)(visible, () => internalRef.current);
+  (0, _focus.useLockFocus)(visible && isFixedPos, () => internalRef.current);
   _react.default.useImperativeHandle(ref, () => ({
     focus: () => {
       internalRef.current?.focus({

package/lib/Dialog/index.js

@@ -62,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)();
@@ -116,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;
@@ -152,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,6 +199,7 @@ const Dialog = props => {
     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.6.0",
+  "version": "1.6.1",
   "description": "dialog ui component for react",
   "keywords": [
     "react",