@trafilea/afrodita-components 5.0.0-beta.120 → 5.0.0-beta.122

package/build/index.js

@@ -10758,7 +10758,7 @@ var Image$1 = function Image(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement("img", _extends$1({}, imgAttributes, {
     className: "iiz__img " + (imgAttributes.className || '') + " " + (isZoomed ? 'iiz__img--hidden' : '') + " " + (createSpacer ? 'iiz__img--abs' : ''),
     style: {
-      transition: "linear 0ms opacity " + (isZoomed ? fadeDuration : 0) + "ms, linear " + fadeDuration + "ms visibility " + (isZoomed ? fadeDuration : 0) + "ms"
+      transition: "opacity 0ms linear " + (isZoomed ? fadeDuration : 0) + "ms, visibility 0ms linear " + (isZoomed ? fadeDuration : 0) + "ms"
     },
     src: src,
     width: width,
@@ -10766,7 +10766,7 @@ var Image$1 = function Image(_ref) {
   }))) : /*#__PURE__*/React__default["default"].createElement("img", _extends$1({}, imgAttributes, {
     className: "iiz__img " + (imgAttributes.className || '') + " " + (isZoomed ? 'iiz__img--hidden' : '') + " " + (createSpacer ? 'iiz__img--abs' : ''),
     style: {
-      transition: "linear 0ms opacity " + (isZoomed ? fadeDuration : 0) + "ms, linear " + fadeDuration + "ms visibility " + (isZoomed ? fadeDuration : 0) + "ms"
+      transition: "opacity 0ms linear " + (isZoomed ? fadeDuration : 0) + "ms, visibility 0ms linear " + (isZoomed ? fadeDuration : 0) + "ms"
     },
     src: src,
     width: width,
@@ -10801,7 +10801,7 @@ var ZoomImage = function ZoomImage(_ref) {
     style: {
       top: top,
       left: left,
-      transition: "linear " + fadeDuration + "ms opacity, linear " + fadeDuration + "ms visibility"
+      transition: "opacity " + fadeDuration + "ms linear, visibility " + fadeDuration + "ms linear"
     },
     src: src,
     onLoad: onLoad,
@@ -10815,7 +10815,7 @@ var ZoomImage = function ZoomImage(_ref) {
   }), onClose && /*#__PURE__*/React__default["default"].createElement("button", {
     className: "iiz__btn iiz__close " + (isZoomed ? 'iiz__close--visible' : ''),
     style: {
-      transition: "linear " + fadeDuration + "ms opacity, linear " + fadeDuration + "ms visibility"
+      transition: "opacity " + fadeDuration + "ms linear, visibility " + fadeDuration + "ms linear"
     },
     onClick: onClose,
     "aria-label": "Zoom Out"
@@ -10932,6 +10932,7 @@ var InnerImageZoom = function InnerImageZoom(_ref) {
 
   var handleMouseEnter = function handleMouseEnter(e) {
     setIsActive(true);
+    setIsFading(false);
     zoomType === 'hover' && !isZoomed && handleClick(e);
   };
 
@@ -10944,7 +10945,7 @@ var InnerImageZoom = function InnerImageZoom(_ref) {
   var handleClick = function handleClick(e) {
     if (isZoomed) {
       if (isTouch) {
-        hideCloseButton && handleClose();
+        hideCloseButton && handleClose(e);
       } else {
         !isValidDrag && zoomOut();
       }
@@ -10989,7 +10990,9 @@ var InnerImageZoom = function InnerImageZoom(_ref) {
   };
 
   var handleDragStart = function handleDragStart(e) {
-    imgProps.current.offsets = getOffsets(e.pageX || e.changedTouches[0].pageX, e.pageY || e.changedTouches[0].pageY, zoomImg.current.offsetLeft, zoomImg.current.offsetTop);
+    var pageX = typeof e.pageX === 'number' ? e.pageX : e.changedTouches[0].pageX;
+    var pageY = typeof e.pageY === 'number' ? e.pageY : e.changedTouches[0].pageY;
+    imgProps.current.offsets = getOffsets(pageX, pageY, zoomImg.current.offsetLeft, zoomImg.current.offsetTop);
     setIsDragging(true);
 
     if (!isTouch) {
@@ -11002,8 +11005,10 @@ var InnerImageZoom = function InnerImageZoom(_ref) {
 
   var handleDragMove = React$2.useCallback(function (e) {
     e.stopPropagation();
-    var left = (e.pageX || e.changedTouches[0].pageX) - imgProps.current.offsets.x;
-    var top = (e.pageY || e.changedTouches[0].pageY) - imgProps.current.offsets.y;
+    var pageX = typeof e.pageX === 'number' ? e.pageX : e.changedTouches[0].pageX;
+    var pageY = typeof e.pageY === 'number' ? e.pageY : e.changedTouches[0].pageY;
+    var left = pageX - imgProps.current.offsets.x;
+    var top = pageY - imgProps.current.offsets.y;
     left = Math.max(Math.min(left, 0), (imgProps.current.scaledDimensions.width - imgProps.current.bounds.width) * -1);
     top = Math.max(Math.min(top, 0), (imgProps.current.scaledDimensions.height - imgProps.current.bounds.height) * -1);
     setLeft(left);
@@ -11021,14 +11026,16 @@ var InnerImageZoom = function InnerImageZoom(_ref) {
   };
 
   var handleMouseLeave = function handleMouseLeave(e) {
-    currentMoveType === 'drag' && isZoomed ? handleDragEnd(e) : handleClose();
+    currentMoveType === 'drag' && isZoomed ? handleDragEnd(e) : handleClose(e);
   };
 
-  var handleClose = function handleClose() {
-    if (!isZoomed || isFullscreen || !fadeDuration) {
-      handleFadeOut({}, true);
-    } else {
-      setIsFading(true);
+  var handleClose = function handleClose(e) {
+    if (!(!isTouch && e.target.classList.contains('iiz__close'))) {
+      if (!isZoomed || isFullscreen || !fadeDuration) {
+        handleFadeOut({}, true);
+      } else {
+        setIsFading(true);
+      }
     }
 
     zoomOut();
@@ -12423,7 +12430,7 @@ var KeepMeUpdated = newStyled.h1(templateObject_8$3 || (templateObject_8$3 = __m
 var DeliveryDetails = function (_a) {
     var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
     var theme = useTheme();
-    return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
+    return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
 };
 var templateObject_1$H, templateObject_2$s, templateObject_3$o, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$4, templateObject_8$3;