@jsenv/navi 0.29.318 → 0.29.320

package/dist/dev/jsenv_navi.js

@@ -27799,14 +27799,35 @@ Consider using unique IDs for each component instance.`,
 
 const NO_OP = () => {};
 const NO_ID_GIVEN = [undefined, NO_OP, NO_OP];
+// What the computed below answers for a key the document state does not hold:
+// key presence is the flag, and the value under a present key may be anything,
+// undefined included.
+const KEY_NOT_IN_STATE = Symbol("key_not_in_state");
 const useNavStateBasic = (
   id,
   { debug, type = "replace", onLeave, defaultValue } = {},
 ) => {
   // Hooks must be called unconditionally — before the !id early return.
-  const state = documentStateSignal.value;
-  // Key presence is the flag — the value may be anything, including undefined.
-  const keyInState = Boolean(id && state && Object.hasOwn(state, id));
+  //
+  // Subscribed to this one key, through a computed, rather than to the state
+  // as a whole: every popup with a nav state reads here, and a document state
+  // is written whenever any of them opens — a list of forty names each with a
+  // tooltip would re-render forty pickers, chains included, for the sheet
+  // around them opening. The computed only wakes this component when what
+  // sits under its own key changes.
+  const keyValueComputed = useMemo(
+    () =>
+      computed(() => {
+        const state = documentStateSignal.value;
+        if (id && state && Object.hasOwn(state, id)) {
+          return state[id];
+        }
+        return KEY_NOT_IN_STATE;
+      }),
+    [id],
+  );
+  const keyValue = keyValueComputed.value;
+  const keyInState = keyValue !== KEY_NOT_IN_STATE;
   const onLeaveRef = useRef(onLeave);
   onLeaveRef.current = onLeave;
   const prevKeyInStateRef = useRef(keyInState);
@@ -27841,7 +27862,7 @@ const useNavStateBasic = (
     effectiveType = "replace";
   }
 
-  const currentValue = keyInState ? state[id] : defaultValue;
+  const currentValue = keyInState ? keyValue : defaultValue;
 
   if (debug) {
     console.debug(`useNavState(${id}) current value is ${currentValue}`);
@@ -35465,6 +35486,18 @@ const MOUNT_DEFAULT = "from-first-open";
 const popupsMountingContentForOpen = new Set();
 const isMountingContentForOpen = (popupElement) =>
   popupsMountingContentForOpen.has(popupElement);
+// The popup being built that holds `element` somewhere below it, or null. For
+// an element whose own openable ancestor is something else (a closed trigger
+// inside the popup): what the layout would say about it is what it says about
+// the whole popup — nothing is on screen there yet.
+const findPopupMountingContentAround = (element) => {
+  for (const popupElement of popupsMountingContentForOpen) {
+    if (popupElement !== element && popupElement.contains(element)) {
+      return popupElement;
+    }
+  }
+  return null;
+};
 
 // requestIdleCallback is missing from Safari; a timeout is close enough there.
 const requestIdle = (callback) =>
@@ -35634,6 +35667,9 @@ const useDisplayedLayoutEffect = (ref, callback, deps) => {
   // Set by the mount effect below for an element that lives in its openable
   // ancestor's façade rather than in what that ancestor opens.
   const displayedWhileAncestorClosedRef = useRef(false);
+  // The popup whose opening will answer what the mount could not — see the
+  // mount effect below.
+  const decisionDeferredToRef = useRef(null);
 
   // Run on mount (or when deps change) — but only if the element is visible.
   useLayoutEffect(() => {
@@ -35647,14 +35683,26 @@ const useDisplayedLayoutEffect = (ref, callback, deps) => {
       return;
     }
     if (!isAncestorOpen(ancestor)) {
-      if (
+      if (isMountingContentForOpen(ancestor)) {
         // The popup building its content for its own opening: nothing in it
         // is on screen, and the open about to follow reveals all of it. Known
         // without asking the layout, which a synchronous mount would have to
-        // bring up to date once per element asking.
-        isMountingContentForOpen(ancestor) ||
-        !isDisplayedDespiteClosedAncestor(el, ancestor)
-      ) {
+        // bring up to date once per element asking; the observer below fires
+        // once it opens.
+        return;
+      }
+      const popupMounting = findPopupMountingContentAround(el);
+      if (popupMounting) {
+        // Under a closed trigger — a picker's façade, an expandable's header —
+        // inside a popup being built. Whether this element is on screen once
+        // that popup is open is exactly what the layout cannot say while the
+        // popup, and everything in it, is display:none: it would answer "hidden"
+        // for a façade that the opening is about to show. Asked again when the
+        // popup opens (see the observer effect below).
+        decisionDeferredToRef.current = popupMounting;
+        return;
+      }
+      if (!isDisplayedDespiteClosedAncestor(el, ancestor)) {
         // Ancestor is closed and took this element off screen with it — skip
         // now; the observeAncestorOpenState call below will fire once it
         // opens.
@@ -35678,19 +35726,63 @@ const useDisplayedLayoutEffect = (ref, callback, deps) => {
     if (!ancestor) {
       return undefined;
     }
-    return observeAncestorOpenState(ancestor, ({ isOpen }) => {
-      if (!isOpen) {
-        return;
-      }
-      if (displayedWhileAncestorClosedRef.current) {
-        // Façade content: on screen the whole time, so this opening reveals
-        // nothing here — and `becauseAncestorOpened: true` about it would be
-        // false in a way consumers act on (see use_auto_focus.js).
-        return;
-      }
-      const lastEl = ref.current;
-      callbackRef.current(lastEl, createDisplayedEvent(ancestor, true));
-    });
+    const stopObservingAncestor = observeAncestorOpenState(
+      ancestor,
+      ({ isOpen }) => {
+        if (!isOpen) {
+          return;
+        }
+        if (displayedWhileAncestorClosedRef.current) {
+          // Façade content: on screen the whole time, so this opening reveals
+          // nothing here — and `becauseAncestorOpened: true` about it would be
+          // false in a way consumers act on (see use_auto_focus.js).
+          return;
+        }
+        const lastEl = ref.current;
+        callbackRef.current(lastEl, createDisplayedEvent(ancestor, true));
+      },
+    );
+    const popupMounting = decisionDeferredToRef.current;
+    if (!popupMounting) {
+      return stopObservingAncestor;
+    }
+    // The mount deferred its decision to this popup's opening (see above):
+    // once it is open, the layout answers for what the closed ancestor keeps
+    // on screen. A façade element is then displayed, by that opening — which
+    // owns it, the way it owns everything the popup reveals. An element the
+    // closed ancestor genuinely hides stays with the observer above.
+    const stopObservingPopup = observeAncestorOpenState(
+      popupMounting,
+      ({ isOpen }) => {
+        if (!isOpen) {
+          return;
+        }
+        stopObservingPopup();
+        decisionDeferredToRef.current = null;
+        const lastEl = ref.current;
+        if (!lastEl) {
+          return;
+        }
+        if (isAncestorOpen(ancestor)) {
+          callbackRef.current(
+            lastEl,
+            createDisplayedEvent(popupMounting, true),
+          );
+          return;
+        }
+        if (isDisplayedDespiteClosedAncestor(lastEl, ancestor)) {
+          displayedWhileAncestorClosedRef.current = true;
+          callbackRef.current(
+            lastEl,
+            createDisplayedEvent(popupMounting, true),
+          );
+        }
+      },
+    );
+    return () => {
+      stopObservingAncestor();
+      stopObservingPopup();
+    };
   }, []);
 };
 
@@ -61198,24 +61290,18 @@ const useDialogProps = props => {
     // comment): this opening has its own content to be measured against, and
     // measuring it inside last time's box would answer with last time's size.
     unfreezeSize(dialogEl);
-    positionDialog();
-    if (sizing === "frozen") {
-      // After positionDialog: the caps it writes
-      // (--container-position-remaining-*) are part of what decides the size
-      // being taken, so measuring before it would freeze a box the dialog
-      // never actually had.
-      freezeSize(dialogEl);
-    }
 
-    // Reposition on the same triggers Popover's own visibleRectEffect
-    // already reacts to generically — window resize/scroll/visual-viewport
-    // changes for layer="top" (positionedAncestor is already
+    // Placed by the effect's own first check, synchronously, on the opening
+    // event — and repositioned on the same triggers Popover's own
+    // visibleRectEffect reacts to generically: window resize/scroll/
+    // visual-viewport changes for layer="top" (positionedAncestor is already
     // document.documentElement there, see its own computation above;
-    // visibleRectEffect already debounces visualViewport resize by 100ms
-    // to avoid the mobile tap-to-tap-input keyboard flicker, so no
-    // separate mechanism is needed here for that), or the positioned
-    // ancestor's own resize for layer="local" — see this file's top
-    // comment.
+    // visibleRectEffect already debounces visualViewport resize by 100ms to
+    // avoid the mobile tap-to-tap-input keyboard flicker, so no separate
+    // mechanism is needed here for that), or the positioned ancestor's own
+    // resize for layer="local" — see this file's top comment. One placement
+    // for the opening: a positionDialog() of our own before the effect would
+    // be a second pick, and a second layout between two reads of the viewport.
     const rectEffect = visibleRectEffect(positionedAncestor, (visibleRect, {
       event
     }) => {
@@ -61230,6 +61316,13 @@ const useDialogProps = props => {
       event: e,
       skipElementResize: true
     });
+    if (sizing === "frozen") {
+      // After the placement: the caps it writes
+      // (--container-position-remaining-*) are part of what decides the size
+      // being taken, so measuring before it would freeze a box the dialog
+      // never actually had.
+      freezeSize(dialogEl);
+    }
     rectEffect.observeSize(dialogEl);
     // Exposed for the placement-props effect below, which needs to re-place an
     // already-open dialog.
@@ -63569,6 +63662,13 @@ const PickerCustomResolver = props => {
     if (props.calloutIcon === undefined) {
       props.calloutIcon = props.variant !== "text";
     }
+    // A door's content is never where its value comes from (see `standalone`
+    // above), so nothing needs it before the first open: built then, like a
+    // popup's. A name in a list wrapped in a tooltip is otherwise a card in
+    // the DOM per name, and each one asks the layout whether it is on screen.
+    if (props.mount === undefined) {
+      props.mount = MOUNT_DEFAULT;
+    }
     if (props.rightSlotIcon === undefined) {
       props.rightSlotIcon = jsx(CalloutStatusIcon, {
         status: props.calloutStatus,
@@ -64434,13 +64534,15 @@ const PICKER_CALLOUT_CONTENT_TOKEN = createOpenToken();
  * The content is rendered into an element this component owns, handed to the
  * callout as its message (a Node, appended as-is) and taken back when the
  * callout closes. Between two opens it is docked, hidden, in the span below:
- * in the document the whole time, the way a popup's `mount="always"` keeps its
- * content — so what it holds survives a close, and what it measures of itself
- * at mount (a computed color, a light-dark() pair) resolves against a real
- * ancestry. An element with no document has no computed style, and a badge
- * reading its own background there would see nothing at all. The element
- * carries data-picker-content: the callout is appended inside the picker root,
- * and a press in there must read as inside the popup, not on the trigger.
+ * in the document the whole time once built, so what it holds survives a
+ * close, and what it measures of itself at mount (a computed color, a
+ * light-dark() pair) resolves against a real ancestry. An element with no
+ * document has no computed style, and a badge reading its own background
+ * there would see nothing at all. When it is built is the popup's own `mount`
+ * rule (see popup_content_mount.js) — the first open, for a callout. The
+ * element carries data-picker-content: the callout is appended inside the
+ * picker root, and a press in there must read as inside the popup, not on the
+ * trigger.
  */
 const PickerCalloutPopup = ({
   ref,
@@ -64455,9 +64557,18 @@ const PickerCalloutPopup = ({
   onnavi_request_open,
   onnavi_request_close,
   onnavi_request_confirm,
-  children
+  mount,
+  children: childrenProp
 }) => {
   const hostRef = useRef(null);
+  // The dock is what the content finds as its openable ancestor (the
+  // aria-expanded below), which is what the mount marks as being built for
+  // its own opening.
+  const contentMounted = usePopupContentMount(openController, ref, {
+    mount,
+    anchor
+  });
+  const children = contentMounted ? childrenProp : null;
   // Reassigned on every render, like Popover's own, so it closes over the
   // latest props.
   openController.getElement = () => pickerRef.current;
@@ -67338,7 +67449,8 @@ const useListScrollSync = ({
   const debugScroll = useDebugScroll();
   const virtualItemSizeSignal = useVirtualItemSizeSignal(ref, virtualItemSize, horizontal, {
     virtual,
-    renderBudget
+    renderBudget,
+    scrolledWanted: scrolled ?? defaultScrolled
   });
   const getScroller = () => getScrollerEl(ref.current, scroller, horizontal);
   const getListEl = () => ref.current.querySelector(".navi_list");
@@ -68744,7 +68856,8 @@ const measureItemSize = (listEl, horizontal) => {
 };
 const useVirtualItemSizeSignal = (ref, virtualItemSizeProp = 0, horizontal, {
   virtual,
-  renderBudget
+  renderBudget,
+  scrolledWanted
 }) => {
   const virtualSizeSignalRef = useRef(null);
   if (!virtualSizeSignalRef.current) {
@@ -68814,6 +68927,14 @@ const useVirtualItemSizeSignal = (ref, virtualItemSizeProp = 0, horizontal, {
     if (virtualSizeSignal.peek() !== 0) {
       return undefined;
     }
+    // Measured only for what reads the size: the fillers of rows held off
+    // screen, and a list held somewhere (placeWhereHeld) before it knows where
+    // that is. A list drawing every row it has, opening at its start, would
+    // pay a layout in every commit for a number nobody reads.
+    const sizeRead = virtual.totalSignal.peek() > renderBudget || scrolledWanted !== undefined && scrolledWanted !== "start";
+    if (!sizeRead) {
+      return undefined;
+    }
     const listEl = ref.current?.querySelector(".navi_list");
     if (!listEl) {
       return undefined;
@@ -70030,6 +70151,7 @@ const ListItems = ({
   const virtual = useContext(ListVirtualContext);
   const slotId = useContext(ListSlotContext);
   const renderWindow = useContext(RenderWindowContext);
+  const separator = useContext(SeparatorContext);
   // The vnode drawn for a row, kept by item: a run rendering again (its window
   // moving, its first paint's budget giving way to the full one) hands preact
   // the same vnode for a row that has not changed, and preact leaves that
@@ -70038,14 +70160,14 @@ const ListItems = ({
   // row at the same index, in the same refreshing state: everything the
   // function is given.
   const rowVnodesRef = useRef(null);
-  if (!rowVnodesRef.current || rowVnodesRef.current.renderItem !== renderItem) {
+  if (!rowVnodesRef.current || rowVnodesRef.current.renderItem !== renderItem || rowVnodesRef.current.separator !== separator) {
     rowVnodesRef.current = {
       renderItem,
+      separator,
       byItem: new Map()
     };
   }
   const rowVnodesByItem = rowVnodesRef.current.byItem;
-  const separator = useContext(SeparatorContext);
   const store = useItemStore({
     items,
     count,
@@ -70275,17 +70397,33 @@ const ListItems = ({
     const item = getItemAt(rowIndex);
     const key = item === undefined ? `${ownerId}_skeleton_${rowIndex}` : idOf(item, rowIndex);
     let rowVnode;
+    let rowContextValue;
+    let rowKept = null;
     if (item !== undefined) {
       const rowVnodeKept = rowVnodesByItem.get(item);
       if (rowVnodeKept && rowVnodeKept.rowIndex === rowIndex && rowVnodeKept.refreshing === renderItemState.refreshing) {
         rowVnode = rowVnodeKept.vnode;
+        rowContextValue = rowVnodeKept.rowContextValue;
+        rowKept = rowVnodeKept;
       } else {
         rowVnode = renderItem(item, rowIndex, renderItemState);
-        rowVnodesByItem.set(item, {
+        // Kept with the vnode, for the same reason: a context value that is a
+        // fresh object on every render forces every consumer of it to render,
+        // which is the row's own chain — the vnode handed back unchanged would
+        // then buy nothing.
+        rowContextValue = {
+          id: key,
+          index: rowIndex,
+          item
+        };
+        rowKept = {
           vnode: rowVnode,
+          rowContextValue,
           rowIndex,
-          refreshing: renderItemState.refreshing
-        });
+          refreshing: renderItemState.refreshing,
+          separatorVnode: null
+        };
+        rowVnodesByItem.set(item, rowKept);
       }
     } else if (renderRowSkeleton === false) {
       // The row must still take its room: without it the rows below would
@@ -70309,20 +70447,25 @@ const ListItems = ({
       // as a hairline under the label.
       const drawSeparator = separator && rowIndex > 0 && !opensGroup(groupKeyOf(item, rowIndex));
       if (drawSeparator) {
-        pushRow(cloneElement(resolveSeparatorVnode(separator, rowIndex - 1), {
-          key: `${key}_separator`
-        }), item, rowIndex);
+        // Kept with the row too: a separator built again is a separator
+        // rendered again.
+        let separatorVnode = rowKept ? rowKept.separatorVnode : null;
+        if (!separatorVnode) {
+          separatorVnode = cloneElement(resolveSeparatorVnode(separator, rowIndex - 1), {
+            key: `${key}_separator`
+          });
+          if (rowKept) {
+            rowKept.separatorVnode = separatorVnode;
+          }
+        }
+        pushRow(separatorVnode, item, rowIndex);
       }
       pushRow(jsx(ListRowContext.Provider, {
         value: item === undefined ? {
           id: key,
           index: rowIndex,
           ...getSkeletonRow()
-        } : {
-          id: key,
-          index: rowIndex,
-          item
-        },
+        } : rowContextValue,
         children: rowVnode
       }, key), item, rowIndex);
     }
@@ -77100,9 +77243,13 @@ const useSearchText = (searchText, items, matchFn = applySearch) => {
     return { orderedItems, matchInfoMap };
   }, [items, searchText, matchFn]);
 
-  const getItemMatchInfo = (item) => {
-    return matchInfoMap.get(item);
-  };
+  // The same function for as long as the map is the same: a `renderItem`
+  // reading it is stable only if this is, and a run keeps the rows it drew
+  // only for a stable `renderItem` (see List.Items).
+  const getItemMatchInfo = useCallback(
+    (item) => matchInfoMap.get(item),
+    [matchInfoMap],
+  );
 
   return [orderedItems, getItemMatchInfo];
 };