@mailstep/design-system 0.7.54 → 0.7.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.54",
+  "version": "0.7.55",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -26,6 +26,9 @@
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@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",
@@ -84,7 +87,6 @@
     "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",
@@ -110,6 +112,9 @@
     "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",
@@ -127,7 +132,6 @@
     "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 { 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/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(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] }))); } }) })) }));
+                            .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,12 @@
 import React from 'react';
-import { DropResult } from 'react-beautiful-dnd';
-import { ColumnConfig, CommonGridProps } from '../../types';
+import type { FC } from 'react';
+import type { ColumnConfig, CommonGridProps } from '../../types';
+import type { DragEndEvent } from '@dnd-kit/core';
 type ManageColumnProps = {
-    columns?: CommonGridProps['columnsDefinitions'];
+    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;
+declare const ManageColumnForm: FC<ManageColumnProps>;
 export default ManageColumnForm;

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

@@ -1,23 +1,13 @@
-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 { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+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 modifiers = [restrictToVerticalAxis];
 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 +17,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, 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)); }) }) }) })] }));
 };
 export default ManageColumnForm;

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

@@ -0,0 +1,11 @@
+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<Record<string, ColumnConfig | {}>>) => void;
+    searchedValue: string;
+};
+export declare const ManageColumnRow: FC<ActionRowProps>;
+export {};

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

@@ -0,0 +1,41 @@
+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 { 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 ManageColumnRow = function (_a) {
+    var _b;
+    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) {
+            var _a;
+            return __assign(__assign({}, prevOptions), (_a = {}, _a[column.name] = !isSelected ? {} : { isHidden: true }, _a));
+        });
+        setIsSelected(!isSelected);
+    }, [setColumnsConfigOptions, isSelected, column.name]);
+    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, { "$isVisible": isVisible, transition: transition, transform: CSS.Transform.toString(transform), ref: setNodeRef, children: _jsxs(x.div, { display: "flex", alignItems: "center", w: "100%", children: [_jsx(x.div, { w: "28px", children: _jsx(Toggle, { name: "", variant: "grid", onChange: handleToggleChange, spaceAround: false, checked: isSelected }) }), _jsxs(H6, __assign({ variant: "medium", ml: "8px", m: "0", w: "100%", p: "8px", cursor: "grab" }, attributes, listeners, { display: "flex", alignItems: "center", justifyContent: "space-between", 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

@@ -64,6 +64,10 @@ 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);
@@ -73,21 +77,16 @@ 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 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; });
-            // move column from a position to the new position
-            var column = newOrderColumns[fromIndex];
+            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; });
             newOrderColumns.splice(fromIndex, 1);
-            newOrderColumns.splice(toIndex === -1 ? 0 : toIndex, 0, column);
+            newOrderColumns.splice(toIndex === -1 ? 0 : toIndex, 0, active.id);
             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,15 +22,23 @@ 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,
     {
@@ -39,7 +47,7 @@ export var columnDefinitions = [
         flexBasis: 160,
         filtering: true,
         filteringType: 'number',
-        sorting: true,
+        sorting: true
     },
     {
         name: 'numberFloatColumn',
@@ -49,8 +57,8 @@ export var columnDefinitions = [
         filteringType: 'number',
         sorting: true,
         filterExtraProps: {
-            isFloat: true,
-        },
+            isFloat: true
+        }
     },
     {
         name: 'dateColumn',
@@ -60,8 +68,8 @@ export var columnDefinitions = [
         filteringType: 'date',
         sorting: true,
         filterExtraProps: {
-            filterTime: true,
-        },
+            filterTime: true
+        }
     },
     {
         name: 'boolColumn',
@@ -72,7 +80,7 @@ export var columnDefinitions = [
         sorting: true,
         formatRowValue: function (row) {
             return row.boolColumn ? 'Yes' : 'No';
-        },
+        }
     },
     {
         name: 'advancedColumn',
@@ -80,13 +88,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',
@@ -94,6 +102,6 @@ export var columnDefinitions = [
         flexBasis: 160,
         alwaysOn: true,
         sticky: true,
-        stickTo: 'right',
-    },
+        stickTo: 'right'
+    }
 ];

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

@@ -1,2 +1,3 @@
+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,12 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Provider } from 'react-redux';
-import { combineReducers, createStore } from 'redux';
+import { combineReducers, createStore, compose } 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);
+    var store = createStore(reducers, {}, reduxComposeEnhancer());
     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("react-beautiful-dnd").DropResult) => void;
+    handleDragEnd: (item: import("@dnd-kit/core").DragEndEvent) => void;
     displayColumnsDefinitions: import("./types").ColumnDefinition[];
     hasGroups: boolean;
     hasFilters: boolean;