@jsenv/navi 0.29.473 → 0.29.475

package/dist/dev/jsenv_navi.js

@@ -18934,6 +18934,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;
 };
@@ -23337,6 +23351,10 @@ const DROP_CONTAINER_ATTRIBUTE = "data-drop-container";
 // every outcome — a list runs one way, and something being put somewhere goes
 // wherever it is put.
 const AXIS_ATTRIBUTE = "data-drag-axis";
+// How the items of a reordered list are laid out: "column", "row", or "wrap" for
+// side by side over several lines. Said nothing, it is read from where the
+// items stand.
+const FLOW_ATTRIBUTE = "data-reorder-flow";
 const DELAY_ATTRIBUTE = "data-drag-delay";
 const SLOP_ATTRIBUTE = "data-drag-slop";
 const THRESHOLD_ATTRIBUTE$1 = "data-drag-threshold";
@@ -23432,14 +23450,24 @@ defineInteractionDetector({
     }
     // Read at setup rather than at the press: a container can say it, and it is
     // what the gesture is about rather than something it discovers.
+    const itemFlow =
+      element.closest(`[${FLOW_ATTRIBUTE}]`)?.getAttribute(FLOW_ATTRIBUTE) ||
+      undefined;
     const axisHolder = element.closest(`[${AXIS_ATTRIBUTE}]`);
     const axes =
       axisHolder?.getAttribute(AXIS_ATTRIBUTE) ||
-      // A list runs one way, and reordering walks it. Anything else goes wherever
-      // the hand takes it: a board has places all around, a thing put somewhere has
-      // two axes to be put along, a throw goes where it was thrown and a thing
-      // that leaves goes out by whichever edge.
-      (canReorder && !canLand && !canToss && !canLeave ? "y" : "xy");
+      // A list runs one way, and reordering walks it: down a column, along a
+      // row, and both for a row that wraps — its copy changes line. Anything
+      // else goes wherever the hand takes it: a board has places all around, a
+      // thing put somewhere has two axes to be put along, a throw goes where it
+      // was thrown and a thing that leaves goes out by whichever edge.
+      (canReorder && !canLand && !canToss && !canLeave
+        ? itemFlow === "row"
+          ? "x"
+          : itemFlow === "wrap"
+            ? "xy"
+            : "y"
+        : "xy");
     // Where the places are, read at setup for the same reason as the axes: they
     // are what the gesture is about, and it is what holds the two sides of it
     // that says them.
@@ -23513,6 +23541,7 @@ defineInteractionDetector({
             : undefined,
         containerElement: dropContainer || undefined,
         outsideOf,
+        itemFlow,
         getItemId: (itemElement) => itemElement.id,
         direction: { x: axes.includes("x"), y: axes.includes("y") },
         // Where it may go, said in the DOM. A thing that is put somewhere stays
@@ -48054,8 +48083,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);
   const implicitReadOnlyWarnedRef = useRef(false);
   const implicitReadOnly = uiGroupStateController.hasValueProp && !listenedTo;
@@ -71583,6 +71612,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 => {
@@ -71596,6 +71634,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
@@ -73426,6 +73465,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 => {
@@ -78950,6 +79001,7 @@ const useListScrollSync = ({
   useDuplicateHeaderWarning(ref);
   useStuckWindowWarning({
     ref,
+    getListEl,
     scrollerElResolved,
     renderWindowRef,
     windowLeavesItemsOut,
@@ -80497,6 +80549,7 @@ const readItemsPerLine = listEl => {
 // instead of scrolling — and there is no event missing to notice it by.
 const useStuckWindowWarning = ({
   ref,
+  getListEl,
   scrollerElResolved,
   renderWindowRef,
   windowLeavesItemsOut,
@@ -80525,6 +80578,22 @@ const useStuckWindowWarning = ({
     if (canScrollerScroll(scrollerElResolved, horizontal ? "x" : "y")) {
       return;
     }
+    // Scrolling nothing, the box keeps out of reach only the items past what
+    // it shows. A list standing whole on the window's screen is one the window
+    // covers at its next evaluation: an item added in this commit is drawn on
+    // the resize it causes (see onGeometryChangeRef), after this effect.
+    const listEl = getListEl();
+    if (!listEl) {
+      return;
+    }
+    const screen = readWindowScreen(scrollerElResolved, horizontal);
+    const listRect = listEl.getBoundingClientRect();
+    const listFrom = horizontal ? listRect.left : listRect.top;
+    const listTo = horizontal ? listRect.right : listRect.bottom;
+    // A pixel of slack, like canScroll.
+    if (listFrom > screen.from - 1 && listTo < screen.to + 1) {
+      return;
+    }
     doneRef.current = true;
     const {
       start,
@@ -81143,28 +81212,40 @@ const findItemElementAt = (listEl, index) => {
   }
   return null;
 };
-// What the render window is placed and sized on (see evaluateWindow), along
-// the scroll axis and in viewport coordinates: the size of the screen, the part
-// of the list on it (the band), and the items drawn, in the order they stand.
-// The screen is the viewport of the box that scrolls the list — what "150%"
-// is a percentage of. A box that does not scroll — a list given no height, as
-// tall as its items — shows no more of them than the browser does: its
-// viewport is cut by the browser's, or a budget in % would draw items to fill
-// a screen they make grow. A list off screen is met at its edge nearest to the
-// screen, where it comes in.
-const readWindowGeometry = (scrollerEl, listEl, horizontal) => {
+// The screen the render window is framed on, along the scroll axis and in
+// viewport coordinates: the viewport of the box that scrolls the list — what
+// "150%" is a percentage of. A box that does not scroll — a list given no
+// height, as tall as its items — shows no more of them than the browser does:
+// its viewport is cut by the browser's, or a budget in % would draw items to
+// fill a screen they make grow.
+const readWindowScreen = (scrollerEl, horizontal) => {
   const scrollerRect = getScrollerViewportRect(scrollerEl);
-  let screenFrom = horizontal ? scrollerRect.left : scrollerRect.top;
-  let screenTo = horizontal ? scrollerRect.right : scrollerRect.bottom;
+  let from = horizontal ? scrollerRect.left : scrollerRect.top;
+  let to = horizontal ? scrollerRect.right : scrollerRect.bottom;
   if (!canScrollerScroll(scrollerEl, horizontal ? "x" : "y")) {
     const browserSize = horizontal ? document.documentElement.clientWidth : document.documentElement.clientHeight;
-    if (screenFrom < 0) {
-      screenFrom = 0;
+    if (from < 0) {
+      from = 0;
     }
-    if (screenTo > browserSize) {
-      screenTo = browserSize;
+    if (to > browserSize) {
+      to = browserSize;
     }
   }
+  return {
+    from,
+    to
+  };
+};
+// What the render window is placed and sized on (see evaluateWindow), along
+// the scroll axis and in viewport coordinates: the size of the screen (see
+// readWindowScreen), the part of the list on it (the band), and the items
+// drawn, in the order they stand. A list off screen is met at its edge nearest
+// to the screen, where it comes in.
+const readWindowGeometry = (scrollerEl, listEl, horizontal) => {
+  const {
+    from: screenFrom,
+    to: screenTo
+  } = readWindowScreen(scrollerEl, horizontal);
   const screenSize = screenTo - screenFrom;
   if (screenSize < 1) {
     return null;
@@ -85079,39 +85160,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) {
@@ -85157,6 +85228,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,