@mailstep/design-system 0.8.31-beta.3 → 0.8.31

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

@@ -1,42 +1,53 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+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 { jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+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 __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+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}`))
+			})
+		})
+	}) });
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { Popper } from 'react-popper';
-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 (_a) {
-    var title = _a.title, _b = _a.link, link = _b === void 0 ? '' : _b, lightMode = _a.lightMode;
-    var linkProps = useMemo(function () {
-        return link.startsWith('https://') ? { to: { pathname: link }, target: '_blank' } : { to: link };
-    }, [link]);
-    return (_jsx(ItemLinkWrap, __assign({}, linkProps, { exact: true, "$lightMode": lightMode, children: _jsx(TooltipItemLabel, { children: _jsx(H6, { variant: "medium", children: title }) }) })));
-};
-var PopoverWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 5;\n  display: ", ";\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"], ["\n  z-index: 5;\n  display: ", ";\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"])), function (_a) {
-    var isLeftMenuOpen = _a.isLeftMenuOpen;
-    return (isLeftMenuOpen ? 'block' : 'none');
-});
-var SubitemTooltip = function (_a) {
-    var items = _a.items, childRef = _a.childRef, parentRef = _a.parentRef, isLeftMenuOpen = _a.isLeftMenuOpen, onCloseLeftMenu = _a.onCloseLeftMenu, lightMode = _a.lightMode;
-    return (_jsx(Portal, { children: _jsx(Popper, { innerRef: childRef, referenceElement: parentRef.current, placement: "right-start", children: function (_a) {
-                var ref = _a.ref, style = _a.style;
-                return (_jsx(PopoverWrapper, { ref: ref, style: style, onClick: onCloseLeftMenu, isLeftMenuOpen: isLeftMenuOpen, children: _jsx(TooltipWrap, { "$lightMode": lightMode, children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(TooltipItem, __assign({}, item, { lightMode: lightMode }), "".concat(index))); }) }) }));
-            } }) }));
-};
-export default SubitemTooltip;
-var templateObject_1;
+//#endregion
+export { SubitemTooltip as default };

package/ui/Blocks/SideMenu/context/LeftMenuContext.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 type LeftMenuContextType = {
     expandedItem: string | null;
     expandItem: (item: string | null) => void;

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

@@ -1,15 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useMemo, useState } from 'react';
-export var LeftMenuContext = createContext(null);
-export var LeftMenuProvider = function (_a) {
-    var children = _a.children, _b = _a.defaultItemSelected, defaultItemSelected = _b === void 0 ? null : _b;
-    var _c = useState(defaultItemSelected), expandedItem = _c[0], setExpandedItem = _c[1];
-    var expandItem = useCallback(function (item) {
-        setExpandedItem(item);
-    }, []);
-    var value = useMemo(function () { return ({
-        expandedItem: expandedItem,
-        expandItem: expandItem,
-    }); }, [expandedItem, expandItem]);
-    return _jsx(LeftMenuContext.Provider, { value: value, children: children });
+import { createContext, useCallback, useMemo, useState } from "react";
+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 { useContext } from 'react';
-import { LeftMenuContext } from './LeftMenuContext';
-export var useLeftMenuContext = function () {
-    var context = useContext(LeftMenuContext);
-    if (!context)
-        throw new Error('useLeftMenuContext context must be use inside LeftMenuProvider');
-    return context;
+import { LeftMenuContext } from "./LeftMenuContext.js";
+import { useContext } from "react";
+//#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.d.ts

@@ -1,5 +1,4 @@
 import { MutableRefObject } from 'react';
-
 interface Props {
     parentRef: MutableRefObject<HTMLDivElement | null | undefined>;
 }

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

@@ -1,23 +1,25 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-var useOutSideHover = function (_a) {
-    var parentRef = _a.parentRef;
-    var ref = useRef(null);
-    var _b = useState(false), isHovering = _b[0], setIsHovering = _b[1];
-    var handleMouseOver = useCallback(function () {
-        setIsHovering(true);
-    }, []);
-    var handleMouseOut = useCallback(function (e) {
-        var _a, _b;
-        if (!((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) && !((_b = ref.current) === null || _b === void 0 ? void 0 : _b.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 };
+import { useCallback, useEffect, useRef, useState } from "react";
+//#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
+	};
 };
-export default useOutSideHover;
+//#endregion
+export { useOutSideHover as default };

package/ui/Blocks/SideMenu/index.d.ts

@@ -1,8 +1,7 @@
 import { HamburgerMenuButton } from './components/HamburgerMenu';
 import { compactMenuWidth, expandedMenuWidth } from './utils/constants';
-import { default as SideMenu } from './SideMenu';
+import SideMenu from './SideMenu';
 import { MenuItemType } from './types';
-
 export type { MenuItemType };
 export { HamburgerMenuButton, compactMenuWidth, expandedMenuWidth };
 export default SideMenu;

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';
-export { HamburgerMenuButton, compactMenuWidth, expandedMenuWidth };
-export default 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 };

package/ui/Blocks/SideMenu/stories/SideMenu.stories.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../types').SideMenuProps>;
+    component: import("react").FC<import("../types").SideMenuProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Blocks/SideMenu/stories/menuItems.js

@@ -1,102 +1,109 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Complaint, Income, Transfer, Return, Expeditions, Inventory, Products } from '../../../Elements/Icon/icons';
-export var menuItems = [
-    {
-        title: 'Products',
-        icon: _jsx(Products, {}),
-        link: '/',
-        id: 'product'
-    },
-    {
-        title: 'Inventory',
-        icon: _jsx(Inventory, {}),
-        link: '/inventory',
-        id: 'inventory',
-        items: [
-            {
-                title: 'Stocks',
-                link: '/inventory/stock',
-                id: 'stock'
-            },
-            {
-                title: 'Reservations',
-                link: '/inventory/reservations',
-                id: 'reservations'
-            },
-            {
-                title: 'Movements',
-                link: '/inventory/movements',
-                id: 'movements'
-            },
-            {
-                title: 'Inventory movements',
-                link: '/inventory/inventory-movements',
-                id: 'inventoryMovements'
-            },
-            {
-                title: 'Internal inv. movements',
-                link: '/inventory/internal-inv-movements',
-                id: 'internalInvMovements'
-            }
-        ]
-    },
-    {
-        title: 'Expeditions',
-        icon: _jsx(Expeditions, {}),
-        link: '/expeditions',
-        id: 'expeditions',
-        items: [
-            {
-                title: 'Expeditions',
-                link: '/expeditions',
-                id: 'expeditionsChild'
-            },
-            {
-                title: 'Outbound receipts',
-                link: '/expeditions/outbound-receipts',
-                id: 'outboundReceipts'
-            },
-            {
-                title: 'Missing goods',
-                link: '/expeditions/missing-goods',
-                id: 'missingGoods'
-            }
-        ]
-    },
-    {
-        title: 'Inbound',
-        icon: _jsx(Income, {}),
-        link: '/inbound',
-        id: 'inbound',
-        items: [
-            {
-                title: 'Stock advices',
-                link: '/inbound/stock-advices',
-                id: 'stockAdvices'
-            },
-            {
-                title: 'Inbound receipt',
-                link: '/inbound/inbound-receipt',
-                id: 'inboundReceipts'
-            }
-        ]
-    },
-    {
-        title: 'Returns',
-        icon: _jsx(Return, {}),
-        link: '/returns',
-        id: 'returns'
-    },
-    {
-        title: 'Transfers',
-        icon: _jsx(Transfer, {}),
-        link: '/transfers',
-        id: 'transfers'
-    },
-    {
-        title: 'Claims',
-        icon: _jsx(Complaint, {}),
-        link: '/claims',
-        id: 'claims'
-    }
+import { Complaint } from "../../../Elements/Icon/icons/Complaint.js";
+import { Expeditions } from "../../../Elements/Icon/icons/Expeditions.js";
+import { Income } from "../../../Elements/Icon/icons/Income.js";
+import { Inventory } from "../../../Elements/Icon/icons/Inventory.js";
+import { Products } from "../../../Elements/Icon/icons/Products.js";
+import { Return } from "../../../Elements/Icon/icons/Return.js";
+import { Transfer } from "../../../Elements/Icon/icons/Transfer.js";
+import "../../../Elements/Icon/icons/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/SideMenu/stories/menuItems.tsx
+const menuItems = [
+	{
+		title: "Products",
+		icon: /* @__PURE__ */ jsx(Products, {}),
+		link: "/",
+		id: "product"
+	},
+	{
+		title: "Inventory",
+		icon: /* @__PURE__ */ jsx(Inventory, {}),
+		link: "/inventory",
+		id: "inventory",
+		items: [
+			{
+				title: "Stocks",
+				link: "/inventory/stock",
+				id: "stock"
+			},
+			{
+				title: "Reservations",
+				link: "/inventory/reservations",
+				id: "reservations"
+			},
+			{
+				title: "Movements",
+				link: "/inventory/movements",
+				id: "movements"
+			},
+			{
+				title: "Inventory movements",
+				link: "/inventory/inventory-movements",
+				id: "inventoryMovements"
+			},
+			{
+				title: "Internal inv. movements",
+				link: "/inventory/internal-inv-movements",
+				id: "internalInvMovements"
+			}
+		]
+	},
+	{
+		title: "Expeditions",
+		icon: /* @__PURE__ */ jsx(Expeditions, {}),
+		link: "/expeditions",
+		id: "expeditions",
+		items: [
+			{
+				title: "Expeditions",
+				link: "/expeditions",
+				id: "expeditionsChild"
+			},
+			{
+				title: "Outbound receipts",
+				link: "/expeditions/outbound-receipts",
+				id: "outboundReceipts"
+			},
+			{
+				title: "Missing goods",
+				link: "/expeditions/missing-goods",
+				id: "missingGoods"
+			}
+		]
+	},
+	{
+		title: "Inbound",
+		icon: /* @__PURE__ */ jsx(Income, {}),
+		link: "/inbound",
+		id: "inbound",
+		items: [{
+			title: "Stock advices",
+			link: "/inbound/stock-advices",
+			id: "stockAdvices"
+		}, {
+			title: "Inbound receipt",
+			link: "/inbound/inbound-receipt",
+			id: "inboundReceipts"
+		}]
+	},
+	{
+		title: "Returns",
+		icon: /* @__PURE__ */ jsx(Return, {}),
+		link: "/returns",
+		id: "returns"
+	},
+	{
+		title: "Transfers",
+		icon: /* @__PURE__ */ jsx(Transfer, {}),
+		link: "/transfers",
+		id: "transfers"
+	},
+	{
+		title: "Claims",
+		icon: /* @__PURE__ */ jsx(Complaint, {}),
+		link: "/claims",
+		id: "claims"
+	}
 ];
+//#endregion
+export { menuItems };

package/ui/Blocks/SideMenu/styles.d.ts

@@ -1,43 +1,42 @@
 import { NavLink } from 'react-router-dom';
-
-export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    isLeftMenuOpen?: boolean | undefined;
-}, never>;
-export declare const SubItemsWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const ItemsSeparator: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const ItemLabel: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    $isCompact?: boolean | undefined;
-    isSubitem?: boolean | undefined;
-}, never>;
-export declare const ItemDropdownArrow: import('styled-components').StyledComponent<import('react').FC<import('../..').IconProps>, import('@xstyled/system').Theme, {
-    $lightMode?: boolean | undefined;
-}, never>;
-export declare const TooltipItemLabel: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const ItemLinkWrap: import('styled-components').StyledComponent<typeof NavLink, import('@xstyled/system').Theme, {
-    $isCompact?: boolean | undefined;
-    $lightMode?: boolean | undefined;
-    appearance?: "default" | "gray" | undefined;
-}, never>;
-export declare const MenuItemContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    $isCompact?: boolean | undefined;
-    $lightMode?: boolean | undefined;
-    hasChildren?: boolean | undefined;
-    isHovering?: boolean | undefined;
-}, never>;
-export declare const ItemIcon: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {
-    $isCompact?: boolean | undefined;
-}, never>;
-export declare const TooltipWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    $lightMode?: boolean | undefined;
-}, never>;
-export declare const OverflowWithEllipsis: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
-export declare const TopLevelWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    isLeftMenuOpen?: boolean;
+}, never>;
+export declare const SubItemsWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ItemsSeparator: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    $isCompact?: boolean;
+    isSubitem?: boolean;
+}, never>;
+export declare const ItemDropdownArrow: import("styled-components").StyledComponent<import("react").FC<import("../..").IconProps>, import("@xstyled/styled-components").Theme, {
+    $lightMode?: boolean;
+}, never>;
+export declare const TooltipItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ItemLinkWrap: import("styled-components").StyledComponent<typeof NavLink, import("@xstyled/styled-components").Theme, {
+    $isCompact?: boolean;
+    $lightMode?: boolean;
+    appearance?: "gray" | "default";
+}, never>;
+export declare const MenuItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    $isCompact?: boolean;
+    $lightMode?: boolean;
+    hasChildren?: boolean;
+    isHovering?: boolean;
+}, never>;
+export declare const ItemIcon: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {
+    $isCompact?: boolean;
+}, never>;
+export declare const TooltipWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    $lightMode?: boolean;
+}, never>;
+export declare const OverflowWithEllipsis: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const TopLevelWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     isCompact: boolean;
-    isLeftMenuOpen?: boolean | undefined;
-    lightMode?: boolean | undefined;
+    isLeftMenuOpen?: boolean;
+    lightMode?: boolean;
 }, never>;
-export declare const ScrollWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const BodyWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const ScrollWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const BodyWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     isCompact: boolean;
 }, never>;
-export declare const Overlay: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Overlay: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;