@mailstep/design-system 0.8.27 → 0.8.28

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

@@ -1,11 +1,9 @@
 import { i18n } from "@lingui/core";
-import isObject from "lodash/isObject";
-var getTranslatedValue = function getTranslatedValue(column) {
-    var _ref;
-    var _column_title, _column_title_props, _column_title1, _column_title2;
-    return column && isObject(column === null || column === void 0 ? void 0 : column.title) ? "props" in column.title && ((_column_title = column.title) === null || _column_title === void 0 ? void 0 : _column_title.props) && i18n._({
-        id: (_ref = (_column_title1 = column.title) === null || _column_title1 === void 0 ? void 0 : (_column_title_props = _column_title1.props) === null || _column_title_props === void 0 ? void 0 : _column_title_props.id) !== null && _ref !== void 0 ? _ref : "",
-        message: (_column_title2 = column.title) === null || _column_title2 === void 0 ? void 0 : _column_title2.props.message
-    }) : column === null || column === void 0 ? void 0 : column.title;
-};
+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.js

@@ -1,231 +1,113 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-        }
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
-import { jsx, jsxs } from "react/jsx-runtime";
+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 { 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 MobileFilterModal(param) {
-    var isShown = param.isShown, onClose = param.onClose, columns = param.columns, filters = param.filters, comparators = param.comparators, _param_filterValues = param.filterValues, filterValues = _param_filterValues === void 0 ? {} : _param_filterValues, setFilters = param.setFilters, rowsData = param.rowsData, uxState = param.uxState, handleUxChange = param.handleUxChange, onAsyncLoadFilterOptions = param.onAsyncLoadFilterOptions, actionColumn = param.actionColumn, onClearSettings = param.onClearSettings;
-    var filterableColumns = columns.filter(function(col) {
-        return col.filtering && col.title;
-    });
-    var _useState = _sliced_to_array(useState(filterValues !== null && filterValues !== void 0 ? filterValues : {}), 2), localFilterValues = _useState[0], setLocalFilterValues = _useState[1];
-    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) {
-                return _object_spread_props(_object_spread({}, prev), _define_property({}, getFilterName(column), {
-                    value: value,
-                    filterProps: {
-                        type: createFilterType(column),
-                        filterExtraProps: column.filterExtraProps || {},
-                        computedValue: column.getFilterCriteria ? column.getFilterCriteria(value) : null
-                    },
-                    others: extraOthers
-                }));
-            });
-        };
-    }, []);
-    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 /* @__PURE__ */ jsx(Modal, {
-        isShown: isShown,
-        onClose: 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(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 /* @__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, _object_spread({
-                            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);
-            })
-        })
-    });
+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);
+			})
+		})
+	});
 };
-var MobileFilterModal_default = MobileFilterModal;
-export { MobileFilterModal_default as default };
+//#endregion
+export { MobileFilterModal as default };

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

@@ -1,22 +1,14 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled from "@xstyled/styled-components";
-var MobileOverlayWrapper = styled.div(_templateObject());
+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.js

@@ -1,94 +1,70 @@
-import { jsx } from "react/jsx-runtime";
+import Button_default from "../../../Elements/Button/index.js";
+import { getSortName } from "../utils/index.js";
+import { Modal } from "../../Modal/Modal.js";
+import { SortingDown, SortingUp } from "./icons/Sorting.js";
 import { useCallback } from "react";
-import Button from "../../../Elements/Button";
-import { Modal } from "../../Modal/Modal";
-import { getSortName } from "../utils";
-import { SortingUp, SortingDown } from "./icons/Sorting";
-import { Trans } from "@lingui/react";
 import { x } from "@xstyled/styled-components";
-var AscIcon = /* @__PURE__ */ jsx(SortingUp, {
-    width: "16",
-    fill: "white"
+import { jsx } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Blocks/CommonGrid/components/MobileSortModal.tsx
+const AscIcon = /* @__PURE__ */ jsx(SortingUp, {
+	width: "16",
+	fill: "white"
 });
-var DescIcon = /* @__PURE__ */ jsx(SortingDown, {
-    width: "16",
-    fill: "white"
+const DescIcon = /* @__PURE__ */ jsx(SortingDown, {
+	width: "16",
+	fill: "white"
 });
-var SortRow = function SortRow(param) {
-    var column = param.column, currentDirection = param.currentDirection, onCycle = param.onCycle;
-    var handleClick = useCallback(function() {
-        onCycle(column);
-    }, [
-        column,
-        onCycle
-    ]);
-    var icon = currentDirection === "asc" ? AscIcon : currentDirection === "desc" ? DescIcon : null;
-    return /* @__PURE__ */ jsx(Button, {
-        type: "button",
-        onClick: handleClick,
-        appearance: currentDirection ? "primary" : "secondary",
-        iconRight: icon,
-        fullWidth: true,
-        children: column.title
-    });
+const SortRow = ({ column, currentDirection, onCycle }) => {
+	return /* @__PURE__ */ jsx(Button_default, {
+		type: "button",
+		onClick: useCallback(() => {
+			onCycle(column);
+		}, [column, onCycle]),
+		appearance: currentDirection ? "primary" : "secondary",
+		iconRight: currentDirection === "asc" ? AscIcon : currentDirection === "desc" ? DescIcon : null,
+		fullWidth: true,
+		children: column.title
+	});
 };
-var MobileSortModal = function MobileSortModal(param) {
-    var isShown = param.isShown, onClose = param.onClose, columns = param.columns, _param_sortingValues = param.sortingValues, sortingValues = _param_sortingValues === void 0 ? [] : _param_sortingValues, onAddSorting = param.onAddSorting, onResetSorting = param.onResetSorting;
-    var sortableColumns = columns.filter(function(col) {
-        return col.sorting;
-    });
-    var getCurrentDirection = useCallback(function(column) {
-        var _sortingValues_find;
-        return ((_sortingValues_find = sortingValues.find(function(s) {
-            return s.column === getSortName(column);
-        })) === null || _sortingValues_find === void 0 ? void 0 : _sortingValues_find.direction) || null;
-    }, [
-        sortingValues
-    ]);
-    var activeSortedColumn = sortableColumns.find(function(col) {
-        return getCurrentDirection(col) !== null;
-    });
-    var handleCycle = useCallback(function(column) {
-        var current = getCurrentDirection(column);
-        var next = current ? current === "asc" ? "desc" : null : "asc";
-        onAddSorting(getSortName(column), next);
-    }, [
-        getCurrentDirection,
-        onAddSorting
-    ]);
-    var handleClearSort = useCallback(function() {
-        onResetSorting === null || onResetSorting === void 0 ? void 0 : onResetSorting();
-    }, [
-        onResetSorting
-    ]);
-    return /* @__PURE__ */ jsx(Modal, {
-        isShown: isShown,
-        onClose: onClose,
-        title: /* @__PURE__ */ jsx(Trans, {
-            id: "dataGrid.sort",
-            message: "Sort"
-        }),
-        onConfirm: activeSortedColumn ? handleClearSort : void 0,
-        confirmLabel: /* @__PURE__ */ jsx(Trans, {
-            id: "dataGrid.buttonClearSettings",
-            message: "Reset"
-        }),
-        width: "narrow",
-        ignoreClickOutside: true,
-        children: /* @__PURE__ */ jsx(x.div, {
-            display: "flex",
-            flexDirection: "column",
-            gap: "8px",
-            p: "8px 4px",
-            children: sortableColumns.map(function(column) {
-                return /* @__PURE__ */ jsx(SortRow, {
-                    column: column,
-                    currentDirection: getCurrentDirection(column),
-                    onCycle: handleCycle
-                }, column.name);
-            })
-        })
-    });
+const MobileSortModal = ({ isShown, onClose, columns, sortingValues = [], onAddSorting, onResetSorting }) => {
+	const sortableColumns = columns.filter((col) => col.sorting);
+	const getCurrentDirection = useCallback((column) => sortingValues.find((s) => s.column === getSortName(column))?.direction || null, [sortingValues]);
+	const activeSortedColumn = sortableColumns.find((col) => getCurrentDirection(col) !== null);
+	const handleCycle = useCallback((column) => {
+		const current = getCurrentDirection(column);
+		const next = current ? current === "asc" ? "desc" : null : "asc";
+		onAddSorting(getSortName(column), next);
+	}, [getCurrentDirection, onAddSorting]);
+	const handleClearSort = useCallback(() => {
+		onResetSorting?.();
+	}, [onResetSorting]);
+	return /* @__PURE__ */ jsx(Modal, {
+		isShown,
+		onClose,
+		title: /* @__PURE__ */ jsx(Trans, {
+			id: "dataGrid.sort",
+			message: "Sort"
+		}),
+		onConfirm: activeSortedColumn ? handleClearSort : void 0,
+		confirmLabel: /* @__PURE__ */ jsx(Trans, {
+			id: "dataGrid.buttonClearSettings",
+			message: "Reset"
+		}),
+		width: "narrow",
+		ignoreClickOutside: true,
+		children: /* @__PURE__ */ jsx(x.div, {
+			display: "flex",
+			flexDirection: "column",
+			gap: "8px",
+			p: "8px 4px",
+			children: sortableColumns.map((column) => /* @__PURE__ */ jsx(SortRow, {
+				column,
+				currentDirection: getCurrentDirection(column),
+				onCycle: handleCycle
+			}, column.name))
+		})
+	});
 };
-var MobileSortModal_default = MobileSortModal;
-export { MobileSortModal_default as default };
+//#endregion
+export { MobileSortModal as default };