@jsenv/navi 0.29.138 → 0.29.141

package/dist/jsenv_navi.js

@@ -33367,6 +33367,34 @@ const isNamelessGrouping = (child, uiState) =>
   typeof uiState === "object" &&
   !Array.isArray(uiState);
 
+// Is this value the empty the child writes when it holds nothing? Reading it
+// back out of the object means the child holds nothing — which is `undefined`,
+// not the empty itself (see the object group's distributeChildUIState below).
+const uiStateIsChildEmpty = (uiState, child) => {
+  const { emptyUIState } = child;
+  if (emptyUIState === undefined) {
+    return false;
+  }
+  if (uiState === emptyUIState) {
+    return true;
+  }
+  // The empties are shapes, not identities: what comes back down went through
+  // a restore, a signal or an action and is a different array/object than the
+  // EMPTY_ARRAY/EMPTY_OBJECT that went up.
+  if (Array.isArray(emptyUIState)) {
+    return Array.isArray(uiState) && uiState.length === 0;
+  }
+  if (typeof emptyUIState === "object" && emptyUIState !== null) {
+    return (
+      uiState !== null &&
+      typeof uiState === "object" &&
+      !Array.isArray(uiState) &&
+      Object.keys(uiState).length === 0
+    );
+  }
+  return false;
+};
+
 const firstDefinedChildUIState = (children) => {
   for (const child of children) {
     const childUIState = child.uiState;
@@ -33504,7 +33532,19 @@ const GROUP_DEFAULTS = {
         typeof newUIState === "object" &&
         Object.prototype.hasOwnProperty.call(newUIState, childName)
       ) {
-        return newUIState[childName];
+        const childUIState = newUIState[childName];
+        // The exact inverse of the empty aggregateChildStates wrote just
+        // above: what a child holding nothing put into the object
+        // must come back out as nothing. Handed back as-is it reads as a value
+        // — a checkbox takes any state that is not `undefined` as checked,
+        // `false` included (see the `checked` line in control_hooks'
+        // toDomProps) — so restoring the object (a picker cancelling on Escape)
+        // would check every box it contains, and the group would then re-derive
+        // the `true` nobody said.
+        if (uiStateIsChildEmpty(childUIState, child)) {
+          return undefined;
+        }
+        return childUIState;
       }
       // Merged in on the way up (see above), so on the way down it takes the
       // whole object and picks out its own keys — the same value it produced.
@@ -33732,6 +33772,15 @@ const useUIGroupStateController = (
         // wheels nobody turned have settled nothing. Only the default shapes
         // fall back to the empty of their type, where "no child says anything"
         // and "the value is empty" are the same sentence.
+        //
+        // Not `fallbackState !== undefined`, tempting as it looks: `stateType`
+        // is what the group's OWN shape would be, and a caller-supplied
+        // aggregate is free to hold another one — TimeSpin and WheelTime are
+        // "HH:MM" strings inside groups declared `stateType: "object"`, and
+        // handing them `{}` for "unanswered" would empty a signal holding a
+        // time. An aggregate that does want the empty of the declared type
+        // takes it: it is handed `fallbackState` as its second argument (see
+        // ListSelectable, which returns it for an emptied multiple list).
         return stateShapeIsTheDefaultOne ? fallbackState : undefined;
       };
 
@@ -61306,7 +61355,13 @@ const ListSelectable = props => {
   if (selectionRef.current === undefined) {
     selectionRef.current = Object.hasOwn(props, "value") ? props.value : props.defaultValue;
   }
-  const aggregateChildStates = children => {
+  // `fallbackState` is the empty of the shape the list declared below
+  // (`stateType`): `[]` for a multiple list, nothing for a single one. Taking
+  // it is what lets an emptied list say "empty" — `undefined` is the word for
+  // "unset", and a bound stateSignal reads that as "nothing decided here, go
+  // back to the default" (see docs/control_value.md), which is how a list
+  // emptied down to its last row puts that row back on reload.
+  const aggregateChildStates = (children, fallbackState) => {
     const kept = selectionRef.current;
     if (multiple) {
       const drawnValues = new Set(children.map(child => child.props.value));
@@ -61316,7 +61371,7 @@ const ListSelectable = props => {
           stillSelected.push(child.uiState);
         }
       }
-      const values = stillSelected.length === 0 ? undefined : stillSelected;
+      const values = stillSelected.length === 0 ? fallbackState : stillSelected;
       selectionRef.current = values;
       return values;
     }
@@ -61929,6 +61984,10 @@ const ListVirtualContext = createContext(null);
 // that returning a component of one's own — instead of a bare <List.Item> —
 // works the same way.
 const ListRowContext = createContext(null);
+// The slot a child of the list stands in, by id (see ListDeclaredChildren). A
+// row takes its place in the collection by slot: the place is then the list's
+// to move, and the row's to follow — see createListVirtual.
+const ListSlotContext = createContext(null);
 const css$x = /* css */`
   @layer navi {
     .navi_list_container {
@@ -62932,24 +62991,11 @@ const ListFirstResolver = props => {
   props.ref = props.ref || refDefault;
   const idDefault = useId();
   props.id = props.id || idDefault;
-  // A new pass every time the caller walks the children: they are about to
-  // say again, in order, which rows of the collection they stand for. Decided
-  // here, on the children as the caller gave them. Further down the chain a
-  // resolver re-rendering on its own hands the rows down inside a vnode of its
-  // own (ListSelectable wraps them in the group's contexts) — but the rows are
-  // the very vnodes preact already holds, and it skips them: nothing is said
-  // again, so nothing may be asked again either (see createListVirtual).
   const virtualRef = useRef(null);
   if (!virtualRef.current) {
     virtualRef.current = createListVirtual();
   }
-  const virtual = virtualRef.current;
-  const childrenPreviousRef = useRef(undefined);
-  if (childrenPreviousRef.current !== props.children) {
-    childrenPreviousRef.current = props.children;
-    virtual.openPass();
-  }
-  props.virtual = virtual;
+  props.virtual = virtualRef.current;
   return jsx(Next, {
     ...props
   });
@@ -64685,7 +64731,9 @@ const UnorderedList = ({
                   value: null,
                   children: jsx(ListColumnsContext.Provider, {
                     value: columns || null,
-                    children: children
+                    children: jsx(ListDeclaredChildren, {
+                      children: children
+                    })
                   })
                 })
               })
@@ -64896,6 +64944,7 @@ const ListItemUI = props => {
   // registered the row, decided it is inside the render window, and placed its
   // separator. All that is left here is to draw it.
   const row = useContext(ListRowContext);
+  const slotId = useContext(ListSlotContext);
   // There is no standalone match/matchScore/highlight prop — participation
   // in a matching system (search, filter…) only goes through `matchInfo`
   // (e.g. useSearchText's getItemMatchInfo(item): { match, matchScore,
@@ -64919,12 +64968,24 @@ const ListItemUI = props => {
     }
   }
   // Where a row sits is where it was declared, full stop: a list is written in
-  // the order it reads. Nothing to pass, nothing to keep in sync — a search
-  // that reorders rows reorders the rows it declares. A row drawn by a run
-  // already knows its place; the run gave it.
-  if (!row && !props.filtered) {
-    props.index = virtual.take(props.id, 1);
+  // the order it reads. Its slot is what says that — a search that reorders
+  // rows reorders the rows it declares, and the slots follow. A row drawn by a
+  // run already knows its place; the run gave it. The place is taken in the
+  // name of this very component (idDefault, not the row's id): two components
+  // may stand for the same row for a moment, one leaving as the other arrives,
+  // and the one leaving must give back its own place, not the newcomer's.
+  if (!row) {
+    if (props.filtered) {
+      virtual.drop(idDefault);
+    } else {
+      props.index = virtual.take(idDefault, 1, slotId);
+    }
   }
+  useLayoutEffect(() => {
+    return () => {
+      virtual.drop(idDefault);
+    };
+  }, []);
   // Every row that is drawn registers itself, whether it was declared one by
   // one or drawn by a run: what it says about itself (its value, whether it is
   // selected) is written where it is drawn, in one place.
@@ -65281,12 +65342,20 @@ List.Item = ListItem;
 // where each child's rows start.
 //
 // A child knows how many rows it stands for but not what was declared before
-// it, so the list hands out the places as its children render — in order, which
-// is the only thing needed to place them. A child re-rendering ON ITS OWN (its
-// own state changed, the list was not given its children again) keeps the
-// place it was given: nothing before it moved. Hence the pass — only the
-// caller walking the children again opens a new one (see ListFirstResolver),
-// and within a pass a child takes its place exactly once.
+// it, and it cannot deduce that from when it renders: a render is free to skip
+// it. A child that draws from signals and whose props are all referentially
+// === the previous ones does not render again (@preact/signals installs a
+// shouldComponentUpdate that says so), which is what any child nobody rebuilt
+// this frame is — and children numbered as they render would then slide up
+// into the place of the one that was skipped.
+//
+// So the places are read off the walk instead of off the renders: the list
+// names a slot for each of its children and declares them here, in order,
+// before any of them renders (see ListDeclaredChildren). A child then takes
+// its place BY SLOT, and the place is a signal: it moves when what stands
+// before it changes — a row filtered out, a run taking in rows, a slot added
+// or moved — and the child follows, rendered again for it whether or not
+// anything else would have rendered it.
 const createListVirtual = () => {
   const totalSignal = signal(0);
   // Bumped whenever a run takes in rows. The list itself has to hear about it:
@@ -65298,10 +65367,109 @@ const createListVirtual = () => {
   // an attribute: what is drawn is from before, and the app may want to say so
   // without taking anything away.
   const refreshingSignal = signal(0);
-  const placeByOwner = new Map();
+  // The slots each walk declared, in order, by the slot the walk stands in
+  // (null for the list's own children). Together they are a tree: a group's
+  // rows live inside the group's slot.
+  const slotIdsByParent = new Map();
+  // Who took a place — a row, or a run of rows — and how many rows of the
+  // collection it stands for. The place itself is a signal, see take.
+  const ownerById = new Map();
+  // The owners standing in each slot, in the order they took their place.
+  // One, as a rule; a child that renders several rows keeps them in the order
+  // they first rendered, which is all it can be told.
+  const ownerIdsBySlot = new Map();
   const locatorByOwner = new Map();
-  let passId = 0;
-  let nextIndex = 0;
+  // The slots as the tree reads, first to last, and where each stands in it.
+  // Rebuilt once a walk has changed the tree, read to place the owners.
+  const slotWalk = [];
+  const rankBySlot = new Map();
+  let rowTotal = 0;
+  // Owners have left and the others have not been moved up yet. Done on the
+  // next ask rather than on the spot: rows leave many at a time (a search, a
+  // list unmounting), and moving the others up once is enough.
+  let placesStale = false;
+  // Where the last slot holding an owner stands: an owner arriving at or after
+  // it is placed at the end without going over the others — a whole first
+  // render, rows arriving in order, costs each row nothing but itself.
+  let rankOwnedLast = -1;
+  const rebuildWalk = () => {
+    slotWalk.length = 0;
+    rankBySlot.clear();
+    const visit = parentSlotId => {
+      const slotIds = slotIdsByParent.get(parentSlotId);
+      if (!slotIds) {
+        return;
+      }
+      for (const slotId of slotIds) {
+        rankBySlot.set(slotId, slotWalk.length);
+        slotWalk.push(slotId);
+        visit(slotId);
+      }
+    };
+    visit(null);
+  };
+  // Every place, in one go: a place is the sum of what stands before it, so
+  // there is nothing to hand out one at a time. Writing a place that did not
+  // change wakes nobody — a signal ignores a value equal to its own.
+  const refreshPlaces = () => {
+    placesStale = false;
+    let index = 0;
+    let rank = 0;
+    rankOwnedLast = -1;
+    while (rank < slotWalk.length) {
+      const ownerIds = ownerIdsBySlot.get(slotWalk[rank]);
+      if (ownerIds) {
+        for (const ownerId of ownerIds) {
+          const owner = ownerById.get(ownerId);
+          owner.placeSignal.value = index;
+          index += owner.rowCount;
+        }
+        rankOwnedLast = rank;
+      }
+      rank++;
+    }
+    rowTotal = index;
+    totalSignal.value = index;
+  };
+  const addToSlot = (slotId, ownerId) => {
+    const ownerIds = ownerIdsBySlot.get(slotId);
+    if (ownerIds) {
+      ownerIds.push(ownerId);
+    } else {
+      ownerIdsBySlot.set(slotId, [ownerId]);
+    }
+  };
+  const removeFromSlot = (slotId, ownerId) => {
+    const ownerIds = ownerIdsBySlot.get(slotId);
+    if (!ownerIds) {
+      return;
+    }
+    const index = ownerIds.indexOf(ownerId);
+    if (index !== -1) {
+      ownerIds.splice(index, 1);
+    }
+    if (ownerIds.length === 0) {
+      ownerIdsBySlot.delete(slotId);
+    }
+  };
+  // A slot the walk no longer names: whatever stood in it is gone, and so is
+  // whatever a walk inside it had declared.
+  const dropSlot = slotId => {
+    const ownerIds = ownerIdsBySlot.get(slotId);
+    if (ownerIds) {
+      for (const ownerId of ownerIds) {
+        ownerById.delete(ownerId);
+      }
+      ownerIdsBySlot.delete(slotId);
+    }
+    const childSlotIds = slotIdsByParent.get(slotId);
+    if (childSlotIds) {
+      slotIdsByParent.delete(slotId);
+      for (const childSlotId of childSlotIds) {
+        dropSlot(childSlotId);
+      }
+    }
+  };
   const virtual = {
     totalSignal,
     pagesSignal,
@@ -65322,15 +65490,32 @@ const createListVirtual = () => {
     horizontal: false,
     virtualItemSizeSignal: null,
     renderSkeleton: undefined,
-    // Reopening the pass when the rows are not about to render again would
-    // empty the places without anyone refilling them: the next row to render
-    // on its own (an item being selected, a run following the window) would be
-    // handed the first place — drawing itself as the top of the list, its
-    // separator gone, and the one after it wearing a separator it should not.
-    openPass: () => {
-      passId++;
-      nextIndex = 0;
+    // The children a walk stands over, in order — said in one call, before any
+    // of them renders, so that what a child asks next is answered against the
+    // whole picture and not against the children that happened to render
+    // first. Said again on every render of the walk, and heard only when
+    // something moved.
+    declareSlots: (parentSlotId, slotIds) => {
+      const slotIdsPrevious = slotIdsByParent.get(parentSlotId);
+      if (slotIdsPrevious && sameSlotIds(slotIdsPrevious, slotIds)) {
+        return;
+      }
+      if (slotIdsPrevious) {
+        const slotIdSet = new Set(slotIds);
+        for (const slotId of slotIdsPrevious) {
+          if (!slotIdSet.has(slotId)) {
+            dropSlot(slotId);
+          }
+        }
+      }
+      slotIdsByParent.set(parentSlotId, slotIds);
+      rebuildWalk();
+      refreshPlaces();
     },
+    // Whether something has taken this slot for its own: what it renders
+    // inside is then its to place (a run draws its groups with their rows
+    // already placed), and no walk inside it has anything to declare.
+    slotHasOwner: slotId => ownerIdsBySlot.has(slotId),
     // Whether any run of rows lives in this list: what makes a render window
     // mean anything (see List's renderBudget).
     hasRuns: () => locatorByOwner.size > 0,
@@ -65350,23 +65535,130 @@ const createListVirtual = () => {
       }
       return null;
     },
-    take: (ownerId, rowCount, indexStart) => {
-      const placeTaken = placeByOwner.get(ownerId);
-      if (placeTaken && placeTaken.passId === passId) {
-        return placeTaken.index;
-      }
-      const index = indexStart === undefined ? nextIndex : indexStart;
-      placeByOwner.set(ownerId, {
-        passId,
-        index
+    // The place the owner's rows start at — read from a signal, so that the
+    // owner is rendered again when it moves (see createListVirtual). Asked on
+    // every render, and answered without a second look for as long as the
+    // owner stands in the same slot for the same number of rows.
+    take: (ownerId, rowCount, slotId) => {
+      let owner = ownerById.get(ownerId);
+      if (owner) {
+        if (owner.slotId !== slotId || owner.rowCount !== rowCount) {
+          removeFromSlot(owner.slotId, ownerId);
+          addToSlot(slotId, ownerId);
+          owner.slotId = slotId;
+          owner.rowCount = rowCount;
+          placesStale = true;
+        }
+        if (placesStale) {
+          refreshPlaces();
+        }
+        return owner.placeSignal.value;
+      }
+      if (placesStale) {
+        refreshPlaces();
+      }
+      const rank = rankBySlot.get(slotId);
+      addToSlot(slotId, ownerId);
+      if (rank !== undefined && rank >= rankOwnedLast) {
+        owner = {
+          slotId,
+          rowCount,
+          placeSignal: signal(rowTotal)
+        };
+        ownerById.set(ownerId, owner);
+        rowTotal += rowCount;
+        rankOwnedLast = rank;
+        totalSignal.value = rowTotal;
+        return owner.placeSignal.value;
+      }
+      owner = {
+        slotId,
+        rowCount,
+        placeSignal: signal(0)
+      };
+      ownerById.set(ownerId, owner);
+      refreshPlaces();
+      return owner.placeSignal.value;
+    },
+    // The owner stands for no row of the collection: it was filtered out by a
+    // search, or it is gone.
+    drop: ownerId => {
+      const owner = ownerById.get(ownerId);
+      if (!owner) {
+        return;
+      }
+      ownerById.delete(ownerId);
+      removeFromSlot(owner.slotId, ownerId);
+      if (placesStale) {
+        return;
+      }
+      placesStale = true;
+      queueMicrotask(() => {
+        if (placesStale) {
+          refreshPlaces();
+        }
       });
-      nextIndex = index + rowCount;
-      totalSignal.value = nextIndex;
-      return index;
     }
   };
   return virtual;
 };
+const sameSlotIds = (left, right) => {
+  if (left.length !== right.length) {
+    return false;
+  }
+  let index = 0;
+  while (index < left.length) {
+    if (left[index] !== right[index]) {
+      return false;
+    }
+    index++;
+  }
+  return true;
+};
+
+// The walk that gives the list's children their places: a slot for each of
+// them, declared to the list's virtual all at once before any child renders,
+// and handed to the child through a provider of its own — which is what lets
+// the row reach it however deep the caller buried it in components of theirs.
+//
+// A slot is named the way preact tells the child apart: by key when it has
+// one, by position otherwise, and inside the array it was given in — a nested
+// array is one child to preact, so what follows the array keeps its name
+// however many rows the array holds. A child preact would not render (null,
+// a boolean) has no slot: it is not there.
+const ListDeclaredChildren = ({
+  children
+}) => {
+  const virtual = useContext(ListVirtualContext);
+  const parentSlotId = useContext(ListSlotContext);
+  if (parentSlotId !== null && virtual.slotHasOwner(parentSlotId)) {
+    return children;
+  }
+  const slotIds = [];
+  const declared = [];
+  declareChildren(children, parentSlotId === null ? "" : `${parentSlotId}/`, slotIds, declared);
+  virtual.declareSlots(parentSlotId, slotIds);
+  return jsx(Fragment$1, {
+    children: declared
+  });
+};
+const declareChildren = (children, prefix, slotIds, declared) => {
+  const childArray = Array.isArray(children) ? children : [children];
+  let index = 0;
+  for (const child of childArray) {
+    if (Array.isArray(child)) {
+      declareChildren(child, `${prefix}${index}/`, slotIds, declared);
+    } else if (child !== null && child !== undefined && child !== false && child !== true) {
+      const slotId = child.key === undefined || child.key === null ? `${prefix}i${index}` : `${prefix}k${child.key}`;
+      slotIds.push(slotId);
+      declared.push(jsx(ListSlotContext.Provider, {
+        value: slotId,
+        children: child
+      }, slotId));
+    }
+    index++;
+  }
+};
 const VISIBILITY_HIDDEN_STYLE = {
   visibility: "hidden"
 };
@@ -65501,6 +65793,7 @@ const ListItems = ({
 }) => {
   const ownerId = useId();
   const virtual = useContext(ListVirtualContext);
+  const slotId = useContext(ListSlotContext);
   const renderWindow = useContext(RenderWindowContext);
   const separator = useContext(SeparatorContext);
   const store = useItemStore({
@@ -65522,7 +65815,7 @@ const ListItems = ({
       skeletonRow.rowMinHeight = `${virtualItemSize}px`;
     }
   }
-  const runStart = virtual.take(ownerId, store.rowCount);
+  const runStart = virtual.take(ownerId, store.rowCount, slotId);
   const runEnd = runStart + store.rowCount;
   const getItemAt = index => store.getItem(index);
   const windowFrom = renderWindow.start > runStart ? renderWindow.start : runStart;
@@ -65549,6 +65842,7 @@ const ListItems = ({
   useLayoutEffect(() => {
     return () => {
       virtual.dropRowLocator(ownerId);
+      virtual.drop(ownerId);
     };
   }, []);
 
@@ -66334,7 +66628,9 @@ const ListItemGroup = ({
       "aria-labelledby": groupId,
       children: jsx(GroupItemTrackerContext.Provider, {
         value: groupTracker,
-        children: children
+        children: jsx(ListDeclaredChildren, {
+          children: children
+        })
       })
     })]
   });