@mailstep/design-system 0.8.26 → 0.8.27-beta.0

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

@@ -0,0 +1,147 @@
+import { useClickOutside } from "../../../../Modal/hooks/useClickOutside.js";
+import { Input } from "../../../../../Forms/Input/Input.js";
+import { useEvent } from "../../../hooks/useEvent.js";
+import IconList_default from "../../IconList/index.js";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/NumberRange/NumberRange.tsx
+const OverlayComponentDefault = ({ children }) => /* @__PURE__ */ jsx("div", { children });
+const createNumberComparators = () => [
+	{
+		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.lessThan",
+			message: "Less than"
+		}),
+		value: "lt",
+		icon: "lessThen"
+	},
+	{
+		label: i18n._({
+			id: "dataGrid.comparator.lessThanOrEquals",
+			message: "Less than or equals"
+		}),
+		value: "lte",
+		icon: "lessThanEqual"
+	},
+	{
+		label: i18n._({
+			id: "dataGrid.comparator.greaterThan",
+			message: "Greater than"
+		}),
+		value: "gt",
+		icon: "greaterThan"
+	},
+	{
+		label: i18n._({
+			id: "dataGrid.comparator.greaterThanOrEquals",
+			message: "Greater than or equal"
+		}),
+		value: "gte",
+		icon: "greaterThanEqual"
+	}
+];
+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 normalizeValue = (number, isFloat, decimals) => {
+	const normalized = String(number).replace(",", ".").replace(/(?!^)-/g, "").replace(/[^0-9.-]/g, "");
+	if (isFloat || !normalized) return normalized;
+	if (normalized === "-") return "-";
+	return !decimals ? parseInt(normalized, 10) : (parseFloat(normalized) || 0).toFixed(decimals).substr(0, String(number).length);
+};
+const NumberRange = (props) => {
+	const numberComparators = createNumberComparators();
+	const { name, value = {}, label, onChange, decimals, isFloat, className, OverlayComponent = OverlayComponentDefault, comparators, defaultComparator, isEqual, ...rest } = props;
+	const [isOpen, setOpen] = useState(false);
+	const comparator = value?.comparator || defaultComparator || comparators?.[0]?.value || numberComparators[0].value;
+	const comparatorOptions = comparators || (isEqual ? createEqualComparators : numberComparators);
+	const fieldValue = value?.value || value?.value === 0 ? value.value : "";
+	const pickerRef = useClickOutside({ onClose: useCallback(() => {
+		setOpen(false);
+	}, []) });
+	const togglePicker = useCallback(() => {
+		setOpen(!isOpen);
+	}, [isOpen, setOpen]);
+	const onChangeTextInput = useEvent((event) => {
+		if (comparator === "between") {
+			const values = String(event.target.value).split(",");
+			if (values.length > 2) {
+				onChange({
+					comparator,
+					value: ""
+				});
+				return;
+			}
+			if (values.length === 2) {
+				onChange({
+					comparator,
+					value: values.map((value) => normalizeValue(value, false, 0)).join(",")
+				});
+				return;
+			}
+		}
+		const number = normalizeValue(event.target.value, isFloat, decimals);
+		onChange({
+			comparator,
+			value: number || number === 0 ? number : ""
+		});
+	});
+	const onChangeComparator = useEvent((option) => {
+		onChange({
+			comparator: option.value,
+			value: fieldValue
+		});
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: pickerRef,
+		children: [/* @__PURE__ */ jsx(Input, {
+			name,
+			value: fieldValue,
+			label,
+			"data-cy": `${name}Inp`,
+			onChange: onChangeTextInput,
+			iconOnClick: togglePicker,
+			icon: "ellipsisVertical",
+			iconPlacement: "right",
+			type: "text",
+			className,
+			autoComplete: "off",
+			...rest
+		}), isOpen && /* @__PURE__ */ jsx(OverlayComponent, { children: /* @__PURE__ */ jsx(IconList_default, {
+			list: comparatorOptions,
+			selected: comparator,
+			onClick: onChangeComparator
+		}) })]
+	});
+};
+//#endregion
+export { NumberRange as default };

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

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

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

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

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

@@ -1,5 +1,4 @@
 import { Comparator, FilterComponentProps } from '../../../types';
-
 export type ComparatorValue = 'eq' | 'neq' | 'lt' | 'lte' | 'gt' | 'gte';
 export type NumberRangeValue = {
     comparator?: ComparatorValue;

package/ui/Blocks/CommonGrid/components/Filters/NumberRange/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { Props } from './types';
-
+import { type FC } from 'react';
+import { type Props } from './types';
 export declare const ipv4: RegExp;
 declare const TextRange: FC<Props>;
 export default TextRange;

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

@@ -0,0 +1,164 @@
+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
+		}) })]
+	});
+};
+//#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

@@ -0,0 +1,5 @@
+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/Filters/TextRange/types.js

@@ -0,0 +1 @@
+export {};

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/system").Theme, {}, never>;
+export declare const StyledCross: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isOpen: boolean;
 }, never>;
 declare const FloatingButton: FC<FloatingButtonProps>;

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

@@ -0,0 +1,81 @@
+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
+			})
+		})]
+	}) });
+};
+//#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

@@ -0,0 +1,5 @@
+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/GridInfo/index.d.ts

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

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

@@ -0,0 +1,34 @@
+import Icon from "../../../../Elements/Icon/Icon.js";
+import "../../../../Elements/Icon/index.js";
+import { x } from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Blocks/CommonGrid/components/GridInfo/index.tsx
+const GridInfo = ({ isSortTerminatedAppeal, isSortTerminated }) => {
+	if (!isSortTerminatedAppeal) return null;
+	return /* @__PURE__ */ jsxs(x.span, {
+		w: "100%",
+		ml: "8px",
+		fontSize: "12px",
+		display: "flex",
+		gap: "8px",
+		alignItems: "center",
+		children: [isSortTerminatedAppeal && !isSortTerminated && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "circleTriangle",
+			size: "20px",
+			fill: "yellow70"
+		}), /* @__PURE__ */ jsx(Trans, {
+			id: "dataGrid.sortingTerminatedAppeal",
+			message: "Too many results, please set a filter"
+		})] }), isSortTerminated && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "circleTriangle",
+			size: "20px",
+			fill: "dangerColor"
+		}), /* @__PURE__ */ jsx(Trans, {
+			id: "dataGrid.sortingTerminated",
+			message: "Too many results, sorting cannot be used"
+		})] })]
+	});
+};
+//#endregion
+export { GridInfo };

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

@@ -1,7 +1,6 @@
-import { default as React, FC } from 'react';
-import { ColumnConfig, ColumnDefinition, GridActionsType, GridSelectorsType } from '../../types';
-import { DragEndEvent } from '@dnd-kit/core';
-
+import React, { type FC } from 'react';
+import type { ColumnConfig, ColumnDefinition, GridActionsType, GridSelectorsType } from '../../types';
+import type { DragEndEvent } from '@dnd-kit/core';
 type ModalsProps = {
     manageColumnFormVisible: boolean;
     onCloseForm: () => void;

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

@@ -0,0 +1,136 @@
+import { Input } from "../../../../Forms/Input/Input.js";
+import { Modal } from "../../../Modal/Modal.js";
+import { useCreatePreset } from "../../hooks/useCreatePreset.js";
+import { useDeletePreset } from "../../hooks/useDeletePreset.js";
+import { usePresetFileHandlers } from "../../hooks/usePresetFileHandlers.js";
+import { useSelectPreset } from "../../hooks/useSelectPreset.js";
+import ManageColumnForm_default from "../ManageColumnForm/index.js";
+import { PresetsModalBody } from "../PresetsModalBody/index.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Blocks/CommonGrid/components/GridModals/index.tsx
+const GridModals = ({ manageColumnFormVisible, onCloseForm, resetColumnConfig, onConfirmForm, manageColumnsFormDefinitions, columnsConfigValues, setColumnsConfigOptions, handleDragEnd, gridName, gridSelectors, gridActions, isPresetsModalOpen, onClosePresetsModal, selectedPresetName, setSelectedPresetName }) => {
+	const { handleSelectPreset } = useSelectPreset({
+		gridName,
+		gridActions,
+		setSelectedPresetName,
+		onClosePresetsModal,
+		gridSelectors
+	});
+	const { isCreatePresetModalOpen, handleCloseCreatePresetModal, onOpenCreatePresetModal, handleCreatePreset, presetName, handleChangePresetName } = useCreatePreset({
+		gridName,
+		gridActions,
+		onClosePresetsModal,
+		setSelectedPresetName,
+		filters: gridSelectors.filter
+	});
+	const { handleOpenDeletePresetModal, handleDeletePreset, onCloseDeletePresetModal, presetNameToDelete, isDeletePresetModalOpen } = useDeletePreset({
+		gridName,
+		selectedPresetName,
+		gridActions,
+		setSelectedPresetName
+	});
+	const { fileInputRef, handleImportPresets, handleExportPresets, handleImportButtonClick } = usePresetFileHandlers({
+		gridName,
+		gridActions,
+		gridSelectors
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Modal, {
+			title: /* @__PURE__ */ jsx(Trans, {
+				id: "manageColumn.title",
+				message: "Manage columns"
+			}),
+			onClose: onCloseForm,
+			onCancel: onCloseForm,
+			onExtraAction: resetColumnConfig,
+			onConfirm: onConfirmForm,
+			isShown: manageColumnFormVisible,
+			width: "auto",
+			minWidth: "350px",
+			hasFooter: true,
+			extraActionLabel: /* @__PURE__ */ jsx(Trans, {
+				id: "dataGrid.buttonClearConfig",
+				message: "Reset config"
+			}),
+			cancelLabel: /* @__PURE__ */ jsx(Trans, {
+				id: "form.buttonCancel",
+				message: "Cancel"
+			}),
+			confirmLabel: /* @__PURE__ */ jsx(Trans, {
+				id: "form.buttonConfirm",
+				message: "Confirm"
+			}),
+			children: /* @__PURE__ */ jsx(ManageColumnForm_default, {
+				columns: manageColumnsFormDefinitions,
+				columnsConfigValues,
+				setColumnsConfigOptions,
+				handleDragEnd
+			})
+		}),
+		/* @__PURE__ */ jsx(Modal, {
+			isShown: isPresetsModalOpen,
+			title: /* @__PURE__ */ jsx(Trans, {
+				id: "dataGrid.presets.title",
+				message: "Presets"
+			}),
+			onClose: onClosePresetsModal,
+			width: "narrow",
+			children: /* @__PURE__ */ jsx(PresetsModalBody, {
+				onOpenCreatePresetModal,
+				gridPresets: gridSelectors.presets,
+				handleSelectPreset,
+				handleOpenDeletePresetModal,
+				selectedPresetName,
+				handleExportPresets,
+				handleImportPresets,
+				handleImportButtonClick,
+				fileInputRef,
+				filters: gridSelectors.filter
+			})
+		}),
+		/* @__PURE__ */ jsx(Modal, {
+			isShown: isCreatePresetModalOpen,
+			title: /* @__PURE__ */ jsx(Trans, {
+				id: "dataGrid.createNewPreset.title",
+				message: "Create new preset"
+			}),
+			onCancel: handleCloseCreatePresetModal,
+			onConfirm: handleCreatePreset,
+			isConfirmDisabled: !presetName,
+			width: "narrow",
+			children: /* @__PURE__ */ jsx(Input, {
+				type: "text",
+				onChange: handleChangePresetName,
+				value: presetName,
+				label: /* @__PURE__ */ jsx(Trans, {
+					id: "dataGrid.presetName.title",
+					message: "Preset name"
+				})
+			})
+		}),
+		/* @__PURE__ */ jsx(Modal, {
+			isShown: isDeletePresetModalOpen,
+			title: /* @__PURE__ */ jsx(Trans, {
+				id: "dataGrid.deletePreset.title",
+				message: "Delete preset"
+			}),
+			onCancel: onCloseDeletePresetModal,
+			onConfirm: handleDeletePreset,
+			isConfirmDisabled: !presetNameToDelete,
+			width: "narrow",
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Trans, {
+					id: "dataGrid.deletePreset.confirm",
+					message: "Are you sure you want to delete preset"
+				}),
+				" \"",
+				presetNameToDelete,
+				"\" ?"
+			] })
+		})
+	] });
+};
+//#endregion
+export { GridModals };

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

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