@mailstep/design-system 0.7.53-beta.1 → 0.7.53-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.53-beta.1",
+  "version": "0.7.53-beta.3",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -147,5 +147,10 @@
   },
   "resolutions": {
     "jackspeak": "2.1.1"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0"
   }
 }

package/ui/Blocks/CommonGrid/CommonGrid.d.ts

@@ -1,8 +1,8 @@
-import { DropResult } from 'react-beautiful-dnd';
+import type { DragEndEvent } from '@dnd-kit/core';
 import type { CommonGridProps, FiltersConfig, ColumnDefinition } from './types';
 type Props = CommonGridProps & {
     filters?: FiltersConfig;
-    handleDragEnd: (item: DropResult) => void;
+    handleDragEnd: (item: DragEndEvent) => void;
     displayColumnsDefinitions: ColumnDefinition[];
     hasGroups: boolean;
     hasFilters: boolean;

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -62,7 +62,7 @@ var CommonGrid = function (_a) {
     var commonGridRef = React.useCallback(function (node) {
         gridBoxRef.current = node;
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), width: window.innerWidth, children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [hasGroups && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd }), hasFilters && (_jsx(FilterRow, { filters: filters, comparators: comparators, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
+    return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), width: window.innerWidth, children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [hasGroups && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd }), hasFilters && (_jsx(FilterRow, { filters: filters, comparators: comparators, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
                                 rowsData &&
                                 displayColumnsDefinitions &&
                                 rowsData.map(function (row, index) {

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -57,7 +57,7 @@ var CommonGridContainer = function (props) {
     });
     var modifiedPassDownProps = useEditReadAsColumn(passDownProps);
     var filters = useMemo(function () { return getFilters(optimizeFilters); }, [optimizeFilters]);
-    var columns = passDownProps.columnsDefinitions; // modifiedPassDownProps.columnsDefinitions
+    var columns = modifiedPassDownProps.columnsDefinitions;
     var _h = useModal(), openManageColumnForm = _h.onOpen, manageColumnFormVisible = _h.isOpen, onClose = _h.onClose;
     var _j = useManageColumn({
         columns: columns,
@@ -66,6 +66,6 @@ var CommonGridContainer = function (props) {
         onClose: onClose
     }), columnsConfigValues = _j.columnsConfigValues, setColumnsConfigOptions = _j.setColumnsConfigOptions, onConfirmForm = _j.onConfirmForm, resetColumnConfig = _j.resetColumnConfig, handleDragEnd = _j.handleDragEnd, onCloseForm = _j.onCloseForm, displayColumnsDefinitions = _j.displayColumnsDefinitions, manageColumnsFormDefinitions = _j.manageColumnsFormDefinitions;
     var _k = usePresetState(), isPresetsModalOpen = _k.isPresetsModalOpen, onClosePresetsModal = _k.onClosePresetsModal, onOpenPresetsModal = _k.onOpenPresetsModal, setSelectedPresetName = _k.setSelectedPresetName, selectedPresetName = _k.selectedPresetName;
-    return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { ref: gridRef, children: [_jsxs(CommonGridWrap, { withPagination: withPagination, children: [withButtonStrip && (_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm, onOpenPresetsModal: onOpenPresetsModal, selectedPresetName: selectedPresetName, withPresets: withPresets, gridName: gridName, withManageColumnButton: withManageColumnButton }) }) })), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { columnsDefinitions: columns, withButtonStrip: withButtonStrip, hasGroupsOrFilters: hasGroupsOrFilters, filters: filters, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasFilters: hasFilters, hasGroups: hasGroups, hasColouredRows: true }))] }), _jsxs(BottomWrapper, { withPagination: withPagination, children: [(processCheckedValues || !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionOptions: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), withPagination && (_jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler, autoRowsPerPage: autoRowsPerPage })] }))] })] }), _jsx(GridModals, { manageColumnFormVisible: manageColumnFormVisible, onCloseForm: onCloseForm, resetColumnConfig: resetColumnConfig, onConfirmForm: onConfirmForm, manageColumnsFormDefinitions: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true), gridName: gridName, gridActions: gridActions, gridSelectors: gridSelectors, onClosePresetsModal: onClosePresetsModal, isPresetsModalOpen: isPresetsModalOpen, selectedPresetName: selectedPresetName, setSelectedPresetName: setSelectedPresetName })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { ref: gridRef, children: [_jsxs(CommonGridWrap, { withPagination: withPagination, children: [withButtonStrip && (_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm, onOpenPresetsModal: onOpenPresetsModal, selectedPresetName: selectedPresetName, withPresets: withPresets, gridName: gridName, withManageColumnButton: withManageColumnButton }) }) })), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { withButtonStrip: withButtonStrip, hasGroupsOrFilters: hasGroupsOrFilters, filters: filters, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasFilters: hasFilters, hasGroups: hasGroups, hasColouredRows: true }))] }), _jsxs(BottomWrapper, { withPagination: withPagination, children: [(processCheckedValues || !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionOptions: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), withPagination && (_jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler, autoRowsPerPage: autoRowsPerPage })] }))] })] }), _jsx(GridModals, { manageColumnFormVisible: manageColumnFormVisible, onCloseForm: onCloseForm, resetColumnConfig: resetColumnConfig, onConfirmForm: onConfirmForm, manageColumnsFormDefinitions: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true), gridName: gridName, gridActions: gridActions, gridSelectors: gridSelectors, onClosePresetsModal: onClosePresetsModal, isPresetsModalOpen: isPresetsModalOpen, selectedPresetName: selectedPresetName, setSelectedPresetName: setSelectedPresetName })] }));
 };
 export default CommonGridContainer;

package/ui/Blocks/CommonGrid/components/GridModals/index.d.ts

@@ -1,6 +1,6 @@
 import React, { type FC } from 'react';
-import { DropResult } from 'react-beautiful-dnd';
-import { ColumnConfig, ColumnDefinition, GridActionsType, GridSelectorsType } from '../../types';
+import type { ColumnConfig, ColumnDefinition, GridActionsType, GridSelectorsType } from '../../types';
+import type { DragEndEvent } from '@dnd-kit/core';
 type ModalsProps = {
     manageColumnFormVisible: boolean;
     onCloseForm: () => void;
@@ -9,7 +9,7 @@ type ModalsProps = {
     manageColumnsFormDefinitions: ColumnDefinition[];
     columnsConfigValues: string[];
     setColumnsConfigOptions: (value: React.SetStateAction<Record<string, ColumnConfig | {}>>) => void;
-    handleDragEnd: (item: DropResult) => void;
+    handleDragEnd: (item: DragEndEvent) => void;
     gridName?: string;
     gridSelectors: GridSelectorsType;
     gridActions: GridActionsType;

package/ui/Blocks/CommonGrid/components/HeadCell.d.ts

@@ -0,0 +1,16 @@
+import type { FC } from 'react';
+import type { Group, Settings, ColumnDefinition, SortingValueType } from '../types';
+type HeadCellProps = {
+    column: ColumnDefinition;
+    isDragDisabled: boolean;
+    displayColumnsWidth: Record<string, number>;
+    onResizeOut: () => void;
+    onResizeOver: () => void;
+    onResize: (column: string) => (width: number) => void;
+    sortingValues: Settings['sorting'];
+    onSetSort: (column: string, systemName?: string) => (value: SortingValueType) => void;
+    group: Group;
+    hasResize: boolean;
+};
+export declare const HeadCell: FC<HeadCellProps>;
+export {};

package/ui/Blocks/CommonGrid/components/HeadCell.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getCellSizeProps, getGroupClassNames, getSortName, getStickyCollClassNames } from '../utils';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import ColumnTitle from './ColumnTitle';
+import Resize from './Resize';
+import { Cell } from './Table';
+export var HeadCell = function (_a) {
+    var _b;
+    var column = _a.column, isDragDisabled = _a.isDragDisabled, displayColumnsWidth = _a.displayColumnsWidth, onResizeOut = _a.onResizeOut, onResizeOver = _a.onResizeOver, onResize = _a.onResize, sortingValues = _a.sortingValues, onSetSort = _a.onSetSort, group = _a.group, hasResize = _a.hasResize;
+    var _c = useSortable({
+        id: column.name,
+        disabled: isDragDisabled || !!column.sticky,
+        animateLayoutChanges: function () { return false; }
+    }), attributes = _c.attributes, listeners = _c.listeners, setNodeRef = _c.setNodeRef, transform = _c.transform, transition = _c.transition;
+    var cellClassName = "cell".concat(getStickyCollClassNames(!!(column === null || column === void 0 ? void 0 : column.sticky), column === null || column === void 0 ? void 0 : column.stickTo), " ").concat(getGroupClassNames(group));
+    return (_jsxs(Cell, __assign({}, getCellSizeProps(column, displayColumnsWidth[column.name]), attributes, listeners, { className: cellClassName, transition: transition, transform: CSS.Transform.toString(transform), ref: setNodeRef, children: [_jsx(ColumnTitle, { title: column === null || column === void 0 ? void 0 : column.title, isSortable: !!column.sorting, onSetSort: onSetSort(column.name, column.systemName), sortValue: ((_b = sortingValues.find(function (sorting) { return sorting.column === getSortName(column); })) === null || _b === void 0 ? void 0 : _b.direction) || null }), hasResize && onResizeOut && onResizeOver && (_jsx(Resize, { onResize: onResize(column.name), onResizeOver: onResizeOver, onResizeOut: onResizeOut }))] })));
+};

package/ui/Blocks/CommonGrid/components/HeadRow.d.ts

@@ -1,15 +1,14 @@
-import type { DropResult } from 'react-beautiful-dnd';
-import type { Settings, ColumnDefinition, ActionColumn, GridSelectorsType, Group, CommonGridProps, GridActionsType } from '../types';
+import type { Settings, ColumnDefinition, GridSelectorsType, Group, CommonGridProps, GridActionsType } from '../types';
+import type { DragEndEvent } from '@dnd-kit/core';
 type HeadRowProps = {
-    actionColumn?: ActionColumn;
     columns: ColumnDefinition[];
     onAddSort: GridActionsType['addSorting'];
     sortingValues?: Settings['sorting'];
     displayColumnsWidth: Required<GridSelectorsType>['columnsWidth'];
     columnLayout: Required<CommonGridProps>['columnLayout'];
     handleResizeDrag: (column: string, width: number) => void;
-    handleDragEnd: (item: DropResult) => void;
+    handleDragEnd: (event: DragEndEvent) => void;
     groups: Group[];
 };
-declare const HeadRow: ({ columns, actionColumn, onAddSort, handleDragEnd, sortingValues, displayColumnsWidth, columnLayout, handleResizeDrag, groups }: HeadRowProps) => JSX.Element;
+declare const HeadRow: ({ columns, onAddSort, handleDragEnd, sortingValues, displayColumnsWidth, columnLayout, handleResizeDrag, groups }: HeadRowProps) => JSX.Element;
 export default HeadRow;

package/ui/Blocks/CommonGrid/components/HeadRow.js

@@ -11,10 +11,11 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-import { getCellSizeProps, getGroupClassNames, getSortName, getStickyCollClassNames } from '../utils';
+import { getCellSizeProps, getStickyCollClassNames } from '../utils';
+import { closestCenter, useSensor, useSensors, DndContext, PointerSensor } from '@dnd-kit/core';
+import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
 import ColumnTitle from './ColumnTitle';
-import Resize from './Resize';
+import { HeadCell } from './HeadCell';
 import { Row, Cell } from './Table';
 var getStickyComponent = function (columns, stickyTo, displayColumnsWidth) {
     var _a;
@@ -24,7 +25,7 @@ var getStickyComponent = function (columns, stickyTo, displayColumnsWidth) {
     });
 };
 var HeadRow = function (_a) {
-    var columns = _a.columns, actionColumn = _a.actionColumn, onAddSort = _a.onAddSort, handleDragEnd = _a.handleDragEnd, _b = _a.sortingValues, sortingValues = _b === void 0 ? [] : _b, displayColumnsWidth = _a.displayColumnsWidth, columnLayout = _a.columnLayout, handleResizeDrag = _a.handleResizeDrag, groups = _a.groups;
+    var columns = _a.columns, onAddSort = _a.onAddSort, handleDragEnd = _a.handleDragEnd, _b = _a.sortingValues, sortingValues = _b === void 0 ? [] : _b, displayColumnsWidth = _a.displayColumnsWidth, columnLayout = _a.columnLayout, handleResizeDrag = _a.handleResizeDrag, groups = _a.groups;
     var _c = useState(false), showUIElements = _c[0], setShowUIElements = _c[1];
     useEffect(function () {
         setShowUIElements(true);
@@ -40,16 +41,14 @@ var HeadRow = function (_a) {
         handleResizeDrag === null || handleResizeDrag === void 0 ? void 0 : handleResizeDrag(name, width);
     }; }, [handleResizeDrag]);
     var onSetSort = React.useCallback(function (name, systemName) { return function (value) {
-        onAddSort && onAddSort(systemName || name, value);
+        onAddSort === null || onAddSort === void 0 ? void 0 : onAddSort(systemName || name, value);
     }; }, [onAddSort]);
-    return (_jsx(_Fragment, { children: showUIElements && (_jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", isDropDisabled: isDragDisabled, isCombineEnabled: false, ignoreContainerClipping: false, children: function (droppableProvided) { return (_jsxs(Row, __assign({ className: "headRow", accountForScrollbar: false, ref: droppableProvided.innerRef }, droppableProvided.droppableProps, { children: [getStickyComponent(columns, 'left', displayColumnsWidth), columns
+    var sensors = useSensors(useSensor(PointerSensor));
+    return (_jsx(_Fragment, { children: showUIElements && (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columns.map(function (_a) {
+                    var name = _a.name;
+                    return name;
+                }), strategy: horizontalListSortingStrategy, children: _jsxs(Row, { className: "headRow", children: [getStickyComponent(columns, 'left', displayColumnsWidth), columns
                             .filter(function (item) { return !item.sticky; })
-                            .map(function (column, index) { return (_jsx(Draggable, { draggableId: column.name, index: index, isDragDisabled: isDragDisabled || column.sticky, children: function (_a) {
-                                var _b;
-                                var innerRef = _a.innerRef, draggableProps = _a.draggableProps, dragHandleProps = _a.dragHandleProps;
-                                var hasResize = columnLayout == 'normal' || !!columns[index + 1];
-                                var cellClassName = "cell".concat(getStickyCollClassNames(!!(column === null || column === void 0 ? void 0 : column.sticky), column === null || column === void 0 ? void 0 : column.stickTo), " ").concat(getGroupClassNames(groups[index]));
-                                return (_jsxs("div", __assign({}, getCellSizeProps(column, displayColumnsWidth[column.name]), draggableProps, dragHandleProps, { ref: innerRef, className: cellClassName, children: [_jsx(ColumnTitle, { title: column === null || column === void 0 ? void 0 : column.title, isSortable: !!column.sorting, onSetSort: onSetSort(column.name, column.systemName), sortValue: ((_b = sortingValues.find(function (sorting) { return sorting.column == getSortName(column); })) === null || _b === void 0 ? void 0 : _b.direction) || null }), hasResize && onResizeOut && onResizeOver && (_jsx(Resize, { onResize: onResize(column.name), onResizeOver: onResizeOver, onResizeOut: onResizeOut }))] })));
-                            } }, column.name)); }), getStickyComponent(columns, 'right', displayColumnsWidth), droppableProvided.placeholder] }))); } }) })) }));
+                            .map(function (column, index) { return (_jsx(HeadCell, { column: column, isDragDisabled: isDragDisabled, displayColumnsWidth: displayColumnsWidth, onResizeOut: onResizeOut, onResizeOver: onResizeOver, onResize: onResize, sortingValues: sortingValues, onSetSort: onSetSort, group: groups[index], hasResize: columnLayout === 'normal' || !!columns[index + 1] }, column.name)); }), getStickyComponent(columns, 'right', displayColumnsWidth)] }) }) })) }));
 };
 export default HeadRow;

package/ui/Blocks/CommonGrid/components/ManageColumnForm/ManageColumnForm.d.ts

@@ -1,13 +1,11 @@
 import React from 'react';
-import { DropResult } from 'react-beautiful-dnd';
-import { ColumnConfig, CommonGridProps } from '../../types';
+import type { ColumnConfig, CommonGridProps } from '../../types';
+import type { DragEndEvent } from '@dnd-kit/core';
 type ManageColumnProps = {
     columns?: CommonGridProps['columnsDefinitions'];
     columnsConfigValues?: string[];
-    setColumnsConfigOptions: (value: React.SetStateAction<{
-        [x: string]: ColumnConfig | {};
-    }>) => void;
-    handleDragEnd: (item: DropResult) => void;
+    setColumnsConfigOptions: (value: React.SetStateAction<Record<string, ColumnConfig>>) => void;
+    handleDragEnd: (item: DragEndEvent) => void;
 };
 declare const ManageColumnForm: ({ columns, columnsConfigValues, setColumnsConfigOptions, handleDragEnd }: ManageColumnProps) => JSX.Element;
 export default ManageColumnForm;

package/ui/Blocks/CommonGrid/components/ManageColumnForm/ManageColumnForm.js

@@ -1,23 +1,11 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { Input } from '../../../../Forms/Input/Input';
-import { ActionRow } from './components/ActionRow';
+import { ManageColumnRow } from './components/ManageColumnRow';
+import { closestCenter, useSensor, useSensors, DndContext, PointerSensor } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { i18n } from '@lingui/core';
 import { x } from '@xstyled/styled-components';
-import { RowLayout } from './styles';
-import { getTranslatedValue } from './utils';
 var ManageColumnForm = function (_a) {
     var columns = _a.columns, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, handleDragEnd = _a.handleDragEnd;
     var _b = useState(''), searchedValue = _b[0], setSearchedValue = _b[1];
@@ -27,15 +15,10 @@ var ManageColumnForm = function (_a) {
     var clear = useCallback(function () {
         setSearchedValue('');
     }, [setSearchedValue]);
-    return (_jsxs(x.div, { children: [_jsx(Input, { icon: "search", type: "text", value: searchedValue, placeholder: i18n._({ id: 'manageColumn.searchPlaceholder', message: 'Find column...' }), onChange: onChangeInputValue, onClear: clear, variant: "gray" }), _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "vertical", isCombineEnabled: false, ignoreContainerClipping: false, isDropDisabled: !!searchedValue, children: function (droppableProvided) { return (_jsx(x.div, __assign({ h: "400px", overflowY: "scroll", mt: "20px", ref: droppableProvided.innerRef }, droppableProvided.droppableProps, { children: columns === null || columns === void 0 ? void 0 : columns.map(function (column, index) {
-                            var translatedValue = getTranslatedValue(column);
-                            var isVisible = translatedValue &&
-                                translatedValue.toLocaleLowerCase().includes(searchedValue.toLocaleLowerCase()) &&
-                                !column.alwaysOn;
-                            return (_jsx(Draggable, { draggableId: column.name, index: index, isDragDisabled: !!searchedValue, children: function (_a) {
-                                    var innerRef = _a.innerRef, draggableProps = _a.draggableProps, dragHandleProps = _a.dragHandleProps;
-                                    return (_jsx(RowLayout, __assign({ "$isVisible": isVisible }, draggableProps, { ref: innerRef }, dragHandleProps, { children: _jsx(ActionRow, { column: column, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, translatedValue: translatedValue }, index) })));
-                                } }, column.name));
-                        }) }))); } }) })] }));
+    var sensors = useSensors(useSensor(PointerSensor));
+    return (_jsxs(x.div, { children: [_jsx(Input, { icon: "search", type: "text", value: searchedValue, placeholder: i18n._({ id: 'manageColumn.searchPlaceholder', message: 'Find column...' }), onChange: onChangeInputValue, onClear: clear, variant: "gray" }), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: (columns === null || columns === void 0 ? void 0 : columns.map(function (_a) {
+                        var name = _a.name;
+                        return name;
+                    })) || [], strategy: verticalListSortingStrategy, children: _jsx(x.div, { h: "400px", overflowY: "scroll", mt: "20px", children: columns === null || columns === void 0 ? void 0 : columns.map(function (column, index) { return (_jsx(ManageColumnRow, { column: column, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, searchedValue: searchedValue }, index)); }) }) }) })] }));
 };
 export default ManageColumnForm;

package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ManageColumnRow.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { FC } from 'react';
+import type { ColumnConfig, ColumnDefinition } from '../../../types';
+type ActionRowProps = {
+    column: ColumnDefinition;
+    columnsConfigValues: string[] | undefined;
+    setColumnsConfigOptions: (value: React.SetStateAction<{
+        [x: string]: ColumnConfig | {};
+    }>) => void;
+    searchedValue: string;
+};
+export declare const ManageColumnRow: FC<ActionRowProps>;
+export {};

package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/{ActionRow.js → ManageColumnRow.js}

@@ -14,10 +14,14 @@ import { useCallback, useState } from 'react';
 import { Group } from '../../../../../Elements/Icon/icons/Group';
 import Toggle from '../../../../../Elements/Toggle/Toggle';
 import { H6 } from '../../../../../Elements/Typography/Typography';
+import { RowLayout } from '../styles';
+import { getTranslatedValue } from '../utils';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { x } from '@xstyled/styled-components';
-export var ActionRow = function (_a) {
+export var ManageColumnRow = function (_a) {
     var _b;
-    var column = _a.column, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, translatedValue = _a.translatedValue;
+    var column = _a.column, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, searchedValue = _a.searchedValue;
     var _c = useState((_b = columnsConfigValues === null || columnsConfigValues === void 0 ? void 0 : columnsConfigValues.includes(column.name)) !== null && _b !== void 0 ? _b : false), isSelected = _c[0], setIsSelected = _c[1];
     var handleToggleChange = useCallback(function () {
         setColumnsConfigOptions(function (prevOptions) {
@@ -26,5 +30,12 @@ export var ActionRow = function (_a) {
         });
         setIsSelected(!isSelected);
     }, [setColumnsConfigOptions, isSelected, column.name]);
-    return (_jsxs(_Fragment, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(x.div, { w: "28px", children: _jsx(Toggle, { name: "", variant: "grid", onChange: handleToggleChange, spaceAround: false, checked: isSelected }) }), _jsx(H6, { variant: "medium", ml: "8px", children: translatedValue })] }), _jsx(Group, {})] }));
+    var translatedValue = getTranslatedValue(column);
+    var isVisible = (translatedValue === null || translatedValue === void 0 ? void 0 : translatedValue.toLocaleLowerCase().includes(searchedValue.toLocaleLowerCase())) && !column.alwaysOn;
+    var _d = useSortable({
+        id: column.name,
+        disabled: !!searchedValue || !!column.sticky,
+        animateLayoutChanges: function () { return false; }
+    }), attributes = _d.attributes, listeners = _d.listeners, setNodeRef = _d.setNodeRef, transform = _d.transform, transition = _d.transition;
+    return (_jsx(RowLayout, __assign({ "$isVisible": isVisible }, attributes, listeners, { transition: transition, transform: CSS.Transform.toString(transform), ref: setNodeRef, children: _jsxs(_Fragment, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(x.div, { w: "28px", children: _jsx(Toggle, { name: "", variant: "grid", onChange: handleToggleChange, spaceAround: false, checked: isSelected }) }), _jsx(H6, { variant: "medium", ml: "8px", children: translatedValue })] }), _jsx(Group, {})] }) })));
 };

package/ui/Blocks/CommonGrid/components/ManageColumnForm/styles.d.ts

@@ -1,3 +1,5 @@
 export declare const RowLayout: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $isVisible: boolean;
+    transition?: string | undefined;
+    transform?: string | undefined;
 }, never>;

package/ui/Blocks/CommonGrid/components/ManageColumnForm/styles.js

@@ -3,8 +3,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { th } from '@xstyled/styled-components';
-export var RowLayout = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  background-color: white;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"], ["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  background-color: white;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"])), function (_a) {
+export var RowLayout = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  background-color: white;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n  transition: ", ";\n  transform: ", ";\n"], ["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  background-color: white;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n  transition: ", ";\n  transform: ", ";\n"])), function (_a) {
     var $isVisible = _a.$isVisible;
     return ($isVisible ? 'flex' : 'none');
-}, th.color('lightGray6'));
+}, th.color('lightGray6'), function (_a) {
+    var transition = _a.transition;
+    return transition;
+}, function (_a) {
+    var transform = _a.transform;
+    return transform;
+});
 var templateObject_1;

package/ui/Blocks/CommonGrid/components/Table.d.ts

@@ -1,6 +1,5 @@
 export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     hasRowClick?: boolean | undefined;
-    accountForScrollbar?: boolean | undefined;
     align?: string | undefined;
 }, never>;
 export declare const Cell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
@@ -8,10 +7,11 @@ export declare const Cell: import("styled-components").StyledComponent<"div", im
     flexBasis?: number | undefined;
     flexGrow?: number | undefined;
     flexShrink?: number | undefined;
+    transition?: string | undefined;
+    transform?: string | undefined;
 }, never>;
 export declare const StyledDataRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     hasRowClick?: boolean | undefined;
-    accountForScrollbar?: boolean | undefined;
     align?: string | undefined;
 } & {
     isEven: boolean;
@@ -21,12 +21,16 @@ export declare const TextCell: import("styled-components").StyledComponent<"div"
     flexBasis?: number | undefined;
     flexGrow?: number | undefined;
     flexShrink?: number | undefined;
+    transition?: string | undefined;
+    transform?: string | undefined;
 }, never>;
 export declare const MessageCell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     align?: string | undefined;
     flexBasis?: number | undefined;
     flexGrow?: number | undefined;
     flexShrink?: number | undefined;
+    transition?: string | undefined;
+    transform?: string | undefined;
 } & {
     width: number;
 }, never>;

package/ui/Blocks/CommonGrid/components/Table.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled, { system, th } from '@xstyled/styled-components';
 export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  min-height: 32px;\n  border-bottom: 1px solid rgb(228, 231, 235);\n  cursor: ", ";\n"], ["\n  ", ";\n  display: flex;\n  min-height: 32px;\n  border-bottom: 1px solid rgb(228, 231, 235);\n  cursor: ", ";\n"])), system, function (props) { return (props.hasRowClick ? 'pointer' : 'auto'); });
-export var Cell = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: ", ";\n"], ["\n  ", ";\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: ", ";\n"])), system, function (props) { return props.align; });
+export var Cell = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: ", ";\n  transition: ", ";\n  transform: ", ";\n"], ["\n  ", ";\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: ", ";\n  transition: ", ";\n  transform: ", ";\n"])), system, function (props) { return props.align; }, function (props) { return props.transition; }, function (props) { return props.transform; });
 export var StyledDataRow = styled(Row)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return (props.isEven ? th('colors.bgLightGray') : 'white'); });
 export var TextCell = styled(Cell)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
 export var MessageCell = styled(Cell)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: ", "px;\n  position: sticky;\n  left: 0;\n"], ["\n  width: ", "px;\n  position: sticky;\n  left: 0;\n"])), function (props) { return props.width; });

package/ui/Blocks/CommonGrid/hooks/useManageColumn.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DropResult } from 'react-beautiful-dnd';
+import { DragEndEvent } from '@dnd-kit/core';
 import { CommonGridProps, GridActionsType, GridSelectorsType, ColumnDefinition } from '../types';
 type Props = {
     columns: CommonGridProps['columnsDefinitions'];
@@ -16,7 +16,7 @@ declare const useManageColumn: ({ columns, gridSelectors, gridActions, onClose }
     }>>;
     onConfirmForm: () => void;
     resetColumnConfig: () => void;
-    handleDragEnd: (isManageModal?: boolean) => (item: DropResult) => void;
+    handleDragEnd: (isManageModal?: boolean) => (event: DragEndEvent) => void;
     onCloseForm: () => void;
     displayColumnsDefinitions: ColumnDefinition<string>[];
     manageColumnsFormDefinitions: ColumnDefinition<string>[];

package/ui/Blocks/CommonGrid/hooks/useManageColumn.js

@@ -73,17 +73,17 @@ var useManageColumn = function (_a) {
     var manageColumnsFormDefinitions = useMemo(function () { return getSortedColumns(updatedColumnsOrder, true); }, [updatedColumnsOrder]);
     var handleDragEnd = useCallback(function (isManageModal) {
         if (isManageModal === void 0) { isManageModal = false; }
-        return function (item) {
-            var destination = item.destination, source = item.source;
-            var to = destination === null || destination === void 0 ? void 0 : destination.index;
-            var from = source === null || source === void 0 ? void 0 : source.index;
-            if (to === from || !destination) {
+        return function (event) {
+            var _a, _b, _c, _d, _e, _f;
+            var active = event.active, over = event.over;
+            if (!over || active.id === over.id) {
                 return;
             }
-            var columns = isManageModal ? manageColumnsFormDefinitions : displayColumnsDefinitions.filter(function (item) { return !item.sticky; });
             var newOrderColumns = __spreadArray([], (isManageModal ? updatedColumnsOrder : columnsOrderValue), true);
-            var fromIndex = newOrderColumns.findIndex(function (column) { return columns[from].name === column; });
-            var toIndex = newOrderColumns.findIndex(function (column) { return columns[to !== null && to !== void 0 ? to : 0].name === column; });
+            var fromIndex = (_c = (_b = (_a = active === null || active === void 0 ? void 0 : active.data) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.sortable) === null || _c === void 0 ? void 0 : _c.index;
+            var toIndex = (_f = (_e = (_d = over === null || over === void 0 ? void 0 : over.data) === null || _d === void 0 ? void 0 : _d.current) === null || _e === void 0 ? void 0 : _e.sortable) === null || _f === void 0 ? void 0 : _f.index;
+            console.log('fromIndex', fromIndex);
+            console.log('toIndex', toIndex);
             // move column from a position to the new position
             var column = newOrderColumns[fromIndex];
             newOrderColumns.splice(fromIndex, 1);

package/ui/Blocks/CommonGrid/styles.d.ts

@@ -9,7 +9,7 @@ export declare const CommonGridWrap: import("styled-components").StyledComponent
 export declare const StyledButtonStrip: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
 export declare const CommonGridWithStyles: import("styled-components").StyledComponent<({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowClick, columnLayout, displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps, hasGroups, hasFilters }: import("./types").CommonGridProps & {
     filters?: import("./types").FiltersConfig | undefined;
-    handleDragEnd: (item: import("react-beautiful-dnd").DropResult) => void;
+    handleDragEnd: (item: import("@dnd-kit/core").DragEndEvent) => void;
     displayColumnsDefinitions: import("./types").ColumnDefinition[];
     hasGroups: boolean;
     hasFilters: boolean;