@jsenv/navi 0.29.18 → 0.29.19

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);
@@ -22470,6 +22524,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
 }) => {
@@ -46296,7 +46364,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