@versini/ui-panel 8.0.0 → 8.0.1

package/dist/index.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-panel v8.0.0
+  @versini/ui-panel v8.0.1
   © 2025 gizmette.com
 */
 try {
   if (!window.__VERSINI_UI_PANEL__) {
     window.__VERSINI_UI_PANEL__ = {
-      version: "8.0.0",
-      buildTime: "12/16/2025 06:31 PM EST",
+      version: "8.0.1",
+      buildTime: "12/17/2025 07:04 PM EST",
       homepage: "https://www.npmjs.com/package/@versini/ui-panel",
       license: "MIT",
     };
@@ -177,14 +177,15 @@ const NONE = "none";
  *
  * @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 }) {
     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.
+	 * 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 [];
@@ -214,7 +215,8 @@ const NONE = "none";
     ]);
     /**
 	 * Handle the native cancel event (fired when ESC is pressed). This replaces
-	 * the custom keydown handler since the native dialog handles ESC automatically.
+	 * 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();
@@ -223,14 +225,15 @@ const NONE = "none";
         onClose
     ]);
     /**
-	 * 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.
+	 * 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;
@@ -245,10 +248,11 @@ const NONE = "none";
         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();
+        /**
+			 * 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) {
@@ -268,14 +272,15 @@ const NONE = "none";
         getFocusableElements
     ]);
     /**
-	 * Handle focus events to ensure focus stays within the dialog.
-	 * This catches focus that escapes via Tab key on iPad Safari or other means.
+	 * 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).
 	 *
-	 * 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
+        // Ignore focus changes triggered by programmatic focus operations.
         if (shouldIgnoreFocusChanges()) {
             return;
         }
@@ -291,22 +296,21 @@ const NONE = "none";
         getFocusableElements
     ]);
     /**
-	 * 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).
+	 * 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.
+			 * 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) {
@@ -323,8 +327,8 @@ const NONE = "none";
         getFocusableElements
     ]);
     /**
-	 * Effect to show/hide the dialog and manage focus.
-	 * Uses the dialog stack manager to coordinate listeners between nested dialogs.
+	 * 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) {
@@ -336,11 +340,14 @@ const NONE = "none";
         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 = ()=>{
+        /**
+		 * 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);
         };
@@ -348,16 +355,18 @@ const NONE = "none";
             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({
+        /**
+		 * 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(()=>{
+        /**
+		 * 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.
@@ -365,17 +374,19 @@ const NONE = "none";
         return ()=>{
             clearTimeout(focusTimer);
             dialog.removeEventListener("cancel", handleCancel);
-            // Unregister from the stack manager.
-            // This will restore parent dialog listeners if any exist.
-            unregisterDialog(dialog);
+            /**
+			 * 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) {
+            /**
+			 * 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();
@@ -393,12 +404,16 @@ const NONE = "none";
     /* c8 ignore next 3 - early return when panel is closed */ if (!open) {
         return null;
     }
-    const dialogClass = clsx(// Center the dialog on screen with fixed positioning.
-    // Native dialog uses position: fixed by default, but we need to ensure
-    // proper centering with inset-0 and margin auto.
-    "fixed inset-0 m-auto max-h-none max-w-none p-0", // 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);
+    const dialogClass = clsx(/**
+		 * Center the dialog on screen with fixed positioning. Native dialog uses
+		 * position: fixed by default. On mobile: inset-0 + no margin for full screen.
+		 * On desktop: inset-x-0 + top/bottom auto for vertical centering with
+		 * shrink-to-fit.
+		 */ "fixed inset-0 m-0 sm:inset-auto sm:inset-x-0 sm:top-1/2 sm:-translate-y-1/2 sm:mx-auto max-h-none max-w-none p-0", /**
+		 * 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__*/ jsxs("dialog", {
         ref: dialogRef,
         "aria-labelledby": labelId,
@@ -477,10 +492,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, Desktop: clamp between min and max to allow flexible sizing
-				 */ "min-h-[10rem] max-h-full sm:max-h-[40vh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .SMALL */ ("small"),
-            "min-h-[10rem] max-h-full sm:max-h-[60vh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .MEDIUM */ ("medium"),
-            "min-h-[10rem] max-h-full sm:max-h-[95vh]": kind === /* inlined export .TYPE_PANEL */ ("panel") && effectiveMaxHeight === /* inlined export .LARGE */ ("large"),
+				 * 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"),
             /**
 				 * Panel border colors
 				 */ "sm:border-border-dark": borderMode === "dark" && kind === /* inlined export .TYPE_PANEL */ ("panel"),
@@ -521,7 +536,7 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
         }),
         title: "mb-0 pt-2 pl-4 pr-2 pb-2",
         closeWrapper: "pr-[18px]",
-        closeButton: clsx("flex items-center justify-center", "size-[13px]", "p-1", "rounded-full", "border", "border-transparent", "text-[rgba(255,96,92,1)]", "bg-[rgba(255,96,92,1)]", "shadow-[0_0_0_0.5px_red]", "focus:outline", "focus:outline-2", "focus:outline-offset-2", "focus:outline-focus-light", "hover:text-copy-dark", "focus:text-copy-dark", "active:bg-[#ba504a]", // Extended touch target using pseudo-element
+        closeButton: clsx("flex items-center justify-center", "size-3", "p-1", "rounded-full", "border", "border-transparent", "text-[rgba(255,96,92,1)]", "bg-[rgba(255,96,92,1)]", "shadow-[0_0_0_0.5px_red]", "focus:outline", "focus:outline-2", "focus:outline-offset-2", "focus:outline-focus-light", "hover:text-copy-dark", "focus:text-copy-dark", "active:bg-[#ba504a]", // Extended touch target using pseudo-element
         "relative", "before:content-['']", "before:absolute", "before:-top-4", "before:-right-4", "before:-bottom-4", "before:-left-4"),
         content: "p-4 rounded-3xl"
     };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "8.0.0",
+	"version": "8.0.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -34,6 +34,10 @@
 		"test:coverage:ui": "vitest --coverage --ui",
 		"test:coverage": "vitest run --coverage",
 		"test:update": "vitest run --update",
+		"test:visual": "playwright test -c playwright-ct.config.ts",
+		"test:visual:report": "playwright show-report playwright-report",
+		"test:visual:update": "playwright test -c playwright-ct.config.ts --update-snapshots",
+		"test:visual:ui": "playwright test -c playwright-ct.config.ts --ui",
 		"test:watch": "vitest",
 		"test": "vitest run"
 	},
@@ -48,5 +52,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "e68a69d2d0dae9585b4c8e626c903ebea426db2e"
+	"gitHead": "9fa7c53e84b8f40adefbe63becd4841af772753a"
 }