@payloadcms/ui 3.33.0-canary.1 → 3.33.0-canary.3

package/dist/elements/DraggableSortable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DraggableSortable/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAEvC,OAAO,EAAE,KAAK,EAAE,CAAA;AAEhB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuD7C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DraggableSortable/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAEvC,OAAO,EAAE,KAAK,EAAE,CAAA;AAEhB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuE7C,CAAA"}

package/dist/elements/DraggableSortable/index.js

@@ -6,12 +6,13 @@ import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useDroppable,
 import { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
 import React, { useCallback, useId } from 'react';
 export const DraggableSortable = props => {
-  const $ = _c(15);
+  const $ = _c(18);
   const {
     children,
     className,
     ids,
-    onDragEnd
+    onDragEnd,
+    onDragStart
   } = props;
   const id = useId();
   let t0;
@@ -75,11 +76,34 @@ export const DraggableSortable = props => {
   }
   const handleDragEnd = t3;
   let t4;
-  if ($[7] !== children || $[8] !== className || $[9] !== handleDragEnd || $[10] !== id || $[11] !== ids || $[12] !== sensors || $[13] !== setNodeRef) {
-    t4 = _jsx(DndContext, {
+  if ($[7] !== onDragStart) {
+    t4 = event_0 => {
+      const {
+        active: active_0
+      } = event_0;
+      if (!active_0) {
+        return;
+      }
+      if (typeof onDragStart === "function") {
+        onDragStart({
+          id: active_0.id,
+          event: event_0
+        });
+      }
+    };
+    $[7] = onDragStart;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  const handleDragStart = t4;
+  let t5;
+  if ($[9] !== children || $[10] !== className || $[11] !== handleDragEnd || $[12] !== handleDragStart || $[13] !== id || $[14] !== ids || $[15] !== sensors || $[16] !== setNodeRef) {
+    t5 = _jsx(DndContext, {
       collisionDetection: closestCenter,
       id,
       onDragEnd: handleDragEnd,
+      onDragStart: handleDragStart,
       sensors,
       children: _jsx(SortableContext, {
         items: ids,
@@ -90,17 +114,18 @@ export const DraggableSortable = props => {
         })
       })
     });
-    $[7] = children;
-    $[8] = className;
-    $[9] = handleDragEnd;
-    $[10] = id;
-    $[11] = ids;
-    $[12] = sensors;
-    $[13] = setNodeRef;
-    $[14] = t4;
+    $[9] = children;
+    $[10] = className;
+    $[11] = handleDragEnd;
+    $[12] = handleDragStart;
+    $[13] = id;
+    $[14] = ids;
+    $[15] = sensors;
+    $[16] = setNodeRef;
+    $[17] = t5;
   } else {
-    t4 = $[14];
+    t5 = $[17];
   }
-  return t4;
+  return t5;
 };
 //# sourceMappingURL=index.js.map

package/dist/elements/DraggableSortable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","closestCenter","DndContext","KeyboardSensor","PointerSensor","useDroppable","useSensor","useSensors","SortableContext","sortableKeyboardCoordinates","React","useCallback","useId","DraggableSortable","props","$","children","className","ids","onDragEnd","id","t0","setNodeRef","t1","Symbol","for","activationConstraint","distance","t2","coordinateGetter","sensors","t3","event","active","over","activatorEvent","stopPropagation","moveFromIndex","findIndex","_id","moveToIndex","_id_0","handleDragEnd","t4","_jsx","collisionDetection","items","ref"],"sources":["../../../src/elements/DraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { DragEndEvent } from '@dnd-kit/core'\n\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useDroppable,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core'\nimport { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'\nimport React, { useCallback, useId } from 'react'\n\nimport type { Props } from './types.js'\n\nexport { Props }\n\nexport const DraggableSortable: React.FC<Props> = (props) => {\n  const { children, className, ids, onDragEnd } = props\n\n  const id = useId()\n\n  const { setNodeRef } = useDroppable({\n    id,\n  })\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  )\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event\n\n      event.activatorEvent.stopPropagation()\n\n      if (!active || !over) {\n        return\n      }\n\n      if (typeof onDragEnd === 'function') {\n        onDragEnd({\n          event,\n          moveFromIndex: ids.findIndex((_id) => _id === active.id),\n          moveToIndex: ids.findIndex((_id) => _id === over.id),\n        })\n      }\n    },\n    [onDragEnd, ids],\n  )\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={id}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <SortableContext items={ids}>\n        <div className={className} ref={setNodeRef}>\n          {children}\n        </div>\n      </SortableContext>\n    </DndContext>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SACEC,aAAa,EACbC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,SAAS,EACTC,UAAU,QACL;AACP,SAASC,eAAe,EAAEC,2BAA2B,QAAQ;AAC7D,OAAOC,KAAA,IAASC,WAAW,EAAEC,KAAK,QAAQ;AAM1C,OAAO,MAAMC,iBAAA,GAAqCC,KAAA;EAAA,MAAAC,CAAA,GAAAf,EAAA;EAChD;IAAAgB,QAAA;IAAAC,SAAA;IAAAC,GAAA;IAAAC;EAAA,IAAgDL,KAAA;EAEhD,MAAAM,EAAA,GAAWR,KAAA;EAAA,IAAAS,EAAA;EAAA,IAAAN,CAAA,QAAAK,EAAA;IAEyBC,EAAA;MAAAD;IAAA;IAEpCL,CAAA,MAAAK,EAAA;IAAAL,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAFA;IAAAO;EAAA,IAAuBjB,YAAA,CAAagB,EAEpC;EAAA,IAAAE,EAAA;EAAA,IAAAR,CAAA,QAAAS,MAAA,CAAAC,GAAA;IAG2BF,EAAA;MAAAG,oBAAA;QAAAC,QAAA;MAAA;IAAA;IAIzBZ,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAAA,IAAAa,EAAA;EAAA,IAAAb,CAAA,QAAAS,MAAA,CAAAC,GAAA;IAC0BG,EAAA;MAAAC,gBAAA,EAAApB;IAAA;IAE1BM,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EARF,MAAAe,OAAA,GAAgBvB,UAAA,CACdD,SAAA,CAAAF,aAAA,EAAyBmB,EAIzB,GACAjB,SAAA,CAAAH,cAAA,EAA0ByB,EAE1B;EAAA,IAAAG,EAAA;EAAA,IAAAhB,CAAA,QAAAG,GAAA,IAAAH,CAAA,QAAAI,SAAA;IAIAY,EAAA,GAAAC,KAAA;MACE;QAAAC,MAAA;QAAAC;MAAA,IAAyBF,KAAA;MAEzBA,KAAA,CAAAG,cAAA,CAAAC,eAAA,CAAoC;MAAA,IAEhC,CAACH,MAAA,KAAWC,IAAA;QAAA;MAAA;MAAA,IAIZ,OAAOf,SAAA,KAAc;QACvBA,SAAA;UAAAa,KAAA;UAAAK,aAAA,EAEiBnB,GAAA,CAAAoB,SAAA,CAAAC,GAAA,IAAuBA,GAAA,KAAQN,MAAA,CAAAb,EAAS;UAAAoB,WAAA,EAC1CtB,GAAA,CAAAoB,SAAA,CAAAG,KAAA,IAAuBF,KAAA,KAAQL,IAAA,CAAAd,EAAO;QAAA,CACrD;MAAA;IAAA;IAEJL,CAAA,MAAAG,GAAA;IAAAH,CAAA,MAAAI,SAAA;IAAAJ,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAjBF,MAAA2B,aAAA,GAAsBX,EAkBJ;EAAA,IAAAY,EAAA;EAAA,IAAA5B,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAA2B,aAAA,IAAA3B,CAAA,SAAAK,EAAA,IAAAL,CAAA,SAAAG,GAAA,IAAAH,CAAA,SAAAe,OAAA,IAAAf,CAAA,SAAAO,UAAA;IAIhBqB,EAAA,GAAAC,IAAA,CAAA1C,UAAA;MAAA2C,kBAAA,EAAA5C,aAAA;MAAAmB,EAAA;MAAAD,SAAA,EAGauB,aAAA;MAAAZ,OAAA;MAAAd,QAAA,EAGX4B,IAAA,CAAApC,eAAA;QAAAsC,KAAA,EAAwB5B,GAAA;QAAAF,QAAA,EACtB4B,IAAA,CAAC;UAAA3B,SAAA;UAAA8B,GAAA,EAA+BzB,UAAA;UAAAN;QAAA,C;;;;;;;;;;;;;;SAPpC2B,E;CAaJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","closestCenter","DndContext","KeyboardSensor","PointerSensor","useDroppable","useSensor","useSensors","SortableContext","sortableKeyboardCoordinates","React","useCallback","useId","DraggableSortable","props","$","children","className","ids","onDragEnd","onDragStart","id","t0","setNodeRef","t1","Symbol","for","activationConstraint","distance","t2","coordinateGetter","sensors","t3","event","active","over","activatorEvent","stopPropagation","moveFromIndex","findIndex","_id","moveToIndex","_id_0","handleDragEnd","t4","event_0","active_0","handleDragStart","t5","_jsx","collisionDetection","items","ref"],"sources":["../../../src/elements/DraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { DragEndEvent, DragStartEvent } from '@dnd-kit/core'\n\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useDroppable,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core'\nimport { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'\nimport React, { useCallback, useId } from 'react'\n\nimport type { Props } from './types.js'\n\nexport { Props }\n\nexport const DraggableSortable: React.FC<Props> = (props) => {\n  const { children, className, ids, onDragEnd, onDragStart } = props\n\n  const id = useId()\n\n  const { setNodeRef } = useDroppable({\n    id,\n  })\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  )\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event\n\n      event.activatorEvent.stopPropagation()\n\n      if (!active || !over) {\n        return\n      }\n\n      if (typeof onDragEnd === 'function') {\n        onDragEnd({\n          event,\n          moveFromIndex: ids.findIndex((_id) => _id === active.id),\n          moveToIndex: ids.findIndex((_id) => _id === over.id),\n        })\n      }\n    },\n    [onDragEnd, ids],\n  )\n\n  const handleDragStart = useCallback(\n    (event: DragStartEvent) => {\n      const { active } = event\n\n      if (!active) {\n        return\n      }\n\n      if (typeof onDragStart === 'function') {\n        onDragStart({ id: active.id, event })\n      }\n    },\n    [onDragStart],\n  )\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={id}\n      onDragEnd={handleDragEnd}\n      onDragStart={handleDragStart}\n      sensors={sensors}\n    >\n      <SortableContext items={ids}>\n        <div className={className} ref={setNodeRef}>\n          {children}\n        </div>\n      </SortableContext>\n    </DndContext>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/DraggableSortable/types.d.ts

@@ -1,4 +1,4 @@
-import type { DragEndEvent } from '@dnd-kit/core';
+import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
 import type { Ref } from 'react';
 export type Props = {
     children: React.ReactNode;
@@ -10,5 +10,9 @@ export type Props = {
         moveFromIndex: number;
         moveToIndex: number;
     }) => void;
+    onDragStart?: (e: {
+        event: DragStartEvent;
+        id: number | string;
+    }) => void;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/elements/DraggableSortable/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DraggableSortable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;IAC/B,GAAG,EAAE,MAAM,EAAE,CAAA;IACb,SAAS,EAAE,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,aAAa,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CAC5F,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DraggableSortable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;IAC/B,GAAG,EAAE,MAAM,EAAE,CAAA;IACb,SAAS,EAAE,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,aAAa,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC3F,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,cAAc,CAAC;QAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CAC1E,CAAA"}

package/dist/elements/DraggableSortable/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/DraggableSortable/types.ts"],"sourcesContent":["import type { DragEndEvent } from '@dnd-kit/core'\nimport type { Ref } from 'react'\n\nexport type Props = {\n  children: React.ReactNode\n  className?: string\n  droppableRef?: Ref<HTMLElement>\n  ids: string[]\n  onDragEnd: (e: { event: DragEndEvent; moveFromIndex: number; moveToIndex: number }) => void\n}\n"],"mappings":"AAGA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/DraggableSortable/types.ts"],"sourcesContent":["import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core'\nimport type { Ref } from 'react'\n\nexport type Props = {\n  children: React.ReactNode\n  className?: string\n  droppableRef?: Ref<HTMLElement>\n  ids: string[]\n  onDragEnd: (e: { event: DragEndEvent; moveFromIndex: number; moveToIndex: number }) => void\n  onDragStart?: (e: { event: DragStartEvent; id: number | string }) => void\n}\n"],"mappings":"AAGA","ignoreList":[]}

package/dist/elements/Table/OrderableRow.d.ts

@@ -0,0 +1,13 @@
+import type { DraggableSyntheticListeners } from '@dnd-kit/core';
+import type { Column } from 'payload';
+import type { HTMLAttributes, Ref } from 'react';
+export type Props = {
+    readonly cellMap: Record<string, number>;
+    readonly columns: Column[];
+    readonly dragAttributes?: HTMLAttributes<unknown>;
+    readonly dragListeners?: DraggableSyntheticListeners;
+    readonly ref?: Ref<HTMLTableRowElement>;
+    readonly rowId: number | string;
+} & HTMLAttributes<HTMLTableRowElement>;
+export declare const OrderableRow: ({ cellMap, columns, dragAttributes, dragListeners, rowId, ...rest }: Props) => import("react").JSX.Element;
+//# sourceMappingURL=OrderableRow.d.ts.map

package/dist/elements/Table/OrderableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderableRow.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/OrderableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAA;IAC1B,QAAQ,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IACjD,QAAQ,CAAC,aAAa,CAAC,EAAE,2BAA2B,CAAA;IACpD,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAA;IACvC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAChC,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAA;AAEvC,eAAO,MAAM,YAAY,wEAOtB,KAAK,gCA0BP,CAAA"}

package/dist/elements/Table/OrderableRow.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const OrderableRow = ({
+  cellMap,
+  columns,
+  dragAttributes = {},
+  dragListeners = {},
+  rowId,
+  ...rest
+}) => /*#__PURE__*/_jsx("tr", {
+  ...rest,
+  children: columns.map((col, colIndex) => {
+    const {
+      accessor
+    } = col;
+    // Use the cellMap to find which index in the renderedCells to use
+    const cell = col.renderedCells[cellMap[rowId]];
+    // For drag handles, wrap in div with drag attributes
+    if (accessor === '_dragHandle') {
+      return /*#__PURE__*/_jsx("td", {
+        className: `cell-${accessor}`,
+        children: /*#__PURE__*/_jsx("div", {
+          ...dragAttributes,
+          ...dragListeners,
+          children: cell
+        })
+      }, colIndex);
+    }
+    return /*#__PURE__*/_jsx("td", {
+      className: `cell-${accessor}`,
+      children: cell
+    }, colIndex);
+  })
+});
+//# sourceMappingURL=OrderableRow.js.map

package/dist/elements/Table/OrderableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderableRow.js","names":["OrderableRow","cellMap","columns","dragAttributes","dragListeners","rowId","rest","_jsx","map","col","colIndex","accessor","cell","renderedCells","className"],"sources":["../../../src/elements/Table/OrderableRow.tsx"],"sourcesContent":["import type { DraggableSyntheticListeners } from '@dnd-kit/core'\nimport type { Column } from 'payload'\nimport type { HTMLAttributes, Ref } from 'react'\n\nexport type Props = {\n  readonly cellMap: Record<string, number>\n  readonly columns: Column[]\n  readonly dragAttributes?: HTMLAttributes<unknown>\n  readonly dragListeners?: DraggableSyntheticListeners\n  readonly ref?: Ref<HTMLTableRowElement>\n  readonly rowId: number | string\n} & HTMLAttributes<HTMLTableRowElement>\n\nexport const OrderableRow = ({\n  cellMap,\n  columns,\n  dragAttributes = {},\n  dragListeners = {},\n  rowId,\n  ...rest\n}: Props) => (\n  <tr {...rest}>\n    {columns.map((col, colIndex) => {\n      const { accessor } = col\n\n      // Use the cellMap to find which index in the renderedCells to use\n      const cell = col.renderedCells[cellMap[rowId]]\n\n      // For drag handles, wrap in div with drag attributes\n      if (accessor === '_dragHandle') {\n        return (\n          <td className={`cell-${accessor}`} key={colIndex}>\n            <div {...dragAttributes} {...dragListeners}>\n              {cell}\n            </div>\n          </td>\n        )\n      }\n\n      return (\n        <td className={`cell-${accessor}`} key={colIndex}>\n          {cell}\n        </td>\n      )\n    })}\n  </tr>\n)\n"],"mappings":";AAaA,OAAO,MAAMA,YAAA,GAAeA,CAAC;EAC3BC,OAAO;EACPC,OAAO;EACPC,cAAA,GAAiB,CAAC,CAAC;EACnBC,aAAA,GAAgB,CAAC,CAAC;EAClBC,KAAK;EACL,GAAGC;AAAA,CACG,kBACNC,IAAA,CAAC;EAAI,GAAGD,IAAI;YACTJ,OAAA,CAAQM,GAAG,CAAC,CAACC,GAAA,EAAKC,QAAA;IACjB,MAAM;MAAEC;IAAQ,CAAE,GAAGF,GAAA;IAErB;IACA,MAAMG,IAAA,GAAOH,GAAA,CAAII,aAAa,CAACZ,OAAO,CAACI,KAAA,CAAM,CAAC;IAE9C;IACA,IAAIM,QAAA,KAAa,eAAe;MAC9B,oBACEJ,IAAA,CAAC;QAAGO,SAAA,EAAW,QAAQH,QAAA,EAAU;kBAC/B,aAAAJ,IAAA,CAAC;UAAK,GAAGJ,cAAc;UAAG,GAAGC,aAAa;oBACvCQ;;SAFmCF,QAAA;IAM5C;IAEA,oBACEH,IAAA,CAAC;MAAGO,SAAA,EAAW,QAAQH,QAAA,EAAU;gBAC9BC;OADqCF,QAAA;EAI5C","ignoreList":[]}

package/dist/elements/Table/OrderableRowDragPreview.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export type Props = {
+    readonly children: ReactNode;
+    readonly className?: string;
+    readonly rowId?: number | string;
+};
+export declare const OrderableRowDragPreview: ({ children, className, rowId }: Props) => import("react").JSX.Element;
+//# sourceMappingURL=OrderableRowDragPreview.d.ts.map

package/dist/elements/Table/OrderableRowDragPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderableRowDragPreview.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/OrderableRowDragPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,uBAAuB,mCAAoC,KAAK,gCAO1E,CAAA"}

package/dist/elements/Table/OrderableRowDragPreview.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const OrderableRowDragPreview = ({
+  children,
+  className,
+  rowId
+}) => typeof rowId === 'undefined' ? null : /*#__PURE__*/_jsx("div", {
+  className: className,
+  children: /*#__PURE__*/_jsx("table", {
+    cellPadding: 0,
+    cellSpacing: 0,
+    children: /*#__PURE__*/_jsx("tbody", {
+      children: children
+    })
+  })
+});
+//# sourceMappingURL=OrderableRowDragPreview.js.map

package/dist/elements/Table/OrderableRowDragPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderableRowDragPreview.js","names":["OrderableRowDragPreview","children","className","rowId","_jsx","cellPadding","cellSpacing"],"sources":["../../../src/elements/Table/OrderableRowDragPreview.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nexport type Props = {\n  readonly children: ReactNode\n  readonly className?: string\n  readonly rowId?: number | string\n}\n\nexport const OrderableRowDragPreview = ({ children, className, rowId }: Props) =>\n  typeof rowId === 'undefined' ? null : (\n    <div className={className}>\n      <table cellPadding={0} cellSpacing={0}>\n        <tbody>{children}</tbody>\n      </table>\n    </div>\n  )\n"],"mappings":";AAQA,OAAO,MAAMA,uBAAA,GAA0BA,CAAC;EAAEC,QAAQ;EAAEC,SAAS;EAAEC;AAAK,CAAS,KAC3E,OAAOA,KAAA,KAAU,cAAc,oBAC7BC,IAAA,CAAC;EAAIF,SAAA,EAAWA,SAAA;YACd,aAAAE,IAAA,CAAC;IAAMC,WAAA,EAAa;IAAGC,WAAA,EAAa;cAClC,aAAAF,IAAA,CAAC;gBAAOH","ignoreList":[]}

package/dist/elements/Table/OrderableTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrderableTable.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/OrderableTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,EAAyB,MAAM,SAAS,CAAA;AAEpF,OAAO,cAAc,CAAA;AAErB,OAAO,KAA8B,MAAM,OAAO,CAAA;AASlD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC7C,QAAQ,CAAC,UAAU,EAAE,sBAAsB,CAAA;IAC3C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+K1C,CAAA"}
+{"version":3,"file":"OrderableTable.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/OrderableTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,EAAyB,MAAM,SAAS,CAAA;AAEpF,OAAO,cAAc,CAAA;AAGrB,OAAO,KAA8B,MAAM,OAAO,CAAA;AAWlD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC7C,QAAQ,CAAC,UAAU,EAAE,sBAAsB,CAAA;IAC3C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgL1C,CAAA"}

package/dist/elements/Table/OrderableTable.js

@@ -2,11 +2,14 @@
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './index.scss';
+import { DragOverlay } from '@dnd-kit/core';
 import React, { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import { DraggableSortableItem } from '../DraggableSortable/DraggableSortableItem/index.js';
 import { DraggableSortable } from '../DraggableSortable/index.js';
+import { OrderableRow } from './OrderableRow.js';
+import { OrderableRowDragPreview } from './OrderableRowDragPreview.js';
 const baseClass = 'table';
 export const OrderableTable = ({
   appearance = 'default',
@@ -26,6 +29,7 @@ export const OrderableTable = ({
   const [localData, setLocalData] = useState(serverData);
   // id -> index for each column
   const [cellMap, setCellMap] = useState({});
+  const [dragActiveRowId, setDragActiveRowId] = useState();
   // Update local data when server data changes
   useEffect(() => {
     setLocalData(serverData);
@@ -43,9 +47,11 @@ export const OrderableTable = ({
   }) => {
     if (query.sort !== orderableFieldName && query.sort !== `-${orderableFieldName}`) {
       toast.warning('To reorder the rows you must first sort them by the "Order" column');
+      setDragActiveRowId(undefined);
       return;
     }
     if (moveFromIndex === moveToIndex) {
+      setDragActiveRowId(undefined);
       return;
     }
     const movedId = localData[moveFromIndex].id ?? localData[moveFromIndex]._id;
@@ -96,15 +102,23 @@ export const OrderableTable = ({
       // Rollback to previous state if the request fails
       setLocalData(previousData);
       toast.error(error);
+    } finally {
+      setDragActiveRowId(undefined);
     }
   };
+  const handleDragStart = ({
+    id
+  }) => {
+    setDragActiveRowId(id);
+  };
   const rowIds = localData.map(row => row.id ?? row._id);
   return /*#__PURE__*/_jsx("div", {
     className: [baseClass, appearance && `${baseClass}--appearance-${appearance}`].filter(Boolean).join(' '),
-    children: /*#__PURE__*/_jsx(DraggableSortable, {
+    children: /*#__PURE__*/_jsxs(DraggableSortable, {
       ids: rowIds,
       onDragEnd: handleDragEnd,
-      children: /*#__PURE__*/_jsxs("table", {
+      onDragStart: handleDragStart,
+      children: [/*#__PURE__*/_jsxs("table", {
         cellPadding: "0",
         cellSpacing: "0",
         children: [/*#__PURE__*/_jsx("thead", {
@@ -119,43 +133,38 @@ export const OrderableTable = ({
             id: rowIds[rowIndex],
             children: ({
               attributes,
+              isDragging,
               listeners,
               setNodeRef,
               transform,
               transition
-            }) => /*#__PURE__*/_jsx("tr", {
+            }) => /*#__PURE__*/_jsx(OrderableRow, {
+              cellMap: cellMap,
               className: `row-${rowIndex + 1}`,
+              columns: activeColumns,
+              dragAttributes: attributes,
+              dragListeners: listeners,
               ref: setNodeRef,
+              rowId: row_0.id ?? row_0._id,
               style: {
+                opacity: isDragging ? 0 : 1,
                 transform,
                 transition
-              },
-              children: activeColumns.map((col_2, colIndex) => {
-                const {
-                  accessor
-                } = col_2;
-                // Use the cellMap to find which index in the renderedCells to use
-                const cell = col_2.renderedCells[cellMap[row_0.id ?? row_0._id]];
-                // For drag handles, wrap in div with drag attributes
-                if (accessor === '_dragHandle') {
-                  return /*#__PURE__*/_jsx("td", {
-                    className: `cell-${accessor}`,
-                    children: /*#__PURE__*/_jsx("div", {
-                      ...attributes,
-                      ...listeners,
-                      children: cell
-                    })
-                  }, colIndex);
-                }
-                return /*#__PURE__*/_jsx("td", {
-                  className: `cell-${accessor}`,
-                  children: cell
-                }, colIndex);
-              })
+              }
             })
           }, rowIds[rowIndex]))
         })]
-      })
+      }), /*#__PURE__*/_jsx(DragOverlay, {
+        children: /*#__PURE__*/_jsx(OrderableRowDragPreview, {
+          className: [baseClass, `${baseClass}--drag-preview`].join(' '),
+          rowId: dragActiveRowId,
+          children: /*#__PURE__*/_jsx(OrderableRow, {
+            cellMap: cellMap,
+            columns: activeColumns,
+            rowId: dragActiveRowId
+          })
+        })
+      })]
     })
   });
 };

package/dist/elements/Table/OrderableTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderableTable.js","names":["React","useEffect","useState","toast","useListQuery","DraggableSortableItem","DraggableSortable","baseClass","OrderableTable","appearance","collection","columns","data","initialData","listQueryData","handleSortChange","orderableFieldName","query","serverData","docs","localData","setLocalData","cellMap","setCellMap","Object","fromEntries","map","item","index","String","id","_id","activeColumns","filter","col","active","includes","accessor","length","_jsx","handleDragEnd","moveFromIndex","moveToIndex","sort","warning","movedId","newBeforeRow","newAfterRow","previousData","currentData","newData","splice","target","key","newKeyWillBe","jsonBody","collectionSlug","slug","docsToMove","response","fetch","body","JSON","stringify","headers","method","status","Error","ok","err","error","message","rowIds","row","className","Boolean","join","ids","onDragEnd","_jsxs","cellPadding","cellSpacing","i","Heading","rowIndex","children","attributes","listeners","setNodeRef","transform","transition","ref","style","colIndex","cell","renderedCells"],"sources":["../../../src/elements/Table/OrderableTable.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, Column, OrderableEndpointBody } from 'payload'\n\nimport './index.scss'\n\nimport React, { useEffect, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { DraggableSortableItem } from '../DraggableSortable/DraggableSortableItem/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\n\nconst baseClass = 'table'\n\nexport type Props = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly collection: ClientCollectionConfig\n  readonly columns?: Column[]\n  readonly data: Record<string, unknown>[]\n}\n\nexport const OrderableTable: React.FC<Props> = ({\n  appearance = 'default',\n  collection,\n  columns,\n  data: initialData,\n}) => {\n  const { data: listQueryData, handleSortChange, orderableFieldName, query } = useListQuery()\n  // Use the data from ListQueryProvider if available, otherwise use the props\n  const serverData = listQueryData?.docs || initialData\n\n  // Local state to track the current order of rows\n  const [localData, setLocalData] = useState(serverData)\n\n  // id -> index for each column\n  const [cellMap, setCellMap] = useState<Record<string, number>>({})\n\n  // Update local data when server data changes\n  useEffect(() => {\n    setLocalData(serverData)\n    setCellMap(\n      Object.fromEntries(serverData.map((item, index) => [String(item.id ?? item._id), index])),\n    )\n  }, [serverData])\n\n  const activeColumns = columns?.filter((col) => col?.active)\n\n  if (\n    !activeColumns ||\n    activeColumns.filter((col) => !['_dragHandle', '_select'].includes(col.accessor)).length === 0\n  ) {\n    return <div>No columns selected</div>\n  }\n\n  const handleDragEnd = async ({ moveFromIndex, moveToIndex }) => {\n    if (query.sort !== orderableFieldName && query.sort !== `-${orderableFieldName}`) {\n      toast.warning('To reorder the rows you must first sort them by the \"Order\" column')\n      return\n    }\n\n    if (moveFromIndex === moveToIndex) {\n      return\n    }\n\n    const movedId = localData[moveFromIndex].id ?? localData[moveFromIndex]._id\n    const newBeforeRow =\n      moveToIndex > moveFromIndex ? localData[moveToIndex] : localData[moveToIndex - 1]\n    const newAfterRow =\n      moveToIndex > moveFromIndex ? localData[moveToIndex + 1] : localData[moveToIndex]\n\n    // Store the original data for rollback\n    const previousData = [...localData]\n\n    // Optimisitc update of local state to reorder the rows\n    setLocalData((currentData) => {\n      const newData = [...currentData]\n      // Update the rendered cell for the moved row to show \"pending\"\n      newData[moveFromIndex][orderableFieldName] = `pending`\n      // Move the item in the array\n      newData.splice(moveToIndex, 0, newData.splice(moveFromIndex, 1)[0])\n      return newData\n    })\n\n    try {\n      const target: OrderableEndpointBody['target'] = newBeforeRow\n        ? {\n            id: newBeforeRow.id ?? newBeforeRow._id,\n            key: newBeforeRow[orderableFieldName],\n          }\n        : {\n            id: newAfterRow.id ?? newAfterRow._id,\n            key: newAfterRow[orderableFieldName],\n          }\n\n      const newKeyWillBe =\n        (newBeforeRow && query.sort === orderableFieldName) ||\n        (!newBeforeRow && query.sort === `-${orderableFieldName}`)\n          ? 'greater'\n          : 'less'\n\n      const jsonBody: OrderableEndpointBody = {\n        collectionSlug: collection.slug,\n        docsToMove: [movedId],\n        newKeyWillBe,\n        orderableFieldName,\n        target,\n      }\n\n      const response = await fetch(`/api/reorder`, {\n        body: JSON.stringify(jsonBody),\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        method: 'POST',\n      })\n\n      if (response.status === 403) {\n        throw new Error('You do not have permission to reorder these rows')\n      }\n\n      if (!response.ok) {\n        throw new Error(\n          'Failed to reorder. This can happen if you reorder several rows too quickly. Please try again.',\n        )\n      }\n    } catch (err) {\n      const error = err instanceof Error ? err.message : String(err)\n      // Rollback to previous state if the request fails\n      setLocalData(previousData)\n      toast.error(error)\n    }\n  }\n\n  const rowIds = localData.map((row) => row.id ?? row._id)\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <DraggableSortable ids={rowIds} onDragEnd={handleDragEnd}>\n        <table cellPadding=\"0\" cellSpacing=\"0\">\n          <thead>\n            <tr>\n              {activeColumns.map((col, i) => (\n                <th id={`heading-${col.accessor}`} key={i}>\n                  {col.Heading}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {localData.map((row, rowIndex) => (\n              <DraggableSortableItem id={rowIds[rowIndex]} key={rowIds[rowIndex]}>\n                {({ attributes, listeners, setNodeRef, transform, transition }) => (\n                  <tr\n                    className={`row-${rowIndex + 1}`}\n                    ref={setNodeRef}\n                    style={{\n                      transform,\n                      transition,\n                    }}\n                  >\n                    {activeColumns.map((col, colIndex) => {\n                      const { accessor } = col\n\n                      // Use the cellMap to find which index in the renderedCells to use\n                      const cell = col.renderedCells[cellMap[row.id ?? row._id]]\n\n                      // For drag handles, wrap in div with drag attributes\n                      if (accessor === '_dragHandle') {\n                        return (\n                          <td className={`cell-${accessor}`} key={colIndex}>\n                            <div {...attributes} {...listeners}>\n                              {cell}\n                            </div>\n                          </td>\n                        )\n                      }\n\n                      return (\n                        <td className={`cell-${accessor}`} key={colIndex}>\n                          {cell}\n                        </td>\n                      )\n                    })}\n                  </tr>\n                )}\n              </DraggableSortableItem>\n            ))}\n          </tbody>\n        </table>\n      </DraggableSortable>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,OAAO;AAEP,OAAOA,KAAA,IAASC,SAAS,EAAEC,QAAQ,QAAQ;AAC3C,SAASC,KAAK,QAAQ;AAEtB,SAASC,YAAY,QAAQ;AAC7B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,iBAAiB,QAAQ;AAElC,MAAMC,SAAA,GAAY;AASlB,OAAO,MAAMC,cAAA,GAAkCA,CAAC;EAC9CC,UAAA,GAAa,SAAS;EACtBC,UAAU;EACVC,OAAO;EACPC,IAAA,EAAMC;AAAW,CAClB;EACC,MAAM;IAAED,IAAA,EAAME,aAAa;IAAEC,gBAAgB;IAAEC,kBAAkB;IAAEC;EAAK,CAAE,GAAGb,YAAA;EAC7E;EACA,MAAMc,UAAA,GAAaJ,aAAA,EAAeK,IAAA,IAAQN,WAAA;EAE1C;EACA,MAAM,CAACO,SAAA,EAAWC,YAAA,CAAa,GAAGnB,QAAA,CAASgB,UAAA;EAE3C;EACA,MAAM,CAACI,OAAA,EAASC,UAAA,CAAW,GAAGrB,QAAA,CAAiC,CAAC;EAEhE;EACAD,SAAA,CAAU;IACRoB,YAAA,CAAaH,UAAA;IACbK,UAAA,CACEC,MAAA,CAAOC,WAAW,CAACP,UAAA,CAAWQ,GAAG,CAAC,CAACC,IAAA,EAAMC,KAAA,KAAU,CAACC,MAAA,CAAOF,IAAA,CAAKG,EAAE,IAAIH,IAAA,CAAKI,GAAG,GAAGH,KAAA,CAAM;EAE3F,GAAG,CAACV,UAAA,CAAW;EAEf,MAAMc,aAAA,GAAgBrB,OAAA,EAASsB,MAAA,CAAQC,GAAA,IAAQA,GAAA,EAAKC,MAAA;EAEpD,IACE,CAACH,aAAA,IACDA,aAAA,CAAcC,MAAM,CAAEC,KAAA,IAAQ,CAAC,CAAC,eAAe,UAAU,CAACE,QAAQ,CAACF,KAAA,CAAIG,QAAQ,GAAGC,MAAM,KAAK,GAC7F;IACA,oBAAOC,IAAA,CAAC;gBAAI;;EACd;EAEA,MAAMC,aAAA,GAAgB,MAAAA,CAAO;IAAEC,aAAa;IAAEC;EAAW,CAAE;IACzD,IAAIzB,KAAA,CAAM0B,IAAI,KAAK3B,kBAAA,IAAsBC,KAAA,CAAM0B,IAAI,KAAK,IAAI3B,kBAAA,EAAoB,EAAE;MAChFb,KAAA,CAAMyC,OAAO,CAAC;MACd;IACF;IAEA,IAAIH,aAAA,KAAkBC,WAAA,EAAa;MACjC;IACF;IAEA,MAAMG,OAAA,GAAUzB,SAAS,CAACqB,aAAA,CAAc,CAACX,EAAE,IAAIV,SAAS,CAACqB,aAAA,CAAc,CAACV,GAAG;IAC3E,MAAMe,YAAA,GACJJ,WAAA,GAAcD,aAAA,GAAgBrB,SAAS,CAACsB,WAAA,CAAY,GAAGtB,SAAS,CAACsB,WAAA,GAAc,EAAE;IACnF,MAAMK,WAAA,GACJL,WAAA,GAAcD,aAAA,GAAgBrB,SAAS,CAACsB,WAAA,GAAc,EAAE,GAAGtB,SAAS,CAACsB,WAAA,CAAY;IAEnF;IACA,MAAMM,YAAA,GAAe,C,GAAI5B,SAAA,CAAU;IAEnC;IACAC,YAAA,CAAc4B,WAAA;MACZ,MAAMC,OAAA,GAAU,C,GAAID,WAAA,CAAY;MAChC;MACAC,OAAO,CAACT,aAAA,CAAc,CAACzB,kBAAA,CAAmB,GAAG,SAAS;MACtD;MACAkC,OAAA,CAAQC,MAAM,CAACT,WAAA,EAAa,GAAGQ,OAAA,CAAQC,MAAM,CAACV,aAAA,EAAe,EAAE,CAAC,EAAE;MAClE,OAAOS,OAAA;IACT;IAEA,IAAI;MACF,MAAME,MAAA,GAA0CN,YAAA,GAC5C;QACEhB,EAAA,EAAIgB,YAAA,CAAahB,EAAE,IAAIgB,YAAA,CAAaf,GAAG;QACvCsB,GAAA,EAAKP,YAAY,CAAC9B,kBAAA;MACpB,IACA;QACEc,EAAA,EAAIiB,WAAA,CAAYjB,EAAE,IAAIiB,WAAA,CAAYhB,GAAG;QACrCsB,GAAA,EAAKN,WAAW,CAAC/B,kBAAA;MACnB;MAEJ,MAAMsC,YAAA,GACJR,YAAC,IAAgB7B,KAAA,CAAM0B,IAAI,KAAK3B,kBAAA,IAC/B,CAAC8B,YAAA,IAAgB7B,KAAA,CAAM0B,IAAI,KAAK,IAAI3B,kBAAA,EAAoB,GACrD,YACA;MAEN,MAAMuC,QAAA,GAAkC;QACtCC,cAAA,EAAgB9C,UAAA,CAAW+C,IAAI;QAC/BC,UAAA,EAAY,CAACb,OAAA,CAAQ;QACrBS,YAAA;QACAtC,kBAAA;QACAoC;MACF;MAEA,MAAMO,QAAA,GAAW,MAAMC,KAAA,CAAM,cAAc,EAAE;QAC3CC,IAAA,EAAMC,IAAA,CAAKC,SAAS,CAACR,QAAA;QACrBS,OAAA,EAAS;UACP,gBAAgB;QAClB;QACAC,MAAA,EAAQ;MACV;MAEA,IAAIN,QAAA,CAASO,MAAM,KAAK,KAAK;QAC3B,MAAM,IAAIC,KAAA,CAAM;MAClB;MAEA,IAAI,CAACR,QAAA,CAASS,EAAE,EAAE;QAChB,MAAM,IAAID,KAAA,CACR;MAEJ;IACF,EAAE,OAAOE,GAAA,EAAK;MACZ,MAAMC,KAAA,GAAQD,GAAA,YAAeF,KAAA,GAAQE,GAAA,CAAIE,OAAO,GAAG1C,MAAA,CAAOwC,GAAA;MAC1D;MACAhD,YAAA,CAAa2B,YAAA;MACb7C,KAAA,CAAMmE,KAAK,CAACA,KAAA;IACd;EACF;EAEA,MAAME,MAAA,GAASpD,SAAA,CAAUM,GAAG,CAAE+C,GAAA,IAAQA,GAAA,CAAI3C,EAAE,IAAI2C,GAAA,CAAI1C,GAAG;EAEvD,oBACEQ,IAAA,CAAC;IACCmC,SAAA,EAAW,CAACnE,SAAA,EAAWE,UAAA,IAAc,GAAGF,SAAA,gBAAyBE,UAAA,EAAY,CAAC,CAC3EwB,MAAM,CAAC0C,OAAA,EACPC,IAAI,CAAC;cAER,aAAArC,IAAA,CAACjC,iBAAA;MAAkBuE,GAAA,EAAKL,MAAA;MAAQM,SAAA,EAAWtC,aAAA;gBACzC,aAAAuC,KAAA,CAAC;QAAMC,WAAA,EAAY;QAAIC,WAAA,EAAY;gCACjC1C,IAAA,CAAC;oBACC,aAAAA,IAAA,CAAC;sBACEP,aAAA,CAAcN,GAAG,CAAC,CAACQ,KAAA,EAAKgD,CAAA,kBACvB3C,IAAA,CAAC;cAAGT,EAAA,EAAI,WAAWI,KAAA,CAAIG,QAAQ,EAAE;wBAC9BH,KAAA,CAAIiD;eADiCD,CAAA;;yBAM9C3C,IAAA,CAAC;oBACEnB,SAAA,CAAUM,GAAG,CAAC,CAAC+C,KAAA,EAAKW,QAAA,kBACnB7C,IAAA,CAAClC,qBAAA;YAAsByB,EAAA,EAAI0C,MAAM,CAACY,QAAA,CAAS;sBACxCC,CAAC;cAAEC,UAAU;cAAEC,SAAS;cAAEC,UAAU;cAAEC,SAAS;cAAEC;YAAU,CAAE,kBAC5DnD,IAAA,CAAC;cACCmC,SAAA,EAAW,OAAOU,QAAA,GAAW,GAAG;cAChCO,GAAA,EAAKH,UAAA;cACLI,KAAA,EAAO;gBACLH,SAAA;gBACAC;cACF;wBAEC1D,aAAA,CAAcN,GAAG,CAAC,CAACQ,KAAA,EAAK2D,QAAA;gBACvB,MAAM;kBAAExD;gBAAQ,CAAE,GAAGH,KAAA;gBAErB;gBACA,MAAM4D,IAAA,GAAO5D,KAAA,CAAI6D,aAAa,CAACzE,OAAO,CAACmD,KAAA,CAAI3C,EAAE,IAAI2C,KAAA,CAAI1C,GAAG,CAAC,CAAC;gBAE1D;gBACA,IAAIM,QAAA,KAAa,eAAe;kBAC9B,oBACEE,IAAA,CAAC;oBAAGmC,SAAA,EAAW,QAAQrC,QAAA,EAAU;8BAC/B,aAAAE,IAAA,CAAC;sBAAK,GAAG+C,UAAU;sBAAG,GAAGC,SAAS;gCAC/BO;;qBAFmCD,QAAA;gBAM5C;gBAEA,oBACEtD,IAAA,CAAC;kBAAGmC,SAAA,EAAW,QAAQrC,QAAA,EAAU;4BAC9ByD;mBADqCD,QAAA;cAI5C;;aAhC4CrB,MAAM,CAACY,QAAA,CAAS;;;;;AA0ChF","ignoreList":[]}
+{"version":3,"file":"OrderableTable.js","names":["DragOverlay","React","useEffect","useState","toast","useListQuery","DraggableSortableItem","DraggableSortable","OrderableRow","OrderableRowDragPreview","baseClass","OrderableTable","appearance","collection","columns","data","initialData","listQueryData","handleSortChange","orderableFieldName","query","serverData","docs","localData","setLocalData","cellMap","setCellMap","dragActiveRowId","setDragActiveRowId","Object","fromEntries","map","item","index","String","id","_id","activeColumns","filter","col","active","includes","accessor","length","_jsx","handleDragEnd","moveFromIndex","moveToIndex","sort","warning","undefined","movedId","newBeforeRow","newAfterRow","previousData","currentData","newData","splice","target","key","newKeyWillBe","jsonBody","collectionSlug","slug","docsToMove","response","fetch","body","JSON","stringify","headers","method","status","Error","ok","err","error","message","handleDragStart","rowIds","row","className","Boolean","join","_jsxs","ids","onDragEnd","onDragStart","cellPadding","cellSpacing","i","Heading","rowIndex","children","attributes","isDragging","listeners","setNodeRef","transform","transition","dragAttributes","dragListeners","ref","rowId","style","opacity"],"sources":["../../../src/elements/Table/OrderableTable.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, Column, OrderableEndpointBody } from 'payload'\n\nimport './index.scss'\n\nimport { DragOverlay } from '@dnd-kit/core'\nimport React, { useEffect, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { DraggableSortableItem } from '../DraggableSortable/DraggableSortableItem/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { OrderableRow } from './OrderableRow.js'\nimport { OrderableRowDragPreview } from './OrderableRowDragPreview.js'\n\nconst baseClass = 'table'\n\nexport type Props = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly collection: ClientCollectionConfig\n  readonly columns?: Column[]\n  readonly data: Record<string, unknown>[]\n}\n\nexport const OrderableTable: React.FC<Props> = ({\n  appearance = 'default',\n  collection,\n  columns,\n  data: initialData,\n}) => {\n  const { data: listQueryData, handleSortChange, orderableFieldName, query } = useListQuery()\n  // Use the data from ListQueryProvider if available, otherwise use the props\n  const serverData = listQueryData?.docs || initialData\n\n  // Local state to track the current order of rows\n  const [localData, setLocalData] = useState(serverData)\n\n  // id -> index for each column\n  const [cellMap, setCellMap] = useState<Record<string, number>>({})\n\n  const [dragActiveRowId, setDragActiveRowId] = useState<number | string | undefined>()\n\n  // Update local data when server data changes\n  useEffect(() => {\n    setLocalData(serverData)\n    setCellMap(\n      Object.fromEntries(serverData.map((item, index) => [String(item.id ?? item._id), index])),\n    )\n  }, [serverData])\n\n  const activeColumns = columns?.filter((col) => col?.active)\n\n  if (\n    !activeColumns ||\n    activeColumns.filter((col) => !['_dragHandle', '_select'].includes(col.accessor)).length === 0\n  ) {\n    return <div>No columns selected</div>\n  }\n\n  const handleDragEnd = async ({ moveFromIndex, moveToIndex }) => {\n    if (query.sort !== orderableFieldName && query.sort !== `-${orderableFieldName}`) {\n      toast.warning('To reorder the rows you must first sort them by the \"Order\" column')\n      setDragActiveRowId(undefined)\n      return\n    }\n\n    if (moveFromIndex === moveToIndex) {\n      setDragActiveRowId(undefined)\n      return\n    }\n\n    const movedId = localData[moveFromIndex].id ?? localData[moveFromIndex]._id\n    const newBeforeRow =\n      moveToIndex > moveFromIndex ? localData[moveToIndex] : localData[moveToIndex - 1]\n    const newAfterRow =\n      moveToIndex > moveFromIndex ? localData[moveToIndex + 1] : localData[moveToIndex]\n\n    // Store the original data for rollback\n    const previousData = [...localData]\n\n    // Optimisitc update of local state to reorder the rows\n    setLocalData((currentData) => {\n      const newData = [...currentData]\n      // Update the rendered cell for the moved row to show \"pending\"\n      newData[moveFromIndex][orderableFieldName] = `pending`\n      // Move the item in the array\n      newData.splice(moveToIndex, 0, newData.splice(moveFromIndex, 1)[0])\n      return newData\n    })\n\n    try {\n      const target: OrderableEndpointBody['target'] = newBeforeRow\n        ? {\n            id: newBeforeRow.id ?? newBeforeRow._id,\n            key: newBeforeRow[orderableFieldName],\n          }\n        : {\n            id: newAfterRow.id ?? newAfterRow._id,\n            key: newAfterRow[orderableFieldName],\n          }\n\n      const newKeyWillBe =\n        (newBeforeRow && query.sort === orderableFieldName) ||\n        (!newBeforeRow && query.sort === `-${orderableFieldName}`)\n          ? 'greater'\n          : 'less'\n\n      const jsonBody: OrderableEndpointBody = {\n        collectionSlug: collection.slug,\n        docsToMove: [movedId],\n        newKeyWillBe,\n        orderableFieldName,\n        target,\n      }\n\n      const response = await fetch(`/api/reorder`, {\n        body: JSON.stringify(jsonBody),\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        method: 'POST',\n      })\n\n      if (response.status === 403) {\n        throw new Error('You do not have permission to reorder these rows')\n      }\n\n      if (!response.ok) {\n        throw new Error(\n          'Failed to reorder. This can happen if you reorder several rows too quickly. Please try again.',\n        )\n      }\n    } catch (err) {\n      const error = err instanceof Error ? err.message : String(err)\n      // Rollback to previous state if the request fails\n      setLocalData(previousData)\n      toast.error(error)\n    } finally {\n      setDragActiveRowId(undefined)\n    }\n  }\n\n  const handleDragStart = ({ id }) => {\n    setDragActiveRowId(id)\n  }\n\n  const rowIds = localData.map((row) => row.id ?? row._id)\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <DraggableSortable ids={rowIds} onDragEnd={handleDragEnd} onDragStart={handleDragStart}>\n        <table cellPadding=\"0\" cellSpacing=\"0\">\n          <thead>\n            <tr>\n              {activeColumns.map((col, i) => (\n                <th id={`heading-${col.accessor}`} key={i}>\n                  {col.Heading}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {localData.map((row, rowIndex) => (\n              <DraggableSortableItem id={rowIds[rowIndex]} key={rowIds[rowIndex]}>\n                {({ attributes, isDragging, listeners, setNodeRef, transform, transition }) => (\n                  <OrderableRow\n                    cellMap={cellMap}\n                    className={`row-${rowIndex + 1}`}\n                    columns={activeColumns}\n                    dragAttributes={attributes}\n                    dragListeners={listeners}\n                    ref={setNodeRef}\n                    rowId={row.id ?? row._id}\n                    style={{\n                      opacity: isDragging ? 0 : 1,\n                      transform,\n                      transition,\n                    }}\n                  />\n                )}\n              </DraggableSortableItem>\n            ))}\n          </tbody>\n        </table>\n\n        <DragOverlay>\n          <OrderableRowDragPreview\n            className={[baseClass, `${baseClass}--drag-preview`].join(' ')}\n            rowId={dragActiveRowId}\n          >\n            <OrderableRow cellMap={cellMap} columns={activeColumns} rowId={dragActiveRowId} />\n          </OrderableRowDragPreview>\n        </DragOverlay>\n      </DraggableSortable>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Table/index.scss

@@ -96,6 +96,11 @@
       }
     }
 
+    &--drag-preview {
+      cursor: grabbing;
+      z-index: var(--z-popup);
+    }
+
     @include mid-break {
       th,
       td {