@mailstep/design-system 0.6.91 → 0.7.0

package/package.json

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

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

@@ -1,9 +1,9 @@
-import { CommonGridProps, FiltersConfig, ColumnDefinition } from './types';
 import { DropResult } from 'react-beautiful-dnd';
+import { CommonGridProps, FiltersConfig, ColumnDefinition } from './types';
 type Props = CommonGridProps & {
     filters?: FiltersConfig;
     handleDragEnd: (item: DropResult) => void;
     displayColumnsDefinitions: ColumnDefinition[];
 };
-declare const CommonGrid: ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps, }: Props) => JSX.Element;
+declare const CommonGrid: ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps }: Props) => JSX.Element;
 export default CommonGrid;

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -11,20 +11,20 @@ var __assign = (this && this.__assign) || function () {
 };
 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 { Row, MessageCell } from './components/Table';
-import OversizedScroll from './components/OversizedScroll';
-import GroupRow from './components/GroupRow';
-import FilterRow from './components/FilterRow';
 import DataRow from './components/DataRow';
+import FilterRow from './components/FilterRow';
+import FloatingButton from './components/FloatingButton/FloatingButton';
+import GroupRow from './components/GroupRow';
 import HeadRow from './components/HeadRow';
-import useUxReset from './hooks/useUxReset';
-import useRowsKeyControls from './hooks/useRowsKeyControls';
+import OversizedScroll from './components/OversizedScroll';
+import { Row, MessageCell } from './components/Table';
 import useColumnSizes from './hooks/useColumnSizes';
-import { getGroups } from './utils';
-import { initialState } from './store';
+import useRowsKeyControls from './hooks/useRowsKeyControls';
+import useUxReset from './hooks/useUxReset';
 import { Trans } from '@lingui/react';
-import FloatingButton from './components/FloatingButton/FloatingButton';
+import { x } from '@xstyled/styled-components';
+import { initialState } from './store';
+import { getGroups } from './utils';
 var rowsStyles = { outline: 'none' };
 var defaultVoidFunction = function () {
     var args = [];

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/Filters/NumberRange/NumberRange.js

@@ -86,7 +86,6 @@ var NumberRange = function (props) {
             }
             // two values for between comparation
             if (values.length === 2) {
-                console.log('TRTEEEEEST', values);
                 var normalizedValues = values.map(function (value) { return normalizeValue(value, 0); });
                 onChange({ comparator: comparator, value: normalizedValues.join(',') });
                 return;

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

@@ -23,5 +23,5 @@ export var GridModals = function (_a) {
         gridName: gridName,
         setGridPresets: setGridPresets
     }), fileInputRef = _e.fileInputRef, handleImportPresets = _e.handleImportPresets, handleExportPresets = _e.handleExportPresets, handleImportButtonClick = _e.handleImportButtonClick;
-    return (_jsxs(_Fragment, { children: [manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd }) })), _jsx(Modal, { isShown: isPresetsModalOpen, title: _jsx(Trans, { id: "dataGrid.presets.title", message: "Presets" }), onClose: onClosePresetsModal, width: "narrow", children: _jsx(PresetsModalBody, { onOpenCreatePresetModal: onOpenCreatePresetModal, gridPresets: gridPresets, handleSelectPreset: handleSelectPreset, handleOpenDeletePresetModal: handleOpenDeletePresetModal, selectedPresetName: selectedPresetName, handleExportPresets: handleExportPresets, handleImportPresets: handleImportPresets, handleImportButtonClick: handleImportButtonClick, fileInputRef: fileInputRef, filters: gridSelectors.filter }) }), _jsx(Modal, { isShown: isCreatePresetModalOpen, title: _jsx(Trans, { id: "dataGrid.createPreset.title", message: "Create preset" }), onCancel: handleCloseCreatePresetModal, onConfirm: handleCreatePreset, isConfirmDisabled: !presetName, width: "narrow", children: _jsx(Input, { type: "text", onChange: handleChangePresetName, value: presetName, label: _jsx(Trans, { id: "dataGrid.createPreset.title", message: "Preset name" }) }) }), _jsx(Modal, { isShown: isDeletePresetModalOpen, title: _jsx(Trans, { id: "dataGrid.deletePreset.title", message: "Delete preset" }), onCancel: onCloseDeletePresetModal, onConfirm: handleDeletePreset, isConfirmDisabled: !presetNameToDelete, width: "narrow", children: _jsxs(_Fragment, { children: [_jsx(Trans, { id: "dataGrid.deletePreset.confirm", message: "Are you sure you want to delete preset" }), " \"", presetNameToDelete, "\" ?"] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, isShown: manageColumnFormVisible, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd }) }), _jsx(Modal, { isShown: isPresetsModalOpen, title: _jsx(Trans, { id: "dataGrid.presets.title", message: "Presets" }), onClose: onClosePresetsModal, width: "narrow", children: _jsx(PresetsModalBody, { onOpenCreatePresetModal: onOpenCreatePresetModal, gridPresets: gridPresets, handleSelectPreset: handleSelectPreset, handleOpenDeletePresetModal: handleOpenDeletePresetModal, selectedPresetName: selectedPresetName, handleExportPresets: handleExportPresets, handleImportPresets: handleImportPresets, handleImportButtonClick: handleImportButtonClick, fileInputRef: fileInputRef, filters: gridSelectors.filter }) }), _jsx(Modal, { isShown: isCreatePresetModalOpen, title: _jsx(Trans, { id: "dataGrid.createPreset.title", message: "Create preset" }), onCancel: handleCloseCreatePresetModal, onConfirm: handleCreatePreset, isConfirmDisabled: !presetName, width: "narrow", children: _jsx(Input, { type: "text", onChange: handleChangePresetName, value: presetName, label: _jsx(Trans, { id: "dataGrid.createPreset.title", message: "Preset name" }) }) }), _jsx(Modal, { isShown: isDeletePresetModalOpen, title: _jsx(Trans, { id: "dataGrid.deletePreset.title", message: "Delete preset" }), onCancel: onCloseDeletePresetModal, onConfirm: handleDeletePreset, isConfirmDisabled: !presetNameToDelete, width: "narrow", children: _jsxs(_Fragment, { children: [_jsx(Trans, { id: "dataGrid.deletePreset.confirm", message: "Are you sure you want to delete preset" }), " \"", presetNameToDelete, "\" ?"] }) })] }));
 };

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, innerRef: 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

@@ -16,6 +16,8 @@ import { Input } from '../../../../Forms/Input/Input';
 import { ActionRow } from './components/ActionRow';
 import { i18n } from '@lingui/core';
 import { x } from '@xstyled/styled-components';
+import { RowLayout } from './styles';
+import { getTranslatedValue } from './utils';
 var ManageColumnForm = function (_a) {
     var columns = _a.columns, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, handleDragEnd = _a.handleDragEnd;
     var _b = useState(''), searchedValue = _b[0], setSearchedValue = _b[1];
@@ -25,8 +27,15 @@ 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) {
+                            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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { DraggableProps, DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
 import { ColumnConfig, ColumnDefinition } from '../../../types';
 type ActionRowProps = {
     column: ColumnDefinition;
@@ -7,10 +6,7 @@ type ActionRowProps = {
     setColumnsConfigOptions: (value: React.SetStateAction<{
         [x: string]: ColumnConfig | {};
     }>) => void;
-    searchedValue: string;
-    innerRef?: Function;
-    draggableProps?: DraggableProps | any;
-    dragHandleProps?: DraggableProvidedDragHandleProps | null;
+    translatedValue: string;
 };
-export declare const ActionRow: ({ column, columnsConfigValues, setColumnsConfigOptions, searchedValue, innerRef, draggableProps, dragHandleProps }: ActionRowProps) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1,7 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    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++) {
@@ -13,30 +9,16 @@ 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 { isObject } from 'lodash';
-import styled from 'styled-components';
+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 { i18n } from '@lingui/core';
-import { x, th } from '@xstyled/styled-components';
-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'));
+import { x } from '@xstyled/styled-components';
 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) &&
-        i18n._({ id: (_e = (_d = column.title) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.id, message: (_f = column.title) === null || _f === void 0 ? void 0 : _f.props.message })) ||
-        (column === null || column === void 0 ? void 0 : column.title);
-    var isVisible = translatedValue && translatedValue.toLocaleLowerCase().includes(searchedValue.toLocaleLowerCase()) && !column.alwaysOn;
+    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;
@@ -44,6 +26,5 @@ 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(_Fragment, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(x.div, { w: "28px", children: _jsx(Toggle, { name: "", variant: "grid", onChange: handleToggleChange, spaceAround: false, checked: isSelected }) }), _jsx(H6, { variant: "medium", ml: "8px", children: translatedValue })] }), _jsx(Group, {})] }));
 };
-var templateObject_1;

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

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

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

@@ -0,0 +1,10 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    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) {
+    var $isVisible = _a.$isVisible;
+    return ($isVisible ? 'flex' : 'none');
+}, th.color('lightGray6'));
+var templateObject_1;

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

@@ -0,0 +1,2 @@
+import { ColumnDefinition } from '../../types';
+export declare const getTranslatedValue: (column?: ColumnDefinition | null) => any;

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

@@ -0,0 +1,10 @@
+import { i18n } from '@lingui/core';
+import isObject from 'lodash/isObject';
+export var getTranslatedValue = function (column) {
+    var _a, _b, _c, _d;
+    return column && isObject(column === null || column === void 0 ? void 0 : column.title)
+        ? 'props' in column.title &&
+            ((_a = column.title) === null || _a === void 0 ? void 0 : _a.props) &&
+            i18n._({ id: (_c = (_b = column.title) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.id, message: (_d = column.title) === null || _d === void 0 ? void 0 : _d.props.message })
+        : column === null || column === void 0 ? void 0 : column.title;
+};

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

@@ -23,7 +23,7 @@ export var PresetsModalBody = function (_a) {
     var onOpenCreatePresetModal = _a.onOpenCreatePresetModal, gridPresets = _a.gridPresets, handleSelectPreset = _a.handleSelectPreset, handleOpenDeletePresetModal = _a.handleOpenDeletePresetModal, selectedPresetName = _a.selectedPresetName, handleExportPresets = _a.handleExportPresets, handleImportButtonClick = _a.handleImportButtonClick, handleImportPresets = _a.handleImportPresets, fileInputRef = _a.fileInputRef, filters = _a.filters;
     var presets = useMemo(function () { return Object.entries(gridPresets || {}); }, [gridPresets]);
     var hasPresets = !!(presets === null || presets === void 0 ? void 0 : presets.length);
-    return (_jsxs(x.div, { children: [_jsx(x.div, { display: "flex", rowGap: "12px", children: hasPresets ? (presets === null || presets === void 0 ? void 0 : presets.map(function (_a, index) {
+    return (_jsxs(x.div, { children: [_jsx(x.div, { display: "flex", rowGap: "12px", flexWrap: "wrap", children: hasPresets ? (presets === null || presets === void 0 ? void 0 : presets.map(function (_a, index) {
                     var presetName = _a[0], filters = _a[1];
                     var isSelected = presetName === selectedPresetName;
                     return (_jsxs(Tag, __assign({ size: "big", onClick: handleSelectPreset(presetName, filters) }, (isSelected ? palletes.redWhite : palletes.redRed), { pointer: true, children: [_jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: presetName }), _jsx(x.div, { ml: "12px", h: "fit-content", onClick: handleOpenDeletePresetModal(presetName), children: _jsx(Cancel, { fill: isSelected ? 'white' : '#DB2B19' }) })] }), "".concat(presetName, "_").concat(index)));

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,7 +80,7 @@ var useManageColumn = function (_a) {
             if (to === from || !destination) {
                 return;
             }
-            var columns = isManageModal ? manageColumnsFormDefinitions : displayColumnsDefinitions;
+            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; });

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

@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
-import { isObject } from 'lodash';
 import { useCheckDeviceWidth } from '../../../utils/CheckDeviceWidth/checkDeviceWidth';
+import { getTranslatedValue } from '../components/ManageColumnForm/utils';
 import { createFilterType } from '../utils';
-import { i18n } from '@lingui/core';
 import { useAddFilter } from './useAddFilter';
 var defaultVoidFunction = function () {
     var args = [];
@@ -12,13 +11,13 @@ var defaultVoidFunction = function () {
     return null;
 };
 var useQuickFilter = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
+    var _b, _c;
     var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, quickFilter = _a.quickFilter, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters;
-    var resetFilters = gridActions.resetFilters, _h = gridActions.addFilter, addFilter = _h === void 0 ? defaultVoidFunction : _h;
+    var resetFilters = gridActions.resetFilters, _d = gridActions.addFilter, addFilter = _d === void 0 ? defaultVoidFunction : _d;
     var filter = gridSelectors.filter;
     var isMobile = useCheckDeviceWidth().isMobile;
-    var _j = useState(''), searchedValue = _j[0], setSearchedValue = _j[1];
-    var _k = useState(false), displayInput = _k[0], setDisplayInput = _k[1];
+    var _e = useState(''), searchedValue = _e[0], setSearchedValue = _e[1];
+    var _f = useState(false), displayInput = _f[0], setDisplayInput = _f[1];
     var handleAddFilter = useAddFilter(addFilter);
     var quickFilterValues = quickFilter ? (_b = filter === null || filter === void 0 ? void 0 : filter[quickFilter]) === null || _b === void 0 ? void 0 : _b.value : undefined;
     var searchedColumnsDefinitions = (displayColumnsDefinitions === null || displayColumnsDefinitions === void 0 ? void 0 : displayColumnsDefinitions.find(function (item) { return item.name === quickFilter; })) || null;
@@ -67,11 +66,7 @@ var useQuickFilter = function (_a) {
         resetFilters === null || resetFilters === void 0 ? void 0 : resetFilters();
         setSearchedValue === null || setSearchedValue === void 0 ? void 0 : setSearchedValue('');
     }, [resetFilters, setSearchedValue]);
-    var translatedValue = searchedColumnsDefinitions && isObject(searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title)
-        ? 'props' in (searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
-            ((_d = searchedColumnsDefinitions.title) === null || _d === void 0 ? void 0 : _d.props) &&
-            i18n._({ id: (_f = (_e = searchedColumnsDefinitions.title) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.id, message: (_g = searchedColumnsDefinitions.title) === null || _g === void 0 ? void 0 : _g.props.message })
-        : searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title;
+    var translatedValue = getTranslatedValue(searchedColumnsDefinitions);
     return {
         searchedValue: searchedValue,
         translatedValue: translatedValue,

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
-import { isEqual } from 'lodash';
 import { presetsLocalStorageKey } from '../utils/constants';
+import isEqual from 'lodash/isEqual';
 var getInitialPresets = function (gridName) {
     var _a;
     if (!gridName)
@@ -16,21 +16,13 @@ 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 _b = useState(false), isFilterChangeFromButton = _b[0], setIsFilterChangeFromButton = _b[1];
-    var _c = useState(getInitialPresets(gridName)), gridPresets = _c[0], setGridPresets = _c[1];
+    var _b = useState(getInitialPresets(gridName)), gridPresets = _b[0], setGridPresets = _b[1];
     var handleSelectPreset = useCallback(function (presetName, filters) { return function () {
         var _a;
         setSelectedPresetName(presetName);
         (_a = gridActions.setFilters) === null || _a === void 0 ? void 0 : _a.call(gridActions, filters);
         onClosePresetsModal();
-        setIsFilterChangeFromButton(true);
     }; }, [gridActions]);
-    useEffect(function () {
-        if (!isFilterChangeFromButton) {
-            setSelectedPresetName('');
-        }
-        setIsFilterChangeFromButton(false);
-    }, [filters]);
     useEffect(function () {
         var _a;
         if (!gridName || !gridPresets)
@@ -39,9 +31,7 @@ export var useSelectPreset = function (_a) {
             var presetName = _a[0], presetFilters = _a[1];
             return isEqual(presetFilters, filters);
         });
-        if (activePreset) {
-            setSelectedPresetName(activePreset[0]);
-        }
-    }, []);
+        activePreset ? setSelectedPresetName(activePreset[0]) : setSelectedPresetName('');
+    }, [filters]);
     return { gridPresets: gridPresets, setGridPresets: setGridPresets, handleSelectPreset: handleSelectPreset };
 };

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

@@ -5,7 +5,7 @@ export declare const BottomWrapper: import("styled-components").StyledComponent<
 export declare const ContentContainer: 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 CommonGridWrap: 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 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, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps, }: import("./types").CommonGridProps & {
+export declare const CommonGridWithStyles: import("styled-components").StyledComponent<({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps }: import("./types").CommonGridProps & {
     filters?: import("./types").FiltersConfig | undefined;
     handleDragEnd: (item: import("react-beautiful-dnd").DropResult) => void;
     displayColumnsDefinitions: import("./types").ColumnDefinition[];

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 = {