@jsenv/navi 0.29.440 → 0.29.442

package/dist/jsenv_navi.js

@@ -12814,6 +12814,53 @@ const findControlProxy = (el) => {
   return null;
 };
 
+/**
+ * Tells a typed field's control that the user gave up on what they typed:
+ * `navi_cancel` with its reason — Escape, or leaving the field invalid. What
+ * giving up means is the control's to decide (onnavi_cancel in
+ * control_hooks.jsx: resetOnCancel, cancelOnEscape, cancelOnBlurInvalid).
+ *
+ * Leaving a field empty is not a cancel: the "change" of that same blur has
+ * already sent the empty value. A field that must not be left empty says
+ * `required`, and leaving it is then a blur_invalid.
+ */
+const addInputCancel = (input, controller) => {
+  const dispatchCancel = (detail) => {
+    dispatchInternalCustomEvent(input, "navi_cancel", detail);
+  };
+  const onkeydown = (e) => {
+    if (e.key !== "Escape") {
+      return;
+    }
+    if (controller.rules.callout.callout) {
+      // Escape closes the open callout first (callout.js listens on its anchor).
+      return;
+    }
+    dispatchCancel({ event: e, reason: "escape_key" });
+  };
+  const onblur = (e) => {
+    if (input.closest("[inert]")) {
+      // The page took the field away (an edition ending, a side swapped out)
+      // and the focus went with it: the user did not leave it.
+      return;
+    }
+    const { failedConstraintInfo } = controller.rules.validation;
+    if (failedConstraintInfo) {
+      dispatchCancel({
+        event: e,
+        reason: "blur_invalid",
+        failedConstraintInfo,
+      });
+    }
+  };
+  input.addEventListener("keydown", onkeydown);
+  input.addEventListener("blur", onblur);
+  return () => {
+    input.removeEventListener("keydown", onkeydown);
+    input.removeEventListener("blur", onblur);
+  };
+};
+
 const addInputEffect = (
   input,
   callback,
@@ -13002,11 +13049,15 @@ const listenInputStateChange = (
     callback(e);
   };
   input.addEventListener("input", oninput);
-  input.addEventListener("keydown", onkeydown);
+  // Capture: the guard is set before the control reacts to the key. Its
+  // reaction can end what the field is in (Enter sends, Escape cancels, an
+  // edition closes and hands the focus away), and the "change" of that blur
+  // arrives in the microtasks between two listeners of this keydown.
+  input.addEventListener("keydown", onkeydown, { capture: true });
   input.addEventListener("change", onchange);
   addTeardown(() => {
     input.removeEventListener("input", oninput);
-    input.removeEventListener("keydown", onkeydown);
+    input.removeEventListener("keydown", onkeydown, { capture: true });
     input.removeEventListener("change", onchange);
   });
 
@@ -45537,16 +45588,19 @@ const useControlProps = (props, {
     // ref so the effect always fires the current render's reaction.
     const applyEventReactionRef = useRef();
     applyEventReactionRef.current = applyEventReaction;
+    const isTypedField = controlType === "input" && !isCheckable && props.type !== "range";
     const refCallback = useCallback(field => {
-      if (!hasNaviChangeEventReaction || actionEvent === "custom") {
-        return undefined;
-      }
-      return addInputEffect(field, e => applyEventReactionRef.current("naviChange", e), {
+      const removeInputCancel = isTypedField ? addInputCancel(field, uiStateController) : undefined;
+      const removeInputEffect = hasNaviChangeEventReaction && actionEvent !== "custom" ? addInputEffect(field, e => applyEventReactionRef.current("naviChange", e), {
         waitForChange: actionAfterChange,
         debounce: actionDebounce,
         debugInteraction
-      });
-    }, [actionEvent, actionAfterChange, actionDebounce, hasNaviChangeEventReaction, ref]);
+      }) : undefined;
+      return () => {
+        removeInputCancel?.();
+        removeInputEffect?.();
+      };
+    }, [isTypedField, actionEvent, actionAfterChange, actionDebounce, hasNaviChangeEventReaction, ref]);
     const refComposed = useComposeElementRef(refCallback, ref);
     const onPaste = e => {
       props.onPaste?.(e);
@@ -46488,7 +46542,7 @@ const useInteractiveProps = (props, {
           }
           if (
           // error prevent cancellation until the user closes it (or something closes it)
-          e.detail.failedConstraintInfo.level === "error" && e.detail.failedConstraintInfo.reportStatus !== "closed") {
+          e.detail.failedConstraintInfo.status === "error" && e.detail.failedConstraintInfo.reportStatus !== "closed") {
             return;
           }
         }
@@ -60075,21 +60129,51 @@ const Editable = props => {
     editingPreviousRef.current = editing;
   }
 
-  // Simulate typing the initial value when editing starts with a custom value
+  // The field is mounted the whole time, so edition starting is when it
+  // arrives, and Editable places the focus itself: a mount-time autofocus
+  // would only ever see the first `editing`. Starting edition is a press aimed
+  // at typing, so the field takes the keyboard whatever asked for it — a
+  // click, Enter, a letter key.
+  const focusedBeforeEditionRef = useRef(null);
   useLayoutEffect(() => {
+    const field = ref.current;
     if (!editing) {
+      const focusedBeforeEdition = focusedBeforeEditionRef.current;
+      focusedBeforeEditionRef.current = null;
+      if (!focusedBeforeEdition || !focusedBeforeEdition.isConnected) {
+        return;
+      }
+      // The field just went inert while holding the focus (Enter, Escape, the
+      // action ending): the focus goes back to where edition was asked from.
+      // Focus the user took away, the blur that ended edition, stays where
+      // they put it — on the body included.
+      if (document.activeElement !== field) {
+        return;
+      }
+      moveFocusTo(focusedBeforeEdition);
       return;
     }
-    const editingEvent = editing.event;
-    if (editingEvent) {
-      const editingEventInitialValue = editingEvent.detail?.initialValue;
-      if (editingEventInitialValue !== undefined) {
-        const input = ref.current;
-        input.value = editingEventInitialValue;
-        input.dispatchEvent(new CustomEvent("input", {
-          bubbles: false
-        }));
-      }
+    focusedBeforeEditionRef.current = document.activeElement;
+    if (!valueSignal) {
+      // An edition starts from the value, not from what a cancelled one left
+      // typed in the field. Done before the focus: written into a focused
+      // field, it would read as a change to send (see input_effect.js).
+      dispatchRequestResetUIState(field, editing.event);
+    }
+    moveFocusTo(field);
+    const initialValue = editing.event?.detail?.initialValue;
+    if (initialValue !== undefined) {
+      // The key that started edition is its first keystroke.
+      field.value = initialValue;
+      field.dispatchEvent(new CustomEvent("input", {
+        bubbles: false
+      }));
+      return;
+    }
+    if (autoFocusSelect) {
+      field.select();
+      // Keep the beginning of the text visible instead of scrolling to the end
+      field.scrollLeft = 0;
     }
   }, [editing]);
   const controlProps = {
@@ -60098,9 +60182,6 @@ const Editable = props => {
     name,
     value,
     valueSignal,
-    autoFocus: editing,
-    autoFocusVisible: true,
-    autoFocusSelect,
     cancelOnEscape: true,
     cancelOnBlurInvalid: true,
     constraints,
@@ -60120,6 +60201,11 @@ const Editable = props => {
       });
     },
     onBlur: e => {
+      if (!editing) {
+        // The focus handed back once edition ended (see the effect above):
+        // the edition is already over, this blur is its consequence.
+        return;
+      }
       let inputValue;
       const valueWhenEditStart = valueWhenEditStartRef.current;
       let inputValueWhenEditStart;
@@ -60186,7 +60272,7 @@ const Editable = props => {
       // - input not focusable (via keyboard or anything)
       // - cannot be interacted with pointer (click, hover, etc)
       // - is ignored by screen readers
-      inert: editing ? undefined : "",
+      inert: !editing,
       "data-editing": editing ? "" : undefined,
       children: control
     })]
@@ -90761,20 +90847,33 @@ const Table = props => {
     columns,
     canChangeColumnOrder: Boolean(onColumnOrderChange)
   });
+
+  // Edition starts from a cell holding the focus itself. Once started, the
+  // focus is in the cell's field and its keys are the field's: an Enter there
+  // validates, it must not start edition again.
+  const canStartEditing = () => dragContextValue.grabTarget === null && document.activeElement.tagName === "TD";
+  // The key starting edition is its first keystroke, typed by Editable
+  // (initialValue). Its default is prevented: the browser would type it a
+  // second time into the field that takes the focus during this keydown.
+  const startEditingWithKey = e => {
+    e.preventDefault();
+    document.activeElement.dispatchEvent(new CustomEvent("editrequested", {
+      bubbles: false,
+      detail: {
+        initialValue: e.key
+      }
+    }));
+    return true;
+  };
   useKeyboardShortcuts(ref, [...createSelectionKeyboardShortcuts(selectionController, {
     toggleEnabled: true,
     enabled: () => dragContextValue.grabTarget === null
   }), {
     key: "enter",
     description: "Edit table cell content",
-    enabled: () => dragContextValue.grabTarget === null,
+    enabled: canStartEditing,
     handler: () => {
-      // Find the currently focused cell
-      const activeCell = document.activeElement.closest("td");
-      if (!activeCell) {
-        return false;
-      }
-      activeCell.dispatchEvent(new CustomEvent("editrequested", {
+      document.activeElement.dispatchEvent(new CustomEvent("editrequested", {
         bubbles: false
       }));
       return true;
@@ -90782,37 +90881,13 @@ const Table = props => {
   }, {
     key: "a-z",
     description: "Start editing table cell content",
-    enabled: () => dragContextValue.grabTarget === null,
-    handler: e => {
-      const activeCell = document.activeElement.closest("td");
-      if (!activeCell) {
-        return false;
-      }
-      activeCell.dispatchEvent(new CustomEvent("editrequested", {
-        bubbles: false,
-        detail: {
-          initialValue: e.key
-        }
-      }));
-      return true;
-    }
+    enabled: canStartEditing,
+    handler: startEditingWithKey
   }, {
     key: "0-9",
     description: "Start editing table cell content",
-    enabled: () => dragContextValue.grabTarget === null,
-    handler: e => {
-      const activeCell = document.activeElement.closest("td");
-      if (!activeCell) {
-        return false;
-      }
-      activeCell.dispatchEvent(new CustomEvent("editrequested", {
-        bubbles: false,
-        detail: {
-          initialValue: e.key
-        }
-      }));
-      return true;
-    }
+    enabled: canStartEditing,
+    handler: startEditingWithKey
   }]);
 
   // resizing