@jsenv/navi 0.29.414 → 0.29.416

package/dist/jsenv_navi.js

@@ -14110,6 +14110,31 @@ const moveFocusTo = (
   });
 };
 
+/**
+ * Gives the focus back to `target` once the commit a close is part of is over:
+ * for a close caused by an unmount (UNMOUNT_EVENT_TYPE in
+ * layout/open_controller.js), which runs from a cleanup while the tree leaving
+ * with it is still in the document. Only its end tells a target leaving with
+ * it — disconnected by then, and skipped — from one staying, and a focused
+ * element that leaves makes the removal of its whole subtree restyle it.
+ *
+ * And only into a void: the close took the focus with it, so something holding
+ * the focus by then — a page arriving that focused a field of its own — took it
+ * after, and keeps it.
+ */
+const giveFocusBackAfterCommit = (target, giveFocus) => {
+  queueMicrotask(() => {
+    if (!target || !target.isConnected) {
+      return;
+    }
+    const focusedNow = document.activeElement;
+    if (focusedNow && focusedNow !== document.body) {
+      return;
+    }
+    giveFocus();
+  });
+};
+
 const focusTransferTarget = (target, focusVisible) => {
   moveFocusTo(target, { focusVisible });
   if (target.hasAttribute("navi-autofocus-select")) {
@@ -14664,6 +14689,12 @@ const createOpenController = (
               closeEvent,
               `closed by focusout -> let focus go away`,
             );
+          } else if (findEvent(closeEvent, UNMOUNT_EVENT_TYPE)) {
+            // Left the tree: what held the focus before the opening may be
+            // leaving with it (see giveFocusBackAfterCommit).
+            giveFocusBackAfterCommit(focusTransfer.focusedElement, () => {
+              focusTransfer.restoreFocus(closeEvent);
+            });
           } else {
             // Only the mousedown, deliberately: a popup with no backdrop is
             // closed by a `pointerdown` that belongs to the page (see
@@ -17425,14 +17456,8 @@ const createCalloutManager = (
           };
           if (findEvent(closeEvent, UNMOUNT_EVENT_TYPE)) {
             // Closed by a popup leaving the tree: the control may be leaving
-            // in the same commit, which only its end tells. A leaving control
-            // must not get the focus — the removal of a subtree holding it
-            // restyles the whole subtree.
-            queueMicrotask(() => {
-              if (focusTarget.isConnected) {
-                giveFocusBack();
-              }
-            });
+            // with it (see giveFocusBackAfterCommit).
+            giveFocusBackAfterCommit(focusTarget, giveFocusBack);
           } else {
             // Given before the callout leaves the document: removed while it
             // holds the focus, it sends a focusout with nowhere to go up
@@ -23604,6 +23629,21 @@ ${[idKey, ...uniqueKeys].join(", ")}`,
     }
     return result;
   };
+  // A computed of the row with this id, one per id: what a render reads to
+  // follow that row and no other. An upsert replaces only the items it changes
+  // (see assign below), so a row nobody wrote keeps its object, and its
+  // computed stays still while the rest of the store moves — read through
+  // `select`, a render follows the whole store. Kept as long as the store,
+  // like the rows it holds.
+  const itemSignalById = new Map();
+  const itemSignalForId = (id) => {
+    let itemSignal = itemSignalById.get(id);
+    if (!itemSignal) {
+      itemSignal = computed(() => idMapSignal.value.get(id));
+      itemSignalById.set(id, itemSignal);
+    }
+    return itemSignal;
+  };
   const upsert = (...args) => {
     const mutationsMap = new Map(); // Map<itemId, propertyMutations>
     const triggerPropertyMutations = () => {
@@ -23994,6 +24034,7 @@ ${[idKey, ...uniqueKeys].join(", ")}`,
     arraySignal,
     select,
     selectAll,
+    itemSignalForId,
     upsert,
     drop,
 
@@ -25159,12 +25200,34 @@ const createResource = (
     idKey,
     uniqueKeys,
 
-    // Reactive reads, not hooks: they subscribe the render that calls them to
-    // the store's array signal. Nothing hook-shaped inside, so a loop or a
-    // condition is fine. `useAllByIds` skips the ids the store does not hold.
+    // Reactive reads, not hooks: nothing hook-shaped inside, so a loop or a
+    // condition is fine. Each subscribes the render that calls it to what it
+    // returns: the rows asked for, each through a computed of that row (see
+    // itemSignalForId in array_signal_store.js), or the whole store for
+    // `useArray` — a card reading its own row stays still while the page next
+    // to it loads rows of its own. `useAllByIds` skips the ids the store does
+    // not hold.
     useArray: () => store.arraySignal.value,
-    useById: (id) => store.select(idKey, id),
-    useAllByIds: (idArray) => store.selectAll(idArray),
+    useById: (id) => store.itemSignalForId(id).value,
+    useAllByIds: (idArray) => {
+      const items = [];
+      for (const idOrProps of idArray) {
+        let id = idOrProps;
+        if (isProps(idOrProps) && !Object.hasOwn(idOrProps, idKey)) {
+          // Named by a unique key: which row that is can only be read off
+          // the whole store.
+          const item = store.select(idOrProps);
+          id = item ? item[idKey] : undefined;
+        } else if (isProps(idOrProps)) {
+          id = idOrProps[idKey];
+        }
+        const item = store.itemSignalForId(id).value;
+        if (item) {
+          items.push(item);
+        }
+      }
+      return items;
+    },
 
     withParams: undefined,
     one: undefined,
@@ -31341,7 +31404,11 @@ const useContentKeepingLeavingPages = branch => {
     // mounted with, or it would be mounted again.
     key = shown.key;
     page = shown.page;
-  } else if (shown && leavingPagesHold) {
+  } else if (shown && leavingPagesHold && !document.querySelector(":modal")) {
+    // Never while a modal dialog is open: it keeps everything but itself out
+    // of reach — the page arriving could not even take the focus — for as long
+    // as it is open, and one in a page kept while leaving stays open for the
+    // whole movement. The page is then taken down at once, as without one.
     leavingRef.current.push({
       vnode: shown.vnode,
       page: shown.page,
@@ -31388,10 +31455,17 @@ const useContentKeepingLeavingPages = branch => {
       }
       entry.hidden = true;
       entry.page.leavingSignal.value = true;
+      const focusedElement = document.activeElement;
       let node = start.nextSibling;
       while (node && node !== end) {
         if (node.nodeType === Node.ELEMENT_NODE) {
           node.setAttribute(LEAVING_ATTRIBUTE, "");
+          // What the keyboard held in it goes where the page's removal would
+          // have sent it: a hidden element keeps the focus, and would go on
+          // receiving the keys pressed during the movement.
+          if (node.contains(focusedElement)) {
+            focusedElement.blur();
+          }
         }
         node = node.nextSibling;
       }
@@ -43958,8 +44032,12 @@ const useInteractiveProps = (props, {
     }
     // Read by READONLY_CONSTRAINT to say how many runs are already out, and by
     // the action handlers below, which are where a run joins and leaves the
-    // count (a labelled block away, hence through the controller).
-    uiStateController.parallelGuard = parallelGuard;
+    // count (a labelled block away, hence through the controller). None for a
+    // control without an action of its own, by the same rule as being held
+    // back: what it runs (the noop every such control has, a link's
+    // navigation) is nothing the guard counts, and would hold a slot for its
+    // length.
+    uiStateController.parallelGuard = props.action ? parallelGuard : null;
     if (heldByParallelGuard) {
       controlHostProps["data-readonly-reason"] = "parallel-guard";
     }
@@ -44233,7 +44311,11 @@ const useInteractiveProps = (props, {
         // carried by every navi_action_* event of that run).
         uiStateController.pendingActionEvent = e.detail.event;
         uiStateController.actionInFlight = true;
-        uiStateController.parallelGuard?.claim(uiStateController);
+        // Given back to the guard it was counted in, whatever the control
+        // holds by then: one that lost its action mid-run has no guard left
+        // to name, and the slot would stay taken.
+        const countedIn = uiStateController.parallelGuard;
+        countedIn?.claim(uiStateController);
         if (optimistic) {
           syncOptimisticAttribute(true);
         }
@@ -44251,7 +44333,7 @@ const useInteractiveProps = (props, {
         e.detail.addSideEffect((outcome, outcomeEvent) => {
           uiStateController.actionInFlight = false;
           uiStateController.runningActionSignal.value = null;
-          uiStateController.parallelGuard?.release(uiStateController);
+          countedIn?.release(uiStateController);
           // The outcome callbacks are told from here, the run's side effect,
           // and not from the onnavi_action_* handlers below: the run can
           // outlive this control (its own answer, written to a store the
@@ -47783,6 +47865,90 @@ const BinderItemContext = createContext(null);
  */
 const NavContext = createContext(null);
 
+/**
+ * Whether the page one is on is `route` with `params` — what a link or a button
+ * pointing at a route shows as current.
+ *
+ * Read through a computed of that one answer, so the component reading it
+ * re-renders when the answer flips, and not whenever the route's status moves:
+ * a page arriving on the route with other params — one profile opening, under a
+ * list of links to a hundred other profiles — starts the route matching and
+ * changes its params, and leaves every one of those links exactly as it was.
+ *
+ * `except`: routes whose matching vetoes the answer — a route named there is
+ * somewhere else, whatever the rest of the reading says. `also`: routes whose
+ * matching grants it. Both take a route or a list of routes.
+ */
+const useRouteCurrent = (route, params, { except, also } = {}) => {
+  const exceptRoutes = toRouteList(except);
+  const alsoRoutes = toRouteList(also);
+  const paramsKey = getParamsCacheKey(params);
+  const exceptKey = routeListKey(exceptRoutes);
+  const alsoKey = routeListKey(alsoRoutes);
+  const currentSignal = useMemo(() => {
+    if (paramsKey === null) {
+      return null;
+    }
+    return computed(() =>
+      readRouteCurrent(route, params, exceptRoutes, alsoRoutes),
+    );
+  }, [route, paramsKey, exceptKey, alsoKey]);
+  if (!currentSignal) {
+    // Params no key can be made of (a date, an object): read on the spot, the
+    // component then re-renders with the status of every route it reads.
+    return readRouteCurrent(route, params, exceptRoutes, alsoRoutes);
+  }
+  return currentSignal.value;
+};
+
+// Every signal is read even once the answer is known: reading is what
+// subscribes, and a route skipped today is the one whose change has to be heard
+// tomorrow.
+const readRouteCurrent = (route, params, exceptRoutes, alsoRoutes) => {
+  const matching = route.matchingSignal.value;
+  const paramsMatching = route.matchesParams(params);
+  let someExceptMatching = false;
+  for (const exceptRoute of exceptRoutes) {
+    if (exceptRoute.matchingSignal.value) {
+      someExceptMatching = true;
+    }
+  }
+  let someAlsoMatching = false;
+  for (const alsoRoute of alsoRoutes) {
+    if (alsoRoute.matchingSignal.value) {
+      someAlsoMatching = true;
+    }
+  }
+  if (someExceptMatching) {
+    return false;
+  }
+  return (matching && paramsMatching) || someAlsoMatching;
+};
+
+const toRouteList = (routes) => {
+  if (!routes) {
+    return [];
+  }
+  return Array.isArray(routes) ? routes : [routes];
+};
+
+// A list of routes as a key, since an inline `currentAlso={[A, B]}` is a new
+// array at every render of the parent.
+const routeIdByRoute = new WeakMap();
+let routeIdCount = 0;
+const routeListKey = (routes) => {
+  let key = "";
+  for (const route of routes) {
+    let id = routeIdByRoute.get(route);
+    if (id === undefined) {
+      id = ++routeIdCount;
+      routeIdByRoute.set(route, id);
+    }
+    key += `${id},`;
+  }
+  return key;
+};
+
 /*
  * Custom hook to apply semi-transparent color when an element should be dimmed.
  *
@@ -48326,15 +48492,10 @@ const LinkWithRoute = ({
   ...rest
 }) => {
   const url = route.buildUrl(routeParams);
-  const {
-    matching
-  } = useRouteStatus(route);
-  const paramsAreMatching = route.matchesParams(routeParams);
-  const someExceptedRouteMatching = useSomeRouteMatching(currentExcept);
-  const someAlsoRouteMatching = useSomeRouteMatching(currentAlso);
-  // "Except" is a veto: a route named there is somewhere else, whatever the
-  // rest of the reading says.
-  const linkMatching = !someExceptedRouteMatching && (matching && paramsAreMatching || someAlsoRouteMatching);
+  const linkMatching = useRouteCurrent(route, routeParams, {
+    except: currentExcept,
+    also: currentAlso
+  });
   const innerCurrent = current || linkMatching;
   return jsx(Link, {
     href: url,
@@ -48343,22 +48504,6 @@ const LinkWithRoute = ({
     children: children || route.buildRelativeUrl(routeParams)
   });
 };
-// A route, or a list of them, read as one answer: does any of them match.
-// Reading matchingSignal during the render is what subscribes the component to
-// it, so every route is read even once one has answered yes — stopping early
-// would leave the component deaf to the ones it skipped.
-const useSomeRouteMatching = routes => {
-  if (!routes) {
-    return false;
-  }
-  let someMatching = false;
-  for (const route of Array.isArray(routes) ? routes : [routes]) {
-    if (route.matchingSignal.value) {
-      someMatching = true;
-    }
-  }
-  return someMatching;
-};
 const LinkPlain = props => {
   const defaultRef = useRef();
   props.ref = props.ref || defaultRef;
@@ -53442,11 +53587,7 @@ const ButtonWithRoute = props => {
     ...rest
   } = props;
   const url = route.buildUrl(routeParams);
-  const {
-    matching
-  } = useRouteStatus(route);
-  const paramsAreMatching = route.matchesParams(routeParams);
-  const linkMatching = matching && paramsAreMatching;
+  const linkMatching = useRouteCurrent(route, routeParams);
 
   // Merged into whatever the caller already holds: a button can be forced into
   // a state for a demo and still learn its own current-ness from its route.
@@ -64744,10 +64885,24 @@ const useDialogProps = props => {
       // whichever show call ran, not just when a stray authored display
       // property is actually present — harmless the rest of the time.
       dialogEl.setAttribute("navi-hidden", "");
-      if (isTopLayerPopover) {
-        dialogEl.hidePopover();
+      const hideNatively = () => {
+        if (isTopLayerPopover) {
+          dialogEl.hidePopover();
+        } else {
+          dialogEl.close();
+        }
+      };
+      if (findEvent(closeEvent, UNMOUNT_EVENT_TYPE)) {
+        // Leaving the tree: hidden natively once the commit is over. Its
+        // removal takes it out of the top layer and hands the focus to
+        // nobody, where closing it now hands the focus to whatever held it
+        // before the opening — often a trigger leaving in the same commit
+        // (see giveFocusBackAfterCommit). What is left to close then is its
+        // state: a <dialog> removed while open keeps its `open` attribute, and
+        // a subtree <Suspense> parks and puts back would show it again.
+        queueMicrotask(hideNatively);
       } else {
-        dialogEl.close();
+        hideNatively();
       }
       // Held at the size it has right now, for the whole way out. cleanup()
       // below already stops the JS repositioning, but the size is CSS-driven
@@ -66416,7 +66571,13 @@ const usePopoverProps = props => {
       // reliably sufficient once a consumer's own CSS also sets display.
       popoverEl.setAttribute("navi-hidden", "");
       if (isTopLayer) {
-        popoverEl.hidePopover();
+        // Left to its removal when the popover leaves the tree: that hides it
+        // and hands the focus to nobody, where hidePopover() hands the focus
+        // to whatever held it before the opening — often a trigger leaving in
+        // the same commit (see giveFocusBackAfterCommit).
+        if (!findEvent(closeEvent, UNMOUNT_EVENT_TYPE)) {
+          popoverEl.hidePopover();
+        }
       } else {
         openLocalPopoverCount = Math.max(0, openLocalPopoverCount - 1);
       }