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

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

@@ -0,0 +1,27 @@
+import { MessageCell, MessageCellBody, Row } from "../Table.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Blocks/CommonGrid/components/GridStatus/index.tsx
+const GridStatus = ({ isLoading, isEmpty, errorMessage }) => {
+	const hasError = !isLoading && errorMessage;
+	return /* @__PURE__ */ jsx(Row, {
+		className: "dataRow",
+		align: "center",
+		children: /* @__PURE__ */ jsx(MessageCell, { children: /* @__PURE__ */ jsxs(MessageCellBody, {
+			variant: hasError ? "error" : "info",
+			children: [
+				isLoading && /* @__PURE__ */ jsx(Trans, {
+					id: "dataGrid.status.loadingData",
+					message: "... loading data ..."
+				}),
+				hasError && errorMessage,
+				isEmpty && /* @__PURE__ */ jsx(Trans, {
+					id: "dataGrid.status.noDataFound",
+					message: "No data found."
+				})
+			]
+		}) })
+	});
+};
+//#endregion
+export { GridStatus };

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { ActionColumn, Group, ColumnDefinition, GridSelectorsType } from '../types';
-
+import type { FC } from 'react';
+import type { ActionColumn, Group, ColumnDefinition, GridSelectorsType } from '../types';
 type GroupRowProps = {
     groups: Group[];
     actionColumn?: ActionColumn;

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

@@ -0,0 +1,29 @@
+import { getCellSizeProps, getGroupClassNames, getStickyCollClassNames } from "../utils/index.js";
+import { Cell, Row } from "./Table.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/GroupRow.tsx
+const GroupCell = ({ column, group, displayColumnWidth }) => {
+	const cellSizeProps = getCellSizeProps(column, displayColumnWidth);
+	return /* @__PURE__ */ jsx(Cell, {
+		className: `cell${getStickyCollClassNames(!!column.sticky, column.stickTo)} ${getGroupClassNames(group)}`,
+		...cellSizeProps,
+		children: group.start && /* @__PURE__ */ jsx(Fragment, { children: group.name })
+	});
+};
+const GroupRow = ({ actionColumn, columns, groups, displayColumnsWidth }) => {
+	return /* @__PURE__ */ jsxs(Row, {
+		className: "group-row",
+		children: [actionColumn && /* @__PURE__ */ jsx(Cell, {
+			className: "cell",
+			flexBasis: actionColumn.flexBasis,
+			flexGrow: 0,
+			flexShrink: 0
+		}, "actions"), groups.map((group, key) => /* @__PURE__ */ jsx(GroupCell, {
+			column: columns[key],
+			group,
+			displayColumnWidth: displayColumnsWidth[columns[key].name]
+		}, key))]
+	});
+};
+//#endregion
+export { GroupRow as default };

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { Group, Settings, ColumnDefinition, SortingValueType } from '../types';
-
+import type { FC } from 'react';
+import type { Group, Settings, ColumnDefinition, SortingValueType } from '../types';
 type HeadCellProps = {
     column: ColumnDefinition;
     isDragDisabled: boolean;

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

@@ -0,0 +1,37 @@
+import { getCellSizeProps, getGroupClassNames, getSortName, getStickyCollClassNames } from "../utils/index.js";
+import { Cell } from "./Table.js";
+import ColumnTitle_default from "./ColumnTitle.js";
+import Resize from "./Resize.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "/home/linomorfed/Projects/design-system/node_modules/@dnd-kit/utilities/dist/index.js";
+//#region packages/ui/Blocks/CommonGrid/components/HeadCell.tsx
+const HeadCell = ({ column, isDragDisabled, displayColumnsWidth, onResizeOut, onResizeOver, onResize, sortingValues, onSetSort, group, hasResize, isSortTerminated }) => {
+	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+		id: column.name,
+		disabled: isDragDisabled || !!column.sticky,
+		animateLayoutChanges: () => false
+	});
+	const cellClassName = `cell${getStickyCollClassNames(!!column?.sticky, column?.stickTo)} ${getGroupClassNames(group)}`;
+	return /* @__PURE__ */ jsxs(Cell, {
+		...getCellSizeProps(column, displayColumnsWidth[column.name]),
+		...attributes,
+		...listeners,
+		className: cellClassName,
+		transition,
+		transform: CSS.Transform.toString(transform),
+		ref: setNodeRef,
+		children: [/* @__PURE__ */ jsx(ColumnTitle_default, {
+			title: column?.title,
+			isSortable: !!column.sorting && !isSortTerminated,
+			onSetSort: onSetSort(column.name, column.systemName),
+			sortValue: sortingValues.find((sorting) => sorting.column === getSortName(column))?.direction || null
+		}), hasResize && onResizeOut && onResizeOver && /* @__PURE__ */ jsx(Resize, {
+			onResize: onResize(column.name),
+			onResizeOver,
+			onResizeOut
+		})]
+	});
+};
+//#endregion
+export { HeadCell };

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

@@ -1,7 +1,6 @@
-import { FC } from 'react';
-import { Settings, ColumnDefinition, GridSelectorsType, Group, CommonGridProps, GridActionsType } from '../types';
-import { DragEndEvent } from '@dnd-kit/core';
-
+import { type FC } from 'react';
+import type { Settings, ColumnDefinition, GridSelectorsType, Group, CommonGridProps, GridActionsType } from '../types';
+import type { DragEndEvent } from '@dnd-kit/core';
 type HeadRowProps = {
     columns: ColumnDefinition[];
     onAddSort: GridActionsType['addSorting'];

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

@@ -0,0 +1,72 @@
+import { getCellSizeProps, getStickyCollClassNames } from "../utils/index.js";
+import { Cell, Row } from "./Table.js";
+import ColumnTitle_default from "./ColumnTitle.js";
+import { HeadCell } from "./HeadCell.js";
+import React, { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { SortableContext, horizontalListSortingStrategy } from "@dnd-kit/sortable";
+import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+//#region packages/ui/Blocks/CommonGrid/components/HeadRow.tsx
+const getStickyComponent = (columns, stickyTo, displayColumnsWidth) => columns?.filter((item) => item.sticky && item.stickTo === stickyTo)?.map((column) => {
+	const cellClassName = `cell${getStickyCollClassNames(!!column.sticky, column.stickTo)}`;
+	return /* @__PURE__ */ jsx(Cell, {
+		...getCellSizeProps(column, displayColumnsWidth[column.name]),
+		className: cellClassName,
+		children: /* @__PURE__ */ jsx(ColumnTitle_default, {
+			title: column?.title,
+			isSortable: false,
+			sortValue: null
+		})
+	}, column.name);
+});
+const HeadRow = ({ columns, onAddSort, handleDragEnd, sortingValues = [], displayColumnsWidth, columnLayout, handleResizeDrag, groups, isSortTerminated }) => {
+	const [showUIElements, setShowUIElements] = useState(false);
+	useEffect(() => {
+		setShowUIElements(true);
+	}, []);
+	const [isDragDisabled, setIsDragDisabled] = useState(false);
+	const onResizeOver = React.useCallback(() => {
+		setIsDragDisabled(true);
+	}, [setIsDragDisabled]);
+	const onResizeOut = React.useCallback(() => {
+		setIsDragDisabled(false);
+	}, [setIsDragDisabled]);
+	const onResize = React.useCallback((name) => (width) => {
+		handleResizeDrag?.(name, width);
+	}, [handleResizeDrag]);
+	const onSetSort = React.useCallback((name, systemName) => (value) => {
+		onAddSort?.(systemName || name, value);
+	}, [onAddSort]);
+	const sensors = useSensors(useSensor(PointerSensor));
+	return /* @__PURE__ */ jsx(Fragment, { children: showUIElements && /* @__PURE__ */ jsx(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		onDragEnd: handleDragEnd,
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: columns.map(({ name }) => name),
+			strategy: horizontalListSortingStrategy,
+			children: /* @__PURE__ */ jsxs(Row, {
+				className: "headRow",
+				children: [
+					getStickyComponent(columns, "left", displayColumnsWidth),
+					columns.filter((item) => !item.sticky).map((column, index) => /* @__PURE__ */ jsx(HeadCell, {
+						column,
+						isDragDisabled,
+						displayColumnsWidth,
+						onResizeOut,
+						onResizeOver,
+						onResize,
+						sortingValues,
+						onSetSort,
+						group: groups[index],
+						hasResize: columnLayout === "normal" || !!columns[index + 1],
+						isSortTerminated
+					}, column.name)),
+					getStickyComponent(columns, "right", displayColumnsWidth)
+				]
+			})
+		})
+	}) });
+};
+//#endregion
+export { HeadRow as default };

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

@@ -1,11 +1,10 @@
-import { FC } from 'react';
-
-export declare const List: import('styled-components').StyledComponent<"ul", import('@xstyled/system').Theme, {}, never>;
-export declare const ListItem: import('styled-components').StyledComponent<"li", import('@xstyled/system').Theme, {}, never>;
-export declare const ListItemContent: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {
+import type { FC } from 'react';
+export declare const List: import("styled-components").StyledComponent<"ul", import("@xstyled/system").Theme, {}, never>;
+export declare const ListItem: import("styled-components").StyledComponent<"li", import("@xstyled/system").Theme, {}, never>;
+export declare const ListItemContent: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
     selected?: boolean;
 }, never>;
-export declare const ListItemIcon: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
+export declare const ListItemIcon: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
 type Item = {
     value: string;
     icon?: string;

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

@@ -0,0 +1,63 @@
+import Icon from "../../../../Elements/Icon/Icon.js";
+import React from "react";
+import styled$1 from "@xstyled/styled-components";
+import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/IconList/IconList.tsx
+const List = styled$1.ul`
+  background-color: white;
+  box-shadow: dropShadow;
+  border-radius: 10px;
+  padding: 2;
+  min-width: 130px;
+`;
+const ListItem = styled$1.li`
+  border-bottom: 1px solid ${th$1("colors.bgLightGray1")};
+  padding: 1 0;
+  cursor: pointer;
+`;
+const ListItemContent = styled$1.span`
+  display: flex;
+  align-items: center;
+  padding: 8px 10px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 400;
+  color: ${({ selected }) => selected ? th$1("colors.red1") : "auto"};
+  background-color: ${({ selected }) => selected ? th$1("colors.red20") : "transparent"};
+  :hover {
+    background-color: ${({ selected }) => selected ? th$1("colors.red30") : th$1("colors.bgLightGray1")};
+  }
+`;
+const ListItemIcon = styled$1.span`
+  display: inline-block;
+  border: 1px solid;
+  border-color: blue2;
+  border-radius: 2px;
+  margin-right: 2;
+  width: 12px;
+  height: 12px;
+  line-height: 6px;
+  padding-top: 1px;
+`;
+const IconList = ({ list, selected, onClick }) => {
+	const handleClick = React.useCallback((item) => () => {
+		onClick(item);
+	}, [onClick]);
+	return /* @__PURE__ */ jsx(List, {
+		className: "ignore-element-for-closing-hook",
+		children: list.map((item) => /* @__PURE__ */ jsx(ListItem, {
+			onClick: handleClick(item),
+			children: /* @__PURE__ */ jsxs(ListItemContent, {
+				selected: selected === item.value,
+				children: [item.icon && /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(Icon, {
+					icon: item.icon,
+					fill: "red1",
+					size: "8px"
+				}) }), item.label]
+			})
+		}, item.value))
+	});
+};
+//#endregion
+export { List, ListItem, ListItemContent, ListItemIcon, IconList as default };

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

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

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

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

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

@@ -1,7 +1,7 @@
-import { default as React, FC } from 'react';
-import { ColumnConfig, CommonGridProps } from '../../types';
-import { DragEndEvent } from '@dnd-kit/core';
-
+import React from 'react';
+import type { FC } from 'react';
+import type { ColumnConfig, CommonGridProps } from '../../types';
+import type { DragEndEvent } from '@dnd-kit/core';
 type ManageColumnProps = {
     columns: CommonGridProps['columnsDefinitions'];
     columnsConfigValues?: string[];

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

@@ -0,0 +1,55 @@
+import { Input } from "../../../../Forms/Input/Input.js";
+import { ManageColumnRow } from "./components/ManageColumnRow.js";
+import { useCallback, useState } from "react";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+//#region packages/ui/Blocks/CommonGrid/components/ManageColumnForm/ManageColumnForm.tsx
+const modifiers = [restrictToVerticalAxis];
+const ManageColumnForm = ({ columns, columnsConfigValues, setColumnsConfigOptions, handleDragEnd }) => {
+	const [searchedValue, setSearchedValue] = useState("");
+	const onChangeInputValue = useCallback((e) => {
+		setSearchedValue(e.target.value);
+	}, [setSearchedValue]);
+	const clear = useCallback(() => {
+		setSearchedValue("");
+	}, [setSearchedValue]);
+	const sensors = useSensors(useSensor(PointerSensor));
+	return /* @__PURE__ */ jsxs(x.div, { children: [/* @__PURE__ */ jsx(Input, {
+		icon: "search",
+		type: "text",
+		value: searchedValue,
+		placeholder: i18n._({
+			id: "manageColumn.searchPlaceholder",
+			message: "Find column..."
+		}),
+		onChange: onChangeInputValue,
+		onClear: clear,
+		variant: "gray"
+	}), /* @__PURE__ */ jsx(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		onDragEnd: handleDragEnd,
+		modifiers,
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: columns.map(({ name }) => name),
+			strategy: verticalListSortingStrategy,
+			children: /* @__PURE__ */ jsx(x.div, {
+				h: "400px",
+				overflowY: "scroll",
+				mt: "20px",
+				children: columns.map((column) => /* @__PURE__ */ jsx(ManageColumnRow, {
+					column,
+					columnsConfigValues,
+					setColumnsConfigOptions,
+					searchedValue
+				}, column.name))
+			})
+		})
+	})] });
+};
+//#endregion
+export { ManageColumnForm as default };

package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ManageColumnRow.d.ts

@@ -1,6 +1,6 @@
-import { default as React, FC } from 'react';
-import { ColumnConfig, ColumnDefinition } from '../../../types';
-
+import React from 'react';
+import type { FC } from 'react';
+import type { ColumnConfig, ColumnDefinition } from '../../../types';
 type ActionRowProps = {
     column: ColumnDefinition;
     columnsConfigValues: string[] | undefined;

package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ManageColumnRow.js

@@ -0,0 +1,70 @@
+import { Group } from "../../../../../Elements/Icon/icons/Group.js";
+import { H6 } from "../../../../../Elements/Typography/Typography.js";
+import { getTranslatedValue } from "../utils.js";
+import Toggle from "../../../../../Elements/Toggle/Toggle.js";
+import { RowLayout } from "../styles.js";
+import { useCallback, useState } from "react";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "/home/linomorfed/Projects/design-system/node_modules/@dnd-kit/utilities/dist/index.js";
+//#region packages/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ManageColumnRow.tsx
+const ManageColumnRow = ({ column, columnsConfigValues, setColumnsConfigOptions, searchedValue }) => {
+	const [isSelected, setIsSelected] = useState(columnsConfigValues?.includes(column.name) ?? false);
+	const handleToggleChange = useCallback(() => {
+		setColumnsConfigOptions((prevOptions) => {
+			return {
+				...prevOptions,
+				[column.name]: !isSelected ? {} : { isHidden: true }
+			};
+		});
+		setIsSelected(!isSelected);
+	}, [
+		setColumnsConfigOptions,
+		isSelected,
+		column.name
+	]);
+	const translatedValue = getTranslatedValue(column);
+	const isVisible = translatedValue?.toLocaleLowerCase()?.includes(searchedValue.toLocaleLowerCase()) && !column.alwaysOn;
+	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+		id: column.name,
+		disabled: !!searchedValue || !!column.sticky,
+		animateLayoutChanges: () => false
+	});
+	return /* @__PURE__ */ jsx(RowLayout, {
+		$isVisible: isVisible,
+		transition,
+		transform: CSS.Transform.toString(transform),
+		ref: setNodeRef,
+		children: /* @__PURE__ */ jsxs(x.div, {
+			display: "flex",
+			alignItems: "center",
+			w: "100%",
+			children: [/* @__PURE__ */ jsx(x.div, {
+				w: "28px",
+				children: /* @__PURE__ */ jsx(Toggle, {
+					name: "",
+					variant: "grid",
+					onChange: handleToggleChange,
+					spaceAround: false,
+					checked: isSelected
+				})
+			}), /* @__PURE__ */ jsxs(H6, {
+				variant: "medium",
+				ml: "8px",
+				m: "0",
+				w: "100%",
+				p: "8px",
+				cursor: "grab",
+				...attributes,
+				...listeners,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				children: [translatedValue, /* @__PURE__ */ jsx(Group, {})]
+			})]
+		})
+	});
+};
+//#endregion
+export { ManageColumnRow };

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

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

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

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

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

@@ -1,4 +1,4 @@
-export declare const RowLayout: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const RowLayout: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $isVisible: boolean;
     transition?: string;
     transform?: string;

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

@@ -0,0 +1,17 @@
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/CommonGrid/components/ManageColumnForm/styles.ts
+const RowLayout = styled$1.div`
+  display: ${({ $isVisible }) => $isVisible ? "flex" : "none"};
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  height: 52px;
+  background-color: white;
+  border: 1px solid ${th.color("lightGray6")};
+  border-radius: 8px;
+  margin-bottom: 15px;
+  transition: ${({ transition }) => transition};
+  transform: ${({ transform }) => transform};
+`;
+//#endregion
+export { RowLayout };

package/ui/Blocks/CommonGrid/components/ManageColumnForm/utils.d.ts

@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
-import { ColumnDefinition } from '../../types';
-
+import { type ReactNode } from 'react';
+import { type ColumnDefinition } from '../../types';
 export declare const getTranslatedValue: (column?: ColumnDefinition | null) => ReactNode;

package/ui/Blocks/CommonGrid/components/ManageColumnForm/utils.js

@@ -0,0 +1,9 @@
+import { i18n } from "@lingui/core";
+import isObject from "lodash/isObject.js";
+//#region packages/ui/Blocks/CommonGrid/components/ManageColumnForm/utils.ts
+const getTranslatedValue = (column) => column && isObject(column?.title) ? "props" in column.title && column.title?.props && i18n._({
+	id: column.title?.props?.id ?? "",
+	message: column.title?.props.message
+}) : column?.title;
+//#endregion
+export { getTranslatedValue };

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { ColumnDefinition, GridActionsType, FiltersConfig, CustomComparators, ActionColumn, UxState, RowProps, GridSelectorsType } from '../types';
-
+import { type FC } from 'react';
+import type { ColumnDefinition, GridActionsType, FiltersConfig, CustomComparators, ActionColumn, UxState, RowProps, GridSelectorsType } from '../types';
 type Props = {
     isShown: boolean;
     onClose: () => void;

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

@@ -0,0 +1,113 @@
+import { H6 } from "../../../Elements/Typography/Typography.js";
+import "../../../Elements/Typography/index.js";
+import { createFilterType, getFilterName, isFilterActive } from "../utils/index.js";
+import { Modal } from "../../Modal/Modal.js";
+import { MobileOverlayWrapper } from "./MobileOverlayWrapper.js";
+import { useCallback, useEffect, useState } from "react";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+import get from "lodash/fp/get.js";
+//#region packages/ui/Blocks/CommonGrid/components/MobileFilterModal.tsx
+const MobileFilterModal = ({ isShown, onClose, columns, filters, comparators, filterValues = {}, setFilters, rowsData, uxState, handleUxChange, onAsyncLoadFilterOptions, actionColumn, onClearSettings }) => {
+	const filterableColumns = columns.filter((col) => col.filtering && col.title);
+	const [localFilterValues, setLocalFilterValues] = useState(filterValues ?? {});
+	useEffect(() => {
+		if (isShown) setLocalFilterValues(filterValues ?? {});
+	}, [isShown]);
+	const hasActiveFilters = Object.values(localFilterValues).some((item) => isFilterActive(item.value));
+	const handleChange = useCallback((column) => (event, extraOthers) => {
+		const value = event?.target ? event.target.value : event;
+		setLocalFilterValues((prev) => ({
+			...prev,
+			[getFilterName(column)]: {
+				value,
+				filterProps: {
+					type: createFilterType(column),
+					filterExtraProps: column.filterExtraProps || {},
+					computedValue: column.getFilterCriteria ? column.getFilterCriteria(value) : null
+				},
+				others: extraOthers
+			}
+		}));
+	}, []);
+	const handleApplyFilters = useCallback((close) => {
+		setFilters(localFilterValues);
+		close();
+	}, [localFilterValues, setFilters]);
+	const handleReset = useCallback(() => {
+		setLocalFilterValues({});
+		onClearSettings?.();
+	}, [onClearSettings]);
+	return /* @__PURE__ */ jsx(Modal, {
+		isShown,
+		onClose,
+		title: /* @__PURE__ */ jsx(Trans, {
+			id: "dataGrid.filter",
+			message: "Filter"
+		}),
+		onCancel: handleReset,
+		cancelLabel: /* @__PURE__ */ jsx(Trans, {
+			id: "dataGrid.buttonClearSettings",
+			message: "Reset"
+		}),
+		onConfirm: handleApplyFilters,
+		confirmLabel: /* @__PURE__ */ jsx(Trans, {
+			id: "dataGrid.filter",
+			message: "Filter"
+		}),
+		hasFooter: hasActiveFilters,
+		width: "narrow",
+		ignoreClickOutside: true,
+		children: /* @__PURE__ */ jsx(x.div, {
+			display: "flex",
+			flexDirection: "column",
+			gap: "16px",
+			p: "8px 4px",
+			children: filterableColumns.map((column) => {
+				const filterType = createFilterType(column);
+				const filterConfig = filters?.[filterType];
+				const defaultComparators = comparators?.[filterType];
+				const value = get([getFilterName(column), "value"], localFilterValues);
+				const others = get([getFilterName(column), "others"], localFilterValues);
+				if (!filterConfig?.CellComponent) return null;
+				const RenderComponent = filterConfig.CellComponent;
+				return /* @__PURE__ */ jsxs(x.div, {
+					display: "flex",
+					flexDirection: "column",
+					gap: "6px",
+					position: "relative",
+					children: [column.title && /* @__PURE__ */ jsx(H6, {
+						mt: 0,
+						mb: 0,
+						variant: "semiBold",
+						children: column.title
+					}), /* @__PURE__ */ jsx(RenderComponent, {
+						asyncLoadKey: column.asyncLoadKey,
+						"data-test": column.name,
+						name: column.name,
+						onChange: handleChange(column),
+						value,
+						others,
+						OverlayComponent: MobileOverlayWrapper,
+						comparators: defaultComparators,
+						actionColumn,
+						rowsData,
+						uxState,
+						handleUxChange,
+						onAsyncLoadFilterOptions,
+						...filterType === "date" && { compact: true },
+						...filterType === "options" && {
+							options: column.filterOptions,
+							columnWidth: column?.flexBasis
+						},
+						...filterConfig?.defaultExtraProps,
+						...column.filterExtraProps
+					})]
+				}, column.name);
+			})
+		})
+	});
+};
+//#endregion
+export { MobileFilterModal as default };

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

@@ -1 +1 @@
-export declare const MobileOverlayWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const MobileOverlayWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

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

@@ -0,0 +1,14 @@
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Blocks/CommonGrid/components/MobileOverlayWrapper.tsx
+const MobileOverlayWrapper = styled$1.div`
+  position: absolute;
+  z-index: 10;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+`;
+//#endregion
+export { MobileOverlayWrapper };

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { ColumnDefinition, GridActionsType, GridSelectorsType } from '../types';
-
+import type { FC } from 'react';
+import type { ColumnDefinition, GridActionsType, GridSelectorsType } from '../types';
 type Props = {
     isShown: boolean;
     onClose: () => void;