@jsenv/navi 0.29.424 → 0.29.425

package/dist/dev/jsenv_navi.js

@@ -15389,6 +15389,9 @@ const createOpenController = (
     // content is still waiting for a first open to be built. Called below,
     // before openEffect, so the popup measures and positions the real thing.
     mountContent: null,
+    // Set alongside mountContent: the content asked for outside any opening,
+    // by something that reads it while the popup is closed.
+    buildContent: null,
     // The caller's own `onOpen`, set by Dialog/Popover from their props on
     // every render (like openEffect). Called BEFORE mountContent, so whatever
     // it decides — which record this dialog is opening on — is already true by
@@ -40243,7 +40246,11 @@ const flushSyncRendering = (fn) => {
  *
  * "always" is for content something else depends on before any opening: a
  * value the popup's owner reads off its own children, fields a form around it
- * collects on submit, a size measured from outside.
+ * collects on submit, a size measured from outside. When the popup's owner
+ * cannot tell at mount whether anything will depend on it, the content waits
+ * and whatever depends on it asks for it, closed, with
+ * `openController.buildContent()` (a picker's drawing reading the value its
+ * popup holds, see usePickerContext).
  *
  * "idle" is "always" minus the cost on the critical render: the page appears
  * without the content, and the browser builds it in an idle moment after
@@ -40370,6 +40377,14 @@ const usePopupContentMount = (
       }
     }
   };
+  // A plain render rather than a flush: the popup stays closed, and nothing is
+  // about to measure it.
+  openController.buildContent = () => {
+    if (contentMountedRef.current) {
+      return;
+    }
+    setContentMounted(true);
+  };
   openController.unmountContent =
     mount === "while-opened"
       ? () => {
@@ -69366,6 +69381,69 @@ const toPopoverAnimation = animation => {
   return animation;
 };
 
+const PickerContext = createContext();
+
+/*
+ * The picker's context, for whatever draws its value. A picker told no value
+ * holds what the control in its popup holds, and builds that popup only when
+ * something reads it (see the mount decision in picker_custom.jsx): what the
+ * picker draws itself it knows about, a drawing given as an element is the
+ * caller's, and says so here by reading. In a layout effect, so the frame that
+ * first shows the drawing already shows the value.
+ */
+const usePickerContext = () => {
+  const context = useContext(PickerContext);
+  const requestValue = context?.requestValue;
+  useLayoutEffect(() => {
+    requestValue?.();
+  }, [requestValue]);
+  return context;
+};
+
+/*
+ * A typed picker (`type="date"`, `type="array"`, …) draws its value with a ui
+ * of navi's own, installed as the very "ui" prop a caller overrides to draw
+ * that value themselves. Marking navi's own tells the two apart afterwards:
+ * an empty value is greyed as a placeholder only when the drawing is navi's —
+ * a caller's ui may well be their way of writing "no filter", which is an
+ * answer, not a blank (see navi-placeholder in picker.jsx).
+ */
+const asPickerOwnUI = PickerUI => {
+  PickerUI.isPickerOwnUI = true;
+  return PickerUI;
+};
+const pickerUIIsNaviOwn = ui => {
+  return Boolean(ui) && typeof ui === "object" && Boolean(ui.type?.isPickerOwnUI);
+};
+
+/**
+ * What the picker holds, read from inside its `ui` — for a drawing given as
+ * an element (`ui={<MyCard game={game} />}`), which the picker cannot hand
+ * props to. `value` is the state the picker holds right now: the answer the
+ * popup just closed on, before the server has said anything, and put back if
+ * the action fails. `loading` is the run in flight; `interactive` is false
+ * while the picker is disabled, read-only or busy.
+ *
+ * @returns {{ value: any, loading: boolean, interactive: boolean } | null}
+ *   null outside a picker.
+ */
+const usePickerState = () => {
+  const context = usePickerContext();
+  if (!context) {
+    return null;
+  }
+  const {
+    value,
+    loading,
+    interactive
+  } = context;
+  return {
+    value,
+    loading,
+    interactive
+  };
+};
+
 installImportMetaCssBuild(import.meta);
 const css$B = /* css */`.navi_picker_callout_dock > [data-picker-content] {
   display: none;
@@ -69593,6 +69671,12 @@ const PickerCustom = props => {
   const idDefault = useId();
   const controlId = useContext(ControlIdContext);
   props.id = props.id || controlId || idDefault;
+  // Given no value, the picker holds what the control in its popup holds (see
+  // the `mount` decision below) — and a group around it collects that from the
+  // moment both exist.
+  const valueInPopup = !isControlValueGivenByProps(props);
+  const parentController = useContext(ParentUIStateControllerContext);
+  const answersToGroup = Boolean(parentController) && !props.standalone;
   // 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
@@ -69838,12 +69922,20 @@ const PickerCustom = props => {
     const requestInteraction = options => {
       dispatchRequestInteraction(ref.current, options);
     };
+
+    // What a drawing of the caller's calls as it reads the value (see
+    // usePickerContext): the popup holding it, built while closed. Only when
+    // `mount` is left to the picker — a caller who set it has said when.
+    const requestValue = useStableCallback(() => {
+      openController.buildContent();
+    });
     const {
       onActionStart,
       children,
       uiAction: uiActionProp
     } = props;
     Object.assign(pickerProps, {
+      "requestValue": valueInPopup && props.mount === undefined ? requestValue : undefined,
       "aria-expanded": Boolean(expanded),
       "onActionStart": e => {
         onActionStart?.(e);
@@ -69882,13 +69974,12 @@ const PickerCustom = props => {
       anchor: props.anchor || props.ref,
       openController,
       // A picker whose value was never given to it reads it off the control in
-      // its popup (see useUIFacadeStateController): the trigger shows what the
-      // list inside says is selected, so that list has to exist before anyone
-      // opens anything. Told a value — even an empty one — the picker owns it
-      // and pushes it down instead, leaving the popup free to build its
-      // content only when it is first opened (see popup_content_mount.js).
-      // A caller who knows better says so with the popup's own props.
-      mount: props.mount ?? (isControlValueGivenByProps(props) ? MOUNT_DEFAULT : "always"),
+      // its popup (see useUIFacadeStateController), so that control is built as
+      // soon as something reads the value: at mount when the picker sees the
+      // reader, otherwise when a drawing of the caller's asks (requestValue
+      // above). Told a value — even an empty one — the picker pushes it down,
+      // and the popup waits for its first open (see popup_content_mount.js).
+      mount: props.mount ?? (valueInPopup && isPickerValueReadAtMount(props, answersToGroup) ? "always" : MOUNT_DEFAULT),
       // Not on pickerProps (the trigger): commands.js's own
       // resolveClosestExpandable() does `el.closest("[aria-expanded]")` to
       // find where to dispatch navi_request_open/navi_request_close — and
@@ -70176,6 +70267,29 @@ const PickerCustom = props => {
   });
 };
 
+// Whether something reads a picker's value before its popup has opened, as
+// far as the picker sees from its own props: the drawing navi renders for it
+// (its own, or the typed one PickerTypeResolver installs — `ui` is still unset
+// here), one of navi's Picker.UI.*, a component handed `value`, the clear
+// cross, a form submitting it by name, a group it answers to. A headless
+// picker draws nothing, and an element `ui` is the caller's: it reads through
+// usePickerContext, which asks for the value then.
+const isPickerValueReadAtMount = (props, answersToGroup) => {
+  if (props.name !== undefined || answersToGroup) {
+    return true;
+  }
+  if (props.variant === "headless") {
+    return false;
+  }
+  if (props.clearable) {
+    return true;
+  }
+  const {
+    ui
+  } = props;
+  return ui === undefined || typeof ui === "function" || pickerUIIsNaviOwn(ui);
+};
+
 // A hold declared on something AROUND the picker (a card opened by
 // `openOn="longpress"`, holding this one in its drawing): the finger going
 // down may be the start of that hold, so this picker opens on the click — which
@@ -70691,52 +70805,6 @@ const PickerConfirmBody = ({
   });
 };
 
-const PickerContext = createContext();
-
-/*
- * A typed picker (`type="date"`, `type="array"`, …) draws its value with a ui
- * of navi's own, installed as the very "ui" prop a caller overrides to draw
- * that value themselves. Marking navi's own tells the two apart afterwards:
- * an empty value is greyed as a placeholder only when the drawing is navi's —
- * a caller's ui may well be their way of writing "no filter", which is an
- * answer, not a blank (see navi-placeholder in picker.jsx).
- */
-const asPickerOwnUI = PickerUI => {
-  PickerUI.isPickerOwnUI = true;
-  return PickerUI;
-};
-const pickerUIIsNaviOwn = ui => {
-  return Boolean(ui) && typeof ui === "object" && Boolean(ui.type?.isPickerOwnUI);
-};
-
-/**
- * What the picker holds, read from inside its `ui` — for a drawing given as
- * an element (`ui={<MyCard game={game} />}`), which the picker cannot hand
- * props to. `value` is the state the picker holds right now: the answer the
- * popup just closed on, before the server has said anything, and put back if
- * the action fails. `loading` is the run in flight; `interactive` is false
- * while the picker is disabled, read-only or busy.
- *
- * @returns {{ value: any, loading: boolean, interactive: boolean } | null}
- *   null outside a picker.
- */
-const usePickerState = () => {
-  const context = useContext(PickerContext);
-  if (!context) {
-    return null;
-  }
-  const {
-    value,
-    loading,
-    interactive
-  } = context;
-  return {
-    value,
-    loading,
-    interactive
-  };
-};
-
 const PickerNaviMinute = props => {
   const Next = useNextResolver();
   const {
@@ -79253,7 +79321,7 @@ const PickerObjectUI = /*#__PURE__*/asPickerOwnUI(() => {
   const {
     value,
     placeholder
-  } = useContext(PickerContext);
+  } = usePickerContext();
   if (uiStateHoldsNothing(value)) {
     if (!placeholder) {
       return null;
@@ -79289,7 +79357,7 @@ const PickerArrayUI = /*#__PURE__*/asPickerOwnUI(() => {
     value,
     placeholder,
     maxLines
-  } = useContext(PickerContext);
+  } = usePickerContext();
   if (uiStateHoldsNothing(value)) {
     if (!placeholder) {
       return null;
@@ -79371,7 +79439,7 @@ const PickerColorUI = /*#__PURE__*/asPickerOwnUI(() => {
   const {
     value,
     placeholder
-  } = useContext(PickerContext);
+  } = usePickerContext();
   if (!value) {
     if (!placeholder) {
       return jsx(Color, {});
@@ -79395,7 +79463,7 @@ const PickerDateUI = /*#__PURE__*/asPickerOwnUI(props => {
   const {
     value,
     placeholder
-  } = useContext(PickerContext);
+  } = usePickerContext();
   if (!value) {
     if (!placeholder) {
       return jsx(Time, {
@@ -79427,7 +79495,7 @@ const PickerMonthUI = /*#__PURE__*/asPickerOwnUI(props => {
   const {
     value,
     placeholder
-  } = useContext(PickerContext);
+  } = usePickerContext();
   if (!value) {
     if (!placeholder) {
       return jsx(Time, {
@@ -79458,7 +79526,7 @@ const PickerWeekUI = /*#__PURE__*/asPickerOwnUI(props => {
   const {
     value,
     placeholder
-  } = useContext(PickerContext);
+  } = usePickerContext();
   if (!value) {
     if (!placeholder) {
       return jsx(Time, {
@@ -79489,7 +79557,7 @@ const PickerTimeUI = /*#__PURE__*/asPickerOwnUI(props => {
   const {
     value,
     placeholder
-  } = useContext(PickerContext);
+  } = usePickerContext();
   if (!value) {
     if (!placeholder) {
       return jsx(Time, {
@@ -79520,7 +79588,7 @@ const PickerDurationUI = /*#__PURE__*/asPickerOwnUI(props => {
   const {
     value,
     placeholder
-  } = useContext(PickerContext);
+  } = usePickerContext();
   if (!value) {
     if (!placeholder) {
       return jsx(Time, {
@@ -79550,7 +79618,7 @@ const PickerDatetimeUI = /*#__PURE__*/asPickerOwnUI(props => {
   const {
     value,
     placeholder
-  } = useContext(PickerContext);
+  } = usePickerContext();
   if (!value) {
     if (!placeholder) {
       return jsx(Time, {
@@ -79579,7 +79647,7 @@ const PickerFileUI = /*#__PURE__*/asPickerOwnUI(() => {
   const {
     value,
     placeholder
-  } = useContext(PickerContext);
+  } = usePickerContext();
   if (!value) {
     if (!placeholder) {
       return null;
@@ -80115,7 +80183,11 @@ const PickerButton = props => {
     // a piece of, waiting as a whole (see the `loadingOutline` doc).
     loadingOutline,
     // Where the outline runs, in px from the picker's box: negative is outside.
-    loadingOutlineInset = -2
+    loadingOutlineInset = -2,
+    // Builds the popup this picker's value is read from, for a drawing that
+    // reads it (see usePickerContext). Set by PickerCustom, only while that
+    // value lives in the popup.
+    requestValue
   } = props;
   // A word in a sentence is never truncated — and the clamp's overflow: hidden
   // would cut its dotted underline, which sits on the edge of the line box
@@ -80213,7 +80285,8 @@ const PickerButton = props => {
     id: inputProps.id,
     interactive,
     loading,
-    clearConfirm
+    clearConfirm,
+    requestValue
   };
   return (
     /* Read-only crosses into everything the picker is made of: what it really
@@ -80264,7 +80337,8 @@ const PickerButton = props => {
         error: undefined,
         dayLabel: undefined,
         loadingOutline: undefined,
-        loadingOutlineInset: undefined
+        loadingOutlineInset: undefined,
+        requestValue: undefined
         // This wrapper will receive keyboard event bubbling from the picker popup content
         // we re-dispatch on the input (to get escape to close for instance)
         ,
@@ -80478,7 +80552,7 @@ const PickerClear = ({
   children,
   ...rest
 }) => {
-  const pickerContext = useContext(PickerContext);
+  const pickerContext = usePickerContext();
   if (!pickerContext) {
     warnOnClearOutsidePicker();
     return null;
@@ -80762,7 +80836,7 @@ const PickerDefaultUI = () => {
   const {
     value,
     placeholder
-  } = useContext(PickerContext);
+  } = usePickerContext();
   if (!value) {
     if (!placeholder) {
       return null;
@@ -81336,10 +81410,13 @@ const PickerFirstResolver = props => {
  * @param {string} [cancelTestId]
  * @param {"always"|"idle"|"from-first-open"|"while-opened"} [mount] The popup's own
  *   (see Popup): when the children are built and thrown away. Left out, a
- *   picker told no value builds them right away (`"always"`) — it reads its
- *   value off the control they hold — and one told a value waits for the first
- *   open. A `type="confirm"` picker never builds them early: its popup is a
- *   question, there is nothing to read.
+ *   picker told no value holds what the control they hold holds, and builds
+ *   them as soon as that value is read: right away (`"always"`) when navi draws
+ *   it (no `ui`, a `Picker.UI.*`, a component `ui`), when there is a clear
+ *   cross, or when a form or group around the picker collects it; when an
+ *   element `ui` calls `usePickerState()`. Read by nothing, it waits for the
+ *   first open, like a picker told a value. A `type="confirm"` picker never
+ *   builds them early: its popup is a question, there is nothing to read.
  */
 // Every picker type is resolved into one of these before it gets here (see
 // PickerTypeResolver and resolveInputProps): a native input type, or navi_js