@jsenv/navi 0.29.407 → 0.29.409

package/dist/jsenv_navi.js

@@ -12639,7 +12639,8 @@ const useActionBoundToOneParam = (action, paramsSignal) => {
   }, []);
   return [boundAction, getValue(), setValue];
 };
-// used by <details> to just call their action
+// The action bound to the signal, without reading it: the caller is not
+// re-rendered by the params (a control, a <details>).
 const useAction = (action, paramsSignal) => {
   return useBoundAction(action, paramsSignal);
 };
@@ -12661,12 +12662,13 @@ const useBoundAction = (action, actionParamsSignal) => {
     if (existingNoopAction) {
       return existingNoopAction;
     }
+    // Not bound to the params signal: nothing reads what a noop runs with, and
+    // a proxy following the signal would retarget (a new child action for each
+    // new value) at every change — for every button of a form, at every change
+    // of any of its fields.
     const noopAction = createAction(() => {}, { params: undefined });
-    const noopActionBound = actionParamsSignal
-      ? noopAction.bindParams(actionParamsSignal)
-      : noopAction;
-    noopActionRef.current = noopActionBound;
-    return noopActionBound;
+    noopActionRef.current = noopAction;
+    return noopAction;
   }
   const isFunction = typeof action === "function";
   if (!isFunction) {
@@ -22377,7 +22379,7 @@ import.meta.css = /* css */[`[data-scrollable] > .navi_loading_outline_wrapper,
   }
 }
 
-[hidden] {
+[hidden]:not([hidden="until-found" i]) {
   display: none !important;
 }
 `, "@jsenv/navi/src/box/box.jsx"];
@@ -41540,7 +41542,14 @@ const useControlProps = (props, {
     persists,
     uiActionInternal
   });
-  const [boundAction] = useActionBoundToOneParam(props.action, uiStateController.uiStateSignal);
+  // What the control draws is what it holds by itself, and this read is what
+  // re-renders it when that changes. A button inheriting the value of the
+  // control around it (a submit in a form, see ownUIStateSignal) draws none of
+  // that value, it only hands it to its action: subscribed to it, every button
+  // of a form would re-render at each change of any of its fields.
+  // eslint-disable-next-line no-unused-expressions
+  uiStateController.ownUIStateSignal.value;
+  const boundAction = useAction(props.action, uiStateController.uiStateSignal);
   const [controlRootProps, controlHostProps] = useInteractiveProps(props, {
     uiStateController,
     boundAction,
@@ -42305,7 +42314,10 @@ const useControlProps = (props, {
       };
     }
   }
-  const uiState = uiStateController.uiStateSignal.peek();
+
+  // Its own, like syncDomState: a button's DOM value is not the value it
+  // inherits from the control around it.
+  const uiState = uiStateController.ownUIStateSignal.peek();
   const domProps = toDomProps(uiState);
   {
     // Same as syncDomState: a field being typed into keeps its own text, so a
@@ -42833,7 +42845,9 @@ const useInteractiveProps = (props, {
     // stop waiting on a run that is still going. What it waits on is the run
     // it started, from navi_action_start to its settlement.
     const runningAction = uiStateController.runningActionSignal.value;
-    const actionStatus = useActionStatus(runningAction || boundAction);
+    // Only whether it runs: the whole status (useActionStatus) reads the params
+    // too, which for a button inheriting its form's value are the form.
+    const actionRunning = (runningAction || boundAction).runningStateSignal.value === RUNNING;
     const networkPolicyReason = useNetworkPolicyReason();
     const {
       disabled,
@@ -42881,7 +42895,7 @@ const useInteractiveProps = (props, {
     // just set stays visible and interactive while the action runs — no
     // loading, no readonly. On failure resetOnError rolls the state back and
     // the error callout says why.
-    const actionLoading = optimistic ? false : actionStatus.loading;
+    const actionLoading = optimistic ? false : actionRunning;
     const loadingResolved = loadingBase || actionLoading;
     const readOnlyResolved = readOnlyBase || actionLoading;
     // Read-only, and what this control opens still opens: reading what is in
@@ -43076,7 +43090,11 @@ const useInteractiveProps = (props, {
       errorEffect: actionErrorEffect,
       errorMapping
     });
-    const dataAction = action === undefined ? undefined : boundAction.callSource;
+    // What the attribute says is that an action is there (see
+    // findClosestControlWithAction); its text is a label. Peeked (toString),
+    // because `.callSource` follows the params — for a button inheriting its
+    // form's value, a re-render at every change of any field.
+    const dataAction = action === undefined ? undefined : String(boundAction);
     Object.assign(controlHostProps, {
       "data-action": dataAction
     });
@@ -51993,30 +52011,9 @@ const ButtonUI = props => {
   } = buttonControlHostProps;
   const loading = basePseudoState[":-navi-loading"];
 
-  // subscribe to document url to re-render and re-compute getHrefTargetInfo
-  useDocumentUrl();
-  const isLink = href !== undefined;
-  let as = "button";
-  let innerTarget;
-  let innerRel;
-  let innerCurrent;
-  if (isLink) {
-    as = "a";
-    const {
-      isSameSite,
-      isCurrent
-    } = getHrefTargetInfo(href);
-    innerTarget = target === undefined ? isSameSite ? undefined : "_blank" : target;
-    innerRel = rel === undefined ? isSameSite ? undefined : "noopener noreferrer" : rel;
-    innerCurrent = isCurrent;
-  }
-  // For a button that has only an href: nothing else knows it points at the
-  // page one is on. A route says so through `pseudoState`, which Box lays over
-  // this one.
-  buttonControlHostProps.basePseudoState = {
-    ...basePseudoState,
-    ":-navi-href-current": innerCurrent
-  };
+  // Where the href leads next to the page one is on (the target, the rel, the
+  // current state) is resolved above, by ButtonHrefResolver.
+  const as = href === undefined ? "button" : "a";
 
   // Worn as an attribute, like a link's (see link_replace.js): read off the
   // anchor by the click handler, off the source by --navi-nav-to.
@@ -52065,8 +52062,8 @@ const ButtonUI = props => {
     ref: ref,
     as: as,
     href: href,
-    target: innerTarget,
-    rel: innerRel,
+    target: target,
+    rel: rel,
     replace: undefined,
     ...replaceRequest,
     document: undefined,
@@ -52366,6 +52363,49 @@ const ButtonConfirm = ({
   });
 };
 
+const ButtonHrefResolver = props => {
+  const Next = useNextResolver();
+  if (props.href !== undefined) {
+    return renderResolver(ButtonWithHref, props);
+  }
+  return jsx(Next, {
+    ...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.
+const ButtonWithHref = props => {
+  const Next = useNextResolver();
+  const {
+    href,
+    target,
+    rel,
+    pseudoState
+  } = props;
+  // Read for the subscription: getHrefTargetInfo reads window.location.
+  useDocumentUrl();
+  const {
+    isSameSite,
+    isCurrent
+  } = getHrefTargetInfo(href);
+  return jsx(Next, {
+    ...props,
+    target: target === undefined ? isSameSite ? undefined : "_blank" : target,
+    rel: rel === undefined ? isSameSite ? undefined : "noopener noreferrer" : rel
+    // Under whatever the caller already says: a route knows better whether
+    // it is the page one is on (see button_route.jsx), and a demo can force
+    // the state.
+    ,
+    pseudoState: {
+      ":-navi-href-current": isCurrent,
+      ...pseudoState
+    }
+  });
+};
+
 const ButtonRouteResolver = props => {
   const Next = useNextResolver();
   if (props.route) {
@@ -52620,7 +52660,7 @@ const COMMAND_DEFAULT_PROPS_FACTORIES = {
  *   (it wears it itself) and loses the shrink under the finger, which has
  *   nothing left to scale but the interactive area itself.
  */
-const Button = /*#__PURE__*/createComponentResolver([ButtonFirstResolver, ButtonRouteResolver, ButtonCommandPropResolver, ButtonConfirmResolver, ButtonUI]);
+const Button = /*#__PURE__*/createComponentResolver([ButtonFirstResolver, ButtonRouteResolver, ButtonCommandPropResolver, ButtonConfirmResolver, ButtonHrefResolver, ButtonUI]);
 
 installImportMetaCssBuild(import.meta);
 const css$O = /* css */`.navi_control_swap {
@@ -69896,12 +69936,28 @@ const css$x = /* css */`@layer navi {
   display: inline-block;
 }
 
+.navi_list_find_stand_in {
+  height: calc(var(--x-find-line-count) * var(--x-find-line-size));
+  color: #0000;
+  line-height: var(--x-find-line-size);
+  white-space: pre;
+  overflow: clip;
+}
+
 .navi_list_container[data-horizontal] {
   --list-max-height: none;
 
   & > .navi_list_scroll_container > .navi_list > .navi_list_virtual_filler {
     width: var(--size-to-fill, 0px);
     height: 100%;
+    display: flex;
+
+    & > .navi_list_find_stand_in {
+      width: calc(var(--x-find-line-count) * var(--x-find-line-size));
+      writing-mode: vertical-lr;
+      flex-shrink: 0;
+      height: auto;
+    }
   }
 }
 
@@ -72399,10 +72455,12 @@ const Fallback = ({
 // settled after the first commit.
 const VirtualFiller = ({
   edge,
-  itemCount
+  itemCount,
+  findChunks
 }) => {
   const listRows = useContext(ListRowsContext);
-  const sizeToFill = itemCount * listRows.virtualItemSizeSignal.value;
+  const virtualItemSize = listRows.virtualItemSizeSignal.value;
+  const sizeToFill = itemCount * virtualItemSize;
   if (!sizeToFill) {
     return null;
   }
@@ -72413,8 +72471,17 @@ const VirtualFiller = ({
     "navi-virtual-filler": edge,
     "aria-hidden": true,
     style: {
-      "--size-to-fill": `${sizeToFill}px`
-    }
+      "--size-to-fill": `${sizeToFill}px`,
+      "--x-find-line-size": findChunks ? `${virtualItemSize}px` : undefined
+    },
+    children: findChunks && findChunks.map(chunk => jsx("div", {
+      className: "navi_list_find_stand_in",
+      hidden: "until-found",
+      style: {
+        "--x-find-line-count": chunk.to - chunk.from
+      },
+      children: chunk.text
+    }, `${chunk.from}_${chunk.to}`))
   });
 };
 
@@ -73047,6 +73114,7 @@ const VISIBILITY_HIDDEN_STYLE = {
  *
  * @type {import("ignore:preact").FunctionComponent<{
  *   renderItem: (item: any, index: number, state: {refreshing: boolean}) => import("ignore:preact").ComponentChildren,
+ *   findText?: (item: any, index: number) => string,
  *   items?: any[],
  *   itemsAction?: (range: {start: number, end: number, limit: number, before?: string, after?: string, around?: string, count?: number, signal: AbortSignal}) => any,
  *   count?: number,
@@ -73065,6 +73133,13 @@ const VISIBILITY_HIDDEN_STYLE = {
  *   the run. `state.refreshing` says the rows drawn are the ones from before
  *   while the run reads the collection again — the list carries
  *   `navi-refreshing` for the same reason.
+ * @param {(item: any, index: number) => string} [props.findText]
+ *   The text of a row as the browser's find in page (Cmd/Ctrl + F) sees it
+ *   while the row is not drawn — without it, find reaches only the rows in the
+ *   render window. The rows held off screen then carry that text where they
+ *   stand, hidden until the browser finds it there: it scrolls to the place,
+ *   and the list draws the row. One line per row. A row the run does not hold
+ *   yet has nothing to be found by.
  * @param {any[]} [props.items]
  *   The collection, when it is held in memory: all of it, in order. Nothing is
  *   ever asked for — `itemsAction`, `count`, `pageSize` and `memoryBudget` have
@@ -73161,12 +73236,19 @@ const createStoreHoldingNothing = rowCount => {
   };
 };
 
+// How many rows share one element of the text a filler carries for find in
+// page (see findText). One element per row would put back the DOM nodes the
+// window saves; one per filler would be revealed whole — every row of it laid
+// out — by the first match found in it.
+const FIND_CHUNK_ROW_COUNT = 64;
+
 // What a run draws: the rows its window frames, a skeleton for each one the
 // store does not hold, and fillers holding the room of the rows outside it.
 // Which rows are held, and fetching the others, is the store's (see
 // useItemStore).
 const useRunRows = (store, {
   renderItem,
+  findText,
   pageSize,
   groupBy,
   renderGroupLabel,
@@ -73374,6 +73456,37 @@ const useRunRows = (store, {
     }
     group.children.push(rowNode);
   };
+  // The text of the rows a filler stands for, cut in chunks aligned on the
+  // run's own ranks: the window sliding changes the chunk at its edge and
+  // leaves the others as they are.
+  const getFindChunks = (from, to) => {
+    if (!findText) {
+      return null;
+    }
+    const chunks = [];
+    let chunkFrom = from;
+    while (chunkFrom < to) {
+      const chunkIndex = Math.floor(rankOf(chunkFrom) / FIND_CHUNK_ROW_COUNT);
+      const alignedTo = rowOf((chunkIndex + 1) * FIND_CHUNK_ROW_COUNT);
+      const chunkTo = alignedTo < to ? alignedTo : to;
+      const lines = [];
+      let lineRowIndex = chunkFrom;
+      while (lineRowIndex < chunkTo) {
+        const item = getItemAt(lineRowIndex);
+        // A row not held has nothing to find, but keeps its line: the rows
+        // after it stay at their place.
+        lines.push(item === undefined ? "" : toFindLine(findText(item, lineRowIndex)));
+        lineRowIndex++;
+      }
+      chunks.push({
+        from: chunkFrom,
+        to: chunkTo,
+        text: lines.join("\n")
+      });
+      chunkFrom = chunkTo;
+    }
+    return chunks;
+  };
   // The room held for this run's own rows that the window leaves out. It
   // belongs to the run and not to the list: a list is not necessarily made of
   // one run, and what sits before or after it (a header, rows given one by
@@ -73381,7 +73494,8 @@ const useRunRows = (store, {
   if (windowFrom > runStart) {
     rows.push(jsx(VirtualFiller, {
       edge: "before",
-      itemCount: windowFrom - runStart
+      itemCount: windowFrom - runStart,
+      findChunks: getFindChunks(runStart, windowFrom)
     }, "navi-list-filler-before"));
   }
   const renderItemState = {
@@ -73483,11 +73597,20 @@ const useRunRows = (store, {
   if (runEnd > windowTo) {
     rows.push(jsx(VirtualFiller, {
       edge: "after",
-      itemCount: runEnd - windowTo
+      itemCount: runEnd - windowTo,
+      findChunks: getFindChunks(windowTo, runEnd)
     }, "navi-list-filler-after"));
   }
   return rows;
 };
+// One row, one line: a line break inside it would push every row below off
+// its place.
+const toFindLine = text => {
+  if (text === undefined || text === null) {
+    return "";
+  }
+  return String(text).replace(/[\r\n]+/g, " ");
+};
 
 // A run's row that has not arrived, standing where the real one will. It never
 // reaches ListItemUI (see ListItemSkeletonResolver), so it is drawn among the
@@ -81588,8 +81711,22 @@ function WheelUI(props) {
     ...style
   };
 
-  // Main-axis size of the viewport, from the orientation.
-  const viewportMain = vp => isHorizontal ? vp.clientWidth : vp.clientHeight;
+  // Main-axis size of the viewport, from the orientation. Cached like the row
+  // size: applyOffset runs right after each window commit, where reading the
+  // box would force a layout at every row crossing. The observer below keeps it
+  // current; 0 (no box yet) is never kept, so the next read measures again.
+  const viewportSizeRef = useRef(0);
+  const measureViewportMain = vp => isHorizontal ? vp.clientWidth : vp.clientHeight;
+  const viewportMain = vp => {
+    if (viewportSizeRef.current > 0) {
+      return viewportSizeRef.current;
+    }
+    const size = measureViewportMain(vp);
+    if (size > 0) {
+      viewportSizeRef.current = size;
+    }
+    return size;
+  };
 
   // Row size (px). Rows are uniform, so one measurement (cached) drives all the
   // geometry — positions are then computed from value indices, not read off the
@@ -81660,6 +81797,21 @@ function WheelUI(props) {
       applyOffset(vp);
     }
   };
+  // Refreshes the cached viewport size (see viewportMain). Read in the observer
+  // callback, where the layout is already clean. A new size moves the center
+  // window, so the offset is re-applied with it.
+  useLayoutEffect(() => {
+    const vp = getViewport();
+    viewportSizeRef.current = 0;
+    const resizeObserver = new ResizeObserver(() => {
+      viewportSizeRef.current = measureViewportMain(vp);
+      applyOffset(vp);
+    });
+    resizeObserver.observe(vp);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [isHorizontal]);
 
   // The value index at the center for the current position.
   const centeredIndex = vp => {