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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.31",
+  "version": "0.8.32-beta.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

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

@@ -7,6 +7,7 @@ type Props = CommonGridProps & {
     displayColumnsDefinitions: ColumnDefinition[];
     hasGroups: boolean;
     hasFilters: boolean;
+    onCellClick?: (columnName: string) => void;
 };
 declare const CommonGrid: FC<Props>;
 export default CommonGrid;

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -18,7 +18,7 @@ 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 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, onCellClick }) => {
 	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);
@@ -94,6 +94,7 @@ const CommonGrid = ({ filters, comparators, handleDragEnd, gridSelectors, gridAc
 						onRowAction,
 						onUxChange: handleUxChange,
 						onRowClick,
+						onCellClick,
 						columns: displayColumnsDefinitions,
 						displayColumnsWidth,
 						groups

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -6,6 +6,8 @@ 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 { GridAggregation } from "./components/GridAggregation/GridAggregation.js";
+import "./components/GridAggregation/index.js";
 import { GridInfo } from "./components/GridInfo/index.js";
 import { GridModals } from "./components/GridModals/index.js";
 import MobileFilterModal from "./components/MobileFilterModal.js";
@@ -24,10 +26,11 @@ 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 { optimizeFilters = false, extraControlButtons, onBatchAction, processCheckedValues, processCheckedValuesTitle, hideControlButtons, quickFilter, floatingButtonProps, queryRowsParam, customPaginationHandler, autoHeight = true, gridName, withPresets = true, withManageColumnButton = true, withPagination = true, withAggregation = 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 [activeColumnName, setActiveColumnName] = useState(null);
 	const gridRef = useRef(null);
 	const withButtonStrip = !!extendedExtraControlButtons?.length || !hideControlButtons || !!withPresets || !!withManageColumnButton;
 	const hasGroups = !!props.columnsDefinitions.find((col) => col.group);
@@ -98,10 +101,11 @@ const CommonGridContainer = (props) => {
 					hasFilters,
 					hasGroups,
 					isSortTerminated,
+					onCellClick: setActiveColumnName,
 					hasColouredRows: true
 				})]
 			}), /* @__PURE__ */ jsxs(BottomWrapper, {
-				withPagination,
+				hasContent: withPagination || withAggregation,
 				children: [(processCheckedValues || !!actionColumnDefinition?.actionOptions?.length) && /* @__PURE__ */ jsx(ActionHead_default, {
 					rowsData,
 					onBatchAction,
@@ -115,31 +119,39 @@ const CommonGridContainer = (props) => {
 					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
-						})]
-					})]
+					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
+							})]
+						}),
+						withAggregation && /* @__PURE__ */ jsx(GridAggregation, {
+							rowsData,
+							columns: displayColumnsDefinitions,
+							activeColumnName
+						})
+					]
 				})]
 			})]
 		}),
@@ -169,7 +181,7 @@ const CommonGridContainer = (props) => {
 			filterValues: gridSelectors.filter,
 			setFilters: gridActions.setFilters,
 			rowsData,
-			uxState: gridSelectors.uxState || {},
+			uxState: gridSelectors.uxState,
 			handleUxChange: gridActions.handleUxChange,
 			onAsyncLoadFilterOptions: passDownProps.onAsyncLoadFilterOptions,
 			actionColumn: actionColumnDefinition,

package/ui/Blocks/CommonGrid/components/DataCell.js

@@ -14,6 +14,7 @@ const DataCell = ({ column, group, rowData, onRowAction, displayColumnWidth, row
 	if (column.cellComponent) return /* @__PURE__ */ jsx(Wrapper, {
 		className: cellClassName,
 		...wrapperBaseProps,
+		"data-column-name": column.name,
 		children: /* @__PURE__ */ jsx(column.cellComponent, {
 			rowData,
 			onRowAction,
@@ -24,11 +25,12 @@ const DataCell = ({ column, group, rowData, onRowAction, displayColumnWidth, row
 	else return /* @__PURE__ */ jsx(Wrapper, {
 		className: cellClassName,
 		...wrapperBaseProps,
+		"data-column-name": column.name,
 		children: column.formatRowValue ? column.formatRowValue(rowData) : get(column.name, rowData)
 	});
 };
 const MemoDataCell = React.memo(DataCell, (prevProps, newProps) => {
-	if (prevProps.rowData !== newProps.rowData || prevProps.displayColumnWidth !== newProps.displayColumnWidth || prevProps.column?.fixedSize != newProps.column?.fixedSize || prevProps.column?.flexGrow != newProps.column?.flexGrow || prevProps.column?.flexShrink != newProps.column?.flexShrink || prevProps.group?.start != newProps.group?.start || prevProps.group?.end != newProps.group?.end) return false;
+	if (prevProps.rowData !== newProps.rowData || prevProps.displayColumnWidth !== newProps.displayColumnWidth || prevProps.column?.fixedSize !== newProps.column?.fixedSize || prevProps.column?.flexGrow !== newProps.column?.flexGrow || prevProps.column?.flexShrink !== newProps.column?.flexShrink || prevProps.group?.start !== newProps.group?.start || prevProps.group?.end !== newProps.group?.end) return false;
 	if ((prevProps.column?.formatRowValue || newProps.column?.formatRowValue) && prevProps.column?.formatRowValue !== newProps.column?.formatRowValue) return false;
 	if ((prevProps.column?.cellComponent || newProps.column?.cellComponent) && (prevProps.column?.cellComponent !== newProps.column?.cellComponent || prevProps.onRowAction !== newProps.onRowAction)) return false;
 	return true;

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

@@ -10,6 +10,7 @@ type DataRowProps = {
     onUxChange?: (uxKey: keyof UxState, uxValue: any) => void;
     onRowClick?: (id: string, props: RowProps) => void;
     onRowAction?: (id: string, field: string, value: any, rowData?: RowProps) => void;
+    onCellClick?: (columnName: string) => void;
     createLink?: (params?: object) => string;
     displayColumnsWidth: Required<GridSelectorsType>['columnsWidth'];
     groups: Group[];

package/ui/Blocks/CommonGrid/components/DataRow.js

@@ -5,7 +5,7 @@ import { useTimeMeasurement } from "./utils.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Blocks/CommonGrid/components/DataRow.tsx
-const DataRow = ({ columns, rowData, rowIndex, uxState, allowRowSelect, allowRowSelectOnAction, onUxChange, onRowClick, onRowAction, displayColumnsWidth, groups, isEven }) => {
+const DataRow = ({ columns, rowData, rowIndex, uxState, allowRowSelect, allowRowSelectOnAction, onUxChange, onRowClick, onRowAction, onCellClick, displayColumnsWidth, groups, isEven }) => {
 	const isChecked = !!uxState.checkedRows?.[rowData.id];
 	const handleRowAction = React.useCallback((id, field, value, rowData) => {
 		onRowAction?.(id, field, value, rowData);
@@ -24,11 +24,14 @@ const DataRow = ({ columns, rowData, rowIndex, uxState, allowRowSelect, allowRow
 			child = child.parentElement;
 			canPropagation = child?.dataset?.propagation === "true";
 		}
+		const columnName = parent?.dataset?.columnName;
+		if (columnName && onCellClick) onCellClick(columnName);
 		if (!classes.includes("dataRow") && !classes.includes("cell") && !canPropagation) return;
 		if (onUxChange && allowRowSelect) onUxChange("selectedRow", rowData.id);
 		if (onRowClick) onRowClick(rowData.id, rowData);
 	}, [
 		onRowClick,
+		onCellClick,
 		onUxChange,
 		rowData
 	]) });

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

@@ -0,0 +1,9 @@
+import { type FC } from 'react';
+import { type ColumnDefinition, type RowProps } from '../../types';
+type GridAggregationProps = {
+    rowsData: RowProps[];
+    columns: ColumnDefinition[];
+    activeColumnName: string | null;
+};
+export declare const GridAggregation: FC<GridAggregationProps>;
+export {};

package/ui/Blocks/CommonGrid/components/GridAggregation/GridAggregation.js

@@ -0,0 +1,34 @@
+import Select from "../../../../Elements/Select/Select.js";
+import { useGridAggregation } from "./hooks/useGridAggregation.js";
+import { ColumnTitle, StyledSelect, Wrapper } from "./styles.js";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/GridAggregation/GridAggregation.tsx
+const GridAggregation = ({ rowsData, columns, activeColumnName }) => {
+	const [operation, setOperation] = useState("sum");
+	const { column, numericValues, operationOptions, selectedOption } = useGridAggregation({
+		rowsData,
+		columns,
+		activeColumnName,
+		operation
+	});
+	return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(StyledSelect, { children: [/* @__PURE__ */ jsx(Select, {
+		name: "aggregationOperation",
+		menuPlacement: "top",
+		style: "gridFilter",
+		options: operationOptions,
+		value: operation,
+		isDarkPlaceholderText: true,
+		onChange: useCallback((option) => {
+			if (option && "value" in option) setOperation(option.value);
+		}, []),
+		title: selectedOption?.label,
+		disabled: !numericValues?.length,
+		isSearchable: false
+	}), /* @__PURE__ */ jsx(ColumnTitle, {
+		title: column?.title,
+		children: column?.title
+	})] }) });
+};
+//#endregion
+export { GridAggregation };

package/ui/Blocks/CommonGrid/components/GridAggregation/hooks/useGridAggregation.d.ts

@@ -0,0 +1,20 @@
+import { type ColumnDefinition, type RowProps } from '../../../types';
+import { type OperationType } from '../utils/aggregate';
+type OperationOptionType = {
+    value: OperationType;
+    label: string;
+};
+type Props = {
+    rowsData: RowProps[];
+    columns: ColumnDefinition[];
+    activeColumnName: string | null;
+    operation: OperationType;
+};
+type UseGridAggregationType = (props: Props) => {
+    column: ColumnDefinition | null;
+    numericValues: number[];
+    operationOptions: OperationOptionType[];
+    selectedOption: OperationOptionType | undefined;
+};
+export declare const useGridAggregation: UseGridAggregationType;
+export {};

package/ui/Blocks/CommonGrid/components/GridAggregation/hooks/useGridAggregation.js

@@ -0,0 +1,52 @@
+import { aggregate } from "../utils/aggregate.js";
+import { useMemo } from "react";
+import get from "lodash/fp/get";
+//#region packages/ui/Blocks/CommonGrid/components/GridAggregation/hooks/useGridAggregation.ts
+const useGridAggregation = ({ rowsData, columns, activeColumnName, operation }) => {
+	const column = useMemo(() => {
+		if (!activeColumnName || !rowsData?.length) return null;
+		const column = columns.find((c) => c.name === activeColumnName);
+		if (!column) return null;
+		return column;
+	}, [
+		columns,
+		activeColumnName,
+		rowsData
+	]);
+	const numericValues = useMemo(() => {
+		return rowsData.map((row) => {
+			const value = get(activeColumnName || "", row);
+			const rowValue = column?.formatRowValue?.(row) || value;
+			return Number(rowValue);
+		}).filter((n) => Number.isFinite(n));
+	}, [
+		rowsData,
+		activeColumnName,
+		column
+	]);
+	const operationOptions = useMemo(() => {
+		const formatter = new Intl.NumberFormat("cs-CZ");
+		return [
+			{
+				value: "sum",
+				label: `Sum${numericValues ? ` (${formatter.format(aggregate(numericValues, "sum"))})` : ""}`
+			},
+			{
+				value: "min",
+				label: `Min${numericValues ? ` (${formatter.format(aggregate(numericValues, "min"))})` : ""}`
+			},
+			{
+				value: "max",
+				label: `Max${numericValues ? ` (${formatter.format(aggregate(numericValues, "max"))})` : ""}`
+			}
+		];
+	}, [numericValues]);
+	return {
+		column,
+		numericValues,
+		operationOptions,
+		selectedOption: useMemo(() => operationOptions.find((o) => o.value === operation), [operationOptions, operation])
+	};
+};
+//#endregion
+export { useGridAggregation };

package/ui/Blocks/CommonGrid/components/GridAggregation/index.d.ts

@@ -0,0 +1 @@
+export { GridAggregation } from './GridAggregation';

package/ui/Blocks/CommonGrid/components/GridAggregation/index.js

@@ -0,0 +1,2 @@
+import { GridAggregation } from "./GridAggregation.js";
+export { GridAggregation };

package/ui/Blocks/CommonGrid/components/GridAggregation/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const Wrapper: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/styled-components").Theme, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, "color">;
+export declare const StyledSelect: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/styled-components").Theme, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, "color">;
+export declare const ColumnTitle: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/styled-components").Theme, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, "color">;

package/ui/Blocks/CommonGrid/components/GridAggregation/styles.js

@@ -0,0 +1,28 @@
+import styled$1, { x } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/CommonGrid/components/GridAggregation/styles.ts
+const Wrapper = styled$1(x.div)`
+  display: none;
+  @media (min-width: 768px) {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-right: 4px;
+    position: relative;
+  }
+`;
+const StyledSelect = styled$1(x.div)`
+  width: 150px;
+`;
+const ColumnTitle = styled$1(x.span)`
+  font-size: 8px;
+  color: gray1;
+  position: absolute;
+  top: -10px;
+  left: 1px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+`;
+//#endregion
+export { ColumnTitle, StyledSelect, Wrapper };

package/ui/Blocks/CommonGrid/components/GridAggregation/utils/aggregate.d.ts

@@ -0,0 +1,4 @@
+export type OperationType = 'sum' | 'min' | 'max';
+type AggregateType = (values: number[], operation: OperationType) => number;
+export declare const aggregate: AggregateType;
+export {};

package/ui/Blocks/CommonGrid/components/GridAggregation/utils/aggregate.js

@@ -0,0 +1,11 @@
+//#region packages/ui/Blocks/CommonGrid/components/GridAggregation/utils/aggregate.ts
+const aggregate = (values, operation) => {
+	if (values.length === 0) return 0;
+	switch (operation) {
+		case "sum": return values.reduce((acc, v) => acc + v, 0);
+		case "min": return Math.min(...values);
+		case "max": return Math.max(...values);
+	}
+};
+//#endregion
+export { aggregate };

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

@@ -10,7 +10,7 @@ type Props = {
     filterValues?: GridSelectorsType['filter'];
     setFilters: Required<GridActionsType>['setFilters'];
     rowsData: RowProps[];
-    uxState: UxState;
+    uxState?: UxState;
     handleUxChange?: GridActionsType['handleUxChange'];
     onAsyncLoadFilterOptions?: (key: string, value: string) => void;
     onClearSettings?: () => void;

package/ui/Blocks/CommonGrid/components/TablePagination/TablePagination.js

@@ -1,4 +1,3 @@
-import { Paragraph4 } from "../../../../Elements/Typography/Typography.js";
 import Select from "../../../../Elements/Select/Select.js";
 import { rowsPerPageOptions } from "../../utils/constants.js";
 import { useCallback, useMemo } from "react";
@@ -17,7 +16,14 @@ const Wrapper = styled$1.span`
   }
 `;
 const StyledSelect = styled$1(x.div)`
+  display: flex;
+  align-items: center;
+  gap: 8px;
   margin-right: 15px;
+  width: 135px;
+  font-size: 14px;
+  white-space: nowrap;
+  color: gray1;
   @media (min-width: 1024px) {
     margin-right: 8px;
   }
@@ -41,26 +47,20 @@ const TablePagination = ({ gridActions, gridSelectors, autoRowsPerPage, customPa
 		page,
 		customPaginationHandler
 	]);
-	return /* @__PURE__ */ jsxs(Wrapper, { children: [/* @__PURE__ */ jsx(StyledSelect, {
-		minWidth: "110px",
-		children: /* @__PURE__ */ jsx(Select, {
-			name: "rowsPerPage",
-			menuPlacement: "top",
-			style: "gridFilter",
-			placeholder: `${rowsPerPage}`,
-			options,
-			value: rowsPerPage,
-			isDarkPlaceholderText: true,
-			onChange: onSetRowsPerPage
-		})
-	}), /* @__PURE__ */ jsx(Paragraph4, {
-		variant: "normal",
-		mr: "20px",
-		children: /* @__PURE__ */ jsx(Trans, {
-			id: "dataGrid.resultsPerPage",
-			message: "Results per page"
-		})
-	})] });
+	return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(StyledSelect, { children: [/* @__PURE__ */ jsx(Trans, {
+		id: "dataGrid.perPage",
+		message: "Per page"
+	}), /* @__PURE__ */ jsx(Select, {
+		name: "rowsPerPage",
+		menuPlacement: "top",
+		style: "gridFilter",
+		placeholder: `${rowsPerPage}`,
+		options,
+		value: rowsPerPage,
+		isDarkPlaceholderText: true,
+		onChange: onSetRowsPerPage,
+		isSearchable: false
+	})] }) });
 };
 //#endregion
 export { TablePagination as default };

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js

@@ -92,8 +92,8 @@ const columnDefinitions = [
 		}
 	},
 	{
-		name: "advancedColumn",
-		title: "Advanced Column",
+		name: "formatedRowValue",
+		title: "Formated Row Value",
 		flexBasis: 160,
 		formatRowValue: (row) => {
 			return `${row.numberColumn / 4 * row.textColumn.length}`;

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

@@ -1,5 +1,5 @@
 export declare const BottomWrapper: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/styled-components").Theme, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme> & {
-    withPagination: boolean;
+    hasContent: boolean;
 }, "color">;
 export declare const ContentContainer: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/styled-components").Theme, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, "color">;
 export declare const CommonGridWrap: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/styled-components").Theme, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme> & {
@@ -12,6 +12,7 @@ export declare const CommonGridWithStyles: import("styled-components").StyledCom
     displayColumnsDefinitions: import("./types").ColumnDefinition[];
     hasGroups: boolean;
     hasFilters: boolean;
+    onCellClick?: (columnName: string) => void;
 }>, import("@xstyled/styled-components").Theme, {
     withButtonStrip: boolean;
     hasGroupsOrFilters: boolean;

package/ui/Blocks/CommonGrid/styles.js

@@ -7,9 +7,9 @@ const BottomWrapper = styled$1(x.div)`
   position: relative;
   z-index: 2;
   flex-shrink: 0;
-  padding: ${({ withPagination }) => withPagination ? "10px 0" : "0px"};
+  padding-top: ${({ hasContent }) => hasContent ? "15px" : "0px"};
   width: 100%;
-  height: ${({ withPagination }) => withPagination ? 60 : 0}px;
+  height: ${({ hasContent }) => hasContent ? 65 : 0}px;
   background-color: bgLightGray;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
@@ -43,7 +43,7 @@ const CommonGridWrap = styled$1(x.div)`
 
   @media (min-width: 1024px) {
     display: block;
-    height: calc(100% - ${({ withPagination }) => withPagination ? 60 : 0}px);
+    height: calc(100% - ${({ withPagination }) => withPagination ? 65 : 0}px);
     flex: unset;
     min-height: unset;
     overflow: visible;

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

@@ -313,6 +313,7 @@ export type GridProps = CommonGridProps & {
     withPresets?: boolean;
     withManageColumnButton?: boolean;
     withPagination?: boolean;
+    withAggregation?: boolean;
     allowSortingOnlyUnderTotalRows?: [number, number];
     onReload?: () => void;
 };

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

@@ -5,5 +5,5 @@ export declare const rowsPerPageOptions: {
 export declare const gridButtonStripHeight = 75;
 export declare const gridHeadHeight = 40;
 export declare const gridFilterHeight = 39;
-export declare const gridFooterHeight = 60;
+export declare const gridFooterHeight = 65;
 export declare const gridRowHeight = 40;

package/ui/Blocks/CommonGrid/utils/constants.js

@@ -15,12 +15,20 @@ const rowsPerPageOptions = [
 	{
 		value: 100,
 		label: 100
+	},
+	{
+		value: 200,
+		label: 200
+	},
+	{
+		value: 300,
+		label: 300
 	}
 ];
 const gridButtonStripHeight = 75;
 const gridHeadHeight = 40;
 const gridFilterHeight = 39;
-const gridFooterHeight = 60;
+const gridFooterHeight = 65;
 const gridRowHeight = 40;
 //#endregion
 export { gridButtonStripHeight, gridFilterHeight, gridFooterHeight, gridHeadHeight, gridRowHeight, rowsPerPageOptions };

package/ui/Blocks/CommonGrid/utils/getRowsPerPage.js

@@ -3,7 +3,7 @@ import "./constants.js";
 const getRowsPerPage = (ref, withPagination, withButtonStrip, hasGroupsOrFilters) => {
 	const containerHeight = ref?.current?.clientHeight;
 	const gridHeaderHeight = 40 + (hasGroupsOrFilters ? 39 : 0) + (withButtonStrip ? 75 : 0);
-	if (containerHeight) return Math.floor((containerHeight - gridHeaderHeight - (withPagination ? 60 : 0)) / 40);
+	if (containerHeight) return Math.floor((containerHeight - gridHeaderHeight - (withPagination ? 65 : 0)) / 40);
 	return 0;
 };
 //#endregion

package/ui/Elements/Select/Select.js

@@ -19,7 +19,7 @@ const loadingMessage = () => i18n._({
 	id: "components.dropdown.loading",
 	message: "Loading..."
 });
-const Select = ({ label, name, value = "", options = emptyOptions, defaultOptions, loadOptions, onChange, onBlur, error, isInvalid, isLoading, isDarkPlaceholderText, spaceAround = false, disabled, onInputChange, isSearchable, isMulti, className, useSimplifiedOptions = false, showSelectAllButton = false, shortValues = true, shortVariant = "block", style, optionVariant, multiLabelVariant, containerVariant, placeholder, placeholderIcon, innerRef, maxMenuHeight, getOptionValue, onIconClick, ...passTroughProps }) => {
+const Select = ({ label, name, value = "", options = emptyOptions, defaultOptions, loadOptions, onChange, onBlur, error, isInvalid, isLoading, isDarkPlaceholderText, spaceAround = false, disabled, onInputChange, isSearchable, isMulti, className, useSimplifiedOptions = false, showSelectAllButton = false, shortValues = true, shortVariant = "block", style, optionVariant, multiLabelVariant, containerVariant, placeholder, placeholderIcon, innerRef, maxMenuHeight, getOptionValue, onIconClick, title, ...passTroughProps }) => {
 	const isAsync = !!loadOptions;
 	if (showSelectAllButton && !isMulti) console.error("CheckboxSelect incompatible props");
 	const setAllOptions = useCallback(({ options }) => {
@@ -45,6 +45,7 @@ const Select = ({ label, name, value = "", options = emptyOptions, defaultOption
 	return /* @__PURE__ */ jsxs(SpaceAround_default, {
 		spaceAround,
 		className,
+		title,
 		children: [/* @__PURE__ */ jsxs(Wrapper, { children: [label && /* @__PURE__ */ jsx(FieldLabel, {
 			htmlFor: name,
 			children: label

package/ui/Elements/Select/types.d.ts

@@ -15,6 +15,7 @@ export type ValueType = Option | Option[] | null;
 export type SelectProps = {
     label?: string;
     name?: string;
+    title?: string;
     value?: number | string | string[] | Option | Option[];
     placeholder?: string;
     loadingMessage?: (inputValue: string) => string | ReactNode;

package/ui/Elements/SpaceAround/types.d.ts

@@ -10,4 +10,5 @@ export type Props = {
     spaceAround?: SpaceAround;
     className?: string;
     spaceBetween?: boolean;
+    title?: string;
 };

package/ui/utils/translations.js

@@ -33,8 +33,8 @@ const Translations = () => {
 			message: "Reset all"
 		}),
 		/* @__PURE__ */ jsx(Trans, {
-			id: "dataGrid.resultsPerPage",
-			message: "Results per page"
+			id: "dataGrid.perPage",
+			message: "Per page"
 		}),
 		/* @__PURE__ */ jsx(Trans, {
 			id: "manageColumn.title",