@jsenv/navi 0.29.494 → 0.29.496

package/dist/jsenv_navi.js

@@ -45384,17 +45384,22 @@ document.body.addEventListener(
  * on screen. A registry keyed by id then holds the newcomer, and loses the
  * first control when the newcomer leaves. navi renders on the client only, so
  * a counter is all the uniqueness needs.
+ *
+ * Held in a ref, not in useState: @preact/signals' shouldComponentUpdate
+ * skips the render of a component holding hook state whose props did not
+ * change, so an id kept as state would change when its caller renders.
  */
 
 
 let generatedIdCount = 0;
 
 const useGeneratedId = () => {
-  const [id] = useState(() => {
+  const idRef = useRef(null);
+  if (idRef.current === null) {
     generatedIdCount++;
-    return `navi_${generatedIdCount}`;
-  });
-  return id;
+    idRef.current = `navi_${generatedIdCount}`;
+  }
+  return idRef.current;
 };
 
 /**
@@ -78988,12 +78993,14 @@ const PickerCustomResolver = props => {
     return renderResolver(PickerNative, props);
   }
   if (props.mode === "callout") {
-    // A tooltip is an icon one presses, unless told otherwise. Own-property
-    // rather than undefined: an explicit variant={undefined} asks for the
-    // field-like drawing back. "circle" is the icon variant with the status
-    // icon drawn round — a word about the trigger, not a drawing of its own.
-    if (!Object.hasOwn(props, "variant")) {
+    // A tooltip is an icon one presses, unless told otherwise; "picker" asks
+    // for the field-like drawing back. "circle" is the icon variant with the
+    // status icon drawn round — a word about the trigger, not a drawing of its
+    // own.
+    if (props.variant === undefined) {
       props.variant = "icon";
+    } else if (props.variant === "picker") {
+      props.variant = undefined;
     }
     const circle = props.variant === "circle";
     if (circle) {
@@ -80484,11 +80491,10 @@ const PickerConfirmResolver = props => {
     openWhileReadOnly = false
   } = props;
   // A button, unless told otherwise: nothing is picked here, the popup is a
-  // question, and a question is asked by pressing something. "picker" — or an
-  // explicit `variant={undefined}` — is how a caller asks for the field-like
-  // drawing back; a destructuring default could not tell that from nothing
-  // being said.
-  const variant = Object.hasOwn(props, "variant") ? props.variant === "picker" ? undefined : props.variant : "button";
+  // question, and a question is asked by pressing something. "picker" is how a
+  // caller asks for the field-like drawing back — a word, not an undefined, so
+  // a wrapper forwarding `variant={variant}` keeps the button.
+  const variant = props.variant === undefined ? "button" : props.variant === "picker" ? undefined : props.variant;
 
   // From the picker's own input, as its press would have been: the input is
   // what carries `command`/`commandFor` in the DOM, and what a form sending
@@ -92879,9 +92885,8 @@ const PickerUI = /*#__PURE__*/Object.assign(PickerDefaultUI, {
  *   not sit in — an object on a map saying
  *   `triggerNaviCommand(pickerEl, "--navi-open", event, { anchor, value })` —
  *   therefore wants an element of its own to stretch into rather than the
- *   nearest positioned ancestor it happens to find. `"picker"` (or an explicit
- *   `variant={undefined}`) asks a confirm or callout picker for the field-like
- *   drawing every other picker has.
+ *   nearest positioned ancestor it happens to find. `"picker"` asks a confirm
+ *   or callout picker for the field-like drawing every other picker has.
  * @param {boolean} [cta] A call to action: filled with the accent, its border
  *   matching, as `cta` draws a Button — for a confirm picker that is a row's
  *   main action.
@@ -96709,12 +96714,18 @@ const buildMatchInfo = (searchText, items, matchFn) => {
  *   needed. `data.role === "presentation"` keeps it out entirely.
  *   Returns the visible rank (position among visible items), or -1 when hidden
  *   or filtered.
+ *   An item rendered without an index keeps the position it has, and a new one
+ *   goes last: for a host that cannot know the order at render and gives it
+ *   afterwards with setOrder.
  *   Signals and onChange are deferred to a microtask so multiple items updating
  *   in one commit cause only one notification.
  *
  *   getTrackedItemByIndex(index): synchronous O(1) lookup of a visible item by
  *   its visible rank. Returns undefined when index is out of range.
  *
+ *   setOrder(ids): gives each tracked item its position from its rank in
+ *   `ids`.
+ *
  *   peekItems(): the items as they stand right now, without waiting for the
  *   deferred notification — what a sibling rendering after the items must read
  *   to paint them in the same commit.
@@ -96995,8 +97006,14 @@ const createItemTracker = (onChange) => {
   // that determines this item's position among siblings.
   // Returns the item's visible rank among non-hidden items, or -1 when hidden.
   const useTrackItem = (data) => {
-    const { id, index } = data;
+    const { id } = data;
     const key = keyForId(id);
+    let { index } = data;
+    if (index === undefined) {
+      index = keyToExplicitOrder.has(key)
+        ? keyToExplicitOrder.get(key)
+        : Infinity;
+    }
 
     syncItem(key, index, data);
     notify();
@@ -97014,6 +97031,24 @@ const createItemTracker = (onChange) => {
     return keyToOrderedIndex.get(key) ?? -1;
   };
 
+  const setOrder = (ids) => {
+    let changed = false;
+    for (let i = 0; i < ids.length; i++) {
+      const key = idToKey.get(ids[i]);
+      if (key === undefined || !allRegistrations.has(key)) {
+        continue;
+      }
+      if (keyToExplicitOrder.get(key) === i) {
+        continue;
+      }
+      syncItem(key, i, allRegistrations.get(key));
+      changed = true;
+    }
+    if (changed) {
+      notify();
+    }
+  };
+
   const getTrackedItemByIndex = (index) => {
     const key = orderedKeys[index];
     if (key === undefined) {
@@ -97047,6 +97082,7 @@ const createItemTracker = (onChange) => {
   return {
     useTrackItem,
     getTrackedItemByIndex,
+    setOrder,
     peekItems,
     itemsSignal,
     visibleItemsSignal,
@@ -97444,8 +97480,8 @@ const getNumericRange = items => {
 
 // Wheel.Item registers its {value, label} here so WheelUI knows the full ordered
 // list of items regardless of how children are wrapped (providers, fragments…).
-// indexRef gives each item its position: WheelUI resets it to 0 every render and
-// each item reads-and-increments it as it renders, in document order.
+// The position comes after the commit, from the marker each item leaves where it
+// stands (see WheelUI).
 const WheelItemTrackerContext = createContext(null);
 
 // Lets a WheelGroup push shared presentation (glass, orientation) down to every
@@ -98067,15 +98103,21 @@ function WheelUI(props) {
   // (children may be wrapped). This ordered list is the source of truth for the
   // whole wheel — the rendered rows are a small recycled window over it.
   const tracker = useItemTracker();
-  const indexRef = useRef(0);
-  indexRef.current = 0;
-  const trackerContextRef = useRef(null);
-  if (!trackerContextRef.current) {
-    trackerContextRef.current = {
-      tracker,
-      indexRef
-    };
-  }
+  // The order is read from the markers the items leave in the DOM, not from the
+  // order they render in: an item whose props did not change may skip a render
+  // (signals' shouldComponentUpdate), and a render count would then rank the
+  // ones that did render first.
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    const ids = [];
+    for (const marker of el.querySelectorAll("[data-navi-wheel-item]")) {
+      ids.push(marker.getAttribute("data-navi-wheel-item"));
+    }
+    tracker.setOrder(ids);
+  });
   const trackedItems = tracker.itemsSignal.value;
   const trackedItemsRef = useRef(trackedItems);
   trackedItemsRef.current = trackedItems;
@@ -98875,7 +98917,7 @@ function WheelUI(props) {
         className: "navi_wheel_pane",
         "data-side": "start"
       }), jsx(WheelItemTrackerContext.Provider, {
-        value: trackerContextRef.current,
+        value: tracker,
         children: jsx(ControlFacadeChildrenWrapper, {
           facadeController: facadeController,
           children: children
@@ -98988,9 +99030,10 @@ const WheelWindow = ({
  * Wheel.Item — a value in a Wheel. Must be used inside <Wheel>.
  *
  * Registration only: it records its {value, label, itemProps} with the wheel and
- * renders NOTHING. The wheel is virtualized — it renders a small recycled window
- * of rows and fills each from this tracked data — so the value list is the source
- * of truth, not a per-item DOM node. Selection lives on the wheel's value.
+ * renders no row, only a hidden marker the wheel reads its position from. The
+ * wheel is virtualized — it renders a small recycled window of rows and fills
+ * each from this tracked data — so the value list is the source of truth, not a
+ * per-item DOM node. Selection lives on the wheel's value.
  *
  * @type {import("preact").FunctionComponent<{
  *   value: any,
@@ -99007,16 +99050,17 @@ const WheelItem = ({
   const idDefault = useGeneratedId();
   const resolvedId = id || idDefault;
   // Wheel.Item must live inside a Wheel, so the context is always present.
-  const trackerContext = useContext(WheelItemTrackerContext);
-  const index = trackerContext.indexRef.current++;
-  trackerContext.tracker.useTrackItem({
+  const tracker = useContext(WheelItemTrackerContext);
+  tracker.useTrackItem({
     id: resolvedId,
-    index,
     value,
     label: children,
     itemProps: rest
   });
-  return null;
+  return jsx("span", {
+    hidden: true,
+    "data-navi-wheel-item": resolvedId
+  });
 };
 Wheel.Item = WheelItem;