@jsenv/navi 0.29.453 → 0.29.455

package/dist/dev/jsenv_navi.js

@@ -40608,6 +40608,59 @@ const callLiftOverCallbacks = () => {
   });
 };
 
+/**
+ * What a gesture changes in a closed picker is sent at once.
+ *
+ * A picker's `action` waits for its popup to close: what is done in there is
+ * one answer, given when the person is done. A change made while the popup is
+ * closed — the clear cross, a chip's cross, a paste, a cut, a value proposed
+ * from beside it (`--navi-update`) — has no close coming, so nothing would ever
+ * send it: the value moves on screen and the record behind it stays. Each of
+ * those gestures calls this right after setting the value; a failing action
+ * puts the value back (resetOnError), as it does after a close.
+ *
+ * Called by gestures only. A value set without one — a bound signal followed, a
+ * cancel or a failure rolled back — is the picker being told, not asked, which
+ * is why this is not a reaction to every value set on a closed picker.
+ *
+ * The action is requested the way the close requests it, not through
+ * `--navi-send`: a send also answers the surface around the control (a slide
+ * moves on, an open dialog closes — see resolveAfterSend in commands.js), and a
+ * cross pressed on a picker in a dialog is not the dialog being answered.
+ */
+
+
+const sendClosedPickerChange = (element, { event, name, requester }) => {
+  const controlHost = findControlHost(element) || element;
+  const controlRoot = findControlRoot(controlHost);
+  if (!controlRoot || controlRoot.getAttribute("navi-control") !== "picker") {
+    return;
+  }
+  if (controlRoot.getAttribute("aria-expanded") === "true") {
+    return;
+  }
+  const { props } = controlHost.__uiStateController__;
+  if (!props.action) {
+    return;
+  }
+  // A picker that picks nothing (`type="confirm"`, a menu of actions) holds no
+  // value its action would be sending: that action is the yes of its popup,
+  // and a paste landing on the trigger must not say it.
+  if (props.picksNothing) {
+    return;
+  }
+  // A source with an action of its own made the request already: `<Button
+  // action={remove} command="--navi-clear">` runs the removal, and the command
+  // that follows only brings the picker in line with it. Sending the picker's
+  // action on top would ask twice.
+  if (requester?.__uiStateController__?.props.action) {
+    return;
+  }
+  // `requester`: the source of a command may have claimed the press to send
+  // this very change (see isAimedAtSelfInteractionsBelow).
+  dispatchRequestAction(controlHost, { event, name, requester });
+};
+
 /**
  * Runs a navi command from JS. It is the LAST RESORT: the attributes say the
  * same thing declaratively and go through this very function, so a press that
@@ -40999,6 +41052,11 @@ registerNaviCommand("--navi-update", (source, event, { argument }) => {
             event,
             behavior: argument,
           });
+          sendClosedPickerChange(target, {
+            event,
+            name: "--navi-update",
+            requester: source,
+          });
         },
       });
     },
@@ -41011,20 +41069,6 @@ registerNaviCommand("--navi-clear", (source, event) => {
     return undefined;
   }
   const fromInput = source.closest(`[navi-control="input"]`);
-  // A control that commits on an explicit send — a picker, whose list sends the
-  // moment a value is chosen — has nothing that would commit a clear: its
-  // action never runs on a ui state change. Left alone, the field goes empty
-  // while the caller still holds the value it gave, and renders it right back.
-  //
-  // Unless the source committed the clear itself: a clear button given its own
-  // action (`<Button action={remove} command="--navi-clear">`) already made the
-  // request — the ui state is being brought in line with what just happened, and
-  // sending the picker's own action on top would ask twice.
-  const sourceController = source.__uiStateController__;
-  const fromSendOnlyControl = Boolean(
-    source.closest?.(`[navi-control=picker]`) &&
-    !sourceController?.props.action,
-  );
 
   const performClear = (clearEvent) => {
     dispatchRequestInteraction(target, {
@@ -41035,46 +41079,11 @@ registerNaviCommand("--navi-clear", (source, event) => {
       requester: source,
       prevented: () => clearEvent.preventDefault(),
       allowed: () => {
-        // What the control holds, before it holds nothing: the clear is
-        // optimistic — the field empties now and the send that commits it may
-        // still fail — so what it emptied has to be kept to be put back.
-        const uiStateBefore = getUIStateFromElement(target);
         dispatchRequestClearUIState(target, clearEvent);
-        if (!fromSendOnlyControl) {
-          return;
-        }
-        // After the clear, never before: the action is bound to the ui
-        // state signal, so this sends the value the control now holds.
-        const actionHost = findControlHost(target) || target;
-        const completion = watchActionCompletion(actionHost, () => {
-          triggerNaviCommand(source, "--navi-send", clearEvent, {
-            optional: true,
-          });
-        });
-        completion.whenSettled(({ error, aborted }) => {
-          if (!error && !aborted) {
-            return;
-          }
-          // The removal did not happen, so the field must stop saying it did.
-          // The error itself stays where the action put it — on the control,
-          // which is still there, unlike the cross that has just gone with the
-          // value it cleared (see addErrorMessage in use_execute_action.js).
-          //
-          // Put back from the inside ("clear_rollback" is an internal event
-          // type, see ui_state_controller.js) rather than asked for the way a
-          // user would: nobody acted, the control is being returned to the
-          // state its caller still holds. Asked from the outside it would be
-          // answered with "this element is busy" — the action is still
-          // settling — over the very error that explains why the value is back.
-          const controller = actionHost.__uiStateController__;
-          if (!controller) {
-            return;
-          }
-          const rollbackEvent = new CustomEvent("clear_rollback", {
-            detail: {},
-          });
-          chainEvent(rollbackEvent, clearEvent);
-          controller.setUIState(uiStateBefore, rollbackEvent);
+        sendClosedPickerChange(target, {
+          event: clearEvent,
+          name: "--navi-clear",
+          requester: source,
         });
       },
     });
@@ -41814,6 +41823,7 @@ registerNaviCommand("--navi-select", (source, event) => {
       return dispatchCustomEvent(target, "navi_request_select", {
         event,
         id: resolveCommandValue(source, event),
+        requester: source,
       });
     },
   };
@@ -41830,6 +41840,7 @@ registerNaviCommand("--navi-unselect", (source, event) => {
       return dispatchCustomEvent(target, "navi_request_unselect", {
         event,
         id: resolveCommandValue(source, event),
+        requester: source,
       });
     },
   };
@@ -45733,12 +45744,6 @@ const INTERNAL_EVENT_SET = new Set([
   // on registration, and group pushing value/defaultValue to children on registerChild.
   // Equivalent to defaultValue initialization: no uiAction, no commands, no parent notification.
   "initial_state_push",
-  // navi undoing its own optimistic write: the clear cross emptied the control
-  // before the send that commits it, the send failed, and the value it emptied
-  // goes back where it was (see the --navi-clear command). Nothing acted — the
-  // control is being put back on the state the caller still holds — so this
-  // must not fire a uiAction, a command, or a report on the way.
-  "clear_rollback",
   // A picker's popup closed on a cancel (the no button, Escape, a click
   // outside): what the picker held at open goes back. Nobody acted — no
   // command — but the value really did move back, so uiAction and the parent
@@ -52062,11 +52067,15 @@ const LinkWithRoute = ({
     also: currentAlso
   });
   const innerCurrent = current || linkMatching;
+
+  // What a childless link shows is LinkPlain's call (hrefFallback); a route
+  // only says it the way its pattern writes it, not as the resolved href.
   return jsx(Link, {
     href: url,
+    hrefText: route.buildRelativeUrl(routeParams),
     current: innerCurrent,
     ...rest,
-    children: children || route.buildRelativeUrl(routeParams)
+    children: children
   });
 };
 const LinkPlain = props => {
@@ -52092,6 +52101,7 @@ const LinkPlain = props => {
     revealOnInteraction = false,
     stretch,
     hrefFallback = !anchor,
+    hrefText = href,
     routeTransition,
     pressableDuringRouteTransition,
     replace,
@@ -52227,7 +52237,7 @@ const LinkPlain = props => {
   const documentRequest = isDocument ? {
     [LINK_DOCUMENT_ATTRIBUTE]: ""
   } : null;
-  const innerChildren = children || (hrefFallback ? href : children);
+  const innerChildren = children || (hrefFallback ? hrefText : children);
   const startIconEl = startIcon;
   const endIconEl = innerEndIcon;
 
@@ -52278,6 +52288,7 @@ const LinkPlain = props => {
     startIcon: undefined,
     endIcon: undefined,
     hrefFallback: undefined,
+    hrefText: undefined,
     routeTransition: undefined,
     pressableDuringRouteTransition: undefined,
     replace: undefined,
@@ -82760,7 +82771,9 @@ const PickerArrayUI = /*#__PURE__*/asPickerOwnUI(() => {
 /**
  * One value the picker holds, drawn as a chip with a cross that takes it back
  * out. Sits wherever the application draws what was picked — on the picker's
- * façade (`ui`) or inside its popup — and both behave the same.
+ * façade (`ui`) or inside its popup. Inside the open popup the removal waits
+ * for the close like any change made there; pressed while the popup is closed
+ * it is the whole gesture, and the picker's `action` runs at once.
  *
  * The cross asks with `--navi-unselect` rather than writing a new list, and it
  * asks the picker — which holds what was picked, and hands it down to whatever
@@ -83792,15 +83805,25 @@ const PickerButton = props => {
                 const displayText = pickerEl.querySelector(".navi_picker_value")?.textContent ?? String(uiState);
                 e.clipboardData.setData("text/plain", displayText);
                 e.clipboardData.setData("application/x-navi", JSON.stringify(uiState));
+                e.preventDefault();
+                // A picker that asks before its cross clears anything is not
+                // emptied by a keystroke without the question: the cut copies,
+                // and the value stays.
+                if (clearConfirm !== undefined) {
+                  return;
+                }
                 // the clear ui state part need control to be interactable
                 dispatchRequestInteraction(pickerEl, {
                   event: e,
                   name: "cut",
                   allowed: () => {
                     dispatchRequestClearUIState(inputRef.current, e);
+                    sendClosedPickerChange(inputRef.current, {
+                      event: e,
+                      name: "cut"
+                    });
                   }
                 });
-                e.preventDefault();
               },
               onPaste: e => {
                 const pickerEl = ref.current;
@@ -83826,6 +83849,10 @@ const PickerButton = props => {
                     dispatchRequestSetUIState(inputRef.current, pasteValue, {
                       event: e
                     });
+                    sendClosedPickerChange(inputRef.current, {
+                      event: e,
+                      name: "paste"
+                    });
                   }
                 });
                 e.preventDefault();
@@ -84056,7 +84083,8 @@ const requestPickerListEntry = (pickerEl, pickerInputEl, e, goal) => {
     return;
   }
   const {
-    id: entry
+    id: entry,
+    requester
   } = e.detail;
   const isThere = uiState.some(item => compareTwoJsValues(item, entry));
   if (goal === "select" ? isThere : !isThere) {
@@ -84071,6 +84099,11 @@ const requestPickerListEntry = (pickerEl, pickerInputEl, e, goal) => {
       dispatchRequestSetUIState(pickerInputEl, uiStateNext, {
         event: e
       });
+      sendClosedPickerChange(pickerInputEl, {
+        event: e,
+        name: goal,
+        requester
+      });
     }
   });
 };
@@ -84543,7 +84576,9 @@ const PickerFirstResolver = props => {
  *   the `<Picker type="confirm">` the cross then is, plain text or JSX. Asked
  *   BEFORE the ui state is emptied, so answering no leaves the field exactly
  *   as it was; answering yes clears and sends, and the picker's own action
- *   receives the cleared value like any other choice.
+ *   receives the cleared value like any other choice. A cut (Ctrl+X) on such a
+ *   picker copies the value and leaves it in place: no clear without the
+ *   question.
  * @param {"icon"|"headless"|"discrete"|"button"|"text"|"bare"|"picker"} [variant]
  *   How the trigger is drawn. `"button"` is a Button's drawing — surface,
  *   padding, a centered label, no chevron — and what a `type="confirm"` picker
@@ -96218,6 +96253,10 @@ const css$5 = /* css */`@keyframes navi_image_shimmer {
 `;
 const DEFAULT_PLACEHOLDER_LIGHT = "#d4d8dd";
 const DEFAULT_PLACEHOLDER_DARK = "#374151";
+// On an <img>, width/height describe the image: they stay HTML attributes.
+// Box would write them as inline styles, which beat every stylesheet rule, so
+// an image given its file's size (3840×2160) would overflow the box sizing it.
+const IMAGE_ATTRIBUTE_PROP_SET = new Set(["width", "height"]);
 
 /**
  * The props may come in any order: `src` and `srcset` reach the element after
@@ -96226,6 +96265,12 @@ const DEFAULT_PLACEHOLDER_DARK = "#374151";
  * decides whether to load when `src` is set, and an image whose `src` came
  * first loads, lazy or not.
  *
+ * @param {number} [props.width] - The image's width in pixels, written as the
+ *   `<img>` attribute, like `height`. Given both, the browser reserves the
+ *   aspect ratio before the bytes arrive. They size the element only while no
+ *   stylesheet rule does: a box that holds the image sizes it with CSS (or
+ *   `style`) and keeps the ratio.
+ * @param {number} [props.height] - The image's height in pixels, see `width`.
  * @param {string|false} [props.placeholderColor] - Background color shown while the image loads.
  *   Defaults to a light gray. Pass `false` to disable.
  * @param {boolean} [props.placeholderDark] - Use a dark default placeholder color,
@@ -96250,6 +96295,7 @@ const Image = ({
     ...rest,
     as: "img",
     baseClassName: "navi_image",
+    childPropSet: IMAGE_ATTRIBUTE_PROP_SET,
     "navi-placeholder": loadedRef.current ? undefined : "",
     style: {
       "--placeholder-color": resolvedPlaceholder || undefined,