sanity-plugin-workflow 1.0.0-beta.8 → 1.0.0-beta.9

package/lib/index.js

@@ -1072,7 +1072,8 @@ function DocumentCard(props) {
               children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
                 flex: 1,
                 children: /* @__PURE__ */jsxRuntime.jsx(sanity.Preview, {
-                  layout: "block",
+                  layout: "default",
+                  skipVisibilityCheck: true,
                   value: item,
                   schemaType: schema.get(item._type)
                 })
@@ -1126,6 +1127,21 @@ function DocumentCard(props) {
     })]
   });
 }
+function getStyle(draggableStyle, virtualItem) {
+  let transform = "translateY(".concat(virtualItem.start, "px)");
+  if (draggableStyle && draggableStyle.transform) {
+    const draggableTransformY = parseInt(draggableStyle.transform.split(",")[1].split("px")[0], 10);
+    transform = "translateY(".concat(virtualItem.start + draggableTransformY, "px)");
+  }
+  return {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "".concat(virtualItem.size, "px"),
+    transform
+  };
+}
 function DocumentList(props) {
   const {
     data = [],
@@ -1144,17 +1160,20 @@ function DocumentList(props) {
     return data.length ? filterItemsAndSort(data, state.id, selectedUserIds, selectedSchemaTypes) : [];
   }, [data, selectedSchemaTypes, selectedUserIds, state.id]);
   const parentRef = React.useRef(null);
-  const rowVirtualizer = reactVirtual.useVirtualizer({
-    count: data.length,
+  const virtualizer = reactVirtual.useVirtualizer({
+    count: dataFiltered.length,
     getScrollElement: () => parentRef.current,
     getItemKey: index => {
       var _a, _b, _c;
       return (_c = (_b = (_a = dataFiltered[index]) == null ? void 0 : _a._metadata) == null ? void 0 : _b.documentId) != null ? _c : index;
     },
-    estimateSize: () => 113,
-    overscan: 10
+    estimateSize: () => 115,
+    overscan: 7,
+    measureElement: element => {
+      return element.getBoundingClientRect().height || 115;
+    }
   });
-  if (!data.length) {
+  if (!data.length || !dataFiltered.length) {
     return null;
   }
   return /* @__PURE__ */jsxRuntime.jsx("div", {
@@ -1162,44 +1181,53 @@ function DocumentList(props) {
     style: {
       height: "100%",
       overflow: "auto",
-      paddingTop: 1,
       // Smooths scrollbar behaviour
       overflowAnchor: "none",
-      scrollBehavior: "auto"
+      scrollBehavior: "auto",
+      paddingTop: 1
     },
-    children: rowVirtualizer.getVirtualItems().map(virtualItem => {
-      var _a;
-      const item = dataFiltered[virtualItem.index];
-      const {
-        documentId,
-        assignees
-      } = (_a = item == null ? void 0 : item._metadata) != null ? _a : {};
-      if (!documentId) {
-        return null;
-      }
-      const isInvalid = invalidDocumentIds.includes(documentId);
-      const meInAssignees = (user == null ? void 0 : user.id) ? assignees == null ? void 0 : assignees.includes(user.id) : false;
-      const isDragDisabled = patchingIds.includes(documentId) || !userRoleCanDrop || isInvalid || !(state.requireAssignment ? state.requireAssignment && meInAssignees : true);
-      return /* @__PURE__ */jsxRuntime.jsx(dnd.Draggable, {
-        draggableId: documentId,
-        index: virtualItem.index,
-        isDragDisabled,
-        children: (draggableProvided, draggableSnapshot) => /* @__PURE__ */jsxRuntime.jsx("div", {
-          ref: draggableProvided.innerRef,
-          ...draggableProvided.draggableProps,
-          ...draggableProvided.dragHandleProps,
-          children: /* @__PURE__ */jsxRuntime.jsx(DocumentCard, {
-            userRoleCanDrop,
-            isDragDisabled,
-            isPatching: patchingIds.includes(documentId),
-            isDragging: draggableSnapshot.isDragging,
-            item,
-            toggleInvalidDocumentId,
-            userList,
-            states
+    children: /* @__PURE__ */jsxRuntime.jsx("div", {
+      style: {
+        height: "".concat(virtualizer.getTotalSize(), "px"),
+        width: "100%",
+        position: "relative"
+      },
+      children: virtualizer.getVirtualItems().map(virtualItem => {
+        var _a;
+        const item = dataFiltered[virtualItem.index];
+        const {
+          documentId,
+          assignees
+        } = (_a = item == null ? void 0 : item._metadata) != null ? _a : {};
+        const isInvalid = invalidDocumentIds.includes(documentId);
+        const meInAssignees = (user == null ? void 0 : user.id) ? assignees == null ? void 0 : assignees.includes(user.id) : false;
+        const isDragDisabled = patchingIds.includes(documentId) || !userRoleCanDrop || isInvalid || !(state.requireAssignment ? state.requireAssignment && meInAssignees : true);
+        return /* @__PURE__ */jsxRuntime.jsx(dnd.Draggable, {
+          draggableId: documentId,
+          index: virtualItem.index,
+          isDragDisabled,
+          children: (draggableProvided, draggableSnapshot) => /* @__PURE__ */jsxRuntime.jsx("div", {
+            ref: draggableProvided.innerRef,
+            ...draggableProvided.draggableProps,
+            ...draggableProvided.dragHandleProps,
+            style: getStyle(draggableProvided.draggableProps.style, virtualItem),
+            children: /* @__PURE__ */jsxRuntime.jsx("div", {
+              ref: virtualizer.measureElement,
+              "data-index": virtualItem.index,
+              children: /* @__PURE__ */jsxRuntime.jsx(DocumentCard, {
+                userRoleCanDrop,
+                isDragDisabled,
+                isPatching: patchingIds.includes(documentId),
+                isDragging: draggableSnapshot.isDragging,
+                item,
+                toggleInvalidDocumentId,
+                userList,
+                states
+              })
+            })
           })
-        })
-      }, virtualItem.key);
+        }, virtualItem.key);
+      })
     })
   });
 }
@@ -1926,7 +1954,6 @@ function WorkflowTool(props) {
                     ref: provided.innerRef,
                     tone: snapshot.isDraggingOver ? "primary" : defaultCardTone,
                     height: "fill",
-                    paddingTop: 1,
                     children: [loading ? /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
                       padding: 5,
                       align: "center",