@jsenv/navi 0.29.430 → 0.29.431

package/dist/jsenv_navi.js

@@ -6750,6 +6750,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();
 
@@ -10333,8 +10382,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);
@@ -12148,11 +12201,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,
@@ -15499,8 +15555,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
@@ -15520,6 +15576,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
@@ -15538,10 +15600,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;
@@ -15573,11 +15637,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
@@ -35185,6 +35251,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
@@ -36549,6 +36618,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
@@ -53059,11 +53132,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
@@ -53110,7 +53185,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.
@@ -60430,10 +60507,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;
@@ -60441,7 +60531,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
@@ -60568,7 +60658,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
@@ -64530,6 +64620,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
@@ -65744,8 +65840,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;
     }
@@ -65785,8 +65882,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
@@ -65830,7 +65928,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;
@@ -66063,12 +66161,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) {
@@ -66104,6 +66202,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);
@@ -66143,7 +66250,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) {
@@ -66154,6 +66261,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({
@@ -66396,6 +66512,19 @@ const useDialogProps = props => {
   }
   return [!isTopLayer && backdrop ? backdropProps : null, contentProps];
 };
+
+// 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
@@ -67320,8 +67449,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);
 
@@ -67757,7 +67888,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"
@@ -67803,6 +67934,15 @@ const usePopoverProps = props => {
     // reason: only ever built here.
     return closeEvent => {
       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
@@ -67829,7 +67969,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) {
@@ -67864,6 +68004,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({