@mailstep/design-system 0.8.31-beta.3 → 0.8.31

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

@@ -1,26 +1,55 @@
-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)); }) }) }) })] }));
+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))
+			})
+		})
+	})] });
 };
-export default ManageColumnForm;
+//#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

@@ -1,41 +1,70 @@
-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, {})] }))] }) }));
+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, {})]
+			})]
+		})
+	});
 };
+//#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

@@ -1,2 +1,5 @@
-import ManageColumnForm from './ManageColumnForm';
-export default ManageColumnForm;
+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,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/styled-components").Theme, {
     $isVisible: boolean;
-    transition?: string | undefined;
-    transform?: string | undefined;
+    transition?: string;
+    transform?: string;
 }, never>;

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

@@ -1,16 +1,17 @@
-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;
+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

@@ -1,10 +1,9 @@
-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;
-};
+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 };

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

@@ -1,69 +1,113 @@
-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 { 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);
+			})
+		})
+	});
 };
-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;
+//#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/styled-components").Theme, {}, never>;

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

@@ -1,7 +1,14 @@
-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;
+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;