@mailstep/design-system 0.8.30 → 0.8.31-beta.2

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

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

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

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

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

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

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

@@ -1,70 +1,41 @@
-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 "@dnd-kit/utilities";
-//#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, {})]
-			})]
-		})
-	});
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Group } from '../../../../../Elements/Icon/icons/Group';
+import Toggle from '../../../../../Elements/Toggle/Toggle';
+import { H6 } from '../../../../../Elements/Typography/Typography';
+import { RowLayout } from '../styles';
+import { getTranslatedValue } from '../utils';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { x } from '@xstyled/styled-components';
+export var ManageColumnRow = function (_a) {
+    var _b, _c;
+    var column = _a.column, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, searchedValue = _a.searchedValue;
+    var _d = useState((_b = columnsConfigValues === null || columnsConfigValues === void 0 ? void 0 : columnsConfigValues.includes(column.name)) !== null && _b !== void 0 ? _b : false), isSelected = _d[0], setIsSelected = _d[1];
+    var handleToggleChange = useCallback(function () {
+        setColumnsConfigOptions(function (prevOptions) {
+            var _a;
+            return __assign(__assign({}, prevOptions), (_a = {}, _a[column.name] = !isSelected ? {} : { isHidden: true }, _a));
+        });
+        setIsSelected(!isSelected);
+    }, [setColumnsConfigOptions, isSelected, column.name]);
+    var translatedValue = getTranslatedValue(column);
+    var isVisible = ((_c = translatedValue === null || translatedValue === void 0 ? void 0 : translatedValue.toLocaleLowerCase()) === null || _c === void 0 ? void 0 : _c.includes(searchedValue.toLocaleLowerCase())) && !column.alwaysOn;
+    var _e = useSortable({
+        id: column.name,
+        disabled: !!searchedValue || !!column.sticky,
+        animateLayoutChanges: function () { return false; }
+    }), attributes = _e.attributes, listeners = _e.listeners, setNodeRef = _e.setNodeRef, transform = _e.transform, transition = _e.transition;
+    return (_jsx(RowLayout, { "$isVisible": isVisible, transition: transition, transform: CSS.Transform.toString(transform), ref: setNodeRef, children: _jsxs(x.div, { display: "flex", alignItems: "center", w: "100%", children: [_jsx(x.div, { w: "28px", children: _jsx(Toggle, { name: "", variant: "grid", onChange: handleToggleChange, spaceAround: false, checked: isSelected }) }), _jsxs(H6, __assign({ variant: "medium", ml: "8px", m: "0", w: "100%", p: "8px", cursor: "grab" }, attributes, listeners, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [translatedValue, _jsx(Group, {})] }))] }) }));
 };
-//#endregion
-export { ManageColumnRow };

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

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

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

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

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

@@ -1,5 +1,5 @@
-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;
+    transition?: string | undefined;
+    transform?: string | undefined;
 }, never>;

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

@@ -1,17 +1,16 @@
-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 };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { th } from '@xstyled/styled-components';
+export var RowLayout = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  background-color: white;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n  transition: ", ";\n  transform: ", ";\n"], ["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  background-color: white;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n  transition: ", ";\n  transform: ", ";\n"])), function (_a) {
+    var $isVisible = _a.$isVisible;
+    return ($isVisible ? 'flex' : 'none');
+}, th.color('lightGray6'), function (_a) {
+    var transition = _a.transition;
+    return transition;
+}, function (_a) {
+    var transform = _a.transform;
+    return transform;
+});
+var templateObject_1;

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

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

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

@@ -1,9 +1,10 @@
-import { i18n } from "@lingui/core";
-import isObject from "lodash/isObject";
-//#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 };
+import { i18n } from '@lingui/core';
+import isObject from 'lodash/isObject';
+export var getTranslatedValue = function (column) {
+    var _a, _b, _c, _d;
+    return column && isObject(column === null || column === void 0 ? void 0 : column.title)
+        ? 'props' in column.title &&
+            ((_a = column.title) === null || _a === void 0 ? void 0 : _a.props) &&
+            i18n._({ id: (_c = (_b = column.title) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.id, message: (_d = column.title) === null || _d === void 0 ? void 0 : _d.props.message })
+        : column === null || column === void 0 ? void 0 : column.title;
+};

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

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

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

@@ -1,113 +1,69 @@
-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";
-//#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);
-			})
-		})
-	});
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-//#endregion
-export { MobileFilterModal as default };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { H6 } from '../../../Elements/Typography';
+import { Modal } from '../../Modal/Modal';
+import { createFilterType, getFilterName, isFilterActive } from '../utils';
+import { Trans } from '@lingui/react';
+import { x } from '@xstyled/styled-components';
+import get from 'lodash/fp/get';
+import { MobileOverlayWrapper } from './MobileOverlayWrapper';
+var MobileFilterModal = function (_a) {
+    var isShown = _a.isShown, onClose = _a.onClose, columns = _a.columns, filters = _a.filters, comparators = _a.comparators, _b = _a.filterValues, filterValues = _b === void 0 ? {} : _b, setFilters = _a.setFilters, rowsData = _a.rowsData, uxState = _a.uxState, handleUxChange = _a.handleUxChange, onAsyncLoadFilterOptions = _a.onAsyncLoadFilterOptions, actionColumn = _a.actionColumn, onClearSettings = _a.onClearSettings;
+    var filterableColumns = columns.filter(function (col) { return col.filtering && col.title; });
+    var _c = useState(filterValues !== null && filterValues !== void 0 ? filterValues : {}), localFilterValues = _c[0], setLocalFilterValues = _c[1];
+    // Re-sync local state whenever the modal is opened
+    useEffect(function () {
+        if (isShown) {
+            setLocalFilterValues(filterValues !== null && filterValues !== void 0 ? filterValues : {});
+        }
+    }, [isShown]);
+    var hasActiveFilters = Object.values(localFilterValues).some(function (item) { return isFilterActive(item.value); });
+    var handleChange = useCallback(function (column) {
+        return function (event, extraOthers) {
+            var value = (event === null || event === void 0 ? void 0 : event.target) ? event.target.value : event;
+            setLocalFilterValues(function (prev) {
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[getFilterName(column)] = {
+                    value: value,
+                    filterProps: {
+                        type: createFilterType(column),
+                        filterExtraProps: column.filterExtraProps || {},
+                        computedValue: column.getFilterCriteria ? column.getFilterCriteria(value) : null
+                    },
+                    others: extraOthers
+                }, _a)));
+            });
+        };
+    }, []);
+    var handleApplyFilters = useCallback(function (close) {
+        setFilters(localFilterValues);
+        close();
+    }, [localFilterValues, setFilters]);
+    var handleReset = useCallback(function () {
+        setLocalFilterValues({});
+        onClearSettings === null || onClearSettings === void 0 ? void 0 : onClearSettings();
+    }, [onClearSettings]);
+    return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), onCancel: handleReset, cancelLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), onConfirm: handleApplyFilters, confirmLabel: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), hasFooter: hasActiveFilters, width: "narrow", ignoreClickOutside: true, children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "16px", p: "8px 4px", children: filterableColumns.map(function (column) {
+                var filterType = createFilterType(column);
+                var filterConfig = filters === null || filters === void 0 ? void 0 : filters[filterType];
+                var defaultComparators = comparators === null || comparators === void 0 ? void 0 : comparators[filterType];
+                var value = get([getFilterName(column), 'value'], localFilterValues);
+                var others = get([getFilterName(column), 'others'], localFilterValues);
+                if (!(filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.CellComponent))
+                    return null;
+                var RenderComponent = filterConfig.CellComponent;
+                return (_jsxs(x.div, { display: "flex", flexDirection: "column", gap: "6px", position: "relative", children: [column.title && (_jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: column.title })), _jsx(RenderComponent, __assign({ asyncLoadKey: column.asyncLoadKey, "data-test": column.name, name: column.name, onChange: handleChange(column), value: value, others: others, OverlayComponent: MobileOverlayWrapper, comparators: defaultComparators, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions }, (filterType === 'date' && { compact: true }), (filterType === 'options' && { options: column.filterOptions, columnWidth: column === null || column === void 0 ? void 0 : column.flexBasis }), filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, column.filterExtraProps))] }, column.name));
+            }) }) }));
+};
+export default MobileFilterModal;

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

@@ -1,14 +1,7 @@
-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 };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@xstyled/styled-components';
+export var MobileOverlayWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 10;\n  top: 100%;\n  left: 0;\n  right: 0;\n  background-color: white;\n  border-radius: 4px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n"], ["\n  position: absolute;\n  z-index: 10;\n  top: 100%;\n  left: 0;\n  right: 0;\n  background-color: white;\n  border-radius: 4px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n"])));
+var templateObject_1;

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

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