@jsenv/navi 0.29.455 → 0.29.457

package/dist/dev/jsenv_navi.js

@@ -25189,10 +25189,9 @@ const useKeyboardShortcuts = (
     );
     shortcut.action = useAction(shortcut.action);
   }
-  const onKeyDown = createOnKeyDownForShortcutArray(
-    shortcuts,
-    shortcutActionIsBusyRef,
-  );
+  const onKeyDown = createOnKeyDownForShortcutArray(shortcuts, {
+    busyRef: shortcutActionIsBusyRef,
+  });
   useEffect(() => {
     const element = elementRef.current;
     if (!element) {
@@ -25210,7 +25209,10 @@ const useKeyboardShortcuts = (
   }, [shortcutDeps]);
 };
 
-const createOnKeyDownForShortcutArray = (shortcuts, busyRef) => {
+const createOnKeyDownForShortcutArray = (
+  shortcuts,
+  { busyRef, ownsTarget } = {},
+) => {
   const shortcutsCopy = [];
   for (const shortcutCandidate of shortcuts) {
     shortcutsCopy.push({
@@ -25256,10 +25258,20 @@ const createOnKeyDownForShortcutArray = (shortcuts, busyRef) => {
   }
 
   return (keyboardEvent) => {
-    return applyKeyboardShortcuts(shortcutsCopy, keyboardEvent);
+    return applyKeyboardShortcuts(shortcutsCopy, keyboardEvent, {
+      ownsTarget,
+    });
   };
 };
-const createOnKeyDownForShortcuts = (shortcuts) => {
+/**
+ * @param {object} shortcuts
+ * @param {object} [options]
+ * @param {(target: Element) => boolean} [options.ownsTarget] Whether a
+ *   descendant the key was pressed in is one the shortcuts speak for, so its
+ *   native behavior (the caret, typing) is theirs to take. Without it only the
+ *   listening element itself is; a descendant keeps every key it has a use for.
+ */
+const createOnKeyDownForShortcuts = (shortcuts, { ownsTarget } = {}) => {
   const shortcutsArray = [];
   for (const key of Object.keys(shortcuts)) {
     const value = shortcuts[key];
@@ -25271,16 +25283,18 @@ const createOnKeyDownForShortcuts = (shortcuts) => {
     }
     shortcutsArray.push(shortcut);
   }
-  return createOnKeyDownForShortcutArray(shortcutsArray);
+  return createOnKeyDownForShortcutArray(shortcutsArray, { ownsTarget });
 };
 
-const applyKeyboardShortcuts = (shortcuts, keyboardEvent) => {
+const applyKeyboardShortcuts = (shortcuts, keyboardEvent, { ownsTarget }) => {
   const currentTarget = keyboardEvent.currentTarget;
   const target = keyboardEvent.target;
   let canIntercept;
   if (target === currentTarget) {
     // the event occurs on the element itself so we are sure we won't interfere with native behaviors of child elements
     canIntercept = true;
+  } else if (ownsTarget && ownsTarget(target)) {
+    canIntercept = true;
   } else {
     // we need to check if the default action is something that we can allow to be intercepted
     const defaultAction = getKeyboardEventDefaultAction(keyboardEvent);
@@ -25498,6 +25512,17 @@ const isSameKey = (browserEventKey, key) => {
  * knows what "ctrl+backspace" means, which keys a control may take without
  * swallowing what the browser owed them, and which it may not.
  *
+ * The control's own element is the exception to that last part. `interactions`
+ * are set up on a field's outer box while the key goes down in its `<input>`,
+ * and that field is the control the declaration speaks for: an ArrowUp declared
+ * on a text field is the field saying what ArrowUp does there, not a container
+ * taking the caret from a field inside it. A field inside a box that declares
+ * keys for something else (a row, a list) keeps every key it has a use for.
+ *
+ * A declared key that matches takes the key: its default does not happen as
+ * well, whether the gate lets the interaction through or refuses it and says
+ * why — the same as a number field's arrows.
+ *
  * The interaction is dispatched under its full name, colon included, so
  * `findEvent(event, "keyboard:ctrl+backspace")` gets back to it — the shortcut
  * that asked is what the action wants to know, not that a key went down.
@@ -25514,9 +25539,12 @@ defineInteractionDetector({
     for (const type of types) {
       shortcuts[type.slice(KEYBOARD_PREFIX.length)] = (keyboardEvent) => {
         trigger(type, keyboardEvent);
+        keyboardEvent.preventDefault();
       };
     }
-    const onKeyDown = createOnKeyDownForShortcuts(shortcuts);
+    const onKeyDown = createOnKeyDownForShortcuts(shortcuts, {
+      ownsTarget: (target) => target === findNearestControlHost(element),
+    });
     element.addEventListener("keydown", onKeyDown);
     return () => {
       element.removeEventListener("keydown", onKeyDown);
@@ -33755,9 +33783,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 +33821,7 @@ const pushPopupThemeColor = ({
   surfaceColor,
 }) => {
   let layer;
-  if (themeColor) {
+  if (themeColor !== "auto") {
     layer = { color: themeColor };
   } else {
     const paints = [];
@@ -67908,16 +67960,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
@@ -69087,12 +69140,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
@@ -69958,12 +70014,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
@@ -70924,11 +70982,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
@@ -71346,10 +71407,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