@jsenv/navi 0.29.418 → 0.29.419

package/README.md

@@ -57,7 +57,7 @@ Validation goes beyond native browser constraints: custom rules, better error po
 
 Some values are moved rather than typed: `Spin` puts the way back and the way on around a value one step at a time, and `SpinGroup` makes several of them read as one — `TimeSpin` ("07h30") and `TimeRangeSpin` ("de 7h à 21h", end after start) are built that way. `Wheel` is the scroll picker a phone shows for the same job, with `TimeWheel` and `TimeRangeWheel` built on it.
 
-`Group` makes several controls read as one framed object, `Editable` edits a value in place, exactly where it is written.
+`Group` makes several controls read as one framed object (see [docs/group.md](./docs/group.md)), `Editable` edits a value in place, exactly where it is written.
 
 ## List
 

package/dist/dev/jsenv_navi.js

@@ -15063,7 +15063,11 @@ const createOpenController = (
     const applyChange = () => {
       // Recorded with the change itself: what the DOM shows is what a render
       // landing between the ask and the picture must draw (see `openedInDom`).
-      controller.openedInDom = opened;
+      // An opening records it inside the change, once its content is built
+      // (see open() below).
+      if (!opened) {
+        controller.openedInDom = false;
+      }
       change();
     };
     const { transitionChange } = controller;
@@ -15343,15 +15347,17 @@ const createOpenController = (
           controller.mountContent?.();
           // Only now — after the content has been built, before openEffect
           // shows it. Dialog/Popover recompute aria-expanded and navi-hidden
-          // from this flag on every render, and mountContent above renders
+          // from `openedInDom` on every render, and mountContent above renders
           // synchronously: flipping it any earlier commits an already-open DOM
           // (aria-expanded "true", navi-hidden gone) before openEffect has run
           // a single statement, so the "closed" frame it pins to transition
           // from is in fact the open one and the entrance animation has
-          // nothing to play. It also gives the content it just built the
-          // opening it is documented to observe — mounted while the popup
-          // reads as closed, told it opened right after (see
-          // popup_content_mount.js and use_displayed_layout_effect.js).
+          // nothing to play — on every first opening that builds its content.
+          // It also gives the content it just built the opening it is
+          // documented to observe — mounted while the popup reads as closed,
+          // told it opened right after (see popup_content_mount.js and
+          // use_displayed_layout_effect.js).
+          controller.openedInDom = true;
           controller.opened = true;
           // Which press it opened during, so the release of that press is not
           // read as somebody dismissing it (see openedDuringThisPress).
@@ -15760,7 +15766,14 @@ const useOpenPropsEffectOnOpenController = (
     lastRunOpenRef.current = open;
 
     if (isFirstRun) {
-      const mountOpenReason = open || defaultOpen;
+      // "interaction" is said even over what the caller holds reading open: a
+      // popup built by the request that opens it — a dialog standing in until
+      // its signal said open, see DialogStandIn in dialog.jsx — mounts BECAUSE
+      // of that opening.
+      const mountOpenReason =
+        open && defaultOpen === "interaction"
+          ? "interaction"
+          : open || defaultOpen;
       if (mountOpenReason) {
         // Whether this popup being open is something that just happened, or
         // something that was already true when the page appeared. "interaction"
@@ -28693,6 +28706,18 @@ const useAsyncData = (promiseOrAction, {
 
 // ─── useAction ────────────────────────────────────────────────────────────────
 
+// subscribe() calls back at once with the value the signal holds; what these
+// subscriptions are for is what changes after.
+const subscribeToChanges = (signal, onChange) => {
+  let initial = true;
+  return signal.subscribe(value => {
+    if (initial) {
+      initial = false;
+      return;
+    }
+    onChange(value);
+  });
+};
 const LoadingContext = createContext(null);
 const actionPendingPromiseWeakMap = new WeakMap();
 const dismissedActionWeakSet = new WeakSet();
@@ -28737,6 +28762,15 @@ const useActionAsyncData = (action, {
   const runningState = action.runningStateSignal.peek();
   const [, setTick] = useState(0);
   const routePage = useContext(RoutePageContext);
+  // What this render read of the action, for the subscriptions below to tell
+  // a change that came between the render and them from none at all.
+  const readRef = useRef(null);
+  readRef.current = {
+    runningState,
+    data: action.dataSignal.peek(),
+    params: action.paramsSignal.peek(),
+    settling: action.paramsSettlingSignal.peek()
+  };
   useEffect(() => {
     let stopOwingRender = null;
     const rerender = () => {
@@ -28764,7 +28798,12 @@ const useActionAsyncData = (action, {
       }
       setTick(n => n + 1);
     };
-    const unsubscribeFromRunningState = action.runningStateSignal.subscribe(state => {
+    // A run under way is a new try: an error dismissed before it is not the
+    // one it may end on.
+    if (action.runningStateSignal.peek() === RUNNING) {
+      dismissedActionWeakSet.delete(action);
+    }
+    const unsubscribeFromRunningState = subscribeToChanges(action.runningStateSignal, state => {
       if (state === RUNNING) {
         dismissedActionWeakSet.delete(action);
       }
@@ -28775,38 +28814,24 @@ const useActionAsyncData = (action, {
     // (a PUT upserting an item that a GET_MANY list already holds) changes the
     // data while this action stays COMPLETED. Subscribing here re-renders
     // through the same controlled path as the run state, instead of `.value`.
-    let dataNotificationIsInitial = true;
-    const unsubscribeFromData = action.dataSignal.subscribe(() => {
-      if (dataNotificationIsInitial) {
-        // subscribe() calls back synchronously with the current value
-        dataNotificationIsInitial = false;
-        return;
-      }
-      rerender();
-    });
+    const unsubscribeFromData = subscribeToChanges(action.dataSignal, rerender);
     // The params say WHICH question this is, and this hook reads them: to know
     // there is nothing to ask for, and to start the run it owns. A binding
     // retargeting from no question to a question — a filter chosen, a first
     // character typed — is announced by nothing above: a fresh target is IDLE
     // holding no data, the very state the hook already sees.
-    let paramsNotificationIsInitial = true;
-    const unsubscribeFromParams = action.paramsSignal.subscribe(() => {
-      if (paramsNotificationIsInitial) {
-        paramsNotificationIsInitial = false;
-        return;
-      }
-      rerender();
-    });
+    const unsubscribeFromParams = subscribeToChanges(action.paramsSignal, rerender);
     // A debounced binding waits before it retargets, so nothing above changes
     // while the delay runs — but what is on screen is already out of date.
-    let settlingNotificationIsInitial = true;
-    const unsubscribeFromParamsSettling = action.paramsSettlingSignal.subscribe(() => {
-      if (settlingNotificationIsInitial) {
-        settlingNotificationIsInitial = false;
-        return;
-      }
+    const unsubscribeFromParamsSettling = subscribeToChanges(action.paramsSettlingSignal, rerender);
+    // Subscribed once the browser has painted, so the action may have moved
+    // since the render: a run that very render started may be over already,
+    // and nothing would say so again. What the render read, against what is
+    // there now — and nothing moved, nothing to draw again.
+    const read = readRef.current;
+    if (action.runningStateSignal.peek() !== read.runningState || action.dataSignal.peek() !== read.data || action.paramsSignal.peek() !== read.params || action.paramsSettlingSignal.peek() !== read.settling) {
       rerender();
-    });
+    }
     return () => {
       unsubscribeFromRunningState();
       unsubscribeFromData();
@@ -40384,6 +40409,17 @@ const useDisplayedLayoutEffect = (ref, callback, deps) => {
         decisionDeferredToRef.current = popupMounting;
         return;
       }
+      if (
+        (el.tagName === "DIALOG" || el.hasAttribute("popover")) &&
+        !isAncestorOpen(el)
+      ) {
+        // Itself a closed <dialog> or [popover]: display:none by the UA's own
+        // rules, which the markup says without asking the layout — asked, every
+        // closed popup mounting would force a style recalculation, and a list
+        // whose rows each hold a few mounts hundreds of them. The observer
+        // below fires as for any element the ancestor hides.
+        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
@@ -52642,9 +52678,9 @@ const FixedBar = ({
  * A page that overflows horizontally is a bug wherever it happens, and on
  * Chrome Android it is a catastrophic one: the layout viewport inflates to the
  * content and `position: fixed` centering goes with it (see
- * docs/mobile_layout_pitfalls.md). The remedy there is a wrapper in
- * `overflow-x: clip`, and it works — at the price of making the cause
- * invisible: nothing sticks out anymore, so nothing says a fixed width, a
+ * docs/safe_area.md#a-document-wider-than-the-screen). The remedy there is a
+ * wrapper in `overflow-x: clip`, and it works — at the price of making the
+ * cause invisible: nothing sticks out anymore, so nothing says a fixed width, a
  * `min-width` or an unbreakable string is still oversized. This puts the
  * signal back, without giving up the net.
  *
@@ -65657,7 +65693,9 @@ const css$E = /* css */`
  * @param {"always"|"idle"|"from-first-open"|"while-opened"} [props.mount] - When
  *   `children` are built and thrown away (see popup_content_mount.js).
  *   `"from-first-open"` (the default) builds them on the first open and keeps
- *   them afterwards. `"always"` builds them right away, for content something
+ *   them afterwards — and the dialog itself is built then too: until its first
+ *   request (an open, a press on what opens it, its signal saying open) it is
+ *   a bare `<dialog>` holding its id (see docs/popup_open.md). `"always"` builds them right away, for content something
  *   depends on while the popup is still closed: a value read off it, fields a
  *   surrounding form collects on submit, a size measured from outside.
  *   `"idle"` builds them in a browser idle moment after load — "always" minus
@@ -65678,11 +65716,122 @@ const Dialog = props => {
       ...props
     });
   }
-  return jsx(UncontrolledDialog, {
+  return jsx(DialogStandIn, {
     ...props
   });
 };
 
+// A dialog nobody has asked for yet stands in as its bare <dialog>. That
+// element is all that reaches a closed dialog before its first opening: a
+// command finds it by id (`commandfor`) and asks it to open, a press on what
+// opens it announces itself on it (navi_open_press), --navi-toggle reads its
+// aria-expanded. The dialog proper — its open controller, its box, its focus
+// and pseudo-class wiring — is built at the first request: an open, a press
+// about to open it, its signal or its `open` saying open. A list whose rows
+// each hold a few dialogs mounts hundreds of them, and would pay for every one
+// at every mount, for openings that mostly never come. Built once, the dialog
+// stays: the next opening finds it there.
+const DialogStandIn = props => {
+  const {
+    ref,
+    id,
+    signal,
+    value,
+    open
+  } = props;
+  const ownRef = useRef();
+  const dialogRef = ref || ownRef;
+  // Why the dialog proper exists, once it does; never undone.
+  const builtRef = useRef(null);
+  const mountedRef = useRef(false);
+  const isMount = !mountedRef.current;
+  mountedRef.current = true;
+  // Its own reading of the signal: the dialog of one card among many, told
+  // apart by `value`, follows whether IT is the one open rather than every
+  // write the others cause.
+  const openedSignal = useMemo(() => signal ? computed(() => readOpened(signal.value, value)) : null, [signal, value]);
+  const openedBySignal = openedSignal ? openedSignal.value : false;
+  if (builtRef.current === null) {
+    if (isMount && (needsDialogFromMount(props) || open || openedBySignal)) {
+      builtRef.current = "mount";
+    } else if (open || openedBySignal) {
+      // Asked open while this stood in: the opening is happening now, and it
+      // plays like any other (see defaultOpen "interaction").
+      builtRef.current = "interaction";
+    }
+  }
+  const [, setBuildCount] = useState(0);
+  const warmRef = useRef(null);
+  const build = reason => {
+    if (builtRef.current !== null) {
+      return;
+    }
+    builtRef.current = reason;
+    flushSyncRendering(() => {
+      setBuildCount(count => count + 1);
+    });
+  };
+  const builtReason = builtRef.current;
+  if (builtReason !== null) {
+    return jsx(UncontrolledDialog, {
+      ...props,
+      ref: dialogRef,
+      defaultOpen: builtReason === "interaction" ? "interaction" : props.defaultOpen
+    });
+  }
+  return jsx("dialog", {
+    ref: dialogRef,
+    id: id,
+    className: "navi_dialog"
+    // eslint-disable-next-line react/no-unknown-property
+    ,
+    "navi-hidden": ""
+    // eslint-disable-next-line react/no-unknown-property
+    ,
+    "navi-out-of-flow": "",
+    "aria-expanded": "false",
+    "data-testid": props["data-testid"]
+    // eslint-disable-next-line react/no-unknown-property
+    ,
+    onnavi_request_open: e => {
+      // Built in this same event, and asked again: the opening is the one
+      // the dialog proper would have had — its source, its anchor, its value.
+      build("request");
+      const opened = dispatchCustomEvent(dialogRef.current, "navi_request_open", e.detail);
+      if (!opened) {
+        e.preventDefault();
+      }
+    }
+    // eslint-disable-next-line react/no-unknown-property
+    ,
+    onnavi_open_press: () => {
+      // What the opening will read is asked for at once, as the dialog
+      // proper does (see open_controller.js); the dialog itself two frames
+      // later, so the pressed trigger is painted first — the click that
+      // follows opens it built, or builds it itself when it comes sooner.
+      if (signal) {
+        preloadState(signal, readOpenValue(value));
+      }
+      if (warmRef.current) {
+        return;
+      }
+      warmRef.current = requestFrameAfterNext(() => {
+        warmRef.current = null;
+        build("press");
+      });
+    }
+  });
+};
+// What needs the dialog proper from the start: an opening at mount, content
+// built ahead of any opening, a history entry to read, an anchor whose hover
+// or focus builds the content ahead of the click.
+const needsDialogFromMount = props => {
+  if (props.defaultOpen || props.navState || props.anchor !== undefined) {
+    return true;
+  }
+  return props.mount !== undefined && props.mount !== "from-first-open";
+};
+
 // No openController passed: this Dialog is used declaratively (e.g. driven
 // by --navi-toggle/--navi-open/--navi-close commands, the `open` prop, or
 // `defaultOpen`) rather than owned by a parent component.
@@ -77527,10 +77676,10 @@ const useBadgeRegistry = (children, enabled) => {
  *   list renders nothing at all. In a <Picker> this is the only placeholder
  *   the user gets — a picker given a `ui` does not draw its own — so pass the
  *   placeholder text: `fallback="Select skills…"`. Plain text is the right
- *   choice there: it reads at the picker's size, in the placeholder color the
- *   picker gives its empty value slot, and the box stays the same height. A
- *   transparent <Badge> matches the slot to the pixel instead, at the price of
- *   badge-sized text. See docs/badge_list.md.
+ *   choice there: it reads at the picker's size, in the normal text color (a
+ *   caller's `ui` is never greyed as a placeholder), and the box stays the same
+ *   height. A transparent <Badge> matches the slot to the pixel instead, at the
+ *   price of badge-sized text. See docs/typography.md#badgelist.
  * @param {boolean} [shrinkWrap]
  *   Narrows the list down to its widest row so the last row isn't ragged.
  *   Defaults to true inside a <Picker> — the trigger draws a border around the
@@ -79731,8 +79880,8 @@ const PickerFirstResolver = props => {
  *   filter", "anywhere"), so its empty look is the caller's. A `ui` must
  *   therefore say on its own that the picker is empty, and take the same room
  *   empty as it does filled. A <BadgeList> gets both from its `fallback` — the
- *   placeholder text, as plain text, see docs/badge_list.md. `"default"` draws
- *   nothing in the slot at all.
+ *   placeholder text, as plain text, see docs/typography.md#badgelist.
+ *   `"default"` draws nothing in the slot at all.
  *
  *   Under `variant="icon"` there is no value to draw, so this IS the trigger:
  *   left out it is the icon the right slot would have shown (`rightSlotIcon`,