@oliasoft-open-source/react-ui-library 4.19.1 → 4.19.2-beta-2

package/dist/global.css

@@ -9375,14 +9375,14 @@ tbody:after {
   justify-content: space-between;
   border-top: 1px solid var(--color-border);
 }
-._clickableRow_10f34_1 {
+._clickableRow_kqvtd_1 {
   cursor: pointer;
 }
-._hoverableRow_10f34_4:not(._rowActive_10f34_4):hover,
-._clickableRow_10f34_1:not(._rowActive_10f34_4):hover {
+._hoverableRow_kqvtd_4:not(._rowActive_kqvtd_4):hover,
+._clickableRow_kqvtd_1:not(._rowActive_kqvtd_4):hover {
   background-color: var(--color-background-listitem-hover) !important;
 }
-._expandableRow_10f34_8._flush_10f34_8 {
+._expandableRow_kqvtd_8._flush_kqvtd_8 {
   padding: 0 !important;
   height: auto !important;
 }
@@ -9392,11 +9392,11 @@ tr[data-warning] {
 tr[data-error] {
   background-color: var(--color-background-error-muted) !important;
 }
-._rowActive_10f34_4 {
+._rowActive_kqvtd_4 {
   position: relative;
   background-color: var(--color-background-listitem-active) !important;
 }
-._rowActive_10f34_4:after {
+._rowActive_kqvtd_4:after {
   content: '';
   position: absolute;
   left: 0;
@@ -9408,12 +9408,12 @@ tr[data-error] {
   transition: background 0.3s;
   background: var(--color-background-primary);
 }
-._dragIconCell_10f34_34 {
+._dragIconCell_kqvtd_34 {
   width: var(--size);
   min-width: var(--size);
   position: relative;
 }
-._dragIcon_10f34_34 {
+._dragIcon_kqvtd_34 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9422,13 +9422,16 @@ tr[data-error] {
   color: var(--color-text-faint);
   cursor: grab;
 }
-._dragIcon_10f34_34:hover {
+._dragIcon_kqvtd_34:hover {
   color: var(--color-text-primary-hover);
 }
-._dragIcon_10f34_34:active {
+._dragIcon_kqvtd_34:active {
   cursor: grabbing;
   color: var(--color-text-primary-active);
 }
+._dragIcon_kqvtd_34._dragIconDisabled_kqvtd_55 {
+  cursor: not-allowed;
+}
 ._inputInTable_ie6ng_1 {
   background-color: transparent;
   border-radius: inherit !important;

package/dist/index.d.ts

@@ -1346,6 +1346,10 @@ export declare interface ITableProps {
         from: number;
         to: number;
     }) => void;
+    canListReorder?: (obj: {
+        from: number;
+        to: number;
+    }) => boolean;
     table: ITableTableProps;
 }
 

package/dist/index.js

@@ -51263,13 +51263,14 @@ const hasActions = (rows) => rows.reduce(
 const hasRowActions = (rows, headers) => {
   return hasActions(headers) > 0 || hasActions(rows) > 0;
 };
-const clickableRow = "_clickableRow_10f34_1";
-const hoverableRow = "_hoverableRow_10f34_4";
-const rowActive = "_rowActive_10f34_4";
-const expandableRow = "_expandableRow_10f34_8";
-const flush = "_flush_10f34_8";
-const dragIconCell = "_dragIconCell_10f34_34";
-const dragIcon = "_dragIcon_10f34_34";
+const clickableRow = "_clickableRow_kqvtd_1";
+const hoverableRow = "_hoverableRow_kqvtd_4";
+const rowActive = "_rowActive_kqvtd_4";
+const expandableRow = "_expandableRow_kqvtd_8";
+const flush = "_flush_kqvtd_8";
+const dragIconCell = "_dragIconCell_kqvtd_34";
+const dragIcon = "_dragIcon_kqvtd_34";
+const dragIconDisabled = "_dragIconDisabled_kqvtd_55";
 const styles$9 = {
   clickableRow,
   hoverableRow,
@@ -51277,7 +51278,8 @@ const styles$9 = {
   expandableRow,
   flush,
   dragIconCell,
-  dragIcon
+  dragIcon,
+  dragIconDisabled
 };
 const ExpandedContentRow = ({
   colSpan,
@@ -51974,6 +51976,7 @@ const Row = ({
   hasRowActions: hasRowActions2,
   draggableTable = false,
   columnWidths,
+  dropDisabled = false,
   height: height2,
   testId
   //TODO: add testId
@@ -52031,8 +52034,8 @@ const Row = ({
     animateLayoutChanges: () => false
   });
   const style = {
+    transform: !dropDisabled ? CSS.Translate.toString(transform) : void 0,
     height: height2,
-    transform: CSS.Transform.toString(transform),
     transition,
     opacity: isDragging ? 0 : void 0
   };
@@ -52040,7 +52043,18 @@ const Row = ({
     if (row2.noDrag) {
       return /* @__PURE__ */ jsx("td", { "aria-labelledby": "unique-label-id" });
     }
-    return /* @__PURE__ */ jsx("td", { className: styles$9.dragIconCell, children: /* @__PURE__ */ jsx("div", { className: styles$9.dragIcon, ...attributes, ...listeners, children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG }) }) });
+    return /* @__PURE__ */ jsx("td", { className: styles$9.dragIconCell, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx$2(
+          styles$9.dragIcon,
+          dropDisabled ? styles$9.dragIconDisabled : ""
+        ),
+        ...attributes,
+        ...listeners,
+        children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG })
+      }
+    ) });
   };
   return isHeader ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsxs(
@@ -52121,28 +52135,44 @@ const TableDragWrapper = (props) => {
     draggable,
     onListReorder = () => {
     },
+    canListReorder = () => true,
     rowActions,
     rows = [],
     tbodyRef
   } = props;
   const [dragIndex, setDragIndex] = useState(null);
+  const [canDragToIndexes, setCanDragToIndexes] = useState([]);
+  const [dropDisabled, setDropDisabled] = useState(false);
   const itemIds = useMemo(
     () => rows.map((_2, index2) => index2.toString()),
     [rows]
   );
   const handleDragStart2 = (event) => {
     setDragIndex(event.active.id);
+    const enabledIndexes = rows.map((_2, index2) => index2).filter((index2) => {
+      if (rows[index2].noDrag) return false;
+      if (canListReorder({ from: Number(event.active.id), to: index2 }))
+        return true;
+      return false;
+    });
+    setCanDragToIndexes(enabledIndexes);
   };
   const handleDragEnd = (event) => {
     setDragIndex(null);
+    setDropDisabled(false);
+    setCanDragToIndexes([]);
     const { active: active2, over } = event;
-    if (!active2 || !over) return;
-    if (active2.id !== over.id) {
-      onListReorder({
-        from: Number(active2.id),
-        to: Number(over.id)
-      });
-    }
+    if (!active2 || !over || active2.id === over.id) return;
+    if (!canDragToIndexes.includes(Number(over.id))) return;
+    onListReorder({
+      from: Number(active2.id),
+      to: Number(over.id)
+    });
+  };
+  const handleDragOver = (event) => {
+    const { active: active2, over } = event;
+    const disabled2 = (active2 == null ? void 0 : active2.id) !== (over == null ? void 0 : over.id) && !canDragToIndexes.includes(Number(over == null ? void 0 : over.id));
+    setDropDisabled(disabled2);
   };
   const getCalculatedWidths = () => {
     if (!(tbodyRef == null ? void 0 : tbodyRef.current)) return [];
@@ -52150,19 +52180,22 @@ const TableDragWrapper = (props) => {
     const activeRow = rows2[Number(dragIndex)];
     const cells = activeRow == null ? void 0 : activeRow.querySelectorAll("td");
     if (!cells) return [];
-    const widths = Array.from(cells).map((cell2) => `${cell2.offsetWidth}px`);
+    const widths = Array.from(cells).map(
+      (cell2) => `${Math.ceil(cell2.offsetWidth)}px`
+    );
     widths.shift();
     return widths;
   };
-  if (!draggable) return children;
+  if (!draggable) return children({});
   return /* @__PURE__ */ jsxs(
     DndContext$1,
     {
       collisionDetection: closestCenter,
       onDragStart: handleDragStart2,
       onDragEnd: handleDragEnd,
+      onDragOver: handleDragOver,
       children: [
-        /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy: verticalListSortingStrategy, children }),
+        /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy: verticalListSortingStrategy, children: children({ dropDisabled }) }),
         !!dragIndex && createPortal(
           /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: /* @__PURE__ */ jsx("table", { className: cx$2(styles$c.table, styles$c.dragOverlay), children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(
             Row,
@@ -52174,7 +52207,8 @@ const TableDragWrapper = (props) => {
               colSpan,
               hasRowActions: rowActions,
               columnAlignment,
-              draggableTable: draggable
+              draggableTable: draggable,
+              dropDisabled
             }
           ) }) }) }),
           document.body
@@ -52223,8 +52257,12 @@ const TableScrollWrapper = ({
 };
 const Table = (props) => {
   var _a2, _b, _c, _d, _e2, _f, _g;
-  const { onListReorder = () => {
-  }, table: propTable } = props;
+  const {
+    onListReorder = () => {
+    },
+    canListReorder = () => true,
+    table: propTable
+  } = props;
   const {
     columnWidths,
     footer: footer2,
@@ -52316,64 +52354,65 @@ const Table = (props) => {
         rowActions,
         rows,
         tbodyRef,
-        children: /* @__PURE__ */ jsx(TableScrollWrapper, { table: table2, theadRef, children: ({ virtualizer, tableStyle }) => {
-          return /* @__PURE__ */ jsxs(
-            "table",
-            {
-              className: cx$2(styles$c.table, striped2 ? styles$c.striped : ""),
-              "data-testid": testId,
-              style: tableStyle,
-              children: [
-                /* @__PURE__ */ jsx("thead", { ref: theadRef, children: headers.map((row2, rowIndex) => {
-                  return /* @__PURE__ */ jsx(
-                    Row,
-                    {
-                      rowIndex,
-                      isHeader: true,
-                      row: row2,
-                      columnCount,
-                      columnWidths,
-                      colSpan,
-                      hasRowActions: rowActions,
-                      columnAlignment,
-                      columnHeaderAlignments,
-                      draggableTable: draggable
-                    },
-                    `0_${rowIndex}`
-                  );
-                }) }),
-                /* @__PURE__ */ jsx("tbody", { ref: tbodyRef, children: virtualizer ? virtualizer.getVirtualItems().map((virtualRow2) => /* @__PURE__ */ jsx(
-                  Row,
-                  {
-                    rowIndex: virtualRow2.index,
-                    row: rows[virtualRow2.index],
-                    columnCount,
-                    columnWidths,
-                    colSpan,
-                    hasRowActions: rowActions,
-                    columnAlignment,
-                    draggableTable: draggable,
-                    height: virtualRow2.size
-                  },
-                  `1_${virtualRow2.index}`
-                )) : rows.map((row2, index2) => /* @__PURE__ */ jsx(
+        canListReorder,
+        children: ({ dropDisabled }) => /* @__PURE__ */ jsx(TableScrollWrapper, { table: table2, theadRef, children: ({ virtualizer, tableStyle }) => /* @__PURE__ */ jsxs(
+          "table",
+          {
+            className: cx$2(styles$c.table, striped2 ? styles$c.striped : ""),
+            "data-testid": testId,
+            style: tableStyle,
+            children: [
+              /* @__PURE__ */ jsx("thead", { ref: theadRef, children: headers.map((row2, rowIndex) => {
+                return /* @__PURE__ */ jsx(
                   Row,
                   {
-                    rowIndex: index2,
+                    rowIndex,
+                    isHeader: true,
                     row: row2,
                     columnCount,
                     columnWidths,
                     colSpan,
                     hasRowActions: rowActions,
                     columnAlignment,
+                    columnHeaderAlignments,
                     draggableTable: draggable
                   },
-                  `1_${index2}`
-                )) })
-              ]
-            }
-          );
-        } })
+                  `0_${rowIndex}`
+                );
+              }) }),
+              /* @__PURE__ */ jsx("tbody", { ref: tbodyRef, children: virtualizer ? virtualizer.getVirtualItems().map((virtualRow2) => /* @__PURE__ */ jsx(
+                Row,
+                {
+                  rowIndex: virtualRow2.index,
+                  row: rows[virtualRow2.index],
+                  columnCount,
+                  columnWidths,
+                  colSpan,
+                  hasRowActions: rowActions,
+                  columnAlignment,
+                  draggableTable: draggable,
+                  height: virtualRow2.size,
+                  dropDisabled
+                },
+                `1_${virtualRow2.index}`
+              )) : rows.map((row2, index2) => /* @__PURE__ */ jsx(
+                Row,
+                {
+                  rowIndex: index2,
+                  row: row2,
+                  columnCount,
+                  columnWidths,
+                  colSpan,
+                  hasRowActions: rowActions,
+                  columnAlignment,
+                  draggableTable: draggable,
+                  dropDisabled
+                },
+                `1_${index2}`
+              )) })
+            ]
+          }
+        ) })
       }
     ),
     footer2 && /* @__PURE__ */ jsx(