@mailstep/design-system 0.8.30 → 0.8.31-beta.1

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.30",
+  "version": "0.8.31-beta.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
-  "module": "./ui/index.js",
+  "module": "./ui/index.es.js",
   "types": "./ui/index.d.ts",
   "files": [
     "ui",
@@ -12,8 +12,8 @@
   ],
   "scripts": {
     "storybook": "storybook dev -p 6006",
-    "build": "rm -rf ./build && tsdown && tsc --emitDeclarationOnly && cp package.json build && cp README.md build",
-    "build:win": "tsdown && tsc --emitDeclarationOnly && copy package.json build && copy README.md build",
+    "build": "rm -rf ./build && tsc && vite build && cp package.json build && cp README.md build",
+    "build:win": "rmdir /s /q build && tsc && vite build && 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",
@@ -26,6 +26,10 @@
     "*.{js,ts,tsx}": "yarn eslint --fix"
   },
   "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
@@ -36,15 +40,14 @@
     "@fortawesome/pro-regular-svg-icons": "^6.0.0",
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/core": "^5.0.0",
-    "@lingui/react": "^5.0.0",
+    "@lingui/core": "3.17.2",
+    "@lingui/react": "3.17.2",
     "@popperjs/core": "^2.11.8",
     "@storybook/addon-designs": "^11.1.2",
     "@storybook/addon-docs": "10.2.8",
     "@storybook/addon-links": "10.2.8",
     "@storybook/react-webpack5": "10.2.8",
     "@svgr/rollup": "^8.0.1",
-    "@swc/core": "^1.15.30",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/faker": "^4.1.11",
     "@types/lodash": "^4.17.13",
@@ -59,9 +62,11 @@
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.59.6",
     "@typescript-eslint/parser": "^5.59.6",
+    "@vitejs/plugin-react": "^4.2.1",
     "@xstyled/styled-components": "^3.8.0",
-    "@xstyled/system": "^3.8.0",
-    "babel-loader": "^10.1.1",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-macros": "^3.1.0",
+    "babel-plugin-named-exports-order": "^0.0.2",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-standard-with-typescript": "^34.0.1",
@@ -75,9 +80,9 @@
     "eslint-plugin-storybook": "10.2.8",
     "faker": "^5.1.0",
     "husky": "^9.1.7",
-    "immer": "^9.0.19",
+    "immer": "9.0.7",
     "lint-staged": "^16.4.0",
-    "lodash": "^4.18.0",
+    "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "moment": "^2.30.1",
     "prettier": "2.8.8",
@@ -99,9 +104,11 @@
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
-    "tsdown": "^0.21.9",
     "tslib": "^2.6.2",
-    "typescript": "^5.9.3",
+    "typescript": "5.1.3",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.6.4",
+    "vite-plugin-static-copy": "^1.0.0",
     "webpack": "^5.82.1"
   },
   "peerDependencies": {
@@ -115,12 +122,12 @@
     "@fortawesome/pro-regular-svg-icons": "^6.0.0",
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/core": "^5.0.0",
-    "@lingui/react": "^5.0.0",
+    "@lingui/core": "3.17.2",
+    "@lingui/react": "3.17.2",
     "@popperjs/core": "^2.11.8",
     "@xstyled/styled-components": "^3.8.0",
-    "@xstyled/system": "^3.8.0",
-    "immer": "^9.0.19",
+    "babel-plugin-macros": "^3.1.0",
+    "immer": "9.0.7",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "moment": "^2.30.1",
@@ -140,7 +147,7 @@
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
     "tslib": "^2.6.2",
-    "typescript": "^5.9.3"
+    "typescript": "5.1.3"
   },
   "resolutions": {
     "jackspeak": "2.1.1"

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

@@ -1,6 +1,7 @@
-import type { FC } from 'react';
-import type { DragEndEvent } from '@dnd-kit/core';
-import type { CommonGridProps, FiltersConfig, ColumnDefinition } from './types';
+import { FC } from 'react';
+import { DragEndEvent } from '@dnd-kit/core';
+import { CommonGridProps, FiltersConfig, ColumnDefinition } from './types';
+
 type Props = CommonGridProps & {
     filters?: FiltersConfig;
     handleDragEnd: (item: DragEndEvent) => void;

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -1,107 +1,64 @@
-import { getGroups } from "./utils/index.js";
-import DataRow from "./components/DataRow.js";
-import FilterRow from "./components/FilterRow.js";
-import FloatingButton from "./components/FloatingButton/FloatingButton.js";
-import { GridStatus } from "./components/GridStatus/index.js";
-import GroupRow from "./components/GroupRow.js";
-import HeadRow from "./components/HeadRow.js";
-import OversizedScroll from "./components/OversizedScroll.js";
-import useColumnSizes from "./hooks/useColumnSizes.js";
-import useRowsKeyControls from "./hooks/useRowsKeyControls.js";
-import useUxReset from "./hooks/useUxReset.js";
-import { initialState } from "./store/index.js";
-import { useCallback, useMemo } from "react";
-import { x } from "@xstyled/styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Blocks/CommonGrid/CommonGrid.tsx
-const rowsStyles = { outline: "none" };
-const defaultVoidFunction = (...args) => null;
-const defaultUxState = initialState.uxState;
-const defaultColumnsWidth = {};
-const CommonGrid = ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowClick, onAsyncLoadFilterOptions, columnLayout = "normal", displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps, hasGroups, hasFilters, isSortTerminated }) => {
-	const { uxState = defaultUxState, columnsWidth = defaultColumnsWidth, columnsWidthVariant, page = 1, filter, sorting, rowsPerPage = 10 } = gridSelectors;
-	const { clearUxState, handleUxChange, addFilter = defaultVoidFunction, addSorting = defaultVoidFunction, setColumnWidth = defaultVoidFunction } = gridActions;
-	const handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
-	useUxReset(rowsData, uxState, clearUxState);
-	const { displayColumnsWidth, totalColumnsWidth, gridBoxRef, handleResizeDrag } = useColumnSizes(displayColumnsDefinitions, columnsWidth, columnsWidthVariant, setColumnWidth, columnLayout, minColumnWidth);
-	const groups = useMemo(() => {
-		return getGroups(displayColumnsDefinitions);
-	}, [displayColumnsDefinitions]);
-	const commonGridRef = useCallback((node) => {
-		gridBoxRef.current = node;
-	}, []);
-	const isEmpty = !isLoading && !errorMessage && (!rowsData || rowsData.length < 1);
-	const hasFloatingChildren = isLoading || errorMessage || isEmpty;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(x.div, {
-		className: className || "",
-		children: /* @__PURE__ */ jsxs(OversizedScroll, {
-			columnLayout,
-			totalColumnsWidth,
-			floatingChildren: hasFloatingChildren && /* @__PURE__ */ jsx(GridStatus, {
-				isLoading,
-				isEmpty,
-				errorMessage
-			}),
-			ref: commonGridRef,
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "gridHead",
-				children: [
-					hasGroups && /* @__PURE__ */ jsx(GroupRow, {
-						actionColumn: actionColumnDefinition,
-						columns: displayColumnsDefinitions,
-						displayColumnsWidth,
-						groups
-					}),
-					/* @__PURE__ */ jsx(HeadRow, {
-						columns: displayColumnsDefinitions,
-						onAddSort: addSorting,
-						columnLayout,
-						sortingValues: sorting,
-						displayColumnsWidth,
-						handleResizeDrag,
-						groups,
-						handleDragEnd,
-						isSortTerminated
-					}),
-					hasFilters && /* @__PURE__ */ jsx(FilterRow, {
-						filters,
-						comparators,
-						columns: displayColumnsDefinitions,
-						actionColumn: actionColumnDefinition,
-						onChange: addFilter,
-						filterValues: filter,
-						displayColumnsWidth,
-						groups,
-						rowsData,
-						uxState,
-						handleUxChange,
-						onAsyncLoadFilterOptions
-					})
-				]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "body flx_1",
-				style: rowsStyles,
-				tabIndex: -1,
-				onKeyDown: handleRowsKeyDown,
-				children: !isLoading && rowsData && displayColumnsDefinitions && rowsData.map((row, index) => {
-					return /* @__PURE__ */ jsx(DataRow, {
-						rowData: row,
-						rowIndex: rowsPerPage * page + (index + 1) - rowsPerPage,
-						uxState,
-						isEven: hasColouredRows && (index + 1) % 2 === 0,
-						allowRowSelect,
-						allowRowSelectOnAction,
-						onRowAction,
-						onUxChange: handleUxChange,
-						onRowClick,
-						columns: displayColumnsDefinitions,
-						displayColumnsWidth,
-						groups
-					}, row.id);
-				})
-			})]
-		})
-	}), floatingButtonProps && /* @__PURE__ */ jsx(FloatingButton, { ...floatingButtonProps })] });
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-//#endregion
-export { CommonGrid as default };
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return null;
+};
+var defaultUxState = initialState.uxState;
+var defaultColumnsWidth = {};
+var CommonGrid = function (_a) {
+    var filters = _a.filters, comparators = _a.comparators, handleDragEnd = _a.handleDragEnd, 
+    // redux props
+    gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, 
+    // input props
+    isLoading = _a.isLoading, rowsData = _a.rowsData, hasColouredRows = _a.hasColouredRows, actionColumnDefinition = _a.actionColumnDefinition, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onRowAction = _a.onRowAction, onRowClick = _a.onRowClick, onAsyncLoadFilterOptions = _a.onAsyncLoadFilterOptions, _b = _a.columnLayout, columnLayout = _b === void 0 ? 'normal' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, className = _a.className, minColumnWidth = _a.minColumnWidth, errorMessage = _a.errorMessage, floatingButtonProps = _a.floatingButtonProps, hasGroups = _a.hasGroups, hasFilters = _a.hasFilters, isSortTerminated = _a.isSortTerminated;
+    var _c = gridSelectors.uxState, uxState = _c === void 0 ? defaultUxState : _c, _d = gridSelectors.columnsWidth, columnsWidth = _d === void 0 ? defaultColumnsWidth : _d, columnsWidthVariant = gridSelectors.columnsWidthVariant, _e = gridSelectors.page, page = _e === void 0 ? 1 : _e, filter = gridSelectors.filter, sorting = gridSelectors.sorting, _f = gridSelectors.rowsPerPage, rowsPerPage = _f === void 0 ? 10 : _f;
+    var clearUxState = gridActions.clearUxState, handleUxChange = gridActions.handleUxChange, _g = gridActions.addFilter, addFilter = _g === void 0 ? defaultVoidFunction : _g, _h = gridActions.addSorting, addSorting = _h === void 0 ? defaultVoidFunction : _h, _j = gridActions.setColumnWidth, setColumnWidth = _j === void 0 ? defaultVoidFunction : _j;
+    var handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
+    useUxReset(rowsData, uxState, clearUxState);
+    var _k = useColumnSizes(displayColumnsDefinitions, columnsWidth, columnsWidthVariant, setColumnWidth, columnLayout, minColumnWidth), displayColumnsWidth = _k.displayColumnsWidth, totalColumnsWidth = _k.totalColumnsWidth, gridBoxRef = _k.gridBoxRef, handleResizeDrag = _k.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 (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, totalColumnsWidth: totalColumnsWidth, floatingChildren: hasFloatingChildren && _jsx(GridStatus, { isLoading: isLoading, isEmpty: isEmpty, errorMessage: errorMessage }), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [hasGroups && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd, isSortTerminated: isSortTerminated }), hasFilters && (_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 }))] }), _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 (_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 && _jsx(FloatingButton, __assign({}, floatingButtonProps))] }));
+};
+export default CommonGrid;

package/ui/Blocks/CommonGrid/CommonGridContainer.d.ts

@@ -1,4 +1,5 @@
-import type { FC } from 'react';
-import type { GridProps } from './types';
+import { FC } from 'react';
+import { GridProps } from './types';
+
 declare const CommonGridContainer: FC<GridProps>;
 export default CommonGridContainer;

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -1,189 +1,85 @@
-import Pagination from "../../Elements/Pagination/Pagination.js";
-import "../../Elements/Pagination/index.js";
-import { useCheckDeviceWidth } from "../../utils/CheckDeviceWidth/checkDeviceWidth.js";
-import HidePrint from "../HidePrint/HidePrint.js";
-import { useModal } from "../Modal/hooks/useModal.js";
-import ActionHead_default from "./components/ActionHead/index.js";
-import { getFilters } from "./utils/index.js";
-import ControlButtons_default from "./components/ControlButtons/index.js";
-import { GridInfo } from "./components/GridInfo/index.js";
-import { GridModals } from "./components/GridModals/index.js";
-import MobileFilterModal from "./components/MobileFilterModal.js";
-import MobileSortModal from "./components/MobileSortModal.js";
-import TablePagination_default from "./components/TablePagination/index.js";
-import useEditReadAsColumn from "./hooks/useEditReadAsColumn.js";
-import { useGridAutoRowsPerPage } from "./hooks/useGridAutoRowsPerPage.js";
-import useManageColumn from "./hooks/useManageColumn.js";
-import { usePresetState } from "./hooks/usePresetsState.js";
-import { getExtendedExtraControlButtons } from "./utils/getExtendedExtraControlButtons.js";
-import { getRowsPerPage } from "./utils/getRowsPerPage.js";
-import { hasSortTerminated } from "./utils/hasSortTerminated.js";
-import { BottomWrapper, CommonGridWithStyles, CommonGridWrap, ContentContainer, StyledButtonStrip } from "./styles.js";
-import { useMemo, useRef, useState } from "react";
-import { x } from "@xstyled/styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Blocks/CommonGrid/CommonGridContainer.tsx
-const CommonGridContainer = (props) => {
-	const { optimizeFilters = false, extraControlButtons, onBatchAction, processCheckedValues, processCheckedValuesTitle, hideControlButtons, quickFilter, floatingButtonProps, queryRowsParam, customPaginationHandler, autoHeight = true, gridName, withPresets = true, withManageColumnButton = true, withPagination = true, allowSortingOnlyUnderTotalRows, onReload, ...passDownProps } = props;
-	const { gridActions, gridSelectors, rowsData, actionColumnDefinition } = passDownProps;
-	const extendedExtraControlButtons = useMemo(() => getExtendedExtraControlButtons(extraControlButtons, onReload), [extraControlButtons, onReload]);
-	const [displayManageColumnButton, setDisplayManageColumnButton] = useState(false);
-	const gridRef = useRef(null);
-	const withButtonStrip = !!extendedExtraControlButtons?.length || !hideControlButtons || !!withPresets || !!withManageColumnButton;
-	const hasGroups = !!props.columnsDefinitions.find((col) => col.group);
-	const hasFilters = !!props.columnsDefinitions.find((col) => col.filtering);
-	const hasGroupsOrFilters = hasGroups || hasFilters;
-	const autoRowsPerPage = getRowsPerPage(gridRef, withPagination, withButtonStrip, hasGroupsOrFilters);
-	const { isMobile } = useCheckDeviceWidth();
-	useGridAutoRowsPerPage({
-		autoHeight,
-		gridActions,
-		queryRowsParam,
-		selectedRowsPerPage: gridSelectors.rowsPerPage,
-		autoRowsPerPage
-	});
-	const modifiedPassDownProps = useEditReadAsColumn(passDownProps);
-	const filters = useMemo(() => getFilters(optimizeFilters), [optimizeFilters]);
-	const columns = modifiedPassDownProps.columnsDefinitions;
-	const { onOpen: openManageColumnForm, isOpen: manageColumnFormVisible, onClose } = useModal();
-	const { columnsConfigValues, setColumnsConfigOptions, onConfirmForm, resetColumnConfig, handleDragEnd, onCloseForm, displayColumnsDefinitions, manageColumnsFormDefinitions } = useManageColumn({
-		columns,
-		gridActions,
-		gridSelectors,
-		onClose
-	});
-	const { isPresetsModalOpen, onClosePresetsModal, onOpenPresetsModal, setSelectedPresetName, selectedPresetName } = usePresetState();
-	const { isOpen: isMobileFilterOpen, onOpen: onOpenMobileFilter, onClose: closeMobileFilter } = useModal();
-	const { isOpen: isMobileSortOpen, onOpen: onOpenMobileSort, onClose: closeMobileSort } = useModal();
-	const { isSortTerminatedAppeal, isSortTerminated } = hasSortTerminated({
-		allowSortingOnlyUnderTotalRows,
-		totalRowsCount: passDownProps?.totalRowsCount
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsxs(ContentContainer, {
-			ref: gridRef,
-			children: [/* @__PURE__ */ jsxs(CommonGridWrap, {
-				withPagination,
-				children: [withButtonStrip && /* @__PURE__ */ jsx(HidePrint, { children: /* @__PURE__ */ jsx(StyledButtonStrip, {
-					className: "buttonsStrip",
-					children: /* @__PURE__ */ jsx(ControlButtons_default, {
-						hideControlButtons,
-						extraControlButtons: extendedExtraControlButtons,
-						gridActions,
-						gridSelectors,
-						quickFilter,
-						columns,
-						filters,
-						setDisplayManageColumnButton,
-						displayManageColumnButton,
-						openManageColumnForm,
-						onOpenPresetsModal,
-						selectedPresetName,
-						withPresets,
-						gridName,
-						withManageColumnButton,
-						onOpenMobileFilters: onOpenMobileFilter,
-						onOpenMobileSorting: onOpenMobileSort,
-						isSortTerminated
-					})
-				}) }), /* @__PURE__ */ jsx(CommonGridWithStyles, {
-					...passDownProps,
-					...modifiedPassDownProps,
-					withButtonStrip,
-					hasGroupsOrFilters,
-					filters,
-					floatingButtonProps,
-					handleDragEnd: handleDragEnd(false),
-					displayColumnsDefinitions,
-					hasFilters,
-					hasGroups,
-					isSortTerminated,
-					hasColouredRows: true
-				})]
-			}), /* @__PURE__ */ jsxs(BottomWrapper, {
-				withPagination,
-				children: [(processCheckedValues || !!actionColumnDefinition?.actionOptions?.length) && /* @__PURE__ */ jsx(ActionHead_default, {
-					rowsData,
-					onBatchAction,
-					gridActions,
-					gridSelectors,
-					actionOptions: actionColumnDefinition?.actionOptions,
-					processCheckedValues,
-					processCheckedValuesTitle
-				}), /* @__PURE__ */ jsxs(x.div, {
-					display: "flex",
-					justifyContent: "space-between",
-					alignItems: "center",
-					w: "100%",
-					children: [!isMobile && /* @__PURE__ */ jsx(GridInfo, {
-						isSortTerminatedAppeal,
-						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?.page,
-							itemCount: passDownProps?.totalRowsCount,
-							itemPerPage: gridSelectors?.rowsPerPage || 10,
-							onPageChange: gridActions?.setPage,
-							customPaginationHandler,
-							radius: isMobile ? 3 : 5,
-							rate: isMobile ? 1 : 4
-						}), /* @__PURE__ */ jsx(TablePagination_default, {
-							gridActions,
-							gridSelectors,
-							customPaginationHandler,
-							autoRowsPerPage
-						})]
-					})]
-				})]
-			})]
-		}),
-		/* @__PURE__ */ jsx(GridModals, {
-			manageColumnFormVisible,
-			onCloseForm,
-			resetColumnConfig,
-			onConfirmForm,
-			manageColumnsFormDefinitions,
-			columnsConfigValues,
-			setColumnsConfigOptions,
-			handleDragEnd: handleDragEnd(true),
-			gridName,
-			gridActions,
-			gridSelectors,
-			onClosePresetsModal,
-			isPresetsModalOpen,
-			selectedPresetName,
-			setSelectedPresetName
-		}),
-		isMobileFilterOpen && gridActions.setFilters && /* @__PURE__ */ jsx(MobileFilterModal, {
-			isShown: isMobileFilterOpen,
-			onClose: closeMobileFilter,
-			columns: displayColumnsDefinitions,
-			filters,
-			comparators: passDownProps.comparators,
-			filterValues: gridSelectors.filter,
-			setFilters: gridActions.setFilters,
-			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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-//#endregion
-export { CommonGridContainer as default };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 (props) {
+    var _a;
+    var _b = props.optimizeFilters, optimizeFilters = _b === void 0 ? false : _b, extraControlButtons = props.extraControlButtons, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, _c = props.autoHeight, autoHeight = _c === void 0 ? true : _c, gridName = props.gridName, _d = props.withPresets, withPresets = _d === void 0 ? true : _d, _e = props.withManageColumnButton, withManageColumnButton = _e === void 0 ? true : _e, _f = props.withPagination, withPagination = _f === void 0 ? true : _f, allowSortingOnlyUnderTotalRows = props.allowSortingOnlyUnderTotalRows, onReload = props.onReload, passDownProps = __rest(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 _g = useState(false), displayManageColumnButton = _g[0], setDisplayManageColumnButton = _g[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 _h = useModal(), openManageColumnForm = _h.onOpen, manageColumnFormVisible = _h.isOpen, onClose = _h.onClose;
+    var _j = useManageColumn({
+        columns: columns,
+        gridActions: gridActions,
+        gridSelectors: gridSelectors,
+        onClose: onClose
+    }), columnsConfigValues = _j.columnsConfigValues, setColumnsConfigOptions = _j.setColumnsConfigOptions, onConfirmForm = _j.onConfirmForm, resetColumnConfig = _j.resetColumnConfig, handleDragEnd = _j.handleDragEnd, onCloseForm = _j.onCloseForm, displayColumnsDefinitions = _j.displayColumnsDefinitions, manageColumnsFormDefinitions = _j.manageColumnsFormDefinitions;
+    var _k = usePresetState(), isPresetsModalOpen = _k.isPresetsModalOpen, onClosePresetsModal = _k.onClosePresetsModal, onOpenPresetsModal = _k.onOpenPresetsModal, setSelectedPresetName = _k.setSelectedPresetName, selectedPresetName = _k.selectedPresetName;
+    var _l = useModal(), isMobileFilterOpen = _l.isOpen, onOpenMobileFilter = _l.onOpen, closeMobileFilter = _l.onClose;
+    var _m = useModal(), isMobileSortOpen = _m.isOpen, onOpenMobileSort = _m.onOpen, closeMobileSort = _m.onClose;
+    var _o = hasSortTerminated({
+        allowSortingOnlyUnderTotalRows: allowSortingOnlyUnderTotalRows,
+        totalRowsCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount
+    }), isSortTerminatedAppeal = _o.isSortTerminatedAppeal, isSortTerminated = _o.isSortTerminated;
+    return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { ref: gridRef, children: [_jsxs(CommonGridWrap, { withPagination: withPagination, children: [withButtonStrip && (_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _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 }) }) })), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { withButtonStrip: withButtonStrip, hasGroupsOrFilters: hasGroupsOrFilters, filters: filters, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasFilters: hasFilters, hasGroups: hasGroups, isSortTerminated: isSortTerminated, hasColouredRows: true }))] }), _jsxs(BottomWrapper, { withPagination: withPagination, children: [(processCheckedValues || !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionOptions: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [!isMobile && _jsx(GridInfo, { isSortTerminatedAppeal: isSortTerminatedAppeal, isSortTerminated: isSortTerminated }), withPagination && (_jsxs(x.div, { display: "flex", alignItems: "center", className: "paginatorWrapper", w: "100%", justifyContent: "flex-end", gap: "16px", children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: isMobile ? 3 : 5, rate: isMobile ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler, autoRowsPerPage: autoRowsPerPage })] }))] })] })] }), _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 && (_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 && (_jsx(MobileSortModal, { isShown: isMobileSortOpen, onClose: closeMobileSort, columns: displayColumnsDefinitions, sortingValues: gridSelectors.sorting, onAddSorting: gridActions.addSorting, onResetSorting: gridActions.resetSorting }))] }));
+};
+export default CommonGridContainer;

package/ui/Blocks/CommonGrid/HoC/withProps.d.ts

@@ -1,3 +1,4 @@
-import type { FC } from 'react';
+import { FC } from 'react';
+
 declare const withProps: (input: any) => <P>(Component: FC<P>) => FC<P>;
 export default withProps;

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

@@ -1,11 +1,21 @@
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Blocks/CommonGrid/HoC/withProps.tsx
-const withProps = (input) => (Component) => function ComponentWithProps(props) {
-	const additinalProps = typeof input === "function" ? input(props) : input;
-	return /* @__PURE__ */ jsx(Component, {
-		...props,
-		...additinalProps
-	});
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-//#endregion
-export { withProps as default };
+import { jsx as _jsx } from "react/jsx-runtime";
+var withProps = function (input) {
+    return function (Component) {
+        return function ComponentWithProps(props) {
+            var additinalProps = typeof input === 'function' ? input(props) : input;
+            return _jsx(Component, __assign({}, props, additinalProps));
+        };
+    };
+};
+export default withProps;

package/ui/Blocks/CommonGrid/HoC/withReduxActions.d.ts

@@ -1,2 +1,2 @@
-declare const withReduxActions: (gridName: string, prefix?: string) => import("react-redux").InferableComponentEnhancerWithProps<{}, {}>;
+declare const withReduxActions: (gridName: string, prefix?: string) => import('react-redux').InferableComponentEnhancerWithProps<{}, {}>;
 export default withReduxActions;