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

package/package.json

@@ -1,29 +1,19 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.26-beta.2",
+  "version": "0.8.26-beta.4",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
   "module": "./ui/index.js",
   "types": "./ui/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./ui/index.js",
-      "types": "./ui/index.d.ts"
-    },
-    "./ui/*": {
-      "import": "./ui/*.js",
-      "types": "./ui/*.d.ts"
-    }
-  },
   "files": [
     "ui",
     "assets"
   ],
   "scripts": {
     "storybook": "storybook dev -p 6006",
-    "build": "rm -rf ./build && tsc && vite build --emptyOutDir && cp package.json build && cp README.md build",
-    "build:win": "tsc && vite build --emptyOutDir && copy package.json build && copy README.md build",
+    "build": "rm -rf ./build && tsup && vite build --mode dts && node scripts/copy-assets.mjs && cp package.json build && cp README.md build",
+    "build:win": "tsup && vite build && node scripts/copy-assets.mjs && del build\\ui\\_dts_only_placeholder.js && copy package.json build && copy README.md build",
     "build-storybook": "storybook build",
     "deploy": "npm run build && npm publish ./build",
     "deploy:win": "npm run build:win && npm publish ./build",
@@ -108,6 +98,7 @@
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
     "tslib": "^2.6.2",
+    "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vite": "^8.0.9",
     "vite-plugin-dts": "^3.6.4",

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -0,0 +1,155 @@
+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;
+}
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import DataRow from "./components/DataRow";
+import FilterRow from "./components/FilterRow";
+import FloatingButton from "./components/FloatingButton/FloatingButton";
+import { GridStatus } from "./components/GridStatus";
+import GroupRow from "./components/GroupRow";
+import HeadRow from "./components/HeadRow";
+import OversizedScroll from "./components/OversizedScroll";
+import useColumnSizes from "./hooks/useColumnSizes";
+import useRowsKeyControls from "./hooks/useRowsKeyControls";
+import useUxReset from "./hooks/useUxReset";
+import { x } from "@xstyled/styled-components";
+import { initialState } from "./store";
+import { getGroups } from "./utils";
+var rowsStyles = {
+    outline: "none"
+};
+var defaultVoidFunction = function defaultVoidFunction() {
+    for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+        args[_key] = arguments[_key];
+    }
+    return null;
+};
+var defaultUxState = initialState.uxState;
+var defaultColumnsWidth = {};
+var CommonGrid = function CommonGrid(param) {
+    var filters = param.filters, comparators = param.comparators, handleDragEnd = param.handleDragEnd, // redux props
+    gridSelectors = param.gridSelectors, gridActions = param.gridActions, // input props
+    isLoading = param.isLoading, rowsData = param.rowsData, hasColouredRows = param.hasColouredRows, actionColumnDefinition = param.actionColumnDefinition, allowRowSelect = param.allowRowSelect, allowRowSelectOnAction = param.allowRowSelectOnAction, onRowAction = param.onRowAction, onRowClick = param.onRowClick, onAsyncLoadFilterOptions = param.onAsyncLoadFilterOptions, _param_columnLayout = param.columnLayout, columnLayout = _param_columnLayout === void 0 ? "normal" : _param_columnLayout, displayColumnsDefinitions = param.displayColumnsDefinitions, className = param.className, minColumnWidth = param.minColumnWidth, errorMessage = param.errorMessage, floatingButtonProps = param.floatingButtonProps, hasGroups = param.hasGroups, hasFilters = param.hasFilters, isSortTerminated = param.isSortTerminated;
+    var _gridSelectors_uxState = gridSelectors.uxState, uxState = _gridSelectors_uxState === void 0 ? defaultUxState : _gridSelectors_uxState, _gridSelectors_columnsWidth = gridSelectors.columnsWidth, columnsWidth = _gridSelectors_columnsWidth === void 0 ? defaultColumnsWidth : _gridSelectors_columnsWidth, columnsWidthVariant = gridSelectors.columnsWidthVariant, _gridSelectors_page = gridSelectors.page, page = _gridSelectors_page === void 0 ? 1 : _gridSelectors_page, filter = gridSelectors.filter, sorting = gridSelectors.sorting, _gridSelectors_rowsPerPage = gridSelectors.rowsPerPage, rowsPerPage = _gridSelectors_rowsPerPage === void 0 ? 10 : _gridSelectors_rowsPerPage;
+    var clearUxState = gridActions.clearUxState, handleUxChange = gridActions.handleUxChange, _gridActions_addFilter = gridActions.addFilter, addFilter = _gridActions_addFilter === void 0 ? defaultVoidFunction : _gridActions_addFilter, _gridActions_addSorting = gridActions.addSorting, addSorting = _gridActions_addSorting === void 0 ? defaultVoidFunction : _gridActions_addSorting, _gridActions_setColumnWidth = gridActions.setColumnWidth, setColumnWidth = _gridActions_setColumnWidth === void 0 ? defaultVoidFunction : _gridActions_setColumnWidth;
+    var handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
+    useUxReset(rowsData, uxState, clearUxState);
+    var _useColumnSizes = useColumnSizes(displayColumnsDefinitions, columnsWidth, columnsWidthVariant, setColumnWidth, columnLayout, minColumnWidth), displayColumnsWidth = _useColumnSizes.displayColumnsWidth, totalColumnsWidth = _useColumnSizes.totalColumnsWidth, gridBoxRef = _useColumnSizes.gridBoxRef, handleResizeDrag = _useColumnSizes.handleResizeDrag;
+    var groups = useMemo(function() {
+        return getGroups(displayColumnsDefinitions);
+    }, [
+        displayColumnsDefinitions
+    ]);
+    var commonGridRef = useCallback(function(node) {
+        gridBoxRef.current = node;
+    }, []);
+    var isEmpty = !isLoading && !errorMessage && (!rowsData || rowsData.length < 1);
+    var hasFloatingChildren = isLoading || errorMessage || isEmpty;
+    return /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+            /* @__PURE__ */ jsx(x.div, {
+                className: className || "",
+                children: /* @__PURE__ */ jsxs(OversizedScroll, {
+                    columnLayout: columnLayout,
+                    totalColumnsWidth: totalColumnsWidth,
+                    floatingChildren: hasFloatingChildren && /* @__PURE__ */ jsx(GridStatus, {
+                        isLoading: isLoading,
+                        isEmpty: isEmpty,
+                        errorMessage: errorMessage
+                    }),
+                    ref: commonGridRef,
+                    children: [
+                        /* @__PURE__ */ jsxs("div", {
+                            className: "gridHead",
+                            children: [
+                                hasGroups && /* @__PURE__ */ jsx(GroupRow, {
+                                    actionColumn: actionColumnDefinition,
+                                    columns: displayColumnsDefinitions,
+                                    displayColumnsWidth: displayColumnsWidth,
+                                    groups: groups
+                                }),
+                                /* @__PURE__ */ jsx(HeadRow, {
+                                    columns: displayColumnsDefinitions,
+                                    onAddSort: addSorting,
+                                    columnLayout: columnLayout,
+                                    sortingValues: sorting,
+                                    displayColumnsWidth: displayColumnsWidth,
+                                    handleResizeDrag: handleResizeDrag,
+                                    groups: groups,
+                                    handleDragEnd: handleDragEnd,
+                                    isSortTerminated: isSortTerminated
+                                }),
+                                hasFilters && /* @__PURE__ */ jsx(FilterRow, {
+                                    filters: filters,
+                                    comparators: comparators,
+                                    columns: displayColumnsDefinitions,
+                                    actionColumn: actionColumnDefinition,
+                                    onChange: addFilter,
+                                    filterValues: filter,
+                                    displayColumnsWidth: displayColumnsWidth,
+                                    groups: groups,
+                                    rowsData: rowsData,
+                                    uxState: uxState,
+                                    handleUxChange: handleUxChange,
+                                    onAsyncLoadFilterOptions: onAsyncLoadFilterOptions
+                                })
+                            ]
+                        }),
+                        /* @__PURE__ */ jsx("div", {
+                            className: "body flx_1",
+                            style: rowsStyles,
+                            tabIndex: -1,
+                            onKeyDown: handleRowsKeyDown,
+                            children: !isLoading && rowsData && displayColumnsDefinitions && rowsData.map(function(row, index) {
+                                var rowIndex = rowsPerPage * page + (index + 1) - rowsPerPage;
+                                return /* @__PURE__ */ jsx(DataRow, {
+                                    rowData: row,
+                                    rowIndex: rowIndex,
+                                    uxState: uxState,
+                                    isEven: hasColouredRows && (index + 1) % 2 === 0,
+                                    allowRowSelect: allowRowSelect,
+                                    allowRowSelectOnAction: allowRowSelectOnAction,
+                                    onRowAction: onRowAction,
+                                    onUxChange: handleUxChange,
+                                    onRowClick: onRowClick,
+                                    columns: displayColumnsDefinitions,
+                                    displayColumnsWidth: displayColumnsWidth,
+                                    groups: groups
+                                }, row.id);
+                            })
+                        })
+                    ]
+                })
+            }),
+            floatingButtonProps && /* @__PURE__ */ jsx(FloatingButton, _object_spread({}, floatingButtonProps))
+        ]
+    });
+};
+var CommonGrid_default = CommonGrid;
+export { CommonGrid_default as default };

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -0,0 +1,370 @@
+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 _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 _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 _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;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys, key, i;
+    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(Object(source));
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+        return target;
+    }
+    target = _object_without_properties_loose(source, excluded);
+    if (Object.getOwnPropertySymbols) {
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useMemo, useState } from "react";
+import { Pagination } from "../../Elements/Pagination";
+import { useCheckDeviceWidth } from "../../utils/CheckDeviceWidth/checkDeviceWidth";
+import HidePrint from "../HidePrint/HidePrint";
+import { useModal } from "../Modal/hooks/useModal";
+import ActionHead from "./components/ActionHead";
+import ControlButtons from "./components/ControlButtons";
+import { GridInfo } from "./components/GridInfo";
+import { GridModals } from "./components/GridModals";
+import MobileFilterModal from "./components/MobileFilterModal";
+import MobileSortModal from "./components/MobileSortModal";
+import TablePagination from "./components/TablePagination";
+import useEditReadAsColumn from "./hooks/useEditReadAsColumn";
+import { useGridAutoRowsPerPage } from "./hooks/useGridAutoRowsPerPage";
+import useManageColumn from "./hooks/useManageColumn";
+import { usePresetState } from "./hooks/usePresetsState";
+import { getExtendedExtraControlButtons } from "./utils/getExtendedExtraControlButtons";
+import { getRowsPerPage } from "./utils/getRowsPerPage";
+import { hasSortTerminated } from "./utils/hasSortTerminated";
+import { x } from "@xstyled/styled-components";
+import { CommonGridWithStyles, BottomWrapper, CommonGridWrap, ContentContainer, StyledButtonStrip } from "./styles";
+import { getFilters } from "./utils";
+var CommonGridContainer = function CommonGridContainer(props) {
+    var _actionColumnDefinition_actionOptions;
+    var _props_optimizeFilters = props.optimizeFilters, optimizeFilters = _props_optimizeFilters === void 0 ? false : _props_optimizeFilters, 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, _props_autoHeight = props.autoHeight, autoHeight = _props_autoHeight === void 0 ? true : _props_autoHeight, gridName = props.gridName, _props_withPresets = props.withPresets, withPresets = _props_withPresets === void 0 ? true : _props_withPresets, _props_withManageColumnButton = props.withManageColumnButton, withManageColumnButton = _props_withManageColumnButton === void 0 ? true : _props_withManageColumnButton, _props_withPagination = props.withPagination, withPagination = _props_withPagination === void 0 ? true : _props_withPagination, allowSortingOnlyUnderTotalRows = props.allowSortingOnlyUnderTotalRows, onReload = props.onReload, passDownProps = _object_without_properties(props, [
+        "optimizeFilters",
+        "extraControlButtons",
+        "onBatchAction",
+        "processCheckedValues",
+        "processCheckedValuesTitle",
+        "hideControlButtons",
+        "quickFilter",
+        "floatingButtonProps",
+        "queryRowsParam",
+        "customPaginationHandler",
+        "autoHeight",
+        "gridName",
+        "withPresets",
+        "withManageColumnButton",
+        "withPagination",
+        "allowSortingOnlyUnderTotalRows",
+        "onReload"
+    ]);
+    var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
+    var extendedExtraControlButtons = useMemo(function() {
+        return getExtendedExtraControlButtons(extraControlButtons, onReload);
+    }, [
+        extraControlButtons,
+        onReload
+    ]);
+    var _useState = _sliced_to_array(useState(false), 2), displayManageColumnButton = _useState[0], setDisplayManageColumnButton = _useState[1];
+    var gridRef = useRef(null);
+    var withButtonStrip = !!(extendedExtraControlButtons === null || extendedExtraControlButtons === void 0 ? void 0 : extendedExtraControlButtons.length) || !hideControlButtons || !!withPresets || !!withManageColumnButton;
+    var hasGroups = !!props.columnsDefinitions.find(function(col) {
+        return col.group;
+    });
+    var hasFilters = !!props.columnsDefinitions.find(function(col) {
+        return col.filtering;
+    });
+    var hasGroupsOrFilters = hasGroups || hasFilters;
+    var autoRowsPerPage = getRowsPerPage(gridRef, withPagination, withButtonStrip, hasGroupsOrFilters);
+    var isMobile = useCheckDeviceWidth().isMobile;
+    useGridAutoRowsPerPage({
+        autoHeight: autoHeight,
+        gridActions: gridActions,
+        queryRowsParam: queryRowsParam,
+        selectedRowsPerPage: gridSelectors.rowsPerPage,
+        autoRowsPerPage: autoRowsPerPage
+    });
+    var modifiedPassDownProps = useEditReadAsColumn(passDownProps);
+    var filters = useMemo(function() {
+        return getFilters(optimizeFilters);
+    }, [
+        optimizeFilters
+    ]);
+    var columns = modifiedPassDownProps.columnsDefinitions;
+    var _useModal = useModal(), openManageColumnForm = _useModal.onOpen, manageColumnFormVisible = _useModal.isOpen, onClose = _useModal.onClose;
+    var _useManageColumn = useManageColumn({
+        columns: columns,
+        gridActions: gridActions,
+        gridSelectors: gridSelectors,
+        onClose: onClose
+    }), columnsConfigValues = _useManageColumn.columnsConfigValues, setColumnsConfigOptions = _useManageColumn.setColumnsConfigOptions, onConfirmForm = _useManageColumn.onConfirmForm, resetColumnConfig = _useManageColumn.resetColumnConfig, handleDragEnd = _useManageColumn.handleDragEnd, onCloseForm = _useManageColumn.onCloseForm, displayColumnsDefinitions = _useManageColumn.displayColumnsDefinitions, manageColumnsFormDefinitions = _useManageColumn.manageColumnsFormDefinitions;
+    var _usePresetState = usePresetState(), isPresetsModalOpen = _usePresetState.isPresetsModalOpen, onClosePresetsModal = _usePresetState.onClosePresetsModal, onOpenPresetsModal = _usePresetState.onOpenPresetsModal, setSelectedPresetName = _usePresetState.setSelectedPresetName, selectedPresetName = _usePresetState.selectedPresetName;
+    var _useModal1 = useModal(), isMobileFilterOpen = _useModal1.isOpen, onOpenMobileFilter = _useModal1.onOpen, closeMobileFilter = _useModal1.onClose;
+    var _useModal2 = useModal(), isMobileSortOpen = _useModal2.isOpen, onOpenMobileSort = _useModal2.onOpen, closeMobileSort = _useModal2.onClose;
+    var _hasSortTerminated = hasSortTerminated({
+        allowSortingOnlyUnderTotalRows: allowSortingOnlyUnderTotalRows,
+        totalRowsCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount
+    }), isSortTerminatedAppeal = _hasSortTerminated.isSortTerminatedAppeal, isSortTerminated = _hasSortTerminated.isSortTerminated;
+    return /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+            /* @__PURE__ */ jsxs(ContentContainer, {
+                ref: gridRef,
+                children: [
+                    /* @__PURE__ */ jsxs(CommonGridWrap, {
+                        withPagination: withPagination,
+                        children: [
+                            withButtonStrip && /* @__PURE__ */ jsx(HidePrint, {
+                                children: /* @__PURE__ */ jsx(StyledButtonStrip, {
+                                    className: "buttonsStrip",
+                                    children: /* @__PURE__ */ jsx(ControlButtons, {
+                                        hideControlButtons: hideControlButtons,
+                                        extraControlButtons: extendedExtraControlButtons,
+                                        gridActions: gridActions,
+                                        gridSelectors: gridSelectors,
+                                        quickFilter: quickFilter,
+                                        columns: columns,
+                                        filters: filters,
+                                        setDisplayManageColumnButton: setDisplayManageColumnButton,
+                                        displayManageColumnButton: displayManageColumnButton,
+                                        openManageColumnForm: openManageColumnForm,
+                                        onOpenPresetsModal: onOpenPresetsModal,
+                                        selectedPresetName: selectedPresetName,
+                                        withPresets: withPresets,
+                                        gridName: gridName,
+                                        withManageColumnButton: withManageColumnButton,
+                                        onOpenMobileFilters: onOpenMobileFilter,
+                                        onOpenMobileSorting: onOpenMobileSort,
+                                        isSortTerminated: isSortTerminated
+                                    })
+                                })
+                            }),
+                            /* @__PURE__ */ jsx(CommonGridWithStyles, _object_spread_props(_object_spread({}, passDownProps, modifiedPassDownProps), {
+                                withButtonStrip: withButtonStrip,
+                                hasGroupsOrFilters: hasGroupsOrFilters,
+                                filters: filters,
+                                floatingButtonProps: floatingButtonProps,
+                                handleDragEnd: handleDragEnd(false),
+                                displayColumnsDefinitions: displayColumnsDefinitions,
+                                hasFilters: hasFilters,
+                                hasGroups: hasGroups,
+                                isSortTerminated: isSortTerminated,
+                                hasColouredRows: true
+                            }))
+                        ]
+                    }),
+                    /* @__PURE__ */ jsxs(BottomWrapper, {
+                        withPagination: withPagination,
+                        children: [
+                            (processCheckedValues || !!(actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : (_actionColumnDefinition_actionOptions = actionColumnDefinition.actionOptions) === null || _actionColumnDefinition_actionOptions === void 0 ? void 0 : _actionColumnDefinition_actionOptions.length)) && /* @__PURE__ */ jsx(ActionHead, {
+                                rowsData: rowsData,
+                                onBatchAction: onBatchAction,
+                                gridActions: gridActions,
+                                gridSelectors: gridSelectors,
+                                actionOptions: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions,
+                                processCheckedValues: processCheckedValues,
+                                processCheckedValuesTitle: processCheckedValuesTitle
+                            }),
+                            /* @__PURE__ */ jsxs(x.div, {
+                                display: "flex",
+                                justifyContent: "space-between",
+                                alignItems: "center",
+                                w: "100%",
+                                children: [
+                                    !isMobile && /* @__PURE__ */ jsx(GridInfo, {
+                                        isSortTerminatedAppeal: isSortTerminatedAppeal,
+                                        isSortTerminated: isSortTerminated
+                                    }),
+                                    withPagination && /* @__PURE__ */ jsxs(x.div, {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        className: "paginatorWrapper",
+                                        w: "100%",
+                                        justifyContent: "flex-end",
+                                        gap: "16px",
+                                        children: [
+                                            /* @__PURE__ */ 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: isMobile ? 3 : 5,
+                                                rate: isMobile ? 1 : 4
+                                            }),
+                                            /* @__PURE__ */ jsx(TablePagination, {
+                                                gridActions: gridActions,
+                                                gridSelectors: gridSelectors,
+                                                customPaginationHandler: customPaginationHandler,
+                                                autoRowsPerPage: autoRowsPerPage
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /* @__PURE__ */ 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
+            }),
+            isMobileFilterOpen && gridActions.setFilters && /* @__PURE__ */ jsx(MobileFilterModal, {
+                isShown: isMobileFilterOpen,
+                onClose: closeMobileFilter,
+                columns: displayColumnsDefinitions,
+                filters: filters,
+                comparators: passDownProps.comparators,
+                filterValues: gridSelectors.filter,
+                setFilters: gridActions.setFilters,
+                rowsData: rowsData,
+                uxState: gridSelectors.uxState || {},
+                handleUxChange: gridActions.handleUxChange,
+                onAsyncLoadFilterOptions: passDownProps.onAsyncLoadFilterOptions,
+                actionColumn: actionColumnDefinition,
+                onClearSettings: gridActions.clearSettings
+            }),
+            isMobileSortOpen && gridActions.addSorting && /* @__PURE__ */ jsx(MobileSortModal, {
+                isShown: isMobileSortOpen,
+                onClose: closeMobileSort,
+                columns: displayColumnsDefinitions,
+                sortingValues: gridSelectors.sorting,
+                onAddSorting: gridActions.addSorting,
+                onResetSorting: gridActions.resetSorting
+            })
+        ]
+    });
+};
+var CommonGridContainer_default = CommonGridContainer;
+export { CommonGridContainer_default as default };

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

@@ -0,0 +1,39 @@
+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;
+}
+import { jsx } from "react/jsx-runtime";
+var withProps = function withProps(input) {
+    return function(Component) {
+        return function ComponentWithProps(props) {
+            var additinalProps = typeof input === "function" ? input(props) : input;
+            return /* @__PURE__ */ jsx(Component, _object_spread({}, props, additinalProps));
+        };
+    };
+};
+var withProps_default = withProps;
+export { withProps_default as default };

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

@@ -0,0 +1,49 @@
+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;
+}
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import { createActions, createFullSelector } from "../store";
+var withReduxActions = function withReduxActions(gridName) {
+    var prefix = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "grid";
+    var actions = createActions(gridName);
+    var selectors = createFullSelector(gridName);
+    return connect(function(state) {
+        return _define_property({}, "".concat(prefix, "Selectors"), selectors(state));
+    }, function(dispatch) {
+        return _define_property({}, "".concat(prefix, "Actions"), bindActionCreators({
+            init: actions.init,
+            clearUxState: actions.clearUxState,
+            handleUxChange: actions.handleUxChange,
+            openConfigForm: actions.openConfigForm,
+            closeConfigForm: actions.closeConfigForm,
+            setColumnConfig: actions.setColumnConfig,
+            setPage: actions.setPage,
+            setPresets: actions.setPresets,
+            createPreset: actions.createPreset,
+            deletePreset: actions.deletePreset,
+            setRowsPerPage: actions.setRowsPerPage,
+            addFilter: actions.addFilter,
+            setFilters: actions.setFilters,
+            resetFilters: actions.resetFilters,
+            addSorting: actions.addSorting,
+            resetSorting: actions.resetSorting,
+            clearSettings: actions.clearSettings,
+            setColumnWidth: actions.setColumnWidth,
+            resetGrid: actions.resetGrid,
+            setColumnsOrder: actions.setColumnsOrder
+        }, dispatch));
+    });
+};
+var withReduxActions_default = withReduxActions;
+export { withReduxActions_default as default };