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

package/README.md

@@ -1989,6 +1989,7 @@ The `Table` component renders tabular data with various customization options.
 | Prop                  | Description                                                                                      | Default Value |
 |-----------------------|--------------------------------------------------------------------------------------------------|---------------|
 | `onListReorder`       | Function called when rows are reordered.                                                        | `() => {}`    |
+| `canListReorder`      | Function to compare `from` and `to` to determine if reordering is allowed.                      | `() => true`  |
 | `table`               | An object containing table configuration.                                                        |               |
 | `table.name`          | Name or title of the table.                                                                     |               |
 | `table.actionsRight`  | Determines if actions should be displayed on the right side of the table.                        | `false`       |

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

@@ -199,27 +199,21 @@ function _objectWithoutPropertiesLoose$5(r2, e2) {
   }
   return t;
 }
-var _extends$6 = { exports: {} };
-var hasRequired_extends;
-function require_extends() {
-  if (hasRequired_extends) return _extends$6.exports;
-  hasRequired_extends = 1;
-  (function(module) {
-    function _extends3() {
-      return module.exports = _extends3 = Object.assign ? Object.assign.bind() : function(n2) {
-        for (var e2 = 1; e2 < arguments.length; e2++) {
-          var t = arguments[e2];
-          for (var r2 in t) ({}).hasOwnProperty.call(t, r2) && (n2[r2] = t[r2]);
-        }
-        return n2;
-      }, module.exports.__esModule = true, module.exports["default"] = module.exports, _extends3.apply(null, arguments);
+function _extends$4() {
+  return _extends$4 = Object.assign ? Object.assign.bind() : function(n2) {
+    for (var e2 = 1; e2 < arguments.length; e2++) {
+      var t = arguments[e2];
+      for (var r2 in t) ({}).hasOwnProperty.call(t, r2) && (n2[r2] = t[r2]);
     }
-    module.exports = _extends3, module.exports.__esModule = true, module.exports["default"] = module.exports;
-  })(_extends$6);
-  return _extends$6.exports;
+    return n2;
+  }, _extends$4.apply(null, arguments);
 }
-var _extendsExports = require_extends();
-const _extends$5 = /* @__PURE__ */ getDefaultExportFromCjs(_extendsExports);
+const _extends$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  get default() {
+    return _extends$4;
+  }
+}, Symbol.toStringTag, { value: "Module" }));
 function _setPrototypeOf$3(t, e2) {
   return _setPrototypeOf$3 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t2, e3) {
     return t2.__proto__ = e3, t2;
@@ -798,7 +792,7 @@ var ReactSVG = /* @__PURE__ */ function(_React$Component) {
   };
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
     var _this3 = this;
-    if (shallowDiffers(_extends$5({}, prevProps), this.props)) {
+    if (shallowDiffers(_extends$4({}, prevProps), this.props)) {
       this.setState(function() {
         return _this3.initialState;
       }, function() {
@@ -826,7 +820,7 @@ var ReactSVG = /* @__PURE__ */ function(_React$Component) {
     _this$props2.useRequestCache;
     var wrapper2 = _this$props2.wrapper, rest = _objectWithoutPropertiesLoose$5(_this$props2, _excluded$8);
     var Wrapper2 = wrapper2;
-    return /* @__PURE__ */ React$4.createElement(Wrapper2, _extends$5({}, rest, {
+    return /* @__PURE__ */ React$4.createElement(Wrapper2, _extends$4({}, rest, {
       ref: this.refCallback
     }, wrapper2 === "svg" ? {
       xmlns: svgNamespace,
@@ -2241,8 +2235,8 @@ function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   return Constructor;
 }
-function _extends$4() {
-  _extends$4 = Object.assign || function(target) {
+function _extends$3() {
+  _extends$3 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key2 in source) {
@@ -2253,7 +2247,7 @@ function _extends$4() {
     }
     return target;
   };
-  return _extends$4.apply(this, arguments);
+  return _extends$3.apply(this, arguments);
 }
 function _inheritsLoose$2(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
@@ -2577,7 +2571,7 @@ function useTrackElements(_ref) {
   var layerRef = useTrackRef(useCallback(function(layer2) {
     var _get3 = get3(), previousLayer = _get3.layer;
     set2(function(state) {
-      return _extends$4({}, state, {
+      return _extends$3({}, state, {
         layer: layer2
       });
     });
@@ -2600,7 +2594,7 @@ function useTrackElements(_ref) {
     var scrollContainers = getScrollContainers(trigger2);
     var _get4 = get3(), previousTrigger = _get4.trigger;
     set2(function(state) {
-      return _extends$4({}, state, {
+      return _extends$3({}, state, {
         trigger: trigger2,
         scrollContainers
       });
@@ -2613,7 +2607,7 @@ function useTrackElements(_ref) {
       return;
     }
     set2(function(state) {
-      return _extends$4({}, state, {
+      return _extends$3({}, state, {
         scrollContainers: getScrollContainers(triggerOptionParent)
       });
     });
@@ -2780,7 +2774,7 @@ var BoundSide = {
   left: /* @__PURE__ */ createSide("left"),
   right: /* @__PURE__ */ createSide("right")
 };
-var Side = /* @__PURE__ */ _extends$4({}, BoundSide, {
+var Side = /* @__PURE__ */ _extends$3({}, BoundSide, {
   center: /* @__PURE__ */ createSide("center")
 });
 var SIDES = ["top", "left", "bottom", "right"];
@@ -2876,7 +2870,7 @@ var Bounds = /* @__PURE__ */ function() {
       var _environment$getCompu = environment2.getComputedStyle(element), width2 = _environment$getCompu.width, height2 = _environment$getCompu.height, boxSizing = _environment$getCompu.boxSizing, borderLeft = _environment$getCompu.borderLeft, borderRight = _environment$getCompu.borderRight, borderTop = _environment$getCompu.borderTop, borderBottom = _environment$getCompu.borderBottom, paddingLeft = _environment$getCompu.paddingLeft, paddingRight = _environment$getCompu.paddingRight, paddingTop = _environment$getCompu.paddingTop, paddingBottom = _environment$getCompu.paddingBottom;
       var boxWidth = boxSizing === "border-box" ? getPixelValue(width2) : sumOfPropertyValues(width2, borderLeft, borderRight, paddingLeft, paddingRight);
       var boxHeight = boxSizing === "border-box" ? getPixelValue(height2) : sumOfPropertyValues(height2, borderTop, borderBottom, paddingTop, paddingBottom);
-      bounds = new Bounds2(_extends$4({}, bounds, {
+      bounds = new Bounds2(_extends$3({}, bounds, {
         width: boxWidth,
         height: boxHeight
       }));
@@ -2923,7 +2917,7 @@ var Bounds = /* @__PURE__ */ function() {
   };
   _proto.merge = function merge(partialBoundsOrMergeFn) {
     var current = this.toObject();
-    return new Bounds2(_extends$4({}, current, typeof partialBoundsOrMergeFn === "function" ? partialBoundsOrMergeFn(current) : partialBoundsOrMergeFn));
+    return new Bounds2(_extends$3({}, current, typeof partialBoundsOrMergeFn === "function" ? partialBoundsOrMergeFn(current) : partialBoundsOrMergeFn));
   };
   _proto.substract = function substract(bounds) {
     var result = this.toObject();
@@ -2990,7 +2984,7 @@ var Placement = /* @__PURE__ */ function() {
       typeof layerDimensions === "function" ? layerDimensions(this.primary.prop) : layerDimensions
     );
     this.subjectsBounds = subjectBounds.merge({
-      layer: _extends$4({}, subjectBounds.layer, dimensions)
+      layer: _extends$3({}, subjectBounds.layer, dimensions)
     });
   };
   _proto.getLayerBounds = function getLayerBounds(secondaryOffset) {
@@ -3165,7 +3159,7 @@ function getArrowStyle(subjectsBounds, placement, arrowOffset) {
   var primarySide = placement.primary.prop;
   var secondarySide = placement.primary.oppositeCssProp;
   var secondaryValue = triggerIsBigger ? layer2[sizeProperty] / 2 + negativeOffset : trigger2[secondarySide] + trigger2[sizeProperty] / 2 - layer2[secondarySide];
-  return _extends$4({}, STYLE_BASE, (_extends22 = {}, _extends22[primarySide] = "100%", _extends22[secondarySide] = limit(secondaryValue, min, max), _extends22));
+  return _extends$3({}, STYLE_BASE, (_extends22 = {}, _extends22[primarySide] = "100%", _extends22[secondarySide] = limit(secondaryValue, min, max), _extends22));
 }
 var Placements = /* @__PURE__ */ function() {
   function Placements2(placements, config, subjectsBounds) {
@@ -3294,11 +3288,11 @@ var Placements = /* @__PURE__ */ function() {
     var arrow2 = getArrowStyle(this.subjectsBounds.merge({
       layer: layerBounds
     }), placement, this.config.arrowOffset);
-    var layer2 = this.config.overflowContainer ? _extends$4({}, layerStyleBase, {
+    var layer2 = this.config.overflowContainer ? _extends$3({}, layerStyleBase, {
       position: "fixed",
       top: layerBounds.top,
       left: layerBounds.left
-    }) : _extends$4({}, layerStyleBase, {
+    }) : _extends$3({}, layerStyleBase, {
       position: "absolute",
       top: layerBounds.top - this.subjectsBounds.parent.top + scrollOffsets.top - borderOffsets.top,
       left: layerBounds.left - this.subjectsBounds.parent.left + scrollOffsets.left - borderOffsets.left
@@ -3373,7 +3367,7 @@ var SubjectsBounds = /* @__PURE__ */ function() {
   };
   var _proto = SubjectsBounds2.prototype;
   _proto.merge = function merge(subjectsBounds) {
-    return new SubjectsBounds2(_extends$4({}, this, subjectsBounds), this.overflowContainer);
+    return new SubjectsBounds2(_extends$3({}, this, subjectsBounds), this.overflowContainer);
   };
   _proto.offsetsToScrollContainers = function offsetsToScrollContainers(subject, allContainers) {
     if (allContainers === void 0) {
@@ -3608,10 +3602,10 @@ var Arrow = /* @__PURE__ */ forwardRef(function Arrow2(_ref2, ref) {
   var sizeA = size2;
   var sizeB = getWidthBasedOnAngle(angle, size2) * 2;
   var maxSize = Math.max(sizeA, sizeB);
-  return createElement("svg", _extends$4({
+  return createElement("svg", _extends$3({
     ref
   }, rest, {
-    style: _extends$4({}, style, {
+    style: _extends$3({}, style, {
       transform: "translate" + (side.isHorizontal ? "Y" : "X") + "(-50%)"
     }),
     width: maxSize,
@@ -8275,8 +8269,8 @@ function _interopRequireWildcard$2(obj, nodeInterop) {
   }
   return newObj;
 }
-function _extends$3() {
-  _extends$3 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$2() {
+  _extends$2 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key2 in source) {
@@ -8287,7 +8281,7 @@ function _extends$3() {
     }
     return target;
   };
-  return _extends$3.apply(this, arguments);
+  return _extends$2.apply(this, arguments);
 }
 function _objectWithoutPropertiesLoose$3(source, excluded) {
   if (source == null) return {};
@@ -8492,7 +8486,7 @@ var Resizable$1 = /* @__PURE__ */ function(_React$Component) {
       children: [].concat(children.props.children, resizeHandles.map(function(handleAxis) {
         var _this3$handleRefs$han;
         var ref = (_this3$handleRefs$han = _this3.handleRefs[handleAxis]) != null ? _this3$handleRefs$han : _this3.handleRefs[handleAxis] = /* @__PURE__ */ React$2.createRef();
-        return /* @__PURE__ */ React$2.createElement(_reactDraggable.DraggableCore, _extends$3({}, draggableOpts, {
+        return /* @__PURE__ */ React$2.createElement(_reactDraggable.DraggableCore, _extends$2({}, draggableOpts, {
           nodeRef: ref,
           key: "resizableHandle-" + handleAxis,
           onStop: _this3.resizeHandler("onResizeStop", handleAxis),
@@ -8563,8 +8557,8 @@ function _interopRequireWildcard$1(obj, nodeInterop) {
   }
   return newObj;
 }
-function _extends$2() {
-  _extends$2 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$1() {
+  _extends$1 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key2 in source) {
@@ -8575,7 +8569,7 @@ function _extends$2() {
     }
     return target;
   };
-  return _extends$2.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
 function ownKeys$1(object2, enumerableOnly) {
   var keys2 = Object.keys(object2);
@@ -8706,7 +8700,7 @@ var ResizableBox = /* @__PURE__ */ function(_React$Component) {
       resizeHandles,
       transformScale,
       width: this.state.width
-    }, /* @__PURE__ */ React$1.createElement("div", _extends$2({}, props, {
+    }, /* @__PURE__ */ React$1.createElement("div", _extends$1({}, props, {
       style: _objectSpread$5(_objectSpread$5({}, style), {}, {
         width: this.state.width + "px",
         height: this.state.height + "px"
@@ -15698,15 +15692,6 @@ const useWindowWidth = () => {
   }, []);
   return width2;
 };
-function _extends$1() {
-  return _extends$1 = Object.assign ? Object.assign.bind() : function(n2) {
-    for (var e2 = 1; e2 < arguments.length; e2++) {
-      var t = arguments[e2];
-      for (var r2 in t) ({}).hasOwnProperty.call(t, r2) && (n2[r2] = t[r2]);
-    }
-    return n2;
-  }, _extends$1.apply(null, arguments);
-}
 function _assertThisInitialized(e2) {
   if (void 0 === e2) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   return e2;
@@ -16079,7 +16064,7 @@ function createListComponent(_ref) {
         className,
         onScroll,
         ref: this._outerRefSetter,
-        style: _extends$1({
+        style: _extends$4({
           position: "relative",
           height: height2,
           width: width2,
@@ -48167,6 +48152,7 @@ var interopRequireDefault = { exports: {} };
   module.exports = _interopRequireDefault2, module.exports.__esModule = true, module.exports["default"] = module.exports;
 })(interopRequireDefault);
 var interopRequireDefaultExports = interopRequireDefault.exports;
+const require$$2 = /* @__PURE__ */ getAugmentedNamespace(_extends$5);
 const richTextToolbar = "_richTextToolbar_1gbkk_1";
 const richTextToolbarContainer = "_richTextToolbarContainer_1gbkk_5";
 const styles$h = {
@@ -49467,7 +49453,7 @@ var Handle$2 = /* @__PURE__ */ React$4.forwardRef(function(props, ref) {
     }
   };
   var positionStyle = getDirectionStyle(direction, value, min, max);
-  var handleNode = /* @__PURE__ */ React$4.createElement("div", _extends$1({
+  var handleNode = /* @__PURE__ */ React$4.createElement("div", _extends$4({
     ref,
     className: cx$2(handlePrefixCls, (_classNames = {}, _defineProperty$7(_classNames, "".concat(handlePrefixCls, "-").concat(valueIndex + 1), range2), _defineProperty$7(_classNames, "".concat(handlePrefixCls, "-dragging"), dragging), _classNames)),
     style: _objectSpread2$1(_objectSpread2$1({}, positionStyle), style),
@@ -49511,7 +49497,7 @@ var Handles = /* @__PURE__ */ React$4.forwardRef(function(props, ref) {
     };
   });
   return /* @__PURE__ */ React$4.createElement(React$4.Fragment, null, values2.map(function(value, index2) {
-    return /* @__PURE__ */ React$4.createElement(Handle$2, _extends$1({
+    return /* @__PURE__ */ React$4.createElement(Handle$2, _extends$4({
       ref: function ref2(node2) {
         if (!node2) {
           delete handlesRef.current[index2];
@@ -50881,7 +50867,7 @@ Object.defineProperty(Handle$1, "__esModule", {
   value: true
 });
 var default_1 = Handle$1.default = void 0;
-var _extends2 = _interopRequireDefault(require_extends());
+var _extends2 = _interopRequireDefault(require$$2);
 var _objectSpread2 = _interopRequireDefault(requireObjectSpread2());
 var _defineProperty2 = _interopRequireDefault(requireDefineProperty());
 var _objectWithoutProperties2 = _interopRequireDefault(requireObjectWithoutProperties());
@@ -51277,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,
@@ -51291,7 +51278,8 @@ const styles$9 = {
   expandableRow,
   flush,
   dragIconCell,
-  dragIcon
+  dragIcon,
+  dragIconDisabled
 };
 const ExpandedContentRow = ({
   colSpan,
@@ -51988,6 +51976,7 @@ const Row = ({
   hasRowActions: hasRowActions2,
   draggableTable = false,
   columnWidths,
+  dropDisabled = false,
   height: height2,
   testId
   //TODO: add testId
@@ -52045,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
   };
@@ -52054,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(
@@ -52135,11 +52135,13 @@ const TableDragWrapper = (props) => {
     draggable,
     onListReorder = () => {
     },
+    canListReorder = () => true,
     rowActions,
     rows = [],
     tbodyRef
   } = props;
   const [dragIndex, setDragIndex] = useState(null);
+  const [dropDisabled, setDropDisabled] = useState(false);
   const itemIds = useMemo(
     () => rows.map((_2, index2) => index2.toString()),
     [rows]
@@ -52149,34 +52151,53 @@ const TableDragWrapper = (props) => {
   };
   const handleDragEnd = (event) => {
     setDragIndex(null);
+    setDropDisabled(false);
     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;
+    }
+    const from3 = Number(active2.id);
+    const to2 = Number(over == null ? void 0 : over.id);
+    if (!canListReorder({ from: from3, to: to2 })) {
+      return;
     }
+    onListReorder({ from: from3, to: to2 });
+  };
+  const handleDragOver = (event) => {
+    const { active: active2, over } = event;
+    const from3 = Number(active2.id);
+    const to2 = Number(over == null ? void 0 : over.id);
+    const disabled2 = from3 !== to2 && !canListReorder({ from: from3, to: to2 });
+    setDropDisabled(disabled2);
   };
   const getCalculatedWidths = () => {
-    if (!(tbodyRef == null ? void 0 : tbodyRef.current)) return [];
+    if (!(tbodyRef == null ? void 0 : tbodyRef.current)) {
+      return [];
+    }
     const rows2 = tbodyRef.current.querySelectorAll("tr");
     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`);
+    if (!cells) {
+      return [];
+    }
+    const widths = Array.from(cells).map(
+      (cell2) => `${cell2.getBoundingClientRect().width}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,
@@ -52188,7 +52209,8 @@ const TableDragWrapper = (props) => {
               colSpan,
               hasRowActions: rowActions,
               columnAlignment,
-              draggableTable: draggable
+              draggableTable: draggable,
+              dropDisabled
             }
           ) }) }) }),
           document.body
@@ -52237,8 +52259,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,
@@ -52330,64 +52356,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(