@jsenv/navi 0.29.18 → 0.29.20

package/dist/jsenv_navi.js

@@ -7990,12 +7990,40 @@ const requestPseudoStateCheck = (element, detail) => {
     );
   }
 };
-const NAVI_PSEUDO_STATE_CUSTOM_EVENT = "navi_pseudo_state";
-const dispatchPseudoStateCustomEvent = (element, value, oldValue) => {
-  dispatchInternalCustomEvent(element, NAVI_PSEUDO_STATE_CUSTOM_EVENT, {
-    pseudoState: value,
-    oldPseudoState: oldValue,
-  });
+/**
+ * Called back whenever `element`'s pseudo state changes.
+ *
+ * Kept beside the element rather than announced to the DOM: an element that
+ * changes state has at most one or two interested parties, each known by name
+ * (the box drawing it, the accent color reading its computed style), and a
+ * CustomEvent costs its allocation and its capture/bubble walk whether anyone
+ * listens or not — paid on every element, on every state change. A lookup that
+ * finds nothing costs nothing.
+ *
+ * @param {Element} element
+ * @param {(pseudoState: object, oldPseudoState: object) => void} callback
+ * @returns {() => void} teardown
+ */
+const subscribeToPseudoState = (element, callback) => {
+  let subscriberSet = pseudoStateSubscriberSetWeakMap.get(element);
+  if (!subscriberSet) {
+    subscriberSet = new Set();
+    pseudoStateSubscriberSetWeakMap.set(element, subscriberSet);
+  }
+  subscriberSet.add(callback);
+  return () => {
+    subscriberSet.delete(callback);
+  };
+};
+const pseudoStateSubscriberSetWeakMap = new WeakMap();
+const notifyPseudoStateSubscribers = (element, value, oldValue) => {
+  const subscriberSet = pseudoStateSubscriberSetWeakMap.get(element);
+  if (!subscriberSet) {
+    return;
+  }
+  for (const subscriber of subscriberSet) {
+    subscriber(value, oldValue);
+  }
 };
 
 const PSEUDO_CLASSES = {};
@@ -8809,7 +8837,7 @@ const initPseudoStyles = (
   const onStateChange = (value, oldValue) => {
     effect?.(value, oldValue);
     if (elementListeningPseudoState) {
-      dispatchPseudoStateCustomEvent(
+      notifyPseudoStateSubscribers(
         elementListeningPseudoState,
         value,
         oldValue,
@@ -8892,11 +8920,12 @@ const initPseudoStyles = (
     onStateChange(state, oldState);
   };
 
-  element.addEventListener(NAVI_PSEUDO_STATE_CUSTOM_EVENT, (event) => {
-    const oldState = event.detail.oldPseudoState;
-    state = event.detail.pseudoState;
-    onStateChange(state, oldState);
-  });
+  addTeardown(
+    subscribeToPseudoState(element, (pseudoState, oldPseudoState) => {
+      state = pseudoState;
+      onStateChange(state, oldPseudoState);
+    }),
+  );
   element.addEventListener("navi_pseudo_state_request_check", () => {
     checkPseudoClasses();
   });
@@ -9014,18 +9043,7 @@ const updateStyle = (element, style, preventInitialTransition) => {
       styleKeySetToApply = new Set(styleKeySet);
       styleKeySetToApply.delete("transition");
     }
-    requestAnimationFrame(() => {
-      if (elementTransitionWeakMap.has(element)) {
-        const transitionToRestore = elementTransitionWeakMap.get(element);
-        if (transitionToRestore === undefined) {
-          element.style.transition = "";
-        } else {
-          element.style.transition = transitionToRestore;
-        }
-        elementTransitionWeakMap.delete(element);
-      }
-      elementRenderedWeakSet.add(element);
-    });
+    afterFirstFrame(element);
   }
 
   // Apply all styles normally (excluding transition during anti-flicker)
@@ -9056,6 +9074,39 @@ const updateStyle = (element, style, preventInitialTransition) => {
   styleKeySetWeakMap.set(element, styleKeySet);
 };
 
+// One frame for every element waiting for its first one, not one frame each.
+// What this owes each element — put back the transition suppressed above, and
+// remember it has now been painted once — is a few microseconds, while asking
+// the browser for a frame costs more than that, and a page mounting thousands of
+// boxes asks thousands of times in the same tick. A Set, so an element styled
+// twice before the frame arrives is still one entry.
+const elementSetWaitingFirstFrame = new Set();
+let firstFrameScheduled = false;
+const afterFirstFrame = (element) => {
+  elementSetWaitingFirstFrame.add(element);
+  if (firstFrameScheduled) {
+    return;
+  }
+  firstFrameScheduled = true;
+  requestAnimationFrame(() => {
+    firstFrameScheduled = false;
+    const elements = [...elementSetWaitingFirstFrame];
+    elementSetWaitingFirstFrame.clear();
+    for (const element of elements) {
+      if (elementTransitionWeakMap.has(element)) {
+        const transitionToRestore = elementTransitionWeakMap.get(element);
+        if (transitionToRestore === undefined) {
+          element.style.transition = "";
+        } else {
+          element.style.transition = transitionToRestore;
+        }
+        elementTransitionWeakMap.delete(element);
+      }
+      elementRenderedWeakSet.add(element);
+    }
+  });
+};
+
 /**
  * Keeps a DOM element in sync with `syncElement(el)` whenever syncElement changes.
  * - If element is already mounted: runs syncElement immediately during render.
@@ -11465,9 +11516,12 @@ const useAccentColorAttributes = (
       }
     };
     updateAttributes();
-    el.addEventListener(NAVI_PSEUDO_STATE_CUSTOM_EVENT, updateAttributes);
+    const unsubscribeFromPseudoState = subscribeToPseudoState(
+      el,
+      updateAttributes,
+    );
     return () => {
-      el.removeEventListener(NAVI_PSEUDO_STATE_CUSTOM_EVENT, updateAttributes);
+      unsubscribeFromPseudoState();
       el.removeAttribute(LIGHT_ACCENT_ATTRIBUTE);
       el.removeAttribute(VERY_LIGHT_ACCENT_ATTRIBUTE);
       el.removeAttribute(DARK_CONTRAST_ATTRIBUTE);
@@ -12491,10 +12545,17 @@ const createAction = (callback, rootOptions = {}) => {
       action.debug(`${action}.prerun(${stringifyForDisplay(options)})`);
       return dispatchSingleAction(action, "prerun", options);
     };
+    /**
+     * Requests the action's data. An action that is already RUNNING or
+     * COMPLETED already has it, so the request is a no-op there: use `rerun()`
+     * to force a fresh run ("refresh", "check now", any explicit user intent to
+     * go back to the network).
+     */
     const run = (options) => {
       action.debug(`${action}.run(${stringifyForDisplay(options)})`);
       return dispatchSingleAction(action, "run", options);
     };
+    /** Resets the action and runs it again, whatever state it is in. */
     const rerun = (options) => {
       action.debug(`${action}.rerun(${stringifyForDisplay(options)})`);
       return dispatchSingleAction(action, "rerun", options);
@@ -17891,6 +17952,10 @@ const useExecuteAction = (
  */
 
 const CLICK_TO_EXPAND_SELECTOR = "summary, [aria-expanded]";
+// A popup is written inside whatever opened it, but it is not part of it on
+// screen: a control inside a popup must not be read as a click on the region
+// the popup happens to be nested in.
+const POPUP_SELECTOR = "[navi-control='popover'], [navi-control='dialog']";
 
 /**
  * Cancels `event` when the control consumed a click that a surrounding
@@ -17916,13 +17981,29 @@ const preventClickToExpand = (element, event) => {
   }
   // From the parent: a control that opens something carries its own
   // `aria-expanded` and would find itself.
-  const clickToExpandRegion = parentElement.closest(CLICK_TO_EXPAND_SELECTOR);
+  const clickToExpandRegion = findClickToExpandRegion(parentElement);
   if (!clickToExpandRegion) {
     return;
   }
   event.preventDefault();
 };
 
+const findClickToExpandRegion = (element) => {
+  let ancestor = element;
+  while (ancestor) {
+    // Tested first: a popup carries `aria-expanded` of its own, so it would
+    // otherwise pass for the region containing its own content.
+    if (ancestor.matches(POPUP_SELECTOR)) {
+      return null;
+    }
+    if (ancestor.matches(CLICK_TO_EXPAND_SELECTOR)) {
+      return ancestor;
+    }
+    ancestor = ancestor.parentElement;
+  }
+  return null;
+};
+
 const clickDefaultActionIsInert = (element, event) => {
   if (!isInertOnClick(element)) {
     return false;
@@ -22470,6 +22551,20 @@ const useControlProps = (props, {
     uiStateController
   }];
 };
+/**
+ * Whether the caller has told this control what it holds. Three ways, and only
+ * three — the controlled `value`, the uncontrolled `defaultValue`, a bound
+ * `signal` — the same three createControlInfo below reads, in that precedence
+ * order, to seed the state.
+ *
+ * None of them and the control starts with nothing: whatever it ends up holding
+ * has to come from somewhere else — a parent form distributing its own value,
+ * or, for a picker, the control sitting in its popup (see
+ * useUIFacadeStateController). Anyone who needs to know whether a control can
+ * answer for itself before anything mounts asks this rather than re-listing the
+ * props, which is how `signal` came to be forgotten.
+ */
+const isControlValueGivenByProps = props => Object.hasOwn(props, "value") || Object.hasOwn(props, "defaultValue") || Object.hasOwn(props, "signal");
 const createControlInfo = (props, {
   controlType
 }) => {
@@ -29754,37 +29849,14 @@ const getActionResultProperties = (action) => {
   return actionResultPropertiesMap.get(action);
 };
 
-/*
- * Default autorerun behavior explanation:
- *  GET: false (RECOMMENDED)
- *  What happens:
- *  - GET actions are reset by DELETE operations (not rerun)
- *  - DELETE operation on the displayed item would display nothing in the UI (action is in IDLE state)
- *  - PUT/PATCH operations update UI via signals, no rerun needed
- *  - This approach minimizes unnecessary API calls
- *
- *  How to handle:
- *  - Applications can provide custom UI for deleted items (e.g., "Item not found")
- *  - Or redirect users to appropriate pages (e.g., back to list view)
- *
- *  Alternative (NOT RECOMMENDED):
- *  - Use GET: ["DELETE"] to rerun and display 404 error received from backend
- *  - Poor UX: users expect immediate feedback, not loading + error state
- *
- *  GET_MANY: ["POST"]
- *  - POST: New items may or may not appear in lists (depends on filters, pagination, etc.)
- *    Backend determines visibility better than client-side logic
- *  - DELETE: Excluded by default because:
- *    • UI handles deletions via store signals (selectAll filters out deleted items)
- *    • DELETE operations rarely change list content beyond item removal
- *    • Avoids unnecessary API calls (can be overridden if needed)
- */
+// PUT/PATCH results update the UI through the store, and DELETE resets the GET
+// instead of rerunning it, so a GET rerun would only ever cost a request.
+// A POST is the one case the client cannot decide alone: whether a new item
+// belongs to a list depends on filters/pagination the backend owns.
+// Rationale in full, plus when to override: docs/list_refresh.md
 const defaultRerunOn = {
   GET: false,
-  GET_MANY: [
-    "POST",
-    // "DELETE"
-  ],
+  GET_MANY: ["POST"],
 };
 
 // This handles ALL resource lifecycle logic (rerun/reset) across all resources
@@ -46296,7 +46368,7 @@ const PickerCustom = props => {
       // opens anything. Told a value — even an empty one — the picker owns it
       // and pushes it down instead, leaving the popup free to build its
       // content only when it is first opened (see popup_content_mount.js).
-      mountWhenClosed: !Object.hasOwn(props, "value") && !Object.hasOwn(props, "defaultValue"),
+      mountWhenClosed: !isControlValueGivenByProps(props),
       // Not on pickerProps (the trigger): commands.js's own
       // resolveClosestExpandable() does `el.closest("[aria-expanded]")` to
       // find where to dispatch navi_request_open/navi_request_close — and