@jsenv/navi 0.29.395 → 0.29.397

package/dist/jsenv_navi.js

@@ -6227,6 +6227,9 @@ const findControlProxyTarget = (el) => {
   return document.getElementById(proxyFor);
 };
 
+// Shared: asked on every pseudo state change of every box, and almost always
+// empty.
+const NO_PROXIES = Object.freeze([]);
 /**
  * Given a real control element, returns every proxy that visually represents
  * it — a control can have more than one (an "enable"/"disable" button pair for
@@ -6241,11 +6244,11 @@ const findControlProxyTarget = (el) => {
  */
 const findControlProxies = (el) => {
   if (!el.id) {
-    return [];
+    return NO_PROXIES;
   }
   const proxyControllerSet = findProxyControllers(el.id);
   if (!proxyControllerSet) {
-    return [];
+    return NO_PROXIES;
   }
   const proxyElements = [];
   for (const proxyController of proxyControllerSet) {
@@ -6592,10 +6595,6 @@ const css$13 = /* css */ `
     border: none;
     outline: none; /* programmatic focus may land here briefly before being redirected to close button */
     opacity: 0;
-    /* opacity only: the placement lives in the translate property, which
-       applyNewPosition (visible_rect.js) owns and animates itself through the
-       Web Animations API, same mechanism Popover/Dialog use. */
-    transition: opacity 0.2s ease-in-out;
     cursor: initial; /* Do not inherit element cursor, inside the element but should use regular cursor */
     pointer-events: auto; /* Must be interactive to be closabled (overrid list item pointer-events none for instance)  */
     overflow: visible;
@@ -6604,6 +6603,15 @@ const css$13 = /* css */ `
       position: absolute;
     }
 
+    /* Armed after the first placement: the first show answers a tap or a
+       click and appears at once, the fade is for the anchor scrolling out of
+       view and back. Opacity only: the placement lives in the translate
+       property, which applyNewPosition (visible_rect.js) owns and animates
+       itself through the Web Animations API, same mechanism Popover/Dialog use. */
+    &[data-placed] {
+      transition: opacity 0.12s ease-out;
+    }
+
     &[data-status="success"] {
       --x-callout-status-color: var(--callout-success-color);
     }
@@ -8031,6 +8039,13 @@ const positionCallout = (
         calloutFrameElement.innerHTML = generateSvgWithoutArrow(width, height);
         calloutElement.style.opacity = 1;
       }
+      if (!calloutElement.hasAttribute("data-placed")) {
+        // Style flush between the first opacity write and arming the
+        // transition, so that first write lands unanimated in the same frame.
+        // eslint-disable-next-line no-unused-expressions
+        getComputedStyle(calloutElement).opacity;
+        calloutElement.setAttribute("data-placed", "");
+      }
       applyNewPosition(calloutElement, position);
     },
   );
@@ -10602,15 +10617,17 @@ const resolveInteractions = (interactions) => {
     }
   }
   const kept = {};
+  let keptSome = false;
   for (const type of Object.keys(resolved)) {
     if (resolved[type]) {
       kept[type] = resolved[type];
+      keptSome = true;
     }
   }
-  resolved = kept;
-  if (Object.keys(resolved).length === 0) {
+  if (!keptSome) {
     return null;
   }
+  resolved = kept;
   return resolved;
 };
 
@@ -21549,8 +21566,7 @@ const getStyleToApply = (styles, pseudoState, pseudoNamedStyles) => {
   }
   let style = styles;
   for (const pseudoKey of Object.keys(pseudoNamedStyles)) {
-    const requiredStates = getPseudoKeyRequiredStates(pseudoKey);
-    if (!requiredStates.every((state) => pseudoState[state])) {
+    if (!hasEveryState(pseudoState, getPseudoKeyRequiredStates(pseudoKey))) {
       continue;
     }
     if (style === styles) {
@@ -21605,6 +21621,14 @@ const getPseudoKeyRequiredStates = (pseudoKey) => {
   pseudoKeyRequiredStatesMap.set(pseudoKey, requiredStates);
   return requiredStates;
 };
+const hasEveryState = (pseudoState, states) => {
+  for (const state of states) {
+    if (!pseudoState[state]) {
+      return false;
+    }
+  }
+  return true;
+};
 
 // element → the style object last written to it, so the next one is written
 // as a difference: the values that changed, the keys it no longer has.
@@ -21682,7 +21706,7 @@ const updateStyle = (element, style, preventInitialTransition) => {
 // 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 elementSetWaitingFirstFrame = new Set();
 let firstFrameScheduled = false;
 const afterFirstFrame = (element) => {
   elementSetWaitingFirstFrame.add(element);
@@ -21692,8 +21716,8 @@ const afterFirstFrame = (element) => {
   firstFrameScheduled = true;
   requestAnimationFrame(() => {
     firstFrameScheduled = false;
-    const elements = [...elementSetWaitingFirstFrame];
-    elementSetWaitingFirstFrame.clear();
+    const elements = elementSetWaitingFirstFrame;
+    elementSetWaitingFirstFrame = new Set();
     for (const element of elements) {
       if (elementTransitionWeakMap.has(element)) {
         const transitionToRestore = elementTransitionWeakMap.get(element);
@@ -22005,6 +22029,7 @@ const readCSSVarEntry = entry => {
   }
   return [entry, null];
 };
+const readCSSVarName = entry => Array.isArray(entry) ? entry[0] : entry;
 // When only pseudoStateSelector is set (no visualSelector), the box owns its
 // visual identity. Only event handlers and these explicit props are forwarded
 // to the inner semantic/interactive child element.
@@ -22114,18 +22139,23 @@ const Box = props => {
   // exception — a closure is new on every render — so they are compared by
   // name only and put back fresh, see withCurrentHandlers.
   const renderMemoRef = useRef(null);
+  if (!renderMemoRef.current) {
+    renderMemoRef.current = {
+      props: null,
+      parentBoxFlow: null,
+      computed: null
+    };
+  }
   const renderMemo = renderMemoRef.current;
   let computed;
-  if (renderMemo && renderMemo.parentBoxFlow === parentBoxFlow && arePropsEquivalent(renderMemo.props, computeProps)) {
+  if (renderMemo.computed && renderMemo.parentBoxFlow === parentBoxFlow && arePropsEquivalent(renderMemo.props, computeProps)) {
     computed = withCurrentHandlers(renderMemo.computed, computeProps);
   } else {
     computed = computeBox(computeProps, parentBoxFlow);
   }
-  renderMemoRef.current = {
-    props: computeProps,
-    parentBoxFlow,
-    computed
-  };
+  renderMemo.props = computeProps;
+  renderMemo.parentBoxFlow = parentBoxFlow;
+  renderMemo.computed = computed;
   const {
     TagName,
     boxFlow,
@@ -22157,6 +22187,16 @@ const Box = props => {
       children: innerChildren
     });
   }
+
+  // Only a Box reads the flow, and a box holding nothing but text has no Box
+  // below it: the provider, a component of its own, is left out there. Moving
+  // between the two shapes recreates text nodes, never a component.
+  if (mayHoldComponent(innerChildren)) {
+    innerChildren = jsx(BoxFlowContext.Provider, {
+      value: boxFlow,
+      children: innerChildren
+    });
+  }
   return jsx(TagName, {
     ref: finalRef,
     className: innerClassName,
@@ -22166,10 +22206,7 @@ const Box = props => {
     "navi-aspect-ratio": aspectRatio ? aspectRatio : undefined,
     "data-visual-selector": visualSelector,
     ...selfForwardedProps,
-    children: jsx(BoxFlowContext.Provider, {
-      value: boxFlow,
-      children: innerChildren
-    })
+    children: innerChildren
   });
 };
 
@@ -22387,21 +22424,15 @@ const computeBox = (props, parentBoxFlow) => {
     let innerPseudoState;
     if (basePseudoState && pseudoState) {
       innerPseudoState = {};
-      const baseStateKeys = Object.keys(basePseudoState);
-      const pseudoStateKeySet = new Set(Object.keys(pseudoState));
-      for (const key of baseStateKeys) {
-        if (pseudoStateKeySet.has(key)) {
-          pseudoStateKeySet.delete(key);
-          const value = pseudoState[key];
-          styleDeps.push(key, value);
-          innerPseudoState[key] = value;
-        } else {
-          const value = basePseudoState[key];
-          styleDeps.push(key, value);
-          innerPseudoState[key] = value;
-        }
+      for (const key of Object.keys(basePseudoState)) {
+        const value = Object.hasOwn(pseudoState, key) ? pseudoState[key] : basePseudoState[key];
+        styleDeps.push(key, value);
+        innerPseudoState[key] = value;
       }
-      for (const key of pseudoStateKeySet) {
+      for (const key of Object.keys(pseudoState)) {
+        if (Object.hasOwn(basePseudoState, key)) {
+          continue;
+        }
         const value = pseudoState[key];
         styleDeps.push(key, value);
         innerPseudoState[key] = value;
@@ -22435,7 +22466,7 @@ const computeBox = (props, parentBoxFlow) => {
     const canForwardToChild = hasChildUsingForwardedProps;
     const addStyle = (value, name, styleContext, stylesTarget) => {
       const mergedValue = prepareStyleValue(stylesTarget[name], value, name, styleContext);
-      const [cssVar] = readCSSVarEntry(styleContext.styleCSSVars[name]);
+      const cssVar = readCSSVarName(styleContext.styleCSSVars[name]);
       if (cssVar) {
         addCSSVar(mergedValue, cssVar, stylesTarget);
         if (name === "borderRadius" && value === "inherit") {
@@ -22491,12 +22522,13 @@ const computeBox = (props, parentBoxFlow) => {
         if (boxPseudoNamedStyles === PSEUDO_NAMED_STYLES_DEFAULT) {
           boxPseudoNamedStyles = {};
         }
+        const pseudoCSSVars = styleCSSVars[name];
         const pseudoStyleContext = {
           ...styleContext,
-          styleCSSVars: {
+          styleCSSVars: pseudoCSSVars ? {
             ...styleCSSVars,
-            ...styleCSSVars[name]
-          },
+            ...pseudoCSSVars
+          } : styleCSSVars,
           pseudoName: name
         };
         const pseudoStyleKeys = Object.keys(value);
@@ -22743,17 +22775,51 @@ const declaresSomething = value => {
   return true;
 };
 const isScrollingOverflow = value => value === "auto" || value === "scroll";
+const mayHoldComponent = children => {
+  if (children === null || children === undefined) {
+    return false;
+  }
+  const type = typeof children;
+  if (type === "string" || type === "number" || type === "boolean") {
+    return false;
+  }
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      if (mayHoldComponent(child)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  return true;
+};
 
 // Same props as far as computeBox is concerned. Handlers count by name only,
-// see withCurrentHandlers; no style or state key starts with "on".
-const arePropsEquivalent = (previousProps, props) => compareTwoJsValues(previousProps, props, {
-  keyComparator: comparePropAt
-});
-const comparePropAt = (a, b, key, recurse) => {
-  if (typeof key === "string" && key.startsWith("on")) {
-    return true;
+// see withCurrentHandlers. Identity first: most values are the very ones of
+// the previous render, only what a caller rebuilds inline (a style, a pseudo
+// state) needs the deep walk.
+const arePropsEquivalent = (previousProps, props) => {
+  const keys = Object.keys(props);
+  if (keys.length !== Object.keys(previousProps).length) {
+    return false;
+  }
+  for (const key of keys) {
+    if (!Object.hasOwn(previousProps, key)) {
+      return false;
+    }
+    if (key.startsWith("on")) {
+      continue;
+    }
+    const value = props[key];
+    const previousValue = previousProps[key];
+    if (value === previousValue) {
+      continue;
+    }
+    if (!compareTwoJsValues(previousValue, value)) {
+      return false;
+    }
   }
-  return recurse(a, b);
+  return true;
 };
 // The previous computation with this render's handlers: a handler goes where
 // its name went the previous time, self or child, the split being decided by