@jsenv/navi 0.29.476 → 0.29.478

package/dist/jsenv_navi.js

@@ -6345,11 +6345,6 @@ const CONTROL_PROP_SET = new Set([
   "autoFocusVisible",
   "autoFocusSelect",
 
-  "onMouseDown",
-  "onClick",
-  "onKeyDown",
-  "onPaste",
-  "onInput",
   "eventReactionDefinitions",
 
   "onCancel",
@@ -11877,7 +11872,7 @@ const putBack = (restoration) => {
     // The page is not whole yet: the last release puts it back.
     return;
   }
-  if (documentHoldCount) {
+  if (isDocumentHeld()) {
     pendingRestoration = null;
     return;
   }
@@ -11893,20 +11888,33 @@ const putBack = (restoration) => {
 // height, so the same pixels now fall on other rows. Put back after the list
 // has placed itself, they would undo it, in the very picture a route transition
 // takes. So the list holds the document while it is placing itself, and the
-// url's offset is not put back meanwhile. Counted: two lists can share one
-// document.
-let documentHoldCount = 0;
-const holdDocumentScroll = () => {
-  documentHoldCount++;
-  let released = false;
+// url's offset is not put back meanwhile. One hold per list: two lists can
+// share one document.
+//
+// A hold is for the page its list is on, and mounted is not shown: a page kept
+// while its route transition plays still has its list when the page returned to
+// renders, and that list says nothing about where the page arriving goes. So a
+// hold is taken with the list's page (RoutePageContext), asked whether it is
+// shown when a position is due — `null` outside any route container: that list
+// is on whatever page is shown. Not a url: which page an address shows is the
+// routes' to say, and one page can be shown under several (its params moving
+// under it).
+const documentHolds = new Set();
+const holdDocumentScroll = (routePage) => {
+  const hold = { routePage };
+  documentHolds.add(hold);
   return () => {
-    if (released) {
-      return;
-    }
-    released = true;
-    documentHoldCount--;
+    documentHolds.delete(hold);
   };
 };
+const isDocumentHeld = () => {
+  for (const { routePage } of documentHolds) {
+    if (routePage === null || routePage.isShown()) {
+      return true;
+    }
+  }
+  return false;
+};
 
 // What a page holds instead: not the place, which stays the url's, but the
 // moment it is put back (see useHoldScrollRestoration). Counted: several parts
@@ -12164,9 +12172,9 @@ const restoreScrollPosition = (url) => {
   if (!position) {
     return false;
   }
-  if (documentHoldCount) {
-    // There is a place to go back to, and the list holding the document is
-    // putting it back (see holdDocumentScroll).
+  if (isDocumentHeld()) {
+    // There is a place to go back to, and the list holding the document on
+    // that page is putting it back (see holdDocumentScroll).
     return true;
   }
   scrollTo(position);
@@ -45739,6 +45747,9 @@ const ControlgroupChildrenWrapper = ({
   })
 });
 
+// What the caller writes for these is called from the control's own reactions
+// (see `reactions` below), so the split leaves them out of both sides.
+const LISTENERS_CALLED_BY_REACTIONS = new Set(["onMouseDown", "onClick", "onKeyDown", "onPaste", "onInput"]);
 /**
  * Core hook for interactive field components (InputTextual, InputCheckbox, etc.).
  *
@@ -45753,12 +45764,22 @@ const ControlgroupChildrenWrapper = ({
  * All state changes route through DOM events on the field element so that
  * external subscribers (e.g. useControlUIState, Selectable) receive every update.
  *
+ * @param {object} options
+ * @param {"host"|"root"} [options.listenersOn] Where the caller's DOM listeners
+ *   (`onPointerDown`, `onFocus`…, never navi's own `onnavi_*`) land. `"host"`,
+ *   the default, is right wherever the host is what the person presses and
+ *   focuses: the field inside its box, or one element for both. `"root"` is for
+ *   a control whose host is a hidden carrier, or whose root also holds what
+ *   the control opens, so that a listener hears the control as a whole.
+ *   `onMouseDown`, `onClick`, `onKeyDown`, `onPaste` and `onInput` stay the
+ *   host's either way: the control's own reactions to them call them.
  * @returns {[controlRootProps, controlHostProps, { uiStateController }]}
  */
 const useControlProps = (props, {
   controlType,
   persists,
-  uiActionInternal
+  uiActionInternal,
+  listenersOn = "host"
 }) => {
   const debugUIState = useDebugUIState();
 
@@ -45844,7 +45865,9 @@ const useControlProps = (props, {
   const [controlRootProps, controlHostProps] = useInteractiveProps(props, {
     uiStateController,
     boundAction,
-    controlInfo
+    controlInfo,
+    listenersOn,
+    listenersCalledByReactions: LISTENERS_CALLED_BY_REACTIONS
   });
   {
     const debugInteraction = useDebugInteraction();
@@ -46878,7 +46901,9 @@ const useControlgroupProps = (props, {
   wantRequesterButtonState,
   uiActionInternal,
   allowCapture = false,
-  cascadeValidationToChildren = false
+  cascadeValidationToChildren = false,
+  // See useControlProps.
+  listenersOn = "host"
 }) => {
   const {
     action,
@@ -46928,7 +46953,8 @@ const useControlgroupProps = (props, {
     // so we don't have a value concept, nor readonly etc
     controlInfo: {
       controlType
-    }
+    },
+    listenersOn
   });
   const {
     basePseudoState
@@ -47067,12 +47093,17 @@ const ControlFacadeChildrenWrapper = ({
 const useInteractiveProps = (props, {
   uiStateController,
   boundAction,
-  controlInfo
+  controlInfo,
+  listenersOn,
+  listenersCalledByReactions
 }) => {
   const {
     ref
   } = props;
-  const [controlRootProps, controlHostProps] = splitControlProps(props);
+  const [controlRootProps, controlHostProps] = splitControlProps(props, {
+    listenersOn,
+    listenersCalledByReactions
+  });
   controlRootProps["navi-control"] = controlInfo.controlType;
   if (props.selfInteractions) {
     // One attribute, in the DOM, because that is where the claim is read from —
@@ -47449,8 +47480,10 @@ const useInteractiveProps = (props, {
         }
       }
     };
+    const onFocusFromProps = controlHostProps.onFocus;
     Object.assign(controlHostProps, {
       onFocus: e => {
+        onFocusFromProps?.(e);
         // Transfer programmatic focus to the delegate target (navi-focus-delegate or navi-control-proxy-for)
         const focusProxyTarget = findFocusDelegateTarget(e.currentTarget) || findControlProxyTarget(e.currentTarget);
         if (focusProxyTarget) {
@@ -47680,7 +47713,10 @@ const useInteractiveProps = (props, {
   }
   return [controlRootProps, controlHostProps];
 };
-const splitControlProps = props => {
+const splitControlProps = (props, {
+  listenersOn,
+  listenersCalledByReactions
+}) => {
   const {
     ref
   } = props;
@@ -47697,10 +47733,20 @@ const splitControlProps = props => {
     if (isControlProp(key)) {
       continue;
     }
+    if (listenersCalledByReactions?.has(key)) {
+      continue;
+    }
+    if (listenersOn === "host" && isDomListenerProp(key)) {
+      controlHostProps[key] = props[key];
+      continue;
+    }
     controlRootProps[key] = props[key];
   }
   return [controlRootProps, controlHostProps];
 };
+// `onPointerDown`, `onFocusOut`… but not navi's own events (`onnavi_command`),
+// which keep the element they are dispatched on.
+const isDomListenerProp = key => /^on[A-Z]/.test(key);
 const isCheckableInput = (controlType, typeProp) => controlType === "input" && (typeProp === "radio" || typeProp === "checkbox");
 
 // The labels the DOM itself can hand over: a wrapping <label>, or a label[for]
@@ -60243,6 +60289,86 @@ const useAutoSelectReadOnly = (props) => {
   return { onFocus, onMouseDown, onPointerDown };
 };
 
+// selectOnPress: a field whose value is usually replaced rather than edited (an
+// address, a place to search) behaves like the address bar of a browser. The
+// first gesture that engages it after it took the focus selects its whole text,
+// so typing replaces it; a second press places the caret, to fix one part.
+//
+// Engaged by a gesture, never by the focus itself: a dialog opening hands the
+// focus to its first field (docs/autofocus.md), and a field selected on focus
+// would greet whoever opened the dialog already half-way into an edit. So a
+// focus that came without a press waits for the first key that types.
+//
+// The press selects once it is over, on `click`: the browser places the caret
+// on mousedown and may collapse a selection on mouseup, so anything selected
+// before the release is undone by it. `mousedown` decides whether a press
+// engages because a finger only produces one after a tap — a finger that
+// scrolled the page never reaches the field. Touch is included on purpose (see
+// use_autoselect_read_only.js for why a read-only field leaves it out): on a
+// field meant to be replaced, the native selection handles are expected.
+const useSelectOnPress = (props, selectOnPress) => {
+  const engagedRef = useRef(false);
+  const pressEngagesRef = useRef(false);
+
+  if (!selectOnPress) {
+    return null;
+  }
+  const onMouseDown = (e) => {
+    props.onMouseDown(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (e.button !== 0) {
+      return;
+    }
+    pressEngagesRef.current = !engagedRef.current;
+    engagedRef.current = true;
+  };
+  const onClick = (e) => {
+    props.onClick(e);
+    if (!pressEngagesRef.current) {
+      return;
+    }
+    pressEngagesRef.current = false;
+    if (e.defaultPrevented) {
+      return;
+    }
+    const input = e.currentTarget;
+    if (input.selectionStart !== input.selectionEnd) {
+      // The press dragged across a part of the text: that part is what was meant.
+      return;
+    }
+    input.select();
+    // Keep the beginning of the text visible instead of scrolling to the end
+    input.scrollLeft = 0;
+  };
+  const onKeyDown = (e) => {
+    if (!engagedRef.current) {
+      const defaultAction = getKeyboardEventDefaultAction(e);
+      if (defaultAction === "type") {
+        engagedRef.current = true;
+        // Before the control's own keydown: maxLengthGuard measures the room
+        // left against the selection the key is about to replace.
+        e.currentTarget.select();
+      } else if (defaultAction === "cursor_move") {
+        engagedRef.current = true;
+      }
+    }
+    props.onKeyDown(e);
+  };
+  const onBlur = (e) => {
+    props.onBlur(e);
+    if (document.activeElement === e.currentTarget) {
+      // The window went to the background and the field still holds the focus:
+      // coming back is not a new arrival.
+      return;
+    }
+    engagedRef.current = false;
+  };
+
+  return { onMouseDown, onClick, onKeyDown, onBlur };
+};
+
 /**
  * Input component for all textual input types.
  *
@@ -60350,7 +60476,8 @@ const InputTextualUI = props => {
     ui,
     variant,
     backgroundColor,
-    width = "maxLength"
+    width = "maxLength",
+    selectOnPress
   } = props;
   const [inputControlRootProps, inputControlHostProps, controlChildrenWrapperProps] = useInputTextualProps(props);
   const {
@@ -60392,6 +60519,8 @@ const InputTextualUI = props => {
   } else {
     inputControlHostProps.width = width;
   }
+  delete inputControlRootProps.selectOnPress;
+  inputControlHostProps.selectOnPress = selectOnPress;
   return jsxs(Box, {
     as: "span",
     inline: true,
@@ -60464,7 +60593,7 @@ const resolveWidthFromMaxLength = (maxLength, inputMode) => {
 // rest — the guards, the slots, the constraints — which describe an edition
 // that does not happen here. What survives is what a Box understands: width,
 // spacing, colors, className, style.
-const INPUT_ONLY_PROPS = ["value", "defaultValue", "signal", "id", "maxLength", "inputMode", "width", "variant", "type", "name", "placeholder", "required", "readOnly", "disabled", "loading", "error", "min", "max", "step", "pattern", "autoComplete", "autoCorrect", "spellcheck", "charGuard", "maxLengthGuard", "list", "suggestions", "headless", "fieldSizing", "action", "uiAction", "ui", "children"];
+const INPUT_ONLY_PROPS = ["value", "defaultValue", "signal", "id", "maxLength", "inputMode", "width", "variant", "type", "name", "placeholder", "required", "readOnly", "disabled", "loading", "error", "min", "max", "step", "pattern", "autoComplete", "autoCorrect", "spellcheck", "charGuard", "maxLengthGuard", "list", "suggestions", "headless", "fieldSizing", "selectOnPress", "action", "uiAction", "ui", "children"];
 const InputTextualAsText = props => {
   installInputCss();
   // The id a Field handed down, which is what its Label points at.
@@ -60528,14 +60657,20 @@ const InputTextualFirstResolver = props => {
 const InputTextual = /*#__PURE__*/createComponentResolver([InputTextualAsTextResolver, InputTextualFirstResolver, InputWithListResolver, InputWithSuggestionsResolver, InputTypeResolver, InputModeResolver, InputHeadlessResolver, InputTextualUI]);
 const RealInput = ({
   maxLength,
+  selectOnPress,
   ...domProps
 }) => {
   const autoSelectReadOnlyProps = useAutoSelectReadOnly(domProps);
+  const selectOnPressProps = useSelectOnPress({
+    ...domProps,
+    ...autoSelectReadOnlyProps
+  }, selectOnPress);
   return jsx(Box, {
     ...domProps,
     as: "input",
     baseClassName: "navi_control_input",
     ...autoSelectReadOnlyProps,
+    ...selectOnPressProps,
     // Never set native maxLength — our guard handles it. Omitting it entirely
     // avoids a Preact quirk: setting maxLength={undefined} on a fresh DOM element
     // (e.g. after a Suspense remount) causes Preact to run `el.maxLength = ""`
@@ -76166,6 +76301,11 @@ const ListItemSelectable = props => {
     ...(hasSelectedProp ? {
       checked: selected
     } : null)
+  },
+  // The host is the visually hidden input carrying the selection: the row
+  // is what the person sees and presses (see onClick above).
+  {
+    listenersOn: "root"
   });
   const {
     checked,
@@ -77911,6 +78051,19 @@ const useListScrollSync = ({
     // eslint-disable-next-line no-unused-expressions
     virtualItemSizeSignal.value;
   }
+  // The hold ending — the user reaching for the list, something else moving
+  // it, the item it opens on never coming — ends its hold on the document with
+  // it (see holdDocumentScroll), rather than at the next render, which nothing
+  // owes: an offset put back on this page meanwhile is the reader's.
+  const releaseDocumentHoldRef = useRef(null);
+  const letGo = () => {
+    startPlaceRef.current.userTookOver = true;
+    const releaseDocumentHold = releaseDocumentHoldRef.current;
+    if (releaseDocumentHold) {
+      releaseDocumentHoldRef.current = null;
+      releaseDocumentHold();
+    }
+  };
   // Set around a scroll the list performs itself. What it protects against is
   // not the scroll event as such, but what the listener would conclude from it:
   // the position it is about to read was chosen to keep the items where they
@@ -78144,7 +78297,7 @@ const useListScrollSync = ({
         }
         openAt = scrolledFallback;
         if (openAt === "start" || openAt === undefined) {
-          startPlaceRef.current.userTookOver = true;
+          letGo();
           return;
         }
       } else {
@@ -78296,13 +78449,39 @@ const useListScrollSync = ({
   }, []);
   // Held on an item of a list scrolling the document: where the document goes is
   // this list's to say, measured on the item, not the url's offset in pixels
-  // (see holdDocumentScroll).
+  // (see holdDocumentScroll). The hold read again: a layout effect of this
+  // commit may have let go already (see placeWhereHeld).
+  const routePage = useContext(RoutePageContext);
   useLayoutEffect(() => {
-    if (!heldSomewhere || getScroller() !== document.scrollingElement) {
+    if (!heldSomewhere || startPlaceRef.current.userTookOver || getScroller() !== document.scrollingElement) {
       return undefined;
     }
-    return holdDocumentScroll();
-  }, [heldSomewhere, scrollerElResolved]);
+    const releaseDocumentHold = holdDocumentScroll(routePage);
+    releaseDocumentHoldRef.current = releaseDocumentHold;
+    return () => {
+      releaseDocumentHoldRef.current = null;
+      releaseDocumentHold();
+    };
+  }, [heldSomewhere, scrolledWanted, scrollerElResolved]);
+  // A page kept while its route transition plays is hidden until it is taken
+  // down: nothing of the list can be measured there any more, and its scroller
+  // shows the page arriving (see route_page_context.js). So the list lets go of
+  // it, and stops answering its resizes and scrolls: measured hidden, every
+  // item stands at 0×0, and the top item put back where it was would scroll
+  // the page arriving by that item's offset. Kept mounted on purpose, so the
+  // listeners stay; what they would do is what ends.
+  const pageLeftRef = useRef(false);
+  useLayoutEffect(() => {
+    if (!routePage) {
+      return undefined;
+    }
+    return routePage.leavingSignal.subscribe(leaving => {
+      if (leaving) {
+        pageLeftRef.current = true;
+        letGo();
+      }
+    });
+  }, []);
   // What to do when the list's own geometry moves under it, kept fresh for the
   // observer below (which is installed once).
   const onGeometryChangeRef = useRef(null);
@@ -78336,18 +78515,15 @@ const useListScrollSync = ({
       return undefined;
     }
     const scrollerEl = getScroller();
-    const takeOver = () => {
-      startPlaceRef.current.userTookOver = true;
-    };
     const takeOverEvents = ["wheel", "touchstart", "pointerdown", "keydown"];
     for (const type of takeOverEvents) {
-      scrollerEl.addEventListener(type, takeOver, {
+      scrollerEl.addEventListener(type, letGo, {
         passive: true
       });
     }
     return () => {
       for (const type of takeOverEvents) {
-        scrollerEl.removeEventListener(type, takeOver);
+        scrollerEl.removeEventListener(type, letGo);
       }
     };
   }, [scrolledWanted, scrollerElResolved]);
@@ -78504,6 +78680,9 @@ const useListScrollSync = ({
       }
     };
     const observer = new ResizeObserver(entries => {
+      if (pageLeftRef.current) {
+        return;
+      }
       // A box that grows may be a box that starts to scroll — the scroller is
       // resolved again before anything is done about the resize, so that a
       // list which has outgrown a bounded ancestor stops holding on to the
@@ -78908,6 +79087,9 @@ const useListScrollSync = ({
     }
     const scrollerEl = getScroller();
     const onScroll = () => {
+      if (pageLeftRef.current) {
+        return;
+      }
       // Which way the user is going, read before the position is stored: what
       // the window keeps ahead is ahead of this.
       const previousScroll = currentScrollRef.current;
@@ -78965,7 +79147,7 @@ const useListScrollSync = ({
       const low = way.from < way.to ? way.from : way.to;
       const high = way.from < way.to ? way.to : way.from;
       if (position < low - 1 || position > high + 1) {
-        place.userTookOver = true;
+        letGo();
       }
     };
     // A page-level scroller does not emit "scroll" on the element itself
@@ -84909,7 +85091,11 @@ const PickerButton = props => {
     ...props,
     ref: inputRef
   }, {
-    controlType: "picker"
+    controlType: "picker",
+    // The root holds what the picker opens as well as its trigger: a
+    // listener on the picker hears what bubbles out of the popup (the focus
+    // leaving it, see picker_custom.jsx).
+    listenersOn: "root"
   });
   const uiStateController = getUIStateControllerById(inputProps.id);
   const value = uiStateController.uiState;
@@ -87446,6 +87632,8 @@ const InputDuration = props => {
   }, {
     controlType: "duration_group",
     cascadeValidationToChildren: true,
+    // The host is an <input type="hidden"> carrying the value.
+    listenersOn: "root",
     // Aggregates sub-input values into an ISO 8601-like duration string.
     // durationToISOString preserves non-numeric mid-edit values
     // (e.g. hours="ab") between their unit markers ("PTabH30M"),
@@ -87512,7 +87700,7 @@ const InputDuration = props => {
   } = groupHostProps;
   const groupRef = useRef();
   useInputGroup(groupRef);
-  const clipboardProps = useClipboardProps(groupRef);
+  const clipboardProps = useClipboardProps(groupRef, groupRootProps);
   const hourValue = components?.hours;
   const minuteValue = components?.minutes;
   const rawSecondValue = components?.seconds;
@@ -87585,7 +87773,11 @@ const InputDuration = props => {
 const getVisibleFields = container => {
   return ["hour", "minute", "second", "millisecond"].filter(f => container.querySelector(`[navi-input-type="${f}"]`) !== null);
 };
-const useClipboardProps = groupRef => {
+
+// Spread after the group's props, so the caller's listeners for these events
+// are called from here. Whatever they do, the group's own reading runs too, as
+// it does after a field's paste guard prevented the paste.
+const useClipboardProps = (groupRef, callerProps) => {
   const getClipboardPayload = () => {
     const groupEl = groupRef.current;
     if (!groupEl) {
@@ -87651,6 +87843,7 @@ const useClipboardProps = groupRef => {
     return true;
   };
   const onCopy = e => {
+    callerProps.onCopy?.(e);
     if (!isFromDurationField(e)) {
       return;
     }
@@ -87663,6 +87856,7 @@ const useClipboardProps = groupRef => {
     e.preventDefault();
   };
   const onCut = e => {
+    callerProps.onCut?.(e);
     if (!isFromDurationField(e)) {
       return;
     }
@@ -87675,6 +87869,7 @@ const useClipboardProps = groupRef => {
     applyToGroup("", e);
   };
   const onPaste = e => {
+    callerProps.onPaste?.(e);
     if (!isFromDurationField(e)) {
       return;
     }
@@ -90240,7 +90435,10 @@ function WheelUI(props) {
     // action explicitly on settle. A caller can still override actionEvent.
     actionEvent: props.actionEvent ?? "custom"
   }, {
-    controlType: "input"
+    controlType: "input",
+    // The host is the hidden input carrying the value: the container is
+    // what is focused and spun.
+    listenersOn: "root"
   });
   const uiStateController = getUIStateControllerById(controlHostProps.id);
   const {