@versini/ui-panel 8.0.5 → 8.0.7

package/dist/index.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-panel v8.0.5
+  @versini/ui-panel v8.0.7
   © 2025 gizmette.com
 */
 try {
   if (!window.__VERSINI_UI_PANEL__) {
     window.__VERSINI_UI_PANEL__ = {
-      version: "8.0.5",
-      buildTime: "12/18/2025 04:30 PM EST",
+      version: "8.0.7",
+      buildTime: "12/18/2025 07:40 PM EST",
       homepage: "https://www.npmjs.com/package/@versini/ui-panel",
       license: "MIT",
     };
@@ -15,10 +15,10 @@ try {
   // nothing to declare officer
 }
 
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useMergeRefs, useRole } from "@floating-ui/react";
 import clsx from "clsx";
-import { createPortal } from "react-dom";
+import { cloneElement, createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 
 ;// CONCATENATED MODULE: ./src/common/constants.ts
 const MESSAGEBOX_CLASSNAME = "av-messagebox";
@@ -34,450 +34,177 @@ const NONE = "none";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
 
-;// CONCATENATED MODULE: external "react"
+;// CONCATENATED MODULE: external "@floating-ui/react"
 
 ;// CONCATENATED MODULE: external "clsx"
 
-;// CONCATENATED MODULE: external "react-dom"
+;// CONCATENATED MODULE: external "react"
 
-;// CONCATENATED MODULE: ./src/components/Panel/dialogStackManager.ts
-/**
- * Dialog Stack Manager
- *
- * Implements the W3C WAI-ARIA APG pattern for managing nested modal dialogs.
- * This module maintains a stack of open dialogs and coordinates focus event
- * listeners between them.
- *
- * Key features:
- * - Only the topmost dialog has active focus listeners
- * - When a nested dialog opens, parent listeners are suspended
- * - When a dialog closes, parent listeners are restored
- * - Programmatic focus changes are flagged to prevent event interference
- *
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/
- */ /**
- * Stack of currently open dialogs. The last item is the topmost dialog.
- */ const openDialogStack = [];
-/**
- * Flag to ignore focus changes during programmatic focus operations.
- * When true, focus event handlers should return early to prevent interference.
- *
- * This is critical for nested dialogs: when a child dialog closes and
- * programmatically returns focus to its trigger element inside the parent,
- * we don't want the parent's focusin handler to interfere.
- */ let ignoreFocusChanges = false;
-/**
- * Get whether focus changes should be ignored.
- * Focus event handlers should check this and return early if true.
- */ function shouldIgnoreFocusChanges() {
-    return ignoreFocusChanges;
-}
-/**
- * Execute a function while ignoring focus change events.
- * Use this when programmatically moving focus to prevent event handlers
- * from interfering.
- *
- * @param fn - Function to execute (typically contains focus() calls)
- */ function withIgnoredFocusChanges(fn) {
-    ignoreFocusChanges = true;
-    try {
-        fn();
-    } finally{
-        // Use setTimeout to ensure the flag stays true through any
-        // microtasks that might fire focus events
-        setTimeout(()=>{
-            ignoreFocusChanges = false;
-        }, 0);
-    }
-}
-/**
- * Register a dialog in the stack when it opens.
- * If there's a parent dialog, its listeners are suspended.
- *
- * @param entry - The dialog entry to register
- */ function registerDialog(entry) {
-    // If there's already a dialog open, suspend its listeners
-    if (openDialogStack.length > 0) {
-        const currentTop = openDialogStack[openDialogStack.length - 1];
-        currentTop.removeListeners();
-    }
-    // Add the new dialog to the stack and activate its listeners
-    openDialogStack.push(entry);
-    entry.addListeners();
-}
-/**
- * Unregister a dialog from the stack when it closes.
- * If there's a parent dialog, its listeners are restored.
- *
- * @param dialogRef - Reference to the dialog element being closed
- */ function unregisterDialog(dialogRef) {
-    const index = openDialogStack.findIndex((entry)=>entry.dialogRef === dialogRef);
-    /* c8 ignore next 3 - defensive check */ if (index === -1) {
-        return;
-    }
-    // Remove listeners from the dialog being closed
-    const [removedEntry] = openDialogStack.splice(index, 1);
-    removedEntry.removeListeners();
-    // If there's a parent dialog, restore its listeners
-    if (openDialogStack.length > 0) {
-        const newTop = openDialogStack[openDialogStack.length - 1];
-        newTop.addListeners();
-    }
-}
-/**
- * Get the current number of open dialogs.
- * Useful for debugging and testing.
- */ function getOpenDialogCount() {
-    return openDialogStack.length;
-}
-/**
- * Check if a given dialog is the topmost (current) dialog.
- *
- * @param dialogRef - Reference to the dialog element to check
- */ function isTopmostDialog(dialogRef) {
-    if (openDialogStack.length === 0) {
-        return false;
-    }
-    return openDialogStack[openDialogStack.length - 1].dialogRef === dialogRef;
-}
-/**
- * Reset the stack (for testing purposes only).
- * @internal
- */ function _resetStackForTesting() {
-    while(openDialogStack.length > 0){
-        openDialogStack.pop();
+;// CONCATENATED MODULE: ../ui-modal/dist/index.js
+/*!
+  @versini/ui-modal v3.2.1
+  © 2025 gizmette.com
+*/ try {
+    if (!window.__VERSINI_UI_MODAL__) {
+        window.__VERSINI_UI_MODAL__ = {
+            version: "3.2.1",
+            buildTime: "12/18/2025 07:40 PM EST",
+            homepage: "https://github.com/aversini/ui-components",
+            license: "MIT"
+        };
     }
-    ignoreFocusChanges = false;
+} catch (error) {
+// nothing to declare officer
 }
 
-;// CONCATENATED MODULE: ./src/components/Panel/PanelPortal.tsx
-
-
-
 
 
 
-/**
- * Selector for all focusable elements within a container. Based on W3C WAI-ARIA
- * practices for dialog focus management.
- */ const FOCUSABLE_SELECTOR = [
-    'a[href]:not([disabled]):not([tabindex="-1"])',
-    'button:not([disabled]):not([tabindex="-1"])',
-    'textarea:not([disabled]):not([tabindex="-1"])',
-    'input:not([disabled]):not([tabindex="-1"])',
-    'select:not([disabled]):not([tabindex="-1"])',
-    '[tabindex]:not([tabindex="-1"]):not([disabled])',
-    'audio[controls]:not([tabindex="-1"])',
-    'video[controls]:not([tabindex="-1"])',
-    'details:not([tabindex="-1"])'
-].join(", ");
-/**
- * Portal component for rendering the Panel as a modal dialog using the native
- * HTML <dialog> element with showModal(). This provides:
- * - Native focus trapping (works correctly on iPad with physical keyboard)
- * - Native ESC key handling via cancel event
- * - Native backdrop via ::backdrop pseudo-element
- * - Native inert background (no need for manual scroll lock)
- * - Top layer rendering (no need for createPortal)
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
- *
- */ function PanelPortal({ open, onClose, children, className, style, title, initialFocus = 0, kind = /* inlined export .TYPE_PANEL */ ("panel") }) {
-    const labelId = useId();
-    const descriptionId = useId();
-    const dialogRef = useRef(null);
-    const previouslyFocusedRef = useRef(null);
-    /**
-	 * Get all focusable elements within the dialog. Excludes focus sentinel
-	 * elements used for circular focus trapping.
-	 */ const getFocusableElements = useCallback(()=>{
-        /* c8 ignore next 3 - defensive check, dialogRef is always set when open */ if (!dialogRef.current) {
-            return [];
-        }
-        const elements = dialogRef.current.querySelectorAll(FOCUSABLE_SELECTOR);
-        return Array.from(elements).filter((el)=>el.offsetParent !== null && // Filter out hidden elements
-            !el.hasAttribute("data-focus-sentinel"));
-    }, []);
-    /**
-	 * Focus a specific element by index, or the element referenced by a ref.
-	 */ const focusElement = useCallback((target)=>{
-        if (typeof target === "number") {
-            if (target === -1) {
-                // -1 means don't focus anything.
-                return;
-            }
-            const focusableElements = getFocusableElements();
-            if (focusableElements.length > 0) {
-                const index = Math.min(target, focusableElements.length - 1);
-                focusableElements[index]?.focus();
-            }
-        } else if (target?.current) {
-            target.current.focus();
-        }
-    }, [
-        getFocusableElements
+const ModalContext = /*#__PURE__*/ createContext(null);
+function useModal({ initialOpen = false, open: controlledOpen, onOpenChange: setControlledOpen, initialFocus } = {}) {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+    const [labelId, setLabelId] = useState();
+    const [descriptionId, setDescriptionId] = useState();
+    /* v8 ignore next 2 */ const open = controlledOpen ?? uncontrolledOpen;
+    const setOpen = setControlledOpen ?? setUncontrolledOpen;
+    const data = useFloating({
+        open,
+        onOpenChange: setOpen
+    });
+    const context = data.context;
+    const click = useClick(context, {
+        enabled: controlledOpen == null
+    });
+    const dismiss = useDismiss(context, {
+        outsidePress: false,
+        outsidePressEvent: "mousedown"
+    });
+    const role = useRole(context);
+    const interactions = useInteractions([
+        click,
+        dismiss,
+        role
     ]);
-    /**
-	 * Handle the native cancel event (fired when ESC is pressed). This replaces
-	 * the custom keydown handler since the native dialog handles ESC
-	 * automatically.
-	 */ const handleCancel = useCallback((event)=>{
-        // Prevent the default close behavior so we can control it via onClose.
-        event.preventDefault();
-        onClose();
-    }, [
-        onClose
+    return useMemo(()=>({
+            open,
+            setOpen,
+            ...interactions,
+            ...data,
+            labelId,
+            descriptionId,
+            setLabelId,
+            setDescriptionId,
+            initialFocus
+        }), [
+        open,
+        setOpen,
+        interactions,
+        data,
+        labelId,
+        descriptionId,
+        initialFocus
     ]);
-    /**
-	 * Handle Tab key to implement circular focus trapping. Native dialog focus
-	 * trapping may not be circular in all browsers, so we manually wrap focus from
-	 * last to first element (and vice versa). Uses document-level event listener
-	 * for better iPad physical keyboard support.
-	 *
-	 * IMPORTANT: On iPad Safari with a physical keyboard, the Tab key does not
-	 * automatically navigate between focusable elements. We must manually handle
-	 * ALL Tab key presses, not just wrapping cases.
-	 *
-	 */ const handleKeyDown = useCallback((event)=>{
-        if (event.key !== "Tab" || !dialogRef.current) {
-            return;
-        }
-        const focusableElements = getFocusableElements();
-        /* c8 ignore next 4 - edge case: dialog with no focusable elements */ if (focusableElements.length === 0) {
-            event.preventDefault();
-            return;
-        }
-        const firstElement = focusableElements[0];
-        const lastElement = focusableElements[focusableElements.length - 1];
-        const activeElement = document.activeElement;
-        // Find the current index of the focused element.
-        const currentIndex = focusableElements.indexOf(activeElement);
-        /**
-			 * Always prevent default and manually handle focus navigation. This is
-			 * required for iPad Safari with physical keyboard, where Tab key doesn't
-			 * automatically navigate between focusable elements.
-			 */ event.preventDefault();
-        if (event.shiftKey) {
-            // Shift+Tab: move to previous element, wrap to last if on first.
-            if (activeElement === firstElement || currentIndex <= 0) {
-                lastElement?.focus();
-            } else {
-                focusableElements[currentIndex - 1]?.focus();
-            }
-        } else {
-            // Tab: move to next element, wrap to first if on last.
-            if (activeElement === lastElement || currentIndex >= focusableElements.length - 1) {
-                firstElement?.focus();
-            } else {
-                focusableElements[currentIndex + 1]?.focus();
-            }
-        }
-    }, [
-        getFocusableElements
+}
+const useModalContext = ()=>{
+    const context = useContext(ModalContext);
+    /* v8 ignore next 3 */ if (context == null) {
+        throw new Error("Modal components must be wrapped in <Modal />");
+    }
+    return context;
+};
+function Modal({ children, ...options }) {
+    const dialog = useModal(options);
+    return /*#__PURE__*/ jsx(ModalContext.Provider, {
+        value: dialog,
+        children: children
+    });
+}
+const Modal_ModalContent = /*#__PURE__*/ forwardRef(function ModalContent(props, propRef) {
+    const { context: floatingContext, ...context } = useModalContext();
+    const ref = useMergeRefs([
+        context.refs.setFloating,
+        propRef
     ]);
-    /**
-	 * Handle focus events to ensure focus stays within the dialog. This catches
-	 * focus that escapes via Tab key on iPad Safari or other means.
-	 *
-	 * Uses the dialog stack manager's ignore flag to prevent interference during
-	 * programmatic focus operations (e.g., when a nested dialog closes and returns
-	 * focus to its trigger element).
-	 *
-	 */ /* v8 ignore next 20 - focus escape handling for iPad Safari, hard to test in jsdom */ const handleFocusIn = useCallback((event)=>{
-        // Ignore focus changes triggered by programmatic focus operations.
-        if (shouldIgnoreFocusChanges()) {
-            return;
-        }
-        if (!dialogRef.current || dialogRef.current.contains(event.target)) {
-            return;
-        }
-        // Focus escaped the dialog, bring it back.
-        const focusableElements = getFocusableElements();
-        if (focusableElements.length > 0) {
-            focusableElements[0]?.focus();
-        }
+    /* v8 ignore next 3 */ if (!floatingContext.open) {
+        return null;
+    }
+    const { overlayBackground, ...rest } = props;
+    const overlayClass = clsx("grid place-items-center", {
+        [`${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
+                })
+            })
+        })
+    });
+});
+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);
     }, [
-        getFocusableElements
+        id,
+        setLabelId
     ]);
-    /**
-	 * Handle clicks on the backdrop (the area outside the dialog content). Native
-	 * dialog doesn't provide backdrop click handling, so we use the dialog
-	 * element's click event and check if the click target is the dialog itself
-	 * (not a child element).
-	 */ /* v8 ignore next 9 - backdrop clicks are disabled by design in current implementation */ const handleDialogClick = useCallback((_event)=>{
-    /**
-			 * If the click is directly on the dialog element (the backdrop area), not on
-			 * any child element, then close the dialog. Currently disabled -
-			 * outsidePress is false by design. if (_event.target === dialogRef.current)
-			 * { onClose(); }
-			 */ }, []);
-    /**
-	 * Focus sentinel handler - when a sentinel element receives focus, redirect
-	 * focus to the appropriate element inside the dialog. This handles iPad
-	 * Safari's Tab key behavior which can bypass event listeners.
-	 */ const handleSentinelFocus = useCallback((position)=>{
-        const focusableElements = getFocusableElements();
-        /* c8 ignore next 3 - edge case: dialog with no focusable elements */ if (focusableElements.length === 0) {
-            return;
-        }
-        if (position === "start") {
-            // Focus came from the end, wrap to last element.
-            focusableElements[focusableElements.length - 1]?.focus();
-        } else {
-            // Focus came from the start, wrap to first element.
-            focusableElements[0]?.focus();
-        }
+    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);
     }, [
-        getFocusableElements
+        id,
+        setDescriptionId
     ]);
-    /**
-	 * Effect to show/hide the dialog and manage focus. Uses the dialog stack
-	 * manager to coordinate listeners between nested dialogs.
-	 */ useEffect(()=>{
-        const dialog = dialogRef.current;
-        /* c8 ignore next 3 - defensive check */ if (!dialog) {
-            return;
-        }
-        // Store the currently focused element to restore later.
-        previouslyFocusedRef.current = document.activeElement;
-        // Show the dialog as a modal.
-        if (!dialog.open) {
-            dialog.showModal();
-        }
-        /**
-		 * Add cancel event listener for ESC key (always needed, not managed by
-		 * stack).
-		 */ dialog.addEventListener("cancel", handleCancel);
-        /**
-		 * Define listener management functions for the stack manager. These will be
-		 * called when this dialog becomes/stops being the topmost dialog.
-		 */ const addListeners = ()=>{
-            document.addEventListener("keydown", handleKeyDown);
-            document.addEventListener("focusin", handleFocusIn);
-        };
-        const removeListeners = ()=>{
-            document.removeEventListener("keydown", handleKeyDown);
-            document.removeEventListener("focusin", handleFocusIn);
-        };
-        /**
-		 * Register this dialog with the stack manager. This will suspend parent
-		 * dialog listeners if any exist.
-		 */ registerDialog({
-            dialogRef: dialog,
-            addListeners,
-            removeListeners
-        });
-        /**
-		 * Set initial focus after a small delay to ensure the DOM is ready. This
-		 * works around React's autoFocus prop not working with native dialog.
-		 */ const focusTimer = setTimeout(()=>{
-            focusElement(initialFocus);
-        }, 0);
-        // Capture the previously focused element for restoration in cleanup.
-        const previouslyFocused = previouslyFocusedRef.current;
-        return ()=>{
-            clearTimeout(focusTimer);
-            dialog.removeEventListener("cancel", handleCancel);
-            /**
-			 * Unregister from the stack manager. This will restore parent dialog
-			 * listeners if any exist.
-			 */ unregisterDialog(dialog);
-            // Close the dialog if it's still open.
-            if (dialog.open) {
-                dialog.close();
-            }
-            /**
-			 * Restore focus to the previously focused element if it's still in the DOM.
-			 * Use withIgnoredFocusChanges to prevent parent dialog's handleFocusIn from
-			 * interfering with focus restoration.
-			 */ if (previouslyFocused?.isConnected) {
-                withIgnoredFocusChanges(()=>{
-                    if (previouslyFocused.isConnected) {
-                        previouslyFocused.focus();
-                    }
-                });
-            }
-        };
-    }, [
-        handleCancel,
-        handleKeyDown,
-        handleFocusIn,
-        initialFocus,
-        focusElement
+    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
     ]);
-    /* c8 ignore next 3 - early return when panel is closed */ if (!open) {
-        return null;
-    }
-    const isMessageBox = kind === TYPE_MESSAGEBOX;
-    const dialogClass = clsx(/**
-		 * Center the dialog on screen with fixed positioning. Native dialog uses
-		 * position: fixed by default.
-		 * - Panel on mobile: inset-0 + no margin for full screen.
-		 * - Panel on desktop: inset-x-0 + top/bottom auto for vertical centering.
-		 * - MessageBox: Always centered (both mobile and desktop) since it doesn't
-		 *   take full screen.
-		 */ "fixed max-h-none max-w-none p-0", {
-        // Panel: full screen on mobile, centered on desktop
-        "inset-0 m-0 sm:inset-auto sm:inset-x-0 sm:top-1/2 sm:-translate-y-1/2 sm:mx-auto": !isMessageBox,
-        // MessageBox: always centered at all breakpoints
-        "inset-auto inset-x-0 top-1/2 -translate-y-1/2 mx-auto z-100": isMessageBox
-    }, /**
-		 * Backdrop styling via Tailwind's backdrop: variant for ::backdrop
-		 * pseudo-element. Full black on mobile, 80% opacity on desktop (matches
-		 * original overlay).
-		 */ "backdrop:bg-black sm:backdrop:bg-black/80", className);
-    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsxs("dialog", {
-        ref: dialogRef,
-        "aria-labelledby": labelId,
-        "aria-describedby": descriptionId,
-        className: dialogClass,
-        style: style,
-        onClick: handleDialogClick,
-        children: [
-            /*#__PURE__*/ jsx("span", {
-                tabIndex: 0,
-                onFocus: ()=>handleSentinelFocus("start"),
-                "data-focus-sentinel": "start",
-                style: {
-                    position: "absolute",
-                    width: 1,
-                    height: 1,
-                    padding: 0,
-                    margin: -1,
-                    overflow: "hidden",
-                    clip: "rect(0, 0, 0, 0)",
-                    whiteSpace: "nowrap",
-                    border: 0
-                },
-                "aria-hidden": "true"
-            }),
-            /*#__PURE__*/ jsx("span", {
-                id: labelId,
-                className: "sr-only",
-                children: title
-            }),
-            children,
-            /*#__PURE__*/ jsx("span", {
-                tabIndex: 0,
-                onFocus: ()=>handleSentinelFocus("end"),
-                "data-focus-sentinel": "end",
-                style: {
-                    position: "absolute",
-                    width: 1,
-                    height: 1,
-                    padding: 0,
-                    margin: -1,
-                    overflow: "hidden",
-                    clip: "rect(0, 0, 0, 0)",
-                    whiteSpace: "nowrap",
-                    border: 0
-                },
-                "aria-hidden": "true"
-            })
-        ]
-    }), document.body);
-}
+    return /*#__PURE__*/ jsx("div", {
+        className: className,
+        children: /*#__PURE__*/ cloneElement(trigger, {
+            ref,
+            onClick: handleClose,
+            ...rest
+        })
+    });
+});
+/* v8 ignore next 1 */ 
 
 ;// CONCATENATED MODULE: ./src/components/Panel/utilities.ts
 
@@ -505,10 +232,10 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
             ["w-full sm:w-[95%] md:max-w-4xl"]: kind === /* inlined export .TYPE_PANEL */ ("panel") && !className && maxWidth === /* inlined export .LARGE */ ("large"),
             /**
 				 * Heights and max heights for Panel
-				 * Mobile: full height (h-full works with inset-0), Desktop: shrink-to-fit with max-height constraint
-				 */ "h-full sm:h-auto min-h-40 sm:min-h-0 max-h-full sm:max-h-[40vh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .SMALL */ ("small"),
-            "h-full sm:h-auto min-h-40 sm:min-h-0 max-h-full sm:max-h-[60vh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .MEDIUM */ ("medium"),
-            "h-full sm:h-auto min-h-40 sm:min-h-0 max-h-full sm:max-h-[95vh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .LARGE */ ("large"),
+				 * Mobile: full height, Desktop: clamp between min and max to allow flexible sizing
+				 */ "min-h-40 max-h-full sm:max-h-[40vh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .SMALL */ ("small"),
+            "min-h-40 max-h-full sm:max-h-[60vh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .MEDIUM */ ("medium"),
+            "min-h-40 max-h-full sm:max-h-[95vh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .LARGE */ ("large"),
             /**
 				 * Panel border colors
 				 */ "sm:border-border-dark": borderMode === "dark" && kind === /* inlined export .TYPE_PANEL */ ("panel"),
@@ -530,7 +257,7 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
             "border-border-accent": borderMode === "light" && kind === TYPE_MESSAGEBOX,
             [`${className}`]: !!className
         }),
-        innerWrapper: "content flex flex-col rounded-[inherit] relative min-h-full isolate",
+        innerWrapper: "content flex flex-col rounded-[inherit] relative min-h-full",
         scrollableContent: clsx("flex-1 overflow-y-auto overflow-x-hidden", "pt-12", {
             "pb-12": hasFooter
         }),
@@ -579,15 +306,9 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
         hasFooter: Boolean(footer)
     });
     /**
-	 * Handle close button click.
-	 */ const handleClose = useCallback(()=>{
-        onOpenChange(false);
-    }, [
-        onOpenChange
-    ]);
-    /**
-	 * If the panel is opened, set the document title to the panel's title. If it's
-	 * closed, restore the original document.title.
+	 * If the panel is opened, set the document
+	 * title to the panel's title. If it's closed,
+	 * restore the original document.title.
 	 */ useEffect(()=>{
         if (open) {
             originalTitleRef.current = document.title;
@@ -604,7 +325,7 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
     ]);
     /**
 	 * Effect to handle the opening and closing animations.
-	 */ /* v8 ignore next 31 */ useEffect(()=>{
+	 */ /* v8 ignore next 30 */ useEffect(()=>{
         if (!animation) {
             return;
         }
@@ -614,10 +335,9 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
             } : {
                 transform: "translateY(-666vh)"
             });
-            /**
-			 * Small delay to ensure the opening state is applied after the component is
-			 * rendered.
-			 */ const timer = setTimeout(()=>{
+            // Small delay to ensure the opening state is applied after
+            // the component is rendered.
+            const timer = setTimeout(()=>{
                 setAnimationStyles(!animation ? {} : animationType === /* inlined export .ANIMATION_FADE */ ("fade") ? {
                     opacity: 1
                 } : {
@@ -631,62 +351,65 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
         animation,
         animationType
     ]);
-    return /*#__PURE__*/ jsx(PanelPortal, {
-        open: open,
-        onClose: handleClose,
-        className: panelClassName.outerWrapper,
-        style: animationStyles,
-        title: title,
-        initialFocus: initialFocus,
-        kind: kind,
-        children: /*#__PURE__*/ jsxs("div", {
-            className: panelClassName.innerWrapper,
-            children: [
-                /*#__PURE__*/ jsxs("div", {
-                    className: panelClassName.header,
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: open && /*#__PURE__*/ jsx(Modal, {
+            open: open,
+            onOpenChange: onOpenChange,
+            initialFocus: initialFocus,
+            children: /*#__PURE__*/ jsx(Modal_ModalContent, {
+                className: panelClassName.outerWrapper,
+                style: {
+                    ...animationStyles
+                },
+                children: /*#__PURE__*/ jsxs(Modal_ModalDescription, {
+                    className: panelClassName.innerWrapper,
                     children: [
-                        /*#__PURE__*/ jsx("div", {
-                            className: panelClassName.closeWrapper,
-                            children: /*#__PURE__*/ jsx("button", {
-                                className: panelClassName.closeButton,
-                                type: "button",
-                                "aria-label": "Close",
-                                onClick: handleClose,
-                                children: /*#__PURE__*/ jsx("span", {
-                                    children: /*#__PURE__*/ jsx("svg", {
-                                        xmlns: "http://www.w3.org/2000/svg",
-                                        className: "size-3",
-                                        viewBox: "0 0 384 512",
-                                        fill: "currentColor",
-                                        role: "img",
-                                        "aria-hidden": "true",
-                                        focusable: "false",
-                                        children: /*#__PURE__*/ jsx("path", {
-                                            d: "M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3z",
-                                            opacity: "1"
+                        /*#__PURE__*/ jsxs("div", {
+                            className: panelClassName.header,
+                            children: [
+                                /*#__PURE__*/ jsx(Modal_ModalClose, {
+                                    className: panelClassName.closeWrapper,
+                                    trigger: /*#__PURE__*/ jsx("button", {
+                                        className: panelClassName.closeButton,
+                                        type: "button",
+                                        "aria-label": "Close",
+                                        children: /*#__PURE__*/ jsx("span", {
+                                            children: /*#__PURE__*/ jsx("svg", {
+                                                xmlns: "http://www.w3.org/2000/svg",
+                                                className: "size-3",
+                                                viewBox: "0 0 384 512",
+                                                fill: "currentColor",
+                                                role: "img",
+                                                "aria-hidden": "true",
+                                                focusable: "false",
+                                                children: /*#__PURE__*/ jsx("path", {
+                                                    d: "M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3z",
+                                                    opacity: "1"
+                                                })
+                                            })
                                         })
                                     })
+                                }),
+                                /*#__PURE__*/ jsx(Modal_ModalHeading, {
+                                    className: panelClassName.title,
+                                    children: title
                                 })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: panelClassName.scrollableContent,
+                            children: /*#__PURE__*/ jsx("div", {
+                                className: panelClassName.content,
+                                children: children
                             })
                         }),
-                        /*#__PURE__*/ jsx("h1", {
-                            className: panelClassName.title,
-                            children: title
+                        footer && /*#__PURE__*/ jsx("div", {
+                            className: panelClassName.footer,
+                            children: footer
                         })
                     ]
-                }),
-                /*#__PURE__*/ jsx("div", {
-                    className: panelClassName.scrollableContent,
-                    children: /*#__PURE__*/ jsx("div", {
-                        className: panelClassName.content,
-                        children: children
-                    })
-                }),
-                footer && /*#__PURE__*/ jsx("div", {
-                    className: panelClassName.footer,
-                    children: footer
                 })
-            ]
+            })
         })
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "8.0.5",
+	"version": "8.0.7",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -42,7 +42,8 @@
 		"test": "vitest run"
 	},
 	"devDependencies": {
-		"@testing-library/jest-dom": "6.9.1"
+		"@testing-library/jest-dom": "6.9.1",
+		"@versini/ui-modal": "3.2.1"
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.19",
@@ -52,5 +53,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "7eaf26f57054b515f030a5f13313773e79c59b04"
+	"gitHead": "fb7669ae0c6d32d93751d7116fa6f5388a26ab55"
 }