@trafilea/afrodita-components 6.57.1 → 6.57.2

package/build/index.js

@@ -3598,7 +3598,7 @@ var getArrowStyles = function (position, borderColor, backgroundColor) {
         case exports.ComponentPosition.BottomLeft:
             return "\n     &::before,&::after\n      {\n      content: '';\n      position: absolute;\n      top: 0%;\n      left: 171px;\n      margin-top: -9px;\n      border: 10px solid transparent;\n      border-top: 0;\n      }\n      \n      &::before {\n        border-bottom: 10px solid ".concat(borderColor, ";\n        margin-top: -10px;\n      }\n      &::after {\n        border-bottom: 10px solid ").concat(backgroundColor, ";\n        z-index: 999;\n      }");
         case exports.ComponentPosition.BottomRight:
-            return "\n     &::before,&::after\n      {\n      content: '';\n      position: absolute;\n      top: 0%;\n      left: 38px;\n      margin-top: -9px;\n      border: 10px solid transparent;\n      border-top: 0;\n      }\n      \n      &::before {\n        border-bottom: 10px solid ".concat(borderColor, ";\n        margin-top: -10px;\n      }\n      &::after {\n        border-bottom: 10px solid ").concat(backgroundColor, ";\n        z-index: 999;\n      }");
+            return "\n     &::before,&::after\n      {\n      content: '';\n      position: absolute;\n      top: 0%;\n      left: 28px;\n      margin-top: -9px;\n      border: 10px solid transparent;\n      border-top: 0;\n      }\n      \n      &::before {\n        border-bottom: 10px solid ".concat(borderColor, ";\n        margin-top: -10px;\n      }\n      &::after {\n        border-bottom: 10px solid ").concat(backgroundColor, ";\n        z-index: 999;\n      }");
         case exports.ComponentPosition.Left:
             return "\n      &::before,&::after\n      {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 100%;\n      margin-top: -10px;\n      border: 10px solid transparent;\n      border-right: 0;s\n      border-left: 10px solid transparent;\n      margin-left: -1px;\n      }\n      \n      &::before {\n        border-left: 10px solid ".concat(borderColor, ";\n       \n      }\n      &::after {\n        border-left: 10px solid ").concat(backgroundColor, ";\n        z-index: 999;\n      }");
         case exports.ComponentPosition.Right:
@@ -3620,6 +3620,24 @@ var getTooltipAlignItems = function (position, align) {
         case exports.ComponentPosition.Right:
             return 'center';
     }
+};
+var getCloseIconRight = function (position, defaultRight) {
+    switch (position) {
+        case exports.ComponentPosition.BottomLeft:
+        case exports.ComponentPosition.BottomRight:
+            return '.55rem';
+        default:
+            return defaultRight;
+    }
+};
+var getTooltipTextMaxWidth = function (position) {
+    switch (position) {
+        case exports.ComponentPosition.BottomLeft:
+        case exports.ComponentPosition.BottomRight:
+            return '203px';
+        default:
+            return undefined;
+    }
 };
 
 var Wrapper$8 = newStyled.div(templateObject_1$2D || (templateObject_1$2D = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: ", ";\n      opacity: ", ";\n      cursor: text;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: ", ";\n      opacity: ", ";\n      cursor: text;\n    }\n  }\n"])), function (_a) {
@@ -3663,10 +3681,10 @@ var getTooltipMargin = function (actual, expected, margin) {
         return "calc(".concat(margin, " - 37px)");
     }
     if (actual === exports.ComponentPosition.BottomRight && expected === exports.ComponentPosition.Right) {
-        return '-40px';
+        return '-30px';
     }
     if (actual === exports.ComponentPosition.BottomLeft && expected === exports.ComponentPosition.Left) {
-        return '-80px';
+        return '-40px';
     }
     return actual === expected ? margin : '0';
 };
@@ -3681,8 +3699,8 @@ var TooltipText = newStyled.div(templateObject_4$17 || (templateObject_4$17 = __
     var theme = _a.theme;
     return theme.component.autoship.tooltip.text.alignment;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.component.autoship.tooltip.text.maxWidth;
+    var theme = _a.theme, maxWidth = _a.maxWidth;
+    return maxWidth !== null && maxWidth !== void 0 ? maxWidth : theme.component.autoship.tooltip.text.maxWidth;
 }, function (_a) {
     var color = _a.color;
     return color;
@@ -3717,12 +3735,12 @@ var Tooltip = function (_a) {
         var ref = tooltipRef.current;
         setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
     }, [tooltipRef]);
-    return (jsxRuntime.jsxs(Wrapper$8, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow, "data-position": position }, { children: [(showCloseIcon || isMobile) && (jsxRuntime.jsx(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: closeBtnSize, height: closeBtnSize, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxRuntime.jsxs(ContentWrapper$1, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsxRuntime.jsx(IconContainer$6, { children: React__default["default"].createElement(header.Icon, {
+    return (jsxRuntime.jsxs(Wrapper$8, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow, "data-position": position }, { children: [(showCloseIcon || isMobile) && (jsxRuntime.jsx(CloseToolTip, __assign$1({ right: getCloseIconRight(position, header === null || header === void 0 ? void 0 : header.iconRight), onClick: function () { return setCloseTooltip(true); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: closeBtnSize, height: closeBtnSize, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxRuntime.jsxs(ContentWrapper$1, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsxRuntime.jsx(IconContainer$6, { children: React__default["default"].createElement(header.Icon, {
                                             testId: 'HeaderIcon',
                                             fill: (header === null || header === void 0 ? void 0 : header.iconFill)
                                                 ? header === null || header === void 0 ? void 0 : header.iconFill
                                                 : theme.colors.pallete.secondary.color,
-                                        }) }, void 0)), jsxRuntime.jsx(Title$b, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) ? (jsxRuntime.jsx(TooltipText, { color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, "data-testid": "TooltipText", dangerouslySetInnerHTML: { __html: content.text } }, void 0)) : (elementContent)] }), void 0)] }), void 0)] }), void 0));
+                                        }) }, void 0)), jsxRuntime.jsx(Title$b, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) ? (jsxRuntime.jsx(TooltipText, { color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, "data-testid": "TooltipText", dangerouslySetInnerHTML: { __html: content.text }, maxWidth: getTooltipTextMaxWidth(position) }, void 0)) : (elementContent)] }), void 0)] }), void 0)] }), void 0));
 };
 
 var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2C || (templateObject_1$2C = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
@@ -3784,7 +3802,7 @@ var PriceLabelV2$1 = function (_a) {
                         text: tooltipText,
                     }, position: tooltipPosition !== null && tooltipPosition !== void 0 ? tooltipPosition : (isDiscount && isMobile
                         ? exports.ComponentPosition.BottomLeft
-                        : exports.ComponentPosition.BottomRight), "data-testid": "tooltip" }, { children: jsxRuntime.jsx(Icon$1, { name: tooltipIcon !== null && tooltipIcon !== void 0 ? tooltipIcon : 'actions/circle_info', fill: theme.colors.shades[500].color, testId: "tooltip-icon" }, void 0) }), void 0) }), void 0)), isClubOffer && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Medium }, { children: clubOffer && (jsxRuntime.jsx(ClubOfferTag, __assign$1({}, clubOffer, { size: exports.ComponentSize.Small, style: {
+                        : exports.ComponentPosition.BottomRight), closeBtnSize: 0.7, "data-testid": "tooltip" }, { children: jsxRuntime.jsx(Icon$1, { name: tooltipIcon !== null && tooltipIcon !== void 0 ? tooltipIcon : 'actions/circle_info', fill: theme.colors.shades[500].color, testId: "tooltip-icon", showTooltipTitle: false }, void 0) }), void 0) }), void 0)), isClubOffer && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Medium }, { children: clubOffer && (jsxRuntime.jsx(ClubOfferTag, __assign$1({}, clubOffer, { size: exports.ComponentSize.Small, style: {
                         borderRadius: '8px',
                         width: '107px',
                         height: '28px',
@@ -4011,7 +4029,7 @@ var SkeletonBox = function (_a) {
 };
 var templateObject_1$2v;
 
-var StyledSvgWrapper = newStyled.svg(templateObject_1$2u || (templateObject_1$2u = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n"])), function (_a) {
+var StyledSvgWrapper = newStyled.svg(templateObject_1$2u || (templateObject_1$2u = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var width = _a.width;
     return width;
 }, function (_a) {
@@ -4026,8 +4044,12 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2u || (templateObject_1$2u
 }, function (_a) {
     var opacity = _a.opacity;
     return opacity && "opacity: ".concat(opacity, ";");
+}, function (_a) {
+    var showTooltipTitle = _a.showTooltipTitle;
+    return !showTooltipTitle &&
+        "\n    use {\n      pointer-events: none;\n    }\n  ";
 });
-var StyledImageWrapper = newStyled.img(templateObject_2$1P || (templateObject_2$1P = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n"])), function (_a) {
+var StyledImageWrapper = newStyled.img(templateObject_2$1P || (templateObject_2$1P = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  flex: none;\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var width = _a.width;
     return width;
 }, function (_a) {
@@ -4039,6 +4061,10 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1P || (templateObject_2$
 }, function (_a) {
     var opacity = _a.opacity;
     return opacity && "opacity: ".concat(opacity, ";");
+}, function (_a) {
+    var showTooltipTitle = _a.showTooltipTitle;
+    return !showTooltipTitle &&
+        "\n    use {\n      pointer-events: none;\n    }\n  ";
 });
 var templateObject_1$2u, templateObject_2$1P;
 
@@ -4119,9 +4145,9 @@ var getIconDimension = function (dimension) {
 };
 
 var UnmemoIconFromExtSource = function (_a) {
-    var height = _a.height, width = _a.width, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, iconURL = _a.iconURL, svgId = _a.svgId, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps", "iconURL", "svgId"]);
-    var _b = React$2.useState(false), error = _b[0], setError = _b[1];
-    var _c = React$2.useState(), localSource = _c[0], setLocalSource = _c[1];
+    var height = _a.height, width = _a.width, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, iconURL = _a.iconURL, svgId = _a.svgId, _b = _a.showTooltipTitle, showTooltipTitle = _b === void 0 ? true : _b, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps", "iconURL", "svgId", "showTooltipTitle"]);
+    var _c = React$2.useState(false), error = _c[0], setError = _c[1];
+    var _d = React$2.useState(), localSource = _d[0], setLocalSource = _d[1];
     React$2.useEffect(function () {
         var fetchIcon = function () { return __awaiter(void 0, void 0, void 0, function () {
             var localSource;
@@ -4155,13 +4181,13 @@ var UnmemoIconFromExtSource = function (_a) {
     if (!fill && !svgProps) {
         return jsxRuntime.jsx(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
     }
-    return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { href: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
+    return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { showTooltipTitle: showTooltipTitle }, { children: [showTooltipTitle && jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { href: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
 };
 var IconFromExtSource = React__default["default"].memo(UnmemoIconFromExtSource);
 
 /* eslint-disable react/forbid-component-props */
 var UnmemoIcon = function (_a) {
-    var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps"]);
+    var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, _c = _a.showTooltipTitle, showTooltipTitle = _c === void 0 ? true : _c, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps", "showTooltipTitle"]);
     var assets = useTheme().assets;
     var newWidth = width && getIconDimension(width);
     var newHeight = height ? getIconDimension(height) : getIconDimension(width);
@@ -4169,9 +4195,9 @@ var UnmemoIcon = function (_a) {
     var svgSplit = name.split('/');
     var svgId = svgSplit[svgSplit.length - 1];
     if (assets.isSameOriginIcons) {
-        return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { href: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
+        return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { showTooltipTitle: showTooltipTitle }, { children: [showTooltipTitle && jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { href: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
     }
-    return (jsxRuntime.jsx(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title }, rest), void 0));
+    return (jsxRuntime.jsx(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title, showTooltipTitle: showTooltipTitle }, rest), void 0));
 };
 var Icon$1 = React__default["default"].memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });