@mailstep/design-system 0.6.65-beta.0 → 0.6.65-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.65-beta.0",
+  "version": "0.6.65-beta.2",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.d.ts

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import type { MenuItem as MenuItemType } from '../../../../types';
+import type { MenuItemType } from '../../../../../SideMenu/types';
 type MenuItemProps = {
     item: MenuItemType;
 };

package/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.js

@@ -3,5 +3,5 @@ import { Link } from 'react-router-dom';
 import { MenuItemsListItem } from '../../styles';
 export var MenuItem = function (_a) {
     var item = _a.item;
-    return (_jsx(MenuItemsListItem, { children: _jsx(Link, { to: item.link, children: item.name }) }));
+    return _jsx(MenuItemsListItem, { children: item.link ? _jsx(Link, { to: item.link, children: item.title }) : item.title });
 };

package/ui/Blocks/Header/components/MenuItems/index.d.ts

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import type { MenuItem as MenuItemType } from '../../types';
+import type { MenuItemType } from '../../../SideMenu/types';
 type MenuItemsProps = {
     items?: MenuItemType[];
 };

package/ui/Blocks/Header/components/MenuItems/styles.js

@@ -4,5 +4,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled from '@xstyled/styled-components';
 export var MenuItemsList = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  gap: 10px;\n\n  @media (min-width: 1024px) {\n    display: flex;\n  }\n"], ["\n  display: none;\n  gap: 10px;\n\n  @media (min-width: 1024px) {\n    display: flex;\n  }\n"])));
-export var MenuItemsListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n    color: red1;\n    border-color: red1;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n  }\n"], ["\n  a {\n    text-decoration: none;\n    color: red1;\n    border-color: red1;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n  }\n"])));
+export var MenuItemsListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"], ["\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"])));
 var templateObject_1, templateObject_2;

package/ui/Blocks/Header/components/UserMenu/index.d.ts

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import type { User } from '../../types';
 type Props = {
-    user?: User;
+    user?: User | null;
     onLogout?: () => void;
 };
 export declare const UserMenu: FC<Props>;

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

@@ -1,15 +1,16 @@
 import { type FC } from 'react';
 import type { Brand, Variant } from '../../Elements/Logo';
-import type { User, MenuItem } from './types';
+import type { MenuItemType } from '../SideMenu/types';
+import type { User } from './types';
 type Props = {
     homeLink: string;
     isMobileMenuOpen?: boolean;
     logo: Brand;
     logoVariant: Variant;
-    user?: User;
+    user?: User | null;
     currentLanguage?: string;
     hasUserMenu?: boolean;
-    rightMenuItems?: MenuItem[];
+    rightMenuItems?: MenuItemType[];
     onOpenMobileSideMenu?: () => void;
     onChangeLanguage?: (language: string) => void;
     onLogout?: () => void;

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

@@ -6,10 +6,10 @@ declare const meta: {
         isMobileMenuOpen?: boolean | undefined;
         logo: import("../../..").Brand;
         logoVariant: import("../../..").Variant;
-        user?: import("../types").User | undefined;
+        user?: import("../types").User | null | undefined;
         currentLanguage?: string | undefined;
         hasUserMenu?: boolean | undefined;
-        rightMenuItems?: import("../types").MenuItem[] | undefined;
+        rightMenuItems?: import("../../SideMenu").MenuItemType[] | undefined;
         onOpenMobileSideMenu?: (() => void) | undefined;
         onChangeLanguage?: ((language: string) => void) | undefined;
         onLogout?: (() => void) | undefined;
@@ -20,6 +20,6 @@ declare const meta: {
 export default meta;
 export declare const HeaderBasic: () => JSX.Element;
 export declare const HeaderWithUser: () => JSX.Element;
-export declare const HeaderWithRightLink: () => JSX.Element;
+export declare const HeaderWithRightLinks: () => JSX.Element;
 export declare const HeaderWithLanguageSwitch: () => JSX.Element;
 export declare const HeaderWithAllItems: () => JSX.Element;

package/ui/Blocks/Header/stories/Header.stories.js

@@ -15,24 +15,27 @@ var user = {
 };
 var menuItems = [
     {
-        name: 'About us',
+        id: 'aboutUs',
+        title: 'About us',
         link: 'http://mailstep.com'
     },
     {
-        name: 'Tracking package',
+        id: 'trackingPage',
+        title: 'Tracking package',
         link: 'http://mailstep.com/tracking'
     },
     {
-        name: 'Customer service',
+        id: 'customerService',
+        title: 'Customer service',
         link: 'http://mailstep.com/cc'
     }
 ];
 export default meta;
-export var HeaderBasic = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailship", logoVariant: "s" }) })); };
-export var HeaderWithUser = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailship", logoVariant: "s", hasUserMenu: true, user: user }) })); };
-export var HeaderWithRightLink = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailship", logoVariant: "s", rightMenuItems: menuItems }) })); };
-export var HeaderWithLanguageSwitch = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailship", logoVariant: "s", currentLanguage: "cs" }) })); };
+export var HeaderBasic = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black" }) })); };
+export var HeaderWithUser = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", hasUserMenu: true, user: user }) })); };
+export var HeaderWithRightLinks = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", rightMenuItems: menuItems }) })); };
+export var HeaderWithLanguageSwitch = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", currentLanguage: "cs" }) })); };
 export var HeaderWithAllItems = function () {
     var _a = useState(false), isMobileMenuOpen = _a[0], setIsMobileMenuOpen = _a[1];
-    return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailship", logoVariant: "s", currentLanguage: "cs", rightMenuItems: menuItems, hasUserMenu: true, user: user, isMobileMenuOpen: isMobileMenuOpen, onOpenMobileSideMenu: function () { return setIsMobileMenuOpen(function (state) { return !state; }); } }) }));
+    return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", currentLanguage: "cs", rightMenuItems: menuItems, hasUserMenu: true, user: user, isMobileMenuOpen: isMobileMenuOpen, onOpenMobileSideMenu: function () { return setIsMobileMenuOpen(function (state) { return !state; }); } }) }));
 };

package/ui/Blocks/SideMenu/SideMenu.js

@@ -19,6 +19,9 @@ var SideMenu = function (_a) {
     var menuItems = _a.menuItems, isCompact = _a.isCompact, setIsCompact = _a.setIsCompact, isLeftMenuOpen = _a.isLeftMenuOpen, onCloseLeftMenu = _a.onCloseLeftMenu, _b = _a.variant, variant = _b === void 0 ? 'dark' : _b, children = _a.children;
     var lightMode = variant === 'light';
     var pickerRef = useClickOutside({ onClose: onCloseLeftMenu });
-    return (_jsx(LeftMenuProvider, { children: _jsxs(Container, { isLeftMenuOpen: isLeftMenuOpen, children: [_jsxs(TopLevelWrap, { isCompact: isCompact, isLeftMenuOpen: isLeftMenuOpen, ref: pickerRef, lightMode: lightMode, children: [_jsx(ScrollWrap, { children: _jsxs(BodyWrap, { isCompact: isCompact, children: [menuItems.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode, separator: !!item.separator }, item), "".concat(item.id, "-").concat(index))); }), children] }) }), _jsx(FooterRow, { isCompact: isCompact, setIsCompact: setIsCompact, lightMode: lightMode })] }), _jsx(Overlay, {})] }) }));
+    return (_jsx(LeftMenuProvider, { children: _jsxs(Container, { isLeftMenuOpen: isLeftMenuOpen, children: [_jsxs(TopLevelWrap, { isCompact: isCompact, isLeftMenuOpen: isLeftMenuOpen, ref: pickerRef, lightMode: lightMode, children: [_jsx(ScrollWrap, { children: _jsxs(BodyWrap, { isCompact: isCompact, children: [menuItems.map(function (item, index) {
+                                        var _a;
+                                        return (_jsx(MenuItem, __assign({ isCompact: isCompact, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode, separator: !!item.separator }, item), "".concat((_a = item.id) !== null && _a !== void 0 ? _a : item.title, "-").concat(index)));
+                                    }), children] }) }), _jsx(FooterRow, { isCompact: isCompact, setIsCompact: setIsCompact, lightMode: lightMode })] }), _jsx(Overlay, {})] }) }));
 };
 export default SideMenu;

package/ui/index.es.js

@@ -51479,7 +51479,7 @@ const NEe = q.img`
   return /* @__PURE__ */ g.jsx(JIe, { children: /* @__PURE__ */ g.jsxs(KIe, { isLeftMenuOpen: n, children: [
     /* @__PURE__ */ g.jsxs(nke, { isCompact: t, isLeftMenuOpen: n, ref: u, lightMode: c, children: [
       /* @__PURE__ */ g.jsx(ike, { children: /* @__PURE__ */ g.jsxs(ake, { isCompact: t, children: [
-        e.map((f, p) => /* @__PURE__ */ g.jsx(pke, { isCompact: t, isLeftMenuOpen: n, onCloseLeftMenu: i, lightMode: c, separator: !!f.separator, ...f }, `${f.id}-${p}`)),
+        e.map((f, p) => /* @__PURE__ */ g.jsx(pke, { isCompact: t, isLeftMenuOpen: n, onCloseLeftMenu: i, lightMode: c, separator: !!f.separator, ...f }, `${f.id ?? f.title}-${p}`)),
         l
       ] }) }),
       /* @__PURE__ */ g.jsx(XIe, { isCompact: t, setIsCompact: r, lightMode: c })

package/ui/index.umd.js

@@ -3882,7 +3882,7 @@ ${ee.current.stack}
   @media (min-width: 1024px) {
     display: block;
   }
-`,iOe=({items:e,childRef:t,parentRef:r,isLeftMenuOpen:n,onCloseLeftMenu:i,lightMode:o})=>g.jsx(i1,{children:g.jsx(WF,{innerRef:t,referenceElement:r.current,placement:"right-start",children:({ref:l,style:u})=>g.jsx(nOe,{ref:l,style:u,onClick:i,isLeftMenuOpen:n,children:g.jsx(Qke,{$lightMode:o,children:e==null?void 0:e.map((c,f)=>g.jsx(rOe,{...c,lightMode:o},`${f}`))})})})}),aOe=()=>{const e=I.useContext(KV);if(!e)throw new Error("useLeftMenuContext context must be use inside LeftMenuProvider");return e},oOe=({parentRef:e})=>{const t=I.useRef(null),[r,n]=I.useState(!1),i=I.useCallback(()=>{n(!0)},[]),o=I.useCallback(l=>{var u,c;!((u=e.current)!=null&&u.contains(l.target))&&!((c=t.current)!=null&&c.contains(l.target))&&n(!1)},[e]);return I.useEffect(()=>(document.addEventListener("mouseover",o),()=>{document.removeEventListener("mouseover",o)}),[o]),{isHovering:r,handleMouseOver:i,ref:t}},sOe=/\?$/,$V=({icon:e,title:t,link:r="",items:n,id:i,isSubitem:o,isCompact:l,lightMode:u=!1,separator:c=!1,isLeftMenuOpen:f,onCloseLeftMenu:A})=>{const p=I.useMemo(()=>n&&(n==null?void 0:n.length)>0,[n]),{expandedItem:v,expandItem:m}=aOe(),y=v===i,w=I.useCallback(()=>{p&&m(y?null:i),!p&&!u&&A&&A()},[p,m,y,i,u,A]),E=I.useMemo(()=>r.startsWith("https://")?{to:{pathname:r},target:"_blank"}:{to:r},[r]),x=l?TM:G6,k=y&&!l,P=I.useRef(null),{ref:T,isHovering:L,handleMouseOver:F}=oOe({parentRef:P});let V=o?"nestedlevel":"toplevel";y&&(V+=" expanded"),c&&(V+=" separator");const z=I.useCallback((Z,Y)=>{const R=!!(n!=null&&n.find(te=>{var _;return((_=te.link)==null?void 0:_.replace(sOe,""))===Y.pathname})),W=!!Ih(Y.pathname,{path:Z==null?void 0:Z.path}),j=Y.pathname.startsWith(r.slice(0,-1))&&Y.pathname.includes("/settings/");return W||R||j},[n,r]);return g.jsxs(g.Fragment,{children:[c&&g.jsx(Xke,{}),g.jsxs(Jke,{ref:P,$isCompact:l,$lightMode:u,hasChildren:p,isHovering:L,children:[g.jsxs(Jc,{...E,onMouseOver:F,exact:!0,activeClassName:p?"selected":void 0,onClick:w,$isCompact:l,className:V,isActive:z,$lightMode:u,children:[g.jsxs(S9,{$isCompact:l,isSubitem:o,children:[!o&&e&&g.jsx(o1,{className:"mainIcon",$isCompact:l,children:typeof e=="string"?g.jsx(kt,{icon:e,fill:"none"}):e}),g.jsx(x,{variant:"semiBold",mt:0,mb:0,children:g.jsx(Kke,{children:t})})]}),!l&&p&&g.jsx(E9,{icon:"goDown",$lightMode:u})]}),L&&l&&p&&!k&&g.jsx(iOe,{items:n,childRef:T,parentRef:P,isLeftMenuOpen:f,onCloseLeftMenu:A,lightMode:u})]}),p&&k&&g.jsx(Yke,{children:n==null?void 0:n.map((Z,Y)=>g.jsx($V,{isCompact:l,lightMode:u,...Z,onCloseLeftMenu:A,isSubitem:!0},`${Y}`))})]})},lOe=I.memo($V),uOe=({menuItems:e,isCompact:t,setIsCompact:r,isLeftMenuOpen:n,onCloseLeftMenu:i,variant:o="dark",children:l})=>{const u=o==="light",c=Fo({onClose:i});return g.jsx(_ke,{children:g.jsxs(Zke,{isLeftMenuOpen:n,children:[g.jsxs(qke,{isCompact:t,isLeftMenuOpen:n,ref:c,lightMode:u,children:[g.jsx($ke,{children:g.jsxs(eOe,{isCompact:t,children:[e.map((f,A)=>g.jsx(lOe,{isCompact:t,isLeftMenuOpen:n,onCloseLeftMenu:i,lightMode:u,separator:!!f.separator,...f},`${f.id}-${A}`)),l]})}),g.jsx(Gke,{isCompact:t,setIsCompact:r,lightMode:u})]}),g.jsx(tOe,{})]})})},cOe=q.div`
+`,iOe=({items:e,childRef:t,parentRef:r,isLeftMenuOpen:n,onCloseLeftMenu:i,lightMode:o})=>g.jsx(i1,{children:g.jsx(WF,{innerRef:t,referenceElement:r.current,placement:"right-start",children:({ref:l,style:u})=>g.jsx(nOe,{ref:l,style:u,onClick:i,isLeftMenuOpen:n,children:g.jsx(Qke,{$lightMode:o,children:e==null?void 0:e.map((c,f)=>g.jsx(rOe,{...c,lightMode:o},`${f}`))})})})}),aOe=()=>{const e=I.useContext(KV);if(!e)throw new Error("useLeftMenuContext context must be use inside LeftMenuProvider");return e},oOe=({parentRef:e})=>{const t=I.useRef(null),[r,n]=I.useState(!1),i=I.useCallback(()=>{n(!0)},[]),o=I.useCallback(l=>{var u,c;!((u=e.current)!=null&&u.contains(l.target))&&!((c=t.current)!=null&&c.contains(l.target))&&n(!1)},[e]);return I.useEffect(()=>(document.addEventListener("mouseover",o),()=>{document.removeEventListener("mouseover",o)}),[o]),{isHovering:r,handleMouseOver:i,ref:t}},sOe=/\?$/,$V=({icon:e,title:t,link:r="",items:n,id:i,isSubitem:o,isCompact:l,lightMode:u=!1,separator:c=!1,isLeftMenuOpen:f,onCloseLeftMenu:A})=>{const p=I.useMemo(()=>n&&(n==null?void 0:n.length)>0,[n]),{expandedItem:v,expandItem:m}=aOe(),y=v===i,w=I.useCallback(()=>{p&&m(y?null:i),!p&&!u&&A&&A()},[p,m,y,i,u,A]),E=I.useMemo(()=>r.startsWith("https://")?{to:{pathname:r},target:"_blank"}:{to:r},[r]),x=l?TM:G6,k=y&&!l,P=I.useRef(null),{ref:T,isHovering:L,handleMouseOver:F}=oOe({parentRef:P});let V=o?"nestedlevel":"toplevel";y&&(V+=" expanded"),c&&(V+=" separator");const z=I.useCallback((Z,Y)=>{const R=!!(n!=null&&n.find(te=>{var _;return((_=te.link)==null?void 0:_.replace(sOe,""))===Y.pathname})),W=!!Ih(Y.pathname,{path:Z==null?void 0:Z.path}),j=Y.pathname.startsWith(r.slice(0,-1))&&Y.pathname.includes("/settings/");return W||R||j},[n,r]);return g.jsxs(g.Fragment,{children:[c&&g.jsx(Xke,{}),g.jsxs(Jke,{ref:P,$isCompact:l,$lightMode:u,hasChildren:p,isHovering:L,children:[g.jsxs(Jc,{...E,onMouseOver:F,exact:!0,activeClassName:p?"selected":void 0,onClick:w,$isCompact:l,className:V,isActive:z,$lightMode:u,children:[g.jsxs(S9,{$isCompact:l,isSubitem:o,children:[!o&&e&&g.jsx(o1,{className:"mainIcon",$isCompact:l,children:typeof e=="string"?g.jsx(kt,{icon:e,fill:"none"}):e}),g.jsx(x,{variant:"semiBold",mt:0,mb:0,children:g.jsx(Kke,{children:t})})]}),!l&&p&&g.jsx(E9,{icon:"goDown",$lightMode:u})]}),L&&l&&p&&!k&&g.jsx(iOe,{items:n,childRef:T,parentRef:P,isLeftMenuOpen:f,onCloseLeftMenu:A,lightMode:u})]}),p&&k&&g.jsx(Yke,{children:n==null?void 0:n.map((Z,Y)=>g.jsx($V,{isCompact:l,lightMode:u,...Z,onCloseLeftMenu:A,isSubitem:!0},`${Y}`))})]})},lOe=I.memo($V),uOe=({menuItems:e,isCompact:t,setIsCompact:r,isLeftMenuOpen:n,onCloseLeftMenu:i,variant:o="dark",children:l})=>{const u=o==="light",c=Fo({onClose:i});return g.jsx(_ke,{children:g.jsxs(Zke,{isLeftMenuOpen:n,children:[g.jsxs(qke,{isCompact:t,isLeftMenuOpen:n,ref:c,lightMode:u,children:[g.jsx($ke,{children:g.jsxs(eOe,{isCompact:t,children:[e.map((f,A)=>g.jsx(lOe,{isCompact:t,isLeftMenuOpen:n,onCloseLeftMenu:i,lightMode:u,separator:!!f.separator,...f},`${f.id??f.title}-${A}`)),l]})}),g.jsx(Gke,{isCompact:t,setIsCompact:r,lightMode:u})]}),g.jsx(tOe,{})]})})},cOe=q.div`
   border-radius: 50%;
   border: 8px solid ${H.color("red1")};
   color: ${H.color("red1")};