@trafilea/afrodita-components 5.0.0-beta.177 → 5.0.0-beta.178

package/build/index.js

@@ -11642,7 +11642,7 @@ var Wrapper$5 = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __ma
     return getWrapperFlexDirection(position);
 });
 var TooltipContainer = newStyled.div(function (_a) {
-    var position = _a.position, childrenWidth = _a.childrenWidth, tooltipHeight = _a.tooltipHeight, align = _a.align;
+    var position = _a.position, childrenWidth = _a.childrenWidth, tooltipHeight = _a.tooltipHeight, align = _a.align, maxWidth = _a.maxWidth;
     return ({
         position: 'absolute',
         display: 'flex',
@@ -11652,6 +11652,7 @@ var TooltipContainer = newStyled.div(function (_a) {
         marginRight: getTooltipMargin(position, exports.ComponentPosition.Left, "".concat(childrenWidth, "px")),
         marginTop: getTooltipMargin(position, exports.ComponentPosition.Top, "-".concat(tooltipHeight, "px")),
         marginBottom: getTooltipMargin(position, exports.ComponentPosition.Bottom, "-".concat(tooltipHeight, "px")),
+        maxWidth: maxWidth ? "".concat(maxWidth) : 'none',
         transition: 'opacity 0.2s ease',
         userSelect: 'none',
         opacity: 0,
@@ -11661,9 +11662,12 @@ var TooltipContainer = newStyled.div(function (_a) {
 var getTooltipMargin = function (actual, expected, margin) {
     return actual === expected ? margin : '0';
 };
-var ContentWrapper = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: #fff;\n"], ["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: #fff;\n"])), function (_a) {
+var ContentWrapper = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  z-index: 999;\n"], ["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  z-index: 999;\n"])), function (_a) {
     var borderColor = _a.borderColor;
     return borderColor;
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
 });
 var TooltipArrowContainer = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n  width: 1.25rem;\n  height: 0.75rem;\n  display: flex;\n  transform: rotate(", ");\n  padding: ", ";\n  margin: ", ";\n"], ["\n  width: 1.25rem;\n  height: 0.75rem;\n  display: flex;\n  transform: rotate(", ");\n  padding: ", ";\n  margin: ", ";\n"])), function (_a) {
     var position = _a.position;
@@ -11688,7 +11692,7 @@ var IconContainer$5 = newStyled.div(templateObject_7$7 || (templateObject_7$7 =
 var templateObject_1$11, templateObject_2$J, templateObject_3$A, templateObject_4$p, templateObject_5$f, templateObject_6$c, templateObject_7$7;
 
 var Tooltip = function (_a) {
-    var children = _a.children, position = _a.position, text = _a.text, _b = _a.align, align = _b === void 0 ? 'center' : _b, onClick = _a.onClick, header = _a.header;
+    var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, _b = _a.align, align = _b === void 0 ? 'center' : _b, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header;
     var theme = useTheme();
     var _c = React$2.useState(0), childrenWidth = _c[0], setChildrenWidth = _c[1];
     var childrenRef = React$2.createRef();
@@ -11702,7 +11706,11 @@ var Tooltip = function (_a) {
         var ref = tooltipRef.current;
         setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
     }, [tooltipRef]);
-    return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign$1({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [jsxRuntime.jsx(IconContainer$5, { children: React__default["default"].createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), jsxRuntime.jsx(TooltipText, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsxRuntime.jsx(TooltipArrowContainer, __assign$1({ position: position, "data-testid": "TooltipArrow" }, { children: jsxRuntime.jsx(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
+    return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign$1({ ref: childrenRef }, { 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" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? 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$5, { children: React__default["default"].createElement(header.Icon, {
+                                            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$6, __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, __assign$1({ 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" }, { children: content.text }), void 0))] }), void 0), jsxRuntime.jsx(TooltipArrowContainer, __assign$1({ position: position, "data-testid": "TooltipArrow" }, { children: jsxRuntime.jsx(TooltipArrow, { width: 1.25, height: 0.75, fill: theme.colors.shades.white.color, stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
 };
 
 /* base styles & variants */