@signiphi/page-assembly 0.2.0-beta.12 → 0.2.0-beta.13

package/dist/index.mjs

@@ -1945,6 +1945,7 @@ function mapFieldPositionsAfterAssembly(fields, pageMapping) {
     return pageMapping.has(mappingKey) || pageMapping.size === 0;
   });
 }
+var VISIBLE_PAGE_ROWS = 2;
 var isMultiSelectModifier = (event) => {
   return event.ctrlKey || event.metaKey;
 };
@@ -2271,21 +2272,48 @@ var ReorderablePageGrid = ({
     newPages.splice(hoverIndex, 0, draggedPage);
     onReorderPages(file.id, newPages);
   }, [file.id, file.pages, onReorderPages]);
-  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4", children: file.pages.map((page, index) => /* @__PURE__ */ jsx(
-    DraggablePageThumbnail,
+  const gridRef = useRef(null);
+  const [maxHeight, setMaxHeight] = useState(void 0);
+  useEffect(() => {
+    const grid = gridRef.current;
+    if (!grid || typeof ResizeObserver === "undefined") return;
+    const measure = () => {
+      const firstThumbnail = grid.firstElementChild;
+      if (!firstThumbnail) return;
+      const rowHeight = firstThumbnail.getBoundingClientRect().height;
+      if (rowHeight <= 0) return;
+      const rowGap = parseFloat(getComputedStyle(grid).rowGap) || 0;
+      setMaxHeight(Math.ceil(rowHeight * VISIBLE_PAGE_ROWS + rowGap * (VISIBLE_PAGE_ROWS - 1)));
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(grid);
+    if (grid.firstElementChild) observer.observe(grid.firstElementChild);
+    return () => observer.disconnect();
+  }, [file.pages]);
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      page,
-      fileId: file.id,
-      index,
-      isSelected: selectedPageIds.includes(page.id),
-      onSingleSelect: onSingleSelectPage,
-      onToggleSelect: onTogglePageSelect,
-      onRangeSelect: onRangeSelectPage,
-      movePageInFile,
-      isDraggingPageRef
-    },
-    page.id
-  )) });
+      ref: gridRef,
+      className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 overflow-y-auto overflow-x-hidden",
+      style: { maxHeight },
+      children: file.pages.map((page, index) => /* @__PURE__ */ jsx(
+        DraggablePageThumbnail,
+        {
+          page,
+          fileId: file.id,
+          index,
+          isSelected: selectedPageIds.includes(page.id),
+          onSingleSelect: onSingleSelectPage,
+          onToggleSelect: onTogglePageSelect,
+          onRangeSelect: onRangeSelectPage,
+          movePageInFile,
+          isDraggingPageRef
+        },
+        page.id
+      ))
+    }
+  );
 };
 var FileDropZone = ({
   targetIndex,