@mailstep/design-system 0.7.25 → 0.7.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -49,6 +49,6 @@ var MenuItem = function (_a) {
|
|
|
49
49
|
}, [items, link]);
|
|
50
50
|
return (_jsxs(_Fragment, { children: [separator && _jsx(ItemsSeparator, {}), _jsxs(MenuItemContainer, { ref: parentRef, "$isCompact": isCompact, "$lightMode": lightMode, hasChildren: hasChildren, isHovering: isHovering, children: [_jsxs(ItemLinkWrap, __assign({}, linkProps, { onMouseOver: handleMouseOver, exact: true, activeClassName: hasChildren ? 'selected' : undefined, onClick: toggleChildren, "$isCompact": isCompact, className: itemLinkWrapClassName,
|
|
51
51
|
// @ts-ignore
|
|
52
|
-
isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(OverflowWithEllipsis, { children: title }) })] }), !isCompact && hasChildren && _jsx(ItemDropdownArrow, { icon: "goDown", "$lightMode": lightMode })] })), isHovering && isCompact && hasChildren && !listExpandedItems && (_jsx(SubitemTooltip, { items: items, childRef: childRef, parentRef: parentRef, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode }))] }), hasChildren && listExpandedItems && (_jsx(SubItemsWrap, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, lightMode: lightMode }, item, { onCloseLeftMenu: onCloseLeftMenu, isSubitem: true }), "".concat(index))); }) }))] }));
|
|
52
|
+
isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0, textAlign: "left", children: _jsx(OverflowWithEllipsis, { children: title }) })] }), !isCompact && hasChildren && _jsx(ItemDropdownArrow, { icon: "goDown", "$lightMode": lightMode })] })), isHovering && isCompact && hasChildren && !listExpandedItems && (_jsx(SubitemTooltip, { items: items, childRef: childRef, parentRef: parentRef, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode }))] }), hasChildren && listExpandedItems && (_jsx(SubItemsWrap, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, lightMode: lightMode }, item, { onCloseLeftMenu: onCloseLeftMenu, isSubitem: true }), "".concat(index))); }) }))] }));
|
|
53
53
|
};
|
|
54
54
|
export default memo(MenuItem);
|
package/ui/Forms/Input/styles.js
CHANGED
|
@@ -29,10 +29,10 @@ export var IconsController = styled.div(templateObject_3 || (templateObject_3 =
|
|
|
29
29
|
export var IconWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"], ["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"])));
|
|
30
30
|
export var StyledInput = styled.input.attrs(function (props) { return ({
|
|
31
31
|
as: props.$asTextArea ? 'textarea' : 'input'
|
|
32
|
-
}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width:
|
|
32
|
+
}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: ", ";\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: neutral300;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"], ["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: ", ";\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: neutral300;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"])), system, function (_a) {
|
|
33
33
|
var $isInvalid = _a.$isInvalid;
|
|
34
34
|
return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
|
|
35
|
-
}, function (props) { return resolvePaddingRight(props); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
|
|
35
|
+
}, function (props) { return resolvePaddingRight(props); }, function (props) { return props.type !== 'checkbox' ? '100%' : 'auto'; }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
|
|
36
36
|
var big = _a.big;
|
|
37
37
|
return big
|
|
38
38
|
? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 30px;\n color: gray;\n font-weight: semiBold;\n padding: 0 0.5rem 0 1.25rem;\n "], ["\n font-size: 30px;\n color: gray;\n font-weight: semiBold;\n padding: 0 0.5rem 0 1.25rem;\n "]))) : '';
|
package/ui/index.es.js
CHANGED
|
@@ -14223,7 +14223,7 @@ const Mue = Z.div`
|
|
|
14223
14223
|
padding-bottom: 0.5em;
|
|
14224
14224
|
padding-right: ${(e) => Jue(e)}em;
|
|
14225
14225
|
display: block;
|
|
14226
|
-
width: 100
|
|
14226
|
+
width: ${(e) => e.type !== "checkbox" ? "100%" : "auto"};
|
|
14227
14227
|
font-family: ${W("fonts.primary")};
|
|
14228
14228
|
font-size: 14px;
|
|
14229
14229
|
font-weight: normal;
|
|
@@ -52503,7 +52503,7 @@ const cP = /* @__PURE__ */ Tn(aOe), oOe = Z.div`
|
|
|
52503
52503
|
children: [
|
|
52504
52504
|
/* @__PURE__ */ g.jsxs(kb, { $isCompact: l, isSubitem: o, children: [
|
|
52505
52505
|
!o && e && /* @__PURE__ */ g.jsx(Z2, { className: "mainIcon", $isCompact: l, children: typeof e == "string" ? /* @__PURE__ */ g.jsx(mt, { icon: e, fill: "none" }) : e }),
|
|
52506
|
-
/* @__PURE__ */ g.jsx(x, { variant: "semiBold", mt: 0, mb: 0, children: /* @__PURE__ */ g.jsx(GOe, { children: t }) })
|
|
52506
|
+
/* @__PURE__ */ g.jsx(x, { variant: "semiBold", mt: 0, mb: 0, textAlign: "left", children: /* @__PURE__ */ g.jsx(GOe, { children: t }) })
|
|
52507
52507
|
] }),
|
|
52508
52508
|
!l && h && /* @__PURE__ */ g.jsx(Xw, { icon: "goDown", $lightMode: c })
|
|
52509
52509
|
]
|
package/ui/index.umd.js
CHANGED
|
@@ -1425,7 +1425,7 @@ Message: ${e}`),e}}const Ba=e=>typeof e=="string",T5=e=>typeof e=="function",OM=
|
|
|
1425
1425
|
padding-bottom: 0.5em;
|
|
1426
1426
|
padding-right: ${e=>Gde(e)}em;
|
|
1427
1427
|
display: block;
|
|
1428
|
-
width: 100
|
|
1428
|
+
width: ${e=>e.type!=="checkbox"?"100%":"auto"};
|
|
1429
1429
|
font-family: ${H("fonts.primary")};
|
|
1430
1430
|
font-size: 14px;
|
|
1431
1431
|
font-weight: normal;
|
|
@@ -4050,7 +4050,7 @@ function print() { __p += __j.call(arguments, '') }
|
|
|
4050
4050
|
@media (min-width: 1024px) {
|
|
4051
4051
|
display: block;
|
|
4052
4052
|
}
|
|
4053
|
-
`,KPe=({items:e,childRef:t,parentRef:r,isLeftMenuOpen:n,onCloseLeftMenu:i,lightMode:o})=>g.jsx(G1,{children:g.jsx(SB,{innerRef:t,referenceElement:r.current,placement:"right-start",children:({ref:l,style:c})=>g.jsx(QPe,{ref:l,style:c,onClick:i,isLeftMenuOpen:n,children:g.jsx(GPe,{$lightMode:o,children:e==null?void 0:e.map((u,f)=>g.jsx(XPe,{...u,lightMode:o},`${f}`))})})})}),qPe=()=>{const e=I.useContext(dj);if(!e)throw new Error("useLeftMenuContext context must be use inside LeftMenuProvider");return e},$Pe=({parentRef:e})=>{const t=I.useRef(null),[r,n]=I.useState(!1),i=I.useCallback(()=>{n(!0)},[]),o=I.useCallback(l=>{var c,u;!((c=e.current)!=null&&c.contains(l.target))&&!((u=t.current)!=null&&u.contains(l.target))&&n(!1)},[e]);return I.useEffect(()=>(document.addEventListener("mouseover",o),()=>{document.removeEventListener("mouseover",o)}),[o]),{isHovering:r,handleMouseOver:i,ref:t}},eMe=/\?$/,pj=({icon:e,title:t,link:r="",items:n,id:i,isSubitem:o,isCompact:l,lightMode:c=!1,separator:u=!1,isLeftMenuOpen:f,onCloseLeftMenu:p})=>{const h=I.useMemo(()=>n&&(n==null?void 0:n.length)>0,[n]),{expandedItem:v,expandItem:m}=qPe(),y=v===i,C=I.useCallback(()=>{h&&m(y?null:i),!h&&!c&&p&&p()},[h,m,y,i,c,p]),E=I.useMemo(()=>r.startsWith("https://")?{to:{pathname:r},target:"_blank"}:{to:r},[r]),x=l?RM:N5,k=y&&!l,M=I.useRef(null),{ref:P,isHovering:L,handleMouseOver:V}=$Pe({parentRef:M});let F=o?"nestedlevel":"toplevel";y&&(F+=" expanded"),u&&(F+=" separator");const z=I.useCallback((G,Z)=>{const R=!!(n!=null&&n.find(re=>{var te;return((te=re.link)==null?void 0:te.replace(eMe,""))===Z.pathname})),W=!!ph(Z.pathname,{path:G==null?void 0:G.path}),j=Z.pathname.startsWith(r.slice(0,-1))&&Z.pathname.includes("/settings/");return W||R||j},[n,r]);return g.jsxs(g.Fragment,{children:[u&&g.jsx(HPe,{}),g.jsxs(zPe,{ref:M,$isCompact:l,$lightMode:c,hasChildren:h,isHovering:L,children:[g.jsxs(od,{...E,onMouseOver:V,exact:!0,activeClassName:h?"selected":void 0,onClick:C,$isCompact:l,className:F,isActive:z,$lightMode:c,children:[g.jsxs(T9,{$isCompact:l,isSubitem:o,children:[!o&&e&&g.jsx(hf,{className:"mainIcon",$isCompact:l,children:typeof e=="string"?g.jsx(pt,{icon:e,fill:"none"}):e}),g.jsx(x,{variant:"semiBold",mt:0,mb:0,children:g.jsx(_Pe,{children:t})})]}),!l&&h&&g.jsx(L9,{icon:"goDown",$lightMode:c})]}),L&&l&&h&&!k&&g.jsx(KPe,{items:n,childRef:P,parentRef:M,isLeftMenuOpen:f,onCloseLeftMenu:p,lightMode:c})]}),h&&k&&g.jsx(WPe,{children:n==null?void 0:n.map((G,Z)=>g.jsx(pj,{isCompact:l,lightMode:c,...G,onCloseLeftMenu:p,isSubitem:!0},`${Z}`))})]})},tMe=I.memo(pj),rMe=({menuItems:e,isCompact:t,setIsCompact:r,isLeftMenuOpen:n,onCloseLeftMenu:i,variant:o="dark",children:l})=>{const c=o==="light",u=Ho({onClose:i});return g.jsx(VPe,{children:g.jsxs(jPe,{isLeftMenuOpen:n,children:[g.jsxs(UPe,{isCompact:t,isLeftMenuOpen:n,ref:u,lightMode:c,children:[g.jsx(ZPe,{children:g.jsxs(YPe,{isCompact:t,children:[e.map((f,p)=>g.jsx(tMe,{isCompact:t,isLeftMenuOpen:n,onCloseLeftMenu:i,lightMode:c,separator:!!f.separator,...f},`${f.id??f.title}-${p}`)),l]})}),g.jsx(RPe,{isCompact:t,setIsCompact:r,lightMode:c})]}),g.jsx(JPe,{})]})})},Af=Y.div`
|
|
4053
|
+
`,KPe=({items:e,childRef:t,parentRef:r,isLeftMenuOpen:n,onCloseLeftMenu:i,lightMode:o})=>g.jsx(G1,{children:g.jsx(SB,{innerRef:t,referenceElement:r.current,placement:"right-start",children:({ref:l,style:c})=>g.jsx(QPe,{ref:l,style:c,onClick:i,isLeftMenuOpen:n,children:g.jsx(GPe,{$lightMode:o,children:e==null?void 0:e.map((u,f)=>g.jsx(XPe,{...u,lightMode:o},`${f}`))})})})}),qPe=()=>{const e=I.useContext(dj);if(!e)throw new Error("useLeftMenuContext context must be use inside LeftMenuProvider");return e},$Pe=({parentRef:e})=>{const t=I.useRef(null),[r,n]=I.useState(!1),i=I.useCallback(()=>{n(!0)},[]),o=I.useCallback(l=>{var c,u;!((c=e.current)!=null&&c.contains(l.target))&&!((u=t.current)!=null&&u.contains(l.target))&&n(!1)},[e]);return I.useEffect(()=>(document.addEventListener("mouseover",o),()=>{document.removeEventListener("mouseover",o)}),[o]),{isHovering:r,handleMouseOver:i,ref:t}},eMe=/\?$/,pj=({icon:e,title:t,link:r="",items:n,id:i,isSubitem:o,isCompact:l,lightMode:c=!1,separator:u=!1,isLeftMenuOpen:f,onCloseLeftMenu:p})=>{const h=I.useMemo(()=>n&&(n==null?void 0:n.length)>0,[n]),{expandedItem:v,expandItem:m}=qPe(),y=v===i,C=I.useCallback(()=>{h&&m(y?null:i),!h&&!c&&p&&p()},[h,m,y,i,c,p]),E=I.useMemo(()=>r.startsWith("https://")?{to:{pathname:r},target:"_blank"}:{to:r},[r]),x=l?RM:N5,k=y&&!l,M=I.useRef(null),{ref:P,isHovering:L,handleMouseOver:V}=$Pe({parentRef:M});let F=o?"nestedlevel":"toplevel";y&&(F+=" expanded"),u&&(F+=" separator");const z=I.useCallback((G,Z)=>{const R=!!(n!=null&&n.find(re=>{var te;return((te=re.link)==null?void 0:te.replace(eMe,""))===Z.pathname})),W=!!ph(Z.pathname,{path:G==null?void 0:G.path}),j=Z.pathname.startsWith(r.slice(0,-1))&&Z.pathname.includes("/settings/");return W||R||j},[n,r]);return g.jsxs(g.Fragment,{children:[u&&g.jsx(HPe,{}),g.jsxs(zPe,{ref:M,$isCompact:l,$lightMode:c,hasChildren:h,isHovering:L,children:[g.jsxs(od,{...E,onMouseOver:V,exact:!0,activeClassName:h?"selected":void 0,onClick:C,$isCompact:l,className:F,isActive:z,$lightMode:c,children:[g.jsxs(T9,{$isCompact:l,isSubitem:o,children:[!o&&e&&g.jsx(hf,{className:"mainIcon",$isCompact:l,children:typeof e=="string"?g.jsx(pt,{icon:e,fill:"none"}):e}),g.jsx(x,{variant:"semiBold",mt:0,mb:0,textAlign:"left",children:g.jsx(_Pe,{children:t})})]}),!l&&h&&g.jsx(L9,{icon:"goDown",$lightMode:c})]}),L&&l&&h&&!k&&g.jsx(KPe,{items:n,childRef:P,parentRef:M,isLeftMenuOpen:f,onCloseLeftMenu:p,lightMode:c})]}),h&&k&&g.jsx(WPe,{children:n==null?void 0:n.map((G,Z)=>g.jsx(pj,{isCompact:l,lightMode:c,...G,onCloseLeftMenu:p,isSubitem:!0},`${Z}`))})]})},tMe=I.memo(pj),rMe=({menuItems:e,isCompact:t,setIsCompact:r,isLeftMenuOpen:n,onCloseLeftMenu:i,variant:o="dark",children:l})=>{const c=o==="light",u=Ho({onClose:i});return g.jsx(VPe,{children:g.jsxs(jPe,{isLeftMenuOpen:n,children:[g.jsxs(UPe,{isCompact:t,isLeftMenuOpen:n,ref:u,lightMode:c,children:[g.jsx(ZPe,{children:g.jsxs(YPe,{isCompact:t,children:[e.map((f,p)=>g.jsx(tMe,{isCompact:t,isLeftMenuOpen:n,onCloseLeftMenu:i,lightMode:c,separator:!!f.separator,...f},`${f.id??f.title}-${p}`)),l]})}),g.jsx(RPe,{isCompact:t,setIsCompact:r,lightMode:c})]}),g.jsx(JPe,{})]})})},Af=Y.div`
|
|
4054
4054
|
font-size: 16px;
|
|
4055
4055
|
font-weight: 600;
|
|
4056
4056
|
border-radius: 50%;
|