@mailstep/design-system 0.6.57-beta.2 → 0.6.57

package/package.json

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

package/ui/Blocks/SideMenu/MenuItem.js

@@ -12,12 +12,12 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { matchPath } from 'react-router';
-import Icon from '../../Elements/Icon/Icon';
-import { Paragraph3, Paragraph5 } from '../../Elements/Typography/Typography';
+import { ItemLinkWrap, ItemIcon, ItemDropdownArrow, SubItemsWrap, OverflowWithEllipsis, MenuItemContainer, ItemLabel, ItemsSeparator } from './styles';
 import SubitemTooltip from './components/SubitemTooltip';
 import { useLeftMenuContext } from './context/useLeftMenuContext';
+import { Paragraph3, Paragraph5 } from '../../Elements/Typography/Typography';
+import Icon from '../../Elements/Icon/Icon';
 import useOutSideHover from './hooks/useOutsideHover';
-import { ItemLinkWrap, ItemIcon, ItemDropdownArrow, SubItemsWrap, OverflowWithEllipsis, MenuItemContainer, ItemLabel, ItemsSeparator } from './styles';
 var removeOptionalEnd = /\?$/;
 var MenuItem = function (_a) {
     var icon = _a.icon, title = _a.title, _b = _a.link, link = _b === void 0 ? '' : _b, items = _a.items, id = _a.id, isSubitem = _a.isSubitem, isCompact = _a.isCompact, _c = _a.lightMode, lightMode = _c === void 0 ? false : _c, _d = _a.separator, separator = _d === void 0 ? false : _d, isLeftMenuOpen = _a.isLeftMenuOpen, onCloseLeftMenu = _a.onCloseLeftMenu;
@@ -47,7 +47,7 @@ var MenuItem = function (_a) {
         var partialMatch = location.pathname.startsWith(link.slice(0, -1)) && location.pathname.includes('/settings/');
         return isActive || childSelected || partialMatch;
     }, [items, link]);
-    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, activeClassName: hasChildren ? 'selected' : undefined, onClick: toggleChildren, "$isCompact": isCompact, className: itemLinkWrapClassName, 
+    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, 
                         // @ts-ignore
                         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))); }) }))] }));
 };

package/ui/Blocks/SideMenu/styles.js

@@ -139,7 +139,7 @@ export var TooltipWrap = styled.div(templateObject_16 || (templateObject_16 = __
     var $lightMode = _a.$lightMode;
     return ($lightMode ? th.color('red20') : th.color('blue2'));
 });
-export var OverflowWithEllipsis = styled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+export var OverflowWithEllipsis = styled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  max-width: 140px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  max-width: 140px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
 export var TopLevelWrap = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  height: -webkit-fill-available;\n  transition: width 0.5s ease;\n  width: ", ";\n\n  z-index: 5;\n  position: absolute;\n  top: ", ";\n  height: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    top: inherit;\n    z-index: 2;\n  }\n"], ["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  height: -webkit-fill-available;\n  transition: width 0.5s ease;\n  width: ", ";\n\n  z-index: 5;\n  position: absolute;\n  top: ", ";\n  height: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    top: inherit;\n    z-index: 2;\n  }\n"])), function (_a) {
     var lightMode = _a.lightMode;
     return (lightMode ? 'white' : th('colors.blue3'));

package/ui/Blocks/Stepper/Stepper.js

@@ -10,5 +10,5 @@ export var Stepper = function (_a) {
     return (_jsxs(Container, { children: [_jsx(ItemsWrapper, { children: items.map(function (_a, index) {
                     var title = _a.title, disabled = _a.disabled, completed = _a.completed;
                     return (_jsx(StepItem, { onClick: handleChangeStep(index), title: title, index: index, activeStep: activeStep, disabled: disabled, completed: completed }, title));
-                }) }), _jsx(Component, { handleGoToNextStep: handleChangeStep(activeStep + 1) })] }));
+                }) }), _jsx(Component, { handleGoNext: handleChangeStep(activeStep + 1) })] }));
 };

package/ui/Blocks/Stepper/stories/Stepper.stories.js

@@ -18,29 +18,29 @@ var items = [
     {
         title: 'Scan product',
         component: function (_a) {
-            var handleGoToNextStep = _a.handleGoToNextStep;
-            return (_jsxs("div", { children: ["Scan product ", _jsx(Button, { onClick: handleGoToNextStep, children: "Go next" })] }));
+            var handleGoNext = _a.handleGoNext;
+            return (_jsxs("div", { children: ["Scan product ", _jsx(Button, { onClick: handleGoNext, children: "Go next" })] }));
         }
     },
     {
         title: 'Measurement',
         component: function (_a) {
-            var handleGoToNextStep = _a.handleGoToNextStep;
-            return (_jsxs("div", { children: ["Measurement page ", _jsx(Button, { onClick: handleGoToNextStep, children: "Go next" })] }));
+            var handleGoNext = _a.handleGoNext;
+            return (_jsxs("div", { children: ["Measurement page ", _jsx(Button, { onClick: handleGoNext, children: "Go next" })] }));
         }
     },
     {
         title: 'Logistic info',
         component: function (_a) {
-            var handleGoToNextStep = _a.handleGoToNextStep;
-            return (_jsxs("div", { children: ["Logistic info ", _jsx(Button, { onClick: handleGoToNextStep, children: "Go next" })] }));
+            var handleGoNext = _a.handleGoNext;
+            return (_jsxs("div", { children: ["Logistic info ", _jsx(Button, { onClick: handleGoNext, children: "Go next" })] }));
         }
     },
     {
         title: 'Color',
         component: function (_a) {
-            var handleGoToNextStep = _a.handleGoToNextStep;
-            return (_jsxs("div", { children: ["Select color ", _jsx(Button, { onClick: handleGoToNextStep, children: "Finish" })] }));
+            var handleGoNext = _a.handleGoNext;
+            return (_jsxs("div", { children: ["Select color ", _jsx(Button, { onClick: handleGoNext, children: "Finish" })] }));
         }
     }
 ];

package/ui/Blocks/Stepper/types.d.ts

@@ -5,7 +5,7 @@ export type StepperProps = {
     handleChangeStep: (step: number) => () => void;
 };
 export type StepperPassedDownProps = {
-    handleGoToNextStep: () => void;
+    handleGoNext: () => void;
 };
 export type StepperItem = {
     title: string;