@mailstep/design-system 0.8.27 → 0.8.28

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

@@ -1,256 +1,160 @@
-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 _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;
-}
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Settings2 } from "../../../../Elements/Icon/icons/Settings2.js";
+import { Filter } from "../../../../Elements/Icon/icons/Filter.js";
+import { Sort } from "../../../../Elements/Icon/icons/Sort.js";
+import Button from "../../../../Elements/Button/Button.js";
+import Tag from "../../../../Elements/Tag/Tag.js";
+import { palettes } from "../../../../Elements/Tag/palettes.js";
+import { H6 } from "../../../../Elements/Typography/Typography.js";
+import "../../../../Elements/Typography/index.js";
+import { isFilterActive } from "../../utils/index.js";
+import useQuickFilter from "../../hooks/useQuickFilter.js";
+import "../../types.js";
+import ExtraControlButtons_default from "../ExtraControlButtons/index.js";
+import QuickFilter_default from "../QuickFilter/index.js";
+import { ControlButtonsContainer, Left, Right, StyledColumnButton } from "./styles.js";
 import { useEffect, useMemo } from "react";
-import Button from "../../../../Elements/Button/Button";
-import { Filter } from "../../../../Elements/Icon/icons/Filter";
-import { Settings2 } from "../../../../Elements/Icon/icons/Settings2";
-import { Sort } from "../../../../Elements/Icon/icons/Sort";
-import Tag from "../../../../Elements/Tag/Tag";
-import { palettes } from "../../../../Elements/Tag/palettes";
-import { H6 } from "../../../../Elements/Typography";
-import useQuickFilter from "../../hooks/useQuickFilter";
-import { ExtraControlButtonPosition } from "../../types";
-import { isFilterActive } from "../../utils";
-import ExtraControlButtons from "../ExtraControlButtons";
-import QuickFilter from "../QuickFilter";
+import { useColor, x } from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { i18n } from "@lingui/core";
 import { Trans } from "@lingui/react";
-import { useColor, x } from "@xstyled/styled-components";
-import { ControlButtonsContainer, Left, Right, StyledColumnButton } from "./styles";
-var ControlButtons = function ControlButtons(param) {
-    var extraControlButtons = param.extraControlButtons, gridActions = param.gridActions, gridSelectors = param.gridSelectors, _param_quickFilter = param.quickFilter, quickFilter = _param_quickFilter === void 0 ? "" : _param_quickFilter, columns = param.columns, filters = param.filters, hideControlButtons = param.hideControlButtons, displayManageColumnButton = param.displayManageColumnButton, openManageColumnForm = param.openManageColumnForm, setDisplayManageColumnButton = param.setDisplayManageColumnButton, onOpenPresetsModal = param.onOpenPresetsModal, gridName = param.gridName, selectedPresetName = param.selectedPresetName, withPresets = param.withPresets, withManageColumnButton = param.withManageColumnButton, onOpenMobileFilters = param.onOpenMobileFilters, onOpenMobileSorting = param.onOpenMobileSorting, isSortTerminated = param.isSortTerminated;
-    var _ref;
-    var _gridSelectors_sorting;
-    var _useQuickFilter = useQuickFilter({
-        gridActions: gridActions,
-        gridSelectors: gridSelectors,
-        quickFilter: quickFilter,
-        columns: columns,
-        filters: filters
-    }), searchedValue = _useQuickFilter.searchedValue, translatedValue = _useQuickFilter.translatedValue, onChangeInputValue = _useQuickFilter.onChangeInputValue, onClear = _useQuickFilter.onClear, onClearSettings = _useQuickFilter.onClearSettings, onDisplayInput = _useQuickFilter.onDisplayInput, displayInput = _useQuickFilter.displayInput, isMobileInputView = _useQuickFilter.isMobileInputView, isMobile = _useQuickFilter.isMobile, filter = _useQuickFilter.filter;
-    useEffect(function() {
-        setDisplayManageColumnButton(!isMobileInputView && !!withManageColumnButton);
-    }, [
-        isMobileInputView,
-        withManageColumnButton,
-        setDisplayManageColumnButton
-    ]);
-    var red = useColor("red1");
-    var filtersCount = useMemo(function() {
-        return filter ? Object.values(filter).filter(function(item) {
-            return isFilterActive(item.value);
-        }).length : 0;
-    }, [
-        filter
-    ]);
-    var hasFilterableColumns = !!(columns === null || columns === void 0 ? void 0 : columns.some(function(col) {
-        return col.filtering;
-    }));
-    var hasSortableColumns = !!(columns === null || columns === void 0 ? void 0 : columns.some(function(col) {
-        return col.sorting;
-    }));
-    var sortCount = (_ref = (_gridSelectors_sorting = gridSelectors.sorting) === null || _gridSelectors_sorting === void 0 ? void 0 : _gridSelectors_sorting.length) !== null && _ref !== void 0 ? _ref : 0;
-    return /* @__PURE__ */ jsxs(ControlButtonsContainer, {
-        children: [
-            /* @__PURE__ */ jsxs(Left, {
-                children: [
-                    !hideControlButtons && /* @__PURE__ */ jsxs(Fragment, {
-                        children: [
-                            quickFilter && !isMobile && /* @__PURE__ */ jsx(QuickFilter, {
-                                searchedValue: searchedValue,
-                                placeholderText: i18n._({
-                                    id: "controlButtons.searchPlaceholder",
-                                    message: "Search ".concat(translatedValue, " ..."),
-                                    values: {
-                                        translatedValue: translatedValue
-                                    }
-                                }),
-                                onChange: onChangeInputValue,
-                                onClear: onClear,
-                                onClick: onDisplayInput,
-                                displayInput: displayInput,
-                                isMobileInputView: isMobileInputView
-                            }),
-                            /* @__PURE__ */ jsx(ExtraControlButtons, {
-                                extraControlButtons: extraControlButtons,
-                                targetPosition: ExtraControlButtonPosition.TopLeft
-                            }),
-                            /* @__PURE__ */ jsx(x.div, {
-                                children: !!filtersCount && !isMobile && /* @__PURE__ */ jsx(Button, {
-                                    type: "button",
-                                    onClick: onClearSettings,
-                                    variant: "default",
-                                    appearance: "secondary",
-                                    "data-cy": "resetFiltersBtn",
-                                    children: /* @__PURE__ */ jsx(Trans, {
-                                        id: "dataGrid.buttonClearSettings",
-                                        message: "Reset"
-                                    })
-                                })
-                            })
-                        ]
-                    }),
-                    isMobile && hasFilterableColumns && /* @__PURE__ */ jsxs(Button, {
-                        type: "button",
-                        appearance: filtersCount ? "primary" : "tertiary",
-                        onClick: onOpenMobileFilters,
-                        "data-cy": "mobileFilterBtn",
-                        children: [
-                            /* @__PURE__ */ jsx(Filter, {
-                                fill: filtersCount ? "white" : red
-                            }),
-                            /* @__PURE__ */ jsxs(H6, {
-                                variant: "semiBold",
-                                mt: 0,
-                                mb: 0,
-                                ml: "6px",
-                                children: [
-                                    /* @__PURE__ */ jsx(Trans, {
-                                        id: "dataGrid.filter",
-                                        message: "Filter"
-                                    }),
-                                    " ",
-                                    filtersCount > 0 && "(".concat(filtersCount, ")")
-                                ]
-                            })
-                        ]
-                    }),
-                    isMobile && hasSortableColumns && /* @__PURE__ */ jsx(x.div, {
-                        ml: "10px",
-                        children: /* @__PURE__ */ jsxs(Button, {
-                            type: "button",
-                            appearance: sortCount ? "primary" : "tertiary",
-                            onClick: onOpenMobileSorting,
-                            disabled: isSortTerminated,
-                            "data-cy": "mobileSortBtn",
-                            children: [
-                                /* @__PURE__ */ jsx(Sort, {
-                                    stroke: sortCount ? "white" : red
-                                }),
-                                /* @__PURE__ */ jsxs(H6, {
-                                    variant: "semiBold",
-                                    mt: 0,
-                                    mb: 0,
-                                    ml: "6px",
-                                    children: [
-                                        /* @__PURE__ */ jsx(Trans, {
-                                            id: "dataGrid.sort",
-                                            message: "Sort"
-                                        }),
-                                        " ",
-                                        sortCount > 0 && "(".concat(sortCount, ")")
-                                    ]
-                                })
-                            ]
-                        })
-                    }),
-                    withPresets && gridName && !isMobile && /* @__PURE__ */ jsxs(Fragment, {
-                        children: [
-                            /* @__PURE__ */ jsx(x.div, {
-                                mx: "12px",
-                                children: /* @__PURE__ */ jsx(Button, {
-                                    onClick: onOpenPresetsModal,
-                                    type: "button",
-                                    variant: "default",
-                                    appearance: "tertiary",
-                                    children: /* @__PURE__ */ jsx(Trans, {
-                                        id: "dataGrid.presets.title",
-                                        message: "Presets"
-                                    })
-                                })
-                            }),
-                            selectedPresetName && /* @__PURE__ */ jsx(Tag, _object_spread_props(_object_spread({
-                                size: "medium"
-                            }, palettes.redWhite), {
-                                children: /* @__PURE__ */ jsx(H6, {
-                                    mt: 0,
-                                    mb: 0,
-                                    variant: "semiBold",
-                                    children: selectedPresetName
-                                })
-                            }))
-                        ]
-                    })
-                ]
-            }),
-            /* @__PURE__ */ jsxs(Right, {
-                children: [
-                    /* @__PURE__ */ jsx(ExtraControlButtons, {
-                        extraControlButtons: extraControlButtons,
-                        targetPosition: ExtraControlButtonPosition.TopRight,
-                        isMobile: isMobile
-                    }),
-                    displayManageColumnButton && !isMobile && /* @__PURE__ */ jsx(StyledColumnButton, {
-                        type: "button",
-                        variant: "ghost",
-                        appearance: "primary",
-                        iconLeft: /* @__PURE__ */ jsx(Settings2, {}),
-                        onClick: openManageColumnForm,
-                        children: /* @__PURE__ */ jsx(H6, {
-                            variant: "semiBold",
-                            mt: 0,
-                            mb: 0,
-                            children: /* @__PURE__ */ jsx(Trans, {
-                                id: "manageColumn.title",
-                                message: "Manage column"
-                            })
-                        })
-                    })
-                ]
-            })
-        ]
-    });
+//#region packages/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.tsx
+const ControlButtons = ({ extraControlButtons, gridActions, gridSelectors, quickFilter = "", columns, filters, hideControlButtons, displayManageColumnButton, openManageColumnForm, setDisplayManageColumnButton, onOpenPresetsModal, gridName, selectedPresetName, withPresets, withManageColumnButton, onOpenMobileFilters, onOpenMobileSorting, isSortTerminated }) => {
+	const { searchedValue, translatedValue, onChangeInputValue, onClear, onClearSettings, onDisplayInput, displayInput, isMobileInputView, isMobile, filter } = useQuickFilter({
+		gridActions,
+		gridSelectors,
+		quickFilter,
+		columns,
+		filters
+	});
+	useEffect(() => {
+		setDisplayManageColumnButton(!isMobileInputView && !!withManageColumnButton);
+	}, [
+		isMobileInputView,
+		withManageColumnButton,
+		setDisplayManageColumnButton
+	]);
+	const red = useColor("red1");
+	const filtersCount = useMemo(() => filter ? Object.values(filter).filter((item) => isFilterActive(item.value)).length : 0, [filter]);
+	const hasFilterableColumns = !!columns?.some((col) => col.filtering);
+	const hasSortableColumns = !!columns?.some((col) => col.sorting);
+	const sortCount = gridSelectors.sorting?.length ?? 0;
+	return /* @__PURE__ */ jsxs(ControlButtonsContainer, { children: [/* @__PURE__ */ jsxs(Left, { children: [
+		!hideControlButtons && /* @__PURE__ */ jsxs(Fragment, { children: [
+			quickFilter && !isMobile && /* @__PURE__ */ jsx(QuickFilter_default, {
+				searchedValue,
+				placeholderText: i18n._({
+					id: "controlButtons.searchPlaceholder",
+					message: `Search ${translatedValue} ...`,
+					values: { translatedValue }
+				}),
+				onChange: onChangeInputValue,
+				onClear,
+				onClick: onDisplayInput,
+				displayInput,
+				isMobileInputView
+			}),
+			/* @__PURE__ */ jsx(ExtraControlButtons_default, {
+				extraControlButtons,
+				targetPosition: "top-left"
+			}),
+			/* @__PURE__ */ jsx(x.div, { children: !!filtersCount && !isMobile && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				onClick: onClearSettings,
+				variant: "default",
+				appearance: "secondary",
+				"data-cy": "resetFiltersBtn",
+				children: /* @__PURE__ */ jsx(Trans, {
+					id: "dataGrid.buttonClearSettings",
+					message: "Reset"
+				})
+			}) })
+		] }),
+		isMobile && hasFilterableColumns && /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			appearance: filtersCount ? "primary" : "tertiary",
+			onClick: onOpenMobileFilters,
+			"data-cy": "mobileFilterBtn",
+			children: [/* @__PURE__ */ jsx(Filter, { fill: filtersCount ? "white" : red }), /* @__PURE__ */ jsxs(H6, {
+				variant: "semiBold",
+				mt: 0,
+				mb: 0,
+				ml: "6px",
+				children: [
+					/* @__PURE__ */ jsx(Trans, {
+						id: "dataGrid.filter",
+						message: "Filter"
+					}),
+					" ",
+					filtersCount > 0 && `(${filtersCount})`
+				]
+			})]
+		}),
+		isMobile && hasSortableColumns && /* @__PURE__ */ jsx(x.div, {
+			ml: "10px",
+			children: /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				appearance: sortCount ? "primary" : "tertiary",
+				onClick: onOpenMobileSorting,
+				disabled: isSortTerminated,
+				"data-cy": "mobileSortBtn",
+				children: [/* @__PURE__ */ jsx(Sort, { stroke: sortCount ? "white" : red }), /* @__PURE__ */ jsxs(H6, {
+					variant: "semiBold",
+					mt: 0,
+					mb: 0,
+					ml: "6px",
+					children: [
+						/* @__PURE__ */ jsx(Trans, {
+							id: "dataGrid.sort",
+							message: "Sort"
+						}),
+						" ",
+						sortCount > 0 && `(${sortCount})`
+					]
+				})]
+			})
+		}),
+		withPresets && gridName && !isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(x.div, {
+			mx: "12px",
+			children: /* @__PURE__ */ jsx(Button, {
+				onClick: onOpenPresetsModal,
+				type: "button",
+				variant: "default",
+				appearance: "tertiary",
+				children: /* @__PURE__ */ jsx(Trans, {
+					id: "dataGrid.presets.title",
+					message: "Presets"
+				})
+			})
+		}), selectedPresetName && /* @__PURE__ */ jsx(Tag, {
+			size: "medium",
+			...palettes.redWhite,
+			children: /* @__PURE__ */ jsx(H6, {
+				mt: 0,
+				mb: 0,
+				variant: "semiBold",
+				children: selectedPresetName
+			})
+		})] })
+	] }), /* @__PURE__ */ jsxs(Right, { children: [/* @__PURE__ */ jsx(ExtraControlButtons_default, {
+		extraControlButtons,
+		targetPosition: "top-right",
+		isMobile
+	}), displayManageColumnButton && !isMobile && /* @__PURE__ */ jsx(StyledColumnButton, {
+		type: "button",
+		variant: "ghost",
+		appearance: "primary",
+		iconLeft: /* @__PURE__ */ jsx(Settings2, {}),
+		onClick: openManageColumnForm,
+		children: /* @__PURE__ */ jsx(H6, {
+			variant: "semiBold",
+			mt: 0,
+			mb: 0,
+			children: /* @__PURE__ */ jsx(Trans, {
+				id: "manageColumn.title",
+				message: "Manage column"
+			})
+		})
+	})] })] });
 };
-var ControlButtons_default = ControlButtons;
-export { ControlButtons_default as default };
+//#endregion
+export { ControlButtons as default };

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

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

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

@@ -1,55 +1,42 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
+import Button from "../../../../Elements/Button/Button.js";
+import "../../../../Elements/Button/index.js";
+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";
+//#region packages/ui/Blocks/CommonGrid/components/ControlButtons/styles.ts
+const ControlButtonsContainer = styled$1.div`
+  display: flex;
+  position: sticky;
+  justify-content: space-between;
+  flex: 1;
+  left: 20px;
+`;
+const Left = styled$1.div`
+  display: flex;
+  margin-right: 10px;
+`;
+const Right = styled$1.div`
+  display: flex;
+`;
+const StyledColumnButton = styled$1(Button)`
+  position: sticky;
+  right: 20px;
+  z-index: 3;
+  margin-left: 8px;
+
+  > span > svg {
+    stroke: ${th$1("colors.blue2")};
+    width: 18px;
+    height: 18px;
+  }
+  > span > H6 {
+    display: none;
+  }
+  @media (min-width: 1024px) {
+    > span > H6 {
+      display: flex;
+      margin-left: 5px;
     }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  position: sticky;\n  justify-content: space-between;\n  flex: 1;\n  left: 20px;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  margin-right: 10px;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  position: sticky;\n  right: 20px;\n  z-index: 3;\n  margin-left: 8px;\n\n  > span > svg {\n    stroke: ",
-        ";\n    width: 18px;\n    height: 18px;\n  }\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { Button } from "../../../../Elements/Button";
-import styled from "@xstyled/styled-components";
-import { th } from "@xstyled/system";
-var ControlButtonsContainer = styled.div(_templateObject());
-var Left = styled.div(_templateObject1());
-var Right = styled.div(_templateObject2());
-var StyledColumnButton = styled(Button)(_templateObject3(), th("colors.blue2"));
+  }
+`;
+//#endregion
 export { ControlButtonsContainer, Left, Right, StyledColumnButton };