@mailstep/design-system 0.6.90-beta.1 → 0.6.90-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.90-beta.1",
+  "version": "0.6.90-beta.10",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

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

@@ -3,7 +3,7 @@ import { SortingValueType } from '../types';
 declare const _default: React.NamedExoticComponent<{
     title?: string | JSX.Element | undefined;
     isSortable: boolean;
-    onSetSort: (value: SortingValueType) => void;
+    onSetSort?: ((value: SortingValueType) => void) | undefined;
     sortValue: SortingValueType;
 }>;
 export default _default;

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

@@ -17,5 +17,5 @@ type DataRowProps = {
     groups: Group[];
     isEven?: boolean;
 };
-declare const DataRow: ({ columns, actionColumn, rowData, rowIndex, uxState, allowRowSelect, allowRowSelectOnAction, onUxChange, onRowEditClick, onRowReadClick, onRowClick, onRowAction, displayColumnsWidth, groups, isEven, }: DataRowProps) => JSX.Element;
+declare const DataRow: ({ columns, actionColumn, rowData, rowIndex, uxState, allowRowSelect, allowRowSelectOnAction, onUxChange, onRowEditClick, onRowReadClick, onRowClick, onRowAction, displayColumnsWidth, groups, isEven }: DataRowProps) => JSX.Element;
 export default DataRow;

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

@@ -22,18 +22,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { x } from '@xstyled/styled-components';
 import { Link } from 'react-router-dom';
-import { Cell, StyledDataRow } from './Table';
-import MemoDataCell from './DataCell';
+import Button from '../../../Elements/Button/Button';
+import Checkbox from '../../../Forms/Checkbox';
+import { rowClassSymbol } from '../types';
+import { getActionCellSizeProps } from '../utils';
 import EditIcon from './icons/Edit';
 import EyeOpenIcon from './icons/EyeOpen';
-import { getActionCellSizeProps } from '../utils';
-import { rowClassSymbol } from '../types';
+import { x } from '@xstyled/styled-components';
 import { isFunction } from 'lodash/fp';
+import MemoDataCell from './DataCell';
+import { Cell, StyledDataRow } from './Table';
 import { useTimeMeasurement } from './utils';
-import Checkbox from '../../../Forms/Checkbox';
-import Button from '../../../Elements/Button/Button';
 var EmptySpan = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     return _jsx("span", __assign({}, props, { children: children }));
@@ -105,6 +105,6 @@ var DataRow = function (_a) {
         return actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {};
     }, [actionColumn]);
     var displayReadEditCell = ((_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _c === void 0 ? void 0 : _c.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes);
-    return (_jsxs(StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: isEven, children: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsxs(Cell, { className: "cell", style: actionColumnStyle, children: [((_d = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _d === void 0 ? void 0 : _d.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes) ? (_jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" })) : null, _jsxs(x.div, { children: [(isFunction(actionColumn.canRowRead) ? actionColumn.canRowRead(rowData) : actionColumn.canRowRead) && (_jsx(RowActionComponent, __assign({}, rowActionProps('read'), { children: _jsx(Button, { type: "button", variant: "default", appearance: "primary", children: _jsx(EyeOpenIcon, { width: "16px", height: "16px" }) }) }))), (isFunction(actionColumn.canRowEdit) ? actionColumn.canRowEdit(rowData) : actionColumn.canRowEdit) && (_jsx(RowActionComponent, __assign({}, rowActionProps('edit'), { children: _jsx(Button, { type: "button", variant: "default", appearance: "primary", children: _jsx(EditIcon, { width: "16px", height: "16px" }) }) })))] })] })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(x.div, { children: rowIndex }) }))] })), columns.map(function (column, key) { return (_jsx(MemoDataCell, { column: column, rowData: rowData, onRowAction: handleRowAction, displayColumnWidth: displayColumnsWidth[column.name], group: groups === null || groups === void 0 ? void 0 : groups[key] }, column.name)); })] }));
+    return (_jsxs(StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: !!isEven, children: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsxs(Cell, { className: "cell", style: actionColumnStyle, children: [((_d = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _d === void 0 ? void 0 : _d.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes) ? (_jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" })) : null, _jsxs(x.div, { children: [(isFunction(actionColumn.canRowRead) ? actionColumn.canRowRead(rowData) : actionColumn.canRowRead) && (_jsx(RowActionComponent, __assign({}, rowActionProps('read'), { children: _jsx(Button, { type: "button", variant: "default", appearance: "primary", children: _jsx(EyeOpenIcon, { width: "16px", height: "16px" }) }) }))), (isFunction(actionColumn.canRowEdit) ? actionColumn.canRowEdit(rowData) : actionColumn.canRowEdit) && (_jsx(RowActionComponent, __assign({}, rowActionProps('edit'), { children: _jsx(Button, { type: "button", variant: "default", appearance: "primary", children: _jsx(EditIcon, { width: "16px", height: "16px" }) }) })))] })] })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(x.div, { children: rowIndex }) }))] })), columns.map(function (column, key) { return (_jsx(MemoDataCell, { column: column, rowData: rowData, onRowAction: handleRowAction, displayColumnWidth: displayColumnsWidth[column.name], group: groups === null || groups === void 0 ? void 0 : groups[key] }, column.name)); })] }));
 };
 export default DataRow;

package/ui/Blocks/CommonGrid/components/GridModals/index.js

@@ -13,6 +13,7 @@ export var GridModals = function (_a) {
     var _b = useSelectPreset({
         gridName: gridName,
         gridActions: gridActions,
+        selectedPresetName: selectedPresetName,
         setSelectedPresetName: setSelectedPresetName,
         onClosePresetsModal: onClosePresetsModal,
         filters: gridSelectors.filter

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

@@ -12,12 +12,16 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-import { getActionCellSizeProps, getCellSizeProps, getSortName } from '../utils';
-import HeadCell from './HeadCell';
+import { getActionCellSizeProps, getCellSizeProps, getGroupClassNames, getSortName, getStickyCollClassNames } from '../utils';
+import ColumnTitle from './ColumnTitle';
+import Resize from './Resize';
 import { Row, Cell } from './Table';
 var getStickyComponent = function (columns, stickyTo, displayColumnsWidth) {
     var _a;
-    return (_a = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) { return item.sticky && item.stickTo === stickyTo; })) === null || _a === void 0 ? void 0 : _a.map(function (column) { return (_jsx(HeadCell, __assign({ name: column.name, systemName: column.systemName, isSortable: false, hasResize: false, isDragging: false, sortValue: null }, getCellSizeProps(column, displayColumnsWidth[column.name]), { title: column.title, sticky: column.sticky, stickTo: column.stickTo }), column.name)); });
+    return (_a = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) { return item.sticky && item.stickTo === stickyTo; })) === null || _a === void 0 ? void 0 : _a.map(function (column) {
+        var cellClassName = "cell".concat(getStickyCollClassNames(!!column.sticky, column.stickTo), "}");
+        return (_jsx(Cell, __assign({}, getCellSizeProps(column, displayColumnsWidth[column.name]), { className: cellClassName, children: _jsx(ColumnTitle, { title: column === null || column === void 0 ? void 0 : column.title, isSortable: false, sortValue: null }) }), column.name));
+    });
 };
 var HeadRow = function (_a) {
     var _b;
@@ -34,11 +38,20 @@ var HeadRow = function (_a) {
         setIsDragDisabled(false);
     }, [setIsDragDisabled]);
     var displayReadEditCell = ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes);
-    return (_jsx(_Fragment, { children: showUIElements && (_jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", isDropDisabled: isDragDisabled, isCombineEnabled: false, ignoreContainerClipping: true, children: function (droppableProvided) { return (_jsxs(Row, __assign({ className: "headRow", accountForScrollbar: false, ref: droppableProvided.innerRef }, droppableProvided.droppableProps, { children: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsx(Cell, { className: "cell", style: Object.assign(__assign({}, getActionCellSizeProps(actionColumn))) })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: Object.assign(__assign({}, getActionCellSizeProps(actionColumn))) }))] })), getStickyComponent(columns, 'left', displayColumnsWidth), columns
+    var onResize = React.useCallback(function (name) { return function (width) {
+        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]);
+    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: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsx(Cell, { className: "cell", style: Object.assign(__assign({}, getActionCellSizeProps(actionColumn))) })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: Object.assign(__assign({}, getActionCellSizeProps(actionColumn))) }))] })), getStickyComponent(columns, 'left', displayColumnsWidth), columns
                             .filter(function (item) { return !item.sticky; })
-                            .map(function (column, key) { return (_jsx(Draggable, { draggableId: column.name, index: key, isDragDisabled: isDragDisabled || column.sticky, children: function (draggableProvided, snapshot) {
-                                var _a;
-                                return (_jsx(HeadCell, __assign({ name: column.name, systemName: column.systemName, onAddSort: onAddSort, isSortable: !!column.sorting, sortValue: ((_a = sortingValues.find(function (sorting) { return sorting.column == getSortName(column); })) === null || _a === void 0 ? void 0 : _a.direction) || null, innerRef: draggableProvided.innerRef, handleResizeDrag: handleResizeDrag, hasResize: columnLayout == 'normal' || !!columns[key + 1], draggableProps: draggableProvided.draggableProps, dragHandleProps: draggableProvided.dragHandleProps, isDragging: snapshot.isDragging, onResizeOver: onResizeOver, onResizeOut: onResizeOut }, getCellSizeProps(column, displayColumnsWidth[column.name]), { group: groups[key], title: column.title, sticky: column.sticky, stickTo: column.stickTo })));
+                            .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.js

@@ -25,8 +25,8 @@ 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, 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) {
-                            return (_jsx(Draggable, { draggableId: column.name, index: index, isDragDisabled: !!searchedValue, children: function (draggableProvided, snapshot) { return (_jsx(ActionRow, { column: column, innerRef: draggableProvided.innerRef, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, searchedValue: searchedValue, draggableProps: draggableProvided.draggableProps, dragHandleProps: draggableProvided.dragHandleProps }, index)); } }, 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) {
+                            return (_jsx(Draggable, { draggableId: column.name, index: index, isDragDisabled: !!searchedValue, children: function (draggableProvided) { return (_jsx(ActionRow, { column: column, innerRef: draggableProvided.innerRef, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, searchedValue: searchedValue, draggableProps: draggableProvided.draggableProps, dragHandleProps: draggableProvided.dragHandleProps }, index)); } }, column.name));
                         }) }))); } }) })] }));
 };
 export default ManageColumnForm;

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

@@ -14,7 +14,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { isObject } from 'lodash';
 import styled from 'styled-components';
 import { Group } from '../../../../../Elements/Icon/icons/Group';
@@ -30,7 +30,6 @@ export var ActionRow = function (_a) {
     var _b, _c, _d, _e, _f;
     var column = _a.column, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, searchedValue = _a.searchedValue, innerRef = _a.innerRef, draggableProps = _a.draggableProps, dragHandleProps = _a.dragHandleProps;
     var _g = useState((_b = columnsConfigValues === null || columnsConfigValues === void 0 ? void 0 : columnsConfigValues.includes(column.name)) !== null && _b !== void 0 ? _b : false), isSelected = _g[0], setIsSelected = _g[1];
-    var style = useMemo(function () { return (__assign({}, draggableProps === null || draggableProps === void 0 ? void 0 : draggableProps.style)); }, [draggableProps]);
     var translatedValue = (isObject(column === null || column === void 0 ? void 0 : column.title) &&
         'props' in column.title &&
         ((_c = column.title) === null || _c === void 0 ? void 0 : _c.props) &&
@@ -44,6 +43,6 @@ export var ActionRow = function (_a) {
         });
         setIsSelected(!isSelected);
     }, [setColumnsConfigOptions, isSelected, column.name]);
-    return (_jsxs(RowLayout, __assign({ "$isVisible": isVisible }, draggableProps, dragHandleProps, { ref: innerRef, style: style, 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, {})] })));
+    return (_jsxs(RowLayout, __assign({ "$isVisible": isVisible }, draggableProps, dragHandleProps, { ref: innerRef, 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 templateObject_1;

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

@@ -1,12 +1,23 @@
-export declare const StyledRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    hasRowClick: boolean;
+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 Row: (props: any) => JSX.Element;
-export declare const StyledDataRow: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("@xstyled/system").Theme, {
+export declare const Cell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    align?: 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;
 }, never>;
-export declare const Cell: (props: any) => JSX.Element;
-export declare const TextCell: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
-export declare const MessageCell: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("@xstyled/system").Theme, {
+export declare const TextCell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    align?: string | undefined;
+}, never>;
+export declare const MessageCell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    align?: string | undefined;
+} & {
     width: number;
 }, never>;

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

@@ -2,24 +2,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-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 } from "react/jsx-runtime";
 import styled, { system, th } from '@xstyled/styled-components';
-export var StyledRow = 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' : 'cursor'); });
-export var Row = function (props) { return _jsx(StyledRow, __assign({ ref: props.innerRef }, props)); };
-var StyledCell = 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 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' : 'cursor'); });
+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 Cell = function (props) { return _jsx(StyledCell, __assign({ ref: props.innerRef }, props)); };
 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; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -1,8 +1,9 @@
+import { MouseEvent } from 'react';
 type Props = {
-    handleRowClick: (e: MouseEvent) => void;
+    handleRowClick: (e: MouseEvent<HTMLDivElement>) => void;
 };
 export declare const useTimeMeasurement: ({ handleRowClick }: Props) => {
     handleMouseDown: () => void;
-    handleMouseUp: (e: MouseEvent) => void;
+    handleMouseUp: (e: MouseEvent<HTMLDivElement>) => void;
 };
 export {};

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

@@ -80,6 +80,7 @@ var useManageColumn = function (_a) {
             if (to === from || !destination) {
                 return;
             }
+            console.log('from ', from, ', to', to, 'destination', destination, 'source', source);
             var columns = isManageModal ? manageColumnsFormDefinitions : displayColumnsDefinitions;
             var newOrderColumns = __spreadArray([], (isManageModal ? updatedColumnsOrder : columnsOrderValue), true);
             var fromIndex = newOrderColumns.findIndex(function (column) { return columns[from].name === column; });
@@ -88,6 +89,7 @@ var useManageColumn = function (_a) {
             var column = newOrderColumns[fromIndex];
             newOrderColumns.splice(fromIndex, 1);
             newOrderColumns.splice(toIndex === -1 ? 0 : toIndex, 0, column);
+            console.log('fromIndex', fromIndex, 'toIndex', toIndex, 'columnsOrderValue', columnsOrderValue, ' newOrderColumns', newOrderColumns);
             if (!isManageModal) {
                 setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(newOrderColumns);
             }

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

@@ -2,6 +2,7 @@ import { Filtering, GridActionsType } from '../types';
 type Props = {
     gridName?: string;
     gridActions: GridActionsType;
+    selectedPresetName: string;
     setSelectedPresetName: (value: string) => void;
     onClosePresetsModal: () => void;
     filters?: Filtering;

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

@@ -15,7 +15,7 @@ var getInitialPresets = function (gridName) {
     }
 };
 export var useSelectPreset = function (_a) {
-    var gridName = _a.gridName, gridActions = _a.gridActions, setSelectedPresetName = _a.setSelectedPresetName, onClosePresetsModal = _a.onClosePresetsModal, filters = _a.filters;
+    var gridName = _a.gridName, gridActions = _a.gridActions, selectedPresetName = _a.selectedPresetName, setSelectedPresetName = _a.setSelectedPresetName, onClosePresetsModal = _a.onClosePresetsModal, filters = _a.filters;
     var _b = useState(false), isFilterChangeFromButton = _b[0], setIsFilterChangeFromButton = _b[1];
     var _c = useState(getInitialPresets(gridName)), gridPresets = _c[0], setGridPresets = _c[1];
     var handleSelectPreset = useCallback(function (presetName, filters) { return function () {
@@ -26,7 +26,14 @@ export var useSelectPreset = function (_a) {
         setIsFilterChangeFromButton(true);
     }; }, [gridActions]);
     useEffect(function () {
+        var _a;
+        if (!selectedPresetName || !gridName)
+            return;
         if (!isFilterChangeFromButton) {
+            var activePreset = (_a = gridPresets[selectedPresetName]) !== null && _a !== void 0 ? _a : {};
+            var isSame = isEqual(activePreset, filters);
+            if (isSame)
+                return;
             setSelectedPresetName('');
             return;
         }

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

@@ -46,7 +46,7 @@ export type FilterComponentProps<VT> = {
 export type ColumnTitleComponentType = React.ComponentType<{
     title?: string | JSX.Element;
     isSortable: boolean;
-    onSetSort: (value: SortingValueType) => void;
+    onSetSort?: (value: SortingValueType) => void;
     sortValue: SortingValueType;
 }>;
 export type ComponentsProps = {

package/ui/ThemeProvider/themes/mailwise.js

@@ -7,7 +7,7 @@ var defaultTheme = {
         md: 768,
         lg: 1024,
         xl: 1280,
-        '2xl': 1536,
+        '2xl': 1536
     },
     colors: {
         white: '#fff',
@@ -71,7 +71,7 @@ var defaultTheme = {
         yellow2: '#F2E871',
         red10: '#FFF6F4',
         red20: '#FFEBE6',
-        red30: '#fec1cb',
+        red30: '#FFDAD1',
         red50: '#ff7c7b',
         red1: '#DB2B19',
         red2: '#E94324',
@@ -92,11 +92,11 @@ var defaultTheme = {
         primary: '#626262',
         black: '#333333',
         error: '#ea5455',
-        secondary: '#E15B63',
+        secondary: '#E15B63'
     },
     fonts: {
         primary: 'Inter, sans-serif',
-        heading: 'Inter, sans-serif',
+        heading: 'Inter, sans-serif'
     },
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -116,13 +116,13 @@ var defaultTheme = {
         7: '1.2',
         8: '1.2',
         9: '1.2',
-        10: '1.2',
+        10: '1.2'
     },
     fontWeights: {
         normal: 400,
         medium: 500,
         semiBold: 600,
-        bold: 700,
+        bold: 700
     },
     letterSpacings: {
         tighter: '2',
@@ -130,21 +130,21 @@ var defaultTheme = {
         normal: '4',
         wide: '8',
         wider: '8',
-        widest: '8',
+        widest: '8'
     },
     borders: {
         slim: '1px solid',
         mediumSlim: '2px solid',
         medium: '3px solid',
         mediumThick: '6px solid',
-        thick: '10px solid',
+        thick: '10px solid'
     },
     radii: {
         sm: '2px',
         md: '4px',
         ml: '6px',
         lg: '8px',
-        xl: '16px',
+        xl: '16px'
     },
     shadows: {
         boxShadow: '0px 5px 60px rgba(0, 0, 0, 0.1)',
@@ -160,7 +160,7 @@ var defaultTheme = {
         headerShadow: '1px 2px 3px #00000029',
         headerShadowB: '1px 1px 3px #00000029',
         headerShadowNotifications: '1px 1px 2px #00000029',
-        cornerDialogShadow: '1px 1px 3px 1px #00000029',
+        cornerDialogShadow: '1px 1px 3px 1px #00000029'
     },
     space: {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -199,12 +199,12 @@ var defaultTheme = {
         64: '16rem',
         72: '18rem',
         80: '20rem',
-        96: '24rem',
+        96: '24rem'
     },
     transitions: {
         simpleLong: 'all 2s',
-        inputTransition: 'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out',
+        inputTransition: 'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out'
     },
-    zIndices: [0, 1, 2, 3, 5, 30, 40, 100, 200, 300, 9999],
+    zIndices: [0, 1, 2, 3, 5, 30, 40, 100, 200, 300, 9999]
 };
 export default defaultTheme;