@ynput/ayon-frontend-shared 0.2.7 → 0.2.9

package/dist/shared/src/containers/ProjectTreeTable/ProjectTreeTable.cjs.js

@@ -8,6 +8,7 @@ const clsx = require("clsx");
 const buildTreeTableColumns = require("./buildTreeTableColumns.cjs.js");
 const ProjectTreeTable_styled = require("./ProjectTreeTable.styled.cjs.js");
 const HeaderActionButton = require("./components/HeaderActionButton.cjs.js");
+const RowDragHandleCellContent = require("./components/RowDragHandleCellContent.cjs.js");
 const EmptyPlaceholder = require("../../components/EmptyPlaceholder/EmptyPlaceholder.cjs.js");
 require("../../components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.cjs.js");
 const CellEditingContext = require("./context/CellEditingContext.cjs.js");
@@ -27,16 +28,22 @@ const ayonReactComponents = require("@ynput/ayon-react-components");
 const ProjectTableContext = require("./context/ProjectTableContext.cjs.js");
 const getTableFieldOptions = require("./utils/getTableFieldOptions.cjs.js");
 const getReadOnlyLists = require("./utils/getReadOnlyLists.cjs.js");
-const getCommonPinningStyles = (column) => {
+const core = require("@dnd-kit/core");
+const sortable = require("@dnd-kit/sortable");
+const utilities_esm = require("../../../../node_modules/@dnd-kit/utilities/dist/utilities.esm.cjs.js");
+const getCommonPinningStyles = (column, isSortable) => {
   const isPinned = column.getIsPinned();
+  const offset = column.id !== SelectionCellsContext.ROW_SELECTION_COLUMN_ID && column.id !== DRAG_HANDLE_COLUMN_ID && isSortable ? -30 : 0;
   return {
-    left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+    left: isPinned === "left" ? `${column.getStart("left") + offset}px` : void 0,
+    // Removed offset
     right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
     position: isPinned ? "sticky" : "relative",
     width: column.getSize(),
     zIndex: isPinned ? 100 : 0
   };
 };
+const DRAG_HANDLE_COLUMN_ID = "drag-handle";
 const ProjectTreeTable = ({
   scope,
   sliceId,
@@ -46,6 +53,11 @@ const ProjectTreeTable = ({
   excludedColumns,
   extraColumns,
   isLoading: isLoadingProp,
+  clientSorting = false,
+  sortableRows = false,
+  onRowReorder,
+  dndActiveId,
+  // Destructure new prop
   pt,
   ...props
 }) => {
@@ -113,16 +125,35 @@ const ProjectTreeTable = ({
     () => isInitialized ? attribFields : loadingAttrib,
     [attribFields, loadingAttrib, isInitialized]
   );
-  const columns = React.useMemo(
-    () => buildTreeTableColumns.default({
+  const columns = React.useMemo(() => {
+    const baseColumns = buildTreeTableColumns.default({
       attribs: columnAttribs,
       showHierarchy,
       options,
       extraColumns,
       excluded: excludedColumns
-    }),
-    [columnAttribs, showHierarchy, options, extraColumns, excludedColumns]
-  );
+    });
+    if (sortableRows) {
+      return [
+        {
+          id: DRAG_HANDLE_COLUMN_ID,
+          header: () => null,
+          cell: () => null,
+          // Content rendered by TableBodyRow
+          size: 24,
+          minSize: 24,
+          maxSize: 24,
+          enableResizing: false,
+          enableSorting: false,
+          enableHiding: false,
+          enablePinning: false
+          // Programmatically pinned
+        },
+        ...baseColumns
+      ];
+    }
+    return baseColumns;
+  }, [columnAttribs, showHierarchy, options, extraColumns, excludedColumns, sortableRows]);
   const table = reactTable.useReactTable({
     data: showLoadingRows ? loadingRows : tableData,
     columns,
@@ -144,7 +175,7 @@ const ProjectTreeTable = ({
     // EXPANDABLE
     onExpandedChange: updateExpanded,
     // SORTING
-    getSortedRowModel: reactTable.getSortedRowModel(),
+    getSortedRowModel: clientSorting ? reactTable.getSortedRowModel() : void 0,
     onSortingChange: updateSorting,
     columnResizeMode: "onChange",
     onColumnPinningChange: columnPinningUpdater,
@@ -156,10 +187,22 @@ const ProjectTreeTable = ({
     state: {
       expanded,
       sorting,
-      columnPinning: {
-        left: [SelectionCellsContext.ROW_SELECTION_COLUMN_ID, ...columnPinning.left || []],
-        right: columnPinning.right
-      },
+      columnPinning: (() => {
+        const leftPins = [];
+        if (sortableRows) {
+          leftPins.push(DRAG_HANDLE_COLUMN_ID);
+        }
+        leftPins.push(SelectionCellsContext.ROW_SELECTION_COLUMN_ID);
+        const contextLeftPins = (columnPinning.left || []).filter(
+          (id) => id !== DRAG_HANDLE_COLUMN_ID && id !== SelectionCellsContext.ROW_SELECTION_COLUMN_ID
+        );
+        leftPins.push(...contextLeftPins);
+        const uniqueLeftPins = [...new Set(leftPins)];
+        return {
+          left: uniqueLeftPins,
+          right: columnPinning.right
+        };
+      })(),
       columnSizing,
       columnVisibility,
       columnOrder
@@ -202,7 +245,12 @@ const ProjectTreeTable = ({
       return acc;
     }, {});
   }, [attribFields]);
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  const rowOrderIds = React.useMemo(() => tableData.map((row) => row.id), [tableData]);
+  const draggedRowData = React.useMemo(() => {
+    if (!dndActiveId || !sortableRows) return null;
+    return tableData.find((r) => r.id === dndActiveId);
+  }, [dndActiveId, tableData, sortableRows]);
+  const tableUiContent = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
     ClipboardContext.ClipboardProvider,
     {
       entitiesMap,
@@ -236,6 +284,7 @@ const ProjectTreeTable = ({
                     virtualPaddingRight,
                     isLoading,
                     readOnlyColumns,
+                    sortableRows,
                     ...pt == null ? void 0 : pt.head
                   }
                 ),
@@ -249,7 +298,9 @@ const ProjectTreeTable = ({
                     virtualPaddingRight,
                     showHierarchy,
                     attribs: attribFields,
-                    onOpenNew
+                    onOpenNew,
+                    rowOrderIds,
+                    sortableRows
                   }
                 )
               ]
@@ -259,6 +310,73 @@ const ProjectTreeTable = ({
       ) })
     }
   );
+  const dragOverlayPortal = sortableRows && dndActiveId && ReactDOM.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(core.DragOverlay, { dropAnimation: null, children: draggedRowData ? (() => {
+      const overlayRowInstance = table.getRowModel().rows.find((r) => r.id === dndActiveId);
+      if (!overlayRowInstance) return null;
+      const tableWidth = table.getTotalSize();
+      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        "table",
+        {
+          style: {
+            width: tableWidth,
+            borderCollapse: "collapse",
+            backgroundColor: "var(--md-sys-color-surface-container-high)",
+            boxShadow: "0 0 10px rgba(0,0,0,0.2)",
+            ...columnSizeVars
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(ProjectTreeTable_styled.TR, { style: { display: "flex", userSelect: "none" }, children: [
+            virtualPaddingLeft ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("td", { style: { display: "flex", width: virtualPaddingLeft } }) : null,
+            columnVirtualizer.getVirtualItems().map((vc) => {
+              const cell = overlayRowInstance.getVisibleCells()[vc.index];
+              if (!cell) return null;
+              const cellStyleBase = {
+                ...getCommonPinningStyles(cell.column, true),
+                width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
+                display: "flex",
+                alignItems: "center",
+                height: 40
+              };
+              if (cell.column.id === DRAG_HANDLE_COLUMN_ID) {
+                return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+                  ProjectTreeTable_styled.TableCell,
+                  {
+                    style: { ...cellStyleBase, justifyContent: "center" },
+                    className: clsx(cell.column.id),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: "drag_handle" }),
+                      " "
+                    ]
+                  },
+                  `overlay-drag-${cell.id}`
+                );
+              }
+              return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                TableCellMemo,
+                {
+                  cell,
+                  cellId: `overlay-${cellUtils.getCellId(overlayRowInstance.id, cell.column.id)}`,
+                  rowId: overlayRowInstance.id,
+                  showHierarchy
+                },
+                `overlay-cell-${cell.id}`
+              );
+            }),
+            virtualPaddingRight ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("td", { style: { display: "flex", width: virtualPaddingRight } }) : null
+          ] }) })
+        }
+      );
+    })() : null }),
+    document.body
+  );
+  if (sortableRows) {
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+      tableUiContent,
+      dragOverlayPortal
+    ] });
+  } else {
+    return tableUiContent;
+  }
 };
 const TableHead = ({
   columnVirtualizer,
@@ -267,6 +385,7 @@ const TableHead = ({
   virtualPaddingRight,
   isLoading,
   readOnlyColumns,
+  sortableRows,
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ProjectTreeTable_styled.TableHeader, { ...props, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
@@ -277,7 +396,8 @@ const TableHead = ({
       virtualPaddingLeft,
       virtualPaddingRight,
       isLoading,
-      readOnlyColumns
+      readOnlyColumns,
+      sortableRows
     },
     headerGroup.id
   )) });
@@ -288,7 +408,8 @@ const TableHeadRow = ({
   virtualPaddingLeft,
   virtualPaddingRight,
   isLoading,
-  readOnlyColumns
+  readOnlyColumns,
+  sortableRows
 }) => {
   const virtualColumns = columnVirtualizer.getVirtualItems();
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(ProjectTreeTable_styled.ColumnHeader, { style: { display: "flex" }, children: [
@@ -308,7 +429,8 @@ const TableHeadRow = ({
           canFilter: header.column.getCanFilter(),
           canHide: header.column.getCanHide(),
           canPin: header.column.getCanPin(),
-          canResize: header.column.getCanResize()
+          canResize: header.column.getCanResize(),
+          sortableRows
         },
         header.id
       );
@@ -327,7 +449,8 @@ const TableHeadCell = ({
   canSort,
   canPin,
   canResize,
-  isReadOnly
+  isReadOnly,
+  sortableRows
 }) => {
   const { column } = header;
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
@@ -338,7 +461,7 @@ const TableHeadCell = ({
         "last-pinned-left": column.getIsPinned() === "left" && column.getIsLastColumn("left")
       }),
       style: {
-        ...getCommonPinningStyles(column),
+        ...getCommonPinningStyles(column, sortableRows),
         width: `calc(var(--header-${header == null ? void 0 : header.id}-size) * 1px)`
       },
       children: header.isPlaceholder ? null : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(ProjectTreeTable_styled.TableCellContent, { className: clsx("bold"), children: [
@@ -405,14 +528,16 @@ const TableBody = ({
   virtualPaddingLeft,
   virtualPaddingRight,
   attribs,
-  onOpenNew
+  onOpenNew,
+  rowOrderIds,
+  sortableRows
 }) => {
   const { handleTableBodyContextMenu } = useCellContextMenu({ attribs, onOpenNew });
   const { handlePreFetchTasks } = usePrefetchFolderTasks.usePrefetchFolderTasks();
   const { rows } = table.getRowModel();
   const rowVirtualizer = reactVirtual.useVirtualizer({
     count: rows.length,
-    estimateSize: () => showHierarchy ? 36 : 40,
+    estimateSize: () => 40,
     //estimate row height for accurate scrollbar dragging
     getScrollElement: () => tableContainerRef.current,
     //measure dynamic row height, except in firefox because it measures table border height incorrectly
@@ -420,8 +545,16 @@ const TableBody = ({
     overscan: 5
   });
   const virtualRows = rowVirtualizer.getVirtualItems();
+  const measureRowElement = React.useCallback(
+    (node) => {
+      if (node) {
+        rowVirtualizer.measureElement(node);
+      }
+    },
+    [rowVirtualizer]
+  );
   useKeyboardNavigation();
-  return virtualRows.length ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  const tbodyContent = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
     "tbody",
     {
       style: {
@@ -435,72 +568,160 @@ const TableBody = ({
       },
       children: virtualRows.map((virtualRow) => {
         const row = rows[virtualRow.index];
+        if (!row) {
+          console.warn("Virtualized row data not found for index:", virtualRow.index);
+          return null;
+        }
         return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
           TableBodyRow,
           {
-            columnVirtualizer,
             row,
-            rowVirtualizer,
-            virtualPaddingLeft,
-            virtualPaddingRight,
-            virtualRow,
-            showHierarchy
+            showHierarchy,
+            visibleCells: row.getVisibleCells(),
+            virtualColumns: columnVirtualizer.getVirtualItems(),
+            paddingLeft: virtualPaddingLeft,
+            paddingRight: virtualPaddingRight,
+            rowRef: measureRowElement,
+            dataIndex: virtualRow.index,
+            offsetTop: virtualRow.start,
+            sortableRows
           },
           row.id
         );
       })
     }
-  ) : tableContainerRef.current && ReactDOM.createPortal(/* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(EmptyPlaceholder.EmptyPlaceholder, { message: "No items found" }), tableContainerRef.current);
+  );
+  if (!virtualRows.length) {
+    return tableContainerRef.current && ReactDOM.createPortal(/* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(EmptyPlaceholder.EmptyPlaceholder, { message: "No items found" }), tableContainerRef.current);
+  }
+  if (sortableRows) {
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(sortable.SortableContext, { items: rowOrderIds, strategy: sortable.verticalListSortingStrategy, children: tbodyContent });
+  } else {
+    return tbodyContent;
+  }
 };
 const TableBodyRow = ({
-  columnVirtualizer,
   row,
-  rowVirtualizer,
-  virtualPaddingLeft,
-  virtualPaddingRight,
-  virtualRow,
-  showHierarchy
+  showHierarchy,
+  visibleCells,
+  virtualColumns,
+  paddingLeft,
+  paddingRight,
+  rowRef,
+  dataIndex,
+  offsetTop,
+  sortableRows
 }) => {
-  const visibleCells = row.getVisibleCells();
-  const virtualColumns = columnVirtualizer.getVirtualItems();
+  const sortable$1 = sortableRows ? sortable.useSortable({ id: row.id }) : null;
+  const combinedRef = React.useCallback(
+    (node) => {
+      if (sortable$1) {
+        sortable$1.setNodeRef(node);
+      }
+      if (!(sortable$1 && sortable$1.isDragging)) {
+        rowRef(node);
+      }
+    },
+    [sortable$1, rowRef]
+  );
+  const style = {
+    position: "absolute",
+    // Use absolute positioning for virtualized items
+    top: offsetTop,
+    // Position based on virtualizer's calculation (virtualRow.start)
+    left: 0,
+    // Span full width of the relative parent (tbody)
+    right: 0,
+    // Span full width
+    height: 40,
+    // Explicit height can be beneficial for absolute positioning
+    zIndex: sortable$1 && sortable$1.isDragging ? 0 : 1,
+    // Ensure dragged item is above others
+    display: "flex",
+    // Styled.TR is display:flex
+    transform: sortable$1 && sortable$1.transform ? utilities_esm.CSS.Transform.toString(sortable$1.transform) : void 0,
+    // Apply dnd-kit's transform for drag effect
+    transition: sortable$1 && sortable$1.transition ? sortable$1.transition : void 0,
+    visibility: sortable$1 && sortable$1.isDragging ? "hidden" : "visible"
+    // Hide the row being dragged
+  };
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
     ProjectTreeTable_styled.TR,
     {
-      "data-index": virtualRow.index,
-      ref: (node) => rowVirtualizer.measureElement(node),
-      style: {
-        transform: `translateY(${virtualRow.start}px)`
-        //this should always be a `style` as it changes on scroll
-      },
+      ref: combinedRef,
+      "data-index": dataIndex,
+      style,
       children: [
-        virtualPaddingLeft ? (
+        paddingLeft ? (
           //fake empty column to the left for virtualization scroll padding
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("td", { style: { display: "flex", width: virtualPaddingLeft } })
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("td", { style: { display: "flex", width: paddingLeft } })
         ) : null,
         virtualColumns.map((vc) => {
           const cell = visibleCells[vc.index];
+          if (!cell) return null;
           const cellId = cellUtils.getCellId(row.id, cell.column.id);
+          if (cell.column.id === DRAG_HANDLE_COLUMN_ID) {
+            return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              ProjectTreeTable_styled.TableCell,
+              {
+                style: {
+                  ...getCommonPinningStyles(cell.column, sortableRows),
+                  width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  height: 40
+                },
+                className: clsx(cell.column.id, {
+                  "last-pinned-left": cell.column.getIsPinned() === "left" && cell.column.getIsLastColumn("left")
+                }),
+                onMouseDown: (e) => e.stopPropagation(),
+                onMouseOver: (e) => e.stopPropagation(),
+                onDoubleClick: (e) => e.stopPropagation(),
+                onContextMenu: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                  RowDragHandleCellContent,
+                  {
+                    attributes: sortable$1 == null ? void 0 : sortable$1.attributes,
+                    listeners: sortable$1 == null ? void 0 : sortable$1.listeners
+                  }
+                )
+              },
+              cell.id
+            );
+          }
           return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
             TableCellMemo,
             {
               cell,
               cellId,
               rowId: row.id,
-              showHierarchy
+              showHierarchy,
+              sortableRows
             },
             cell.id
           );
         }),
-        virtualPaddingRight ? (
+        paddingRight ? (
           //fake empty column to the right for virtualization scroll padding
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("td", { style: { display: "flex", width: virtualPaddingRight } })
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("td", { style: { display: "flex", width: paddingRight } })
         ) : null
       ]
-    },
-    row.id
+    }
   );
 };
-const TableCell = ({ cell, rowId, cellId, className, showHierarchy, ...props }) => {
+const TableCell = ({
+  cell,
+  rowId,
+  cellId,
+  className,
+  showHierarchy,
+  sortableRows,
+  ...props
+}) => {
   const {
     isCellSelected,
     isCellFocused,
@@ -537,9 +758,9 @@ const TableCell = ({ cell, rowId, cellId, className, showHierarchy, ...props })
         ...borderClasses
       ),
       style: {
-        ...getCommonPinningStyles(cell.column),
+        ...getCommonPinningStyles(cell.column, sortableRows),
         width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
-        height: showHierarchy ? 36 : 40
+        height: 40
       },
       onMouseDown: (e) => {
         if (e.button !== 0) return;
@@ -579,5 +800,6 @@ const TableCell = ({ cell, rowId, cellId, className, showHierarchy, ...props })
   );
 };
 const TableCellMemo = React.memo(TableCell);
+exports.DRAG_HANDLE_COLUMN_ID = DRAG_HANDLE_COLUMN_ID;
 exports.ProjectTreeTable = ProjectTreeTable;
 //# sourceMappingURL=ProjectTreeTable.cjs.js.map