@mjhls/mjh-framework 1.0.616 → 1.0.618

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.616
+# mjh-framework v. 1.0.618
 
 > Foundation Framework 
 

package/dist/cjs/ArticleQueue.js

@@ -44,7 +44,7 @@ require('./smoothscroll-95231a70.js');
 require('./GroupDeck.js');
 require('react-bootstrap');
 require('react-bootstrap/Button');
-var getSerializers = require('./index-7af3f466.js');
+var getSerializers = require('./index-62d2887b.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/cjs/ExternalResources.js

@@ -44,7 +44,7 @@ require('./GroupDeck.js');
 require('react-bootstrap');
 var Button = _interopDefault(require('react-bootstrap/Button'));
 var index$3 = require('./index-5be2866f.js');
-var getSerializers = require('./index-7af3f466.js');
+var getSerializers = require('./index-62d2887b.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/cjs/PartnerDetailListing.js

@@ -50,7 +50,7 @@ require('./GroupDeck.js');
 require('react-bootstrap');
 var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 require('react-bootstrap/Button');
-var getSerializers = require('./index-7af3f466.js');
+var getSerializers = require('./index-62d2887b.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/cjs/View.js

@@ -44,7 +44,7 @@ require('./smoothscroll-95231a70.js');
 require('./GroupDeck.js');
 require('react-bootstrap');
 var Button = _interopDefault(require('react-bootstrap/Button'));
-var getSerializers = require('./index-7af3f466.js');
+var getSerializers = require('./index-62d2887b.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/cjs/getSerializers.js

@@ -39,7 +39,7 @@ require('./smoothscroll-95231a70.js');
 require('./GroupDeck.js');
 require('react-bootstrap');
 require('react-bootstrap/Button');
-var getSerializers = require('./index-7af3f466.js');
+var getSerializers = require('./index-62d2887b.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/cjs/{index-7af3f466.js → index-62d2887b.js}

@@ -8304,7 +8304,20 @@ var compareProps = function compareProps(prevProps, nextProps) {
     return prevProps.node.asset._ref === nextProps.node.asset._ref;
   }
 };
-
+function useOutsideAlerter(ref, container, setOpenImg, setOpenImgSrc) {
+  React.useEffect(function () {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target) && container.current && container.current.className.includes('open')) {
+        setOpenImgSrc('');
+        setOpenImg(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+}
 var FigureComponent = function FigureComponent(props) {
   var _useState = React.useState(false),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
@@ -8316,6 +8329,9 @@ var FigureComponent = function FigureComponent(props) {
       openImgSrc = _useState4[0],
       setOpenImgSrc = _useState4[1];
 
+  var lightboxImage = React.useRef(null);
+  var lightboxContainer = React.useRef(null);
+  useOutsideAlerter(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
   if (typeof window === 'undefined') return null;
 
   var node = props.node,
@@ -8421,15 +8437,8 @@ var FigureComponent = function FigureComponent(props) {
     ),
     React__default.createElement(
       'div',
-      { className: 'lightbox-target ' + (openImg ? 'open' : 'close') },
-      React__default.createElement('img', { src: openImgSrc }),
-      React__default.createElement('a', {
-        className: 'lightbox-close',
-        onClick: function onClick() {
-          setOpenImgSrc('');
-          setOpenImg(false);
-        }
-      })
+      { ref: lightboxContainer, className: 'lightbox-target ' + (openImg ? 'open' : 'close') },
+      React__default.createElement('img', { ref: lightboxImage, src: openImgSrc })
     ),
     React__default.createElement(
       'style',
@@ -8486,7 +8495,7 @@ var MultiFigure = function MultiFigure(props) {
       React__default.createElement(
         'style',
         { jsx: 'true' },
-        '\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: cover;\n          }\n\n          /* Small devices (portrait tablets and  phones, 767px and down) */\n          @media (max-width: 767px) {\n            .multi-figure-image-container {\n              margin-bottom: 1rem;\n            }\n          }\n\n          /* Medium devices (landscape tablets, 768px and up) */\n          @media (min-width: 768px) {\n            .multi-figure-image[images-count=\'4\'] {\n              height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 200px;\n            }\n            .multi-figure-container [class*=\'col-\'] + [class*=\'col-\'] {\n              padding-left: 0.75rem;\n            }\n          }\n\n          /* Large devices (laptops/desktops, 992px and up) */\n          @media (min-width: 992px) {\n            .multi-figure-image[images-count=\'4\'] {\n              height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 300px;\n            }\n          }\n\n          .multi-figure-caption {\n            font-size: 90%;\n            color: #6c757d;\n          }\n        '
+        '\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: cover;\n          }\n          .multi-figure-image-container {\n            padding-right: 0.5rem;\n          }\n          /* Small devices (portrait tablets and  phones, 767px and down) */\n          @media (max-width: 767px) {\n            .multi-figure-image-container {\n              margin-bottom: 1rem;\n            }\n          }\n\n          /* Medium devices (landscape tablets, 768px and up) */\n          @media (min-width: 768px) {\n            .multi-figure-image[images-count=\'4\'] {\n              height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 200px;\n            }\n            .multi-figure-container [class*=\'col-\'] + [class*=\'col-\'] {\n              padding-left: 0.75rem;\n            }\n          }\n\n          /* Large devices (laptops/desktops, 992px and up) */\n          @media (min-width: 992px) {\n            .multi-figure-image[images-count=\'4\'] {\n              height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 300px;\n            }\n          }\n\n          .multi-figure-caption {\n            font-size: 90%;\n            color: #6c757d;\n          }\n        '
       )
     );
   }

package/dist/cjs/index.js

@@ -75,7 +75,7 @@ require('./index-5be2866f.js');
 require('./js.cookie-a511c430.js');
 var EventsDeck = require('./EventsDeck.js');
 var CMEDeck = require('./CMEDeck.js');
-var getSerializers = require('./index-7af3f466.js');
+var getSerializers = require('./index-62d2887b.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/esm/ArticleQueue.js

@@ -39,7 +39,7 @@ import './smoothscroll-4b699764.js';
 import './GroupDeck.js';
 import 'react-bootstrap';
 import 'react-bootstrap/Button';
-import { I as InscreenSensor, g as getSerializers } from './index-49042c81.js';
+import { I as InscreenSensor, g as getSerializers } from './index-5430cb81.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/dist/esm/ExternalResources.js

@@ -38,7 +38,7 @@ import './GroupDeck.js';
 import 'react-bootstrap';
 import Button from 'react-bootstrap/Button';
 import { m as momentTimezone } from './index-d2f90501.js';
-import { g as getSerializers } from './index-49042c81.js';
+import { g as getSerializers } from './index-5430cb81.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/dist/esm/PartnerDetailListing.js

@@ -45,7 +45,7 @@ import './GroupDeck.js';
 import 'react-bootstrap';
 import QueueDeckExpanded from './QueueDeckExpanded.js';
 import 'react-bootstrap/Button';
-import { g as getSerializers } from './index-49042c81.js';
+import { g as getSerializers } from './index-5430cb81.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/dist/esm/View.js

@@ -38,7 +38,7 @@ import './smoothscroll-4b699764.js';
 import './GroupDeck.js';
 import 'react-bootstrap';
 import Button from 'react-bootstrap/Button';
-import { I as InscreenSensor, r as renderAuthor, g as getSerializers } from './index-49042c81.js';
+import { I as InscreenSensor, r as renderAuthor, g as getSerializers } from './index-5430cb81.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/dist/esm/getSerializers.js

@@ -37,7 +37,7 @@ import './smoothscroll-4b699764.js';
 import './GroupDeck.js';
 import 'react-bootstrap';
 import 'react-bootstrap/Button';
-export { g as default } from './index-49042c81.js';
+export { g as default } from './index-5430cb81.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/dist/esm/{index-49042c81.js → index-5430cb81.js}

@@ -8298,7 +8298,20 @@ var compareProps = function compareProps(prevProps, nextProps) {
     return prevProps.node.asset._ref === nextProps.node.asset._ref;
   }
 };
-
+function useOutsideAlerter(ref, container, setOpenImg, setOpenImgSrc) {
+  useEffect(function () {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target) && container.current && container.current.className.includes('open')) {
+        setOpenImgSrc('');
+        setOpenImg(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+}
 var FigureComponent = function FigureComponent(props) {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -8310,6 +8323,9 @@ var FigureComponent = function FigureComponent(props) {
       openImgSrc = _useState4[0],
       setOpenImgSrc = _useState4[1];
 
+  var lightboxImage = useRef(null);
+  var lightboxContainer = useRef(null);
+  useOutsideAlerter(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
   if (typeof window === 'undefined') return null;
 
   var node = props.node,
@@ -8415,15 +8431,8 @@ var FigureComponent = function FigureComponent(props) {
     ),
     React__default.createElement(
       'div',
-      { className: 'lightbox-target ' + (openImg ? 'open' : 'close') },
-      React__default.createElement('img', { src: openImgSrc }),
-      React__default.createElement('a', {
-        className: 'lightbox-close',
-        onClick: function onClick() {
-          setOpenImgSrc('');
-          setOpenImg(false);
-        }
-      })
+      { ref: lightboxContainer, className: 'lightbox-target ' + (openImg ? 'open' : 'close') },
+      React__default.createElement('img', { ref: lightboxImage, src: openImgSrc })
     ),
     React__default.createElement(
       'style',
@@ -8480,7 +8489,7 @@ var MultiFigure = function MultiFigure(props) {
       React__default.createElement(
         'style',
         { jsx: 'true' },
-        '\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: cover;\n          }\n\n          /* Small devices (portrait tablets and  phones, 767px and down) */\n          @media (max-width: 767px) {\n            .multi-figure-image-container {\n              margin-bottom: 1rem;\n            }\n          }\n\n          /* Medium devices (landscape tablets, 768px and up) */\n          @media (min-width: 768px) {\n            .multi-figure-image[images-count=\'4\'] {\n              height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 200px;\n            }\n            .multi-figure-container [class*=\'col-\'] + [class*=\'col-\'] {\n              padding-left: 0.75rem;\n            }\n          }\n\n          /* Large devices (laptops/desktops, 992px and up) */\n          @media (min-width: 992px) {\n            .multi-figure-image[images-count=\'4\'] {\n              height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 300px;\n            }\n          }\n\n          .multi-figure-caption {\n            font-size: 90%;\n            color: #6c757d;\n          }\n        '
+        '\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: cover;\n          }\n          .multi-figure-image-container {\n            padding-right: 0.5rem;\n          }\n          /* Small devices (portrait tablets and  phones, 767px and down) */\n          @media (max-width: 767px) {\n            .multi-figure-image-container {\n              margin-bottom: 1rem;\n            }\n          }\n\n          /* Medium devices (landscape tablets, 768px and up) */\n          @media (min-width: 768px) {\n            .multi-figure-image[images-count=\'4\'] {\n              height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 200px;\n            }\n            .multi-figure-container [class*=\'col-\'] + [class*=\'col-\'] {\n              padding-left: 0.75rem;\n            }\n          }\n\n          /* Large devices (laptops/desktops, 992px and up) */\n          @media (min-width: 992px) {\n            .multi-figure-image[images-count=\'4\'] {\n              height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 300px;\n            }\n          }\n\n          .multi-figure-caption {\n            font-size: 90%;\n            color: #6c757d;\n          }\n        '
       )
     );
   }

package/dist/esm/index.js

@@ -71,7 +71,7 @@ import './index-d2f90501.js';
 import './js.cookie-6874175c.js';
 export { default as EventsDeck } from './EventsDeck.js';
 export { default as CMEDeck } from './CMEDeck.js';
-export { g as getSerializers } from './index-49042c81.js';
+export { g as getSerializers } from './index-5430cb81.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjhls/mjh-framework",
-  "version": "1.0.616",
+  "version": "1.0.618",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",