@jsenv/navi 0.29.476 → 0.29.477

package/dist/dev/jsenv_navi.js

@@ -6566,11 +6566,6 @@ const CONTROL_PROP_SET = new Set([
   "autoFocusVisible",
   "autoFocusSelect",
 
-  "onMouseDown",
-  "onClick",
-  "onKeyDown",
-  "onPaste",
-  "onInput",
   "eventReactionDefinitions",
 
   "onCancel",
@@ -46903,6 +46898,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.).
  *
@@ -46917,12 +46915,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();
   const debugAction = useDebugAction();
@@ -47009,7 +47017,9 @@ const useControlProps = (props, {
   const [controlRootProps, controlHostProps] = useInteractiveProps(props, {
     uiStateController,
     boundAction,
-    controlInfo
+    controlInfo,
+    listenersOn,
+    listenersCalledByReactions: LISTENERS_CALLED_BY_REACTIONS
   });
   {
     const debugInteraction = useDebugInteraction();
@@ -48062,7 +48072,9 @@ const useControlgroupProps = (props, {
   wantRequesterButtonState,
   uiActionInternal,
   allowCapture = false,
-  cascadeValidationToChildren = false
+  cascadeValidationToChildren = false,
+  // See useControlProps.
+  listenersOn = "host"
 }) => {
   const {
     action,
@@ -48116,7 +48128,8 @@ const useControlgroupProps = (props, {
     // so we don't have a value concept, nor readonly etc
     controlInfo: {
       controlType
-    }
+    },
+    listenersOn
   });
   const {
     basePseudoState
@@ -48255,12 +48268,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 —
@@ -48637,8 +48655,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) {
@@ -48870,7 +48890,10 @@ const useInteractiveProps = (props, {
   }
   return [controlRootProps, controlHostProps];
 };
-const splitControlProps = props => {
+const splitControlProps = (props, {
+  listenersOn,
+  listenersCalledByReactions
+}) => {
   const {
     ref
   } = props;
@@ -48887,10 +48910,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]
@@ -61469,6 +61502,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.
  *
@@ -61576,7 +61689,8 @@ const InputTextualUI = props => {
     ui,
     variant,
     backgroundColor,
-    width = "maxLength"
+    width = "maxLength",
+    selectOnPress
   } = props;
   const [inputControlRootProps, inputControlHostProps, controlChildrenWrapperProps] = useInputTextualProps(props);
   const {
@@ -61618,6 +61732,8 @@ const InputTextualUI = props => {
   } else {
     inputControlHostProps.width = width;
   }
+  delete inputControlRootProps.selectOnPress;
+  inputControlHostProps.selectOnPress = selectOnPress;
   return jsxs(Box, {
     as: "span",
     inline: true,
@@ -61690,7 +61806,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.
@@ -61754,14 +61870,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 = ""`
@@ -77592,6 +77714,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,
@@ -86530,7 +86657,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;
@@ -89739,6 +89870,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"),
@@ -89805,7 +89938,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;
@@ -89878,7 +90011,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) {
@@ -89944,6 +90081,7 @@ const useClipboardProps = groupRef => {
     return true;
   };
   const onCopy = e => {
+    callerProps.onCopy?.(e);
     if (!isFromDurationField(e)) {
       return;
     }
@@ -89956,6 +90094,7 @@ const useClipboardProps = groupRef => {
     e.preventDefault();
   };
   const onCut = e => {
+    callerProps.onCut?.(e);
     if (!isFromDurationField(e)) {
       return;
     }
@@ -89968,6 +90107,7 @@ const useClipboardProps = groupRef => {
     applyToGroup("", e);
   };
   const onPaste = e => {
+    callerProps.onPaste?.(e);
     if (!isFromDurationField(e)) {
       return;
     }
@@ -92537,7 +92677,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 {