@versini/ui-modal 3.3.1 → 3.3.3

package/dist/index.d.ts

@@ -1,7 +1,11 @@
 import { JSX } from 'react/jsx-runtime';
 import * as React_2 from 'react';
 
-export declare function Modal({ children, ...options }: {
+/**
+ * Modal component that supports proper nesting with ESC key handling.
+ * Automatically wraps root modals in FloatingTree for nested modal support.
+ */
+export declare function Modal(props: {
     children: React_2.ReactNode;
 } & ModalTypes.Options): JSX.Element;
 

package/dist/index.js

@@ -1,10 +1,10 @@
 /*!
-  @versini/ui-modal v3.3.1
+  @versini/ui-modal v3.3.3
   © 2025 gizmette.com
 */
 
 import { jsx } from "react/jsx-runtime";
-import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useMergeRefs, useRole } from "@floating-ui/react";
+import { FloatingFocusManager, FloatingNode, FloatingOverlay, FloatingPortal, FloatingTree, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useInteractions, useMergeRefs, useRole } from "@floating-ui/react";
 import clsx from "clsx";
 import { cloneElement, createContext, forwardRef, useCallback, useContext, useId, useLayoutEffect, useMemo, useState } from "react";
 
@@ -30,7 +30,10 @@ function useModal({ initialOpen = false, open: controlledOpen, onOpenChange: set
     const [descriptionId, setDescriptionId] = useState();
     /* v8 ignore start */ const open = controlledOpen ?? uncontrolledOpen;
     const setOpen = setControlledOpen ?? setUncontrolledOpen;
-    /* v8 ignore stop */ const data = useFloating({
+    /* v8 ignore stop */ // Subscribe this modal to the FloatingTree for nested modal support
+    const nodeId = useFloatingNodeId();
+    const data = useFloating({
+        nodeId,
         open,
         onOpenChange: setOpen
     });
@@ -40,7 +43,10 @@ function useModal({ initialOpen = false, open: controlledOpen, onOpenChange: set
     });
     const dismiss = useDismiss(context, {
         outsidePress: false,
-        outsidePressEvent: "mousedown"
+        outsidePressEvent: "mousedown",
+        bubbles: {
+            escapeKey: false
+        }
     });
     const role = useRole(context);
     const interactions = useInteractions([
@@ -57,7 +63,8 @@ function useModal({ initialOpen = false, open: controlledOpen, onOpenChange: set
             descriptionId,
             setLabelId,
             setDescriptionId,
-            initialFocus
+            initialFocus,
+            nodeId
         }), [
         open,
         setOpen,
@@ -65,7 +72,8 @@ function useModal({ initialOpen = false, open: controlledOpen, onOpenChange: set
         data,
         labelId,
         descriptionId,
-        initialFocus
+        initialFocus,
+        nodeId
     ]);
 }
 const useModalContext = ()=>{
@@ -84,15 +92,33 @@ const useModalContext = ()=>{
 
 
 
-function Modal({ children, ...options }) {
+function ModalComponent({ children, ...options }) {
     const dialog = useModal(options);
     return /*#__PURE__*/ jsx(ModalContext.Provider, {
         value: dialog,
         children: children
     });
 }
+/**
+ * Modal component that supports proper nesting with ESC key handling.
+ * Automatically wraps root modals in FloatingTree for nested modal support.
+ */ function Modal(props) {
+    const parentId = useFloatingParentNodeId();
+    // If this is a root modal (no parent), wrap with FloatingTree
+    if (parentId === null) {
+        return /*#__PURE__*/ jsx(FloatingTree, {
+            children: /*#__PURE__*/ jsx(ModalComponent, {
+                ...props
+            })
+        });
+    }
+    // Nested modal - FloatingTree already exists
+    return /*#__PURE__*/ jsx(ModalComponent, {
+        ...props
+    });
+}
 const Modal_ModalContent = /*#__PURE__*/ forwardRef(function ModalContent(props, propRef) {
-    const { context: floatingContext, ...context } = useModalContext();
+    const { context: floatingContext, nodeId, ...context } = useModalContext();
     const ref = useMergeRefs([
         context.refs.setFloating,
         propRef
@@ -105,19 +131,22 @@ const Modal_ModalContent = /*#__PURE__*/ forwardRef(function ModalContent(props,
         [`${overlayBackground}`]: overlayBackground,
         "bg-black sm:bg-black/[.8]": !overlayBackground
     });
-    return /*#__PURE__*/ jsx(FloatingPortal, {
-        children: /*#__PURE__*/ jsx(FloatingOverlay, {
-            className: overlayClass,
-            lockScroll: true,
-            children: /*#__PURE__*/ jsx(FloatingFocusManager, {
-                context: floatingContext,
-                initialFocus: context.initialFocus,
-                children: /*#__PURE__*/ jsx("div", {
-                    ref: ref,
-                    "aria-labelledby": context.labelId,
-                    "aria-describedby": context.descriptionId,
-                    ...context.getFloatingProps(rest),
-                    children: rest.children
+    return /*#__PURE__*/ jsx(FloatingNode, {
+        id: nodeId,
+        children: /*#__PURE__*/ jsx(FloatingPortal, {
+            children: /*#__PURE__*/ jsx(FloatingOverlay, {
+                className: overlayClass,
+                lockScroll: true,
+                children: /*#__PURE__*/ jsx(FloatingFocusManager, {
+                    context: floatingContext,
+                    initialFocus: context.initialFocus,
+                    children: /*#__PURE__*/ jsx("div", {
+                        ref: ref,
+                        "aria-labelledby": context.labelId,
+                        "aria-describedby": context.descriptionId,
+                        ...context.getFloatingProps(rest),
+                        children: rest.children
+                    })
                 })
             })
         })
@@ -178,6 +207,6 @@ const Modal_ModalClose = /*#__PURE__*/ forwardRef(function ModalClose(props, ref
 });
 
 ;// CONCATENATED MODULE: ./src/components/index.ts
-/* v8 ignore start */  /* v8 ignore stop */ 
+
 
 export { Modal, Modal_ModalClose as ModalClose, Modal_ModalContent as ModalContent, Modal_ModalDescription as ModalDescription, Modal_ModalHeading as ModalHeading };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-modal",
-	"version": "3.3.1",
+	"version": "3.3.3",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -36,11 +36,13 @@
 		"@versini/ui-types": "8.1.1"
 	},
 	"dependencies": {
-		"@floating-ui/react": "0.27.16",
 		"clsx": "2.1.1"
 	},
+	"peerDependencies": {
+		"@floating-ui/react": ">=0.27.16"
+	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "a3730974df8fcea3c016bd83844c4243dbb10208"
+	"gitHead": "9fedab179e688f845d193b1f0b5365639dd4beb0"
 }