@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Blocks/SideMenu/components/HamburgerMenu.js

@@ -1,71 +1,52 @@
-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          left: 92%;\n          top: 7px;\n          z-index: 6;\n        "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n          & > svg > path {\n            stroke: ",
-        ";\n          }\n        "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  width: 36px;\n  height: 36px;\n  border-radius: 70px;\n  background-color: ",
-        ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-shadow: ",
-        ";\n  &:hover {\n    cursor: pointer;\n  }\n\n  ",
-        ";\n\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import { HamburgerMenu } from "../../../Elements/Icon/icons/HamburgerMenu.js";
+import { MobileCancel } from "../../../Elements/Icon/icons/MobileCancel.js";
+import "react";
+import { css, useTheme, x } 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 "styled-components";
-import { HamburgerMenu as HamburgerMenuIcon } from "../../../Elements/Icon/icons/HamburgerMenu";
-import { MobileCancel } from "../../../Elements/Icon/icons/MobileCancel";
-import { css, x, useTheme } from "@xstyled/styled-components";
-import { th } from "@xstyled/system";
-var HamburgerMenuWrapper = styled(x.div)(_templateObject2(), th.color("neutral20"), th.shadow("dropShadow"), function(param) {
-    var isLeftMenuOpen = param.isLeftMenuOpen;
-    return isLeftMenuOpen ? css(_templateObject()) : css(_templateObject1(), th.color("blue2"));
-});
-var HamburgerMenuButton = function HamburgerMenuButton(param) {
-    var isLeftMenuOpen = param.isLeftMenuOpen, onClick = param.onClick;
-    var theme = useTheme();
-    var neutralColor = th.color("neutral20")({
-        theme: theme
-    });
-    var dispalyedIcon = isLeftMenuOpen ? /* @__PURE__ */ jsx(MobileCancel, {
-        fill: neutralColor
-    }) : /* @__PURE__ */ jsx(HamburgerMenuIcon, {
-        fill: neutralColor,
-        stroke: "none"
-    });
-    return /* @__PURE__ */ jsx(HamburgerMenuWrapper, {
-        mr: "8px",
-        onClick: onClick,
-        isLeftMenuOpen: !!isLeftMenuOpen,
-        children: dispalyedIcon
-    });
+import styled$2 from "styled-components";
+//#region packages/ui/Blocks/SideMenu/components/HamburgerMenu.tsx
+const HamburgerMenuWrapper = styled$2(x.div)`
+  width: 36px;
+  height: 36px;
+  border-radius: 70px;
+  background-color: ${th$1.color("neutral20")};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-shadow: ${th$1.shadow("dropShadow")};
+  &:hover {
+    cursor: pointer;
+  }
+
+  ${({ isLeftMenuOpen }) => isLeftMenuOpen ? css`
+          position: absolute;
+          left: 92%;
+          top: 7px;
+          z-index: 6;
+        ` : css`
+          & > svg > path {
+            stroke: ${th$1.color("blue2")};
+          }
+        `};
+
+  @media (min-width: 1024px) {
+    display: none;
+  }
+`;
+const HamburgerMenuButton = ({ isLeftMenuOpen, onClick }) => {
+	const theme = useTheme();
+	const neutralColor = th$1.color("neutral20")({ theme });
+	return /* @__PURE__ */ jsx(HamburgerMenuWrapper, {
+		mr: "8px",
+		onClick,
+		isLeftMenuOpen: !!isLeftMenuOpen,
+		children: isLeftMenuOpen ? /* @__PURE__ */ jsx(MobileCancel, { fill: neutralColor }) : /* @__PURE__ */ jsx(HamburgerMenu, {
+			fill: neutralColor,
+			stroke: "none"
+		})
+	});
 };
+//#endregion
 export { HamburgerMenuButton };

package/ui/Blocks/SideMenu/components/SubitemTooltip.js

@@ -1,137 +1,53 @@
-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;
-}
-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  z-index: 5;\n  display: ",
-        ";\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { jsx } from "react/jsx-runtime";
+import { H6 } from "../../../Elements/Typography/Typography.js";
+import { Portal } from "../../../Elements/Portal/index.js";
+import { ItemLinkWrap, TooltipItemLabel, TooltipWrap } from "../styles.js";
 import { useMemo } from "react";
-import { Popper } from "react-popper";
+import { jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-import Portal from "../../../Elements/Portal";
-import { H6 } from "../../../Elements/Typography/Typography";
-import { ItemLinkWrap, TooltipWrap, TooltipItemLabel } from "../styles";
-var TooltipItem = function TooltipItem(param) {
-    var title = param.title, _param_link = param.link, link = _param_link === void 0 ? "" : _param_link, lightMode = param.lightMode;
-    var linkProps = useMemo(function() {
-        return link.startsWith("https://") ? {
-            to: {
-                pathname: link
-            },
-            target: "_blank"
-        } : {
-            to: link
-        };
-    }, [
-        link
-    ]);
-    return /* @__PURE__ */ jsx(ItemLinkWrap, _object_spread_props(_object_spread({}, linkProps), {
-        exact: true,
-        $lightMode: lightMode,
-        children: /* @__PURE__ */ jsx(TooltipItemLabel, {
-            children: /* @__PURE__ */ jsx(H6, {
-                variant: "medium",
-                children: title
-            })
-        })
-    }));
+import { Popper } from "react-popper";
+//#region packages/ui/Blocks/SideMenu/components/SubitemTooltip.tsx
+const TooltipItem = ({ title, link = "", lightMode }) => {
+	return /* @__PURE__ */ jsx(ItemLinkWrap, {
+		...useMemo(() => {
+			return link.startsWith("https://") ? {
+				to: { pathname: link },
+				target: "_blank"
+			} : { to: link };
+		}, [link]),
+		exact: true,
+		$lightMode: lightMode,
+		children: /* @__PURE__ */ jsx(TooltipItemLabel, { children: /* @__PURE__ */ jsx(H6, {
+			variant: "medium",
+			children: title
+		}) })
+	});
 };
-var PopoverWrapper = styled.div(_templateObject(), function(param) {
-    var isLeftMenuOpen = param.isLeftMenuOpen;
-    return isLeftMenuOpen ? "block" : "none";
-});
-var SubitemTooltip = function SubitemTooltip(param) {
-    var items = param.items, childRef = param.childRef, parentRef = param.parentRef, isLeftMenuOpen = param.isLeftMenuOpen, onCloseLeftMenu = param.onCloseLeftMenu, lightMode = param.lightMode;
-    return /* @__PURE__ */ jsx(Portal, {
-        children: /* @__PURE__ */ jsx(Popper, {
-            innerRef: childRef,
-            referenceElement: parentRef.current,
-            placement: "right-start",
-            children: function children(param) {
-                var ref = param.ref, style = param.style;
-                return /* @__PURE__ */ jsx(PopoverWrapper, {
-                    ref: ref,
-                    style: style,
-                    onClick: onCloseLeftMenu,
-                    isLeftMenuOpen: isLeftMenuOpen,
-                    children: /* @__PURE__ */ jsx(TooltipWrap, {
-                        $lightMode: lightMode,
-                        children: items === null || items === void 0 ? void 0 : items.map(function(item, index) {
-                            return /* @__PURE__ */ jsx(TooltipItem, _object_spread_props(_object_spread({}, item), {
-                                lightMode: lightMode
-                            }), "".concat(index));
-                        })
-                    })
-                });
-            }
-        })
-    });
+const PopoverWrapper = styled.div`
+  z-index: 5;
+  display: ${({ isLeftMenuOpen }) => isLeftMenuOpen ? "block" : "none"};
+  @media (min-width: 1024px) {
+    display: block;
+  }
+`;
+const SubitemTooltip = ({ items, childRef, parentRef, isLeftMenuOpen, onCloseLeftMenu, lightMode }) => {
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popper, {
+		innerRef: childRef,
+		referenceElement: parentRef.current,
+		placement: "right-start",
+		children: ({ ref, style }) => /* @__PURE__ */ jsx(PopoverWrapper, {
+			ref,
+			style,
+			onClick: onCloseLeftMenu,
+			isLeftMenuOpen,
+			children: /* @__PURE__ */ jsx(TooltipWrap, {
+				$lightMode: lightMode,
+				children: items?.map((item, index) => /* @__PURE__ */ jsx(TooltipItem, {
+					...item,
+					lightMode
+				}, `${index}`))
+			})
+		})
+	}) });
 };
-var SubitemTooltip_default = SubitemTooltip;
-export { SubitemTooltip_default as default };
+//#endregion
+export { SubitemTooltip as default };

package/ui/Blocks/SideMenu/context/LeftMenuContext.js

@@ -1,70 +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 { jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useMemo, useState } from "react";
-var LeftMenuContext = createContext(null);
-var LeftMenuProvider = function LeftMenuProvider(param) {
-    var children = param.children, _param_defaultItemSelected = param.defaultItemSelected, defaultItemSelected = _param_defaultItemSelected === void 0 ? null : _param_defaultItemSelected;
-    var _useState = _sliced_to_array(useState(defaultItemSelected), 2), expandedItem = _useState[0], setExpandedItem = _useState[1];
-    var expandItem = useCallback(function(item) {
-        setExpandedItem(item);
-    }, []);
-    var value = useMemo(function() {
-        return {
-            expandedItem: expandedItem,
-            expandItem: expandItem
-        };
-    }, [
-        expandedItem,
-        expandItem
-    ]);
-    return /* @__PURE__ */ jsx(LeftMenuContext.Provider, {
-        value: value,
-        children: children
-    });
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/SideMenu/context/LeftMenuContext.tsx
+const LeftMenuContext = createContext(null);
+const LeftMenuProvider = ({ children, defaultItemSelected = null }) => {
+	const [expandedItem, setExpandedItem] = useState(defaultItemSelected);
+	const expandItem = useCallback((item) => {
+		setExpandedItem(item);
+	}, []);
+	const value = useMemo(() => ({
+		expandedItem,
+		expandItem
+	}), [expandedItem, expandItem]);
+	return /* @__PURE__ */ jsx(LeftMenuContext.Provider, {
+		value,
+		children
+	});
 };
+//#endregion
 export { LeftMenuContext, LeftMenuProvider };

package/ui/Blocks/SideMenu/context/useLeftMenuContext.js

@@ -1,8 +1,10 @@
+import { LeftMenuContext } from "./LeftMenuContext.js";
 import { useContext } from "react";
-import { LeftMenuContext } from "./LeftMenuContext";
-var useLeftMenuContext = function useLeftMenuContext() {
-    var context = useContext(LeftMenuContext);
-    if (!context) throw new Error("useLeftMenuContext context must be use inside LeftMenuProvider");
-    return context;
+//#region packages/ui/Blocks/SideMenu/context/useLeftMenuContext.ts
+const useLeftMenuContext = () => {
+	const context = useContext(LeftMenuContext);
+	if (!context) throw new Error("useLeftMenuContext context must be use inside LeftMenuProvider");
+	return context;
 };
+//#endregion
 export { useLeftMenuContext };

package/ui/Blocks/SideMenu/hooks/useOutsideHover.js

@@ -1,78 +1,25 @@
-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, useEffect, useRef, useState } from "react";
-var useOutSideHover = function useOutSideHover(param) {
-    var parentRef = param.parentRef;
-    var ref = useRef(null);
-    var _useState = _sliced_to_array(useState(false), 2), isHovering = _useState[0], setIsHovering = _useState[1];
-    var handleMouseOver = useCallback(function() {
-        setIsHovering(true);
-    }, []);
-    var handleMouseOut = useCallback(function(e) {
-        var _parentRef_current, _ref_current;
-        if (!((_parentRef_current = parentRef.current) === null || _parentRef_current === void 0 ? void 0 : _parentRef_current.contains(e.target)) && !((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) {
-            setIsHovering(false);
-        }
-    }, [
-        parentRef
-    ]);
-    useEffect(function() {
-        document.addEventListener("mouseover", handleMouseOut);
-        return function() {
-            document.removeEventListener("mouseover", handleMouseOut);
-        };
-    }, [
-        handleMouseOut
-    ]);
-    return {
-        isHovering: isHovering,
-        handleMouseOver: handleMouseOver,
-        ref: ref
-    };
+//#region packages/ui/Blocks/SideMenu/hooks/useOutsideHover.ts
+const useOutSideHover = ({ parentRef }) => {
+	const ref = useRef(null);
+	const [isHovering, setIsHovering] = useState(false);
+	const handleMouseOver = useCallback(() => {
+		setIsHovering(true);
+	}, []);
+	const handleMouseOut = useCallback((e) => {
+		if (!parentRef.current?.contains(e.target) && !ref.current?.contains(e.target)) setIsHovering(false);
+	}, [parentRef]);
+	useEffect(() => {
+		document.addEventListener("mouseover", handleMouseOut);
+		return () => {
+			document.removeEventListener("mouseover", handleMouseOut);
+		};
+	}, [handleMouseOut]);
+	return {
+		isHovering,
+		handleMouseOver,
+		ref
+	};
 };
-var useOutsideHover_default = useOutSideHover;
-export { useOutsideHover_default as default };
+//#endregion
+export { useOutSideHover as default };

package/ui/Blocks/SideMenu/index.js

@@ -1,5 +1,7 @@
-import { HamburgerMenuButton } from "./components/HamburgerMenu";
-import { compactMenuWidth, expandedMenuWidth } from "./utils/constants";
-import SideMenu from "./SideMenu";
+import { HamburgerMenuButton } from "./components/HamburgerMenu.js";
+import { compactMenuWidth, expandedMenuWidth } from "./utils/constants.js";
+import SideMenu from "./SideMenu.js";
+//#region packages/ui/Blocks/SideMenu/index.ts
 var SideMenu_default = SideMenu;
+//#endregion
 export { HamburgerMenuButton, compactMenuWidth, SideMenu_default as default, expandedMenuWidth };