@trafilea/afrodita-components 7.25.7 → 7.25.8

package/build/es/components/tooltip/Styled.js

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"tslib";import t from"@emotion/styled";import{ComponentPosition as i}from"../../types/enums.js";import{getWrapperFlexDirection as o,getContainerFlexDirection as r,getTooltipAlignItems as e,getArrowStyles as a}from"./utils.js";var m,l,c,s,d,p,u,g,h=t.div(m||(m=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"],["\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(n){var t=n.position;return o(t)}),(function(n){return n.disableHover?"hidden":"visible"}),(function(n){return n.disableHover?0:1})),f=t.div(l||(l=n(["\n  position: absolute;\n  display: flex;\n  flex-direction: ",";\n  align-items: ",";\n  margin-left: ",";\n  margin-right: ",";\n  margin-top: ",";\n  margin-bottom: ",";\n  max-width: ",";\n  transition: opacity 0.2s ease;\n  userselect: none;\n  opacity: 0;\n  visibility: hidden;\n  ","\n  ","\n\n  ","\n"],["\n  position: absolute;\n  display: flex;\n  flex-direction: ",";\n  align-items: ",";\n  margin-left: ",";\n  margin-right: ",";\n  margin-top: ",";\n  margin-bottom: ",";\n  max-width: ",";\n  transition: opacity 0.2s ease;\n  userselect: none;\n  opacity: 0;\n  visibility: hidden;\n  ","\n  ","\n\n  ","\n"])),(function(n){var t=n.position;return r(t)}),(function(n){var t=n.position,i=n.align;return e(t,i)}),(function(n){var t=n.position,o=n.childrenWidth;return x(t,i.Right,"".concat(o,"px"))}),(function(n){var t=n.position,o=n.childrenWidth;return x(t,i.Left,"".concat(o,"px"))}),(function(n){var t=n.position,o=n.tooltipHeight;return x(t,i.Top,"-".concat(o,"px"))}),(function(n){var t=n.position,o=n.tooltipHeight;return x(t,i.Bottom,"-".concat(o,"px"))}),(function(n){var t=n.maxWidth;return t||"none"}),(function(n){return n.forceVisible&&"\n      opacity: 1;\n      visibility: visible;\n    "}),(function(n){return n.position===i.BottomRight&&"@media (max-width: 768px) {\n      margin-left: -12px;\n    }"}),(function(n){var t=n.position,i=n.borderColor,o=n.backgroundColor;return n.withArrow&&a(t,i,o)})),x=function(n,t,o){return n!==i.BottomLeft&&n!==i.BottomRight||t!==i.Bottom?n===i.BottomRight&&t===i.Right?"-30px":n===i.BottomLeft&&t===i.Left?"-40px":n===t?o:"0":"calc(".concat(o," - 37px)")},b=t.div(c||(c=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  position: relative;\n  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n  z-index: 1;\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  position: relative;\n  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n  z-index: 1;\n"])),(function(n){return n.borderColor}),(function(n){return n.backgroundColor})),v=t.div(s||(s=n(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  text-align: ",";\n  max-width: ",";\n  color: ",";\n"],["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  text-align: ",";\n  max-width: ",";\n  color: ",";\n"])),(function(n){return n.theme.component.autoship.tooltip.text.alignment}),(function(n){var t=n.theme,i=n.maxWidth;return null!=i?i:t.component.autoship.tooltip.text.maxWidth}),(function(n){return n.color})),y=t.div(d||(d=n(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"]))),w=t.p(p||(p=n(["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ",";\n"],["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ",";\n"])),(function(n){return n.color})),z=t.div(u||(u=n(["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"],["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"]))),B=t.button(g||(g=n(["\n  position: absolute;\n  background: none;\n  border: none;\n  cursor: pointer;\n  right: ",";\n  top: 0.25rem;\n  padding: 0px;\n  z-index: 2;\n"],["\n  position: absolute;\n  background: none;\n  border: none;\n  cursor: pointer;\n  right: ",";\n  top: 0.25rem;\n  padding: 0px;\n  z-index: 2;\n"])),(function(n){var t=n.right;return void 0===t?".3rem":t}));export{B as CloseToolTip,b as ContentWrapper,z as IconContainer,w as Title,f as TooltipContainer,v as TooltipText,y as TopSection,h as Wrapper};
+import{__makeTemplateObject as n}from"tslib";import t from"@emotion/styled";import{ComponentPosition as i}from"../../types/enums.js";import{getWrapperFlexDirection as o,getContainerFlexDirection as r,getTooltipAlignItems as e,getArrowStyles as a}from"./utils.js";var m,l,s,c,d,p,u,g,f=t.div(m||(m=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"],["\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(n){var t=n.position;return o(t)}),(function(n){return n.disableHover?"hidden":"visible"}),(function(n){return n.disableHover?0:1})),h=t.div(l||(l=n(["\n  position: absolute;\n  display: flex;\n  flex-direction: ",";\n  align-items: ",";\n  margin-left: ",";\n  margin-right: ",";\n  margin-top: ",";\n  margin-bottom: ",";\n  max-width: ",";\n  transition: opacity 0.2s ease;\n  userselect: none;\n  opacity: 0;\n  visibility: hidden;\n  ","\n  ","\n\n  ","\n  ","\n"],["\n  position: absolute;\n  display: flex;\n  flex-direction: ",";\n  align-items: ",";\n  margin-left: ",";\n  margin-right: ",";\n  margin-top: ",";\n  margin-bottom: ",";\n  max-width: ",";\n  transition: opacity 0.2s ease;\n  userselect: none;\n  opacity: 0;\n  visibility: hidden;\n  ","\n  ","\n\n  ","\n  ","\n"])),(function(n){var t=n.position;return r(t)}),(function(n){var t=n.position,i=n.align;return e(t,i)}),(function(n){var t=n.position,o=n.childrenWidth;return x(t,i.Right,"".concat(o,"px"))}),(function(n){var t=n.position,o=n.childrenWidth;return x(t,i.Left,"".concat(o,"px"))}),(function(n){var t=n.position,o=n.tooltipHeight;return x(t,i.Top,"-".concat(o,"px"))}),(function(n){var t=n.position,o=n.tooltipHeight;return x(t,i.Bottom,"-".concat(o,"px"))}),(function(n){var t=n.maxWidth;return t||"none"}),(function(n){return n.forceVisible&&"\n      opacity: 1;\n      visibility: visible;\n    "}),(function(n){return n.position===i.BottomRight&&"@media (max-width: 768px) {\n      margin-left: -12px;\n    }"}),(function(n){return n.disablePointerEvents&&"pointer-events: none;"}),(function(n){var t=n.position,i=n.borderColor,o=n.backgroundColor;return n.withArrow&&a(t,i,o)})),x=function(n,t,o){return n!==i.BottomLeft&&n!==i.BottomRight||t!==i.Bottom?n===i.BottomRight&&t===i.Right?"-30px":n===i.BottomLeft&&t===i.Left?"-40px":n===t?o:"0":"calc(".concat(o," - 37px)")},b=t.div(s||(s=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  position: relative;\n  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n  z-index: 1;\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  position: relative;\n  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n  z-index: 1;\n"])),(function(n){return n.borderColor}),(function(n){return n.backgroundColor})),v=t.div(c||(c=n(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  text-align: ",";\n  max-width: ",";\n  color: ",";\n"],["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  text-align: ",";\n  max-width: ",";\n  color: ",";\n"])),(function(n){return n.theme.component.autoship.tooltip.text.alignment}),(function(n){var t=n.theme,i=n.maxWidth;return null!=i?i:t.component.autoship.tooltip.text.maxWidth}),(function(n){return n.color})),y=t.div(d||(d=n(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"]))),w=t.p(p||(p=n(["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ",";\n"],["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ",";\n"])),(function(n){return n.color})),z=t.div(u||(u=n(["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"],["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"]))),B=t.button(g||(g=n(["\n  position: absolute;\n  background: none;\n  border: none;\n  cursor: pointer;\n  right: ",";\n  top: 0.25rem;\n  padding: 0px;\n  z-index: 2;\n"],["\n  position: absolute;\n  background: none;\n  border: none;\n  cursor: pointer;\n  right: ",";\n  top: 0.25rem;\n  padding: 0px;\n  z-index: 2;\n"])),(function(n){var t=n.right;return void 0===t?".3rem":t}));export{B as CloseToolTip,b as ContentWrapper,z as IconContainer,w as Title,h as TooltipContainer,v as TooltipText,y as TopSection,f as Wrapper};
 //# sourceMappingURL=Styled.js.map

package/build/es/components/tooltip/Tooltip.js

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as o,__assign as e}from"tslib";import{jsxs as i,jsx as r}from"react/jsx-runtime";import l from"@emotion/styled";import t,{useState as n,useRef as d,useLayoutEffect as c}from"react";import{useTheme as a}from"../../core/theme/Theme.js";import{useWindowDimensions as s}from"../../hooks/WindowDimensions.js";import{Icon as u}from"../icons/index.js";import{Wrapper as v,TooltipContainer as p,CloseToolTip as h,ContentWrapper as f,TopSection as m,IconContainer as g,Title as b,TooltipText as y}from"./Styled.js";import{getCloseIconRight as C,getTooltipTextMaxWidth as k}from"./utils.js";var w,x=0,T=l.div(w||(w=o([""],[""]))),I=function(o){var l,w,I,W=o.children,j=o.position,D=o.content,E=o.elementContent,H=o.backgroundColor,A=o.borderColor,F=o.showCloseIcon,K=o.align,M=void 0===K?"center":K,S=o.maxWidth,B=o.onClick,L=o.header,N=o.withArrow,R=void 0!==N&&N,_=o.closeBtnSize,z=void 0===_?.5:_,V=o.triggerAriaLabel,q=o.triggerRole,G=o.triggerTabIndex,J=o.tooltipId,O=o.enableKeyboardToggle,P=void 0!==O&&O,Q=a(),U=n(0),X=U[0],Y=U[1],Z=d(null),$=d(null),oo=n(0),eo=oo[0],io=oo[1],ro=d(null),lo=n(!1),to=lo[0],no=lo[1],co=n(!1),ao=co[0],so=co[1],uo=d(null);null==uo.current&&(uo.current=null!=J?J:"afrodita-tooltip-".concat(++x));var vo=s().isMobile;c((function(){var o=$.current;Y((null==o?void 0:o.offsetWidth)||0)}),[]),c((function(){var o=ro.current;io((null==o?void 0:o.offsetHeight)||0)}),[]);return i(v,e({ref:Z,position:j,disableHover:to,onMouseEnter:function(){return no(to&&!1)},"data-testid":"TooltipWrapper",onBlur:function(o){var e;if(P){var i=o.relatedTarget;i&&(null===(e=Z.current)||void 0===e?void 0:e.contains(i))||so(!1)}},role:"presentation"},{children:[r(T,e({ref:$,onClick:function(){return to&&no(!1)},onKeyDown:function(o){"Enter"===o.key&&to&&no(!1),function(o){if(P)"Enter"===o.key||" "===o.key?(o.preventDefault(),to&&no(!1),so((function(o){return!o}))):"Escape"===o.key&&(o.preventDefault(),so(!1))}(o)},role:q||"button",tabIndex:null!=G?G:0,"aria-label":V,"aria-describedby":ao&&null!==(l=uo.current)&&void 0!==l?l:void 0,"aria-expanded":P?ao:void 0},{children:W}),void 0),i(p,e({position:j,align:M,maxWidth:S,childrenWidth:X,tooltipHeight:eo,ref:ro,onClick:B,"data-testid":"TooltipContainer",className:"tooltip-container ".concat(to?"hidden":""),borderColor:A||Q.colors.shades[200].color,backgroundColor:H||Q.colors.shades.white.color,withArrow:R,"data-position":j,forceVisible:ao,role:"tooltip",id:null!==(w=uo.current)&&void 0!==w?w:void 0,"aria-hidden":P?!ao:void 0,onKeyDown:function(o){var e;P&&"Escape"===o.key&&(o.preventDefault(),so(!1),null===(e=$.current)||void 0===e||e.focus())}},{children:[(F||vo)&&r(h,e({right:C(j,null==L?void 0:L.iconRight),onClick:function(){no(!0),so(!1)}},{children:r(u.Actions.Close,{width:z,height:z,fill:null!==(I=null==L?void 0:L.iconFill)&&void 0!==I?I:Q.colors.pallete.secondary.color},void 0)}),void 0),i(f,e({className:"tooltip-wrapper",borderColor:A||Q.colors.shades[200].color,backgroundColor:null!=H?H:Q.colors.shades.white.color},{children:[L&&i(m,e({"data-testid":"TooltipHeader"},{children:[(null==L?void 0:L.Icon)&&r(g,{children:t.createElement(L.Icon,{testId:"HeaderIcon",fill:(null==L?void 0:L.iconFill)?null==L?void 0:L.iconFill:Q.colors.pallete.secondary.color})},void 0),r(b,e({color:(null==L?void 0:L.titleColor)?null==L?void 0:L.titleColor:Q.colors.pallete.secondary.color},{children:L.title}),void 0)]}),void 0),D&&(null==D?void 0:D.text)?r(y,{color:(null==D?void 0:D.color)?null==D?void 0:D.color:Q.colors.pallete.secondary.color,"data-testid":"TooltipText",dangerouslySetInnerHTML:{__html:D.text},maxWidth:k(j)},void 0):E]}),void 0)]}),void 0)]}),void 0)};export{I as Tooltip};
+import{__makeTemplateObject as o,__assign as i}from"tslib";import{jsxs as e,jsx as l}from"react/jsx-runtime";import r from"@emotion/styled";import t,{useState as n,useRef as d,useLayoutEffect as c}from"react";import{useTheme as a}from"../../core/theme/Theme.js";import{useWindowDimensions as s}from"../../hooks/WindowDimensions.js";import{Icon as u}from"../icons/index.js";import{Wrapper as v,TooltipContainer as p,CloseToolTip as f,ContentWrapper as h,TopSection as m,IconContainer as b,Title as g,TooltipText as y}from"./Styled.js";import{getCloseIconRight as C,getTooltipTextMaxWidth as k}from"./utils.js";var w,x=0,T=r.div(w||(w=o([""],[""]))),I=function(o){var r,w,I,E=o.children,W=o.position,j=o.content,D=o.elementContent,H=o.backgroundColor,A=o.borderColor,M=o.showCloseIcon,F=o.align,K=void 0===F?"center":F,P=o.maxWidth,S=o.onClick,B=o.header,L=o.withArrow,N=void 0!==L&&L,R=o.closeBtnSize,_=void 0===R?.5:R,z=o.triggerAriaLabel,O=o.triggerRole,V=o.triggerTabIndex,q=o.tooltipId,G=o.enableKeyboardToggle,J=void 0!==G&&G,Q=o.closableOnMobileTap,U=void 0!==Q&&Q,X=a(),Y=n(0),Z=Y[0],$=Y[1],oo=d(null),io=d(null),eo=n(0),lo=eo[0],ro=eo[1],to=d(null),no=n(!1),co=no[0],ao=no[1],so=n(!1),uo=so[0],vo=so[1],po=d(null);null==po.current&&(po.current=null!=q?q:"afrodita-tooltip-".concat(++x));var fo=s().isMobile;c((function(){var o=io.current;$((null==o?void 0:o.offsetWidth)||0)}),[]),c((function(){var o=to.current;ro((null==o?void 0:o.offsetHeight)||0)}),[]);return e(v,i({ref:oo,position:W,disableHover:co,onMouseEnter:function(){return ao(co&&!1)},"data-testid":"TooltipWrapper",onBlur:function(o){var i;if(J){var e=o.relatedTarget;e&&(null===(i=oo.current)||void 0===i?void 0:i.contains(e))||vo(!1)}},role:"presentation"},{children:[l(T,i({ref:io,onClick:function(){if(U)return ao(!1),void vo((function(o){return!o}));co&&ao(!1)},onKeyDown:function(o){"Enter"===o.key&&co&&ao(!1),function(o){if(J)"Enter"===o.key||" "===o.key?(o.preventDefault(),co&&ao(!1),vo((function(o){return!o}))):"Escape"===o.key&&(o.preventDefault(),vo(!1))}(o)},role:O||"button",tabIndex:null!=V?V:0,"aria-label":z,"aria-describedby":uo&&null!==(r=po.current)&&void 0!==r?r:void 0,"aria-expanded":J?uo:void 0},{children:E}),void 0),e(p,i({position:W,align:K,maxWidth:P,childrenWidth:Z,tooltipHeight:lo,ref:to,onClick:function(o){null==S||S(o),U&&(o.stopPropagation(),ao(!0),vo(!1))},disablePointerEvents:U&&!uo,"data-testid":"TooltipContainer",className:"tooltip-container ".concat(co?"hidden":""),borderColor:A||X.colors.shades[200].color,backgroundColor:H||X.colors.shades.white.color,withArrow:N,"data-position":W,forceVisible:uo,role:"tooltip",id:null!==(w=po.current)&&void 0!==w?w:void 0,"aria-hidden":J?!uo:void 0,onKeyDown:function(o){var i;J&&"Escape"===o.key&&(o.preventDefault(),vo(!1),null===(i=io.current)||void 0===i||i.focus())}},{children:[(M||fo)&&l(f,i({right:C(W,null==B?void 0:B.iconRight),onClick:function(o){U&&o.stopPropagation(),ao(!0),vo(!1)}},{children:l(u.Actions.Close,{width:_,height:_,fill:null!==(I=null==B?void 0:B.iconFill)&&void 0!==I?I:X.colors.pallete.secondary.color},void 0)}),void 0),e(h,i({className:"tooltip-wrapper",borderColor:A||X.colors.shades[200].color,backgroundColor:null!=H?H:X.colors.shades.white.color},{children:[B&&e(m,i({"data-testid":"TooltipHeader"},{children:[(null==B?void 0:B.Icon)&&l(b,{children:t.createElement(B.Icon,{testId:"HeaderIcon",fill:(null==B?void 0:B.iconFill)?null==B?void 0:B.iconFill:X.colors.pallete.secondary.color})},void 0),l(g,i({color:(null==B?void 0:B.titleColor)?null==B?void 0:B.titleColor:X.colors.pallete.secondary.color},{children:B.title}),void 0)]}),void 0),j&&(null==j?void 0:j.text)?l(y,{color:(null==j?void 0:j.color)?null==j?void 0:j.color:X.colors.pallete.secondary.color,"data-testid":"TooltipText",dangerouslySetInnerHTML:{__html:j.text},maxWidth:k(W)},void 0):D]}),void 0)]}),void 0)]}),void 0)};export{I as Tooltip};
 //# sourceMappingURL=Tooltip.js.map

package/build/index.d.ts

@@ -4413,7 +4413,7 @@ interface TooltipProps {
         iconFill?: string;
         iconRight?: string;
     };
-    onClick?: () => void;
+    onClick?: (e: react__default.MouseEvent<HTMLDivElement>) => void;
     withArrow?: boolean;
     closeBtnSize?: number;
     triggerAriaLabel?: string;
@@ -4421,8 +4421,9 @@ interface TooltipProps {
     triggerTabIndex?: number;
     tooltipId?: string;
     enableKeyboardToggle?: boolean;
+    closableOnMobileTap?: boolean;
 }
-declare const Tooltip: ({ children, position, content, elementContent, backgroundColor, borderColor, showCloseIcon, align, maxWidth, onClick, header, withArrow, closeBtnSize, triggerAriaLabel, triggerRole, triggerTabIndex, tooltipId, enableKeyboardToggle, }: TooltipProps) => JSX.Element;
+declare const Tooltip: ({ children, position, content, elementContent, backgroundColor, borderColor, showCloseIcon, align, maxWidth, onClick, header, withArrow, closeBtnSize, triggerAriaLabel, triggerRole, triggerTabIndex, tooltipId, enableKeyboardToggle, closableOnMobileTap, }: TooltipProps) => JSX.Element;
 
 declare type SubtotalOption = {
     label: string;

package/build/lib/components/tooltip/Styled.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("tslib"),t=require("@emotion/styled"),e=require("../../types/enums.js"),o=require("./utils.js");function i(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var r,a,l,p,m,s,c,u,d=i(t),g=d.default.div(r||(r=n.__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(n){var t=n.position;return o.getWrapperFlexDirection(t)}),(function(n){return n.disableHover?"hidden":"visible"}),(function(n){return n.disableHover?0:1})),f=d.default.div(a||(a=n.__makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-direction: ",";\n  align-items: ",";\n  margin-left: ",";\n  margin-right: ",";\n  margin-top: ",";\n  margin-bottom: ",";\n  max-width: ",";\n  transition: opacity 0.2s ease;\n  userselect: none;\n  opacity: 0;\n  visibility: hidden;\n  ","\n  ","\n\n  ","\n"],["\n  position: absolute;\n  display: flex;\n  flex-direction: ",";\n  align-items: ",";\n  margin-left: ",";\n  margin-right: ",";\n  margin-top: ",";\n  margin-bottom: ",";\n  max-width: ",";\n  transition: opacity 0.2s ease;\n  userselect: none;\n  opacity: 0;\n  visibility: hidden;\n  ","\n  ","\n\n  ","\n"])),(function(n){var t=n.position;return o.getContainerFlexDirection(t)}),(function(n){var t=n.position,e=n.align;return o.getTooltipAlignItems(t,e)}),(function(n){var t=n.position,o=n.childrenWidth;return x(t,e.ComponentPosition.Right,"".concat(o,"px"))}),(function(n){var t=n.position,o=n.childrenWidth;return x(t,e.ComponentPosition.Left,"".concat(o,"px"))}),(function(n){var t=n.position,o=n.tooltipHeight;return x(t,e.ComponentPosition.Top,"-".concat(o,"px"))}),(function(n){var t=n.position,o=n.tooltipHeight;return x(t,e.ComponentPosition.Bottom,"-".concat(o,"px"))}),(function(n){var t=n.maxWidth;return t||"none"}),(function(n){return n.forceVisible&&"\n      opacity: 1;\n      visibility: visible;\n    "}),(function(n){return n.position===e.ComponentPosition.BottomRight&&"@media (max-width: 768px) {\n      margin-left: -12px;\n    }"}),(function(n){var t=n.position,e=n.borderColor,i=n.backgroundColor;return n.withArrow&&o.getArrowStyles(t,e,i)})),x=function(n,t,o){return n!==e.ComponentPosition.BottomLeft&&n!==e.ComponentPosition.BottomRight||t!==e.ComponentPosition.Bottom?n===e.ComponentPosition.BottomRight&&t===e.ComponentPosition.Right?"-30px":n===e.ComponentPosition.BottomLeft&&t===e.ComponentPosition.Left?"-40px":n===t?o:"0":"calc(".concat(o," - 37px)")},h=d.default.div(l||(l=n.__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  position: relative;\n  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n  z-index: 1;\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  position: relative;\n  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n  z-index: 1;\n"])),(function(n){return n.borderColor}),(function(n){return n.backgroundColor})),b=d.default.div(p||(p=n.__makeTemplateObject(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  text-align: ",";\n  max-width: ",";\n  color: ",";\n"],["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  text-align: ",";\n  max-width: ",";\n  color: ",";\n"])),(function(n){return n.theme.component.autoship.tooltip.text.alignment}),(function(n){var t=n.theme,e=n.maxWidth;return null!=e?e:t.component.autoship.tooltip.text.maxWidth}),(function(n){return n.color})),v=d.default.div(m||(m=n.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"]))),y=d.default.p(s||(s=n.__makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ",";\n"],["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ",";\n"])),(function(n){return n.color})),C=d.default.div(c||(c=n.__makeTemplateObject(["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"],["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"]))),_=d.default.button(u||(u=n.__makeTemplateObject(["\n  position: absolute;\n  background: none;\n  border: none;\n  cursor: pointer;\n  right: ",";\n  top: 0.25rem;\n  padding: 0px;\n  z-index: 2;\n"],["\n  position: absolute;\n  background: none;\n  border: none;\n  cursor: pointer;\n  right: ",";\n  top: 0.25rem;\n  padding: 0px;\n  z-index: 2;\n"])),(function(n){var t=n.right;return void 0===t?".3rem":t}));exports.CloseToolTip=_,exports.ContentWrapper=h,exports.IconContainer=C,exports.Title=y,exports.TooltipContainer=f,exports.TooltipText=b,exports.TopSection=v,exports.Wrapper=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("tslib"),t=require("@emotion/styled"),e=require("../../types/enums.js"),o=require("./utils.js");function i(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var r,a,l,p,m,s,c,u,d=i(t),g=d.default.div(r||(r=n.__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(n){var t=n.position;return o.getWrapperFlexDirection(t)}),(function(n){return n.disableHover?"hidden":"visible"}),(function(n){return n.disableHover?0:1})),f=d.default.div(a||(a=n.__makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-direction: ",";\n  align-items: ",";\n  margin-left: ",";\n  margin-right: ",";\n  margin-top: ",";\n  margin-bottom: ",";\n  max-width: ",";\n  transition: opacity 0.2s ease;\n  userselect: none;\n  opacity: 0;\n  visibility: hidden;\n  ","\n  ","\n\n  ","\n  ","\n"],["\n  position: absolute;\n  display: flex;\n  flex-direction: ",";\n  align-items: ",";\n  margin-left: ",";\n  margin-right: ",";\n  margin-top: ",";\n  margin-bottom: ",";\n  max-width: ",";\n  transition: opacity 0.2s ease;\n  userselect: none;\n  opacity: 0;\n  visibility: hidden;\n  ","\n  ","\n\n  ","\n  ","\n"])),(function(n){var t=n.position;return o.getContainerFlexDirection(t)}),(function(n){var t=n.position,e=n.align;return o.getTooltipAlignItems(t,e)}),(function(n){var t=n.position,o=n.childrenWidth;return x(t,e.ComponentPosition.Right,"".concat(o,"px"))}),(function(n){var t=n.position,o=n.childrenWidth;return x(t,e.ComponentPosition.Left,"".concat(o,"px"))}),(function(n){var t=n.position,o=n.tooltipHeight;return x(t,e.ComponentPosition.Top,"-".concat(o,"px"))}),(function(n){var t=n.position,o=n.tooltipHeight;return x(t,e.ComponentPosition.Bottom,"-".concat(o,"px"))}),(function(n){var t=n.maxWidth;return t||"none"}),(function(n){return n.forceVisible&&"\n      opacity: 1;\n      visibility: visible;\n    "}),(function(n){return n.position===e.ComponentPosition.BottomRight&&"@media (max-width: 768px) {\n      margin-left: -12px;\n    }"}),(function(n){return n.disablePointerEvents&&"pointer-events: none;"}),(function(n){var t=n.position,e=n.borderColor,i=n.backgroundColor;return n.withArrow&&o.getArrowStyles(t,e,i)})),x=function(n,t,o){return n!==e.ComponentPosition.BottomLeft&&n!==e.ComponentPosition.BottomRight||t!==e.ComponentPosition.Bottom?n===e.ComponentPosition.BottomRight&&t===e.ComponentPosition.Right?"-30px":n===e.ComponentPosition.BottomLeft&&t===e.ComponentPosition.Left?"-40px":n===t?o:"0":"calc(".concat(o," - 37px)")},h=d.default.div(l||(l=n.__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  position: relative;\n  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n  z-index: 1;\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  position: relative;\n  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n  z-index: 1;\n"])),(function(n){return n.borderColor}),(function(n){return n.backgroundColor})),b=d.default.div(p||(p=n.__makeTemplateObject(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  text-align: ",";\n  max-width: ",";\n  color: ",";\n"],["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  text-align: ",";\n  max-width: ",";\n  color: ",";\n"])),(function(n){return n.theme.component.autoship.tooltip.text.alignment}),(function(n){var t=n.theme,e=n.maxWidth;return null!=e?e:t.component.autoship.tooltip.text.maxWidth}),(function(n){return n.color})),v=d.default.div(m||(m=n.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"]))),y=d.default.p(s||(s=n.__makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ",";\n"],["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ",";\n"])),(function(n){return n.color})),C=d.default.div(c||(c=n.__makeTemplateObject(["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"],["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"]))),_=d.default.button(u||(u=n.__makeTemplateObject(["\n  position: absolute;\n  background: none;\n  border: none;\n  cursor: pointer;\n  right: ",";\n  top: 0.25rem;\n  padding: 0px;\n  z-index: 2;\n"],["\n  position: absolute;\n  background: none;\n  border: none;\n  cursor: pointer;\n  right: ",";\n  top: 0.25rem;\n  padding: 0px;\n  z-index: 2;\n"])),(function(n){var t=n.right;return void 0===t?".3rem":t}));exports.CloseToolTip=_,exports.ContentWrapper=h,exports.IconContainer=C,exports.Title=y,exports.TooltipContainer=f,exports.TooltipText=b,exports.TopSection=v,exports.Wrapper=g;
 //# sourceMappingURL=Styled.js.map

package/build/lib/components/tooltip/Tooltip.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),o=require("react/jsx-runtime"),i=require("@emotion/styled"),t=require("react"),l=require("../../core/theme/Theme.js"),r=require("../../hooks/WindowDimensions.js"),n=require("../icons/index.js"),s=require("./Styled.js"),a=require("./utils.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c,u=d(i),v=d(t),p=0,f=u.default.div(c||(c=e.__makeTemplateObject([""],[""])));exports.Tooltip=function(i){var d,c,u,h=i.children,g=i.position,x=i.content,b=i.elementContent,T=i.backgroundColor,C=i.borderColor,y=i.showCloseIcon,_=i.align,j=void 0===_?"center":_,m=i.maxWidth,k=i.onClick,w=i.header,I=i.withArrow,W=void 0!==I&&I,q=i.closeBtnSize,E=void 0===q?.5:q,S=i.triggerAriaLabel,D=i.triggerRole,R=i.triggerTabIndex,H=i.tooltipId,M=i.enableKeyboardToggle,A=void 0!==M&&M,L=l.useTheme(),F=t.useState(0),K=F[0],B=F[1],N=t.useRef(null),O=t.useRef(null),z=t.useState(0),P=z[0],V=z[1],G=t.useRef(null),J=t.useState(!1),Q=J[0],U=J[1],X=t.useState(!1),Y=X[0],Z=X[1],$=t.useRef(null);null==$.current&&($.current=null!=H?H:"afrodita-tooltip-".concat(++p));var ee=r.useWindowDimensions().isMobile;t.useLayoutEffect((function(){var e=O.current;B((null==e?void 0:e.offsetWidth)||0)}),[]),t.useLayoutEffect((function(){var e=G.current;V((null==e?void 0:e.offsetHeight)||0)}),[]);return o.jsxs(s.Wrapper,e.__assign({ref:N,position:g,disableHover:Q,onMouseEnter:function(){return U(Q&&!1)},"data-testid":"TooltipWrapper",onBlur:function(e){var o;if(A){var i=e.relatedTarget;i&&(null===(o=N.current)||void 0===o?void 0:o.contains(i))||Z(!1)}},role:"presentation"},{children:[o.jsx(f,e.__assign({ref:O,onClick:function(){return Q&&U(!1)},onKeyDown:function(e){"Enter"===e.key&&Q&&U(!1),function(e){if(A)"Enter"===e.key||" "===e.key?(e.preventDefault(),Q&&U(!1),Z((function(e){return!e}))):"Escape"===e.key&&(e.preventDefault(),Z(!1))}(e)},role:D||"button",tabIndex:null!=R?R:0,"aria-label":S,"aria-describedby":Y&&null!==(d=$.current)&&void 0!==d?d:void 0,"aria-expanded":A?Y:void 0},{children:h}),void 0),o.jsxs(s.TooltipContainer,e.__assign({position:g,align:j,maxWidth:m,childrenWidth:K,tooltipHeight:P,ref:G,onClick:k,"data-testid":"TooltipContainer",className:"tooltip-container ".concat(Q?"hidden":""),borderColor:C||L.colors.shades[200].color,backgroundColor:T||L.colors.shades.white.color,withArrow:W,"data-position":g,forceVisible:Y,role:"tooltip",id:null!==(c=$.current)&&void 0!==c?c:void 0,"aria-hidden":A?!Y:void 0,onKeyDown:function(e){var o;A&&"Escape"===e.key&&(e.preventDefault(),Z(!1),null===(o=O.current)||void 0===o||o.focus())}},{children:[(y||ee)&&o.jsx(s.CloseToolTip,e.__assign({right:a.getCloseIconRight(g,null==w?void 0:w.iconRight),onClick:function(){U(!0),Z(!1)}},{children:o.jsx(n.Icon.Actions.Close,{width:E,height:E,fill:null!==(u=null==w?void 0:w.iconFill)&&void 0!==u?u:L.colors.pallete.secondary.color},void 0)}),void 0),o.jsxs(s.ContentWrapper,e.__assign({className:"tooltip-wrapper",borderColor:C||L.colors.shades[200].color,backgroundColor:null!=T?T:L.colors.shades.white.color},{children:[w&&o.jsxs(s.TopSection,e.__assign({"data-testid":"TooltipHeader"},{children:[(null==w?void 0:w.Icon)&&o.jsx(s.IconContainer,{children:v.default.createElement(w.Icon,{testId:"HeaderIcon",fill:(null==w?void 0:w.iconFill)?null==w?void 0:w.iconFill:L.colors.pallete.secondary.color})},void 0),o.jsx(s.Title,e.__assign({color:(null==w?void 0:w.titleColor)?null==w?void 0:w.titleColor:L.colors.pallete.secondary.color},{children:w.title}),void 0)]}),void 0),x&&(null==x?void 0:x.text)?o.jsx(s.TooltipText,{color:(null==x?void 0:x.color)?null==x?void 0:x.color:L.colors.pallete.secondary.color,"data-testid":"TooltipText",dangerouslySetInnerHTML:{__html:x.text},maxWidth:a.getTooltipTextMaxWidth(g)},void 0):b]}),void 0)]}),void 0)]}),void 0)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("tslib"),e=require("react/jsx-runtime"),i=require("@emotion/styled"),t=require("react"),n=require("../../core/theme/Theme.js"),l=require("../../hooks/WindowDimensions.js"),r=require("../icons/index.js"),s=require("./Styled.js"),a=require("./utils.js");function d(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var c,u=d(i),v=d(t),p=0,f=u.default.div(c||(c=o.__makeTemplateObject([""],[""])));exports.Tooltip=function(i){var d,c,u,h=i.children,g=i.position,x=i.content,b=i.elementContent,T=i.backgroundColor,C=i.borderColor,y=i.showCloseIcon,_=i.align,j=void 0===_?"center":_,m=i.maxWidth,k=i.onClick,w=i.header,I=i.withArrow,W=void 0!==I&&I,q=i.closeBtnSize,E=void 0===q?.5:q,S=i.triggerAriaLabel,D=i.triggerRole,R=i.triggerTabIndex,H=i.tooltipId,M=i.enableKeyboardToggle,A=void 0!==M&&M,L=i.closableOnMobileTap,P=void 0!==L&&L,F=n.useTheme(),K=t.useState(0),O=K[0],B=K[1],N=t.useRef(null),z=t.useRef(null),V=t.useState(0),G=V[0],J=V[1],Q=t.useRef(null),U=t.useState(!1),X=U[0],Y=U[1],Z=t.useState(!1),$=Z[0],oo=Z[1],eo=t.useRef(null);null==eo.current&&(eo.current=null!=H?H:"afrodita-tooltip-".concat(++p));var io=l.useWindowDimensions().isMobile;t.useLayoutEffect((function(){var o=z.current;B((null==o?void 0:o.offsetWidth)||0)}),[]),t.useLayoutEffect((function(){var o=Q.current;J((null==o?void 0:o.offsetHeight)||0)}),[]);return e.jsxs(s.Wrapper,o.__assign({ref:N,position:g,disableHover:X,onMouseEnter:function(){return Y(X&&!1)},"data-testid":"TooltipWrapper",onBlur:function(o){var e;if(A){var i=o.relatedTarget;i&&(null===(e=N.current)||void 0===e?void 0:e.contains(i))||oo(!1)}},role:"presentation"},{children:[e.jsx(f,o.__assign({ref:z,onClick:function(){if(P)return Y(!1),void oo((function(o){return!o}));X&&Y(!1)},onKeyDown:function(o){"Enter"===o.key&&X&&Y(!1),function(o){if(A)"Enter"===o.key||" "===o.key?(o.preventDefault(),X&&Y(!1),oo((function(o){return!o}))):"Escape"===o.key&&(o.preventDefault(),oo(!1))}(o)},role:D||"button",tabIndex:null!=R?R:0,"aria-label":S,"aria-describedby":$&&null!==(d=eo.current)&&void 0!==d?d:void 0,"aria-expanded":A?$:void 0},{children:h}),void 0),e.jsxs(s.TooltipContainer,o.__assign({position:g,align:j,maxWidth:m,childrenWidth:O,tooltipHeight:G,ref:Q,onClick:function(o){null==k||k(o),P&&(o.stopPropagation(),Y(!0),oo(!1))},disablePointerEvents:P&&!$,"data-testid":"TooltipContainer",className:"tooltip-container ".concat(X?"hidden":""),borderColor:C||F.colors.shades[200].color,backgroundColor:T||F.colors.shades.white.color,withArrow:W,"data-position":g,forceVisible:$,role:"tooltip",id:null!==(c=eo.current)&&void 0!==c?c:void 0,"aria-hidden":A?!$:void 0,onKeyDown:function(o){var e;A&&"Escape"===o.key&&(o.preventDefault(),oo(!1),null===(e=z.current)||void 0===e||e.focus())}},{children:[(y||io)&&e.jsx(s.CloseToolTip,o.__assign({right:a.getCloseIconRight(g,null==w?void 0:w.iconRight),onClick:function(o){P&&o.stopPropagation(),Y(!0),oo(!1)}},{children:e.jsx(r.Icon.Actions.Close,{width:E,height:E,fill:null!==(u=null==w?void 0:w.iconFill)&&void 0!==u?u:F.colors.pallete.secondary.color},void 0)}),void 0),e.jsxs(s.ContentWrapper,o.__assign({className:"tooltip-wrapper",borderColor:C||F.colors.shades[200].color,backgroundColor:null!=T?T:F.colors.shades.white.color},{children:[w&&e.jsxs(s.TopSection,o.__assign({"data-testid":"TooltipHeader"},{children:[(null==w?void 0:w.Icon)&&e.jsx(s.IconContainer,{children:v.default.createElement(w.Icon,{testId:"HeaderIcon",fill:(null==w?void 0:w.iconFill)?null==w?void 0:w.iconFill:F.colors.pallete.secondary.color})},void 0),e.jsx(s.Title,o.__assign({color:(null==w?void 0:w.titleColor)?null==w?void 0:w.titleColor:F.colors.pallete.secondary.color},{children:w.title}),void 0)]}),void 0),x&&(null==x?void 0:x.text)?e.jsx(s.TooltipText,{color:(null==x?void 0:x.color)?null==x?void 0:x.color:F.colors.pallete.secondary.color,"data-testid":"TooltipText",dangerouslySetInnerHTML:{__html:x.text},maxWidth:a.getTooltipTextMaxWidth(g)},void 0):b]}),void 0)]}),void 0)]}),void 0)};
 //# sourceMappingURL=Tooltip.js.map

package/package.json

@@ -3,7 +3,7 @@
   "description": "Trafilea's Design System",
   "author": "Trafilea",
   "repository": "https://github.com/trafilea/afrodita-components",
-  "version": "7.25.7",
+  "version": "7.25.8",
   "private": false,
   "main": "build/lib/index.js",
   "style": "build/es/index.css",