@mailstep/design-system 0.6.91-beta.0.0 → 0.6.91-beta.jja.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.91-beta.0.0",
+  "version": "0.6.91-beta.jja.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -62,7 +62,6 @@
     "babel-loader": "^9.1.3",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-named-exports-order": "^0.0.2",
-    "chromatic": "^11.3.5",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-standard-with-typescript": "^34.0.1",

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -20,28 +20,29 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } 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 { GridModals } from './components/GridModals';
+import ManageColumnForm from './components/ManageColumnForm';
 import TablePagination from './components/TablePagination';
 import useEditReadAsColumn from './hooks/useEditReadAsColumn';
 import useGetGridHeight from './hooks/useGetGridHeight';
 import useManageColumn from './hooks/useManageColumn';
-import { usePresetState } from './hooks/usePresetsState';
+import { Trans } from '@lingui/react';
 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, 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 _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 gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
-    var _e = useState(false), displayManageColumnButton = _e[0], setDisplayManageColumnButton = _e[1];
-    var _f = useGetGridHeight(), gridHeight = _f.gridHeight, gridRef = _f.gridRef, paginationRef = _f.paginationRef;
+    var _d = useState(false), displayManageColumnButton = _d[0], setDisplayManageColumnButton = _d[1];
+    var _e = useGetGridHeight(), gridHeight = _e.gridHeight, gridRef = _e.gridRef, paginationRef = _e.paginationRef;
     useEffect(function () {
         var _a;
         if (!queryRowsParam && gridHeight && gridHeight > 0) {
@@ -55,14 +56,13 @@ var CommonGridContainer = function (props) {
     var modifiedPassDownProps = useEditReadAsColumn(passDownProps);
     var filters = useMemo(function () { return getFilters(optimizeFilters); }, [optimizeFilters]);
     var columns = modifiedPassDownProps.columnsDefinitions;
-    var _g = useModal(), openManageColumnForm = _g.onOpen, manageColumnFormVisible = _g.isOpen, onClose = _g.onClose;
-    var _h = useManageColumn({
+    var _f = useModal(), openManageColumnForm = _f.onOpen, manageColumnFormVisible = _f.isOpen, onClose = _f.onClose;
+    var _g = useManageColumn({
         columns: columns,
         gridActions: gridActions,
         gridSelectors: gridSelectors,
         onClose: onClose
-    }), 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 })] }));
+    }), 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) }) }))] }));
 };
 export default CommonGridContainer;

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

@@ -23,13 +23,12 @@ 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,10 +11,6 @@ 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, onOpenPresetsModal, gridName, selectedPresetName, withPresets }: Props) => JSX.Element;
+declare const ControlButtons: ({ extraControlButtons, gridActions, gridSelectors, quickFilter, displayColumnsDefinitions, filters, hideControlButtons, displayManageColumnButton, openManageColumnForm, setDisplayManageColumnButton }: Props) => JSX.Element;
 export default ControlButtons;

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

@@ -1,21 +1,8 @@
-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';
@@ -25,7 +12,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, onOpenPresetsModal = _a.onOpenPresetsModal, gridName = _a.gridName, selectedPresetName = _a.selectedPresetName, withPresets = _a.withPresets;
+    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 _c = useQuickFilter({
         gridActions: gridActions,
         gridSelectors: gridSelectors,
@@ -37,10 +24,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: [_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" }) }) }))] })] }));
+    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" }) }) }))] })] }));
 };
 export default ControlButtons;

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

@@ -8,5 +8,5 @@ import { th } from '@xstyled/system';
 export var ControlButtonsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: sticky;\n  justify-content: space-between;\n  flex: 1;\n  left: 20px;\n"], ["\n  display: flex;\n  position: sticky;\n  justify-content: space-between;\n  flex: 1;\n  left: 20px;\n"])));
 export var Left = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin-right: 10px;\n"], ["\n  display: flex;\n  margin-right: 10px;\n"])));
 export var Right = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-export var StyledColumnButton = styled(Button)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: sticky;\n  right: 20px;\n  > span > svg {\n    stroke: ", ";\n    width: 18px;\n    height: 18px;\n  }\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"], ["\n  position: sticky;\n  right: 20px;\n  > span > svg {\n    stroke: ", ";\n    width: 18px;\n    height: 18px;\n  }\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"])), th('colors.blue2'));
+export var StyledColumnButton = styled(Button)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: sticky;\n  right: 20px;\n  background-color: white;\n  > span > svg {\n    stroke: ", ";\n    width: 18px;\n    height: 18px;\n  }\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"], ["\n  position: sticky;\n  right: 20px;\n  background-color: white;\n  > span > svg {\n    stroke: ", ";\n    width: 18px;\n    height: 18px;\n  }\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"])), th('colors.blue2'));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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 { Cell } from './Table';
+import { getGroupClassNames, getStickyCollClassNames } from '../utils';
 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,14 +29,12 @@ 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
-    // 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 style = React.useMemo(function () { return (__assign({}, draggableProps === null || draggableProps === void 0 ? void 0 : draggableProps.style)); }, [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, 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 }))] })));
+    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 }))] })));
 };
 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 { getActionCellSizeProps, getCellSizeProps, getSortName } from '../utils';
-import HeadCell from './HeadCell';
+import { DragDropContext, Droppable, Draggable, } from 'react-beautiful-dnd';
 import { Row, Cell } from './Table';
+import HeadCell from './HeadCell';
+import { getActionCellSizeProps, getCellSizeProps, getSortName } from '../utils';
 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, 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
+    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
                             .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 { DropResult } from 'react-beautiful-dnd';
 import { ColumnConfig, CommonGridProps } from '../../types';
+import { DropResult } from 'react-beautiful-dnd';
 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 { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
-import { Input } from '../../../../Forms/Input/Input';
+import { x } from '@xstyled/styled-components';
 import { ActionRow } from './components/ActionRow';
+import { Input } from '../../../../Forms/Input/Input';
 import { i18n } from '@lingui/core';
-import { x } from '@xstyled/styled-components';
+import { DragDropContext, Draggable, Droppable, } from 'react-beautiful-dnd';
 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", 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 (_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 (_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/store/index.d.ts

@@ -1,4 +1,4 @@
-import { FilterProps, SortingValueType, InitProps, GridState, GridSelectorsType, ColumnConfig, Filtering } from '../types';
+import { FilterProps, SortingValueType, InitProps, GridState, GridSelectorsType, ColumnConfig } from '../types';
 type DefaultRootState = {};
 export type MultiState = {
     [key: string]: GridState;
@@ -16,7 +16,6 @@ export declare const actionTypes: {
     setRowsPerPage: string;
     resetFilters: string;
     addFilter: string;
-    setFilters: string;
     addSorting: string;
     clearSettings: string;
     resetGrid: string;
@@ -41,7 +40,6 @@ export declare const createActions: (gridName: string) => {
     setRowsPerPage: (rowsPerPage: number) => Action;
     resetFilters: () => Action;
     addFilter: (column: string, value: any, filterProps: FilterProps) => Action;
-    setFilters: (filters: Filtering) => Action;
     addSorting: (column: string, direction: SortingValueType) => Action;
     clearSettings: () => Action;
 };

package/ui/Blocks/CommonGrid/store/index.js

@@ -10,9 +10,9 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import produce from 'immer';
-import { createSelector } from 'reselect';
 import getOr from 'lodash/fp/getOr';
 import migrateState from './migrateState';
+import { createSelector } from 'reselect';
 export var initialState = {
     page: 1,
     rowsPerPage: 10,
@@ -20,13 +20,13 @@ export var initialState = {
     isConfigFormOpen: false,
     uxState: {
         selectedRow: null,
-        checkedRows: {}
+        checkedRows: {},
     },
     columnConfig: {},
     filter: {},
     columnsWidth: {},
     columnsOrder: [],
-    defaultSorting: []
+    defaultSorting: [],
 };
 export var actionPrefix = '@store/CommonGrid';
 export var actionTypes = {
@@ -40,12 +40,11 @@ export var actionTypes = {
     setRowsPerPage: "".concat(actionPrefix, "/setRowsPerPage"),
     resetFilters: "".concat(actionPrefix, "/resetFilters"),
     addFilter: "".concat(actionPrefix, "/addFilter"),
-    setFilters: "".concat(actionPrefix, "/setFilters"),
     addSorting: "".concat(actionPrefix, "/addSorting"),
     clearSettings: "".concat(actionPrefix, "/clearSettings"),
     resetGrid: "".concat(actionPrefix, "/resetGrid"),
     setColumnWidth: "".concat(actionPrefix, "/setColumnWidth"),
-    setColumnsOrder: "".concat(actionPrefix, "/setColumnsOrder")
+    setColumnsOrder: "".concat(actionPrefix, "/setColumnsOrder"),
 };
 var migrationChecked = false;
 export default (function (state, action) {
@@ -65,81 +64,81 @@ export default (function (state, action) {
             // if this grid is not yet in store, initialize
             draft[gridName] = __assign({}, initialState);
         }
-        switch (action.type) {
-            case actionTypes.init:
-                var defaultSorting = action.initProps.defaultSorting;
-                draft[gridName].page = 1;
-                if (defaultSorting) {
-                    draft[gridName].defaultSorting = defaultSorting;
-                    draft[gridName].sorting = ((_c = draft[gridName].sorting) === null || _c === void 0 ? void 0 : _c.length) ? draft[gridName].sorting : defaultSorting;
-                }
-                break;
-            case actionTypes.clearUxState:
-                draft[gridName].uxState = initialState.uxState;
-                break;
-            case actionTypes.handleUxChange:
-                draft[gridName].uxState = __assign(__assign({}, draft[gridName].uxState), (_a = {}, _a[action.uxKey] = action.uxValue, _a));
-                break;
-            case actionTypes.openConfigForm:
-                draft[gridName].isConfigFormOpen = true;
-                break;
-            case actionTypes.closeConfigForm:
-                draft[gridName].isConfigFormOpen = false;
-                break;
-            case actionTypes.setColumnConfig:
-                draft[gridName].columnConfig = action.columnConfig;
-                draft[gridName].isConfigFormOpen = false;
-                break;
-            case actionTypes.resetFilters:
-                draft[gridName].filter = action.filters;
-                break;
-            case actionTypes.addFilter:
-                var column = action.column, value = action.value, filterProps = action.filterProps;
-                var currentFilterState = (_b = {}, _b[column] = { value: value, filterProps: filterProps }, _b);
-                draft[gridName].filter = __assign(__assign({}, draft[gridName].filter), currentFilterState);
-                draft[gridName].page = 1;
-                break;
-            case actionTypes.setFilters:
-                draft[gridName].filter = action.filters;
-                break;
-            case actionTypes.addSorting:
-                var direction = action.direction;
-                var sortingColumn = action.column;
-                if (((_f = (_e = (_d = draft[gridName]) === null || _d === void 0 ? void 0 : _d.defaultSorting) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.column) === sortingColumn && direction === null) {
-                    direction = 'asc';
-                }
-                var sorting = [{ column: sortingColumn, direction: direction }];
-                if (direction === null) {
-                    sorting = ((_g = draft[gridName]) === null || _g === void 0 ? void 0 : _g.defaultSorting) || [];
-                }
-                draft[gridName].sorting = sorting;
-                break;
-            case actionTypes.clearSettings:
-                draft[gridName].page = initialState.page;
-                draft[gridName].filter = initialState.filter;
-                draft[gridName].uxState = initialState.uxState;
-                break;
-            case actionTypes.setPage:
-                draft[gridName].page = action.page;
-                break;
-            case actionTypes.setRowsPerPage:
-                draft[gridName].rowsPerPage = action.rowsPerPage;
-                break;
-            case actionTypes.resetGrid:
-                draft[gridName] = __assign(__assign({}, initialState), { rowsPerPage: draft[gridName].rowsPerPage });
-                break;
-            case actionTypes.setColumnWidth:
-                if (action.columnsWidth === null) {
-                    draft[gridName].columnsWidth = initialState.columnsWidth;
-                }
-                else {
-                    draft[gridName].columnsWidth = __assign(__assign({}, draft[gridName].columnsWidth), action.columnsWidth);
-                }
-                draft[gridName].columnsWidthVariant = action.columnLayout;
-                break;
-            case actionTypes.setColumnsOrder:
-                draft[gridName].columnsOrder = action.columnsOrder;
-                break;
+        if (action.type === actionTypes.init) {
+            var defaultSorting = action.initProps.defaultSorting;
+            draft[gridName].page = 1;
+            if (defaultSorting) {
+                draft[gridName].defaultSorting = defaultSorting;
+                draft[gridName].sorting = ((_c = draft[gridName].sorting) === null || _c === void 0 ? void 0 : _c.length) ? draft[gridName].sorting : defaultSorting;
+            }
+        }
+        else if (action.type === actionTypes.clearUxState) {
+            draft[gridName].uxState = initialState.uxState;
+        }
+        else if (action.type === actionTypes.handleUxChange) {
+            // for a specific row id (action.id) append uxState from action
+            draft[gridName].uxState = __assign(__assign({}, draft[gridName].uxState), (_a = {}, _a[action.uxKey] = action.uxValue, _a));
+        }
+        else if (action.type === actionTypes.openConfigForm) {
+            draft[gridName].isConfigFormOpen = true;
+        }
+        else if (action.type === actionTypes.closeConfigForm) {
+            draft[gridName].isConfigFormOpen = false;
+        }
+        else if (action.type === actionTypes.setColumnConfig) {
+            draft[gridName].columnConfig = action.columnConfig;
+            draft[gridName].isConfigFormOpen = false;
+        }
+        else if (action.type === actionTypes.resetFilters) {
+            draft[gridName].filter = {};
+        }
+        else if (action.type === actionTypes.addFilter) {
+            // append desired filter for specific column to existing filters
+            var column = action.column, value = action.value, filterProps = action.filterProps;
+            var currentFilterState = (_b = {}, _b[column] = { value: value, filterProps: filterProps }, _b);
+            draft[gridName].filter = __assign(__assign({}, draft[gridName].filter), currentFilterState);
+            draft[gridName].page = 1;
+        }
+        else if (action.type === actionTypes.addSorting) {
+            // append desired sorting for specific column to existing sortings
+            var direction = action.direction;
+            var column = action.column;
+            if (((_f = (_e = (_d = draft[gridName]) === null || _d === void 0 ? void 0 : _d.defaultSorting) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.column) === column && direction === null) {
+                // default column cannot unset itself. it would be stuck on 'desc'
+                direction = 'asc';
+            }
+            var sorting = [{ column: column, direction: direction }];
+            if (direction === null) {
+                sorting = ((_g = draft[gridName]) === null || _g === void 0 ? void 0 : _g.defaultSorting) || [];
+            }
+            draft[gridName].sorting = sorting;
+        }
+        else if (action.type === actionTypes.clearSettings) {
+            // clear grid for reuse
+            draft[gridName].page = initialState.page;
+            draft[gridName].filter = initialState.filter;
+            draft[gridName].uxState = initialState.uxState;
+        }
+        else if (action.type === actionTypes.setPage) {
+            draft[gridName].page = action.page;
+        }
+        else if (action.type === actionTypes.setRowsPerPage) {
+            draft[gridName].rowsPerPage = action.rowsPerPage;
+        }
+        else if (action.type === actionTypes.resetGrid) {
+            draft[gridName] = __assign(__assign({}, initialState), { rowsPerPage: draft[gridName].rowsPerPage });
+        }
+        else if (action.type === actionTypes.setColumnWidth) {
+            if (action.columnsWidth === null) {
+                draft[gridName].columnsWidth = initialState.columnsWidth;
+            }
+            else {
+                draft[gridName].columnsWidth = __assign(__assign({}, draft[gridName].columnsWidth), action.columnsWidth);
+            }
+            draft[gridName].columnsWidthVariant = action.columnLayout;
+        }
+        else if (action.type === actionTypes.setColumnsOrder) {
+            draft[gridName].columnsOrder = action.columnsOrder;
         }
         return draft;
     });
@@ -151,7 +150,7 @@ export var createActions = function (gridName) { return ({
         gridName: gridName,
         type: actionTypes.handleUxChange,
         uxKey: uxKey,
-        uxValue: uxValue
+        uxValue: uxValue,
     }); },
     openConfigForm: function () { return ({ gridName: gridName, type: actionTypes.openConfigForm }); },
     closeConfigForm: function () { return ({ gridName: gridName, type: actionTypes.closeConfigForm }); },
@@ -161,13 +160,13 @@ export var createActions = function (gridName) { return ({
         gridName: gridName,
         type: actionTypes.setColumnWidth,
         columnsWidth: columnsWidth,
-        columnLayout: columnLayout
+        columnLayout: columnLayout,
     }); },
     resetGrid: function () { return ({ gridName: gridName, type: actionTypes.resetGrid }); },
     setColumnsOrder: function (columnsOrder) { return ({
         gridName: gridName,
         type: actionTypes.setColumnsOrder,
-        columnsOrder: columnsOrder
+        columnsOrder: columnsOrder,
     }); },
     setRowsPerPage: function (rowsPerPage) { return ({ gridName: gridName, type: actionTypes.setRowsPerPage, rowsPerPage: rowsPerPage }); },
     resetFilters: function () { return ({ gridName: gridName, type: actionTypes.resetFilters }); },
@@ -176,16 +175,15 @@ export var createActions = function (gridName) { return ({
         type: actionTypes.addFilter,
         column: column,
         value: value,
-        filterProps: filterProps
+        filterProps: filterProps,
     }); },
-    setFilters: function (filters) { return ({ gridName: gridName, type: actionTypes.setFilters, filters: filters }); },
     addSorting: function (column, direction) { return ({
         gridName: gridName,
         type: actionTypes.addSorting,
         column: column,
-        direction: direction
+        direction: direction,
     }); },
-    clearSettings: function () { return ({ gridName: gridName, type: actionTypes.clearSettings }); }
+    clearSettings: function () { return ({ gridName: gridName, type: actionTypes.clearSettings }); },
 }); };
 export var createSelectors = function (gridName) { return ({
     getUxState: function (state) {
@@ -211,7 +209,9 @@ export var createSelectors = function (gridName) { return ({
     getColumnsWidthVariant: function (state) {
         return getOr(undefined, "commonGrid.".concat(gridName, ".columnsWidthVariant"), state);
     },
-    getColumnsOrder: function (state) { return getOr([], "commonGrid.".concat(gridName, ".columnsOrder"), state); }
+    getColumnsOrder: function (state) {
+        return getOr([], "commonGrid.".concat(gridName, ".columnsOrder"), state);
+    },
 }); };
 export var createFullSelector = function (gridName) {
     var selectors = createSelectors(gridName);
@@ -225,6 +225,6 @@ export var createFullSelector = function (gridName) {
         sorting: sorting,
         columnsWidth: columnsWidth,
         columnsWidthVariant: columnsWidthVariant,
-        columnsOrder: columnsOrder
+        columnsOrder: columnsOrder,
     }); });
 };

package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js

@@ -41,7 +41,7 @@ export default {
     title: 'Blocks/CommonGrid',
     decorators: [withRedux]
 };
-export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, quickFilter: "productSku", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
+export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, quickFilter: "productSku", extraControlButtons: extraControlButtons, comparators: comparators })] })); };
 ComplexWithPaginationAndRedux.story = {
     name: 'Complex, with pagination and redux'
 };