@mailstep/design-system 0.8.31-beta.3 → 0.8.31

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.31-beta.3",
+  "version": "0.8.31",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
-  "module": "./ui/index.es.js",
+  "module": "./ui/index.js",
   "types": "./ui/index.d.ts",
   "files": [
     "ui",
@@ -12,8 +12,8 @@
   ],
   "scripts": {
     "storybook": "storybook dev -p 6006",
-    "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": "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-storybook": "storybook build",
     "deploy": "npm run build && npm publish ./build",
     "deploy:win": "npm run build:win && npm publish ./build",
@@ -26,10 +26,6 @@
     "*.{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",
@@ -40,14 +36,15 @@
     "@fortawesome/pro-regular-svg-icons": "^6.0.0",
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/core": "3.17.2",
-    "@lingui/react": "3.17.2",
+    "@lingui/core": "^5.0.0",
+    "@lingui/react": "^5.0.0",
     "@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",
@@ -62,11 +59,9 @@
     "@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",
-    "babel-loader": "^9.1.3",
-    "babel-plugin-macros": "^3.1.0",
-    "babel-plugin-named-exports-order": "^0.0.2",
+    "@xstyled/system": "^3.8.0",
+    "babel-loader": "^10.1.1",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-standard-with-typescript": "^34.0.1",
@@ -80,9 +75,9 @@
     "eslint-plugin-storybook": "10.2.8",
     "faker": "^5.1.0",
     "husky": "^9.1.7",
-    "immer": "9.0.7",
+    "immer": "^9.0.19",
     "lint-staged": "^16.4.0",
-    "lodash": "^4.17.21",
+    "lodash": "^4.18.0",
     "luxon": "^3.4.4",
     "moment": "^2.30.1",
     "prettier": "2.8.8",
@@ -104,11 +99,9 @@
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
+    "tsdown": "^0.21.9",
     "tslib": "^2.6.2",
-    "typescript": "5.1.3",
-    "vite": "^5.0.10",
-    "vite-plugin-dts": "^3.6.4",
-    "vite-plugin-static-copy": "^1.0.0",
+    "typescript": "^5.9.3",
     "webpack": "^5.82.1"
   },
   "peerDependencies": {
@@ -122,12 +115,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": "3.17.2",
-    "@lingui/react": "3.17.2",
+    "@lingui/core": "^5.0.0",
+    "@lingui/react": "^5.0.0",
     "@popperjs/core": "^2.11.8",
     "@xstyled/styled-components": "^3.8.0",
-    "babel-plugin-macros": "^3.1.0",
-    "immer": "9.0.7",
+    "@xstyled/system": "^3.8.0",
+    "immer": "^9.0.19",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "moment": "^2.30.1",
@@ -147,7 +140,7 @@
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
     "tslib": "^2.6.2",
-    "typescript": "5.1.3"
+    "typescript": "^5.9.3"
   },
   "resolutions": {
     "jackspeak": "2.1.1"

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

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

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -1,64 +1,107 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+import { 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 })] });
 };
-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;
+//#endregion
+export { CommonGrid as default };

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

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

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -1,85 +1,189 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+import 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 __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;
+//#endregion
+export { CommonGridContainer as default };

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

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-
+import type { 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,21 +1,11 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+import { jsx } 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
+	});
 };
-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;
+//#endregion
+export { withProps as default };

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;