@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Blocks/CommonGrid/HoC/withReduxActions.js

@@ -1,49 +1,32 @@
-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;
-}
+import { createActions, createFullSelector } from "../store/index.js";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
-import { createActions, createFullSelector } from "../store";
-var withReduxActions = function withReduxActions(gridName) {
-    var prefix = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "grid";
-    var actions = createActions(gridName);
-    var selectors = createFullSelector(gridName);
-    return connect(function(state) {
-        return _define_property({}, "".concat(prefix, "Selectors"), selectors(state));
-    }, function(dispatch) {
-        return _define_property({}, "".concat(prefix, "Actions"), bindActionCreators({
-            init: actions.init,
-            clearUxState: actions.clearUxState,
-            handleUxChange: actions.handleUxChange,
-            openConfigForm: actions.openConfigForm,
-            closeConfigForm: actions.closeConfigForm,
-            setColumnConfig: actions.setColumnConfig,
-            setPage: actions.setPage,
-            setPresets: actions.setPresets,
-            createPreset: actions.createPreset,
-            deletePreset: actions.deletePreset,
-            setRowsPerPage: actions.setRowsPerPage,
-            addFilter: actions.addFilter,
-            setFilters: actions.setFilters,
-            resetFilters: actions.resetFilters,
-            addSorting: actions.addSorting,
-            resetSorting: actions.resetSorting,
-            clearSettings: actions.clearSettings,
-            setColumnWidth: actions.setColumnWidth,
-            resetGrid: actions.resetGrid,
-            setColumnsOrder: actions.setColumnsOrder
-        }, dispatch));
-    });
+//#region packages/ui/Blocks/CommonGrid/HoC/withReduxActions.ts
+const withReduxActions = (gridName, prefix = "grid") => {
+	const actions = createActions(gridName);
+	const selectors = createFullSelector(gridName);
+	return connect((state) => ({ [`${prefix}Selectors`]: selectors(state) }), (dispatch) => ({ [`${prefix}Actions`]: bindActionCreators({
+		init: actions.init,
+		clearUxState: actions.clearUxState,
+		handleUxChange: actions.handleUxChange,
+		openConfigForm: actions.openConfigForm,
+		closeConfigForm: actions.closeConfigForm,
+		setColumnConfig: actions.setColumnConfig,
+		setPage: actions.setPage,
+		setPresets: actions.setPresets,
+		createPreset: actions.createPreset,
+		deletePreset: actions.deletePreset,
+		setRowsPerPage: actions.setRowsPerPage,
+		addFilter: actions.addFilter,
+		setFilters: actions.setFilters,
+		resetFilters: actions.resetFilters,
+		addSorting: actions.addSorting,
+		resetSorting: actions.resetSorting,
+		clearSettings: actions.clearSettings,
+		setColumnWidth: actions.setColumnWidth,
+		resetGrid: actions.resetGrid,
+		setColumnsOrder: actions.setColumnsOrder
+	}, dispatch) }));
 };
-var withReduxActions_default = withReduxActions;
-export { withReduxActions_default as default };
+//#endregion
+export { withReduxActions as default };

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

@@ -1,200 +1,109 @@
-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 _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 _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 _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-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);
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-right: 2;\n  gap: 24px;\n  background-color: red;\n  position: relative;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  position: absolute;\n  bottom: 32px;\n  left: 50%;\n  transform: translate(-50%);\n  width: 596px;\n  padding: 12px 24px;\n  border-radius: 10px;\n  background-color: #fff;\n  box-shadow: dropShadow;\n  z-index: 2;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  font-size: 14px;\n  line-height: 18px;\n  color: blue2;\n  font-weight: 600;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n\n  & > * {\n    margin-left: 10px;\n  }\n"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { jsx, jsxs } from "react/jsx-runtime";
+import Button from "../../../../Elements/Button/Button.js";
+import "../../../../Elements/Button/index.js";
+import { useGridActionTrigger } from "../../hooks/useGridActionTrigger.js";
+import { useToggleAllCheckbox } from "../../hooks/useToggleAllCheckbox.js";
+import ButtonMore from "../ButtonMore/ButtonMore.js";
 import { useCallback, useMemo } from "react";
-import { Button } from "../../../../Elements/Button";
-import { useGridActionTrigger } from "../../hooks/useGridActionTrigger";
-import { useToggleAllCheckbox } from "../../hooks/useToggleAllCheckbox";
-import ButtonMore from "../ButtonMore/ButtonMore";
+import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { i18n } from "@lingui/core";
 import { Trans } from "@lingui/react";
-import styled from "@xstyled/styled-components";
-var Wrap = styled.div(_templateObject());
-var ActionsWrap = styled.div(_templateObject1());
-var StyledText = styled.span(_templateObject2());
-var ContentWrap = styled.div(_templateObject3());
-var ButtonsWrap = styled.div(_templateObject4());
-var ActionHead = function ActionHead(param) {
-    var gridActions = param.gridActions, gridSelectors = param.gridSelectors, actionOptions = param.actionOptions, onBatchAction = param.onBatchAction, rowsData = param.rowsData, processCheckedValues = param.processCheckedValues, processCheckedValuesTitle = param.processCheckedValuesTitle;
-    var handleUxChange = (gridActions || {}).handleUxChange;
-    var _ref = gridSelectors || {}, _ref_uxState = _ref.uxState, uxState = _ref_uxState === void 0 ? {} : _ref_uxState;
-    var _useToggleAllCheckbox = _sliced_to_array(useToggleAllCheckbox(rowsData, uxState, handleUxChange), 2), checked = _useToggleAllCheckbox[0], toggleCheckbox = _useToggleAllCheckbox[1];
-    var _useGridActionTrigger = _sliced_to_array(useGridActionTrigger(rowsData, uxState, actionOptions, onBatchAction), 2), enabledActions = _useGridActionTrigger[0], onSubmit = _useGridActionTrigger[1];
-    var checkedRowsCount = Object.keys((uxState === null || uxState === void 0 ? void 0 : uxState.checkedRows) || []).length;
-    var checkAll = useCallback(function() {
-        if (!checked) {
-            toggleCheckbox();
-        }
-    }, [
-        checked,
-        toggleCheckbox
-    ]);
-    var actionsOptions = useMemo(function() {
-        if (actionOptions === null || actionOptions === void 0 ? void 0 : actionOptions.length) {
-            return actionOptions.map(function(option) {
-                return {
-                    title: option.label,
-                    onClick: function onClick() {
-                        onSubmit(option.value);
-                    },
-                    link: "#"
-                };
-            });
-        }
-        return [];
-    }, [
-        actionOptions,
-        onSubmit
-    ]);
-    return /* @__PURE__ */ jsx(Wrap, {
-        children: checkedRowsCount > 0 && /* @__PURE__ */ jsx(ActionsWrap, {
-            children: /* @__PURE__ */ jsxs(ContentWrap, {
-                children: [
-                    /* @__PURE__ */ jsx(StyledText, {
-                        children: i18n._({
-                            id: "dataGrid.checkedRowsCount",
-                            message: "Selected {checkedRowsCount} items",
-                            values: {
-                                checkedRowsCount: checkedRowsCount
-                            }
-                        })
-                    }),
-                    /* @__PURE__ */ jsxs(ButtonsWrap, {
-                        children: [
-                            /* @__PURE__ */ jsx(Button, {
-                                type: "button",
-                                onClick: checkAll,
-                                appearance: "secondary",
-                                variant: "default",
-                                "data-cy": "checkAllBtn",
-                                disabled: checked,
-                                children: /* @__PURE__ */ jsx(Trans, {
-                                    id: "dataGrid.checkAll",
-                                    message: "Check all"
-                                })
-                            }),
-                            processCheckedValues && /* @__PURE__ */ jsx(Button, {
-                                type: "button",
-                                onClick: processCheckedValues,
-                                appearance: "primary",
-                                variant: "default",
-                                "data-cy": "exportBtn",
-                                disabled: !rowsData.length,
-                                children: processCheckedValuesTitle || /* @__PURE__ */ jsx(Trans, {
-                                    id: "dataGrid.actionOptions.export",
-                                    message: "Export"
-                                })
-                            }),
-                            (actionOptions === null || actionOptions === void 0 ? void 0 : actionOptions.length) && /* @__PURE__ */ jsx(ButtonMore, {
-                                items: actionsOptions,
-                                disabled: !enabledActions.length || !rowsData.length,
-                                dropdownPosition: "top"
-                            })
-                        ]
-                    })
-                ]
-            })
-        })
-    });
+//#region packages/ui/Blocks/CommonGrid/components/ActionHead/ActionHead.tsx
+const Wrap = styled$1.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-right: 2;
+  gap: 24px;
+  background-color: red;
+  position: relative;
+`;
+const ActionsWrap = styled$1.div`
+  position: absolute;
+  bottom: 32px;
+  left: 50%;
+  transform: translate(-50%);
+  width: 596px;
+  padding: 12px 24px;
+  border-radius: 10px;
+  background-color: #fff;
+  box-shadow: dropShadow;
+  z-index: 2;
+`;
+const StyledText = styled$1.span`
+  font-size: 14px;
+  line-height: 18px;
+  color: blue2;
+  font-weight: 600;
+`;
+const ContentWrap = styled$1.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const ButtonsWrap = styled$1.div`
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+
+  & > * {
+    margin-left: 10px;
+  }
+`;
+const ActionHead = ({ gridActions, gridSelectors, actionOptions, onBatchAction, rowsData, processCheckedValues, processCheckedValuesTitle }) => {
+	const { handleUxChange } = gridActions || {};
+	const { uxState = {} } = gridSelectors || {};
+	const [checked, toggleCheckbox] = useToggleAllCheckbox(rowsData, uxState, handleUxChange);
+	const [enabledActions, onSubmit] = useGridActionTrigger(rowsData, uxState, actionOptions, onBatchAction);
+	const checkedRowsCount = Object.keys(uxState?.checkedRows || []).length;
+	const checkAll = useCallback(() => {
+		if (!checked) toggleCheckbox();
+	}, [checked, toggleCheckbox]);
+	const actionsOptions = useMemo(() => {
+		if (actionOptions?.length) return actionOptions.map((option) => ({
+			title: option.label,
+			onClick: () => {
+				onSubmit(option.value);
+			},
+			link: "#"
+		}));
+		return [];
+	}, [actionOptions, onSubmit]);
+	return /* @__PURE__ */ jsx(Wrap, { children: checkedRowsCount > 0 && /* @__PURE__ */ jsx(ActionsWrap, { children: /* @__PURE__ */ jsxs(ContentWrap, { children: [/* @__PURE__ */ jsx(StyledText, { children: i18n._({
+		id: "dataGrid.checkedRowsCount",
+		message: `Selected {checkedRowsCount} items`,
+		values: { checkedRowsCount }
+	}) }), /* @__PURE__ */ jsxs(ButtonsWrap, { children: [
+		/* @__PURE__ */ jsx(Button, {
+			type: "button",
+			onClick: checkAll,
+			appearance: "secondary",
+			variant: "default",
+			"data-cy": "checkAllBtn",
+			disabled: checked,
+			children: /* @__PURE__ */ jsx(Trans, {
+				id: "dataGrid.checkAll",
+				message: "Check all"
+			})
+		}),
+		processCheckedValues && /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			onClick: processCheckedValues,
+			appearance: "primary",
+			variant: "default",
+			"data-cy": "exportBtn",
+			disabled: !rowsData.length,
+			children: processCheckedValuesTitle || /* @__PURE__ */ jsx(Trans, {
+				id: "dataGrid.actionOptions.export",
+				message: "Export"
+			})
+		}),
+		actionOptions?.length && /* @__PURE__ */ jsx(ButtonMore, {
+			items: actionsOptions,
+			disabled: !enabledActions.length || !rowsData.length,
+			dropdownPosition: "top"
+		})
+	] })] }) }) });
 };
-var ActionHead_default = ActionHead;
-export { ActionHead_default as default };
+//#endregion
+export { ActionHead as default };

package/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownMenu.js

@@ -1,51 +1,39 @@
-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: relative;\n  left: 0;\n  top: 3px;\n  display: flex;\n  flex-direction: column;\n  padding: 2;\n  width: 100%;\n  background-color: ",
-        ";\n  box-shadow: ",
-        ";\n  min-width: 8.9rem;\n  font-size: 12px;\n  font-weight: normal;\n  border-radius: 10px;\n  z-index: 1;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  padding: 2 2;\n  border-radius: 6px;\n  cursor: pointer;\n  &:hover {\n    background-color: ",
-        ";\n    color: ",
-        ";\n    font-weight: bold;\n  }\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import "react";
+import styled$1 from "@xstyled/styled-components";
+import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
 import { jsx } from "react/jsx-runtime";
-import styled from "@xstyled/styled-components";
-import { th } from "@xstyled/system";
-var StyledDropdownWrap = styled.div(_templateObject(), th.color("white"), th.shadow("dropShadow"));
-var StyledDropdownItem = styled.li(_templateObject1(), th.color("bgLightGray1"), th.color("typoPrimary"));
-var ActionDropdownMenu = function ActionDropdownMenu(param) {
-    var items = param.items;
-    return /* @__PURE__ */ jsx(StyledDropdownWrap, {
-        children: items.map(function(item, index) {
-            var _item_onClick;
-            return /* @__PURE__ */ jsx(StyledDropdownItem, {
-                onClick: (_item_onClick = item.onClick) !== null && _item_onClick !== void 0 ? _item_onClick : void 0,
-                children: item.title
-            }, index);
-        })
-    });
+//#region packages/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownMenu.tsx
+const StyledDropdownWrap = styled$1.div`
+  position: relative;
+  left: 0;
+  top: 3px;
+  display: flex;
+  flex-direction: column;
+  padding: 2;
+  width: 100%;
+  background-color: ${th$1.color("white")};
+  box-shadow: ${th$1.shadow("dropShadow")};
+  min-width: 8.9rem;
+  font-size: 12px;
+  font-weight: normal;
+  border-radius: 10px;
+  z-index: 1;
+`;
+const StyledDropdownItem = styled$1.li`
+  padding: 2 2;
+  border-radius: 6px;
+  cursor: pointer;
+  &:hover {
+    background-color: ${th$1.color("bgLightGray1")};
+    color: ${th$1.color("typoPrimary")};
+    font-weight: bold;
+  }
+`;
+const ActionDropdownMenu = ({ items }) => {
+	return /* @__PURE__ */ jsx(StyledDropdownWrap, { children: items.map((item, index) => /* @__PURE__ */ jsx(StyledDropdownItem, {
+		onClick: item.onClick ?? void 0,
+		children: item.title
+	}, index)) });
 };
-var ActionDropdownMenu_default = ActionDropdownMenu;
-export { ActionDropdownMenu_default as default };
+//#endregion
+export { ActionDropdownMenu as default };