@jsenv/navi 0.29.473 → 0.29.474

package/dist/jsenv_navi.js

@@ -18307,6 +18307,20 @@ const openCallout = (
   // deduped away on the grounds that the anchor did not move.
   callout.updatePosition = () =>
     positioner.update(new CustomEvent(ELEMENT_SIZE_CHANGE));
+  // Content that sizes itself once on screen (a shrink-wrapped BadgeList) does
+  // so after the callout measured it. The size observer positionCallout puts
+  // on the message sees the change, but answers a frame later (see observeSize
+  // in @jsenv/dom for why); placed again on the spot, the first painted frame
+  // is the right one. Stopped here, since a popup further up holds the callout
+  // out of flow and does not resize with it.
+  const onContentSizeChange = (sizeChangeEvent) => {
+    sizeChangeEvent.stopPropagation();
+    callout.updatePosition();
+  };
+  calloutElement.addEventListener("navi_size_change", onContentSizeChange);
+  addTeardown(() => {
+    calloutElement.removeEventListener("navi_size_change", onContentSizeChange);
+  });
 
   return callout;
 };
@@ -46870,8 +46884,8 @@ const useControlgroupProps = (props, {
   const [boundAction] = useActionBoundToOneParam(action, uiGroupStateController.uiStateSignal);
   // Mirror single-input behaviour: a controlled value with nobody listening
   // makes the group read-only so children don't appear interactive when they
-  // can't change. A form or a group around it IS someone listening — that is
-  // what will send the value and hand a new one back.
+  // can't change. A form or a group collecting it IS someone listening — that
+  // is what will send the value and hand a new one back.
   const listenedTo = useIsControlListenedTo(props, uiGroupStateController);
   useRef(false);
   const implicitReadOnly = uiGroupStateController.hasValueProp && !listenedTo;
@@ -70210,6 +70224,15 @@ const useDialogProps = props => {
       freezeSize(dialogEl);
     }
     rectEffect.observeSize(dialogEl);
+    // Content that sizes itself once on screen (a shrink-wrapped BadgeList)
+    // says so, after the placement read it: placed again on the spot, where
+    // observeSize answers a frame late. Stopped here, since a popup further up
+    // holds this one out of flow and does not resize with it.
+    const onContentSizeChange = sizeChangeEvent => {
+      sizeChangeEvent.stopPropagation();
+      rectEffect.check(new CustomEvent(ELEMENT_SIZE_CHANGE));
+    };
+    dialogEl.addEventListener("navi_size_change", onContentSizeChange);
     // Exposed for the placement-props effect below, which needs to re-place an
     // already-open dialog.
     repositionRef.current = repositionEvent => {
@@ -70223,6 +70246,7 @@ const useDialogProps = props => {
     };
     addCleanup(() => {
       repositionRef.current = null;
+      dialogEl.removeEventListener("navi_size_change", onContentSizeChange);
       rectEffect.disconnect();
     });
     // A descendant anchored to something inside this dialog (a Callout, a
@@ -72015,6 +72039,18 @@ const usePopoverProps = props => {
     // while open (e.g. an expand/collapse toggle inside it) — not just when
     // the anchor itself moves/resizes/re-anchors.
     rectEffect.observeSize(popoverEl);
+    // Content that sizes itself once on screen (a shrink-wrapped BadgeList)
+    // says so, after the placement read it: placed again on the spot, where
+    // observeSize answers a frame late. Stopped here, since a popup further up
+    // holds this one out of flow and does not resize with it.
+    const onContentSizeChange = sizeChangeEvent => {
+      sizeChangeEvent.stopPropagation();
+      rectEffect.check(new CustomEvent(ELEMENT_SIZE_CHANGE));
+    };
+    popoverEl.addEventListener("navi_size_change", onContentSizeChange);
+    addCleanup(() => {
+      popoverEl.removeEventListener("navi_size_change", onContentSizeChange);
+    });
     // Exposed for the placement-props effect above, which needs to re-place an
     // already-open popover.
     repositionRef.current = repositionEvent => {
@@ -83478,39 +83514,29 @@ const BadgeListShrinkWrap = ({
   const registry = useBadgeRegistry(children, max !== undefined || fallback !== undefined);
   const measureRef = useRef();
   const visibleRef = useRef();
+
+  // In a closed popup the rows have no size to read: the list is measured when
+  // it comes on screen, before the frame is painted.
+  useDisplayedLayoutEffect(visibleRef, () => {
+    shrinkWrapToWidestRow(visibleRef.current, measureRef.current);
+  }, [children]);
   useLayoutEffect(() => {
     const measureEl = measureRef.current;
     const visibleEl = visibleRef.current;
     if (!measureEl || !visibleEl) {
       return undefined;
     }
-    let observer;
-    let rafId;
-    const measure = () => {
-      visibleEl.style.width = "";
-      // Clone the already-rendered DOM nodes instead of letting React/Preact
-      // render the children a second time into the ghost: re-rendering would
-      // instantiate Badge/Badge.Button a second time, double-registering their
-      // controllers (and any other mount side effect) under the same id.
-      measureEl.replaceChildren(...Array.from(visibleEl.children, child => child.cloneNode(true)));
-      const optimalWidth = measureWidestChildRow(measureEl);
-      if (optimalWidth !== null) {
-        visibleEl.style.width = `${Math.ceil(optimalWidth)}px`;
-      }
-    };
-
-    // A single badge is a single row, and a single row is already the widest
-    // one: there is nothing to narrow, and no width the list could be given
-    // that would change that.
+    // A single row whatever room it is given: nothing a resize could narrow.
     if (visibleEl.children.length < 2) {
-      visibleEl.style.width = "";
-      measureEl.replaceChildren();
       return undefined;
     }
-    measure();
+    let observer;
+    let rafId;
     const onResize = () => {
       cancelAnimationFrame(rafId);
-      rafId = requestAnimationFrame(measure);
+      rafId = requestAnimationFrame(() => {
+        shrinkWrapToWidestRow(visibleEl, measureEl);
+      });
     };
     const outerParent = measureEl.parentElement?.parentElement;
     if (outerParent) {
@@ -83556,6 +83582,40 @@ const BadgeListShrinkWrap = ({
     })
   );
 };
+
+// Narrows the list to its widest row, read from clones of its badges in the
+// ghost.
+//
+// What holds the list may have sized itself around the width it had before —
+// a callout pins its body to the width it measured — so a change is announced
+// with a bubbling navi_size_change for it to measure again, in the same frame.
+const shrinkWrapToWidestRow = (visibleEl, measureEl) => {
+  // Not drawn (back in a closed popup): no row to read. The width is kept for
+  // the next opening, which measures again before painting.
+  if (visibleEl.getClientRects().length === 0) {
+    return;
+  }
+  const widthBefore = visibleEl.style.width;
+  visibleEl.style.width = "";
+  if (visibleEl.children.length < 2) {
+    // A single badge is a single row, and a single row is already the widest
+    // one: there is nothing to narrow.
+    measureEl.replaceChildren();
+  } else {
+    // Clone the already-rendered DOM nodes instead of letting React/Preact
+    // render the children a second time into the ghost: re-rendering would
+    // instantiate Badge/Badge.Button a second time, double-registering their
+    // controllers (and any other mount side effect) under the same id.
+    measureEl.replaceChildren(...Array.from(visibleEl.children, child => child.cloneNode(true)));
+    const optimalWidth = measureWidestChildRow(measureEl);
+    if (optimalWidth !== null) {
+      visibleEl.style.width = `${Math.ceil(optimalWidth)}px`;
+    }
+  }
+  if (visibleEl.style.width !== widthBefore) {
+    dispatchPublicCustomEvent(visibleEl, "navi_size_change");
+  }
+};
 const BadgeListMaxLines = ({
   fallback,
   children,