@mailstep/design-system 0.8.26-beta.2 → 0.8.26-beta.4

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

@@ -0,0 +1,83 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { useCallback, useEffect } from "react";
+import isEqual from "lodash/isEqual";
+var useSelectPreset = function useSelectPreset(param) {
+    var gridName = param.gridName, gridActions = param.gridActions, gridSelectors = param.gridSelectors, setSelectedPresetName = param.setSelectedPresetName, onClosePresetsModal = param.onClosePresetsModal;
+    var gridPresets = gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.presets;
+    var filters = gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.filter;
+    var handleSelectPreset = useCallback(function(presetName, filters2) {
+        return function() {
+            var _gridActions_setFilters;
+            setSelectedPresetName(presetName);
+            (_gridActions_setFilters = gridActions.setFilters) === null || _gridActions_setFilters === void 0 ? void 0 : _gridActions_setFilters.call(gridActions, filters2);
+            onClosePresetsModal();
+        };
+    }, [
+        gridActions
+    ]);
+    useEffect(function() {
+        var _Object_entries;
+        if (!gridName || !gridPresets) return;
+        var activePreset = (_Object_entries = Object.entries(gridPresets)) === null || _Object_entries === void 0 ? void 0 : _Object_entries.find(function(param) {
+            var _param = _sliced_to_array(param, 2), presetName = _param[0], presetFilters = _param[1];
+            return isEqual(presetFilters, filters);
+        });
+        if (activePreset) {
+            setSelectedPresetName(activePreset[0]);
+        } else {
+            setSelectedPresetName("");
+        }
+    }, [
+        filters,
+        gridPresets
+    ]);
+    return {
+        handleSelectPreset: handleSelectPreset
+    };
+};
+export { useSelectPreset };

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

@@ -0,0 +1,30 @@
+import { useMemo, useCallback } from "react";
+var useToggleAllCheckbox = function useToggleAllCheckbox(rowsData, uxState, handleUxChange) {
+    var allChecked = useMemo(function() {
+        return rowsData && (rowsData || []).length >= 1 && rowsData.every(function(row) {
+            var _uxState_checkedRows;
+            return uxState === null || uxState === void 0 ? void 0 : (_uxState_checkedRows = uxState.checkedRows) === null || _uxState_checkedRows === void 0 ? void 0 : _uxState_checkedRows[row.id];
+        });
+    }, [
+        rowsData,
+        uxState === null || uxState === void 0 ? void 0 : uxState.checkedRows
+    ]);
+    var toggleAllHandler = useCallback(function() {
+        var checkedRows = {};
+        if (!allChecked && rowsData) {
+            rowsData.forEach(function(row) {
+                checkedRows[row.id] = true;
+            });
+        }
+        handleUxChange === null || handleUxChange === void 0 ? void 0 : handleUxChange("checkedRows", checkedRows);
+    }, [
+        handleUxChange,
+        rowsData,
+        allChecked
+    ]);
+    return [
+        !!allChecked,
+        toggleAllHandler
+    ];
+};
+export { useToggleAllCheckbox };

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

@@ -0,0 +1,65 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import React from "react";
+var useUxReset = function useUxReset(rowsData, uxState, clearUxState) {
+    var _React_useState = _sliced_to_array(React.useState("|"), 2), previous = _React_useState[0], setPrevious = _React_useState[1];
+    React.useEffect(function() {
+        var ids = (rowsData || []).map(function(row) {
+            return row.id;
+        }).join("|");
+        if (ids !== previous) {
+            if (clearUxState && (uxState.checkedRows && Object.keys(uxState.checkedRows).length || uxState.selectedRow)) {
+                clearUxState();
+            }
+        }
+        setPrevious(ids);
+    }, [
+        rowsData
+    ]);
+};
+var useUxReset_default = useUxReset;
+export { useUxReset_default as default };

package/ui/Blocks/CommonGrid/index.js

@@ -0,0 +1,10 @@
+import CommonGrid from "./CommonGridContainer";
+import withReduxActions from "./HoC/withReduxActions";
+import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from "./store";
+import useFloatingButton from "./hooks/useFloatingButton";
+import * as Types from "./types";
+export * from "./components/gridCells";
+import { useAddFilter } from "./hooks/useAddFilter";
+import { useEvent } from "./hooks/useEvent";
+var CommonGrid_default = CommonGrid;
+export { Types, actionPrefix, actionTypes, createActions, createFullSelector, createSelectors, CommonGrid_default as default, reducer, useAddFilter, useEvent, useFloatingButton, withReduxActions };

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

@@ -0,0 +1,437 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import produce from "immer";
+import { createSelector } from "reselect";
+import getOr from "lodash/fp/getOr";
+import omit from "lodash/omit";
+import migrateState from "./migrateState";
+var initialState = {
+    page: 1,
+    presets: {},
+    sorting: [],
+    isConfigFormOpen: false,
+    uxState: {
+        selectedRow: null,
+        checkedRows: {}
+    },
+    columnConfig: {},
+    filter: {},
+    columnsWidth: {},
+    columnsOrder: [],
+    defaultSorting: []
+};
+var actionPrefix = "@store/CommonGrid";
+var actionTypes = {
+    init: "".concat(actionPrefix, "/init"),
+    clearUxState: "".concat(actionPrefix, "/clearUxState"),
+    handleUxChange: "".concat(actionPrefix, "/handleUxChange"),
+    openConfigForm: "".concat(actionPrefix, "/openConfigForm"),
+    closeConfigForm: "".concat(actionPrefix, "/closeConfigForm"),
+    setColumnConfig: "".concat(actionPrefix, "/setColumnConfig"),
+    setPage: "".concat(actionPrefix, "/setPage"),
+    setPresets: "".concat(actionPrefix, "/setPresets"),
+    createPreset: "".concat(actionPrefix, "/createPreset"),
+    deletePreset: "".concat(actionPrefix, "/deletePreset"),
+    setRowsPerPage: "".concat(actionPrefix, "/setRowsPerPage"),
+    resetFilters: "".concat(actionPrefix, "/resetFilters"),
+    addFilter: "".concat(actionPrefix, "/addFilter"),
+    setFilters: "".concat(actionPrefix, "/setFilters"),
+    addSorting: "".concat(actionPrefix, "/addSorting"),
+    resetSorting: "".concat(actionPrefix, "/resetSorting"),
+    clearSettings: "".concat(actionPrefix, "/clearSettings"),
+    resetGrid: "".concat(actionPrefix, "/resetGrid"),
+    setColumnWidth: "".concat(actionPrefix, "/setColumnWidth"),
+    setColumnsOrder: "".concat(actionPrefix, "/setColumnsOrder")
+};
+var migrationChecked = false;
+var store_default = function store_default() {
+    var state = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, action = arguments.length > 1 ? arguments[1] : void 0;
+    return produce(state, function(draft) {
+        if (!migrationChecked && state && Object.keys(state).length > 0) {
+            draft = migrateState(draft);
+            migrationChecked = true;
+        }
+        var gridName = action.gridName;
+        if (!gridName) return draft;
+        if (!draft[gridName]) {
+            draft[gridName] = _object_spread({}, initialState);
+        }
+        switch(action.type){
+            case actionTypes.init:
+                var defaultSorting = action.initProps.defaultSorting;
+                draft[gridName].page = 1;
+                if (defaultSorting) {
+                    var _draft_gridName_sorting;
+                    draft[gridName].defaultSorting = defaultSorting;
+                    draft[gridName].sorting = ((_draft_gridName_sorting = draft[gridName].sorting) === null || _draft_gridName_sorting === void 0 ? void 0 : _draft_gridName_sorting.length) ? draft[gridName].sorting : defaultSorting;
+                }
+                break;
+            case actionTypes.clearUxState:
+                draft[gridName].uxState = initialState.uxState;
+                break;
+            case actionTypes.handleUxChange:
+                draft[gridName].uxState = _object_spread_props(_object_spread({}, draft[gridName].uxState), _define_property({}, action.uxKey, action.uxValue));
+                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, others = action.others;
+                var currentFilterState = _define_property({}, column, {
+                    value: value,
+                    filterProps: filterProps,
+                    others: others
+                });
+                draft[gridName].filter = _object_spread({}, draft[gridName].filter, currentFilterState);
+                draft[gridName].page = 1;
+                break;
+            case actionTypes.setFilters:
+                draft[gridName].filter = action.filters;
+                break;
+            case actionTypes.addSorting:
+                var _draft_gridName_defaultSorting_, _draft_gridName_defaultSorting, _draft_gridName;
+                var direction = action.direction;
+                var sortingColumn = action.column;
+                if (((_draft_gridName = draft[gridName]) === null || _draft_gridName === void 0 ? void 0 : (_draft_gridName_defaultSorting = _draft_gridName.defaultSorting) === null || _draft_gridName_defaultSorting === void 0 ? void 0 : (_draft_gridName_defaultSorting_ = _draft_gridName_defaultSorting[0]) === null || _draft_gridName_defaultSorting_ === void 0 ? void 0 : _draft_gridName_defaultSorting_.column) === sortingColumn && direction === null) {
+                    direction = "asc";
+                }
+                var sorting = [
+                    {
+                        column: sortingColumn,
+                        direction: direction
+                    }
+                ];
+                if (direction === null) {
+                    var _draft_gridName1;
+                    sorting = ((_draft_gridName1 = draft[gridName]) === null || _draft_gridName1 === void 0 ? void 0 : _draft_gridName1.defaultSorting) || [];
+                }
+                draft[gridName].sorting = sorting;
+                break;
+            case actionTypes.resetSorting:
+                var _draft_gridName_defaultSorting1;
+                draft[gridName].sorting = ((_draft_gridName_defaultSorting1 = draft[gridName].defaultSorting) === null || _draft_gridName_defaultSorting1 === void 0 ? void 0 : _draft_gridName_defaultSorting1.length) ? draft[gridName].defaultSorting : initialState.sorting;
+                break;
+            case actionTypes.clearSettings:
+                draft[gridName].page = initialState.page;
+                draft[gridName].filter = initialState.filter;
+                draft[gridName].uxState = initialState.uxState;
+                draft[gridName].sorting = [];
+                break;
+            case actionTypes.setPage:
+                draft[gridName].page = action.page;
+                break;
+            case actionTypes.setPresets:
+                draft[gridName].presets = action.presets;
+                break;
+            case actionTypes.createPreset:
+                draft[gridName].presets = _object_spread_props(_object_spread({}, draft[gridName].presets || {}), _define_property({}, action.presetName, action.filters));
+                break;
+            case actionTypes.deletePreset:
+                draft[gridName].presets = omit(draft[gridName].presets, action.presetName);
+                break;
+            case actionTypes.setRowsPerPage:
+                draft[gridName].rowsPerPage = action.rowsPerPage;
+                break;
+            case actionTypes.resetGrid:
+                draft[gridName] = _object_spread_props(_object_spread({}, initialState), {
+                    rowsPerPage: draft[gridName].rowsPerPage
+                });
+                break;
+            case actionTypes.setColumnWidth:
+                if (action.columnsWidth === null) {
+                    draft[gridName].columnsWidth = initialState.columnsWidth;
+                } else {
+                    draft[gridName].columnsWidth = _object_spread({}, draft[gridName].columnsWidth, action.columnsWidth);
+                }
+                draft[gridName].columnsWidthVariant = action.columnLayout;
+                break;
+            case actionTypes.setColumnsOrder:
+                draft[gridName].columnsOrder = action.columnsOrder;
+                break;
+        }
+        return draft;
+    });
+};
+var createActions = function createActions(gridName) {
+    return {
+        init: function init() {
+            var initProps = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+            return {
+                gridName: gridName,
+                type: actionTypes.init,
+                initProps: initProps
+            };
+        },
+        clearUxState: function clearUxState() {
+            return {
+                gridName: gridName,
+                type: actionTypes.clearUxState
+            };
+        },
+        handleUxChange: function handleUxChange(uxKey, uxValue) {
+            return {
+                gridName: gridName,
+                type: actionTypes.handleUxChange,
+                uxKey: uxKey,
+                uxValue: uxValue
+            };
+        },
+        openConfigForm: function openConfigForm() {
+            return {
+                gridName: gridName,
+                type: actionTypes.openConfigForm
+            };
+        },
+        closeConfigForm: function closeConfigForm() {
+            return {
+                gridName: gridName,
+                type: actionTypes.closeConfigForm
+            };
+        },
+        setColumnConfig: function setColumnConfig(columnConfig) {
+            return {
+                gridName: gridName,
+                type: actionTypes.setColumnConfig,
+                columnConfig: columnConfig
+            };
+        },
+        setPage: function setPage(page) {
+            return {
+                gridName: gridName,
+                type: actionTypes.setPage,
+                page: page
+            };
+        },
+        setPresets: function setPresets(presets) {
+            return {
+                gridName: gridName,
+                type: actionTypes.setPresets,
+                presets: presets
+            };
+        },
+        createPreset: function createPreset(presetName, filters) {
+            return {
+                gridName: gridName,
+                type: actionTypes.createPreset,
+                presetName: presetName,
+                filters: filters
+            };
+        },
+        deletePreset: function deletePreset(presetName) {
+            return {
+                gridName: gridName,
+                type: actionTypes.deletePreset,
+                presetName: presetName
+            };
+        },
+        setColumnWidth: function setColumnWidth(columnsWidth, columnLayout) {
+            return {
+                gridName: gridName,
+                type: actionTypes.setColumnWidth,
+                columnsWidth: columnsWidth,
+                columnLayout: columnLayout
+            };
+        },
+        resetGrid: function resetGrid() {
+            return {
+                gridName: gridName,
+                type: actionTypes.resetGrid
+            };
+        },
+        setColumnsOrder: function setColumnsOrder(columnsOrder) {
+            return {
+                gridName: gridName,
+                type: actionTypes.setColumnsOrder,
+                columnsOrder: columnsOrder
+            };
+        },
+        setRowsPerPage: function setRowsPerPage(rowsPerPage) {
+            return {
+                gridName: gridName,
+                type: actionTypes.setRowsPerPage,
+                rowsPerPage: rowsPerPage
+            };
+        },
+        resetFilters: function resetFilters() {
+            return {
+                gridName: gridName,
+                type: actionTypes.resetFilters
+            };
+        },
+        addFilter: function addFilter(column, value, filterProps, others) {
+            return {
+                gridName: gridName,
+                type: actionTypes.addFilter,
+                column: column,
+                value: value,
+                filterProps: filterProps,
+                others: others
+            };
+        },
+        setFilters: function setFilters(filters) {
+            return {
+                gridName: gridName,
+                type: actionTypes.setFilters,
+                filters: filters
+            };
+        },
+        addSorting: function addSorting(column, direction) {
+            return {
+                gridName: gridName,
+                type: actionTypes.addSorting,
+                column: column,
+                direction: direction
+            };
+        },
+        resetSorting: function resetSorting() {
+            return {
+                gridName: gridName,
+                type: actionTypes.resetSorting
+            };
+        },
+        clearSettings: function clearSettings() {
+            return {
+                gridName: gridName,
+                type: actionTypes.clearSettings
+            };
+        }
+    };
+};
+var createSelectors = function createSelectors(gridName) {
+    return {
+        getUxState: function getUxState(state) {
+            return getOr(initialState.uxState, "commonGrid.".concat(gridName, ".uxState"), state);
+        },
+        isConfigFormOpen: function isConfigFormOpen(state) {
+            return getOr(initialState.isConfigFormOpen, "commonGrid.".concat(gridName, ".isConfigFormOpen"), state);
+        },
+        getColumnConfig: function getColumnConfig(state) {
+            return getOr(initialState.columnConfig, "commonGrid.".concat(gridName, ".columnConfig"), state);
+        },
+        getPage: function getPage(state) {
+            return getOr(initialState.page, "commonGrid.".concat(gridName, ".page"), state);
+        },
+        getPresets: function getPresets(state) {
+            return getOr(initialState.presets, "commonGrid.".concat(gridName, ".presets"), state);
+        },
+        getRowsPerPage: function getRowsPerPage(state) {
+            return getOr(initialState.rowsPerPage, "commonGrid.".concat(gridName, ".rowsPerPage"), state);
+        },
+        getFilter: function getFilter(state) {
+            return getOr(initialState.filter, "commonGrid.".concat(gridName, ".filter"), state);
+        },
+        getSorting: function getSorting(state) {
+            return getOr(initialState.sorting, "commonGrid.".concat(gridName, ".sorting"), state);
+        },
+        getColumnsWidth: function getColumnsWidth(state) {
+            return getOr(null, "commonGrid.".concat(gridName, ".columnsWidth"), state);
+        },
+        getColumnsWidthVariant: function getColumnsWidthVariant(state) {
+            return getOr(void 0, "commonGrid.".concat(gridName, ".columnsWidthVariant"), state);
+        },
+        getColumnsOrder: function getColumnsOrder(state) {
+            return getOr([], "commonGrid.".concat(gridName, ".columnsOrder"), state);
+        }
+    };
+};
+var createFullSelector = function createFullSelector(gridName) {
+    var selectors = createSelectors(gridName);
+    return createSelector(function(state) {
+        return selectors.getUxState(state);
+    }, function(state) {
+        return selectors.isConfigFormOpen(state);
+    }, function(state) {
+        return selectors.getColumnConfig(state);
+    }, function(state) {
+        return selectors.getPage(state);
+    }, function(state) {
+        return selectors.getPresets(state);
+    }, function(state) {
+        return selectors.getRowsPerPage(state);
+    }, function(state) {
+        return selectors.getFilter(state);
+    }, function(state) {
+        return selectors.getSorting(state);
+    }, function(state) {
+        return selectors.getColumnsWidth(state);
+    }, function(state) {
+        return selectors.getColumnsWidthVariant(state);
+    }, function(state) {
+        return selectors.getColumnsOrder(state);
+    }, function(uxState, isConfigFormOpen, columnConfig, page, presets, rowsPerPage, filter, sorting, columnsWidth, columnsWidthVariant, columnsOrder) {
+        return {
+            uxState: uxState,
+            isConfigFormOpen: isConfigFormOpen,
+            columnConfig: columnConfig,
+            page: page,
+            presets: presets,
+            rowsPerPage: rowsPerPage,
+            filter: filter,
+            sorting: sorting,
+            columnsWidth: columnsWidth,
+            columnsWidthVariant: columnsWidthVariant,
+            columnsOrder: columnsOrder
+        };
+    });
+};
+export { actionPrefix, actionTypes, createActions, createFullSelector, createSelectors, store_default as default, initialState };

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

@@ -0,0 +1,13 @@
+var v2 = function v2(draft) {
+    Object.keys(draft).forEach(function(gridName) {
+        if (draft[gridName].columnConfig && Array.isArray(draft[gridName].columnConfig)) {
+            draft[gridName].columnConfig = {};
+        }
+    });
+    return draft;
+};
+var migrateState_default = function migrateState_default(draft) {
+    draft = v2(draft);
+    return draft;
+};
+export { migrateState_default as default };

package/ui/Blocks/CommonGrid/storybook/components/ComplexCell.js

@@ -0,0 +1,23 @@
+import { jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+var ComplexCell = function ComplexCell(props) {
+    var handleActionClick = useCallback(function() {
+        if (props.onRowAction) {
+            var _props_onRowAction;
+            (_props_onRowAction = props.onRowAction(props.rowData.id, "get_invoice", null)) === null || _props_onRowAction === void 0 ? void 0 : _props_onRowAction.catch(function(error) {
+                console.error(error);
+            });
+        }
+    }, [
+        props
+    ]);
+    return /* @__PURE__ */ jsxs("button", {
+        onClick: handleActionClick,
+        children: [
+            " download ",
+            props.rowData.id,
+            " "
+        ]
+    });
+};
+export { ComplexCell };