@mailstep/design-system 0.8.30 → 0.8.31-beta.2

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

@@ -1,53 +1,42 @@
-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 __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-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 __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);
 };
-//#endregion
-export { SubitemTooltip as default };
+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;

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

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

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

@@ -1,20 +1,15 @@
-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
-	});
+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 });
 };
-//#endregion
-export { LeftMenuContext, LeftMenuProvider };

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

@@ -1,10 +1,8 @@
-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;
+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;
 };
-//#endregion
-export { useLeftMenuContext };

package/ui/Blocks/SideMenu/hooks/useOutsideHover.d.ts

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

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

@@ -1,25 +1,23 @@
-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
-	};
+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 };
 };
-//#endregion
-export { useOutSideHover as default };
+export default useOutSideHover;

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

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

package/ui/Blocks/SideMenu/index.js

@@ -1,7 +1,5 @@
-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 };
+import { HamburgerMenuButton } from './components/HamburgerMenu';
+import { compactMenuWidth, expandedMenuWidth } from './utils/constants';
+import SideMenu from './SideMenu';
+export { HamburgerMenuButton, compactMenuWidth, expandedMenuWidth };
+export default SideMenu;

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

@@ -1,6 +1,7 @@
+/// <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/SideMenu.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SideMenu from '../';
+import { menuItems } from './menuItems';
+import { LinguiContainer } from '../../../utils/LinguiContainer';
+var meta = {
+    title: 'Blocks/SideMenu',
+    component: SideMenu,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+export var Dark = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(SideMenu, { variant: "dark", isCompact: false, menuItems: menuItems }) }));
+};
+export var DarkCompact = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(SideMenu, { variant: "dark", isCompact: true, menuItems: menuItems }) }));
+};
+export var Light = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(SideMenu, { variant: "light", isCompact: false, menuItems: menuItems }) }));
+};
+export var LightCompact = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(SideMenu, { variant: "light", isCompact: true, menuItems: menuItems }) }));
+};

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

@@ -1,109 +1,102 @@
-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"
-	}
+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'
+    }
 ];
-//#endregion
-export { menuItems };

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

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