@mailstep/design-system 0.6.89-beta.2 → 0.6.90

package/README.md

@@ -2,8 +2,6 @@
 
 Live demo here: https://mailstep.gitlab.io/mailwise/mw2/design-system/storybook 
 
-Powered by chromatic: https://www.chromatic.com/library?appId=664c5032c1e55e80a74fcfd2&branch=master 
-
 ## Peer dependencies
 - @xstyled/styled-components
 - styled-component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.89-beta.2",
+  "version": "0.6.90",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -17,7 +17,6 @@
     "deploy": "npm run build && npm publish ./build",
     "dev": "yarn storybook",
     "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
-    "chromatic": "npx chromatic --project-token=chpt_cbebab21ab70358 --exit-zero-on-changes",
     "lint": "eslint src/**/*.{js,jsx,ts,tsx,json}"
   },
   "devDependencies": {

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -20,29 +20,28 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { Pagination } from '../../Elements/Pagination';
 import HidePrint from '../HidePrint/HidePrint';
-import Modal from '../Modal';
 import { useModal } from '../Modal/hooks/useModal';
 import ActionHead from './components/ActionHead';
 import ControlButtons from './components/ControlButtons';
-import ManageColumnForm from './components/ManageColumnForm';
+import { GridModals } from './components/GridModals';
 import TablePagination from './components/TablePagination';
 import useEditReadAsColumn from './hooks/useEditReadAsColumn';
 import useGetGridHeight from './hooks/useGetGridHeight';
 import useManageColumn from './hooks/useManageColumn';
-import { Trans } from '@lingui/react';
+import { usePresetState } from './hooks/usePresetsState';
 import { x } from '@xstyled/styled-components';
 import { CommonGridWithStyles, BottomWrapper, CommonGridWrap, ContentContainer, StyledButtonStrip } from './styles';
 import { getFilters, GRID_MIN_ROWS, rowHeight } from './utils';
 var CommonGridContainer = function (props) {
     var _a;
-    var _b = props.optimizeFilters, optimizeFilters = _b === void 0 ? false : _b, extraControlButtons = props.extraControlButtons, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, _c = props.autoHeight, autoHeight = _c === void 0 ? true : _c, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "autoHeight"]);
+    var _b = props.optimizeFilters, optimizeFilters = _b === void 0 ? false : _b, extraControlButtons = props.extraControlButtons, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, _c = props.autoHeight, autoHeight = _c === void 0 ? true : _c, gridName = props.gridName, _d = props.withPresets, withPresets = _d === void 0 ? true : _d, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "autoHeight", "gridName", "withPresets"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
-    var _d = useState(false), displayManageColumnButton = _d[0], setDisplayManageColumnButton = _d[1];
-    var _e = useGetGridHeight(), gridHeight = _e.gridHeight, gridRef = _e.gridRef, paginationRef = _e.paginationRef;
+    var _e = useState(false), displayManageColumnButton = _e[0], setDisplayManageColumnButton = _e[1];
+    var _f = useGetGridHeight(), gridHeight = _f.gridHeight, gridRef = _f.gridRef, paginationRef = _f.paginationRef;
     useEffect(function () {
         var _a;
         if (!queryRowsParam && gridHeight && gridHeight > 0) {
@@ -56,13 +55,14 @@ var CommonGridContainer = function (props) {
     var modifiedPassDownProps = useEditReadAsColumn(passDownProps);
     var filters = useMemo(function () { return getFilters(optimizeFilters); }, [optimizeFilters]);
     var columns = modifiedPassDownProps.columnsDefinitions;
-    var _f = useModal(), openManageColumnForm = _f.onOpen, manageColumnFormVisible = _f.isOpen, onClose = _f.onClose;
-    var _g = useManageColumn({
+    var _g = useModal(), openManageColumnForm = _g.onOpen, manageColumnFormVisible = _g.isOpen, onClose = _g.onClose;
+    var _h = useManageColumn({
         columns: columns,
         gridActions: gridActions,
         gridSelectors: gridSelectors,
         onClose: onClose
-    }), columnsConfigValues = _g.columnsConfigValues, setColumnsConfigOptions = _g.setColumnsConfigOptions, onConfirmForm = _g.onConfirmForm, resetColumnConfig = _g.resetColumnConfig, handleDragEnd = _g.handleDragEnd, onCloseForm = _g.onCloseForm, displayColumnsDefinitions = _g.displayColumnsDefinitions, manageColumnsFormDefinitions = _g.manageColumnsFormDefinitions;
-    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm }) }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [(processCheckedValues || !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), 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(true) }) }))] }));
+    }), columnsConfigValues = _h.columnsConfigValues, setColumnsConfigOptions = _h.setColumnsConfigOptions, onConfirmForm = _h.onConfirmForm, resetColumnConfig = _h.resetColumnConfig, handleDragEnd = _h.handleDragEnd, onCloseForm = _h.onCloseForm, displayColumnsDefinitions = _h.displayColumnsDefinitions, manageColumnsFormDefinitions = _h.manageColumnsFormDefinitions;
+    var _j = usePresetState(), isPresetsModalOpen = _j.isPresetsModalOpen, onClosePresetsModal = _j.onClosePresetsModal, onOpenPresetsModal = _j.onOpenPresetsModal, setSelectedPresetName = _j.setSelectedPresetName, selectedPresetName = _j.selectedPresetName;
+    return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm, onOpenPresetsModal: onOpenPresetsModal, selectedPresetName: selectedPresetName, withPresets: withPresets, gridName: gridName }) }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [(processCheckedValues || !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) })] }), _jsx(GridModals, { manageColumnFormVisible: manageColumnFormVisible, onCloseForm: onCloseForm, resetColumnConfig: resetColumnConfig, onConfirmForm: onConfirmForm, manageColumnsFormDefinitions: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true), gridName: gridName, gridActions: gridActions, gridSelectors: gridSelectors, onClosePresetsModal: onClosePresetsModal, isPresetsModalOpen: isPresetsModalOpen, selectedPresetName: selectedPresetName, setSelectedPresetName: setSelectedPresetName })] }));
 };
 export default CommonGridContainer;

package/ui/Blocks/CommonGrid/HoC/withReduxActions.js

@@ -23,12 +23,13 @@ var withReduxActions = function (gridName, prefix) {
                 setPage: actions.setPage,
                 setRowsPerPage: actions.setRowsPerPage,
                 addFilter: actions.addFilter,
+                setFilters: actions.setFilters,
                 resetFilters: actions.resetFilters,
                 addSorting: actions.addSorting,
                 clearSettings: actions.clearSettings,
                 setColumnWidth: actions.setColumnWidth,
                 resetGrid: actions.resetGrid,
-                setColumnsOrder: actions.setColumnsOrder,
+                setColumnsOrder: actions.setColumnsOrder
             }, dispatch),
             _a);
     });

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

@@ -11,6 +11,10 @@ type Props = {
     displayManageColumnButton?: boolean;
     openManageColumnForm?: () => void;
     setDisplayManageColumnButton: Dispatch<React.SetStateAction<boolean>>;
+    onOpenPresetsModal: () => void;
+    gridName?: string;
+    selectedPresetName: string;
+    withPresets?: boolean;
 };
-declare const ControlButtons: ({ extraControlButtons, gridActions, gridSelectors, quickFilter, displayColumnsDefinitions, filters, hideControlButtons, displayManageColumnButton, openManageColumnForm, setDisplayManageColumnButton }: Props) => JSX.Element;
+declare const ControlButtons: ({ extraControlButtons, gridActions, gridSelectors, quickFilter, displayColumnsDefinitions, filters, hideControlButtons, displayManageColumnButton, openManageColumnForm, setDisplayManageColumnButton, onOpenPresetsModal, gridName, selectedPresetName, withPresets }: Props) => JSX.Element;
 export default ControlButtons;

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

@@ -1,8 +1,21 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import Button from '../../../../Elements/Button/Button';
 import { Settings2 } from '../../../../Elements/Icon/icons/Settings2';
 import { H6 } from '../../../../Elements/Typography';
+import Tag from '../../../../Elements/Tag/Tag';
+import { palletes } from '../../../../Elements/Tag/palletes';
 import useQuickFilter from '../../hooks/useQuickFilter';
 import { ExtraControlButtonPosition } from '../../types';
 import ExtraControlButtons from '../ExtraControlButtons';
@@ -12,7 +25,7 @@ import { Trans } from '@lingui/react';
 import { x } from '@xstyled/styled-components';
 import { ControlButtonsContainer, Left, Right, StyledColumnButton } from './styles';
 var ControlButtons = function (_a) {
-    var extraControlButtons = _a.extraControlButtons, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _b = _a.quickFilter, quickFilter = _b === void 0 ? '' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters, hideControlButtons = _a.hideControlButtons, displayManageColumnButton = _a.displayManageColumnButton, openManageColumnForm = _a.openManageColumnForm, setDisplayManageColumnButton = _a.setDisplayManageColumnButton;
+    var extraControlButtons = _a.extraControlButtons, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _b = _a.quickFilter, quickFilter = _b === void 0 ? '' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters, hideControlButtons = _a.hideControlButtons, displayManageColumnButton = _a.displayManageColumnButton, openManageColumnForm = _a.openManageColumnForm, setDisplayManageColumnButton = _a.setDisplayManageColumnButton, onOpenPresetsModal = _a.onOpenPresetsModal, gridName = _a.gridName, selectedPresetName = _a.selectedPresetName, withPresets = _a.withPresets;
     var _c = useQuickFilter({
         gridActions: gridActions,
         gridSelectors: gridSelectors,
@@ -24,10 +37,10 @@ var ControlButtons = function (_a) {
         setDisplayManageColumnButton(!isMobileInputView);
     }, [isMobileInputView, setDisplayManageColumnButton]);
     var filtersOn = !!filter && Object.values(filter).some(function (item) { var _a; return ((_a = item.value) === null || _a === void 0 ? void 0 : _a.value) !== '' && item.value !== ''; });
-    return (_jsxs(ControlButtonsContainer, { children: [_jsx(Left, { children: !hideControlButtons && (_jsxs(_Fragment, { children: [quickFilter && (_jsx(QuickFilter, { searchedValue: searchedValue, placeholderText: i18n._({
-                                id: 'controlButtons.searchPlaceholder',
-                                message: "Search ".concat(translatedValue, " ..."),
-                                values: { translatedValue: translatedValue }
-                            }), onChange: onChangeInputValue, onClear: onClear, onClick: onDisplayInput, displayInput: displayInput, isMobileInputView: isMobileInputView, alwaysShowClear: isMobile })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: onResetFilters, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] })) }), _jsxs(Right, { children: [_jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopRight }), displayManageColumnButton && (_jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) }))] })] }));
+    return (_jsxs(ControlButtonsContainer, { children: [_jsxs(Left, { children: [!hideControlButtons && (_jsxs(_Fragment, { children: [quickFilter && (_jsx(QuickFilter, { searchedValue: searchedValue, placeholderText: i18n._({
+                                    id: 'controlButtons.searchPlaceholder',
+                                    message: "Search ".concat(translatedValue, " ..."),
+                                    values: { translatedValue: translatedValue }
+                                }), onChange: onChangeInputValue, onClear: onClear, onClick: onDisplayInput, displayInput: displayInput, isMobileInputView: isMobileInputView, alwaysShowClear: isMobile })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: onResetFilters, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] })), withPresets && gridName && (_jsxs(_Fragment, { children: [_jsx(x.div, { mx: "12px", children: _jsx(Button, { onClick: onOpenPresetsModal, type: "button", variant: "default", appearance: "tertiary", children: _jsx(Trans, { id: "dataGrid.presets.title", message: "Presets" }) }) }), selectedPresetName && (_jsx(Tag, __assign({ size: "medium" }, palletes.redWhite, { children: _jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: selectedPresetName }) })))] }))] }), _jsxs(Right, { children: [_jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopRight }), displayManageColumnButton && (_jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) }))] })] }));
 };
 export default ControlButtons;

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

@@ -0,0 +1,22 @@
+import React, { type FC } from 'react';
+import { DropResult } from 'react-beautiful-dnd';
+import { ColumnConfig, ColumnDefinition, GridActionsType, GridSelectorsType } from '../../types';
+type ModalsProps = {
+    manageColumnFormVisible: boolean;
+    onCloseForm: () => void;
+    resetColumnConfig: () => void;
+    onConfirmForm: () => void;
+    manageColumnsFormDefinitions: ColumnDefinition[];
+    columnsConfigValues: string[];
+    setColumnsConfigOptions: (value: React.SetStateAction<Record<string, ColumnConfig | {}>>) => void;
+    handleDragEnd: (item: DropResult) => void;
+    gridName?: string;
+    gridSelectors: GridSelectorsType;
+    gridActions: GridActionsType;
+    isPresetsModalOpen: boolean;
+    onClosePresetsModal: () => void;
+    selectedPresetName: string;
+    setSelectedPresetName: (value: string) => void;
+};
+export declare const GridModals: FC<ModalsProps>;
+export {};

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from '../../../../Forms/Input/Input';
+import { Modal } from '../../../Modal/Modal';
+import { useCreatePreset } from '../../hooks/useCreatePreset';
+import { useDeletePreset } from '../../hooks/useDeletePreset';
+import { usePresetFileHandlers } from '../../hooks/usePresetFileHandlers';
+import { useSelectPreset } from '../../hooks/useSelectPreset';
+import ManageColumnForm from '../ManageColumnForm';
+import { PresetsModalBody } from '../PresetsModalBody';
+import { Trans } from '@lingui/react';
+export var GridModals = function (_a) {
+    var manageColumnFormVisible = _a.manageColumnFormVisible, onCloseForm = _a.onCloseForm, resetColumnConfig = _a.resetColumnConfig, onConfirmForm = _a.onConfirmForm, manageColumnsFormDefinitions = _a.manageColumnsFormDefinitions, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, handleDragEnd = _a.handleDragEnd, gridName = _a.gridName, gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, isPresetsModalOpen = _a.isPresetsModalOpen, onClosePresetsModal = _a.onClosePresetsModal, selectedPresetName = _a.selectedPresetName, setSelectedPresetName = _a.setSelectedPresetName;
+    var _b = useSelectPreset({
+        gridName: gridName,
+        gridActions: gridActions,
+        setSelectedPresetName: setSelectedPresetName,
+        onClosePresetsModal: onClosePresetsModal,
+        filters: gridSelectors.filter
+    }), gridPresets = _b.gridPresets, setGridPresets = _b.setGridPresets, handleSelectPreset = _b.handleSelectPreset;
+    var _c = useCreatePreset({ gridName: gridName, setGridPresets: setGridPresets, onClosePresetsModal: onClosePresetsModal, setSelectedPresetName: setSelectedPresetName, filters: gridSelectors.filter }), isCreatePresetModalOpen = _c.isCreatePresetModalOpen, handleCloseCreatePresetModal = _c.handleCloseCreatePresetModal, onOpenCreatePresetModal = _c.onOpenCreatePresetModal, handleCreatePreset = _c.handleCreatePreset, presetName = _c.presetName, handleChangePresetName = _c.handleChangePresetName;
+    var _d = useDeletePreset({ gridName: gridName, selectedPresetName: selectedPresetName, setGridPresets: setGridPresets, setSelectedPresetName: setSelectedPresetName }), handleOpenDeletePresetModal = _d.handleOpenDeletePresetModal, handleDeletePreset = _d.handleDeletePreset, onCloseDeletePresetModal = _d.onCloseDeletePresetModal, presetNameToDelete = _d.presetNameToDelete, isDeletePresetModalOpen = _d.isDeletePresetModalOpen;
+    var _e = usePresetFileHandlers({
+        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, "\" ?"] }) })] }));
+};

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

@@ -23,5 +23,5 @@ type Props = {
     sticky?: boolean;
     stickTo?: StickTo;
 };
-declare const _default: React.MemoExoticComponent<({ title, name, isSortable, systemName, onAddSort, sortValue, hasResize, onResizeOver, onResizeOut, innerRef, isDragging, draggableProps, dragHandleProps, flexBasis, flexGrow, flexShrink, handleResizeDrag, group, sticky, stickTo, }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ title, name, isSortable, systemName, onAddSort, sortValue, hasResize, onResizeOver, onResizeOut, innerRef, isDragging, draggableProps, dragHandleProps, flexBasis, flexGrow, flexShrink, handleResizeDrag, group, sticky, stickTo }: Props) => JSX.Element>;
 export default _default;

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

@@ -15,11 +15,11 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { getGroupClassNames, getStickyCollClassNames } from '../utils';
 import styled from '@xstyled/styled-components';
-import { Cell } from './Table';
 import ColumnTitle from './ColumnTitle';
 import Resize from './Resize';
-import { getGroupClassNames, getStickyCollClassNames } from '../utils';
+import { Cell } from './Table';
 var DraggableCell = styled(Cell)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var $isDragging = _a.$isDragging;
     return ($isDragging ? 'transparentRed' : 'transparent');
@@ -29,12 +29,14 @@ var HeadCell = function (_a) {
     var onResize = React.useCallback(function (width) {
         handleResizeDrag === null || handleResizeDrag === void 0 ? void 0 : handleResizeDrag(name, width);
     }, [handleResizeDrag, name]);
-    var style = React.useMemo(function () { return (__assign({}, draggableProps === null || draggableProps === void 0 ? void 0 : draggableProps.style)); }, [draggableProps]);
+    var style = React.useMemo(function () { return (__assign({}, draggableProps === null || draggableProps === void 0 ? void 0 : draggableProps.style
+    // position: 'relative', // this is needed so that resizer is visible. TODO solve in better way (adjusting width of headers and moving resizer one level up ??)
+    )); }, [draggableProps]);
     var onSetSort = React.useCallback(function (value) {
         onAddSort && onAddSort(systemName || name, value);
     }, [onAddSort, systemName, name]);
     var cellClassName = "cell".concat(getStickyCollClassNames(!!sticky, stickTo), " ").concat(getGroupClassNames(group));
-    return (_jsxs(DraggableCell, __assign({}, draggableProps, dragHandleProps, { style: style, flexBasis: flexBasis, flexGrow: flexGrow, flexShrink: flexShrink, innerRef: innerRef, "$isDragging": isDragging, className: cellClassName, children: [_jsx(ColumnTitle, { title: title, isSortable: isSortable, onSetSort: onSetSort, sortValue: sortValue }), hasResize && onResizeOut && onResizeOver && (_jsx(Resize, { onResize: onResize, onResizeOver: onResizeOver, onResizeOut: onResizeOut }))] })));
+    return (_jsxs(DraggableCell, __assign({}, draggableProps, dragHandleProps, { style: style, flexBasis: flexBasis, flexGrow: flexGrow, flexShrink: flexShrink, ref: innerRef, "$isDragging": isDragging, className: cellClassName, children: [_jsx(ColumnTitle, { title: title, isSortable: isSortable, onSetSort: onSetSort, sortValue: sortValue }), hasResize && onResizeOut && onResizeOver && (_jsx(Resize, { onResize: onResize, onResizeOver: onResizeOver, onResizeOut: onResizeOut }))] })));
 };
 export default React.memo(HeadCell);
 var templateObject_1;

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

@@ -11,5 +11,5 @@ type HeadRowProps = {
     handleDragEnd: (item: DropResult) => void;
     groups: Group[];
 };
-declare const HeadRow: ({ columns, actionColumn, onAddSort, handleDragEnd, sortingValues, displayColumnsWidth, columnLayout, handleResizeDrag, groups, }: HeadRowProps) => JSX.Element;
+declare const HeadRow: ({ columns, actionColumn, onAddSort, handleDragEnd, sortingValues, displayColumnsWidth, columnLayout, handleResizeDrag, groups }: HeadRowProps) => JSX.Element;
 export default HeadRow;

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

@@ -11,10 +11,10 @@ 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 { Row, Cell } from './Table';
-import HeadCell from './HeadCell';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { getActionCellSizeProps, getCellSizeProps, getSortName } from '../utils';
+import HeadCell from './HeadCell';
+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)); });
@@ -34,7 +34,7 @@ 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, 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
+    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
                             .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;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ColumnConfig, CommonGridProps } from '../../types';
 import { DropResult } from 'react-beautiful-dnd';
+import { ColumnConfig, CommonGridProps } from '../../types';
 type ManageColumnProps = {
     columns?: CommonGridProps['columnsDefinitions'];
     columnsConfigValues?: string[];
@@ -9,5 +9,5 @@ type ManageColumnProps = {
     }>) => void;
     handleDragEnd: (item: DropResult) => void;
 };
-declare const ManageColumnForm: ({ columns, columnsConfigValues, setColumnsConfigOptions, handleDragEnd, }: ManageColumnProps) => JSX.Element;
+declare const ManageColumnForm: ({ columns, columnsConfigValues, setColumnsConfigOptions, handleDragEnd }: ManageColumnProps) => JSX.Element;
 export default ManageColumnForm;

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

@@ -11,11 +11,11 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import { x } from '@xstyled/styled-components';
-import { ActionRow } from './components/ActionRow';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { Input } from '../../../../Forms/Input/Input';
+import { ActionRow } from './components/ActionRow';
 import { i18n } from '@lingui/core';
-import { DragDropContext, Draggable, Droppable, } from 'react-beautiful-dnd';
+import { x } from '@xstyled/styled-components';
 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,7 +25,7 @@ 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", 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 (_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));
                         }) }))); } }) })] }));
 };

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

@@ -0,0 +1,16 @@
+import { ChangeEvent, type FC, MouseEvent, RefObject } from 'react';
+import { Filtering } from '../../types';
+type PresetsModalBodyProps = {
+    onOpenCreatePresetModal: () => void;
+    gridPresets: Record<string, Record<string, any>>;
+    handleSelectPreset: (presetName: string, filters: Filtering) => () => void;
+    handleOpenDeletePresetModal: (presetName: string) => (e: MouseEvent) => void;
+    selectedPresetName: string;
+    handleExportPresets: () => void;
+    handleImportButtonClick: () => void;
+    handleImportPresets: (event: ChangeEvent<HTMLInputElement>) => void;
+    fileInputRef: RefObject<HTMLInputElement>;
+    filters?: Filtering;
+};
+export declare const PresetsModalBody: FC<PresetsModalBodyProps>;
+export {};

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

@@ -0,0 +1,31 @@
+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 { useMemo } from 'react';
+import Button from '../../../../Elements/Button/Button';
+import { Cancel } from '../../../../Elements/Icon/icons/Cancel';
+import Tag from '../../../../Elements/Tag/Tag';
+import { palletes } from '../../../../Elements/Tag/palletes';
+import { H6 } from '../../../../Elements/Typography/Typography';
+import { Trans } from '@lingui/react';
+import { x } from '@xstyled/styled-components';
+import isEmpty from 'lodash/isEmpty';
+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) {
+                    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)));
+                })) : (_jsx(Trans, { id: "dataGrid.noPresets.title", message: "No presets available" })) }), _jsx(x.input, { type: "file", accept: ".json", onChange: handleImportPresets, ref: fileInputRef, display: "none" }), _jsxs(x.div, { display: "flex", mt: "34px", gap: "12px", justifyContent: "space-between", children: [_jsxs(x.div, { display: "flex", gap: "12px", children: [hasPresets && (_jsx(Button, { onClick: handleExportPresets, type: "button", appearance: "secondary", children: _jsx(Trans, { id: "dataGrid.exportPreset.title", message: "Export presets" }) })), _jsx(Button, { onClick: handleImportButtonClick, type: "button", appearance: "secondary", children: _jsx(Trans, { id: "dataGrid.importPreset.title", message: "Import presets" }) })] }), _jsx(Button, { type: "button", onClick: onOpenCreatePresetModal, disabled: isEmpty(filters), children: _jsx(Trans, { id: "dataGrid.createNewPreset.title", message: "Create new preset" }) })] })] }));
+};

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

@@ -0,0 +1,19 @@
+import { ChangeEvent } from 'react';
+import { Filtering } from '../types';
+type Props = {
+    gridName?: string;
+    filters?: Filtering;
+    onClosePresetsModal: () => void;
+    setSelectedPresetName: (value: string) => void;
+    setGridPresets: (data: Record<string, Filtering>) => void;
+};
+type HookType = (props: Props) => {
+    isCreatePresetModalOpen: boolean;
+    onOpenCreatePresetModal: () => void;
+    handleCloseCreatePresetModal: () => void;
+    presetName: string;
+    handleChangePresetName: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleCreatePreset: () => void;
+};
+export declare const useCreatePreset: HookType;
+export {};

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

@@ -0,0 +1,52 @@
+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 { useCallback, useState } from 'react';
+import { useModal } from '../../Modal/hooks/useModal';
+import { presetsLocalStorageKey } from '../utils/constants';
+import isEmpty from 'lodash/isEmpty';
+import { useEvent } from './useEvent';
+export var useCreatePreset = function (_a) {
+    var gridName = _a.gridName, filters = _a.filters, onClosePresetsModal = _a.onClosePresetsModal, setSelectedPresetName = _a.setSelectedPresetName, setGridPresets = _a.setGridPresets;
+    var _b = useModal(), isCreatePresetModalOpen = _b.isOpen, onOpenCreatePresetModal = _b.onOpen, onCloseCreatePresetModal = _b.onClose;
+    var _c = useState(''), presetName = _c[0], setPresetName = _c[1];
+    var handleChangePresetName = useCallback(function (event) {
+        setPresetName(event.target.value);
+    }, []);
+    var handleCloseCreatePresetModal = useCallback(function () {
+        setPresetName('');
+        onCloseCreatePresetModal();
+    }, []);
+    var handleCreatePreset = useEvent(function () {
+        var _a;
+        var _b;
+        setPresetName('');
+        onCloseCreatePresetModal();
+        onClosePresetsModal();
+        if (isEmpty(filters) || !gridName)
+            return;
+        var presetsAsString = localStorage.getItem(presetsLocalStorageKey);
+        var presets = presetsAsString ? JSON.parse(presetsAsString) : {};
+        var updatedPresets = __assign({}, presets);
+        updatedPresets[gridName] = __assign(__assign({}, ((_b = updatedPresets[gridName]) !== null && _b !== void 0 ? _b : {})), (_a = {}, _a[presetName] = filters, _a));
+        setGridPresets(updatedPresets[gridName]);
+        setSelectedPresetName(presetName);
+        localStorage.setItem(presetsLocalStorageKey, JSON.stringify(updatedPresets));
+    });
+    return {
+        isCreatePresetModalOpen: isCreatePresetModalOpen,
+        onOpenCreatePresetModal: onOpenCreatePresetModal,
+        handleCloseCreatePresetModal: handleCloseCreatePresetModal,
+        presetName: presetName,
+        handleChangePresetName: handleChangePresetName,
+        handleCreatePreset: handleCreatePreset
+    };
+};

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

@@ -0,0 +1,17 @@
+import { MouseEvent } from 'react';
+import { Filtering } from '../types';
+type Props = {
+    gridName?: string;
+    selectedPresetName: string;
+    setGridPresets: (data: Record<string, Filtering>) => void;
+    setSelectedPresetName: (value: string) => void;
+};
+type HookType = (props: Props) => {
+    handleOpenDeletePresetModal: (presetName: string) => (e: MouseEvent) => void;
+    isDeletePresetModalOpen: boolean;
+    handleDeletePreset: () => void;
+    onCloseDeletePresetModal: () => void;
+    presetNameToDelete?: string;
+};
+export declare const useDeletePreset: HookType;
+export {};

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

@@ -0,0 +1,45 @@
+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 { useCallback } from 'react';
+import { useModal } from '../../Modal/hooks/useModal';
+import { presetsLocalStorageKey } from '../utils/constants';
+export var useDeletePreset = function (_a) {
+    var selectedPresetName = _a.selectedPresetName, gridName = _a.gridName, setGridPresets = _a.setGridPresets, setSelectedPresetName = _a.setSelectedPresetName;
+    var _b = useModal(), isDeletePresetModalOpen = _b.isOpen, onOpenDeletePresetModal = _b.onOpen, onCloseDeletePresetModal = _b.onClose, presetNameToDelete = _b.data;
+    var handleOpenDeletePresetModal = useCallback(function (presetName) { return function (e) {
+        if (!presetName)
+            return;
+        e.stopPropagation();
+        onOpenDeletePresetModal(presetName);
+    }; }, [selectedPresetName]);
+    var handleDeletePreset = useCallback(function () {
+        if (!gridName || !presetNameToDelete)
+            return;
+        var presetsAsString = localStorage.getItem(presetsLocalStorageKey);
+        var presets = presetsAsString ? JSON.parse(presetsAsString) : {};
+        var updatedPresets = __assign({}, presets);
+        delete updatedPresets[gridName][presetNameToDelete];
+        setGridPresets(updatedPresets[gridName]);
+        localStorage.setItem(presetsLocalStorageKey, JSON.stringify(updatedPresets));
+        if (selectedPresetName === presetNameToDelete) {
+            setSelectedPresetName('');
+        }
+        onCloseDeletePresetModal();
+    }, [gridName, presetNameToDelete]);
+    return {
+        handleOpenDeletePresetModal: handleOpenDeletePresetModal,
+        isDeletePresetModalOpen: isDeletePresetModalOpen,
+        handleDeletePreset: handleDeletePreset,
+        onCloseDeletePresetModal: onCloseDeletePresetModal,
+        presetNameToDelete: presetNameToDelete
+    };
+};

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

@@ -0,0 +1,13 @@
+import { ChangeEvent, RefObject } from 'react';
+type FileHandlersProps = {
+    gridName?: string;
+    setGridPresets: (data: Record<string, any>) => void;
+};
+type HookType = (props: FileHandlersProps) => {
+    handleExportPresets: () => void;
+    handleImportPresets: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleImportButtonClick: () => void;
+    fileInputRef: RefObject<HTMLInputElement>;
+};
+export declare const usePresetFileHandlers: HookType;
+export {};