@mailstep/design-system 0.6.2-beta.3 → 0.6.2-beta.5

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

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,16 +9,11 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createFullSelector = exports.createSelectors = exports.createActions = exports.actionTypes = exports.actionPrefix = exports.initialState = void 0;
-var immer_1 = __importDefault(require("immer"));
-var getOr_1 = __importDefault(require("lodash/fp/getOr"));
-var migrateState_1 = __importDefault(require("./migrateState"));
-var reselect_1 = require("reselect");
-exports.initialState = {
+import produce from 'immer';
+import getOr from 'lodash/fp/getOr';
+import migrateState from './migrateState.js';
+import { createSelector } from 'reselect';
+export var initialState = {
     page: 1,
     rowsPerPage: 10,
     sorting: [],
@@ -34,33 +28,33 @@ exports.initialState = {
     columnsOrder: [],
     defaultSorting: [],
 };
-exports.actionPrefix = '@store/CommonGrid';
-exports.actionTypes = {
-    init: "".concat(exports.actionPrefix, "/init"),
-    clearUxState: "".concat(exports.actionPrefix, "/clearUxState"),
-    handleUxChange: "".concat(exports.actionPrefix, "/handleUxChange"),
-    openConfigForm: "".concat(exports.actionPrefix, "/openConfigForm"),
-    closeConfigForm: "".concat(exports.actionPrefix, "/closeConfigForm"),
-    setColumnConfig: "".concat(exports.actionPrefix, "/setColumnConfig"),
-    setPage: "".concat(exports.actionPrefix, "/setPage"),
-    setRowsPerPage: "".concat(exports.actionPrefix, "/setRowsPerPage"),
-    resetFilters: "".concat(exports.actionPrefix, "/resetFilters"),
-    addFilter: "".concat(exports.actionPrefix, "/addFilter"),
-    addSorting: "".concat(exports.actionPrefix, "/addSorting"),
-    clearSettings: "".concat(exports.actionPrefix, "/clearSettings"),
-    resetGrid: "".concat(exports.actionPrefix, "/resetGrid"),
-    setColumnWidth: "".concat(exports.actionPrefix, "/setColumnWidth"),
-    setColumnsOrder: "".concat(exports.actionPrefix, "/setColumnsOrder"),
+export var actionPrefix = '@store/CommonGrid';
+export 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"),
+    setRowsPerPage: "".concat(actionPrefix, "/setRowsPerPage"),
+    resetFilters: "".concat(actionPrefix, "/resetFilters"),
+    addFilter: "".concat(actionPrefix, "/addFilter"),
+    addSorting: "".concat(actionPrefix, "/addSorting"),
+    clearSettings: "".concat(actionPrefix, "/clearSettings"),
+    resetGrid: "".concat(actionPrefix, "/resetGrid"),
+    setColumnWidth: "".concat(actionPrefix, "/setColumnWidth"),
+    setColumnsOrder: "".concat(actionPrefix, "/setColumnsOrder"),
 };
 var migrationChecked = false;
-exports.default = (function (state, action) {
+export default (function (state, action) {
     if (state === void 0) { state = {}; }
-    return (0, immer_1.default)(state, function (draft) {
+    return produce(state, function (draft) {
         var _a, _b;
         var _c, _d, _e, _f, _g;
         // version migrations
         if (!migrationChecked && state && Object.keys(state).length > 0) {
-            draft = (0, migrateState_1.default)(draft);
+            draft = migrateState(draft);
             migrationChecked = true;
         }
         var gridName = action.gridName;
@@ -68,9 +62,9 @@ exports.default = (function (state, action) {
             return draft; // action does not contains gridName, skip immediatelly
         if (!draft[gridName]) {
             // if this grid is not yet in store, initialize
-            draft[gridName] = __assign({}, exports.initialState);
+            draft[gridName] = __assign({}, initialState);
         }
-        if (action.type === exports.actionTypes.init) {
+        if (action.type === actionTypes.init) {
             var defaultSorting = action.initProps.defaultSorting;
             draft[gridName].page = 1;
             if (defaultSorting) {
@@ -78,34 +72,34 @@ exports.default = (function (state, action) {
                 draft[gridName].sorting = ((_c = draft[gridName].sorting) === null || _c === void 0 ? void 0 : _c.length) ? draft[gridName].sorting : defaultSorting;
             }
         }
-        else if (action.type === exports.actionTypes.clearUxState) {
-            draft[gridName].uxState = exports.initialState.uxState;
+        else if (action.type === actionTypes.clearUxState) {
+            draft[gridName].uxState = initialState.uxState;
         }
-        else if (action.type === exports.actionTypes.handleUxChange) {
+        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 === exports.actionTypes.openConfigForm) {
+        else if (action.type === actionTypes.openConfigForm) {
             draft[gridName].isConfigFormOpen = true;
         }
-        else if (action.type === exports.actionTypes.closeConfigForm) {
+        else if (action.type === actionTypes.closeConfigForm) {
             draft[gridName].isConfigFormOpen = false;
         }
-        else if (action.type === exports.actionTypes.setColumnConfig) {
+        else if (action.type === actionTypes.setColumnConfig) {
             draft[gridName].columnConfig = action.columnConfig;
             draft[gridName].isConfigFormOpen = false;
         }
-        else if (action.type === exports.actionTypes.resetFilters) {
+        else if (action.type === actionTypes.resetFilters) {
             draft[gridName].filter = {};
         }
-        else if (action.type === exports.actionTypes.addFilter) {
+        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 === exports.actionTypes.addSorting) {
+        else if (action.type === actionTypes.addSorting) {
             // append desired sorting for specific column to existing sortings
             var direction = action.direction;
             var column = action.column;
@@ -119,111 +113,109 @@ exports.default = (function (state, action) {
             }
             draft[gridName].sorting = sorting;
         }
-        else if (action.type === exports.actionTypes.clearSettings) {
+        else if (action.type === actionTypes.clearSettings) {
             // clear grid for reuse
-            draft[gridName].page = exports.initialState.page;
-            draft[gridName].filter = exports.initialState.filter;
-            draft[gridName].uxState = exports.initialState.uxState;
+            draft[gridName].page = initialState.page;
+            draft[gridName].filter = initialState.filter;
+            draft[gridName].uxState = initialState.uxState;
         }
-        else if (action.type === exports.actionTypes.setPage) {
+        else if (action.type === actionTypes.setPage) {
             draft[gridName].page = action.page;
         }
-        else if (action.type === exports.actionTypes.setRowsPerPage) {
+        else if (action.type === actionTypes.setRowsPerPage) {
             draft[gridName].rowsPerPage = action.rowsPerPage;
         }
-        else if (action.type === exports.actionTypes.resetGrid) {
-            draft[gridName] = __assign(__assign({}, exports.initialState), { rowsPerPage: draft[gridName].rowsPerPage });
+        else if (action.type === actionTypes.resetGrid) {
+            draft[gridName] = __assign(__assign({}, initialState), { rowsPerPage: draft[gridName].rowsPerPage });
         }
-        else if (action.type === exports.actionTypes.setColumnWidth) {
+        else if (action.type === actionTypes.setColumnWidth) {
             if (action.columnsWidth === null) {
-                draft[gridName].columnsWidth = exports.initialState.columnsWidth;
+                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 === exports.actionTypes.setColumnsOrder) {
+        else if (action.type === actionTypes.setColumnsOrder) {
             draft[gridName].columnsOrder = action.columnsOrder;
         }
         return draft;
     });
 });
-var createActions = function (gridName) { return ({
-    init: function (initProps) { return ({ gridName: gridName, type: exports.actionTypes.init, initProps: initProps }); },
-    clearUxState: function () { return ({ gridName: gridName, type: exports.actionTypes.clearUxState }); },
+export var createActions = function (gridName) { return ({
+    init: function (initProps) { return ({ gridName: gridName, type: actionTypes.init, initProps: initProps }); },
+    clearUxState: function () { return ({ gridName: gridName, type: actionTypes.clearUxState }); },
     handleUxChange: function (uxKey, uxValue) { return ({
         gridName: gridName,
-        type: exports.actionTypes.handleUxChange,
+        type: actionTypes.handleUxChange,
         uxKey: uxKey,
         uxValue: uxValue,
     }); },
-    openConfigForm: function () { return ({ gridName: gridName, type: exports.actionTypes.openConfigForm }); },
-    closeConfigForm: function () { return ({ gridName: gridName, type: exports.actionTypes.closeConfigForm }); },
-    setColumnConfig: function (columnConfig) { return ({ gridName: gridName, type: exports.actionTypes.setColumnConfig, columnConfig: columnConfig }); },
-    setPage: function (page) { return ({ gridName: gridName, type: exports.actionTypes.setPage, page: page }); },
+    openConfigForm: function () { return ({ gridName: gridName, type: actionTypes.openConfigForm }); },
+    closeConfigForm: function () { return ({ gridName: gridName, type: actionTypes.closeConfigForm }); },
+    setColumnConfig: function (columnConfig) { return ({ gridName: gridName, type: actionTypes.setColumnConfig, columnConfig: columnConfig }); },
+    setPage: function (page) { return ({ gridName: gridName, type: actionTypes.setPage, page: page }); },
     setColumnWidth: function (columnsWidth, columnLayout) { return ({
         gridName: gridName,
-        type: exports.actionTypes.setColumnWidth,
+        type: actionTypes.setColumnWidth,
         columnsWidth: columnsWidth,
         columnLayout: columnLayout,
     }); },
-    resetGrid: function () { return ({ gridName: gridName, type: exports.actionTypes.resetGrid }); },
+    resetGrid: function () { return ({ gridName: gridName, type: actionTypes.resetGrid }); },
     setColumnsOrder: function (columnsOrder) { return ({
         gridName: gridName,
-        type: exports.actionTypes.setColumnsOrder,
+        type: actionTypes.setColumnsOrder,
         columnsOrder: columnsOrder,
     }); },
-    setRowsPerPage: function (rowsPerPage) { return ({ gridName: gridName, type: exports.actionTypes.setRowsPerPage, rowsPerPage: rowsPerPage }); },
-    resetFilters: function () { return ({ gridName: gridName, type: exports.actionTypes.resetFilters }); },
+    setRowsPerPage: function (rowsPerPage) { return ({ gridName: gridName, type: actionTypes.setRowsPerPage, rowsPerPage: rowsPerPage }); },
+    resetFilters: function () { return ({ gridName: gridName, type: actionTypes.resetFilters }); },
     addFilter: function (column, value, filterProps) { return ({
         gridName: gridName,
-        type: exports.actionTypes.addFilter,
+        type: actionTypes.addFilter,
         column: column,
         value: value,
         filterProps: filterProps,
     }); },
     addSorting: function (column, direction) { return ({
         gridName: gridName,
-        type: exports.actionTypes.addSorting,
+        type: actionTypes.addSorting,
         column: column,
         direction: direction,
     }); },
-    clearSettings: function () { return ({ gridName: gridName, type: exports.actionTypes.clearSettings }); },
+    clearSettings: function () { return ({ gridName: gridName, type: actionTypes.clearSettings }); },
 }); };
-exports.createActions = createActions;
-var createSelectors = function (gridName) { return ({
+export var createSelectors = function (gridName) { return ({
     getUxState: function (state) {
-        return (0, getOr_1.default)(exports.initialState.uxState, "commonGrid.".concat(gridName, ".uxState"), state);
+        return getOr(initialState.uxState, "commonGrid.".concat(gridName, ".uxState"), state);
     },
     isConfigFormOpen: function (state) {
-        return (0, getOr_1.default)(exports.initialState.isConfigFormOpen, "commonGrid.".concat(gridName, ".isConfigFormOpen"), state);
+        return getOr(initialState.isConfigFormOpen, "commonGrid.".concat(gridName, ".isConfigFormOpen"), state);
     },
     getColumnConfig: function (state) {
-        return (0, getOr_1.default)(exports.initialState.columnConfig, "commonGrid.".concat(gridName, ".columnConfig"), state);
+        return getOr(initialState.columnConfig, "commonGrid.".concat(gridName, ".columnConfig"), state);
     },
-    getPage: function (state) { return (0, getOr_1.default)(exports.initialState.page, "commonGrid.".concat(gridName, ".page"), state); },
+    getPage: function (state) { return getOr(initialState.page, "commonGrid.".concat(gridName, ".page"), state); },
     getRowsPerPage: function (state) {
-        return (0, getOr_1.default)(exports.initialState.rowsPerPage, "commonGrid.".concat(gridName, ".rowsPerPage"), state);
+        return getOr(initialState.rowsPerPage, "commonGrid.".concat(gridName, ".rowsPerPage"), state);
     },
-    getFilter: function (state) { return (0, getOr_1.default)(exports.initialState.filter, "commonGrid.".concat(gridName, ".filter"), state); },
+    getFilter: function (state) { return getOr(initialState.filter, "commonGrid.".concat(gridName, ".filter"), state); },
     getSorting: function (state) {
-        return (0, getOr_1.default)(exports.initialState.sorting, "commonGrid.".concat(gridName, ".sorting"), state);
+        return getOr(initialState.sorting, "commonGrid.".concat(gridName, ".sorting"), state);
     },
     getColumnsWidth: function (state) {
-        return (0, getOr_1.default)(null, "commonGrid.".concat(gridName, ".columnsWidth"), state);
+        return getOr(null, "commonGrid.".concat(gridName, ".columnsWidth"), state);
     },
     getColumnsWidthVariant: function (state) {
-        return (0, getOr_1.default)(undefined, "commonGrid.".concat(gridName, ".columnsWidthVariant"), state);
+        return getOr(undefined, "commonGrid.".concat(gridName, ".columnsWidthVariant"), state);
     },
     getColumnsOrder: function (state) {
-        return (0, getOr_1.default)([], "commonGrid.".concat(gridName, ".columnsOrder"), state);
+        return getOr([], "commonGrid.".concat(gridName, ".columnsOrder"), state);
     },
 }); };
-exports.createSelectors = createSelectors;
-var createFullSelector = function (gridName) {
-    var selectors = (0, exports.createSelectors)(gridName);
-    return (0, reselect_1.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.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, rowsPerPage, filter, sorting, columnsWidth, columnsWidthVariant, columnsOrder) { return ({
+export var createFullSelector = function (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.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, rowsPerPage, filter, sorting, columnsWidth, columnsWidthVariant, columnsOrder) { return ({
         uxState: uxState,
         isConfigFormOpen: isConfigFormOpen,
         columnConfig: columnConfig,
@@ -236,4 +228,3 @@ var createFullSelector = function (gridName) {
         columnsOrder: columnsOrder,
     }); });
 };
-exports.createFullSelector = createFullSelector;

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

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 // v1 to v2
 var v2 = function (draft) {
     Object.keys(draft).forEach(function (gridName) {
@@ -10,7 +8,7 @@ var v2 = function (draft) {
     return draft;
 };
 // migration management
-exports.default = (function (draft) {
+export default (function (draft) {
     draft = v2(draft);
     return draft;
 });

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

@@ -1,18 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComplexWithPaginationAndRedux = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../utils/utils");
-var actions_1 = require("../utils/actions");
-var useAddFilter_1 = require("../../hooks/useAddFilter");
-var withReduxActions_1 = __importDefault(require("../../HoC/withReduxActions"));
-var columnDefinition_1 = require("../utils/columnDefinition");
-var withRedux_1 = __importDefault(require("../utils/withRedux"));
-var linguiContainer_1 = require("../utils/linguiContainer");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ReduxGrid, createRandomData, enumValues, gridDummyActions } from '../utils/utils.js';
+import { onRowEditClick, onRowReadClick, onRowAction, onBatchAction } from '../utils/actions.js';
+import { useAddFilter } from '../../hooks/useAddFilter.js';
+import withReduxActions from '../../HoC/withReduxActions.js';
+import { columnDefinitions, enumColumn } from '../utils/columnDefinition.js';
+import withRedux from '../utils/withRedux.js';
+import { LinguiContainer } from '../utils/linguiContainer.js';
 var ActionColumnButtons = {
     flexBasis: 160,
     canRowRead: true,
@@ -20,19 +14,18 @@ var ActionColumnButtons = {
 };
 var FilterSetter = function (_a) {
     var gridActions = _a.gridActions;
-    var handleAddFilter = (0, useAddFilter_1.useAddFilter)(gridActions === null || gridActions === void 0 ? void 0 : gridActions.addFilter);
-    react_1.default.useEffect(function () {
-        handleAddFilter(utils_1.enumValues[1], columnDefinition_1.enumColumn);
+    var handleAddFilter = useAddFilter(gridActions === null || gridActions === void 0 ? void 0 : gridActions.addFilter);
+    React.useEffect(function () {
+        handleAddFilter(enumValues[1], enumColumn);
     }, []);
     return null;
 };
-var ConnectedFilterSetter = (0, withReduxActions_1.default)('testGrid')(FilterSetter);
-exports.default = {
+var ConnectedFilterSetter = withReduxActions('testGrid')(FilterSetter);
+export default {
     title: '@Blocks/CommonGrid',
-    decorators: [withRedux_1.default],
+    decorators: [withRedux],
 };
-var ComplexWithPaginationAndRedux = function () { return ((0, jsx_runtime_1.jsxs)(linguiContainer_1.LinguiContainer, { children: [(0, jsx_runtime_1.jsx)(ConnectedFilterSetter, { gridActions: utils_1.gridDummyActions }), (0, jsx_runtime_1.jsx)(utils_1.ReduxGrid, { columnsDefinitions: columnDefinition_1.columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: (0, utils_1.createRandomData)(10), onRowAction: actions_1.onRowAction, onRowReadClick: actions_1.onRowReadClick, onRowEditClick: actions_1.onRowEditClick, totalRowsCount: 200, onBatchAction: actions_1.onBatchAction, confirmOnReset: function () { return window.confirm('Are you sure you want to reset grid?'); } })] })); };
-exports.ComplexWithPaginationAndRedux = ComplexWithPaginationAndRedux;
-exports.ComplexWithPaginationAndRedux.story = {
+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, confirmOnReset: function () { return window.confirm('Are you sure you want to reset grid?'); } })] })); };
+ComplexWithPaginationAndRedux.story = {
     name: 'Complex, with pagination and redux',
 };

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

@@ -1,22 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var CommonGridContainer_1 = __importDefault(require("../../CommonGridContainer"));
-var utils_1 = require("../utils/utils");
-var columnDefinition_1 = require("../utils/columnDefinition");
-var withTheme_1 = __importDefault(require("../utils/withTheme"));
-var withRouter_1 = __importDefault(require("../utils/withRouter"));
-var withRedux_1 = __importDefault(require("../utils/withRedux"));
-var linguiContainer_1 = require("../utils/linguiContainer");
-exports.default = {
+import { jsx as _jsx } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGridContainer.js';
+import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils.js';
+import { columnDefinitions } from '../utils/columnDefinition.js';
+import withTheme from '../utils/withTheme.js';
+import withRouter from '../utils/withRouter.js';
+import withRedux from '../utils/withRedux.js';
+import { LinguiContainer } from '../utils/linguiContainer.js';
+export default {
     title: '@Blocks/CommonGrid',
-    decorators: [withTheme_1.default, withRouter_1.default, withRedux_1.default],
+    decorators: [withTheme, withRouter, withRedux],
 };
-var Default = function () {
-    return ((0, jsx_runtime_1.jsx)(linguiContainer_1.LinguiContainer, { children: (0, jsx_runtime_1.jsx)(CommonGridContainer_1.default, { columnsDefinitions: columnDefinition_1.columnDefinitions, rowsData: (0, utils_1.createRandomData)(10), gridActions: utils_1.gridDummyActions, gridSelectors: utils_1.gridSelectors }) }));
+export var Default = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridActions: gridDummyActions, gridSelectors: gridSelectors }) }));
 };
-exports.Default = Default;

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

@@ -1,19 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoadingState = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var CommonGridContainer_1 = __importDefault(require("../../CommonGridContainer"));
-var utils_1 = require("../utils/utils");
-var columnDefinition_1 = require("../utils/columnDefinition");
-var linguiContainer_1 = require("../utils/linguiContainer");
-exports.default = {
+import { jsx as _jsx } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGridContainer.js';
+import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils.js';
+import { columnDefinitions } from '../utils/columnDefinition.js';
+import { LinguiContainer } from '../utils/linguiContainer.js';
+export default {
     title: '@Blocks/CommonGrid',
 };
-var LoadingState = function () { return ((0, jsx_runtime_1.jsx)(linguiContainer_1.LinguiContainer, { children: (0, jsx_runtime_1.jsx)(CommonGridContainer_1.default, { columnsDefinitions: columnDefinition_1.columnDefinitions, rowsData: (0, utils_1.createRandomData)(10), gridSelectors: utils_1.gridSelectors, gridActions: utils_1.gridDummyActions, isLoading: true, hideColumnConfig: true }) })); };
-exports.LoadingState = LoadingState;
-exports.LoadingState.story = {
+export var LoadingState = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridSelectors: gridSelectors, gridActions: gridDummyActions, isLoading: true, hideColumnConfig: true }) })); };
+LoadingState.story = {
     name: 'Loading state',
 };

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

@@ -1,19 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ManyColumnsNoScrollLayout = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var CommonGridContainer_1 = __importDefault(require("../../CommonGridContainer"));
-var utils_1 = require("../utils/utils");
-var columnDefinition_1 = require("../utils/columnDefinition");
-var linguiContainer_1 = require("../utils/linguiContainer");
-exports.default = {
+import { jsx as _jsx } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGridContainer.js';
+import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../utils/utils.js';
+import { oversizedColumnDefinition } from '../utils/columnDefinition.js';
+import { LinguiContainer } from '../utils/linguiContainer.js';
+export default {
     title: '@Blocks/CommonGrid',
 };
-var ManyColumnsNoScrollLayout = function () { return ((0, jsx_runtime_1.jsx)(linguiContainer_1.LinguiContainer, { children: (0, jsx_runtime_1.jsx)(CommonGridContainer_1.default, { rowsData: (0, utils_1.createOversizedRandomData)(5), columnsDefinitions: columnDefinition_1.oversizedColumnDefinition, columnLayout: "no-scroll", hideColumnConfig: true, gridSelectors: utils_1.gridSelectors, gridActions: utils_1.gridDummyActions }) })); };
-exports.ManyColumnsNoScrollLayout = ManyColumnsNoScrollLayout;
-exports.ManyColumnsNoScrollLayout.story = {
+export var ManyColumnsNoScrollLayout = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, columnLayout: "no-scroll", hideColumnConfig: true, gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
+ManyColumnsNoScrollLayout.story = {
     name: 'many columns no-scroll layout',
 };

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

@@ -1,19 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ManyColumnsNormalLayoutANoControls = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var CommonGridContainer_1 = __importDefault(require("../../CommonGridContainer"));
-var utils_1 = require("../utils/utils");
-var columnDefinition_1 = require("../utils/columnDefinition");
-var linguiContainer_1 = require("../utils/linguiContainer");
-exports.default = {
+import { jsx as _jsx } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGridContainer.js';
+import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../utils/utils.js';
+import { oversizedColumnDefinition } from '../utils/columnDefinition.js';
+import { LinguiContainer } from '../utils/linguiContainer.js';
+export default {
     title: '@Blocks/CommonGrid',
 };
-var ManyColumnsNormalLayoutANoControls = function () { return ((0, jsx_runtime_1.jsx)(linguiContainer_1.LinguiContainer, { children: (0, jsx_runtime_1.jsx)(CommonGridContainer_1.default, { rowsData: (0, utils_1.createOversizedRandomData)(5), columnsDefinitions: columnDefinition_1.oversizedColumnDefinition, hideColumnConfig: true, gridSelectors: utils_1.gridSelectors, gridActions: utils_1.gridDummyActions }) })); };
-exports.ManyColumnsNormalLayoutANoControls = ManyColumnsNormalLayoutANoControls;
-exports.ManyColumnsNormalLayoutANoControls.story = {
+export var ManyColumnsNormalLayoutANoControls = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, hideColumnConfig: true, gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
+ManyColumnsNormalLayoutANoControls.story = {
     name: 'many columns normal layout a no controls',
 };

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

@@ -1,22 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Styled = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var utils_1 = require("../utils/utils");
-var actions_1 = require("../utils/actions");
-var columnDefinition_1 = require("../utils/columnDefinition");
-var withTheme_1 = __importDefault(require("../utils/withTheme"));
-var withRouter_1 = __importDefault(require("../utils/withRouter"));
-var withRedux_1 = __importDefault(require("../utils/withRedux"));
-var linguiContainer_1 = require("../utils/linguiContainer");
-exports.default = {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReduxGrid, createRandomData, gridSelectors, gridDummyActions } from '../utils/utils.js';
+import { onRowAction } from '../utils/actions.js';
+import { columnDefinitions } from '../utils/columnDefinition.js';
+import withTheme from '../utils/withTheme.js';
+import withRouter from '../utils/withRouter.js';
+import withRedux from '../utils/withRedux.js';
+import { LinguiContainer } from '../utils/linguiContainer.js';
+export default {
     title: '@Blocks/CommonGrid',
-    decorators: [withTheme_1.default, withRouter_1.default, withRedux_1.default],
+    decorators: [withTheme, withRouter, withRedux],
 };
-var Styled = function () {
-    return ((0, jsx_runtime_1.jsx)(linguiContainer_1.LinguiContainer, { children: (0, jsx_runtime_1.jsx)("div", { className: "styled", children: (0, jsx_runtime_1.jsx)(utils_1.ReduxGrid, { columnsDefinitions: columnDefinition_1.columnDefinitions, rowsData: (0, utils_1.createRandomData)(10), onRowAction: actions_1.onRowAction, gridActions: utils_1.gridDummyActions, gridSelectors: utils_1.gridSelectors }) }) }));
+export var Styled = function () {
+    return (_jsx(LinguiContainer, { children: _jsx("div", { className: "styled", children: _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridActions: gridDummyActions, gridSelectors: gridSelectors }) }) }));
 };
-exports.Styled = Styled;

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

@@ -1,22 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithCustomGridActions = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var CommonGridContainer_1 = __importDefault(require("../../CommonGridContainer"));
-var utils_1 = require("../utils/utils");
-var columnDefinition_1 = require("../utils/columnDefinition");
-var actions_1 = require("../utils/actions");
-var linguiContainer_1 = require("../utils/linguiContainer");
-exports.default = {
+import { jsx as _jsx } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGridContainer.js';
+import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils.js';
+import { columnDefinitions } from '../utils/columnDefinition.js';
+import { onRowAction } from '../utils/actions.js';
+import { LinguiContainer } from '../utils/linguiContainer.js';
+export default {
     title: '@Blocks/CommonGrid',
 };
-var WithCustomGridActions = function () {
-    return ((0, jsx_runtime_1.jsx)(linguiContainer_1.LinguiContainer, { children: (0, jsx_runtime_1.jsx)(CommonGridContainer_1.default, { columnsDefinitions: columnDefinition_1.columnDefinitions, rowsData: (0, utils_1.createRandomData)(10), onRowAction: actions_1.onRowAction, gridSelectors: utils_1.gridSelectors, gridActions: utils_1.gridDummyActions, hideColumnConfig: true }) }));
+export var WithCustomGridActions = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridSelectors: gridSelectors, gridActions: gridDummyActions, hideColumnConfig: true }) }));
 };
-exports.WithCustomGridActions = WithCustomGridActions;
-exports.WithCustomGridActions.story = {
+WithCustomGridActions.story = {
     name: 'With custom grid actions',
 };

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

@@ -1,32 +1,25 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithForcedCheckboxesAndCustomTitle = exports.ActionColumnCheckboxes = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var utils_1 = require("../utils/utils");
-var actions_1 = require("../utils/actions");
-var columnDefinition_1 = require("../utils/columnDefinition");
-var withRedux_1 = __importDefault(require("../utils/withRedux"));
-var linguiContainer_1 = require("../utils/linguiContainer");
-exports.ActionColumnCheckboxes = {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReduxGrid, createRandomData } from '../utils/utils.js';
+import { onRowEditClick, onRowReadClick, onRowAction } from '../utils/actions.js';
+import { columnDefinitions } from '../utils/columnDefinition.js';
+import withRedux from '../utils/withRedux.js';
+import { LinguiContainer } from '../utils/linguiContainer.js';
+export var ActionColumnCheckboxes = {
     flexBasis: 160,
     forceCheckboxes: true,
 };
 var components = {
     ColumnTitle: function (_a) {
         var title = _a.title, isSortable = _a.isSortable;
-        return (0, jsx_runtime_1.jsx)("div", { children: "".concat(title, " is ").concat(isSortable ? '' : 'NOT', " sortable") });
+        return _jsx("div", { children: "".concat(title, " is ").concat(isSortable ? '' : 'NOT', " sortable") });
     },
 };
-exports.default = {
+export default {
     title: '@Blocks/CommonGrid',
-    decorators: [withRedux_1.default],
+    decorators: [withRedux],
     excludeStories: ['ActionColumnCheckboxes'],
 };
-var WithForcedCheckboxesAndCustomTitle = function () { return ((0, jsx_runtime_1.jsx)(linguiContainer_1.LinguiContainer, { children: (0, jsx_runtime_1.jsx)(utils_1.ReduxGrid, { columnsDefinitions: columnDefinition_1.columnDefinitions, actionColumnDefinition: exports.ActionColumnCheckboxes, rowsData: (0, utils_1.createRandomData)(10), onRowAction: actions_1.onRowAction, onRowReadClick: actions_1.onRowReadClick, onRowEditClick: actions_1.onRowEditClick, totalRowsCount: 200, components: components }) })); };
-exports.WithForcedCheckboxesAndCustomTitle = WithForcedCheckboxesAndCustomTitle;
-exports.WithForcedCheckboxesAndCustomTitle.story = {
+export var WithForcedCheckboxesAndCustomTitle = function () { return (_jsx(LinguiContainer, { children: _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnCheckboxes, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, components: components }) })); };
+WithForcedCheckboxesAndCustomTitle.story = {
     name: 'With forced checkboxes and custom title',
 };