@infinite-table/infinite-react 8.0.2 → 8.0.3

package/index.d.ts

@@ -8043,6 +8043,7 @@ type DragItemContextValue = {
 };
 type DraggableItemProps = {
     id: string | number;
+    dragListId?: string;
     children: React$1.ReactNode | ((domProps: React$1.HTMLAttributes<HTMLDivElement>, context: DragItemContextValue) => React$1.ReactNode);
 };
 declare const DRAG_ITEM_ATTRIBUTE = "data-drag-item-id";

package/index.dev.js

@@ -8568,8 +8568,15 @@ var defaultUpdatePosition = (options) => {
 var getDraggableItemId = (node) => {
   return `${node.getAttribute(DRAG_ITEM_ATTRIBUTE)}`;
 };
-function getDraggableItems(domRef) {
+function getDraggableItemNodes(domRef, dragListId) {
   const dragItems = domRef.current?.querySelectorAll(DRAG_ITEM_SELECTOR) ?? [];
+  const result = Array.from(dragItems).filter(
+    (item) => item.getAttribute(DRAG_ITEM_LIST_ATTRIBUTE) === `${dragListId}`
+  );
+  return result;
+}
+function getDraggableItems(domRef, dragListId) {
+  const dragItems = getDraggableItemNodes(domRef, dragListId);
   if (!dragItems || dragItems.length === 0) {
   }
   const draggableItems = Array.from(dragItems).map((item) => {
@@ -8584,7 +8591,7 @@ function getDraggableItems(domRef) {
 }
 function getInteractionTargetData(params) {
   const { domRef, orientation, dragListId } = params;
-  const draggableItems = getDraggableItems(domRef);
+  const draggableItems = getDraggableItems(domRef, dragListId);
   const domRect = domRef.current.getBoundingClientRect();
   let top2 = domRect.top;
   let left2 = domRect.left;
@@ -8907,13 +8914,11 @@ var DragList = (props) => {
   const getDragItems = (0, import_react23.useCallback)(() => {
     let dragItems = dragItemsRef.current;
     if (!dragItems || dragItems.length === 0) {
-      dragItems = Array.from(
-        domRef.current?.querySelectorAll(DRAG_ITEM_SELECTOR) ?? []
-      );
+      dragItems = getDraggableItemNodes(domRef, props.dragListId);
       dragItemsRef.current = dragItems;
     }
     return dragItems;
-  }, []);
+  }, [props.dragListId]);
   const onDragItemPointerDown = (0, import_react23.useCallback)(
     (e) => {
       const target = e.currentTarget;
@@ -8934,9 +8939,7 @@ var DragList = (props) => {
       }
       dragItemId2 = `${dragItemId2}`;
       let dragOperation = null;
-      const dragItems = Array.from(
-        domRef.current?.querySelectorAll(DRAG_ITEM_SELECTOR) ?? []
-      );
+      const dragItems = getDraggableItemNodes(domRef, props.dragListId);
       dragItemsRef.current = dragItems;
       const interactionTarget2 = createInteractionTarget({
         domRef,
@@ -9146,6 +9149,7 @@ var DragList = (props) => {
 };
 var DRAG_LIST_ATTRIBUTE = "data-drag-list-id";
 var DRAG_ITEM_ATTRIBUTE = "data-drag-item-id";
+var DRAG_ITEM_LIST_ATTRIBUTE = "data-drag-item-list-id";
 var DRAG_ITEM_SELECTOR = `[${DRAG_ITEM_ATTRIBUTE}]`;
 var DragItemContext = React33.createContext({
   dragItemId: "",
@@ -9164,21 +9168,30 @@ var DraggableItem = (props) => {
     dragSourceListId,
     dropTargetListId
   } = useDragListContext();
-  const active = dragSourceListId === dragListId && dragItemId === `${props.id}`;
+  const dragItemListId = props.dragListId ?? dragListId;
+  const active = dragSourceListId === dragItemListId && dragItemId === `${props.id}`;
   const contextValue = React33.useMemo(
     () => ({
       dragItemId: props.id,
       active,
-      dragListId,
+      dragListId: dragItemListId,
       draggingInProgress,
       dragSourceListId,
       dropTargetListId
     }),
-    [props.id, active, draggingInProgress, dragSourceListId, dropTargetListId]
+    [
+      props.id,
+      active,
+      dragItemListId,
+      draggingInProgress,
+      dragSourceListId,
+      dropTargetListId
+    ]
   );
   const domProps = {
     // @ts-ignore
-    "data-drag-item-id": `${props.id}`,
+    [DRAG_ITEM_ATTRIBUTE]: `${props.id}`,
+    [DRAG_ITEM_LIST_ATTRIBUTE]: dragItemListId,
     onPointerDown: onDragItemPointerDown,
     className: join(
       "DraggableItem",
@@ -14098,7 +14111,8 @@ var InfiniteHeaderCellDataAttributes = keyMirror({
   "data-column-id": "",
   "data-sort": "",
   "data-sort-index": "",
-  [DRAG_ITEM_ATTRIBUTE]: ""
+  [DRAG_ITEM_ATTRIBUTE]: "",
+  [DRAG_ITEM_LIST_ATTRIBUTE]: ""
 });
 function InfiniteTableHeaderCellFn(props) {
   const column = props.column;
@@ -14413,6 +14427,7 @@ function InfiniteTableHeaderCellFn(props) {
     "data-field": `${column.field || ""}`,
     "data-column-id": column.id,
     [DRAG_ITEM_ATTRIBUTE]: column.id,
+    [DRAG_ITEM_LIST_ATTRIBUTE]: "header",
     "data-header-align": align2,
     "data-name": "HeaderCell",
     "data-sort": column.computedSortedAsc ? "asc" : column.computedSortedDesc ? "desc" : "none",
@@ -26919,7 +26934,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "8.0.2"
+      version: "8.0.3"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.dev.mjs

@@ -8498,8 +8498,15 @@ var defaultUpdatePosition = (options) => {
 var getDraggableItemId = (node) => {
   return `${node.getAttribute(DRAG_ITEM_ATTRIBUTE)}`;
 };
-function getDraggableItems(domRef) {
+function getDraggableItemNodes(domRef, dragListId) {
   const dragItems = domRef.current?.querySelectorAll(DRAG_ITEM_SELECTOR) ?? [];
+  const result = Array.from(dragItems).filter(
+    (item) => item.getAttribute(DRAG_ITEM_LIST_ATTRIBUTE) === `${dragListId}`
+  );
+  return result;
+}
+function getDraggableItems(domRef, dragListId) {
+  const dragItems = getDraggableItemNodes(domRef, dragListId);
   if (!dragItems || dragItems.length === 0) {
   }
   const draggableItems = Array.from(dragItems).map((item) => {
@@ -8514,7 +8521,7 @@ function getDraggableItems(domRef) {
 }
 function getInteractionTargetData(params) {
   const { domRef, orientation, dragListId } = params;
-  const draggableItems = getDraggableItems(domRef);
+  const draggableItems = getDraggableItems(domRef, dragListId);
   const domRect = domRef.current.getBoundingClientRect();
   let top2 = domRect.top;
   let left2 = domRect.left;
@@ -8837,13 +8844,11 @@ var DragList = (props) => {
   const getDragItems = useCallback17(() => {
     let dragItems = dragItemsRef.current;
     if (!dragItems || dragItems.length === 0) {
-      dragItems = Array.from(
-        domRef.current?.querySelectorAll(DRAG_ITEM_SELECTOR) ?? []
-      );
+      dragItems = getDraggableItemNodes(domRef, props.dragListId);
       dragItemsRef.current = dragItems;
     }
     return dragItems;
-  }, []);
+  }, [props.dragListId]);
   const onDragItemPointerDown = useCallback17(
     (e) => {
       const target = e.currentTarget;
@@ -8864,9 +8869,7 @@ var DragList = (props) => {
       }
       dragItemId2 = `${dragItemId2}`;
       let dragOperation = null;
-      const dragItems = Array.from(
-        domRef.current?.querySelectorAll(DRAG_ITEM_SELECTOR) ?? []
-      );
+      const dragItems = getDraggableItemNodes(domRef, props.dragListId);
       dragItemsRef.current = dragItems;
       const interactionTarget2 = createInteractionTarget({
         domRef,
@@ -9076,6 +9079,7 @@ var DragList = (props) => {
 };
 var DRAG_LIST_ATTRIBUTE = "data-drag-list-id";
 var DRAG_ITEM_ATTRIBUTE = "data-drag-item-id";
+var DRAG_ITEM_LIST_ATTRIBUTE = "data-drag-item-list-id";
 var DRAG_ITEM_SELECTOR = `[${DRAG_ITEM_ATTRIBUTE}]`;
 var DragItemContext = React33.createContext({
   dragItemId: "",
@@ -9094,21 +9098,30 @@ var DraggableItem = (props) => {
     dragSourceListId,
     dropTargetListId
   } = useDragListContext();
-  const active = dragSourceListId === dragListId && dragItemId === `${props.id}`;
+  const dragItemListId = props.dragListId ?? dragListId;
+  const active = dragSourceListId === dragItemListId && dragItemId === `${props.id}`;
   const contextValue = React33.useMemo(
     () => ({
       dragItemId: props.id,
       active,
-      dragListId,
+      dragListId: dragItemListId,
       draggingInProgress,
       dragSourceListId,
       dropTargetListId
     }),
-    [props.id, active, draggingInProgress, dragSourceListId, dropTargetListId]
+    [
+      props.id,
+      active,
+      dragItemListId,
+      draggingInProgress,
+      dragSourceListId,
+      dropTargetListId
+    ]
   );
   const domProps = {
     // @ts-ignore
-    "data-drag-item-id": `${props.id}`,
+    [DRAG_ITEM_ATTRIBUTE]: `${props.id}`,
+    [DRAG_ITEM_LIST_ATTRIBUTE]: dragItemListId,
     onPointerDown: onDragItemPointerDown,
     className: join(
       "DraggableItem",
@@ -14028,7 +14041,8 @@ var InfiniteHeaderCellDataAttributes = keyMirror({
   "data-column-id": "",
   "data-sort": "",
   "data-sort-index": "",
-  [DRAG_ITEM_ATTRIBUTE]: ""
+  [DRAG_ITEM_ATTRIBUTE]: "",
+  [DRAG_ITEM_LIST_ATTRIBUTE]: ""
 });
 function InfiniteTableHeaderCellFn(props) {
   const column = props.column;
@@ -14343,6 +14357,7 @@ function InfiniteTableHeaderCellFn(props) {
     "data-field": `${column.field || ""}`,
     "data-column-id": column.id,
     [DRAG_ITEM_ATTRIBUTE]: column.id,
+    [DRAG_ITEM_LIST_ATTRIBUTE]: "header",
     "data-header-align": align2,
     "data-name": "HeaderCell",
     "data-sort": column.computedSortedAsc ? "asc" : column.computedSortedDesc ? "desc" : "none",
@@ -26858,7 +26873,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "8.0.2"
+      version: "8.0.3"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;