@jsenv/navi 0.29.472 → 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;
 };
@@ -42894,6 +42908,7 @@ const useRenderScope = (init, update) => {
  *   registerChild(child): void;   // Called on child mount
  *   onChildUIAction(child, e, { stateChanged: boolean }): void; // Called when a child fires a UI action
  *   unregisterChild(child): void; // Called on child unmount
+ *   collectsChild(child): boolean; // Whether registerChild(child) would put it in a value, here or above
  *   props: Object;
  *   ref: Ref; // Used to dispatch DOM events
  *   getManagedControls(): UIStateController[]; // Returns controls whose validity is managed by this controller
@@ -43596,6 +43611,10 @@ const useUIStateController = (
         unregisterChild: (childUIStateController) => {
           s.parentUIStateController?.unregisterChild(childUIStateController);
         },
+        collectsChild: (childUIStateController) =>
+          Boolean(
+            s.parentUIStateController?.collectsChild(childUIStateController),
+          ),
         onChildUIAction: (childUIStateController, e, options) => {
           s.parentUIStateController?.onChildUIAction(
             childUIStateController,
@@ -43982,10 +44001,13 @@ const readNamedChildUIStates = (children, { warnNameless }) => {
 // Looked up in useUIGroupStateController to fill in omitted aggregateChildStates /
 // distributeChildUIState. If neither a default nor an explicit impl is found for a
 // group, creation throws so the caller knows it must supply them.
+// The radio/checkbox filters read `props.type`, which controlHostProps copies:
+// a child is also asked about while rendering, before its first render has
+// built controlHostProps (see collectsChild).
 const GROUP_DEFAULTS = {
   radio_group: {
     childControlFilter: (child) =>
-      child.controlType === "input" && child.controlHostProps?.type === "radio",
+      child.controlType === "input" && child.props?.type === "radio",
     aggregateChildStates: keptOrFirstDefinedChildUIState,
     distributeChildUIState: (newUIState, childUIStateController) => {
       const childSelected = childUIStateController.props.value === newUIState;
@@ -43997,8 +44019,7 @@ const GROUP_DEFAULTS = {
   },
   checkbox_group: {
     childControlFilter: (child) =>
-      child.controlType === "input" &&
-      child.controlHostProps?.type === "checkbox",
+      child.controlType === "input" && child.props?.type === "checkbox",
     aggregateChildStates: keptAndCheckedChildUIStates,
     distributeChildUIState: (newUIState, childUIStateController) => {
       const childSelected =
@@ -44533,6 +44554,9 @@ const useUIGroupStateController = (
 
       const controller = {
         controlType,
+        // Published from the first render, like a leaf's: a group asks its
+        // parent whether anyone listens before its first update.
+        parentUIStateController,
         id,
         name,
         value,
@@ -44756,6 +44780,18 @@ const useUIGroupStateController = (
             notifyExternal: "silent",
           });
         },
+        // registerChild above, asked ahead: monitored here, handed up, or
+        // captured and dropped.
+        collectsChild: (childUIStateController) => {
+          if (isMonitoringChild(childUIStateController)) {
+            return true;
+          }
+          const currentParent = s.parentUIStateController;
+          if (allowCapture || !currentParent) {
+            return false;
+          }
+          return currentParent.collectsChild(childUIStateController);
+        },
         onChildUIAction: (
           childUIStateController,
           e,
@@ -45228,6 +45264,9 @@ const useUIFacadeStateController = (props, realUIStateController) => {
             s.realUIStateController.facadeChild = null;
           }
         },
+        // A refused child is not handed further up: the popup's controls
+        // answer to the picker or to nobody.
+        collectsChild: (child) => canRegisterAsFacadeChild(child),
         getManagedControls: () => {
           const child = firstChildControllerRef.current;
           if (!child) {
@@ -45769,8 +45808,6 @@ const useControlProps = (props, {
   const controlInfo = createControlInfo(props, {
     controlType
   });
-  const readOnlyUncontrolled = useReadOnlyUncontrolled(props, controlInfo);
-  controlInfo.readOnlyUncontrolled = readOnlyUncontrolled;
   const uiStateController = useUIStateController(props, {
     controlInfo,
     syncDomState,
@@ -45778,6 +45815,9 @@ const useControlProps = (props, {
     persists,
     uiActionInternal
   });
+  // After the controller: whether a group listens is asked of the parent it
+  // registers into. Read by useInteractiveProps below.
+  controlInfo.readOnlyUncontrolled = useReadOnlyUncontrolled(props, controlInfo, uiStateController);
   // 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
@@ -46773,16 +46813,21 @@ const INPUT_TYPE_SUPPORTING_READONLY_SET = new Set(["text", "date", "datetime-lo
 // warning below so a group can ask the same question a single control does: a
 // control with a `value` and nobody listening cannot be changed by hand, and
 // that is true whatever the control is.
-const useIsControlListenedTo = props => {
+// The group is asked, not assumed from a controller being above: a control in
+// between may only pass registration along (a <Details> holds none of the
+// values it folds), and a group may hand the control further up or drop it.
+const useIsControlListenedTo = (props, uiStateController) => {
   const isProxy = Boolean(props["navi-control-proxy-for"]);
   const formContext = useContext(FormContext);
-  const parentUIStateController = useContext(ParentUIStateControllerContext);
+  const {
+    parentUIStateController
+  } = uiStateController;
   return Boolean(props.signal ||
   // a bound signal is written back on uiAction → interactive
-  props.uiAction || props.action || formContext || parentUIStateController || isProxy || props.command);
+  props.uiAction || props.action || formContext || parentUIStateController?.collectsChild(uiStateController) || isProxy || props.command);
 };
-const useReadOnlyUncontrolled = (props, controlInfo) => {
-  const listenedTo = useIsControlListenedTo(props);
+const useReadOnlyUncontrolled = (props, controlInfo, uiStateController) => {
+  const listenedTo = useIsControlListenedTo(props, uiStateController);
   useRef(false);
   if (!controlInfo.hasStateProp) {
     return false;
@@ -46839,9 +46884,9 @@ 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.
-  const listenedTo = useIsControlListenedTo(props);
+  // 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;
   if (implicitReadOnly && !props.readOnly) {
@@ -70179,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 => {
@@ -70192,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
@@ -71984,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 => {
@@ -73037,8 +73104,15 @@ const PickerCustom = props => {
   // moment both exist. A picker that picks nothing holds none: its popup's
   // controls are never adopted (see canRegisterAsFacadeChild).
   const valueInPopup = !props.picksNothing && !isControlValueGivenByProps(props);
+  // Asked of the chain, not read off the context: a control above may only
+  // pass registration along (a <Details> holds none of the values it folds),
+  // and a group may hand a picker further up or drop it. "picker" is what the
+  // picker's own controller registers as (see picker.jsx).
   const parentController = useContext(ParentUIStateControllerContext);
-  const answersToGroup = Boolean(parentController) && !props.standalone;
+  const answersToGroup = !props.standalone && Boolean(parentController?.collectsChild({
+    controlType: "picker",
+    props
+  }));
   // Same narrow-container/maxWidth-compact heuristic Popup itself uses (see
   // popup_mode.jsx's own useResolvedPopupMode) — frozen for the lifetime of an opening
   // (computed when closed, stable while open, so a screen resize mid-session
@@ -83440,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) {
@@ -83518,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,