@jsenv/navi 0.29.474 → 0.29.475

package/dist/dev/jsenv_navi.js

@@ -23351,6 +23351,10 @@ const DROP_CONTAINER_ATTRIBUTE = "data-drop-container";
 // every outcome — a list runs one way, and something being put somewhere goes
 // wherever it is put.
 const AXIS_ATTRIBUTE = "data-drag-axis";
+// How the items of a reordered list are laid out: "column", "row", or "wrap" for
+// side by side over several lines. Said nothing, it is read from where the
+// items stand.
+const FLOW_ATTRIBUTE = "data-reorder-flow";
 const DELAY_ATTRIBUTE = "data-drag-delay";
 const SLOP_ATTRIBUTE = "data-drag-slop";
 const THRESHOLD_ATTRIBUTE$1 = "data-drag-threshold";
@@ -23446,14 +23450,24 @@ defineInteractionDetector({
     }
     // Read at setup rather than at the press: a container can say it, and it is
     // what the gesture is about rather than something it discovers.
+    const itemFlow =
+      element.closest(`[${FLOW_ATTRIBUTE}]`)?.getAttribute(FLOW_ATTRIBUTE) ||
+      undefined;
     const axisHolder = element.closest(`[${AXIS_ATTRIBUTE}]`);
     const axes =
       axisHolder?.getAttribute(AXIS_ATTRIBUTE) ||
-      // A list runs one way, and reordering walks it. Anything else goes wherever
-      // the hand takes it: a board has places all around, a thing put somewhere has
-      // two axes to be put along, a throw goes where it was thrown and a thing
-      // that leaves goes out by whichever edge.
-      (canReorder && !canLand && !canToss && !canLeave ? "y" : "xy");
+      // A list runs one way, and reordering walks it: down a column, along a
+      // row, and both for a row that wraps — its copy changes line. Anything
+      // else goes wherever the hand takes it: a board has places all around, a
+      // thing put somewhere has two axes to be put along, a throw goes where it
+      // was thrown and a thing that leaves goes out by whichever edge.
+      (canReorder && !canLand && !canToss && !canLeave
+        ? itemFlow === "row"
+          ? "x"
+          : itemFlow === "wrap"
+            ? "xy"
+            : "y"
+        : "xy");
     // Where the places are, read at setup for the same reason as the axes: they
     // are what the gesture is about, and it is what holds the two sides of it
     // that says them.
@@ -23527,6 +23541,7 @@ defineInteractionDetector({
             : undefined,
         containerElement: dropContainer || undefined,
         outsideOf,
+        itemFlow,
         getItemId: (itemElement) => itemElement.id,
         direction: { x: axes.includes("x"), y: axes.includes("y") },
         // Where it may go, said in the DOM. A thing that is put somewhere stays
@@ -78986,6 +79001,7 @@ const useListScrollSync = ({
   useDuplicateHeaderWarning(ref);
   useStuckWindowWarning({
     ref,
+    getListEl,
     scrollerElResolved,
     renderWindowRef,
     windowLeavesItemsOut,
@@ -80533,6 +80549,7 @@ const readItemsPerLine = listEl => {
 // instead of scrolling — and there is no event missing to notice it by.
 const useStuckWindowWarning = ({
   ref,
+  getListEl,
   scrollerElResolved,
   renderWindowRef,
   windowLeavesItemsOut,
@@ -80561,6 +80578,22 @@ const useStuckWindowWarning = ({
     if (canScrollerScroll(scrollerElResolved, horizontal ? "x" : "y")) {
       return;
     }
+    // Scrolling nothing, the box keeps out of reach only the items past what
+    // it shows. A list standing whole on the window's screen is one the window
+    // covers at its next evaluation: an item added in this commit is drawn on
+    // the resize it causes (see onGeometryChangeRef), after this effect.
+    const listEl = getListEl();
+    if (!listEl) {
+      return;
+    }
+    const screen = readWindowScreen(scrollerElResolved, horizontal);
+    const listRect = listEl.getBoundingClientRect();
+    const listFrom = horizontal ? listRect.left : listRect.top;
+    const listTo = horizontal ? listRect.right : listRect.bottom;
+    // A pixel of slack, like canScroll.
+    if (listFrom > screen.from - 1 && listTo < screen.to + 1) {
+      return;
+    }
     doneRef.current = true;
     const {
       start,
@@ -81179,28 +81212,40 @@ const findItemElementAt = (listEl, index) => {
   }
   return null;
 };
-// What the render window is placed and sized on (see evaluateWindow), along
-// the scroll axis and in viewport coordinates: the size of the screen, the part
-// of the list on it (the band), and the items drawn, in the order they stand.
-// The screen is the viewport of the box that scrolls the list — what "150%"
-// is a percentage of. A box that does not scroll — a list given no height, as
-// tall as its items — shows no more of them than the browser does: its
-// viewport is cut by the browser's, or a budget in % would draw items to fill
-// a screen they make grow. A list off screen is met at its edge nearest to the
-// screen, where it comes in.
-const readWindowGeometry = (scrollerEl, listEl, horizontal) => {
+// The screen the render window is framed on, along the scroll axis and in
+// viewport coordinates: the viewport of the box that scrolls the list — what
+// "150%" is a percentage of. A box that does not scroll — a list given no
+// height, as tall as its items — shows no more of them than the browser does:
+// its viewport is cut by the browser's, or a budget in % would draw items to
+// fill a screen they make grow.
+const readWindowScreen = (scrollerEl, horizontal) => {
   const scrollerRect = getScrollerViewportRect(scrollerEl);
-  let screenFrom = horizontal ? scrollerRect.left : scrollerRect.top;
-  let screenTo = horizontal ? scrollerRect.right : scrollerRect.bottom;
+  let from = horizontal ? scrollerRect.left : scrollerRect.top;
+  let to = horizontal ? scrollerRect.right : scrollerRect.bottom;
   if (!canScrollerScroll(scrollerEl, horizontal ? "x" : "y")) {
     const browserSize = horizontal ? document.documentElement.clientWidth : document.documentElement.clientHeight;
-    if (screenFrom < 0) {
-      screenFrom = 0;
+    if (from < 0) {
+      from = 0;
     }
-    if (screenTo > browserSize) {
-      screenTo = browserSize;
+    if (to > browserSize) {
+      to = browserSize;
     }
   }
+  return {
+    from,
+    to
+  };
+};
+// What the render window is placed and sized on (see evaluateWindow), along
+// the scroll axis and in viewport coordinates: the size of the screen (see
+// readWindowScreen), the part of the list on it (the band), and the items
+// drawn, in the order they stand. A list off screen is met at its edge nearest
+// to the screen, where it comes in.
+const readWindowGeometry = (scrollerEl, listEl, horizontal) => {
+  const {
+    from: screenFrom,
+    to: screenTo
+  } = readWindowScreen(scrollerEl, horizontal);
   const screenSize = screenTo - screenFrom;
   if (screenSize < 1) {
     return null;