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

package/ui/Blocks/CommonGrid/components/Filters/TextRange/TextRange.js

@@ -1,96 +1,164 @@
-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 { useClickOutside } from "../../../../Modal/hooks/useClickOutside.js";
+import { Input } from "../../../../../Forms/Input/Input.js";
+import { useEvent } from "../../../hooks/useEvent.js";
+import IconList from "../../IconList/IconList.js";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/TextRange/TextRange.tsx
+const OverlayComponentDefault = ({ children }) => /* @__PURE__ */ jsx("div", { children });
+const ipv4 = /^([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])$/;
+const createTextComparators = () => [
+	{
+		label: i18n._({
+			id: "dataGrid.comparator.contains",
+			message: "Contains"
+		}),
+		value: "like",
+		icon: "check"
+	},
+	{
+		label: i18n._({
+			id: "dataGrid.comparator.notContains",
+			message: "Not contains"
+		}),
+		value: "notLike",
+		icon: "false"
+	},
+	{
+		label: i18n._({
+			id: "dataGrid.comparator.equals",
+			message: "Equals"
+		}),
+		value: "eq",
+		icon: "equals"
+	},
+	{
+		label: i18n._({
+			id: "dataGrid.comparator.notEquals",
+			message: "Not equal"
+		}),
+		value: "neq",
+		icon: "notEqual"
+	},
+	{
+		label: i18n._({
+			id: "dataGrid.comparator.startsWith",
+			message: "Starts with"
+		}),
+		value: "startsWith",
+		icon: "startsWith"
+	},
+	{
+		label: i18n._({
+			id: "dataGrid.comparator.endsWith",
+			message: "Ends with"
+		}),
+		value: "endsWith",
+		icon: "endsWith"
+	}
+];
+const createPresentTextComparators = () => [{
+	label: i18n._({
+		id: "dataGrid.comparator.contains",
+		message: "Contains"
+	}),
+	value: "like",
+	icon: "check"
+}, {
+	label: i18n._({
+		id: "dataGrid.comparator.equals",
+		message: "Equals"
+	}),
+	value: "in",
+	icon: "equals"
+}];
+const createEqualComparators = () => [{
+	label: i18n._({
+		id: "dataGrid.comparator.equals",
+		message: "Equals"
+	}),
+	value: "eq",
+	icon: "equals"
+}, {
+	label: i18n._({
+		id: "dataGrid.comparator.notEquals",
+		message: "Not equal"
+	}),
+	value: "neq",
+	icon: "notEqual"
+}];
+const validations = { ip: {
+	check: (value) => ipv4.test(value.trim()),
+	errorMsg: /* @__PURE__ */ jsx(Trans, {
+		id: "dataGrid.errors.ipValidationError",
+		message: "Value is not valid ip"
+	})
+} };
+const TextRange = (props) => {
+	const { name, value = {}, label, onChange, className, OverlayComponent = OverlayComponentDefault, eqOnly, isPresent, isEqual, defaultComparator, comparators, validation: validationKey, ...rest } = props;
+	const eqOnlyTxt = i18n._({
+		id: "dataGrid.filterTxtEqWarning",
+		message: "This filter can only do exact match"
+	});
+	const [isOpen, setOpen] = useState(false);
+	const textComparators = createTextComparators();
+	const presentTextComparators = createPresentTextComparators();
+	const equalComparators = createEqualComparators();
+	const fallbackComparator = defaultComparator || comparators?.[0]?.value || textComparators[0].value;
+	const comparator = eqOnly ? "eq" : value?.comparator || fallbackComparator;
+	const comparatorOptions = comparators || (isEqual ? equalComparators : isPresent ? presentTextComparators : textComparators);
+	const fieldValue = value?.value || "";
+	const pickerRef = useClickOutside({ onClose: useCallback(() => {
+		setOpen(false);
+	}, []) });
+	const togglePicker = useCallback(() => {
+		setOpen(!isOpen);
+	}, [isOpen, setOpen]);
+	const validation = !!validationKey && validations[validationKey];
+	const isInvalid = validation && Boolean(fieldValue && !validation.check(String(fieldValue)));
+	const onChangeTextInput = useEvent((event) => {
+		const txtValue = event.target.value;
+		if (txtValue) onChange({
+			comparator,
+			value: txtValue,
+			isInvalid: validation && !validation.check(txtValue)
+		});
+		else onChange(null);
+	});
+	const onChangeComparator = useEvent((option) => {
+		onChange({
+			comparator: option.value,
+			value: fieldValue,
+			isInvalid
+		});
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: pickerRef,
+		children: [/* @__PURE__ */ jsx(Input, {
+			name,
+			"data-test": name,
+			"data-cy": `${name}Inp`,
+			value: fieldValue,
+			label,
+			onChange: onChangeTextInput,
+			iconOnClick: !eqOnly ? togglePicker : void 0,
+			icon: !eqOnly ? "ellipsisVertical" : "warning",
+			iconPlacement: "right",
+			iconTooltip: eqOnly ? eqOnlyTxt : void 0,
+			type: "text",
+			className,
+			error: !!validation && isInvalid && validation.errorMsg || "",
+			errorAppearance: "tooltip",
+			autoComplete: "off",
+			...rest
+		}), isOpen && /* @__PURE__ */ jsx(OverlayComponent, { children: /* @__PURE__ */ jsx(IconList, {
+			list: comparatorOptions,
+			selected: comparator,
+			onClick: onChangeComparator
+		}) })]
+	});
 };
-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 } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import { Input } from '../../../../../Forms/Input/Input';
-import { useClickOutside } from '../../../../Modal/hooks/useClickOutside';
-import { useEvent } from '../../../hooks/useEvent';
-import IconList from '../../IconList/IconList';
-import { i18n } from '@lingui/core';
-import { Trans } from '@lingui/react';
-var OverlayComponentDefault = function (_a) {
-    var children = _a.children;
-    return _jsx("div", { children: children });
-};
-export var ipv4 = /^([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])$/;
-var createTextComparators = function () { return [
-    { label: i18n._({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
-    { label: i18n._({ id: 'dataGrid.comparator.notContains', message: 'Not contains' }), value: 'notLike', icon: 'false' },
-    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
-    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
-    { label: i18n._({ id: 'dataGrid.comparator.startsWith', message: 'Starts with' }), value: 'startsWith', icon: 'startsWith' },
-    { label: i18n._({ id: 'dataGrid.comparator.endsWith', message: 'Ends with' }), value: 'endsWith', icon: 'endsWith' }
-]; };
-var createPresentTextComparators = function () { return [
-    { label: i18n._({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
-    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'in', icon: 'equals' }
-]; };
-var createEqualComparators = function () { return [
-    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
-    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' }
-]; };
-var validations = {
-    ip: {
-        check: function (value) { return ipv4.test(value.trim()); },
-        errorMsg: _jsx(Trans, { id: "dataGrid.errors.ipValidationError", message: "Value is not valid ip" })
-    }
-};
-var TextRange = function (props) {
-    var _a;
-    var name = props.name, _b = props.value, value = _b === void 0 ? {} : _b, label = props.label, onChange = props.onChange, className = props.className, _c = props.OverlayComponent, OverlayComponent = _c === void 0 ? OverlayComponentDefault : _c, eqOnly = props.eqOnly, isPresent = props.isPresent, isEqual = props.isEqual, defaultComparator = props.defaultComparator, // from filterExtraProps
-    comparators = props.comparators, // from filterExtraProps or customComparators
-    validationKey = props.validation, rest = __rest(props, ["name", "value", "label", "onChange", "className", "OverlayComponent", "eqOnly", "isPresent", "isEqual", "defaultComparator", "comparators", "validation"]);
-    var eqOnlyTxt = i18n._({ id: 'dataGrid.filterTxtEqWarning', message: 'This filter can only do exact match' });
-    var _d = useState(false), isOpen = _d[0], setOpen = _d[1];
-    var textComparators = createTextComparators();
-    var presentTextComparators = createPresentTextComparators();
-    var equalComparators = createEqualComparators();
-    var fallbackComparator = defaultComparator || ((_a = comparators === null || comparators === void 0 ? void 0 : comparators[0]) === null || _a === void 0 ? void 0 : _a.value) || textComparators[0].value;
-    var comparator = eqOnly ? 'eq' : (value === null || value === void 0 ? void 0 : value.comparator) || fallbackComparator;
-    var defaultComparators = isEqual ? equalComparators : isPresent ? presentTextComparators : textComparators;
-    var comparatorOptions = comparators || defaultComparators;
-    var fieldValue = (value === null || value === void 0 ? void 0 : value.value) || '';
-    var onClose = useCallback(function () {
-        setOpen(false);
-    }, []);
-    var pickerRef = useClickOutside({ onClose: onClose });
-    var togglePicker = useCallback(function () {
-        setOpen(!isOpen);
-    }, [isOpen, setOpen]);
-    var validation = !!validationKey && validations[validationKey];
-    var isInvalid = validation && Boolean(fieldValue && !validation.check(String(fieldValue)));
-    var onChangeTextInput = useEvent(function (event) {
-        var txtValue = event.target.value;
-        if (txtValue) {
-            onChange({ comparator: comparator, value: txtValue, isInvalid: validation && !validation.check(txtValue) });
-        }
-        else {
-            onChange(null);
-        }
-    });
-    var onChangeComparator = useEvent(function (option) {
-        onChange({ comparator: option.value, value: fieldValue, isInvalid: isInvalid });
-    });
-    return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, "data-test": name, "data-cy": "".concat(name, "Inp"), value: fieldValue, label: label, onChange: onChangeTextInput, iconOnClick: !eqOnly ? togglePicker : undefined, icon: !eqOnly ? 'ellipsisVertical' : 'warning', iconPlacement: "right", iconTooltip: eqOnly ? eqOnlyTxt : undefined, type: "text", className: className, error: (!!validation && isInvalid && validation.errorMsg) || '', errorAppearance: "tooltip", autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: comparatorOptions, selected: comparator, onClick: onChangeComparator }) }))] }));
-};
-export default TextRange;
+//#endregion
+export { TextRange as default, ipv4 };

package/ui/Blocks/CommonGrid/components/Filters/TextRange/index.d.ts

@@ -1,3 +1,2 @@
-import { default as TextRange } from './TextRange';
-
+import TextRange from './TextRange';
 export default TextRange;

package/ui/Blocks/CommonGrid/components/Filters/TextRange/index.js

@@ -1,2 +1,5 @@
-import TextRange from './TextRange';
-export default TextRange;
+import TextRange from "./TextRange.js";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/TextRange/index.ts
+var TextRange_default = TextRange;
+//#endregion
+export { TextRange_default as default };

package/ui/Blocks/CommonGrid/components/Filters/TextRange/types.d.ts

@@ -1,5 +1,4 @@
 import { FilterComponentProps, Comparator } from '../../../types';
-
 export type TextRangeComparator = 'like' | 'notLike' | 'eq' | 'neq' | 'startsWith' | 'endsWith' | 'contains';
 export type TextRangeValue = {
     comparator?: TextRangeComparator;

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

@@ -1,8 +1,7 @@
-import { FC } from 'react';
-import { FloatingButtonProps } from '../../types';
-
-export declare const StyledButton: import('styled-components').StyledComponent<"button", import('@xstyled/system').Theme, {}, never>;
-export declare const StyledCross: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+import type { FC } from 'react';
+import { type FloatingButtonProps } from '../../types';
+export declare const StyledButton: import("styled-components").StyledComponent<"button", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const StyledCross: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     isOpen: boolean;
 }, never>;
 declare const FloatingButton: FC<FloatingButtonProps>;

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

@@ -1,36 +1,81 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import { DropdownMenu } from "../../../../Elements/DropdownMenu/DropdownMenu.js";
+import "../../../../Elements/DropdownMenu/index.js";
+import Popover from "../../../Popover/index.js";
+import { useCallback, useRef, useState } from "react";
+import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/FloatingButton/FloatingButton.tsx
+const FloatingWrapper = styled$1.div`
+  display: block;
+  position: absolute;
+  bottom: 20px;
+  right: 24px;
+  @media (min-width: 1024px) {
+    display: none;
+  }
+`;
+const StyledDropdownMenu = styled$1(DropdownMenu)`
+  min-width: 160px;
+  width: max-content;
+`;
+const StyledButton = styled$1.button`
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: none;
+  background-color: red1;
+  display: flex;
+  z-index: 1;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 65px;
+  right: 24px;
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+const StyledCross = styled$1.div`
+  .line {
+    border: 1px solid white;
+    display: flex;
+    width: 16px;
+    background-color: white;
+    transition: 0.3s;
+  }
+  > :nth-child(1) {
+    transform: ${({ isOpen }) => isOpen ? "rotate(135deg) translate(1px, 0)" : "none"};
+  }
+  > :nth-child(2) {
+    transform: ${({ isOpen }) => isOpen ? "rotate(45deg) translate(-1px, -1px)" : "rotate(90deg) translate(-2px, 0)"};
+  }
+`;
+const FloatingButton = ({ options, onClick }) => {
+	const [showDropdownMenu, setShowDropdownMenu] = useState(false);
+	const ref = useRef(null);
+	const onClose = useCallback(() => {
+		setShowDropdownMenu(false);
+	}, []);
+	return /* @__PURE__ */ jsx(FloatingWrapper, { children: /* @__PURE__ */ jsxs(StyledButton, {
+		ref,
+		onClick: useCallback(() => {
+			if (options && options?.length > 0) setShowDropdownMenu((prev) => !prev);
+			onClick?.();
+		}, [onClick, options]),
+		children: [/* @__PURE__ */ jsxs(StyledCross, {
+			isOpen: showDropdownMenu,
+			children: [/* @__PURE__ */ jsx("span", { className: "line" }), /* @__PURE__ */ jsx("span", { className: "line" })]
+		}), showDropdownMenu && /* @__PURE__ */ jsx(Popover, {
+			parentRef: ref,
+			onClose,
+			placement: "top-end",
+			children: /* @__PURE__ */ jsx(StyledDropdownMenu, {
+				showMenu: true,
+				items: options
+			})
+		})]
+	}) });
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from 'react';
-import DropdownMenu from '../../../../Elements/DropdownMenu';
-import Popover from '../../../Popover';
-import styled from '@xstyled/styled-components';
-var FloatingWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  position: absolute;\n  bottom: 20px;\n  right: 24px;\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  display: block;\n  position: absolute;\n  bottom: 20px;\n  right: 24px;\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])));
-var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 160px;\n  width: max-content;\n"], ["\n  min-width: 160px;\n  width: max-content;\n"])));
-export var StyledButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  border: none;\n  background-color: red1;\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  bottom: 65px;\n  right: 24px;\n\n  :hover {\n    cursor: pointer;\n  }\n"], ["\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  border: none;\n  background-color: red1;\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  bottom: 65px;\n  right: 24px;\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
-export var StyledCross = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  .line {\n    border: 1px solid white;\n    display: flex;\n    width: 16px;\n    background-color: white;\n    transition: 0.3s;\n  }\n  > :nth-child(1) {\n    transform: ", ";\n  }\n  > :nth-child(2) {\n    transform: ", ";\n  }\n"], ["\n  .line {\n    border: 1px solid white;\n    display: flex;\n    width: 16px;\n    background-color: white;\n    transition: 0.3s;\n  }\n  > :nth-child(1) {\n    transform: ", ";\n  }\n  > :nth-child(2) {\n    transform: ", ";\n  }\n"])), function (_a) {
-    var isOpen = _a.isOpen;
-    return (isOpen ? 'rotate(135deg) translate(1px, 0)' : 'none');
-}, function (_a) {
-    var isOpen = _a.isOpen;
-    return (isOpen ? 'rotate(45deg) translate(-1px, -1px)' : 'rotate(90deg) translate(-2px, 0)');
-});
-var FloatingButton = function (_a) {
-    var options = _a.options, onClick = _a.onClick;
-    var _b = useState(false), showDropdownMenu = _b[0], setShowDropdownMenu = _b[1];
-    var ref = useRef(null);
-    var onClose = useCallback(function () {
-        setShowDropdownMenu(false);
-    }, []);
-    var handleOnClick = useCallback(function () {
-        if (options && (options === null || options === void 0 ? void 0 : options.length) > 0) {
-            setShowDropdownMenu(function (prev) { return !prev; });
-        }
-        onClick === null || onClick === void 0 ? void 0 : onClick();
-    }, [onClick, options]);
-    return (_jsx(FloatingWrapper, { children: _jsxs(StyledButton, { ref: ref, onClick: handleOnClick, children: [_jsxs(StyledCross, { isOpen: showDropdownMenu, children: [_jsx("span", { className: "line" }), _jsx("span", { className: "line" })] }), showDropdownMenu && (_jsx(Popover, { parentRef: ref, onClose: onClose, placement: "top-end", children: _jsx(StyledDropdownMenu, { showMenu: true, items: options }) }))] }) }));
-};
-export default FloatingButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//#endregion
+export { StyledButton, StyledCross, FloatingButton as default };

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

@@ -1,3 +1,2 @@
-import { default as FloatingButton } from './FloatingButton';
-
+import FloatingButton from './FloatingButton';
 export default FloatingButton;

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

@@ -1,2 +1,5 @@
-import FloatingButton from './FloatingButton';
-export default FloatingButton;
+import FloatingButton from "./FloatingButton.js";
+//#region packages/ui/Blocks/CommonGrid/components/FloatingButton/index.tsx
+var FloatingButton_default = FloatingButton;
+//#endregion
+export { FloatingButton_default as default };

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/GridInfo/index.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import type { FC } from 'react';
 type Props = {
     isSortTerminatedAppeal?: boolean;
     isSortTerminated?: boolean;