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

package/build/index.d.ts

@@ -1120,14 +1120,21 @@ interface TooltipProps {
     children: React.ReactNode;
     position: ComponentPosition;
     align?: 'start' | 'center' | 'end';
-    text: string;
+    content?: {
+        text: string;
+        color?: string;
+    };
+    backgroundColor?: string;
+    maxWidth?: string;
     header?: {
         title: string;
-        Icon: IconType;
+        titleColor?: string;
+        Icon?: IconType;
+        iconFill?: string;
     };
     onClick?: () => void;
 }
-declare const Tooltip: ({ children, position, text, align, onClick, header, }: TooltipProps) => JSX.Element;
+declare const Tooltip: ({ children, position, content, backgroundColor, align, maxWidth, onClick, header, }: TooltipProps) => JSX.Element;
 
 interface AccordionProps {
     defaultOpen?: boolean;

package/build/index.esm.js

@@ -11616,7 +11616,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',
@@ -11626,6 +11626,7 @@ var TooltipContainer = newStyled.div(function (_a) {
         marginRight: getTooltipMargin(position, ComponentPosition.Left, "".concat(childrenWidth, "px")),
         marginTop: getTooltipMargin(position, ComponentPosition.Top, "-".concat(tooltipHeight, "px")),
         marginBottom: getTooltipMargin(position, ComponentPosition.Bottom, "-".concat(tooltipHeight, "px")),
+        maxWidth: maxWidth ? "".concat(maxWidth) : 'none',
         transition: 'opacity 0.2s ease',
         userSelect: 'none',
         opacity: 0,
@@ -11635,9 +11636,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;
@@ -11662,7 +11666,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 = useState(0), childrenWidth = _c[0], setChildrenWidth = _c[1];
     var childrenRef = createRef();
@@ -11676,7 +11680,11 @@ var Tooltip = function (_a) {
         var ref = tooltipRef.current;
         setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
     }, [tooltipRef]);
-    return (jsxs$1(Wrapper$5, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [jsx$1(IconContainer$5, { children: React__default.createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), jsx$1(TooltipText, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsx$1(TooltipArrowContainer, __assign$1({ position: position, "data-testid": "TooltipArrow" }, { children: jsx$1(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
+    return (jsxs$1(Wrapper$5, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$5, { children: React__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)), jsx$1(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) && (jsx$1(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), jsx$1(TooltipArrowContainer, __assign$1({ position: position, "data-testid": "TooltipArrow" }, { children: jsx$1(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 */