@jsenv/navi 0.29.429 → 0.29.431

package/dist/dev/jsenv_navi.js

@@ -7107,6 +7107,55 @@ const applyNavigationToNavDepth = (navigationType, state) => {
   canNavForwardSignal.value = navDepth < navDepthMax;
 };
 
+/**
+ * Whether the render running now is the one putting a new page on screen.
+ *
+ * A layer drawn over the pages — a popup bound to the address, the slides
+ * inside it — can open, close or change place in the very navigation that
+ * replaces the page beneath it: a link inside the layer leads to another page
+ * and the layer's weak params are dropped, a back to the page it was open over
+ * brings them back. For the layer that is not a movement of its own: the page
+ * changing IS the movement. A route transition already carries it, photographed
+ * as furniture with the page it belongs to (transition_furniture.js), and with
+ * no transition the page cuts and the layer cuts with it. Played on its own as
+ * well, it moves twice — an entrance or an exit over a page sliding past, or
+ * appearing at once.
+ *
+ * So whatever reacts to such a change in a render — a popup's open state, a
+ * slide container's current slide — asks here whether that render carries a
+ * page change, and if so arrives where it goes without travelling there.
+ *
+ * A page is what navi animates between (route_page.js): a route, and the
+ * params telling apart branches of one route. Which routes match is decided by
+ * the path alone, so a navigation that changes the path changes the page; one
+ * that keeps it changes the page only where a param IS a page — and navi knows
+ * those only through the relation or the RouteTravel row that names them, so
+ * that is who says so. A search param a page merely reads is not one: writing
+ * it is the page answering, and a layer opened by it (the `?settings` its door
+ * pushes, the back button taking it out) moves on its own.
+ *
+ * The answer lasts until the render applying the navigation is over: the held
+ * one when somebody photographs the change, Preact's own otherwise, over by the
+ * next frame (see whenPageRendered). Asked from a layout effect it is exact; an
+ * opening deferred past the commit takes the answer with it, read when the
+ * effect ran.
+ */
+
+
+let renderingPageChange = false;
+
+const notePageChange = () => {
+  if (renderingPageChange) {
+    return;
+  }
+  renderingPageChange = true;
+  whenPageRendered(() => {
+    renderingPageChange = false;
+  });
+};
+
+const isRenderingPageChange = () => renderingPageChange;
+
 // Global signal registry for route template detection
 const globalSignalRegistry = new Map();
 
@@ -10742,8 +10791,12 @@ This prevents cross-test pollution and ensures clean state.`,
     // read again.
     const path = urlWithoutSearchAndHash(url);
     const pathKept = path === previousPath;
+    // A new path is a new page: what the integration tells whatever reacts to
+    // this change in the render it causes (see page_change.js). Not the first
+    // one — there was no page before it, and what it mounts mounts as it is.
+    const pageChanged = previousPath !== null && !pathKept;
     previousPath = path;
-    const returnValue = {};
+    const returnValue = { pageChanged };
     const routeMatchInfoSet = new Set();
     for (const route of routeSet) {
       const routePrivateProperties = getRoutePrivateProperties(route);
@@ -12629,11 +12682,14 @@ const applyRouting = (
   // The routes' actions follow the address by themselves (see routeAction):
   // what a navigation leaves to the routing is a reload, the one that asks
   // them again with the address unchanged.
-  const { reloadSet } = updateRoutes(url, {
+  const { pageChanged, reloadSet } = updateRoutes(url, {
     navigationType,
     isVisited,
     // state,
   });
+  if (pageChanged) {
+    notePageChange();
+  }
   if (!reloadSet || reloadSet.size === 0) {
     return {
       allResult: undefined,
@@ -16104,8 +16160,8 @@ const useOpenPropsEffectOnOpenController = (
   // Tracks whether the effect below has ever run before — only the very
   // first run gets the "mount already open" treatment (`open` truthy from
   // the start, or the uncontrolled, mount-only `defaultOpen`); every
-  // subsequent `open` change is a real, later toggle and should animate
-  // normally like any other interactive open/close.
+  // subsequent `open` change is a real, later toggle and animates like any
+  // interactive open/close — unless a page change carries it (see below).
   const isFirstRunRef = useRef(true);
   // What `open` was on the previous run of the effect below. preact re-runs
   // an effect for a change of its deps — or for none at all, when a
@@ -16125,6 +16181,12 @@ const useOpenPropsEffectOnOpenController = (
     isFirstRunRef.current = false;
     const openChanged = open !== lastRunOpenRef.current;
     lastRunOpenRef.current = open;
+    // Opened or closed by the navigation that puts another page on screen: a
+    // link inside the popup leading away, a back to the page it stood over.
+    // The page changing is its movement, so it has none of its own — a route
+    // transition carries it with its page, and without one it cuts with the
+    // page (see page_change.js).
+    const carriedByPageChange = isRenderingPageChange();
 
     if (isFirstRun) {
       // "interaction" is said even over what the caller holds reading open: a
@@ -16143,10 +16205,12 @@ const useOpenPropsEffectOnOpenController = (
         // other truthy value means it was simply already open: nothing was ever
         // shown as "closed" for the user to see it transition away from, so the
         // entrance is skipped (`silent`, see popover.jsx's own openEffect).
-        //
+        // A popup built by an opening a page change carries is silent too,
+        // whatever built it: read now, the answer only holds for this render.
+        const silent = mountOpenReason !== "interaction" || carriedByPageChange;
         mountOpenOwedRef.current = () =>
           openController.open(new CustomEvent("open_by_prop", { detail: {} }), {
-            silent: mountOpenReason !== "interaction",
+            silent,
           });
       }
       return undefined;
@@ -16178,11 +16242,13 @@ const useOpenPropsEffectOnOpenController = (
           });
         return undefined;
       }
-      openController.open(new CustomEvent("open_by_prop", { detail: {} }));
+      openController.open(new CustomEvent("open_by_prop", { detail: {} }), {
+        silent: carriedByPageChange,
+      });
     } else {
       openController.requestClose(
         new CustomEvent("close_by_prop", { detail: {} }),
-        { isCancel: true },
+        { isCancel: true, silent: carriedByPageChange },
       );
     }
     // The request can be refused (a busy form denying the close): the popup
@@ -30911,14 +30977,14 @@ import.meta.css = /* css */[`[data-scrollable] > .navi_loading_outline_wrapper,
 }
 
 [data-scrollable] {
-  overflow: var(--x-scrollable-overflow, auto);
   scroll-padding: var(--navi-scroll-padding, var(--navi-s));
   --box-header-z-index: var(--navi-z-index-sticky);
   --box-footer-z-index: var(--navi-z-index-sticky);
   isolation: isolate;
+  overflow: auto;
 
   &[data-scrollable-overflow="scroll"] {
-    --x-scrollable-overflow: scroll;
+    overflow: scroll;
   }
 
   & > [data-header] {
@@ -30940,9 +31006,9 @@ import.meta.css = /* css */[`[data-scrollable] > .navi_loading_outline_wrapper,
   }
 
   &:has( > [data-body]) {
-    --x-scrollable-overflow: hidden;
     flex-direction: column;
     display: flex;
+    overflow: hidden;
 
     & > [data-header], & > [data-footer] {
       z-index: auto;
@@ -36173,6 +36239,9 @@ const rebuildWatcher = () => {
     if (fromIndex === index) {
       return;
     }
+    // A page of a relation can be a param: a move between two of them is a
+    // page change the path does not show (see page_change.js).
+    notePageChange();
     if (navigationAnimated) {
       // The movement on screen was turned round for this very navigation (see
       // turnRunningTransitionRound): it is already being answered, by the
@@ -37537,6 +37606,10 @@ const RouteTravel = ({
         }
         return;
       }
+      // Whoever asked for it: a tab of this row can be a param, and a move
+      // between two of them is a page change the path does not show (see
+      // page_change.js).
+      notePageChange();
       const page = pages[index];
       // A page this box asked for itself — a travel's own navigation, or one
       // it had given up waiting on: what arrives here is the answer to a
@@ -54254,11 +54327,13 @@ const Expandable = props => {
   openController.openEffect = openEvent => {
     const contentContainer = contentContainerRef.current;
     // `silent`: the expandable was already open when the page appeared
-    // (`open`/`defaultOpen` at mount). Nothing changed for anyone to be told
-    // about, nothing was ever shown closed to move away from, and a page must
-    // not have its focus stolen by a section that was simply already open — so
-    // an opening that was never an opening plays nothing, says nothing and
-    // takes nothing. The action it carries still runs: its content is due.
+    // (`open`/`defaultOpen` at mount, or the navigation putting that page on
+    // screen opening it — see page_change.js). Nothing changed for anyone to
+    // be told about, nothing was ever shown closed to move away from, and a
+    // page must not have its focus stolen by a section that was simply
+    // already open — so an opening that was never an opening plays nothing,
+    // says nothing and takes nothing. The action it carries still runs: its
+    // content is due.
     const silent = Boolean(openEvent.detail.silent);
     const revealing = animation && !silent && Boolean(contentContainer);
     // Where the last paint left the track — 0 when fully closed, partway when
@@ -54305,7 +54380,9 @@ const Expandable = props => {
         effectiveAction.abort();
       }
       cancelSettleWatch();
-      const collapsing = animation && Boolean(contentContainerAtClose);
+      // `silent`: closed by the navigation that puts another page on screen,
+      // which is its movement (see page_change.js).
+      const collapsing = animation && !closeEvent.detail.silent && Boolean(contentContainerAtClose);
       if (collapsing) {
         // Now, while the content is still fully laid out — the collapsing
         // track uncovers a content frozen at that size.
@@ -61661,10 +61738,23 @@ const SlideContainer = ({
       y: 0
     };
     const durationMs = durationToMs(duration);
+    // A change of slide the page changing carries is no travel: the page is
+    // the movement, and the slides land where the address puts them (see
+    // page_change.js). A travel still playing is cut on the spot, and the
+    // indicator riding it with it.
+    const landsWithPage = isRenderingPageChange() && (stageRef.current ? stageRef.current.area : drawnAreaRef.current) !== currentArea;
+    if (landsWithPage && trackAnimationRef.current) {
+      trackAnimationRef.current.cancel();
+      trackAnimationRef.current = null;
+      movingRef.current = null;
+      cancelTravelProgressAnimation();
+      paintTravelProgress(0);
+    }
+    const still = noTravel || landsWithPage;
     // Nothing is travelling, so nothing is staged: the picture to paint is the
     // map itself, and a stage left over from a travel that has just been given
     // up on would be painted instead of it.
-    if (noTravel) {
+    if (still) {
       stageRef.current = null;
     }
     let stage = stageRef.current;
@@ -61672,7 +61762,7 @@ const SlideContainer = ({
     // between the picture and the slide arriving, on the axis it walks.
     let travelStep = null;
     const drawnArea = stage ? stage.area : drawnAreaRef.current;
-    const travelStarts = !noTravel && durationMs > 0 && drawnArea !== undefined && drawnArea !== currentArea && slideElements.some(slideElement => readArea(slideElement) === drawnArea);
+    const travelStarts = !still && durationMs > 0 && drawnArea !== undefined && drawnArea !== currentArea && slideElements.some(slideElement => readArea(slideElement) === drawnArea);
     if (travelStarts) {
       // Where the slide being left IS — the place the stage gave it if a travel
       // was already playing (a press landing mid-travel departs from where the
@@ -61799,7 +61889,7 @@ const SlideContainer = ({
     // duration (the ask is zero, so ratioOfOneTravel answers 1), slowing the
     // travel at every re-render.
     const sameTravelPlaying = travelInFlight && !offsetDragged && offsetTargetBefore === offset;
-    const travels = !sameTravelPlaying && !noTravel && durationMs > 0 && offsetBefore !== undefined && offsetBefore !== offset;
+    const travels = !sameTravelPlaying && !still && durationMs > 0 && offsetBefore !== undefined && offsetBefore !== offset;
     if (travels) {
       // The time it takes is the distance it has left to cover: a travel picked
       // up a fifth of the way through goes back in a fifth of the time, so what
@@ -65808,6 +65898,12 @@ const css$E = /* css */`
         }
       }
     }
+    /* Off while the dialog's own transitions are off (switchTransitionsOff):
+       the inline style that turns them off cannot reach a pseudo-element.
+       After the rules above, which it must win over at equal weight. */
+    &[navi-transitions-off]::backdrop {
+      transition-property: none;
+    }
 
     &[data-focus-visible],
     /* …or something filling it holds the keyboard and offers its ring to
@@ -67030,8 +67126,9 @@ const useDialogProps = props => {
     const dialogEl = ref.current;
     // A mount-time opening was never seen closed (see openEffect's own
     // `silent`): there is no box it comes from, because nothing was shown
-    // before it.
-    if (!dialogEl || opened && (!lifting || event.detail.silent)) {
+    // before it. And a change a page change carries moves with that page,
+    // in and out of no anchor (see page_change.js).
+    if (!dialogEl || event.detail.silent || opened && !lifting) {
       applyChange();
       return;
     }
@@ -67047,7 +67144,11 @@ const useDialogProps = props => {
     }
     const anchorElement = resolveAnchorElement(event);
     if (!anchorElement) {
-      {
+      // An opening by the caller's state (`open`, `signal`, `navState`) is
+      // told nothing about its cause, and that cause may be the address —
+      // a back to an entry where the dialog was open, nothing pressed — so
+      // a missing anchor there is not something the app could have given.
+      if (event.type !== "open_by_prop") {
         console.warn(`[navi] Dialog has animation="lifting" and no anchor to lift out of, so it simply appears. The anchor is whatever opened it — a <Button command="--navi-open">, the "source" given to triggerNaviCommand — or the "anchor" prop.`);
       }
       applyChange();
@@ -67083,8 +67184,9 @@ const useDialogProps = props => {
     }
 
     // Set by useOpenControllerByProps for the very first open triggered by
-    // `open`/`defaultOpen` already being truthy at mount — see popover.jsx's
-    // own openEffect for the full reasoning, mirrored here identically.
+    // `open`/`defaultOpen` already being truthy at mount, and for an open a
+    // page change carries — see popover.jsx's own openEffect for the full
+    // reasoning, mirrored here identically.
     const silent = Boolean(e.detail.silent);
 
     // document.documentElement — the shared "no real container, use the
@@ -67128,7 +67230,7 @@ const useDialogProps = props => {
     // comment), even though Dialog never needs to measure/flip anything: it
     // still needs a genuinely rendered "closed" frame to transition from, not a
     // jump straight from not-shown to aria-expanded="true".
-    dialogEl.style.transitionProperty = "none";
+    switchTransitionsOff(dialogEl);
     if (backdropEl) {
       disarmBackdropHideRef.current?.();
       disarmBackdropHideRef.current = null;
@@ -67396,12 +67498,12 @@ const useDialogProps = props => {
       dialogEl.setAttribute("aria-expanded", "true");
       backdropEl?.setAttribute("aria-expanded", "true");
       dialogEl.getBoundingClientRect();
-      dialogEl.style.transitionProperty = "";
+      switchTransitionsOn(dialogEl);
       if (backdropEl) {
         backdropEl.style.transitionProperty = "";
       }
     } else {
-      dialogEl.style.transitionProperty = "";
+      switchTransitionsOn(dialogEl);
       dialogEl.setAttribute("aria-expanded", "true");
       backdropEl?.setAttribute("aria-expanded", "true");
       if (backdropEl) {
@@ -67437,6 +67539,15 @@ const useDialogProps = props => {
     return closeEvent => {
       debugPopup(`"${closeEvent.type}" on ${getElementSignature(closeEvent.target)} -> closeDialog`);
       clearTextSelectionInside(dialogEl);
+      // Closed by the navigation that puts another page on screen: it leaves
+      // with that page, and plays no exit of its own (see page_change.js).
+      const silent = Boolean(closeEvent.detail.silent);
+      if (silent) {
+        switchTransitionsOff(dialogEl);
+        if (backdropEl) {
+          backdropEl.style.transitionProperty = "none";
+        }
+      }
       dialogEl.setAttribute("aria-expanded", "false");
       if (!isTopLayer) {
         openLocalDialogCount = Math.max(0, openLocalDialogCount - 1);
@@ -67476,7 +67587,7 @@ const useDialogProps = props => {
       // next opening clears it (see openEffect's own unfreezeSize).
       freezeSize(dialogEl);
       cancelOpenInteractionSuppression?.();
-      if (hasCssTransitionAnimation) {
+      if (hasCssTransitionAnimation && !silent) {
         suppressPointerEventsDuringTransition(dialogEl);
       }
       if (backdropEl) {
@@ -67487,6 +67598,15 @@ const useDialogProps = props => {
       }
       restoreFocus(closeEvent);
       cleanup();
+      if (silent) {
+        // The closed frame committed with nothing transitioning, before
+        // transitions come back for the next opening.
+        dialogEl.getBoundingClientRect();
+        switchTransitionsOn(dialogEl);
+        if (backdropEl) {
+          backdropEl.style.transitionProperty = "";
+        }
+      }
     };
   };
   const onKeyDownShortcuts = createOnKeyDownForShortcuts({
@@ -67756,6 +67876,19 @@ const warnBottomSheetHoldingKeyboardControl = dialogEl => {
   }
   console.warn(`[navi] a Dialog docked to the bottom edge (dockedOnSmallTouchScreen="bottom") holds a field that raises the virtual keyboard. On a phone the keyboard rises from the edge the sheet rests on and reflows the sheet into the strip left above it, at every keystroke. A sheet one types into rests on the top edge: dockedOnSmallTouchScreen without a value. "bottom" is for a sheet one reads and taps.`, controlEl);
 };
+
+// The dialog's own transitions, off while a frame is pinned (the closed one an
+// entrance starts from, the open one a silent opening lands on, the closed one
+// a silent close leaves) and back on after it. A modal's wall is its native
+// ::backdrop, which takes no inline style: it reads the attribute instead.
+const switchTransitionsOff = dialogEl => {
+  dialogEl.style.transitionProperty = "none";
+  dialogEl.setAttribute("navi-transitions-off", "");
+};
+const switchTransitionsOn = dialogEl => {
+  dialogEl.style.transitionProperty = "";
+  dialogEl.removeAttribute("navi-transitions-off");
+};
 const DIALOG_PSEUDO_CLASSES = [":hover", ":active", ":focus", ":focus-visible", ":focus-within"];
 
 // Lets consumers pass animationDuration="0.5s" as a regular prop; Box maps
@@ -68688,8 +68821,10 @@ const usePopoverProps = props => {
     // `open`/`defaultOpen` already being truthy at mount — there's nothing
     // to visually transition away from (nothing was ever shown as "closed"
     // to the user), so this open skips the animation entirely instead of
-    // playing it against a closed frame that was never actually seen. See
-    // the final commit step below for how that's done.
+    // playing it against a closed frame that was never actually seen. Set
+    // too for an open the page changing carries: that page is its movement
+    // (see page_change.js). See the final commit step below for how that's
+    // done.
     const silent = Boolean(e.detail.silent);
     const [cleanup, addCleanup] = createPubSub(true);
 
@@ -69125,7 +69260,7 @@ const usePopoverProps = props => {
     // focus in. Inlined rather than a standalone function since it only
     // has this one call site.
     //
-    // `silent` (mounting already open via `open`/`defaultOpen`) flips the
+    // `silent` (mounting already open, or carried by a page change) flips the
     // order instead: aria-expanded first, *then* re-enable transitions, with
     // its own forced reflow in between the two — without that reflow, the
     // browser coalesces "flip aria-expanded" and "re-enable transitions"
@@ -69172,6 +69307,15 @@ const usePopoverProps = props => {
     return closeEvent => {
       debugPopup(closeEvent, `closePopover()`);
       clearTextSelectionInside(popoverEl);
+      // Closed by the navigation that puts another page on screen: it leaves
+      // with that page, and plays no exit of its own (see page_change.js).
+      const silent = Boolean(closeEvent.detail.silent);
+      if (silent) {
+        popoverEl.style.transitionProperty = "none";
+        if (backdropEl) {
+          backdropEl.style.transitionProperty = "none";
+        }
+      }
       popoverEl.setAttribute("aria-expanded", "false");
       // Set regardless of isTopLayer — see the open side's own identical
       // comment (openEffect above) for why hidePopover() alone isn't
@@ -69198,7 +69342,7 @@ const usePopoverProps = props => {
       // open is its own separate call with no way to reach back into this
       // one).
       cancelOpenInteractionSuppression?.();
-      if (hasCssTransitionAnimation) {
+      if (hasCssTransitionAnimation && !silent) {
         suppressPointerEventsDuringTransition(popoverEl);
       }
       if (backdropEl) {
@@ -69233,6 +69377,15 @@ const usePopoverProps = props => {
       popoverEl.removeAttribute("data-position-y-current");
       popoverEl.removeAttribute("data-position-x-current");
       cleanup();
+      if (silent) {
+        // The closed frame committed with nothing transitioning, before
+        // transitions come back for the next opening.
+        popoverEl.getBoundingClientRect();
+        popoverEl.style.transitionProperty = "";
+        if (backdropEl) {
+          backdropEl.style.transitionProperty = "";
+        }
+      }
     };
   };
   const onKeyDownShortcuts = createOnKeyDownForShortcuts({