@jsenv/navi 0.29.213 → 0.29.215

package/dist/dev/jsenv_navi.js

@@ -44924,6 +44924,10 @@ const FOCUS_DELAY_ON_KEYBOARD_MS = 250;
  * controller (not exposed as a property) and invoked when the popup actually
  * closes, however that happens.
  *
+ * `controller.getElement` is assigned alongside it and answers with the
+ * element that effect acts on, so a mount-time open can tell whether there is
+ * anything in the document to open yet (see useOpenPropsEffectOnOpenController).
+ *
  * Dialog/Popover also call `openController.requestClose(e, { isCancel })` for
  * their own internal triggers (backdrop click, Escape).
  *
@@ -45192,6 +45196,10 @@ const createOpenController = (
     // openedDuringThisPress). Never any press before there has been one.
     pressCountAtOpen: null,
     openEffect: null,
+    // The element openEffect acts on, asked for before the mount-time open is
+    // let through: it has to be in the document for showModal()/showPopover()
+    // to be legal at all (see useOpenPropsEffectOnOpenController).
+    getElement: null,
     // Set by the controlled element (see popup_content_mount.js) when its
     // content is still waiting for a first open to be built. Called below,
     // before openEffect, so the popup measures and positions the real thing.
@@ -45454,32 +45462,27 @@ const useOpenController = (openHandler) => {
 // relative to each other, but there's no meaningful "correct" order between
 // those anyway.
 //
-// The microtask is also why the scheduling is undone by the effect that asked
-// for it: a `<Loading>` above the popup can park the whole subtree between the
-// two — preact/compat's Suspense runs every hook cleanup of the suspended
-// children and moves their dom into a detached <div> — and the flush would
-// then be opening a popup whose element has left the document.
-let pendingMountOpens = [];
+// The cancel this returns answers whether the open was still pending: a
+// `<Loading>` above the popup can park the whole subtree between the effect
+// and the flush (preact/compat's Suspense runs every hook cleanup of the
+// suspended children and moves their dom into a detached <div>), and the flush
+// would then be opening a popup whose element has left the document.
+let pendingMountOpens = new Set();
 let mountOpenFlushScheduled = false;
 const scheduleMountOpen = (run) => {
-  pendingMountOpens.push(run);
+  pendingMountOpens.add(run);
   if (!mountOpenFlushScheduled) {
     mountOpenFlushScheduled = true;
     queueMicrotask(() => {
-      const entries = pendingMountOpens;
-      pendingMountOpens = [];
+      const entries = [...pendingMountOpens];
+      pendingMountOpens = new Set();
       mountOpenFlushScheduled = false;
       for (let i = entries.length - 1; i >= 0; i--) {
         entries[i]();
       }
     });
   }
-  return () => {
-    const index = pendingMountOpens.indexOf(run);
-    if (index > -1) {
-      pendingMountOpens.splice(index, 1);
-    }
-  };
+  return () => pendingMountOpens.delete(run);
 };
 
 // Where the popup's open state is kept, when it is kept anywhere: `navState`
@@ -45657,6 +45660,9 @@ const useOpenPropsEffectOnOpenController = (
   // subsequent `open` change is a real, later toggle and should animate
   // normally like any other interactive open/close.
   const isFirstRunRef = useRef(true);
+  // The mount-time open, from the first run below until the effect after it
+  // could schedule it.
+  const mountOpenOwedRef = useRef(null);
 
   useLayoutEffect(() => {
     const isFirstRun = isFirstRunRef.current;
@@ -45673,15 +45679,10 @@ const useOpenPropsEffectOnOpenController = (
         // shown as "closed" for the user to see it transition away from, so the
         // entrance is skipped (`silent`, see popover.jsx's own openEffect).
         //
-        // Deferred + batched (see scheduleMountOpen above) rather than called
-        // directly, so nested popups that both mount already-open end up
-        // stacked ancestor-first instead of Preact's own child-first effect
-        // order.
-        return scheduleMountOpen(() =>
+        mountOpenOwedRef.current = () =>
           openController.open(new CustomEvent("open_by_prop", { detail: {} }), {
             silent: mountOpenReason !== "interaction",
-          }),
-        );
+          });
       }
       return undefined;
     }
@@ -45716,6 +45717,38 @@ const useOpenPropsEffectOnOpenController = (
     }
     return undefined;
   }, [open]);
+
+  // Schedules the owed mount-time open — on every render, until it can. It has
+  // to wait for the element to be IN THE DOCUMENT, and a mount does not
+  // guarantee that: a `<Loading>` above the popup parks a suspended subtree by
+  // moving its dom into a detached <div> while keeping its components alive
+  // (preact/compat), and a render there re-creates the hooks, so the first run
+  // above happens against dom that is not in the page — where showModal() and
+  // showPopover() throw. The boundary settling re-renders the subtree with its
+  // dom back, and that render is the one that schedules.
+  //
+  // Deferred + batched (see scheduleMountOpen) rather than called directly,
+  // so nested popups that both mount already-open end up stacked
+  // ancestor-first instead of Preact's own child-first effect order. An open
+  // still pending when this cleans up goes back to being owed: the parking
+  // itself runs this cleanup, and the fresh run that follows re-asks.
+  useLayoutEffect(() => {
+    const mountOpen = mountOpenOwedRef.current;
+    if (!mountOpen) {
+      return undefined;
+    }
+    const element = openController.getElement?.();
+    if (element && !element.isConnected) {
+      return undefined;
+    }
+    mountOpenOwedRef.current = null;
+    const cancelMountOpen = scheduleMountOpen(mountOpen);
+    return () => {
+      if (cancelMountOpen()) {
+        mountOpenOwedRef.current = mountOpen;
+      }
+    };
+  });
 };
 
 const useOpenControllerByProps = (props, name) => {
@@ -46807,6 +46840,7 @@ const Expandable = props => {
   // What opening LOOKS like here, and how to undo it — the one thing an
   // expandable owns that a popup does not (see open_controller.js). Reassigned
   // on every render so it always closes over the latest props.
+  openController.getElement = () => rootRef.current;
   openController.openEffect = openEvent => {
     const contentContainer = contentContainerRef.current;
     // `silent`: the expandable was already open when the page appeared
@@ -57161,8 +57195,11 @@ const getAvailableWidth = (layer, element) => {
  * (a top-docked SidePanel: title and tabs at its top). So here the cut alone
  * does the reveal — the same curtain descending from the container's top
  * edge a full slide draws — while the box travels only `--popup-cover-travel`
- * (default 15%) of its own height: the head is on screen from the first
- * frame, settling its last few pixels into place. The exit is the same
+ * (default 24px): the head is on screen from the first frame, settling its
+ * last few pixels into place. A length, not a share of the panel: the travel
+ * is a settle, the curtain is what reveals, and a share would grow with a
+ * full-screen panel while its head does not — at 15% of 800px the head spent
+ * the first 40% of the entrance above the cut. The exit is the same
  * movement backwards and still reads as a slide, the head leading. One
  * direction only: a bottom sheet leads with its head by itself, and a
  * left/right panel keeps its head on the axis it does not travel.
@@ -57192,7 +57229,7 @@ const popupCss = /* css */ `
     .navi_dialog {
       --popup-animation-duration: 0.18s;
       --popup-scale-from: 0.9;
-      --popup-cover-travel: 15%;
+      --popup-cover-travel: 24px;
 
       --popup-opacity-duration: var(--popup-animation-duration);
       --popup-translate-duration: var(--popup-animation-duration);
@@ -57373,7 +57410,7 @@ const popupCss = /* css */ `
 
     /* cover — a top-docked popup unrolling from the top edge of its area (see
          this file's top comment): the cut does the reveal, the box travels
-         --popup-cover-travel of its own height. The far cut sits where the
+         --popup-cover-travel, a length. The far cut sits where the
          popup's shadow ends (--navi-popup-box-shadow reaches about 50px) or
          where the room does, whichever is nearer, so the reveal finishes on
          the box and its shadow at the pace of the box's own settle. On the
@@ -59076,6 +59113,7 @@ const useDialogProps = props => {
   // *when* this runs. openEffect runs outside of render (triggered by
   // openController.open()), so it cannot call hooks — cleanup is a plain
   // pub/sub.
+  openController.getElement = () => ref.current;
   openController.openEffect = e => {
     const dialogEl = ref.current;
     const backdropEl = backdropRef.current;
@@ -60539,6 +60577,7 @@ const usePopoverProps = props => {
   // slower, flash-prone `toggle` event instead of the fast, pre-paint
   // MutationObserver path.
 
+  openController.getElement = () => ref.current;
   openController.openEffect = e => {
     const popoverEl = ref.current;
     // backdropEl is null when pointerInteractionOutsideEffect is "none" —
@@ -62467,6 +62506,7 @@ const PickerCalloutPopup = ({
   }
   // Reassigned on every render, like Popover's own, so it closes over the
   // latest props.
+  openController.getElement = () => pickerRef.current;
   openController.openEffect = openEvent => {
     const pickerEl = pickerRef.current;
     const calloutManager = getPickerInput(pickerEl).__uiStateController__.rules.callout;
@@ -83131,6 +83171,7 @@ const ANIMATION_BY_SIDE = {
 };
 const css = /* css */`.navi_side_panel {
   --popup-border-radius: 0px;
+  --popup-animation-duration: .3s;
   width: var(--navi-side-panel-width, auto);
   height: var(--navi-side-panel-height, auto);
 
@@ -83295,10 +83336,12 @@ const css = /* css */`.navi_side_panel {
  * @param {boolean|"fading"} [props.animation] - Off by default (unlike
  *   `Dialog`/`Popover` themselves) — SidePanel is commonly toggled instead
  *   of opened/closed as a one-off, where a slide transition is more often
- *   undesired noise than not. `true` slides in from `side` (a top panel
- *   unrolls from its edge instead, head first — see `ANIMATION_BY_SIDE`);
- *   `"fading"` is the other common choice. Other values are forwarded as-is but not a
- *   documented/encouraged part of this component's own API.
+ *   undesired noise than not. `true` plays the entrance of `side`:
+ *   `cover-from-top` for a top panel (it unrolls from its edge, head first),
+ *   `slide-from-<side>` for the three others — see `ANIMATION_BY_SIDE` for
+ *   why the top differs. `"fading"` is the other common choice. Other values
+ *   are forwarded as-is but not a documented/encouraged part of this
+ *   component's own API.
  * @param {boolean} [props.closeOnClickOutside=false] - `false` (default):
  *   maps to `pointerInteractionOutsideEffect="none"` — in popover mode, no
  *   backdrop at all, outside clicks pass straight through; in dialog mode,