@jsenv/navi 0.29.317 → 0.29.319

package/dist/dev/jsenv_navi.js

@@ -61198,24 +61198,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 +61224,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 +63570,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 +64442,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 +64465,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;
@@ -64504,20 +64523,33 @@ const PickerCalloutPopup = ({
       onnavi_request_confirm?.(e);
     };
     calloutElement.addEventListener("navi_request_confirm", forwardConfirm);
+    // Said once the content is in the shown callout: what the content defers
+    // until it is displayed (useDisplayedLayoutEffect, watching this attribute)
+    // then measures it where it is drawn. Same call stack as the open, like
+    // Popover's own — see observeAncestorOpenState in @jsenv/dom.
+    dock.setAttribute("aria-expanded", "true");
     return closeEvent => {
       calloutElement.removeEventListener("navi_request_confirm", forwardConfirm);
       calloutManager.removeOpenToken(PICKER_CALLOUT_CONTENT_TOKEN, closeEvent);
       dock.appendChild(host);
+      dock.setAttribute("aria-expanded", "false");
     };
   };
   return (
     // What the picker addresses (aria-controls, the request events it
     // forwards); the callout itself lives where the callout manager puts it.
+    // aria-expanded here, on the dock rather than on the content element: the
+    // openable ancestor the content finds at mount (the only time it looks),
+    // and one that is no ancestor of the content once the callout holds it —
+    // so a --navi-close said in there still resolves to the callout element,
+    // the closest [aria-expanded] from the button. The open effect keeps it
+    // current; preact leaves it alone, the prop never changes.
     jsx(Box, {
       as: "span",
       ref: ref,
       id: id,
       className: "navi_picker_callout_dock",
+      "aria-expanded": "false",
       style: {
         display: "contents"
       },
@@ -67325,7 +67357,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");
@@ -67382,27 +67415,39 @@ const useListScrollSync = ({
   });
   const renderWindowRef = useRef(null);
   renderWindowRef.current = renderWindow;
-  // A budget that changes (the first paint's giving way to the scrolling one)
-  // re-frames the window where it stands, in this very render — the way
-  // holdWindow below moves it: nothing else would, the scroll listener only
-  // moves a window the user is about to leave.
-  const renderBudgetRef = useRef(renderBudget);
-  if (renderBudgetRef.current !== renderBudget) {
-    renderBudgetRef.current = renderBudget;
+  // The window is as wide as the budget says, whatever the state holds: a
+  // budget that changes (the first paint's giving way to the scrolling one)
+  // re-frames the window where it stands, in the render itself, the way
+  // holdWindow below moves it — nothing else would, the scroll listener only
+  // moves a window the user is about to leave. Derived on every render and
+  // not written once: the state keeps the width it had, and the next render
+  // copies it back into the ref above. The same object is handed out for as
+  // long as the numbers hold, so the rows are not told about a window that
+  // did not move.
+  const framedWindowRef = useRef(null);
+  {
     const {
-      start
+      start,
+      end
     } = renderWindowRef.current;
     const total = virtual.totalSignal.peek();
-    let newStart = start;
-    let newEnd = start + renderBudget;
-    if (total > 0 && newEnd > total) {
-      newEnd = total;
-      newStart = total - renderBudget < 0 ? 0 : total - renderBudget;
+    let framedStart = start;
+    let framedEnd = start + renderBudget;
+    if (total > 0 && framedEnd > total) {
+      framedEnd = total;
+      framedStart = total - renderBudget < 0 ? 0 : total - renderBudget;
+    }
+    if (framedStart !== start || framedEnd !== end) {
+      const framed = framedWindowRef.current;
+      if (framed && framed.start === framedStart && framed.end === framedEnd) {
+        renderWindowRef.current = framed;
+      } else {
+        framedWindowRef.current = renderWindowRef.current = {
+          start: framedStart,
+          end: framedEnd
+        };
+      }
     }
-    renderWindowRef.current = {
-      start: newStart,
-      end: newEnd
-    };
   }
   const updateRenderWindow = (newStart, newEnd, reason) => {
     const {
@@ -68719,7 +68764,8 @@ const measureItemSize = (listEl, horizontal) => {
 };
 const useVirtualItemSizeSignal = (ref, virtualItemSizeProp = 0, horizontal, {
   virtual,
-  renderBudget
+  renderBudget,
+  scrolledWanted
 }) => {
   const virtualSizeSignalRef = useRef(null);
   if (!virtualSizeSignalRef.current) {
@@ -68789,6 +68835,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;
@@ -77075,9 +77129,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];
 };