@jsenv/navi 0.29.453 → 0.29.454

package/dist/dev/jsenv_navi.js

@@ -40608,6 +40608,50 @@ 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 — 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 clear cross does the same through `--navi-send` (see --navi-clear in
+ * commands.js), and so does not come through here.
+ */
+
+
+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;
+  }
+  // `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 +41043,11 @@ registerNaviCommand("--navi-update", (source, event, { argument }) => {
             event,
             behavior: argument,
           });
+          sendClosedPickerChange(target, {
+            event,
+            name: "--navi-update",
+            requester: source,
+          });
         },
       });
     },
@@ -52062,11 +52111,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 +52145,7 @@ const LinkPlain = props => {
     revealOnInteraction = false,
     stretch,
     hrefFallback = !anchor,
+    hrefText = href,
     routeTransition,
     pressableDuringRouteTransition,
     replace,
@@ -52227,7 +52281,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 +52332,7 @@ const LinkPlain = props => {
     startIcon: undefined,
     endIcon: undefined,
     hrefFallback: undefined,
+    hrefText: undefined,
     routeTransition: undefined,
     pressableDuringRouteTransition: undefined,
     replace: undefined,
@@ -82760,7 +82815,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 +83849,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 +83893,10 @@ const PickerButton = props => {
                     dispatchRequestSetUIState(inputRef.current, pasteValue, {
                       event: e
                     });
+                    sendClosedPickerChange(inputRef.current, {
+                      event: e,
+                      name: "paste"
+                    });
                   }
                 });
                 e.preventDefault();
@@ -84071,6 +84142,10 @@ const requestPickerListEntry = (pickerEl, pickerInputEl, e, goal) => {
       dispatchRequestSetUIState(pickerInputEl, uiStateNext, {
         event: e
       });
+      sendClosedPickerChange(pickerInputEl, {
+        event: e,
+        name: goal
+      });
     }
   });
 };
@@ -96218,6 +96293,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 +96305,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 +96335,7 @@ const Image = ({
     ...rest,
     as: "img",
     baseClassName: "navi_image",
+    childPropSet: IMAGE_ATTRIBUTE_PROP_SET,
     "navi-placeholder": loadedRef.current ? undefined : "",
     style: {
       "--placeholder-color": resolvedPlaceholder || undefined,