@jsenv/navi 0.27.54 → 0.27.55

package/dist/jsenv_navi.js

@@ -1,4 +1,4 @@
-import { installImportMetaCssBuild } from "./jsenv_navi_side_effects.js";
+import { installImportMetaCssBuild, windowWidthSignal } from "./jsenv_navi_side_effects.js";
 import { isValidElement, createContext, h, toChildArray, render, Fragment, cloneElement } from "preact";
 import { useErrorBoundary, useLayoutEffect, useEffect, useContext, useMemo, useRef, useState, useCallback, useId } from "preact/hooks";
 import { jsxs, jsx, Fragment as Fragment$1 } from "preact/jsx-runtime";
@@ -35356,12 +35356,6 @@ const renderSafe = (value) => {
 
 const PickerContext = createContext();
 
-const windowWidthSignal = signal(window.innerWidth);
-
-window.addEventListener("resize", () => {
-  windowWidthSignal.value = window.innerWidth;
-});
-
 /**
  * Mirrors what browsers do when navigating to a page:
  * 1. Focus the first element with [navi-autofocus] (but not [navi-autofocus="fallback"]) inside the container
@@ -35638,12 +35632,17 @@ const Dialog = props => {
     pseudoClasses: DIALOG_PSEUDO_CLASSES,
     onMouseDown: e => {
       rest.onMouseDown?.(e);
-      // The <dialog> element covers the full viewport; clicking the backdrop
-      // hits the dialog itself (not any child). Close when that happens.
+      // Detect backdrop click: the click must land outside the dialog's
+      // bounding rect. Checking coordinates is necessary because clicking
+      // on the dialog's own padding also sets e.target === ref.current.
       if (!pointerTrap && e.button === 0 && e.target === ref.current) {
-        onRequestClose(e, {
-          isClickOutside: true
-        });
+        const rect = ref.current.getBoundingClientRect();
+        const isBackdrop = e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom;
+        if (isBackdrop) {
+          onRequestClose(e, {
+            isClickOutside: true
+          });
+        }
       }
     },
     onCancel: e => {
@@ -35902,11 +35901,21 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
     /* Shared by popover and dialog */
     --picker-popup-background-color: var(--picker-background-color);
     --picker-popup-border-radius: var(--picker-border-radius);
+    --picker-popup-border-width: var(--picker-border-width);
     /* Popover */
-    --picker-popover-max-height: 300px;
+    --picker-popover-max-height: 300px; /* soft: user-configurable preferred max-height */
+    --picker-popover-maxmax-height: calc(0.95 * var(--navi-vvh));
+    --picker-popover-maxmax-width: calc(0.95 * var(--navi-vvw));
+    /* --picker-popover-max-width: soft, leave unset to rely on maxmax */
     /* Dialog */
-    --picker-dialog-max-width: 95dvw;
-    --picker-dialog-max-height: 95dvh;
+    --picker-dialog-margin: 3dvw; /* min gap between dialog edges and viewport */
+    --picker-dialog-maxmax-width: calc(
+      var(--navi-vvw) - 2 * var(--picker-dialog-margin)
+    );
+    --picker-dialog-maxmax-height: calc(
+      var(--navi-vvh) - 2 * var(--picker-dialog-margin)
+    );
+    --picker-dialog-border-width: 0px; /* Dialog do not need border like popover (they stand out more) */
 
     /* popover */
     &[aria-haspopup="listbox"] {
@@ -35914,11 +35923,15 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
         position: absolute;
         inset: unset;
         min-width: var(--anchor-width, 0px);
-        max-width: 95vw;
+        max-width: min(
+          var(--picker-popover-max-width, var(--picker-popover-maxmax-width)),
+          var(--picker-popover-maxmax-width)
+        );
         /* max-height covers the placeholder + list; the list scrolls internally */
         max-height: min(
           var(--picker-popover-max-height),
-          var(--space-available, 95dvh)
+          var(--space-available, var(--picker-popover-maxmax-height)),
+          var(--picker-popover-maxmax-height)
         );
         margin: 0;
         padding: 0;
@@ -36012,11 +36025,18 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
     &[aria-haspopup="dialog"] {
       .navi_picker_dialog {
         min-width: var(--anchor-width, 0px);
-        max-width: var(--picker-dialog-max-width);
-        max-height: var(--picker-dialog-max-height);
+        max-width: min(
+          var(--picker-dialog-max-width, var(--picker-dialog-maxmax-width)),
+          var(--picker-dialog-maxmax-width)
+        );
+        max-height: min(
+          var(--picker-dialog-max-height, var(--picker-dialog-maxmax-height)),
+          var(--picker-dialog-maxmax-height)
+        );
         padding: 0;
         background: var(--picker-popup-background-color);
-        border: var(--picker-border-width) solid var(--x-picker-border-color);
+        border: var(--picker-dialog-border-width) solid
+          var(--x-picker-border-color);
         border-radius: var(--picker-popup-border-radius);
         outline-width: var(--picker-outline-width);
         outline-color: var(--picker-outline-color);
@@ -36028,10 +36048,10 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
         /* overscroll-behavior: contain; */
 
         &[data-expand-x] {
-          width: var(--picker-dialog-max-width);
+          width: var(--picker-dialog-maxmax-width);
         }
         &[data-expand-y] {
-          height: var(--picker-dialog-max-height);
+          height: var(--picker-dialog-maxmax-height);
         }
 
         &[open] {
@@ -36396,11 +36416,14 @@ const PickerCustom = props => {
           };
         }
       });
+      const isWithinPopup = el => {
+        const popupEl = popupRef.current;
+        return el === popupEl || popupEl.contains(el);
+      };
       Object.assign(pickerProps, {
         eventReactionDefinitions: {
           mouseDown: e => {
-            const popupEl = popupRef.current;
-            if (popupEl && popupEl.contains(e.target)) {
+            if (isWithinPopup(e.target)) {
               return null;
             }
             if (expandedRef.current) {
@@ -36421,8 +36444,7 @@ const PickerCustom = props => {
             };
           },
           click: e => {
-            const popupEl = popupRef.current;
-            if (popupEl && popupEl.contains(e.target)) {
+            if (isWithinPopup(e.target)) {
               return null;
             }
             // When a label is clicked it transfers focus to the select
@@ -40979,6 +41001,7 @@ const PickerStyleCSSVars = {
   "popoverMaxHeight": "--picker-popover-max-height",
   "popupBackgroundColor": "--picker-popup-background-color",
   "popupBorderRadius": "--picker-popup-border-radius",
+  "dialogBorderWidth": "--picker-dialog-border-width",
   "padding": "--picker-padding",
   "paddingX": "--picker-padding-x",
   "paddingY": "--picker-padding-y",