@meduza/ui-kit-2 0.1.13 → 0.1.15

package/dist/ui-kit-2.cjs.development.js

@@ -611,7 +611,7 @@ var Footnote = function Footnote(_ref) {
   }, children));
 };
 
-var styles$7 = {"root":"DotsOnImage-module_root__2XP3Q","dot":"DotsOnImage-module_dot__H1wua","isActive":"DotsOnImage-module_isActive__3hh31","popover":"DotsOnImage-module_popover__35Cpj","isRight":"DotsOnImage-module_isRight__2RsJe","isTop":"DotsOnImage-module_isTop__3zmSK","isLeft":"DotsOnImage-module_isLeft__3quc9","isBottom":"DotsOnImage-module_isBottom__3Nk1T","popoverTitle":"DotsOnImage-module_popoverTitle__343d8","popoverBody":"DotsOnImage-module_popoverBody__2MSn7","popoverText":"DotsOnImage-module_popoverText__3v02w","dismiss":"DotsOnImage-module_dismiss__1EWXd"};
+var styles$7 = {"root":"DotsOnImage-module_root__2XP3Q","isVisible":"DotsOnImage-module_isVisible__Wqqqt","dot":"DotsOnImage-module_dot__H1wua","show":"DotsOnImage-module_show__2TMBv","isActive":"DotsOnImage-module_isActive__3hh31","popover":"DotsOnImage-module_popover__35Cpj","isRight":"DotsOnImage-module_isRight__2RsJe","isTop":"DotsOnImage-module_isTop__3zmSK","isLeft":"DotsOnImage-module_isLeft__3quc9","isBottom":"DotsOnImage-module_isBottom__3Nk1T"};
 
 var DotsOnImage = function DotsOnImage(_ref) {
   var _ref$block = _ref.block,
@@ -622,6 +622,15 @@ var DotsOnImage = function DotsOnImage(_ref) {
       display = _ref$block.display,
       dots = _ref$block.dots;
 
+  var _useInView = reactIntersectionObserver.useInView({
+    threshold: 0.5
+  }),
+      ref = _useInView[0],
+      inView = _useInView[1],
+      entry = _useInView[2];
+
+  var container = React.useRef(null);
+
   var _useState = React.useState({
     title: null,
     body: null,
@@ -631,6 +640,42 @@ var DotsOnImage = function DotsOnImage(_ref) {
       popover = _useState[0],
       setPopover = _useState[1];
 
+  var _useState2 = React.useState(false),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  React.useEffect(function () {
+    if (entry && entry.boundingClientRect && entry.boundingClientRect.y < 0) {
+      setVisible(true);
+    }
+  }, [entry]);
+  React.useEffect(function () {
+    if (inView) {
+      setVisible(true);
+    }
+  }, [inView]);
+  React.useEffect(function () {
+    if (popover.id) {
+      document.addEventListener('click', handleClickOutside);
+    } else {
+      document.removeEventListener('click', handleClickOutside);
+    }
+
+    return function () {
+      return document.removeEventListener('click', handleClickOutside);
+    };
+  }, [popover]);
+
+  var handleClickOutside = function handleClickOutside(event) {
+    var path = event.composedPath();
+
+    if (path.indexOf(container.current) === -1) {
+      setPopover({
+        show: false
+      });
+    }
+  };
+
   var handleDotClick = function handleDotClick(dot) {
     var shouldShow = dot.id !== popover.id;
     var side = dot.position.x > 50 ? 'isLeft' : 'isRight';
@@ -651,10 +696,21 @@ var DotsOnImage = function DotsOnImage(_ref) {
   };
 
   return React__default.createElement("div", {
+    className: makeClassName([[styles$7.root, true], [styles$7.isVisible, visible]]),
     "data-testid": "dots-on-image",
-    className: styles$7.root
-  }, React__default.createElement("div", {
-    className: styles$7.dots
+    ref: ref
+  }, React__default.createElement(Image, {
+    optimized: optimized,
+    width: width,
+    height: height,
+    alt: credit,
+    display: display,
+    fullscreen: {
+      mobile: false,
+      desktop: false
+    }
+  }), React__default.createElement("div", {
+    ref: container
   }, dots.map(function (dot) {
     return React__default.createElement("button", {
       className: makeClassName([[styles$7.dot, true], [styles$7.isActive, dot.id === popover.id]]),
@@ -673,19 +729,7 @@ var DotsOnImage = function DotsOnImage(_ref) {
         __html: dot.icon.svg_string
       }
     }), dot.icon.type === 'number' && dot.icon.number);
-  })), React__default.createElement("div", {
-    className: styles$7.image
-  }, React__default.createElement(Image, {
-    optimized: optimized,
-    width: width,
-    height: height,
-    alt: credit,
-    display: display,
-    fullscreen: {
-      mobile: false,
-      desktop: false
-    }
-  })), popover.show && React__default.createElement(React__default.Fragment, null, viewportSize().width >= MediaQuerySizes.LANDSCAPE_TABLET ? React__default.createElement("div", {
+  }), popover.show && React__default.createElement(React__default.Fragment, null, viewportSize().width >= MediaQuerySizes.LANDSCAPE_TABLET ? React__default.createElement("div", {
     className: makeClassName([[styles$7.popover, true], [styles$7[popover.side], !!popover.side], [styles$7[popover.align], !!popover.align]]),
     style: popover.style
   }, React__default.createElement(Footnote, {
@@ -694,7 +738,7 @@ var DotsOnImage = function DotsOnImage(_ref) {
         show: false
       });
     }
-  }, React__default.createElement("h3", null, popover.title), React__default.createElement("div", {
+  }, popover.title && React__default.createElement("h3", null, popover.title), React__default.createElement("div", {
     dangerouslySetInnerHTML: {
       __html: popover.body
     }
@@ -704,11 +748,11 @@ var DotsOnImage = function DotsOnImage(_ref) {
         show: false
       });
     }
-  }, React__default.createElement("h3", null, popover.title), React__default.createElement("div", {
+  }, popover.title && React__default.createElement("h3", null, popover.title), React__default.createElement("div", {
     dangerouslySetInnerHTML: {
       __html: popover.body
     }
-  }))));
+  })))));
 };
 
 var makeStyleContext = function makeStyleContext(classNames, styleContext, styles) {