@luminati-io/uikit 3.6.1 → 3.6.2-beta.4

package/dist/umd/uikit.development.js

@@ -38241,7 +38241,7 @@ __webpack_require__.r(__webpack_exports__);
 /*jslint react:true*/
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 
-var _excluded = ["columns", "data", "pageSize", "pageSizes", "children", "stateManager", "hooks", "NoDataComp", "LoadingComp", "ExpandHandleComp", "noDataText", "loadingText", "isLoading", "onPageChange", "manualPagination", "totalCount", "paginateExpandedRows", "getHeaderProps", "getColumnProps", "getRowProps", "getCellProps", "getFooterProps", "selectedRowIds", "canOrderColumns", "rowActions", "columnSort", "onColumnSortChanged", "isCellEditable", "onStartEdit"];
+var _excluded = ["columns", "data", "pageSize", "pageSizes", "children", "stateManager", "hooks", "NoDataComp", "LoadingComp", "ExpandHandleComp", "noDataText", "loadingText", "isLoading", "onPageChange", "manualPagination", "totalCount", "paginateExpandedRows", "getHeaderProps", "getColumnProps", "getRowProps", "getCellProps", "getFooterProps", "selectedRowIds", "canOrderColumns", "rowActions", "columnSort", "onColumnSortChanged", "isCellEditable", "onStartEdit", "draggableRows", "onRowDragStart", "onRowDragEnd"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -38327,11 +38327,18 @@ var Provider = function Provider(props) {
     onColumnSortChanged = props.onColumnSortChanged,
     isCellEditable = props.isCellEditable,
     onStartEdit = props.onStartEdit,
+    draggableRows = props.draggableRows,
+    onRowDragStart = props.onRowDragStart,
+    onRowDragEnd = props.onRowDragEnd,
     rest = _objectWithoutProperties(props, _excluded);
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(0),
     _useState2 = _slicedToArray(_useState, 2),
     pageCount = _useState2[0],
     setPageCount = _useState2[1];
+  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDraggingRow = _useState4[0],
+    setIsDraggingRow = _useState4[1];
   var hiddenColumns = (0,_util__WEBPACK_IMPORTED_MODULE_7__.firstDefined)(stateManager === null || stateManager === void 0 ? void 0 : stateManager.get('hiddenColumns'), props.hiddenColumns);
   var pinnedColumns = (0,_util__WEBPACK_IMPORTED_MODULE_7__.firstDefined)(stateManager === null || stateManager === void 0 ? void 0 : stateManager.get('pinnedColumns'), props.pinnedColumns);
   var columnOrder = (0,_util__WEBPACK_IMPORTED_MODULE_7__.firstDefined)(stateManager === null || stateManager === void 0 ? void 0 : stateManager.get('columnOrder'), props.columnOrder);
@@ -38393,7 +38400,12 @@ var Provider = function Provider(props) {
     LoadingComp: _LoadingComp,
     NoDataComp: _NoDataComp,
     rowActions: rowActions,
-    expandColumnId: expandColumnId
+    expandColumnId: expandColumnId,
+    draggableRows: draggableRows,
+    isDraggingRow: isDraggingRow,
+    setIsDraggingRow: setIsDraggingRow,
+    onRowDragStart: onRowDragStart,
+    onRowDragEnd: onRowDragEnd
   });
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(TableContext.Provider, {
     value: value
@@ -38421,7 +38433,8 @@ Provider.defaultProps = {
   isCellEditable: function isCellEditable(_ref) {
     var column = _ref.column;
     return column.canEdit;
-  }
+  },
+  draggableRows: false
 };
 Provider.propTypes = {
   columns: prop_types__WEBPACK_IMPORTED_MODULE_1___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({
@@ -38480,7 +38493,10 @@ Provider.propTypes = {
   rowActions: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().array),
   scrollable: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   scrollHeight: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  expandColumnId: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
+  expandColumnId: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  draggableRows: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  onRowDragStart: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  onRowDragEnd: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)
 };
 var calcPageCount = function calcPageCount(totalCount, pageSize) {
   return Math.ceil(totalCount / pageSize);
@@ -40272,9 +40288,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ "styled-components");
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react-beautiful-dnd */ "./node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js");
 /* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
 /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
 /* harmony import */ var _table_cell__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./table_cell */ "./src/table/table_cell.js");
+/* harmony import */ var _row_hover_actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./row_hover_actions */ "./src/table/row_hover_actions.js");
+/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./context */ "./src/table/context.js");
 // LICENSE_CODE ZON
 
 
@@ -40285,6 +40304,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 
+
+
+
 var preventOnClickClass = 'tableCell--preventOnClick';
 var renderRow = function renderRow(opt) {
   var className = opt.className,
@@ -40293,7 +40315,8 @@ var renderRow = function renderRow(opt) {
     getRowProps = opt.getRowProps,
     rowDensity = opt.rowDensity,
     isLast = opt.isLast,
-    renderRowSubComponent = opt.renderRowSubComponent;
+    renderRowSubComponent = opt.renderRowSubComponent,
+    dndIndex = opt.dndIndex;
   var isExpanded = row.isExpanded,
     isPinned = row.isPinned,
     original = row.original;
@@ -40319,9 +40342,19 @@ var renderRow = function renderRow(opt) {
       className: className
     });
   }));
-  if (!isExpanded || !renderRowSubComponent) return tableRow;
+  if (!isExpanded || !renderRowSubComponent) {
+    var wrapperKey = "".concat(rowProps.key || row.id, "_wrapper");
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(RowWrapper, {
+      key: wrapperKey,
+      dndIndex: dndIndex,
+      row: row
+    }, tableRow);
+  }
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
     key: "".concat(rowProps.key, "_fragment")
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(RowWrapper, {
+    dndIndex: dndIndex,
+    row: row
   }, tableRow, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(TableRow, _extends({}, rowProps, {
     key: "".concat(rowProps.key, "_subcomponent"),
     className: (0,_util__WEBPACK_IMPORTED_MODULE_3__.classNames)(className, {
@@ -40330,7 +40363,7 @@ var renderRow = function renderRow(opt) {
   }), renderRowSubComponent({
     row: row,
     rowProps: rowProps
-  })));
+  }))));
 };
 var TableRow = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
   displayName: "TableRow",
@@ -40345,6 +40378,163 @@ var TableRow = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.with
     white_spaced: '72'
   }[props.$rowDensity] || '32';
 }, _table_cell__WEBPACK_IMPORTED_MODULE_4__.TableCellContent, _theme__WEBPACK_IMPORTED_MODULE_2__["default"].color.gray_2);
+var useDraggableRowProps = function useDraggableRowProps(row, dndIndex) {
+  var _useTableContext = (0,_context__WEBPACK_IMPORTED_MODULE_6__.useTableContext)(),
+    draggableRows = _useTableContext.draggableRows;
+  return {
+    key: row.id,
+    draggableId: row.id,
+    index: dndIndex,
+    isDragDisabled: !draggableRows
+  };
+};
+var RowWrapper = function RowWrapper(props) {
+  var children = props.children,
+    dndIndex = props.dndIndex,
+    row = props.row;
+  var _useRowHoverActions = (0,_row_hover_actions__WEBPACK_IMPORTED_MODULE_5__.useRowHoverActions)(row),
+    renderHoverActions = _useRowHoverActions.renderHoverActions,
+    setRowRef = _useRowHoverActions.setRowRef,
+    hoverProps = _useRowHoverActions.hoverProps;
+  var handleWrapperRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (rowElment, cb) {
+    setRowRef(rowElment);
+    cb(rowElment);
+  }, []);
+  var draggableProps = useDraggableRowProps(row, dndIndex);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_7__.Draggable, draggableProps, function (provided) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", _extends({}, provided.draggableProps, hoverProps, {
+      ref: function ref(element) {
+        return handleWrapperRef(element, provided.innerRef);
+      }
+    }), children, renderHoverActions({
+      dragHandleProps: provided.dragHandleProps
+    }));
+  });
+};
+
+/***/ }),
+
+/***/ "./src/table/row_hover_actions.js":
+/*!****************************************!*\
+  !*** ./src/table/row_hover_actions.js ***!
+  \****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useRowHoverActions: () => (/* binding */ useRowHoverActions)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react_popper__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-popper */ "./node_modules/react-popper/lib/esm/usePopper.js");
+/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
+/* harmony import */ var _icon_button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../icon_button */ "./src/icon_button.js");
+/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./context */ "./src/table/context.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+var _excluded = ["visible", "dragHandleProps", "row"];
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+
+
+
+var RowHoverActions = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (props, ref) {
+  var visible = props.visible,
+    dragHandleProps = props.dragHandleProps,
+    row = props.row,
+    wrapperProps = _objectWithoutProperties(props, _excluded);
+  var _useTableContext = (0,_context__WEBPACK_IMPORTED_MODULE_4__.useTableContext)(),
+    getRowProps = _useTableContext.getRowProps,
+    draggableRows = _useTableContext.draggableRows;
+  var _row$getRowProps = row.getRowProps(getRowProps === null || getRowProps === void 0 ? void 0 : getRowProps(row)),
+    draggable = _row$getRowProps.draggable;
+  var showDndButton = dragHandleProps && draggableRows;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(HoverActionsList, _extends({
+    $visible: visible,
+    ref: ref
+  }, wrapperProps), showDndButton && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_3__.IconButton, _extends({
+    disabled: !(draggable !== null && draggable !== void 0 ? draggable : true),
+    variant: "icon",
+    icon: "DragAndDrop"
+  }, dragHandleProps))));
+});
+RowHoverActions.displayName = 'RowHoverActions';
+var HoverActionsList = styled_components__WEBPACK_IMPORTED_MODULE_1___default().ul.withConfig({
+  displayName: "HoverActionsList",
+  componentId: "sc-1xb8hvf-0"
+})(["list-style-type:none;margin:0;padding:0 ", ";visibility:", ";"], _theme__WEBPACK_IMPORTED_MODULE_2__["default"].spacing['02'], function (props) {
+  return props.$visible ? 'visible' : 'hidden';
+});
+var useRowHoverActions = function useRowHoverActions(row) {
+  var _useTableContext2 = (0,_context__WEBPACK_IMPORTED_MODULE_4__.useTableContext)(),
+    isDraggingRow = _useTableContext2.isDraggingRow;
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    rowRef = _useState2[0],
+    setRowRef = _useState2[1];
+  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hoverActionsRef = _useState4[0],
+    setHoverActionsRef = _useState4[1];
+  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    visibleHoverActions = _useState6[0],
+    setVisibleHoverActions = _useState6[1];
+  var _usePopper = (0,react_popper__WEBPACK_IMPORTED_MODULE_5__.usePopper)(rowRef, hoverActionsRef, {
+      modifiers: [{
+        name: 'flip',
+        enabled: true,
+        options: {
+          fallbackPlacements: ['right']
+        }
+      }],
+      placement: 'left'
+    }),
+    styles = _usePopper.styles,
+    attributes = _usePopper.attributes,
+    update = _usePopper.update;
+  var onPointerEnter = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    if (typeof update == 'function') update();
+    !isDraggingRow && setVisibleHoverActions(true);
+  }, [isDraggingRow, update]);
+  var onPointerLeave = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    return setVisibleHoverActions(false);
+  }, []);
+  var hoverProps = {
+    onPointerEnter: onPointerEnter,
+    onPointerLeave: onPointerLeave
+  };
+  var renderHoverActions = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    var extraProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(RowHoverActions, _extends({
+      visible: visibleHoverActions,
+      row: row,
+      ref: setHoverActionsRef
+    }, hoverProps, {
+      style: styles.popper
+    }, attributes.popper, extraProps));
+  }, [row, visibleHoverActions, styles, attributes, hoverProps]);
+  return {
+    renderHoverActions: renderHoverActions,
+    setRowRef: setRowRef,
+    hoverProps: hoverProps
+  };
+};
 
 /***/ }),
 
@@ -40972,6 +41162,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! styled-components */ "styled-components");
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! react-beautiful-dnd */ "./node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js");
 /* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
 /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
 /* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./context */ "./src/table/context.js");
@@ -41004,6 +41195,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
+
 var Table = function Table(props) {
   var context = (0,_context__WEBPACK_IMPORTED_MODULE_6__.useTableContext)();
   // not under context
@@ -41102,7 +41294,11 @@ var TableBody = function TableBody(props) {
     LoadingComp = _useTableContext2.LoadingComp,
     isLoading = _useTableContext2.isLoading,
     getRowProps = _useTableContext2.getRowProps,
-    renderRowSubComponent = _useTableContext2.renderRowSubComponent;
+    renderRowSubComponent = _useTableContext2.renderRowSubComponent,
+    setIsDraggingRow = _useTableContext2.setIsDraggingRow,
+    onRowDragStart = _useTableContext2.onRowDragStart,
+    onRowDragEnd = _useTableContext2.onRowDragEnd,
+    rowsById = _useTableContext2.rowsById;
   var body = function () {
     if (isLoading) return (0,_util__WEBPACK_IMPORTED_MODULE_5__.flexRender)(LoadingComp);
     if (!page.length) return (0,_util__WEBPACK_IMPORTED_MODULE_5__.flexRender)(NoDataComp);
@@ -41117,21 +41313,38 @@ var TableBody = function TableBody(props) {
         showExpand: row.canExpand,
         className: className,
         getRowProps: getRowProps,
-        renderRowSubComponent: renderRowSubComponent
+        renderRowSubComponent: renderRowSubComponent,
+        dndIndex: i
       });
     });
   }();
   var bodyProps = getTableBodyProps();
   var style = _objectSpread(_objectSpread({}, props.style), bodyProps.style);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(TableBodyRowGroup, _extends({
+  var onDragStart = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)(function (e) {
+    setIsDraggingRow(true);
+    onRowDragStart === null || onRowDragStart === void 0 || onRowDragStart(e, rowsById[e.draggableId]);
+  }, [page]);
+  var onDragEnd = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)(function (e) {
+    var _page$e$destination$i, _e$destination;
+    setIsDraggingRow(false);
+    var destinationRowId = (_page$e$destination$i = page[(_e$destination = e.destination) === null || _e$destination === void 0 ? void 0 : _e$destination.index]) === null || _page$e$destination$i === void 0 ? void 0 : _page$e$destination$i.id;
+    onRowDragEnd === null || onRowDragEnd === void 0 || onRowDragEnd(e, rowsById[e.draggableId], rowsById[destinationRowId]);
+  }, [page]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_11__.DragDropContext, {
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(TableBodyRowGroup, _extends({
     "data-rowgroup-type": "body"
   }, bodyProps, {
+    style: style,
     className: (0,_util__WEBPACK_IMPORTED_MODULE_5__.classNames)(className, {
       tableBody: true
     }),
-    style: style,
     onScroll: onScroll
-  }), pinnedRows.map(function (row) {
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(DroppableBodyRowGroup, {
+    id: "table-body-pinned-rows",
+    type: "PINNED_ROWS"
+  }, pinnedRows.map(function (row, i) {
     prepareRow(row);
     return (0,_render_row__WEBPACK_IMPORTED_MODULE_9__.renderRow)({
       row: row,
@@ -41139,9 +41352,26 @@ var TableBody = function TableBody(props) {
       onRowClick: onRowClick,
       className: className,
       getRowProps: getRowProps,
-      renderRowSubComponent: renderRowSubComponent
+      renderRowSubComponent: renderRowSubComponent,
+      dndIndex: i
     });
-  }), body);
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(DroppableBodyRowGroup, {
+    id: "table-body-rows",
+    type: "ROWS"
+  }, body)));
+};
+var DroppableBodyRowGroup = function DroppableBodyRowGroup(props) {
+  var children = props.children,
+    id = props.id,
+    type = props.type;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_11__.Droppable, {
+    droppableId: id,
+    type: type
+  }, function (provided) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement("div", _extends({
+      ref: provided.innerRef
+    }, provided.droppableProps), children, provided.placeholder);
+  });
 };
 var TableBodyRowGroup = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.withConfig({
   displayName: "TableBodyRowGroup",
@@ -42056,7 +42286,6 @@ var defaultContainerStyle = {
 };
 var Toaster = function Toaster(props) {
   var position = props.position,
-    gap = props.gap,
     maxToasts = props.maxToasts,
     containerStyle = props.containerStyle,
     children = props.children;
@@ -42067,7 +42296,6 @@ var Toaster = function Toaster(props) {
     }
   }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_hot_toast__WEBPACK_IMPORTED_MODULE_2__.Toaster, {
     position: position,
-    gutter: gap,
     toastOptions: {
       duration: 5000
     },
@@ -42076,12 +42304,10 @@ var Toaster = function Toaster(props) {
 };
 Toaster.defaultProps = {
   position: 'bottom-left',
-  gap: 8,
   maxToasts: 2
 };
 Toaster.propTypes = {
   position: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_3__.toastPositions),
-  gap: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
   maxToasts: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number)
 };
 
@@ -86376,7 +86602,7 @@ var symbol = new (_node_modules_svg_baker_runtime_browser_symbol_js__WEBPACK_IMP
   "id": "mail_uikit_icon",
   "use": "mail_uikit_icon-usage",
   "viewBox": "0 0 20 20",
-  "content": "<symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\" id=\"mail_uikit_icon\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M17.7 3h-15A1.7 1.7 0 0 0 1 4.7v10a1.7 1.7 0 0 0 1.7 1.7h15a1.7 1.7 0 0 0 1.7-1.7v-10A1.7 1.7 0 0 0 17.7 3ZM2.2 5.166V14.7a.5.5 0 0 0 .5.5h15a.5.5 0 0 0 .5-.5V5.166l-7.656 5.359a.6.6 0 0 1-.688 0L2.2 5.165ZM17.487 4.2H2.913L10.2 9.3l7.287-5.1Z\" clip-rule=\"evenodd\" /></symbol>"
+  "content": "<symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 20 20\" id=\"mail_uikit_icon\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M17.7 3h-15A1.7 1.7 0 0 0 1 4.7v10a1.7 1.7 0 0 0 1.7 1.7h15a1.7 1.7 0 0 0 1.7-1.7v-10A1.7 1.7 0 0 0 17.7 3M2.2 5.166V14.7a.5.5 0 0 0 .5.5h15a.5.5 0 0 0 .5-.5V5.166l-7.656 5.359a.6.6 0 0 1-.688 0L2.2 5.165ZM17.487 4.2H2.913L10.2 9.3z\" clip-rule=\"evenodd\" /></symbol>"
 });
 var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WEBPACK_IMPORTED_MODULE_1___default().add(symbol);
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (symbol);