@versini/ui-panel 8.1.4 → 9.0.0

package/dist/index.js

@@ -1,11 +1,11 @@
 /*!
-  @versini/ui-panel v8.1.4
+  @versini/ui-panel v9.0.0
   © 2025 gizmette.com
 */
 
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Modal, ModalClose, ModalContent, ModalDescription, ModalHeading } from "@versini/ui-modal";
-import { useEffect, useRef, useState } from "react";
+import { cloneElement, createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { FloatingFocusManager, FloatingNode, FloatingOverlay, FloatingPortal, FloatingTree, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useInteractions, useMergeRefs, useRole } from "@floating-ui/react";
 import clsx from "clsx";
 
 ;// CONCATENATED MODULE: ./src/common/constants.ts
@@ -22,12 +22,201 @@ const NONE = "none";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
 
-;// CONCATENATED MODULE: external "@versini/ui-modal"
-
 ;// CONCATENATED MODULE: external "react"
 
+;// CONCATENATED MODULE: external "@floating-ui/react"
+
 ;// CONCATENATED MODULE: external "clsx"
 
+;// CONCATENATED MODULE: ./src/components/Modal/ModalContext.tsx
+
+const ModalContext = /*#__PURE__*/ createContext(null);
+
+;// CONCATENATED MODULE: ./src/components/Modal/ModalHooks.tsx
+
+
+
+function useModal({ initialOpen = false, open: controlledOpen, onOpenChange: setControlledOpen, initialFocus } = {}) {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+    const [labelId, setLabelId] = useState();
+    const [descriptionId, setDescriptionId] = useState();
+    /* v8 ignore start */ const open = controlledOpen ?? uncontrolledOpen;
+    const setOpen = setControlledOpen ?? setUncontrolledOpen;
+    /* v8 ignore stop */ // Subscribe this modal to the FloatingTree for nested modal support
+    const nodeId = useFloatingNodeId();
+    const data = useFloating({
+        nodeId,
+        open,
+        onOpenChange: setOpen
+    });
+    const context = data.context;
+    const click = useClick(context, {
+        enabled: controlledOpen == null
+    });
+    const dismiss = useDismiss(context, {
+        outsidePress: false,
+        outsidePressEvent: "mousedown",
+        bubbles: {
+            escapeKey: false
+        }
+    });
+    const role = useRole(context);
+    const interactions = useInteractions([
+        click,
+        dismiss,
+        role
+    ]);
+    return useMemo(()=>({
+            open,
+            setOpen,
+            ...interactions,
+            ...data,
+            labelId,
+            descriptionId,
+            setLabelId,
+            setDescriptionId,
+            initialFocus,
+            nodeId
+        }), [
+        open,
+        setOpen,
+        interactions,
+        data,
+        labelId,
+        descriptionId,
+        initialFocus,
+        nodeId
+    ]);
+}
+const useModalContext = ()=>{
+    const context = useContext(ModalContext);
+    /* v8 ignore start */ if (context == null) {
+        throw new Error("Modal components must be wrapped in <Modal />");
+    }
+    /* v8 ignore stop */ return context;
+};
+
+;// CONCATENATED MODULE: ./src/components/Modal/Modal.tsx
+
+
+
+
+
+
+
+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();
+    /* v8 ignore start - Branch coverage for nested modal case */ // If this is a root modal (no parent), wrap with FloatingTree
+    if (parentId === null) {
+        /* v8 ignore stop */ return /*#__PURE__*/ jsx(FloatingTree, {
+            children: /*#__PURE__*/ jsx(ModalComponent, {
+                ...props
+            })
+        });
+    }
+    /* v8 ignore start - Nested modal case requires complex floating-ui setup */ // Nested modal - FloatingTree already exists
+    return /*#__PURE__*/ jsx(ModalComponent, {
+        ...props
+    });
+/* v8 ignore stop */ }
+const Modal_ModalContent = /*#__PURE__*/ forwardRef(function ModalContent(props, propRef) {
+    const { context: floatingContext, nodeId, ...context } = useModalContext();
+    const ref = useMergeRefs([
+        context.refs.setFloating,
+        propRef
+    ]);
+    /* v8 ignore start */ if (!floatingContext.open) {
+        return null;
+    }
+    /* v8 ignore stop */ const { overlayBackground, ...rest } = props;
+    const overlayClass = clsx("grid place-items-center", {
+        "bg-black sm:bg-black/80": !overlayBackground
+    });
+    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
+                    })
+                })
+            })
+        })
+    });
+});
+const Modal_ModalHeading = /*#__PURE__*/ forwardRef(function ModalHeading({ children, ...props }, ref) {
+    const { setLabelId } = useModalContext();
+    const id = useId();
+    // Only sets `aria-labelledby` on the Modal root element
+    // if this component is mounted inside it.
+    useLayoutEffect(()=>{
+        setLabelId(id);
+        return ()=>setLabelId(undefined);
+    }, [
+        id,
+        setLabelId
+    ]);
+    return /*#__PURE__*/ jsx("h1", {
+        ...props,
+        ref: ref,
+        id: id,
+        children: children
+    });
+});
+const Modal_ModalDescription = /*#__PURE__*/ forwardRef(function ModalDescription({ children, ...props }, ref) {
+    const { setDescriptionId } = useModalContext();
+    const id = useId();
+    // Only sets `aria-describedby` on the Modal root element
+    // if this component is mounted inside it.
+    useLayoutEffect(()=>{
+        setDescriptionId(id);
+        return ()=>setDescriptionId(undefined);
+    }, [
+        id,
+        setDescriptionId
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        id: id,
+        children: children
+    });
+});
+const Modal_ModalClose = /*#__PURE__*/ forwardRef(function ModalClose(props, ref) {
+    const { setOpen } = useModalContext();
+    const { trigger, className, ...rest } = props;
+    const handleClose = useCallback(()=>setOpen(false), [
+        setOpen
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: className,
+        children: /*#__PURE__*/ cloneElement(trigger, {
+            ref,
+            onClick: handleClose,
+            ...rest
+        })
+    });
+});
+
 ;// CONCATENATED MODULE: ./src/components/Panel/utilities.ts
 
 
@@ -178,18 +367,18 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
             open: open,
             onOpenChange: onOpenChange,
             initialFocus: initialFocus,
-            children: /*#__PURE__*/ jsx(ModalContent, {
+            children: /*#__PURE__*/ jsx(Modal_ModalContent, {
                 className: panelClassName.outerWrapper,
                 style: {
                     ...animationStyles
                 },
-                children: /*#__PURE__*/ jsxs(ModalDescription, {
+                children: /*#__PURE__*/ jsxs(Modal_ModalDescription, {
                     className: panelClassName.innerWrapper,
                     children: [
                         /*#__PURE__*/ jsxs("div", {
                             className: panelClassName.header,
                             children: [
-                                /*#__PURE__*/ jsx(ModalClose, {
+                                /*#__PURE__*/ jsx(Modal_ModalClose, {
                                     className: panelClassName.closeWrapper,
                                     trigger: /*#__PURE__*/ jsx("button", {
                                         className: panelClassName.closeButton,
@@ -212,7 +401,7 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
                                         })
                                     })
                                 }),
-                                /*#__PURE__*/ jsx(ModalHeading, {
+                                /*#__PURE__*/ jsx(Modal_ModalHeading, {
                                     className: panelClassName.title,
                                     children: title
                                 })

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "8.1.4",
+	"version": "9.0.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -42,19 +42,19 @@
 		"test": "vitest run"
 	},
 	"devDependencies": {
-		"@testing-library/jest-dom": "6.9.1"
+		"@testing-library/jest-dom": "6.9.1",
+		"@versini/ui-types": "8.1.1"
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.19",
-		"@versini/ui-modal": "3.3.3",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.1.18"
 	},
 	"peerDependencies": {
-		"@floating-ui/react": ">=0.27.16"
+		"@floating-ui/react": "0.27.16"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "9fedab179e688f845d193b1f0b5365639dd4beb0"
+	"gitHead": "6c08c752fd230a10f88c1bf315be99d714d55b08"
 }