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

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

@@ -0,0 +1,87 @@
+import React from "react";
+import sum from "lodash/sum.js";
+//#region packages/ui/Blocks/CommonGrid/hooks/useColumnSizes.tsx
+const useColumnSizes = (displayColumnsDefinitions, storeColumnsWidth, storeColumnsWidthVariant, setColumnWidth, columnLayout, minColumnWidth = 50) => {
+	/**
+	* decorate grid resize with layout and reset grid widths if layout changes
+	*/
+	const handleSetColumnWidth = React.useCallback((columnWidth) => setColumnWidth(columnWidth, columnLayout), [columnLayout, setColumnWidth]);
+	React.useEffect(() => {
+		if (storeColumnsWidthVariant != columnLayout) handleSetColumnWidth(null);
+	}, [
+		columnLayout,
+		storeColumnsWidthVariant,
+		handleSetColumnWidth
+	]);
+	/**
+	* base width of each displayed column and of all displayed columns put together
+	*/
+	const displayColumnsWidth = React.useMemo(() => {
+		const displayColumnsWidth = {};
+		displayColumnsDefinitions.forEach((column) => displayColumnsWidth[column.name] = storeColumnsWidth?.[column.name] || column.flexBasis);
+		return displayColumnsWidth;
+	}, [displayColumnsDefinitions, storeColumnsWidth]);
+	const totalColumnsWidth = React.useMemo(() => {
+		return sum(Object.values(displayColumnsWidth));
+	}, [displayColumnsWidth]);
+	/**
+	* handling of remaining space
+	*/
+	const gridBoxRef = React.useRef(null);
+	const testAdjustLastColumn = React.useCallback(() => {
+		const gridWidth = gridBoxRef?.current?.clientWidth || null;
+		if ((columnLayout == "normal" || columnLayout == "sticky") && gridWidth && totalColumnsWidth < gridWidth) {
+			const lastColumn = displayColumnsDefinitions[displayColumnsDefinitions.length - 1];
+			if (lastColumn) handleSetColumnWidth({ [lastColumn.name]: displayColumnsWidth[lastColumn.name] + gridWidth - totalColumnsWidth });
+		}
+	}, [
+		columnLayout,
+		displayColumnsDefinitions,
+		displayColumnsWidth,
+		gridBoxRef,
+		handleSetColumnWidth,
+		totalColumnsWidth
+	]);
+	React.useEffect(() => {
+		testAdjustLastColumn();
+	}, [testAdjustLastColumn]);
+	React.useLayoutEffect(() => {
+		window.addEventListener("resize", testAdjustLastColumn);
+		return () => window.removeEventListener("resize", testAdjustLastColumn);
+	}, [testAdjustLastColumn]);
+	return {
+		totalColumnsWidth,
+		gridBoxRef,
+		displayColumnsWidth,
+		handleResizeDrag: React.useCallback((columnName, width) => {
+			const nextColumn = displayColumnsDefinitions[displayColumnsDefinitions.findIndex(({ name }) => name == columnName) + 1];
+			if (columnLayout == "normal" || columnLayout == "sticky") {
+				const gridWidth = gridBoxRef?.current?.clientWidth || null;
+				const lastColumnWidth = displayColumnsWidth[displayColumnsDefinitions[displayColumnsDefinitions.length - 1].name];
+				const lastColumnMinWidth = gridWidth && gridWidth - (totalColumnsWidth - lastColumnWidth) || 0;
+				const minWidth = !nextColumn ? Math.max(lastColumnMinWidth, minColumnWidth) : minColumnWidth;
+				const origin = displayColumnsWidth[columnName];
+				const newWidth = origin + width < minWidth ? minWidth : origin + width;
+				handleSetColumnWidth({ [columnName]: newWidth });
+			} else if (columnLayout == "no-scroll") {
+				const nextColumnWidth = displayColumnsWidth[nextColumn.name];
+				const origin = displayColumnsWidth[columnName];
+				const addedColumnWidth = origin + width < minColumnWidth ? minColumnWidth - origin : width;
+				const addedNextColumnWidth = nextColumnWidth - addedColumnWidth < minColumnWidth ? nextColumnWidth - minColumnWidth : addedColumnWidth;
+				const addedWidth = Math.min(addedColumnWidth, addedNextColumnWidth);
+				const columnsWidth = { [columnName]: origin + addedWidth };
+				if (nextColumn) columnsWidth[nextColumn.name] = nextColumnWidth - addedWidth;
+				handleSetColumnWidth(columnsWidth);
+			}
+		}, [
+			displayColumnsDefinitions,
+			columnLayout,
+			displayColumnsWidth,
+			totalColumnsWidth,
+			minColumnWidth,
+			handleSetColumnWidth
+		])
+	};
+};
+//#endregion
+export { useColumnSizes as default };

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

@@ -1,6 +1,5 @@
 import { ChangeEvent } from 'react';
 import { Filtering, GridActionsType } from '../types';
-
 type Props = {
     gridName?: string;
     filters?: Filtering;

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

@@ -0,0 +1,32 @@
+import { useModal } from "../../Modal/hooks/useModal.js";
+import { useEvent } from "./useEvent.js";
+import { useCallback, useState } from "react";
+import isEmpty from "lodash/isEmpty.js";
+//#region packages/ui/Blocks/CommonGrid/hooks/useCreatePreset.ts
+const useCreatePreset = ({ gridName, filters, onClosePresetsModal, setSelectedPresetName, gridActions }) => {
+	const { isOpen: isCreatePresetModalOpen, onOpen: onOpenCreatePresetModal, onClose: onCloseCreatePresetModal } = useModal();
+	const [presetName, setPresetName] = useState("");
+	const handleChangePresetName = useCallback((event) => {
+		setPresetName(event.target.value);
+	}, []);
+	return {
+		isCreatePresetModalOpen,
+		onOpenCreatePresetModal,
+		handleCloseCreatePresetModal: useCallback(() => {
+			setPresetName("");
+			onCloseCreatePresetModal();
+		}, []),
+		presetName,
+		handleChangePresetName,
+		handleCreatePreset: useEvent(() => {
+			setPresetName("");
+			onCloseCreatePresetModal();
+			onClosePresetsModal();
+			if (isEmpty(filters) || !gridName) return;
+			gridActions.createPreset?.(presetName, filters);
+			setSelectedPresetName(presetName);
+		})
+	};
+};
+//#endregion
+export { useCreatePreset };

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

@@ -1,6 +1,5 @@
 import { MouseEvent } from 'react';
 import { GridActionsType } from '../types';
-
 type Props = {
     gridName?: string;
     selectedPresetName: string;

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

@@ -0,0 +1,24 @@
+import { useModal } from "../../Modal/hooks/useModal.js";
+import { useCallback } from "react";
+//#region packages/ui/Blocks/CommonGrid/hooks/useDeletePreset.ts
+const useDeletePreset = ({ selectedPresetName, gridName, gridActions, setSelectedPresetName }) => {
+	const { isOpen: isDeletePresetModalOpen, onOpen: onOpenDeletePresetModal, onClose: onCloseDeletePresetModal, data: presetNameToDelete } = useModal();
+	return {
+		handleOpenDeletePresetModal: useCallback((presetName) => (e) => {
+			if (!presetName) return;
+			e.stopPropagation();
+			onOpenDeletePresetModal(presetName);
+		}, [selectedPresetName]),
+		isDeletePresetModalOpen,
+		handleDeletePreset: useCallback(() => {
+			if (!gridName || !presetNameToDelete) return;
+			gridActions.deletePreset?.(presetNameToDelete);
+			if (selectedPresetName === presetNameToDelete) setSelectedPresetName("");
+			onCloseDeletePresetModal();
+		}, [gridName, presetNameToDelete]),
+		onCloseDeletePresetModal,
+		presetNameToDelete
+	};
+};
+//#endregion
+export { useDeletePreset };

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

@@ -1,5 +1,4 @@
-import { CommonGridProps } from '../types';
-
+import type { CommonGridProps } from '../types';
 type ExcludedProps = 'components' | 'filters' | 'onBatchAction' | 'extraControlButtons';
 type Props = Omit<CommonGridProps, ExcludedProps>;
 type UseEditReadAsColumnHook = {

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

@@ -0,0 +1,58 @@
+import "../types.js";
+import withProps from "../HoC/withProps.js";
+import { RowActionsCell } from "../components/gridCells/RowActionsCell.js";
+import "../components/gridCells/index.js";
+import { useCallback, useMemo } from "react";
+//#region packages/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.tsx
+const useEditReadAsColumn = (props) => {
+	const { onRowAction, actionColumnDefinition, columnsDefinitions, gridSelectors, gridActions, onRowEditClick, onRowReadClick } = props;
+	const modifiedOnRowAction = useCallback((id, field, value, rowData) => {
+		if (field === "row_edit" || field === "row_read") {
+			if (field === "row_edit" && onRowEditClick) onRowEditClick(id, value);
+			if (field === "row_read" && onRowReadClick) onRowReadClick(id, value);
+		} else if (onRowAction) return onRowAction(id, field, value, rowData);
+	}, [
+		onRowAction,
+		onRowEditClick,
+		onRowReadClick
+	]);
+	const { canRowEdit, canRowRead, addRowNumbers, stickTo = "left", flexBasis = 20 } = actionColumnDefinition || {};
+	const withCheckboxes = !!actionColumnDefinition?.actionOptions?.length || actionColumnDefinition?.forceCheckboxes;
+	const hasActions = canRowEdit || canRowRead || withCheckboxes || addRowNumbers;
+	return {
+		columnsDefinitions: useMemo(() => {
+			const editReadColumnDefinition = {
+				name: "actions-cell-cg",
+				flexBasis,
+				filtering: withCheckboxes || addRowNumbers,
+				filteringType: "actions",
+				sorting: false,
+				sticky: !!hasActions,
+				stickTo,
+				alwaysOn: true,
+				cellComponent: withProps({
+					actionColumnDefinition,
+					withCheckboxes,
+					addRowNumbers: actionColumnDefinition?.addRowNumbers,
+					checkedRows: gridSelectors?.uxState?.checkedRows,
+					onUxChange: gridActions?.handleUxChange
+				})(RowActionsCell)
+			};
+			if (stickTo === "left") return [editReadColumnDefinition, ...columnsDefinitions];
+			else return [...columnsDefinitions, editReadColumnDefinition];
+		}, [
+			addRowNumbers,
+			flexBasis,
+			stickTo,
+			hasActions,
+			columnsDefinitions,
+			withCheckboxes,
+			gridSelectors?.uxState,
+			actionColumnDefinition,
+			gridActions?.handleUxChange
+		]),
+		onRowAction: modifiedOnRowAction
+	};
+};
+//#endregion
+export { useEditReadAsColumn as default };

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

@@ -0,0 +1,13 @@
+import { useCallback, useLayoutEffect, useRef } from "react";
+//#region packages/ui/Blocks/CommonGrid/hooks/useEvent.ts
+const useEvent = (callback) => {
+	const ref = useRef(() => {
+		throw new Error("Cannot call an event handler while rendering.");
+	});
+	useLayoutEffect(() => {
+		ref.current = callback;
+	});
+	return useCallback((...args) => ref.current?.apply(null, args), []);
+};
+//#endregion
+export { useEvent };

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

@@ -1,4 +1,3 @@
 import { FloatingButtonProps, Item } from '../types';
-
 declare const useFloatingButton: (hasPermission: any, onClick?: () => void, options?: Item[]) => FloatingButtonProps | undefined;
 export default useFloatingButton;

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

@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+//#region packages/ui/Blocks/CommonGrid/hooks/useFloatingButton.ts
+const useFloatingButton = (hasPermission, onClick, options) => useMemo(() => {
+	if (!hasPermission) return;
+	return {
+		onClick,
+		options
+	};
+}, [
+	hasPermission,
+	onClick,
+	options
+]);
+//#endregion
+export { useFloatingButton as default };

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

@@ -1,5 +1,4 @@
 import { RowProps, UxState, ActionColumn, OnBatchActionFn } from '../types';
-
 /**
  * hook for action selection and trigger
  * returns [subset of actions that are enabled, onSelect(value) - param1: selected action value]

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

@@ -0,0 +1,27 @@
+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.d.ts

@@ -1,5 +1,4 @@
 import { GridActionsType } from '../types';
-
 type Props = {
     gridActions: GridActionsType;
     queryRowsParam?: number | string;

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

@@ -0,0 +1,13 @@
+import { rowsPerPageOptions } from "../utils/constants.js";
+import { useEffect } from "react";
+//#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.d.ts

@@ -1,6 +1,5 @@
 import { DragEndEvent } from '@dnd-kit/core';
 import { CommonGridProps, GridActionsType, GridSelectorsType, ColumnDefinition } from '../types';
-
 type Props = {
     columns: CommonGridProps['columnsDefinitions'];
     gridActions: GridActionsType;
@@ -9,7 +8,7 @@ type Props = {
 };
 declare const useManageColumn: ({ columns, gridSelectors, gridActions, onClose }: Props) => {
     columnsConfigValues: string[];
-    setColumnsConfigOptions: import('react').Dispatch<import('react').SetStateAction<{
+    setColumnsConfigOptions: import("react").Dispatch<import("react").SetStateAction<{
         [x: string]: {
             isHidden?: boolean;
         };

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

@@ -0,0 +1,99 @@
+import { checksColumnsOrder, isColumnOn } from "../utils/index.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+//#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
+	};
+};
+//#endregion
+export { useManageColumn as default };

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

@@ -1,6 +1,5 @@
-import { ChangeEvent, RefObject } from 'react';
-import { GridActionsType, GridSelectorsType } from '../types';
-
+import { type ChangeEvent, type RefObject } from 'react';
+import { type GridActionsType, type GridSelectorsType } from '../types';
 type FileHandlersProps = {
     gridName?: string;
     gridActions: GridActionsType;

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

@@ -0,0 +1,57 @@
+import { useCallback, useRef } from "react";
+import { i18n } from "@lingui/core";
+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 };

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

@@ -0,0 +1,16 @@
+import { useModal } from "../../Modal/hooks/useModal.js";
+import { useState } from "react";
+//#region packages/ui/Blocks/CommonGrid/hooks/usePresetsState.ts
+const usePresetState = () => {
+	const { isOpen: isPresetsModalOpen, onOpen: onOpenPresetsModal, onClose: onClosePresetsModal } = useModal();
+	const [selectedPresetName, setSelectedPresetName] = useState("");
+	return {
+		isPresetsModalOpen,
+		onOpenPresetsModal,
+		onClosePresetsModal,
+		selectedPresetName,
+		setSelectedPresetName
+	};
+};
+//#endregion
+export { usePresetState };

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

@@ -1,6 +1,5 @@
 import { ChangeEvent } from 'react';
 import { ColumnDefinition, CommonGridProps, FiltersConfig, GridActionsType, GridSelectorsType } from '../types';
-
 type Props = {
     gridActions: GridActionsType;
     gridSelectors: GridSelectorsType;
@@ -11,7 +10,7 @@ type Props = {
 };
 declare const useQuickFilter: ({ gridActions, gridSelectors, quickFilter, columns, filters }: Props) => {
     searchedValue: string;
-    translatedValue: import('react').ReactNode;
+    translatedValue: import("react").ReactNode;
     onChangeInputValue: (e: ChangeEvent<HTMLInputElement>) => void;
     onClearSettings: () => void;
     onDisplayInput: () => void;
@@ -19,6 +18,6 @@ declare const useQuickFilter: ({ gridActions, gridSelectors, quickFilter, column
     onClear: () => void;
     isMobileInputView: boolean;
     isMobile: boolean;
-    filter: import('../types').Filtering | undefined;
+    filter: import("../types").Filtering | undefined;
 };
 export default useQuickFilter;

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

@@ -0,0 +1,78 @@
+import { useCheckDeviceWidth } from "../../../utils/CheckDeviceWidth/checkDeviceWidth.js";
+import { getTranslatedValue } from "../components/ManageColumnForm/utils.js";
+import { createFilterType } from "../utils/index.js";
+import { useAddFilter } from "./useAddFilter.js";
+import { useCallback, useEffect, useState } from "react";
+//#region packages/ui/Blocks/CommonGrid/hooks/useQuickFilter.ts
+const defaultVoidFunction = (...args) => null;
+const useQuickFilter = ({ gridActions, gridSelectors, quickFilter, columns, filters }) => {
+	const { addFilter = defaultVoidFunction, clearSettings = defaultVoidFunction } = gridActions;
+	const { filter } = gridSelectors;
+	const { isMobile } = useCheckDeviceWidth();
+	const [searchedValue, setSearchedValue] = useState("");
+	const [displayInput, setDisplayInput] = useState(false);
+	const handleAddFilter = useAddFilter(addFilter);
+	const quickFilterValues = quickFilter ? filter?.[quickFilter]?.value : void 0;
+	const searchedColumnsDefinitions = columns?.find((item) => item.name === quickFilter) || null;
+	const filterType = createFilterType(searchedColumnsDefinitions || {});
+	const filtersDefaultComparator = filters?.[filterType].defaultExtraProps?.defaultComparator || "eq";
+	const searchComparator = quickFilterValues && quickFilterValues.comparator || filtersDefaultComparator;
+	const isMobileInputView = isMobile && displayInput;
+	useEffect(() => {
+		if (quickFilterValues) setSearchedValue(quickFilterValues.value);
+		else setSearchedValue("");
+	}, [
+		quickFilterValues,
+		quickFilter,
+		setSearchedValue
+	]);
+	useEffect(() => {
+		if (isMobile) setDisplayInput(false);
+		else setDisplayInput(true);
+	}, [isMobile]);
+	const onChangeInputValue = useCallback((e) => {
+		setSearchedValue(e.target.value);
+		const value = {
+			comparator: searchComparator,
+			value: e.target.value
+		};
+		searchedColumnsDefinitions && handleAddFilter(value, searchedColumnsDefinitions);
+	}, [
+		setSearchedValue,
+		searchComparator,
+		handleAddFilter,
+		searchedColumnsDefinitions
+	]);
+	const onClear = useCallback(() => {
+		setSearchedValue("");
+		onChangeInputValue({ target: { value: "" } });
+		if (isMobile) setDisplayInput(false);
+		else setDisplayInput(true);
+	}, [
+		setSearchedValue,
+		isMobile,
+		onChangeInputValue,
+		setDisplayInput
+	]);
+	const onDisplayInput = useCallback(() => {
+		setDisplayInput(true);
+	}, []);
+	const onClearSettings = useCallback(() => {
+		clearSettings?.();
+		setSearchedValue?.("");
+	}, [clearSettings, setSearchedValue]);
+	return {
+		searchedValue,
+		translatedValue: getTranslatedValue(searchedColumnsDefinitions),
+		onChangeInputValue,
+		onClearSettings,
+		onDisplayInput,
+		displayInput,
+		onClear,
+		isMobileInputView,
+		isMobile,
+		filter
+	};
+};
+//#endregion
+export { useQuickFilter as default };

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

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { RowProps, UxState } from '../types';
-
 declare const useRowsKeyControls: (rowsData: RowProps[], uxState: UxState, onUxChange?: (uxKey: keyof UxState, uxValue: any) => void) => (e: React.KeyboardEvent<HTMLDivElement>) => void;
 export default useRowsKeyControls;

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

@@ -0,0 +1,20 @@
+import React from "react";
+//#region packages/ui/Blocks/CommonGrid/hooks/useRowsKeyControls.ts
+const useRowsKeyControls = (rowsData, uxState, onUxChange) => React.useCallback((e) => {
+	const selectedRowId = uxState.selectedRow;
+	if (!selectedRowId) return;
+	const selectedRowIdx = rowsData.findIndex((row) => row.id === selectedRowId);
+	const previousRowId = rowsData[selectedRowIdx - 1]?.id;
+	const nextRowId = rowsData[selectedRowIdx + 1]?.id;
+	const isFirst = selectedRowIdx === 0;
+	const isLast = selectedRowIdx === rowsData.length - 1;
+	if (e.key === "ArrowUp" && !isFirst) onUxChange?.("selectedRow", previousRowId);
+	if (e.key === "ArrowDown" && !isLast) onUxChange?.("selectedRow", nextRowId);
+	if (e.key === "Escape") onUxChange?.("selectedRow", null);
+}, [
+	uxState,
+	rowsData,
+	onUxChange
+]);
+//#endregion
+export { useRowsKeyControls as default };

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

@@ -1,5 +1,4 @@
 import { Filtering, GridActionsType, GridSelectorsType } from '../types';
-
 type Props = {
     gridName?: string;
     gridActions: GridActionsType;