@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Blocks/Modal/Modal.js

@@ -1,151 +1,125 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useMemo, useEffect } from "react";
-import Button from "../../Elements/Button";
-import { Icon, Cancel } from "../../Elements/Icon";
-import { Portal } from "../../Elements/Portal";
-import { H2, H5 } from "../../Elements/Typography";
-import { useClickOutside } from "./hooks/useClickOutside";
+import { Cancel } from "../../Elements/Icon/icons/Cancel.js";
+import Icon from "../../Elements/Icon/Icon.js";
+import "../../Elements/Icon/index.js";
+import Button_default from "../../Elements/Button/index.js";
+import { useClickOutside } from "./hooks/useClickOutside.js";
+import { H2, H5 } from "../../Elements/Typography/Typography.js";
+import "../../Elements/Typography/index.js";
+import { Portal } from "../../Elements/Portal/index.js";
+import { ButtonsContainer, ButtonsWrapper, CloseButton, ContentContainer, DialogOverlay, DialogWindow, HeaderContainer, TitleContainer } from "./styles.js";
+import { widthMap } from "./utils.js";
+import { memo, useCallback, useEffect, useMemo } from "react";
 import { x } from "@xstyled/styled-components";
-import { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, ButtonsWrapper } from "./styles";
-import { widthMap } from "./utils";
-var Modal = memo(function(param) {
-    var children = param.children, _param_isShown = param.isShown, isShown = _param_isShown === void 0 ? true : _param_isShown, onExtraAction = param.onExtraAction, onCancel = param.onCancel, title = param.title, titleIcon = param.titleIcon, onConfirm = param.onConfirm, confirmLabel = param.confirmLabel, cancelLabel = param.cancelLabel, extraActionLabel = param.extraActionLabel, isLoading = param.isLoading, isConfirmDisabled = param.isConfirmDisabled, _param_width = param.width, width = _param_width === void 0 ? "narrow" : _param_width, onClose = param.onClose, _param_hasFooter = param.hasFooter, hasFooter = _param_hasFooter === void 0 ? true : _param_hasFooter, _param_hasHeader = param.hasHeader, hasHeader = _param_hasHeader === void 0 ? true : _param_hasHeader, background = param.background, _param_ignoreClickOutside = param.ignoreClickOutside, ignoreClickOutside = _param_ignoreClickOutside === void 0 ? false : _param_ignoreClickOutside, _param_closeEverywhere = param.closeEverywhere, closeEverywhere = _param_closeEverywhere === void 0 ? false : _param_closeEverywhere, _param_withCloseIcon = param.withCloseIcon, withCloseIcon = _param_withCloseIcon === void 0 ? true : _param_withCloseIcon, overlayColor = param.overlayColor, minWidth = param.minWidth, minHeight = param.minHeight, maxWidth = param.maxWidth, maxHeight = param.maxHeight, _param_variant = param.variant, variant = _param_variant === void 0 ? "compact" : _param_variant, top = param.top, name = param.name;
-    var closeDialog = useCallback(function() {
-        if (onClose) {
-            onClose();
-        } else if (onCancel) {
-            onCancel();
-        }
-    }, [
-        onClose,
-        onCancel
-    ]);
-    var dialogStyle = useMemo(function() {
-        return {
-            width: widthMap[width]
-        };
-    }, [
-        width
-    ]);
-    var dialogRef = useClickOutside({
-        onClose: closeDialog,
-        ignoreClickOutside: ignoreClickOutside,
-        closeCurrent: true,
-        allowScrollbarClick: true
-    });
-    var onDialogConfirmClick = useCallback(function() {
-        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(closeDialog);
-    }, [
-        onConfirm,
-        closeDialog
-    ]);
-    useEffect(function() {
-        window.addEventListener("popstate", closeDialog);
-        return function() {
-            window.removeEventListener("popstate", closeDialog);
-        };
-    }, []);
-    if (!isShown) {
-        return null;
-    }
-    return /* @__PURE__ */ jsx(Portal, {
-        children: /* @__PURE__ */ jsx(DialogOverlay, {
-            backgroundColor: overlayColor,
-            children: /* @__PURE__ */ jsxs(DialogWindow, {
-                ref: dialogRef,
-                style: dialogStyle,
-                $backgroundColor: background,
-                top: top,
-                "data-cy": "dialogWindow",
-                onClick: closeEverywhere ? closeDialog : void 0,
-                $minWidth: minWidth,
-                $minHeight: minHeight,
-                $maxWidth: maxWidth,
-                $maxHeight: maxHeight,
-                variant: variant,
-                children: [
-                    title && hasHeader && /* @__PURE__ */ jsx(HeaderContainer, {
-                        variant: variant,
-                        children: /* @__PURE__ */ jsxs(TitleContainer, {
-                            children: [
-                                titleIcon && /* @__PURE__ */ jsx(x.div, {
-                                    as: "span",
-                                    className: "icon",
-                                    children: typeof titleIcon === "string" ? /* @__PURE__ */ jsx(Icon, {
-                                        icon: titleIcon,
-                                        fill: "blue2"
-                                    }) : titleIcon
-                                }),
-                                variant == "default" ? /* @__PURE__ */ jsx(H2, {
-                                    mt: 0,
-                                    mb: 0,
-                                    variant: "bold",
-                                    children: title
-                                }) : /* @__PURE__ */ jsx(H5, {
-                                    mt: 0,
-                                    mb: 0,
-                                    variant: "bold",
-                                    children: title
-                                })
-                            ]
-                        })
-                    }),
-                    withCloseIcon && /* @__PURE__ */ jsx(CloseButton, {
-                        onClick: closeDialog,
-                        "data-cy": "dialogCloseBtn",
-                        children: /* @__PURE__ */ jsx(Cancel, {
-                            width: "11px",
-                            height: "11px"
-                        })
-                    }),
-                    /* @__PURE__ */ jsx(ContentContainer, {
-                        variant: variant,
-                        children: children
-                    }),
-                    hasFooter && (onExtraAction || onCancel || onConfirm) && /* @__PURE__ */ jsxs(ButtonsContainer, {
-                        hasSpaceBetween: !!onExtraAction,
-                        children: [
-                            onExtraAction && /* @__PURE__ */ jsx(Button, {
-                                type: "button",
-                                onClick: onExtraAction,
-                                isLoading: isLoading,
-                                "data-cy": "extraActionBtn",
-                                appearance: "secondary",
-                                variant: "ghost",
-                                children: extraActionLabel
-                            }),
-                            /* @__PURE__ */ jsxs(ButtonsWrapper, {
-                                hasExtraAction: !!onExtraAction,
-                                hasBothButtons: !!onCancel && !!onConfirm,
-                                children: [
-                                    onCancel && /* @__PURE__ */ jsx(Button, {
-                                        type: "button",
-                                        onClick: onCancel,
-                                        isLoading: isLoading,
-                                        "data-cy": "cancelBtn",
-                                        appearance: "secondary",
-                                        variant: "default",
-                                        "data-testid": name ? "button-".concat(name, "-cancel") : void 0,
-                                        children: cancelLabel || "Cancel"
-                                    }),
-                                    onConfirm && /* @__PURE__ */ jsx(Button, {
-                                        type: "button",
-                                        onClick: onDialogConfirmClick,
-                                        isLoading: isLoading,
-                                        disabled: isConfirmDisabled,
-                                        "data-cy": "submitBtn",
-                                        appearance: "primary",
-                                        variant: "default",
-                                        "data-testid": name ? "button-".concat(name, "-confirm") : void 0,
-                                        children: confirmLabel || "Submit"
-                                    })
-                                ]
-                            })
-                        ]
-                    })
-                ]
-            })
-        })
-    });
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/Modal/Modal.tsx
+const Modal = memo(({ children, isShown = true, onExtraAction, onCancel, title, titleIcon, onConfirm, confirmLabel, cancelLabel, extraActionLabel, isLoading, isConfirmDisabled, width = "narrow", onClose, hasFooter = true, hasHeader = true, background, ignoreClickOutside = false, closeEverywhere = false, withCloseIcon = true, overlayColor, minWidth, minHeight, maxWidth, maxHeight, variant = "compact", top, name }) => {
+	const closeDialog = useCallback(() => {
+		if (onClose) onClose();
+		else if (onCancel) onCancel();
+	}, [onClose, onCancel]);
+	const dialogStyle = useMemo(() => ({ width: widthMap[width] }), [width]);
+	const dialogRef = useClickOutside({
+		onClose: closeDialog,
+		ignoreClickOutside,
+		closeCurrent: true,
+		allowScrollbarClick: true
+	});
+	const onDialogConfirmClick = useCallback(() => {
+		onConfirm?.(closeDialog);
+	}, [onConfirm, closeDialog]);
+	useEffect(() => {
+		window.addEventListener("popstate", closeDialog);
+		return () => {
+			window.removeEventListener("popstate", closeDialog);
+		};
+	}, []);
+	if (!isShown) return null;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DialogOverlay, {
+		backgroundColor: overlayColor,
+		children: /* @__PURE__ */ jsxs(DialogWindow, {
+			ref: dialogRef,
+			style: dialogStyle,
+			$backgroundColor: background,
+			top,
+			"data-cy": "dialogWindow",
+			onClick: closeEverywhere ? closeDialog : void 0,
+			$minWidth: minWidth,
+			$minHeight: minHeight,
+			$maxWidth: maxWidth,
+			$maxHeight: maxHeight,
+			variant,
+			children: [
+				title && hasHeader && /* @__PURE__ */ jsx(HeaderContainer, {
+					variant,
+					children: /* @__PURE__ */ jsxs(TitleContainer, { children: [titleIcon && /* @__PURE__ */ jsx(x.div, {
+						as: "span",
+						className: "icon",
+						children: typeof titleIcon === "string" ? /* @__PURE__ */ jsx(Icon, {
+							icon: titleIcon,
+							fill: "blue2"
+						}) : titleIcon
+					}), variant == "default" ? /* @__PURE__ */ jsx(H2, {
+						mt: 0,
+						mb: 0,
+						variant: "bold",
+						children: title
+					}) : /* @__PURE__ */ jsx(H5, {
+						mt: 0,
+						mb: 0,
+						variant: "bold",
+						children: title
+					})] })
+				}),
+				withCloseIcon && /* @__PURE__ */ jsx(CloseButton, {
+					onClick: closeDialog,
+					"data-cy": "dialogCloseBtn",
+					children: /* @__PURE__ */ jsx(Cancel, {
+						width: "11px",
+						height: "11px"
+					})
+				}),
+				/* @__PURE__ */ jsx(ContentContainer, {
+					variant,
+					children
+				}),
+				hasFooter && (onExtraAction || onCancel || onConfirm) && /* @__PURE__ */ jsxs(ButtonsContainer, {
+					hasSpaceBetween: !!onExtraAction,
+					children: [onExtraAction && /* @__PURE__ */ jsx(Button_default, {
+						type: "button",
+						onClick: onExtraAction,
+						isLoading,
+						"data-cy": "extraActionBtn",
+						appearance: "secondary",
+						variant: "ghost",
+						children: extraActionLabel
+					}), /* @__PURE__ */ jsxs(ButtonsWrapper, {
+						hasExtraAction: !!onExtraAction,
+						hasBothButtons: !!onCancel && !!onConfirm,
+						children: [onCancel && /* @__PURE__ */ jsx(Button_default, {
+							type: "button",
+							onClick: onCancel,
+							isLoading,
+							"data-cy": "cancelBtn",
+							appearance: "secondary",
+							variant: "default",
+							"data-testid": name ? `button-${name}-cancel` : void 0,
+							children: cancelLabel || "Cancel"
+						}), onConfirm && /* @__PURE__ */ jsx(Button_default, {
+							type: "button",
+							onClick: onDialogConfirmClick,
+							isLoading,
+							disabled: isConfirmDisabled,
+							"data-cy": "submitBtn",
+							appearance: "primary",
+							variant: "default",
+							"data-testid": name ? `button-${name}-confirm` : void 0,
+							children: confirmLabel || "Submit"
+						})]
+					})]
+				})
+			]
+		})
+	}) });
 });
+//#endregion
 export { Modal };

package/ui/Blocks/Modal/hooks/useClickOutside.js

@@ -1,38 +1,28 @@
 import { useCallback, useEffect, useRef } from "react";
-var useClickOutside = function useClickOutside(param) {
-    var onClose = param.onClose, parentRef = param.parentRef, _param_ignoreClickOutside = param.ignoreClickOutside, ignoreClickOutside = _param_ignoreClickOutside === void 0 ? false : _param_ignoreClickOutside, _param_closeCurrent = param.closeCurrent, closeCurrent = _param_closeCurrent === void 0 ? false : _param_closeCurrent, _param_allowScrollbarClick = param.allowScrollbarClick, allowScrollbarClick = _param_allowScrollbarClick === void 0 ? false : _param_allowScrollbarClick;
-    var elementRef = useRef(null);
-    var onCloseModal = !ignoreClickOutside ? onClose : void 0;
-    var handleClickOutside = useCallback(function(e) {
-        var _parentRef_current;
-        var ignoreEvent = allowScrollbarClick && e.offsetX > e.target.clientWidth;
-        if (!ignoreEvent && elementRef.current && !elementRef.current.contains(e.target) && !(parentRef === null || parentRef === void 0 ? void 0 : (_parentRef_current = parentRef.current) === null || _parentRef_current === void 0 ? void 0 : _parentRef_current.contains(e.target))) {
-            closeCurrent ? e.target.contains(elementRef.current) && (onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal()) : onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal();
-        }
-    }, [
-        allowScrollbarClick,
-        parentRef,
-        closeCurrent,
-        onCloseModal
-    ]);
-    var keyPress = useCallback(function(e) {
-        if (e.key === "Escape") {
-            onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal();
-        }
-    }, [
-        onCloseModal
-    ]);
-    useEffect(function() {
-        document.addEventListener("mousedown", handleClickOutside);
-        document.addEventListener("keydown", keyPress);
-        return function() {
-            document.removeEventListener("mousedown", handleClickOutside);
-            document.removeEventListener("keydown", keyPress);
-        };
-    }, [
-        handleClickOutside,
-        keyPress
-    ]);
-    return elementRef;
+//#region packages/ui/Blocks/Modal/hooks/useClickOutside.ts
+const useClickOutside = ({ onClose, parentRef, ignoreClickOutside = false, closeCurrent = false, allowScrollbarClick = false }) => {
+	const elementRef = useRef(null);
+	const onCloseModal = !ignoreClickOutside ? onClose : void 0;
+	const handleClickOutside = useCallback((e) => {
+		if (!(allowScrollbarClick && e.offsetX > e.target.clientWidth) && elementRef.current && !elementRef.current.contains(e.target) && !parentRef?.current?.contains(e.target)) closeCurrent ? e.target.contains(elementRef.current) && onCloseModal?.() : onCloseModal?.();
+	}, [
+		allowScrollbarClick,
+		parentRef,
+		closeCurrent,
+		onCloseModal
+	]);
+	const keyPress = useCallback((e) => {
+		if (e.key === "Escape") onCloseModal?.();
+	}, [onCloseModal]);
+	useEffect(() => {
+		document.addEventListener("mousedown", handleClickOutside);
+		document.addEventListener("keydown", keyPress);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("keydown", keyPress);
+		};
+	}, [handleClickOutside, keyPress]);
+	return elementRef;
 };
+//#endregion
 export { useClickOutside };

package/ui/Blocks/Modal/hooks/useModal.js

@@ -1,67 +1,20 @@
-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 _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 { useCallback, useState } from "react";
-var useModal = function useModal() {
-    var initialState = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
-    var _useState = _sliced_to_array(useState(initialState), 2), isOpen = _useState[0], setIsOpen = _useState[1];
-    var _useState1 = _sliced_to_array(useState(), 2), data = _useState1[0], setData = _useState1[1];
-    var onClose = useCallback(function() {
-        setIsOpen(false);
-        setData(void 0);
-    }, []);
-    var onOpen = useCallback(function(data2) {
-        data2 && setData(data2);
-        setIsOpen(true);
-    }, []);
-    return {
-        isOpen: isOpen,
-        onClose: onClose,
-        onOpen: onOpen,
-        data: data
-    };
+//#region packages/ui/Blocks/Modal/hooks/useModal.ts
+const useModal = (initialState = false) => {
+	const [isOpen, setIsOpen] = useState(initialState);
+	const [data, setData] = useState();
+	return {
+		isOpen,
+		onClose: useCallback(() => {
+			setIsOpen(false);
+			setData(void 0);
+		}, []),
+		onOpen: useCallback((data) => {
+			data && setData(data);
+			setIsOpen(true);
+		}, []),
+		data
+	};
 };
+//#endregion
 export { useModal };

package/ui/Blocks/Modal/index.js

@@ -1,5 +1,7 @@
-import { Modal } from "./Modal";
-import { useModal } from "./hooks/useModal";
-import { useClickOutside } from "./hooks/useClickOutside";
+import { useModal } from "./hooks/useModal.js";
+import { useClickOutside } from "./hooks/useClickOutside.js";
+import { Modal } from "./Modal.js";
+//#region packages/ui/Blocks/Modal/index.ts
 var Modal_default = Modal;
+//#endregion
 export { Modal_default as default, useClickOutside, useModal };