@jsenv/navi 0.29.409 → 0.29.411

package/dist/jsenv_navi.js

@@ -13437,7 +13437,9 @@ const createControlValidation = (
 
     let newConstraintValidityState = { valid: true };
     const constraintSet = getConstraintSet();
-    const elementSig = getElementSignature(controller.ref.current);
+    // Only for the debug lines of a failure or a change: computed when one of
+    // them is written, not at every check (every notch of a wheel).
+    const elementSig = () => getElementSignature(controller.ref.current);
     // Not logged: every control checks its constraints on every interaction and
     // almost always passes, so this line alone was most of the debug output —
     // and with devtools open, formatting it costs a frame. What matters is a
@@ -13463,7 +13465,7 @@ const createControlValidation = (
         constraintValidityInfo.message,
       );
       debugUIState(
-        `${elementSig} constraint "${constraint.name}" failed -> ${constraintValidityInfo.message}`,
+        `${elementSig()} constraint "${constraint.name}" failed -> ${constraintValidityInfo.message}`,
       );
       const thisConstraintFailureInfo = {
         name: constraint.name,
@@ -13535,7 +13537,7 @@ const createControlValidation = (
       if (element) {
         debugUIState(
           event,
-          `${elementSig} constraint validity changed -> dispatch ${NAVI_VALIDITY_CHANGE_CUSTOM_EVENT}`,
+          `${elementSig()} constraint validity changed -> dispatch ${NAVI_VALIDITY_CHANGE_CUSTOM_EVENT}`,
         );
         dispatchPublicCustomEvent(element, NAVI_VALIDITY_CHANGE_CUSTOM_EVENT);
       }
@@ -13581,7 +13583,7 @@ const createControlValidation = (
     event,
     { report = false, fromRequestAction = false } = {},
   ) => {
-    const elementSig = getElementSignature(controller.ref.current);
+    const elementSig = () => getElementSignature(controller.ref.current);
     const isValid = checkValidity({ event, fromRequestAction });
     if (failingManagedControlValidity) {
       // Group/form case: find the actual failing leaf and report on it.
@@ -13603,7 +13605,7 @@ const createControlValidation = (
       if (report) {
         debugUIState(
           event,
-          `syncValidity ${elementSig}: has failing constraint and report=true -> reportValidity`,
+          `syncValidity ${elementSig()}: has failing constraint and report=true -> reportValidity`,
         );
         reportValidity({ event });
       } else if (failedConstraintInfo.status === "error") {
@@ -13613,12 +13615,12 @@ const createControlValidation = (
         // on the next action attempt via autoResetOnAction.
         debugUIState(
           event,
-          `syncValidity ${elementSig}: has error constraint and report=false -> keep callout open`,
+          `syncValidity ${elementSig()}: has error constraint and report=false -> keep callout open`,
         );
       } else {
         debugUIState(
           event,
-          `syncValidity ${elementSig}: has failing constraint but report=false -> close callout if any`,
+          `syncValidity ${elementSig()}: has failing constraint but report=false -> close callout if any`,
         );
         callout.removeOpenToken(VALIDATION_TOKEN, event);
       }
@@ -27352,6 +27354,7 @@ This prevents cross-test pollution and ensures clean state.`,
 
   // Store previous route states to detect changes
   const routePreviousStateMap = new WeakMap();
+  let previousPath = null;
   const updateRoutes = (
     url,
     {
@@ -27360,6 +27363,14 @@ This prevents cross-test pollution and ensures clean state.`,
     } = {},
   ) => {
     currentUrl = url;
+    // Whether a route matches is decided by the path alone: the search string
+    // only fills the params (see matchUrl). An address that keeps its path — a
+    // search param written, at every notch of a wheel bound to it — cannot make
+    // a route start or stop matching, so only the routes already matching are
+    // read again.
+    const path = urlWithoutSearchAndHash(url);
+    const pathKept = path === previousPath;
+    previousPath = path;
     const returnValue = {};
     const routeMatchInfoSet = new Set();
     for (const route of routeSet) {
@@ -27375,7 +27386,8 @@ This prevents cross-test pollution and ensures clean state.`,
       const oldParams = previousState.params;
       const oldActionParams = previousState.actionParams;
 
-      let extractedParams = routePattern.applyOn(url);
+      let extractedParams =
+        pathKept && !oldMatching ? null : routePattern.applyOn(url);
       let newMatching = Boolean(extractedParams);
       let newParams;
       if (extractedParams) {
@@ -27444,6 +27456,25 @@ This prevents cross-test pollution and ensures clean state.`,
           }
         }
 
+        // What the matching routes say, read once for every connection of every
+        // route that does not match (below), rather than by walking all the
+        // routes again for each of those connections.
+        const matchingRawParamsArray = [];
+        const paramNameDeclaredByMatchingRouteSet = new Set();
+        const matchingFamilyRootSet = new Set();
+        for (const matchingRoute of matchingRouteSet) {
+          matchingRawParamsArray.push(matchingRoute.rawParamsSignal.value);
+          const matchingPattern =
+            getRoutePrivateProperties(matchingRoute).routePattern;
+          for (const paramName of matchingPattern.queryConnectionMap.keys()) {
+            paramNameDeclaredByMatchingRouteSet.add(paramName);
+          }
+          for (const paramName of matchingPattern.pathConnectionMap.keys()) {
+            paramNameDeclaredByMatchingRouteSet.add(paramName);
+          }
+          matchingFamilyRootSet.add(matchingPattern.familyRoot);
+        }
+
         for (const {
           route,
           routePrivateProperties,
@@ -27459,40 +27490,21 @@ This prevents cross-test pollution and ensures clean state.`,
             const urlParamValue = rawParams[paramName];
 
             if (!newMatching) {
-              // Route doesn't match - check if any matching route extracts this parameter
-              let parameterExtractedByMatchingRoute = false;
-              let parameterDeclaredByMatchingRoute = false;
-              let matchingRouteInSameFamily = false;
-
-              for (const otherRoute of routeSet) {
-                if (otherRoute === route || !otherRoute.matching) {
-                  continue;
-                }
-                const otherRawParams = otherRoute.rawParamsSignal.value;
-
-                // Check if this matching route extracts the parameter
-                if (paramName in otherRawParams) {
-                  parameterExtractedByMatchingRoute = true;
-                }
-
-                // Same param, on the page one is arriving at: what it is worth
-                // there is that page's business, url or no url — it may open on
-                // a default of its own (see searchParams' `{ signal, default }`).
-                const otherPattern =
-                  getRoutePrivateProperties(otherRoute).routePattern;
-                if (
-                  otherPattern.queryConnectionMap.has(paramName) ||
-                  otherPattern.pathConnectionMap.has(paramName)
-                ) {
-                  parameterDeclaredByMatchingRoute = true;
-                }
-
-                // Same family = same topmost ancestor
-                // (familyRoot, computed in setupRoutePatterns)
-                if (otherPattern.familyRoot === routePattern.familyRoot) {
-                  matchingRouteInSameFamily = true;
-                }
-              }
+              // Whether a matching route extracts this parameter from the url
+              const parameterExtractedByMatchingRoute =
+                matchingRawParamsArray.some(
+                  (matchingRawParams) => paramName in matchingRawParams,
+                );
+              // Same param, on the page one is arriving at: what it is worth
+              // there is that page's business, url or no url — it may open on
+              // a default of its own (see searchParams' `{ signal, default }`).
+              const parameterDeclaredByMatchingRoute =
+                paramNameDeclaredByMatchingRouteSet.has(paramName);
+              // Same family = same topmost ancestor
+              // (familyRoot, computed in setupRoutePatterns)
+              const matchingRouteInSameFamily = matchingFamilyRootSet.has(
+                routePattern.familyRoot,
+              );
 
               // A weak param qualifies one visit: leaving the route ends it,
               // whatever the family and whatever the default. Coming back by a
@@ -27725,6 +27737,11 @@ const getParamsCacheKey = (params) => {
   return key;
 };
 
+const urlWithoutSearchAndHash = (url) => {
+  const urlObject = new URL(url);
+  return `${urlObject.origin}${urlObject.pathname}`;
+};
+
 /**
  * Is there an entry of THIS document behind the current one? And ahead of it?
  *
@@ -28168,7 +28185,13 @@ const forgetScrollerUnlessPageLeft = (name) => {
   }
 };
 
-const getHrefTargetInfo = (href) => {
+// `currentUrlString`: the address the href is compared with — the document's by
+// default. A caller subscribed to documentUrlSignal passes the value it read,
+// which is ahead of window.location while a debounced write is pending.
+const getHrefTargetInfo = (
+  href,
+  currentUrlString = window.location.href,
+) => {
   href = String(href);
 
   if (!href || href.trim() === "") {
@@ -28181,8 +28204,8 @@ const getHrefTargetInfo = (href) => {
     };
   }
 
-  const currentUrl = new URL(window.location.href);
-  const targetUrl = new URL(href, window.location.href);
+  const currentUrl = new URL(currentUrlString);
+  const targetUrl = new URL(href, currentUrlString);
 
   let isCurrent = false;
   {
@@ -28224,6 +28247,21 @@ const getHrefTargetInfo = (href) => {
   };
 };
 
+// A field of getHrefTargetInfo that depends on the page one is on (isCurrent,
+// isAnchor), read through a computed of that one boolean: the caller re-renders
+// when it flips, not at every address write — a search param bound to a wheel
+// writes the address at every notch.
+const useHrefTargetFlag = (href, flagName) => {
+  const flagSignal = useMemo(
+    () =>
+      computed(
+        () => getHrefTargetInfo(href, documentUrlSignal.value)[flagName],
+      ),
+    [href, flagName],
+  );
+  return flagSignal.value;
+};
+
 /*
  * An app can ship more than one document — an admin panel, a status page, an
  * entry point of its own — and a link to one of them is not a route, it is a
@@ -46729,19 +46767,28 @@ const usePreloadOpeningOnPress = (ref, command, prefetch = true) => {
 
 /**
  * Hook that reactively checks if a URL is visited.
- * Re-renders when the visited URL set changes.
+ * Re-renders when that answer changes — not at every url added to the visited
+ * set, which grows at every new address (a search param bound to a wheel
+ * writes one at every notch).
  *
  * @param {string} url - The URL to check
  * @returns {boolean} Whether the URL has been visited
  */
 const useIsVisited = (url) => {
-  return useMemo(() => {
-    // Access the signal to create reactive dependency
-    // eslint-disable-next-line no-unused-expressions
-    visitedUrlsSignal.value;
-
-    return isVisited(url);
-  }, [url, visitedUrlsSignal.value]);
+  const visitedSignal = useMemo(
+    () =>
+      computed(() => {
+        // Both are what the answer depends on: the set, and the address a
+        // relative url is resolved against (see isVisited).
+        // eslint-disable-next-line no-unused-expressions
+        visitedUrlsSignal.value;
+        // eslint-disable-next-line no-unused-expressions
+        documentUrlSignal.value;
+        return isVisited(url);
+      }),
+    [url],
+  );
+  return visitedSignal.value;
 };
 
 /**
@@ -47401,13 +47448,14 @@ const LinkPlain = props => {
   const loading = basePseudoState[":-navi-loading"];
   const shouldDimColor = readOnly || disabled;
   useDimColorWhen(props.ref, shouldDimColor);
-  // subscribe to document url to re-render and re-compute getHrefTargetInfo
-  useDocumentUrl();
+  // Re-rendered when one of these flips, not at every address write (see
+  // useHrefTargetFlag). Whether the href leaves the site does not depend on
+  // the address.
+  const isCurrent = useHrefTargetFlag(href, "isCurrent");
+  const isAnchor = useHrefTargetFlag(href, "isAnchor");
   const {
-    isSameSite,
-    isAnchor,
-    isCurrent
-  } = getHrefTargetInfo(href);
+    isSameSite
+  } = getHrefTargetInfo(href, documentUrlSignal.peek());
   // A tab that is a SLIDE is current when the container is on it — which the
   // <Nav> around reads off that container, so nothing here has to be told.
   const innerCurrent = current || (slide ? nav?.currentSlideArea === slide : isCurrent);
@@ -52373,10 +52421,9 @@ const ButtonHrefResolver = props => {
   });
 };
 
-// What the href means next to the page one is on depends on the document url,
-// so a button with an href re-renders at every address write. One without
-// never reaches here: it has nothing to re-compute, and every button on screen
-// would otherwise pay for each write.
+// Whether the href is the page one is on depends on the address, and re-renders
+// the button only when it flips (see useHrefTargetFlag). Whether it leaves the
+// site does not depend on the address.
 const ButtonWithHref = props => {
   const Next = useNextResolver();
   const {
@@ -52385,12 +52432,10 @@ const ButtonWithHref = props => {
     rel,
     pseudoState
   } = props;
-  // Read for the subscription: getHrefTargetInfo reads window.location.
-  useDocumentUrl();
+  const isCurrent = useHrefTargetFlag(href, "isCurrent");
   const {
-    isSameSite,
-    isCurrent
-  } = getHrefTargetInfo(href);
+    isSameSite
+  } = getHrefTargetInfo(href, documentUrlSignal.peek());
   return jsx(Next, {
     ...props,
     target: target === undefined ? isSameSite ? undefined : "_blank" : target,
@@ -69770,6 +69815,11 @@ const css$x = /* css */`@layer navi {
   display: flex;
   overflow: hidden;
 
+  &[data-borderless] {
+    --x-list-border-radius: 0px;
+    overflow: visible;
+  }
+
   &[data-overflow-visible="both"] {
     overflow: visible;
   }
@@ -70454,6 +70504,7 @@ const ListUI = props => {
     "data-item-transition": itemTransition ? "" : undefined,
     popover: popover,
     "data-horizontal": horizontal ? "" : undefined,
+    "data-borderless": isBorderless(rest) ? "" : undefined,
     "data-scroller": getScrollerAttribute(scroller),
     "data-overflow-visible": getOverflowVisibleAttribute(overflow, overflowX, overflowY),
     "navi-hover-while-scrolling": hoverWhileScrolling ? "" : undefined,
@@ -71824,6 +71875,25 @@ const getScrollerAttribute = scroller => {
   return "parent";
 };
 
+// A radius asked for explicitly is kept: a borderless list painting a
+// background of its own may want that surface rounded, and clipped to it.
+const isBorderless = ({
+  border,
+  borderWidth,
+  borderRadius
+}) => {
+  if (borderRadius !== undefined) {
+    return false;
+  }
+  if (borderWidth !== undefined) {
+    return parseFloat(borderWidth) === 0;
+  }
+  if (border === undefined) {
+    return false;
+  }
+  return border === "none" || parseFloat(border) === 0;
+};
+
 // overflow lands as an inline style on the inner scroll element, which is
 // enough for every value but "visible": that one only means anything once the
 // frame around it stops clipping too. Reading the per-axis props over the