@meduza/ui-kit-2 0.1.13 → 0.1.15

package/dist/ui-kit-2.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, Children, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useContext, useRef, Children, useCallback } from 'react';
 import { useInView } from 'react-intersection-observer';
 import dayjs from 'dayjs';
 import 'dayjs/locale/ru';
@@ -604,7 +604,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,
@@ -615,6 +615,15 @@ var DotsOnImage = function DotsOnImage(_ref) {
       display = _ref$block.display,
       dots = _ref$block.dots;
 
+  var _useInView = useInView({
+    threshold: 0.5
+  }),
+      ref = _useInView[0],
+      inView = _useInView[1],
+      entry = _useInView[2];
+
+  var container = useRef(null);
+
   var _useState = useState({
     title: null,
     body: null,
@@ -624,6 +633,42 @@ var DotsOnImage = function DotsOnImage(_ref) {
       popover = _useState[0],
       setPopover = _useState[1];
 
+  var _useState2 = useState(false),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  useEffect(function () {
+    if (entry && entry.boundingClientRect && entry.boundingClientRect.y < 0) {
+      setVisible(true);
+    }
+  }, [entry]);
+  useEffect(function () {
+    if (inView) {
+      setVisible(true);
+    }
+  }, [inView]);
+  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';
@@ -644,10 +689,21 @@ var DotsOnImage = function DotsOnImage(_ref) {
   };
 
   return React.createElement("div", {
+    className: makeClassName([[styles$7.root, true], [styles$7.isVisible, visible]]),
     "data-testid": "dots-on-image",
-    className: styles$7.root
-  }, React.createElement("div", {
-    className: styles$7.dots
+    ref: ref
+  }, React.createElement(Image, {
+    optimized: optimized,
+    width: width,
+    height: height,
+    alt: credit,
+    display: display,
+    fullscreen: {
+      mobile: false,
+      desktop: false
+    }
+  }), React.createElement("div", {
+    ref: container
   }, dots.map(function (dot) {
     return React.createElement("button", {
       className: makeClassName([[styles$7.dot, true], [styles$7.isActive, dot.id === popover.id]]),
@@ -666,19 +722,7 @@ var DotsOnImage = function DotsOnImage(_ref) {
         __html: dot.icon.svg_string
       }
     }), dot.icon.type === 'number' && dot.icon.number);
-  })), React.createElement("div", {
-    className: styles$7.image
-  }, React.createElement(Image, {
-    optimized: optimized,
-    width: width,
-    height: height,
-    alt: credit,
-    display: display,
-    fullscreen: {
-      mobile: false,
-      desktop: false
-    }
-  })), popover.show && React.createElement(React.Fragment, null, viewportSize().width >= MediaQuerySizes.LANDSCAPE_TABLET ? React.createElement("div", {
+  }), popover.show && React.createElement(React.Fragment, null, viewportSize().width >= MediaQuerySizes.LANDSCAPE_TABLET ? React.createElement("div", {
     className: makeClassName([[styles$7.popover, true], [styles$7[popover.side], !!popover.side], [styles$7[popover.align], !!popover.align]]),
     style: popover.style
   }, React.createElement(Footnote, {
@@ -687,7 +731,7 @@ var DotsOnImage = function DotsOnImage(_ref) {
         show: false
       });
     }
-  }, React.createElement("h3", null, popover.title), React.createElement("div", {
+  }, popover.title && React.createElement("h3", null, popover.title), React.createElement("div", {
     dangerouslySetInnerHTML: {
       __html: popover.body
     }
@@ -697,11 +741,11 @@ var DotsOnImage = function DotsOnImage(_ref) {
         show: false
       });
     }
-  }, React.createElement("h3", null, popover.title), React.createElement("div", {
+  }, popover.title && React.createElement("h3", null, popover.title), React.createElement("div", {
     dangerouslySetInnerHTML: {
       __html: popover.body
     }
-  }))));
+  })))));
 };
 
 var makeStyleContext = function makeStyleContext(classNames, styleContext, styles) {