@mailstep/design-system 0.7.53 → 0.7.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.53",
+  "version": "0.7.54",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -84,6 +84,7 @@
     "moment": "^2.30.1",
     "prettier": "2.8.8",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-image": "^4.1.0",
@@ -109,9 +110,6 @@
     "webpack": "^5.82.1"
   },
   "peerDependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
@@ -129,6 +127,7 @@
     "luxon": "^3.4.4",
     "moment": "^2.30.1",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-image": "^4.1.0",

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

@@ -1,8 +1,8 @@
-import type { DragEndEvent } from '@dnd-kit/core';
+import { DropResult } from 'react-beautiful-dnd';
 import type { CommonGridProps, FiltersConfig, ColumnDefinition } from './types';
 type Props = CommonGridProps & {
     filters?: FiltersConfig;
-    handleDragEnd: (item: DragEndEvent) => void;
+    handleDragEnd: (item: DropResult) => 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, 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, 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 &&
                                 rowsData &&
                                 displayColumnsDefinitions &&
                                 rowsData.map(function (row, index) {

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

@@ -1,6 +1,6 @@
 import React, { type FC } from 'react';
-import type { ColumnConfig, ColumnDefinition, GridActionsType, GridSelectorsType } from '../../types';
-import type { DragEndEvent } from '@dnd-kit/core';
+import { DropResult } from 'react-beautiful-dnd';
+import { ColumnConfig, ColumnDefinition, GridActionsType, GridSelectorsType } from '../../types';
 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: DragEndEvent) => void;
+    handleDragEnd: (item: DropResult) => void;
     gridName?: string;
     gridSelectors: GridSelectorsType;
     gridActions: GridActionsType;

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

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

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

@@ -11,11 +11,10 @@ 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 { getCellSizeProps, getStickyCollClassNames } from '../utils';
-import { closestCenter, useSensor, useSensors, DndContext, PointerSensor } from '@dnd-kit/core';
-import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import { getCellSizeProps, getGroupClassNames, getSortName, getStickyCollClassNames } from '../utils';
 import ColumnTitle from './ColumnTitle';
-import { HeadCell } from './HeadCell';
+import Resize from './Resize';
 import { Row, Cell } from './Table';
 var getStickyComponent = function (columns, stickyTo, displayColumnsWidth) {
     var _a;
@@ -25,7 +24,7 @@ var getStickyComponent = function (columns, stickyTo, displayColumnsWidth) {
     });
 };
 var HeadRow = function (_a) {
-    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 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 _c = useState(false), showUIElements = _c[0], setShowUIElements = _c[1];
     useEffect(function () {
         setShowUIElements(true);
@@ -41,14 +40,16 @@ 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 === null || onAddSort === void 0 ? void 0 : onAddSort(systemName || name, value);
+        onAddSort && onAddSort(systemName || name, value);
     }; }, [onAddSort]);
-    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
+    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
                             .filter(function (item) { return !item.sticky; })
-                            .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)] }) }) })) }));
+                            .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(Cell, __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] }))); } }) })) }));
 };
 export default HeadRow;

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

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

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

@@ -1,13 +1,23 @@
+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 { ManageColumnRow } from './components/ManageColumnRow';
-import { closestCenter, useSensor, useSensors, DndContext, PointerSensor } from '@dnd-kit/core';
-import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
-import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { ActionRow } from './components/ActionRow';
 import { i18n } from '@lingui/core';
 import { x } from '@xstyled/styled-components';
-var modifiers = [restrictToVerticalAxis];
+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];
@@ -17,10 +27,15 @@ var ManageColumnForm = function (_a) {
     var clear = useCallback(function () {
         setSearchedValue('');
     }, [setSearchedValue]);
-    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, modifiers: modifiers, children: _jsx(SortableContext, { items: columns.map(function (_a) {
-                        var name = _a.name;
-                        return name;
-                    }), strategy: verticalListSortingStrategy, children: _jsx(x.div, { h: "400px", overflowY: "scroll", mt: "20px", children: columns.map(function (column) { return (_jsx(ManageColumnRow, { column: column, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, searchedValue: searchedValue }, column.name)); }) }) }) })] }));
+    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));
+                        }) }))); } }) })] }));
 };
 export default ManageColumnForm;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ColumnConfig, ColumnDefinition } from '../../../types';
+type ActionRowProps = {
+    column: ColumnDefinition;
+    columnsConfigValues: string[] | undefined;
+    setColumnsConfigOptions: (value: React.SetStateAction<{
+        [x: string]: ColumnConfig | {};
+    }>) => void;
+    translatedValue: string;
+};
+export declare const ActionRow: ({ column, columnsConfigValues, setColumnsConfigOptions, translatedValue }: ActionRowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,30 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+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 { x } from '@xstyled/styled-components';
+export var ActionRow = function (_a) {
+    var _b;
+    var column = _a.column, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, translatedValue = _a.translatedValue;
+    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) {
+            var _a;
+            return __assign(__assign({}, prevOptions), (_a = {}, _a[column.name] = !isSelected ? {} : { isHidden: true }, _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, {})] }));
+};

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

@@ -1,5 +1,3 @@
 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,14 +3,8 @@ 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  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) {
+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) {
     var $isVisible = _a.$isVisible;
     return ($isVisible ? 'flex' : 'none');
-}, th.color('lightGray6'), function (_a) {
-    var transition = _a.transition;
-    return transition;
-}, function (_a) {
-    var transform = _a.transform;
-    return transform;
-});
+}, th.color('lightGray6'));
 var templateObject_1;

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

@@ -1,5 +1,6 @@
 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, {
@@ -7,11 +8,10 @@ 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,16 +21,12 @@ 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  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 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 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 { DragEndEvent } from '@dnd-kit/core';
+import { DropResult } from 'react-beautiful-dnd';
 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) => (event: DragEndEvent) => void;
+    handleDragEnd: (isManageModal?: boolean) => (item: DropResult) => void;
     onCloseForm: () => void;
     displayColumnsDefinitions: ColumnDefinition<string>[];
     manageColumnsFormDefinitions: ColumnDefinition<string>[];

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

@@ -64,10 +64,6 @@ var useManageColumn = function (_a) {
         var sortFunction = function (col1, col2) {
             var i = (orderValues || []).indexOf(col1.name);
             var j = (orderValues || []).indexOf(col2.name);
-            // if orderValues is defined but the column is not in the order list, keep the default position by column definition
-            if (orderValues && (orderValues === null || orderValues === void 0 ? void 0 : orderValues.length) > 0 && i === -1) {
-                return 0;
-            }
             return i > j ? 1 : i < j ? -1 : 0;
         };
         var sortedList = __spreadArray([], list, true).sort(sortFunction);
@@ -77,16 +73,21 @@ 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 (event) {
-            var active = event.active, over = event.over;
-            if (!over || active.id === over.id) {
+        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;
             }
-            var newOrderColumns = __spreadArray([], updatedColumnsOrder, true);
-            var fromIndex = updatedColumnsOrder.findIndex(function (column) { return column === active.id; });
-            var toIndex = updatedColumnsOrder.findIndex(function (column) { return column === over.id; });
+            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; });
+            // move column from a position to the new position
+            var column = newOrderColumns[fromIndex];
             newOrderColumns.splice(fromIndex, 1);
-            newOrderColumns.splice(toIndex === -1 ? 0 : toIndex, 0, active.id);
+            newOrderColumns.splice(toIndex === -1 ? 0 : toIndex, 0, column);
             if (!isManageModal) {
                 setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(newOrderColumns);
             }

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js

@@ -13,7 +13,7 @@ var ComplexCell = function (props) {
 export var oversizedColumnDefinition = new Array(oversizedArrayColumns).fill(null).map(function (unused, index) { return ({
     name: "column_".concat(index),
     title: "column_".concat(index),
-    flexBasis: 120
+    flexBasis: 120,
 }); });
 export var enumColumn = {
     name: 'enumColumn',
@@ -22,23 +22,15 @@ export var enumColumn = {
     filterOptions: enumValues.map(function (v) { return ({ value: v, label: v }); }),
     filterExtraProps: { isMulti: true, checkAllButton: true },
     filtering: true,
-    sorting: false
+    sorting: false,
 };
 export var columnDefinitions = [
-    {
-        name: 'hiddenColumn',
-        title: 'Hidden column',
-        flexBasis: 160,
-        filtering: true,
-        sorting: true,
-        defaultHidden: true
-    },
     {
         name: 'textColumn',
         title: 'Text column',
         flexBasis: 160,
         filtering: true,
-        sorting: true
+        sorting: true,
     },
     enumColumn,
     {
@@ -47,7 +39,7 @@ export var columnDefinitions = [
         flexBasis: 160,
         filtering: true,
         filteringType: 'number',
-        sorting: true
+        sorting: true,
     },
     {
         name: 'numberFloatColumn',
@@ -57,8 +49,8 @@ export var columnDefinitions = [
         filteringType: 'number',
         sorting: true,
         filterExtraProps: {
-            isFloat: true
-        }
+            isFloat: true,
+        },
     },
     {
         name: 'dateColumn',
@@ -68,8 +60,8 @@ export var columnDefinitions = [
         filteringType: 'date',
         sorting: true,
         filterExtraProps: {
-            filterTime: true
-        }
+            filterTime: true,
+        },
     },
     {
         name: 'boolColumn',
@@ -80,7 +72,7 @@ export var columnDefinitions = [
         sorting: true,
         formatRowValue: function (row) {
             return row.boolColumn ? 'Yes' : 'No';
-        }
+        },
     },
     {
         name: 'advancedColumn',
@@ -88,13 +80,13 @@ export var columnDefinitions = [
         flexBasis: 160,
         formatRowValue: function (row) {
             return "".concat((row.numberColumn / 4) * row.textColumn.length);
-        }
+        },
     },
     {
         name: 'complexColumn',
         title: 'Complex Column',
         flexBasis: 350,
-        cellComponent: ComplexCell
+        cellComponent: ComplexCell,
     },
     {
         name: 'stickyColumn',
@@ -102,6 +94,6 @@ export var columnDefinitions = [
         flexBasis: 160,
         alwaysOn: true,
         sticky: true,
-        stickTo: 'right'
-    }
+        stickTo: 'right',
+    },
 ];

package/ui/Blocks/CommonGrid/storybook/utils/withRedux.d.ts

@@ -1,3 +1,2 @@
-export declare const reduxComposeEnhancer: any;
 export declare const withProvider: (story: Function) => JSX.Element;
 export default withProvider;

package/ui/Blocks/CommonGrid/storybook/utils/withRedux.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Provider } from 'react-redux';
-import { combineReducers, createStore, compose } from 'redux';
+import { combineReducers, createStore } from 'redux';
 import commonGridReducer from '../../store';
-// @ts-ignore
-export var reduxComposeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 export var withProvider = function (story) {
     var reducers = combineReducers({
-        commonGrid: commonGridReducer
+        commonGrid: commonGridReducer,
     });
-    var store = createStore(reducers, {}, reduxComposeEnhancer());
+    var store = createStore(reducers);
     return _jsx(Provider, { store: store, children: story() });
 };
 export default withProvider;

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("@dnd-kit/core").DragEndEvent) => void;
+    handleDragEnd: (item: import("react-beautiful-dnd").DropResult) => void;
     displayColumnsDefinitions: import("./types").ColumnDefinition[];
     hasGroups: boolean;
     hasFilters: boolean;

package/ui/Elements/ErrorMessage/ErrorMessage.js

@@ -10,7 +10,7 @@ var ErrorWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplat
 var StyledWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  .inline {\n    margin-top: 1;\n  }\n  .tooltip {\n    ", "\n  }\n"], ["\n  .inline {\n    margin-top: 1;\n  }\n  .tooltip {\n    ", "\n  }\n"])), tooltip);
 var ErrorMessage = function (_a) {
     var children = _a.children, appearance = _a.appearance;
-    return (_jsx(StyledWrapper, { children: _jsx(ErrorWrap, { className: appearance, children: _jsx("span", { children: children }) }) }));
+    return (_jsx(StyledWrapper, { children: _jsx(ErrorWrap, { className: appearance, children: _jsx("span", { "data-testid": "error-message", children: children }) }) }));
 };
 export default ErrorMessage;
 var templateObject_1, templateObject_2, templateObject_3;