@jsenv/navi 0.29.454 → 0.29.456

package/dist/dev/jsenv_navi.js

@@ -33755,9 +33755,33 @@ const pushHeadThemeColors = (themeColors) => {
   };
 };
 
+/**
+ * What a popup asks of the colour while it is open: its `themeColor` prop,
+ * else the `--navi-popup-theme-color` it inherits — where the choice goes
+ * when it is the app's, or a part of the app's, rather than one popup's.
+ *
+ * @param {Element} element - The popup element.
+ * @param {string|false} [themeColor] - The popup's prop.
+ * @returns {string} `"auto"` paints what the popup lays over the top edge,
+ *   `"none"` leaves the colour as it is, anything else is a colour forcing it.
+ */
+const readPopupThemeColor = (element, themeColor) => {
+  if (themeColor === false) {
+    return "none";
+  }
+  if (themeColor) {
+    return themeColor;
+  }
+  const token = getComputedStyle(element)
+    .getPropertyValue("--navi-popup-theme-color")
+    .trim();
+  return token || "auto";
+};
+
 /**
  * @param {object} paint
- * @param {string} [paint.themeColor] - Forces the colour, nothing is painted.
+ * @param {string} paint.themeColor - `"auto"` paints the two colours below,
+ *   a colour forces it and nothing is painted.
  * @param {string|null} [paint.backdropColor] - Laid over the page's colour.
  * @param {string|null} [paint.surfaceColor] - Laid over that, for a popup
  *   flush with the top edge.
@@ -33769,7 +33793,7 @@ const pushPopupThemeColor = ({
   surfaceColor,
 }) => {
   let layer;
-  if (themeColor) {
+  if (themeColor !== "auto") {
     layer = { color: themeColor };
   } else {
     const paints = [];
@@ -40613,18 +40637,20 @@ const callLiftOverCallbacks = () => {
  *
  * 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.
+ * 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 clear cross does the same through `--navi-send` (see --navi-clear in
- * commands.js), and so does not come through here.
+ * 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.
  */
 
 
@@ -40647,6 +40673,13 @@ const sendClosedPickerChange = (element, { event, name, requester }) => {
   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 });
@@ -41060,20 +41093,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, {
@@ -41084,46 +41103,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,
         });
       },
     });
@@ -41863,6 +41847,7 @@ registerNaviCommand("--navi-select", (source, event) => {
       return dispatchCustomEvent(target, "navi_request_select", {
         event,
         id: resolveCommandValue(source, event),
+        requester: source,
       });
     },
   };
@@ -41879,6 +41864,7 @@ registerNaviCommand("--navi-unselect", (source, event) => {
       return dispatchCustomEvent(target, "navi_request_unselect", {
         event,
         id: resolveCommandValue(source, event),
+        requester: source,
       });
     },
   };
@@ -45782,12 +45768,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
@@ -67952,16 +67932,17 @@ const css$E = /* css */`
  *   `saturate()`/`grayscale()` work too. How far what is behind withdraws is
  *   a question of paint, not of what an outside click does — a backdrop that
  *   closes can blur.
- * @param {string|false} [props.themeColor] - The colour the browser paints
- *   above the page (`<meta name="theme-color">`: Chrome's address bar on
- *   Android, an installed app's status bar) while this dialog is open.
- *   Left out, it is what the dialog lays over the top edge of the screen: its
+ * @param {"auto"|string|false} [props.themeColor] - The colour the browser
+ *   paints above the page (`<meta name="theme-color">`: Chrome's address bar
+ *   on Android, an installed app's status bar) while this dialog is open.
+ *   `"auto"` is what the dialog lays over the top edge of the screen: its
  *   backdrop over the colour the page asked for (`<Head>`), and its own
  *   background over that when it is flush with the top edge
  *   (`marginWithContainer={0}` with `expand`/`expandY` or a top
  *   `positionArea`). A colour forces it, for a surface whose colour cannot be
  *   read (an image, a gradient); `false` leaves the page's colour alone.
- *   `layer="top"` only.
+ *   Left out, the `--navi-popup-theme-color` token decides, `"auto"` unless
+ *   the app says otherwise. `layer="top"` only.
  * @param {boolean} [props.scrollCapture] - Traps scroll gestures inside the
  *   dialog so the page/container behind it can't scroll while it's open.
  *   A `layer="local"` dialog always locks its own positioned ancestor's
@@ -69131,12 +69112,15 @@ const useDialogProps = props => {
     // What the browser paints above the page goes with what is laid over its
     // top edge, from the start of the opening to the start of the closing: a
     // local dialog lays nothing there.
-    if (isTopLayer && themeColor !== false) {
-      addCleanup(pushPopupThemeColor({
-        themeColor,
-        backdropColor: backdrop ? readBackdropColor(dialogEl) : null,
-        surfaceColor: flushEdges.top ? getComputedStyle(dialogEl).backgroundColor : null
-      }));
+    if (isTopLayer) {
+      const popupThemeColor = readPopupThemeColor(dialogEl, themeColor);
+      if (popupThemeColor !== "none") {
+        addCleanup(pushPopupThemeColor({
+          themeColor: popupThemeColor,
+          backdropColor: backdrop ? readBackdropColor(dialogEl) : null,
+          surfaceColor: flushEdges.top ? getComputedStyle(dialogEl).backgroundColor : null
+        }));
+      }
     }
     const cancelOpenInteractionSuppression = !silent && hasCssTransitionAnimation ? suppressPointerEventsDuringTransition(dialogEl) : null;
     // Handing the focus to a field is what raises the on-screen keyboard, and
@@ -70002,12 +69986,14 @@ const css$D = /* css */`
  *   `saturate()`/`grayscale()` work too. How far what is behind withdraws is
  *   a question of paint, not of what an outside click does — a backdrop that
  *   closes can blur.
- * @param {string|false} [props.themeColor] - The colour the browser paints
- *   above the page (`<meta name="theme-color">`: Chrome's address bar on
- *   Android, an installed app's status bar) while this popover is open.
- *   Left out, it is the backdrop laid over the colour the page asked for
+ * @param {"auto"|string|false} [props.themeColor] - The colour the browser
+ *   paints above the page (`<meta name="theme-color">`: Chrome's address bar
+ *   on Android, an installed app's status bar) while this popover is open.
+ *   `"auto"` is the backdrop laid over the colour the page asked for
  *   (`<Head>`), and the page's colour when there is no backdrop. A colour
- *   forces it; `false` leaves the page's colour alone. `layer="top"` only.
+ *   forces it; `false` leaves the page's colour alone. Left out, the
+ *   `--navi-popup-theme-color` token decides, `"auto"` unless the app says
+ *   otherwise. `layer="top"` only.
  * @param {boolean} [props.scrollCapture] - Traps scroll gestures inside the
  *   popover so the page/container behind it can't scroll while it's open.
  * @param {boolean} [props.focusCapture] - Traps Tab navigation inside the
@@ -70968,11 +70954,14 @@ const usePopoverProps = props => {
     // What the browser paints above the page goes with what is laid over its
     // top edge, from the start of the opening to the start of the closing: a
     // local popover's backdrop stops at its container.
-    if (isTopLayer && themeColor !== false) {
-      addCleanup(pushPopupThemeColor({
-        themeColor,
-        backdropColor: backdropEl ? readBackdropColor(backdropEl) : null
-      }));
+    if (isTopLayer) {
+      const popupThemeColor = readPopupThemeColor(popoverEl, themeColor);
+      if (popupThemeColor !== "none") {
+        addCleanup(pushPopupThemeColor({
+          themeColor: popupThemeColor,
+          backdropColor: backdropEl ? readBackdropColor(backdropEl) : null
+        }));
+      }
     }
     const cancelOpenInteractionSuppression = !silent && hasCssTransitionAnimation ? suppressPointerEventsDuringTransition(popoverEl) : null;
     // autoFocus={false}: opening moves no focus at all — whoever has the
@@ -71390,10 +71379,11 @@ const css$C = /* css */`@layer navi {
  *   identically): the wash the backdrop paints over what is behind.
  * @param {string} [props.backdropFilter] - Forwarded as-is: what that wash
  *   does to the picture underneath, `"blur(4px)"` and the like.
- * @param {string|false} [props.themeColor] - Forwarded as-is: the colour the
- *   browser paints above the page while the popup is open, worked out from
- *   what it lays over the top edge when left out. A colour forces it, `false`
- *   leaves the page's colour alone.
+ * @param {"auto"|string|false} [props.themeColor] - Forwarded as-is: the
+ *   colour the browser paints above the page while the popup is open.
+ *   `"auto"` works it out from what the popup lays over the top edge, a
+ *   colour forces it, `false` leaves the page's colour alone. Left out, the
+ *   `--navi-popup-theme-color` token decides.
  * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|`slide-from-${string}`|"expanding"|`expand-${string}`|"lifting"|{open: boolean|"auto"|"fading"|"scaling"|"sliding"|`slide-from-${string}`, close: "lifting"}} [props.animation]
  *   - Forwarded to whichever renders — see either component's own doc.
  *   `"expanding"`/`"expand-*"` are `Popover`'s own; `"lifting"` and
@@ -84127,7 +84117,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) {
@@ -84144,7 +84135,8 @@ const requestPickerListEntry = (pickerEl, pickerInputEl, e, goal) => {
       });
       sendClosedPickerChange(pickerInputEl, {
         event: e,
-        name: goal
+        name: goal,
+        requester
       });
     }
   });
@@ -84618,7 +84610,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