@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Blocks/CommonGrid/hooks/useGridActionTrigger.js

@@ -1,44 +1,27 @@
-import { useMemo, useCallback } from "react";
-import find from "lodash/find";
-var useGridActionTrigger = function useGridActionTrigger(rowsData, uxState) {
-    var actionOptions = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : [], onBatchAction = arguments.length > 3 ? arguments[3] : void 0;
-    var actionRows = useMemo(function() {
-        return (rowsData || []).filter(function(row) {
-            var _uxState_checkedRows;
-            return (_uxState_checkedRows = uxState.checkedRows) === null || _uxState_checkedRows === void 0 ? void 0 : _uxState_checkedRows[row.id];
-        });
-    }, [
-        uxState,
-        rowsData
-    ]);
-    var enabledActions = useMemo(function() {
-        var actionsOptions = actionOptions || [];
-        return actionsOptions.filter(function(action) {
-            if (action.isEnabled) {
-                return action.isEnabled(actionRows);
-            } else {
-                return uxState.checkedRows && find(uxState.checkedRows, Boolean);
-            }
-        });
-    }, [
-        uxState,
-        actionRows,
-        actionOptions
-    ]);
-    var handleBatchAction = useCallback(function(value) {
-        var actionsOptions = actionOptions || [];
-        var action = actionsOptions.find(function(option) {
-            return option.value == value;
-        });
-        action && onBatchAction && onBatchAction(action, actionRows);
-    }, [
-        actionOptions,
-        onBatchAction,
-        actionRows
-    ]);
-    return [
-        enabledActions,
-        handleBatchAction
-    ];
+import { useCallback, useMemo } from "react";
+import find from "lodash/find.js";
+//#region packages/ui/Blocks/CommonGrid/hooks/useGridActionTrigger.ts
+const useGridActionTrigger = (rowsData, uxState, actionOptions = [], onBatchAction) => {
+	const actionRows = useMemo(() => {
+		return (rowsData || []).filter((row) => uxState.checkedRows?.[row.id]);
+	}, [uxState, rowsData]);
+	return [useMemo(() => {
+		return (actionOptions || []).filter((action) => {
+			if (action.isEnabled) return action.isEnabled(actionRows);
+			else return uxState.checkedRows && find(uxState.checkedRows, Boolean);
+		});
+	}, [
+		uxState,
+		actionRows,
+		actionOptions
+	]), useCallback((value) => {
+		const action = (actionOptions || []).find((option) => option.value == value);
+		action && onBatchAction && onBatchAction(action, actionRows);
+	}, [
+		actionOptions,
+		onBatchAction,
+		actionRows
+	])];
 };
+//#endregion
 export { useGridActionTrigger };

package/ui/Blocks/CommonGrid/hooks/useGridAutoRowsPerPage.js

@@ -1,23 +1,13 @@
+import { rowsPerPageOptions } from "../utils/constants.js";
 import { useEffect } from "react";
-import { rowsPerPageOptions } from "../utils/constants";
-var useGridAutoRowsPerPage = function useGridAutoRowsPerPage(param) {
-    var gridActions = param.gridActions, queryRowsParam = param.queryRowsParam, selectedRowsPerPage = param.selectedRowsPerPage, autoRowsPerPage = param.autoRowsPerPage, autoHeight = param.autoHeight;
-    useEffect(function() {
-        if (!autoHeight || queryRowsParam || !autoRowsPerPage) {
-            return;
-        }
-        var selectedOption = rowsPerPageOptions.find(function(option) {
-            return option.value === selectedRowsPerPage;
-        });
-        if (!selectedOption) {
-            if (autoRowsPerPage) {
-                var _gridActions_setRowsPerPage;
-                (_gridActions_setRowsPerPage = gridActions.setRowsPerPage) === null || _gridActions_setRowsPerPage === void 0 ? void 0 : _gridActions_setRowsPerPage.call(gridActions, autoRowsPerPage);
-            }
-        }
-    }, [
-        gridActions,
-        queryRowsParam
-    ]);
+//#region packages/ui/Blocks/CommonGrid/hooks/useGridAutoRowsPerPage.ts
+const useGridAutoRowsPerPage = ({ gridActions, queryRowsParam, selectedRowsPerPage, autoRowsPerPage, autoHeight }) => {
+	useEffect(() => {
+		if (!autoHeight || queryRowsParam || !autoRowsPerPage) return;
+		if (!rowsPerPageOptions.find((option) => option.value === selectedRowsPerPage)) {
+			if (autoRowsPerPage) gridActions.setRowsPerPage?.(autoRowsPerPage);
+		}
+	}, [gridActions, queryRowsParam]);
 };
+//#endregion
 export { useGridAutoRowsPerPage };

package/ui/Blocks/CommonGrid/hooks/useManageColumn.js

@@ -1,222 +1,99 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _array_without_holes(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array(arr);
-}
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _iterable_to_array(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _non_iterable_spread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _to_consumable_array(arr) {
-    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
+import { checksColumnsOrder, isColumnOn } from "../utils/index.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { checksColumnsOrder, isColumnOn } from "../utils";
-var useManageColumn = function useManageColumn(param) {
-    var columns = param.columns, gridSelectors = param.gridSelectors, gridActions = param.gridActions, onClose = param.onClose;
-    var resetGrid = gridActions.resetGrid, setColumnConfig = gridActions.setColumnConfig, setColumnsOrder = gridActions.setColumnsOrder;
-    var columnConfig = gridSelectors.columnConfig, columnsOrder = gridSelectors.columnsOrder;
-    var initialColumnsOrder = useMemo(function() {
-        return columns === null || columns === void 0 ? void 0 : columns.map(function(col) {
-            return col.name;
-        });
-    }, [
-        columns
-    ]);
-    var columnsOrderValue = (columnsOrder === null || columnsOrder === void 0 ? void 0 : columnsOrder.length) ? columnsOrder : initialColumnsOrder;
-    var _useState = _sliced_to_array(useState(_object_spread({}, columnConfig !== null && columnConfig !== void 0 ? columnConfig : {})), 2), columnsConfigOptions = _useState[0], setColumnsConfigOptions = _useState[1];
-    var _useState1 = _sliced_to_array(useState(columnsOrderValue), 2), updatedColumnsOrder = _useState1[0], setUpdatedColumnsOrder = _useState1[1];
-    var columnsConfigValues = useMemo(function() {
-        return columns === null || columns === void 0 ? void 0 : columns.filter(function(column) {
-            var _columnsConfigOptions_column_name;
-            var isHidden = columnsConfigOptions === null || columnsConfigOptions === void 0 ? void 0 : (_columnsConfigOptions_column_name = columnsConfigOptions[column.name]) === null || _columnsConfigOptions_column_name === void 0 ? void 0 : _columnsConfigOptions_column_name.isHidden;
-            if ((column === null || column === void 0 ? void 0 : column.alwaysOn) || typeof isHidden === "boolean") return !isHidden;
-            if (!!column.defaultHidden && !!(columnsConfigOptions === null || columnsConfigOptions === void 0 ? void 0 : columnsConfigOptions[column.name])) return true;
-            else return !(column === null || column === void 0 ? void 0 : column.defaultHidden);
-        }).map(function(column) {
-            return column.name;
-        });
-    }, [
-        columnsConfigOptions,
-        columns
-    ]);
-    var onConfirmForm = useCallback(function() {
-        setColumnConfig === null || setColumnConfig === void 0 ? void 0 : setColumnConfig(columnsConfigOptions);
-        setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(updatedColumnsOrder);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, [
-        columnsConfigOptions,
-        updatedColumnsOrder,
-        onClose,
-        setColumnConfig,
-        setColumnsOrder
-    ]);
-    var resetColumnConfig = useCallback(function() {
-        setUpdatedColumnsOrder(initialColumnsOrder);
-        resetGrid === null || resetGrid === void 0 ? void 0 : resetGrid();
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-        setColumnsConfigOptions({});
-    }, [
-        onClose,
-        resetGrid,
-        initialColumnsOrder,
-        columnConfig
-    ]);
-    var onCloseForm = useCallback(function() {
-        setUpdatedColumnsOrder(columnsOrderValue);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-        setColumnsConfigOptions(columnConfig || {});
-    }, [
-        columnsOrderValue,
-        onClose
-    ]);
-    var getSortedColumns = useCallback(function(orderValues, isManageModal) {
-        var list = columns.filter(function(column) {
-            return isManageModal ? !column.alwaysOff : isColumnOn(column, columnsConfigOptions);
-        });
-        var sortFunction = function sortFunction(col1, col2) {
-            var i = (orderValues || []).indexOf(col1.name);
-            var j = (orderValues || []).indexOf(col2.name);
-            if (orderValues && (orderValues === null || orderValues === void 0 ? void 0 : orderValues.length) > 0 && i === -1) {
-                return 0;
-            }
-            return i > j ? 1 : i < j ? -1 : 0;
-        };
-        var sortedList = _to_consumable_array(list).sort(sortFunction);
-        return sortedList;
-    }, [
-        columnConfig,
-        columnsConfigOptions,
-        columns
-    ]);
-    var displayColumnsDefinitions = useMemo(function() {
-        return getSortedColumns(columnsOrderValue, false);
-    }, [
-        columnsOrderValue,
-        columns,
-        columnsConfigOptions,
-        getSortedColumns
-    ]);
-    var manageColumnsFormDefinitions = useMemo(function() {
-        return getSortedColumns(updatedColumnsOrder, true);
-    }, [
-        updatedColumnsOrder
-    ]);
-    var handleDragEnd = useCallback(function() {
-        var isManageModal = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
-        return function(event) {
-            var active = event.active, over = event.over;
-            if (!over || active.id === over.id) {
-                return;
-            }
-            var newOrderColumns = _to_consumable_array(updatedColumnsOrder);
-            var fromIndex = updatedColumnsOrder.findIndex(function(column) {
-                return column === active.id;
-            });
-            var toIndex = updatedColumnsOrder.findIndex(function(column) {
-                return column === over.id;
-            });
-            newOrderColumns.splice(fromIndex, 1);
-            newOrderColumns.splice(toIndex === -1 ? 0 : toIndex, 0, active.id);
-            if (!isManageModal) {
-                setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(newOrderColumns);
-            }
-            setUpdatedColumnsOrder(newOrderColumns);
-        };
-    }, [
-        updatedColumnsOrder,
-        columnsOrderValue,
-        setColumnsOrder,
-        manageColumnsFormDefinitions,
-        displayColumnsDefinitions
-    ]);
-    useEffect(function() {
-        checksColumnsOrder(columnsOrderValue, columns);
-    }, []);
-    return {
-        columnsConfigValues: columnsConfigValues,
-        setColumnsConfigOptions: setColumnsConfigOptions,
-        onConfirmForm: onConfirmForm,
-        resetColumnConfig: resetColumnConfig,
-        handleDragEnd: handleDragEnd,
-        onCloseForm: onCloseForm,
-        displayColumnsDefinitions: displayColumnsDefinitions,
-        manageColumnsFormDefinitions: manageColumnsFormDefinitions
-    };
+//#region packages/ui/Blocks/CommonGrid/hooks/useManageColumn.ts
+const useManageColumn = ({ columns, gridSelectors, gridActions, onClose }) => {
+	const { resetGrid, setColumnConfig, setColumnsOrder } = gridActions;
+	const { columnConfig, columnsOrder } = gridSelectors;
+	const initialColumnsOrder = useMemo(() => columns?.map((col) => col.name), [columns]);
+	const columnsOrderValue = columnsOrder?.length ? columnsOrder : initialColumnsOrder;
+	const [columnsConfigOptions, setColumnsConfigOptions] = useState({ ...columnConfig ?? {} });
+	const [updatedColumnsOrder, setUpdatedColumnsOrder] = useState(columnsOrderValue);
+	const columnsConfigValues = useMemo(() => {
+		return columns?.filter((column) => {
+			const isHidden = columnsConfigOptions?.[column.name]?.isHidden;
+			if (column?.alwaysOn || typeof isHidden === "boolean") return !isHidden;
+			if (!!column.defaultHidden && !!columnsConfigOptions?.[column.name]) return true;
+			else return !column?.defaultHidden;
+		}).map((column) => column.name);
+	}, [columnsConfigOptions, columns]);
+	const onConfirmForm = useCallback(() => {
+		setColumnConfig?.(columnsConfigOptions);
+		setColumnsOrder?.(updatedColumnsOrder);
+		onClose?.();
+	}, [
+		columnsConfigOptions,
+		updatedColumnsOrder,
+		onClose,
+		setColumnConfig,
+		setColumnsOrder
+	]);
+	const resetColumnConfig = useCallback(() => {
+		setUpdatedColumnsOrder(initialColumnsOrder);
+		resetGrid?.();
+		onClose?.();
+		setColumnsConfigOptions({});
+	}, [
+		onClose,
+		resetGrid,
+		initialColumnsOrder,
+		columnConfig
+	]);
+	const onCloseForm = useCallback(() => {
+		setUpdatedColumnsOrder(columnsOrderValue);
+		onClose?.();
+		setColumnsConfigOptions(columnConfig || {});
+	}, [columnsOrderValue, onClose]);
+	const getSortedColumns = useCallback((orderValues, isManageModal) => {
+		const list = columns.filter((column) => isManageModal ? !column.alwaysOff : isColumnOn(column, columnsConfigOptions));
+		const sortFunction = (col1, col2) => {
+			const i = (orderValues || []).indexOf(col1.name);
+			const j = (orderValues || []).indexOf(col2.name);
+			if (orderValues && orderValues?.length > 0 && i === -1) return 0;
+			return i > j ? 1 : i < j ? -1 : 0;
+		};
+		return [...list].sort(sortFunction);
+	}, [
+		columnConfig,
+		columnsConfigOptions,
+		columns
+	]);
+	const displayColumnsDefinitions = useMemo(() => getSortedColumns(columnsOrderValue, false), [
+		columnsOrderValue,
+		columns,
+		columnsConfigOptions,
+		getSortedColumns
+	]);
+	const manageColumnsFormDefinitions = useMemo(() => getSortedColumns(updatedColumnsOrder, true), [updatedColumnsOrder]);
+	const handleDragEnd = useCallback((isManageModal = false) => (event) => {
+		const { active, over } = event;
+		if (!over || active.id === over.id) return;
+		const newOrderColumns = [...updatedColumnsOrder];
+		const fromIndex = updatedColumnsOrder.findIndex((column) => column === active.id);
+		const toIndex = updatedColumnsOrder.findIndex((column) => column === over.id);
+		newOrderColumns.splice(fromIndex, 1);
+		newOrderColumns.splice(toIndex === -1 ? 0 : toIndex, 0, active.id);
+		if (!isManageModal) setColumnsOrder?.(newOrderColumns);
+		setUpdatedColumnsOrder(newOrderColumns);
+	}, [
+		updatedColumnsOrder,
+		columnsOrderValue,
+		setColumnsOrder,
+		manageColumnsFormDefinitions,
+		displayColumnsDefinitions
+	]);
+	useEffect(() => {
+		checksColumnsOrder(columnsOrderValue, columns);
+	}, []);
+	return {
+		columnsConfigValues,
+		setColumnsConfigOptions,
+		onConfirmForm,
+		resetColumnConfig,
+		handleDragEnd,
+		onCloseForm,
+		displayColumnsDefinitions,
+		manageColumnsFormDefinitions
+	};
 };
-var useManageColumn_default = useManageColumn;
-export { useManageColumn_default as default };
+//#endregion
+export { useManageColumn as default };

package/ui/Blocks/CommonGrid/hooks/usePresetFileHandlers.js

@@ -1,127 +1,57 @@
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-        }
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-import { useRef, useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { i18n } from "@lingui/core";
-import omit from "lodash/omit";
-var usePresetFileHandlers = function usePresetFileHandlers(param) {
-    var gridName = param.gridName, gridActions = param.gridActions, gridSelectors = param.gridSelectors;
-    var fileInputRef = useRef(null);
-    var handleExportPresets = useCallback(function() {
-        if (!gridName) return;
-        var gridConfig = {
-            gridName: gridName
-        };
-        var data = _object_spread_props(_object_spread({}, gridSelectors.presets), {
-            _: gridConfig
-        });
-        var blob = new Blob([
-            JSON.stringify(data, null, 2)
-        ], {
-            type: "application/json"
-        });
-        var link = document.createElement("a");
-        link.href = URL.createObjectURL(blob);
-        link.download = "".concat(gridName, "Presets.json");
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-    }, [
-        gridName,
-        gridSelectors.presets
-    ]);
-    var handleImportPresets = useCallback(function(event) {
-        var _event_target_files;
-        if (!gridName) return;
-        var file = (_event_target_files = event.target.files) === null || _event_target_files === void 0 ? void 0 : _event_target_files[0];
-        if (!file) return;
-        var reader = new FileReader();
-        reader.readAsText(file);
-        reader.onload = function(e) {
-            try {
-                var _e_target, _gridActions_setPresets;
-                var fileContent = JSON.parse((_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.result);
-                var gridConfig = fileContent._;
-                if (gridConfig && gridConfig.gridName !== gridName) {
-                    throw new Error(i18n._({
-                        id: "dataGrid.importPresets.gridNameNotSame",
-                        message: "Grid name in file is not the same as current grid."
-                    }));
-                }
-                (_gridActions_setPresets = gridActions.setPresets) === null || _gridActions_setPresets === void 0 ? void 0 : _gridActions_setPresets.call(gridActions, omit(fileContent, "_"));
-            } catch (error) {
-                console.warn(error);
-                alert(i18n._({
-                    id: "dataGrid.importPresets.error",
-                    message: "Error with importing files."
-                }) + String(error));
-            } finally{
-                if (fileInputRef.current) {
-                    fileInputRef.current.value = "";
-                }
-            }
-        };
-    }, [
-        gridName
-    ]);
-    var handleImportButtonClick = useCallback(function() {
-        var _fileInputRef_current;
-        (_fileInputRef_current = fileInputRef.current) === null || _fileInputRef_current === void 0 ? void 0 : _fileInputRef_current.click();
-    }, []);
-    return {
-        fileInputRef: fileInputRef,
-        handleImportPresets: handleImportPresets,
-        handleExportPresets: handleExportPresets,
-        handleImportButtonClick: handleImportButtonClick
-    };
+import omit from "lodash/omit.js";
+//#region packages/ui/Blocks/CommonGrid/hooks/usePresetFileHandlers.ts
+const usePresetFileHandlers = ({ gridName, gridActions, gridSelectors }) => {
+	const fileInputRef = useRef(null);
+	const handleExportPresets = useCallback(() => {
+		if (!gridName) return;
+		const gridConfig = { gridName };
+		const data = {
+			...gridSelectors.presets,
+			_: gridConfig
+		};
+		const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+		const link = document.createElement("a");
+		link.href = URL.createObjectURL(blob);
+		link.download = `${gridName}Presets.json`;
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	}, [gridName, gridSelectors.presets]);
+	return {
+		fileInputRef,
+		handleImportPresets: useCallback((event) => {
+			if (!gridName) return;
+			const file = event.target.files?.[0];
+			if (!file) return;
+			const reader = new FileReader();
+			reader.readAsText(file);
+			reader.onload = (e) => {
+				try {
+					const fileContent = JSON.parse(e.target?.result);
+					const gridConfig = fileContent._;
+					if (gridConfig && gridConfig.gridName !== gridName) throw new Error(i18n._({
+						id: "dataGrid.importPresets.gridNameNotSame",
+						message: "Grid name in file is not the same as current grid."
+					}));
+					gridActions.setPresets?.(omit(fileContent, "_"));
+				} catch (error) {
+					console.warn(error);
+					alert(i18n._({
+						id: "dataGrid.importPresets.error",
+						message: "Error with importing files."
+					}) + String(error));
+				} finally {
+					if (fileInputRef.current) fileInputRef.current.value = "";
+				}
+			};
+		}, [gridName]),
+		handleExportPresets,
+		handleImportButtonClick: useCallback(() => {
+			fileInputRef.current?.click();
+		}, [])
+	};
 };
+//#endregion
 export { usePresetFileHandlers };