@mjhls/mjh-framework 1.0.660 → 1.0.662

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.660
+# mjh-framework v. 1.0.662
 
 > Foundation Framework 
 

package/dist/cjs/ExternalResources.js

@@ -45,7 +45,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-47e709f6.js');
+var getSerializers = require('./index-2831c002.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/cjs/MasterDeck.js

@@ -68,23 +68,23 @@ var MasterDeck = function (_React$Component) {
       from: _this.params ? _this.params.from : 0,
       to: _this.params ? _this.params.to : 2,
       total_pages: null,
-      scrolling: true,
+      scrolling: false,
       query: _this.query,
       currentPage: _this.props.currentPage || 1,
-      dataRemapped: false,
+      dataRemapped: !_this.props.showBI || !_this.props.brandInsightAd,
       lastDataSize: _this.data ? _this.data.length : 0,
       itemsPerPage: _this.params ? _this.params.to - _this.params.from : 2
     }, _this.loadMore = debounce.debounce_1(function () {
       _this.setState(function (state) {
         var page = state.page,
             from = state.from,
-            per = state.per,
-            to = state.to;
+            to = state.to,
+            itemsPerPage = state.itemsPerPage;
 
         return {
           page: page + 1,
-          from: from + per,
-          to: to + per
+          from: from + itemsPerPage,
+          to: to + itemsPerPage
         };
       }, _this.loadData);
     }, 0), _this.loadData = function () {
@@ -99,7 +99,7 @@ var MasterDeck = function (_React$Component) {
           dataHandler = _this$props.dataHandler;
 
 
-      var params = _extends._extends({}, _this.props.params, { from: from, to: to });
+      var params = _extends._extends({}, _this.props.params, { from: from, to: to + 1 });
 
       if (dataHandler) {
         var dataHandlerPromise = new asyncToGenerator._Promise(function (resolve, reject) {
@@ -123,31 +123,61 @@ var MasterDeck = function (_React$Component) {
         var pointer = _this.pointer;
         dataArr = dataArr[_this.pointerArray][pointer];
       }
-      dataArr = dataArr.map(function (item) {
-        return _extends._extends({}, item, {
-          pageNumber: page
+
+      if (dataArr && dataArr.length > 0) {
+        var itemsPerPage = _this.state.itemsPerPage;
+
+        var scrolling = dataArr.length === itemsPerPage + 1;
+        dataArr = dataArr.slice(0, itemsPerPage).map(function (item) {
+          return _extends._extends({}, item, {
+            pageNumber: page
+          });
         });
-      });
 
-      _this.setState(function () {
-        if (dataArr.length > 0) {
-          return {
-            data: [].concat(toConsumableArray._toConsumableArray(data), toConsumableArray._toConsumableArray(dataArr)),
-            lastDataSize: dataArr.length,
-            scrolling: true
-          };
-        } else {
-          return {
-            scrolling: false,
-            lastDataSize: 0
-          };
-        }
-      });
-    }, _this.changePageNumber = function (pageNumber) {
+        _this.setState({
+          data: [].concat(toConsumableArray._toConsumableArray(data), toConsumableArray._toConsumableArray(dataArr)),
+          lastDataSize: dataArr.length,
+          scrolling: scrolling
+        });
+      } else {
+        _this.setState({
+          scrolling: false,
+          lastDataSize: 0
+        });
+      }
+    }, _this.checkMoreDataAvailable = function () {
+      debugger;
+      var _this$state2 = _this.state,
+          from = _this$state2.from,
+          itemsPerPage = _this$state2.itemsPerPage,
+          query = _this$state2.query;
       var _this$props2 = _this.props,
-          seoPaginate = _this$props2.seoPaginate,
-          pageview = _this$props2.pageview,
-          router = _this$props2.router;
+          client = _this$props2.client,
+          dataHandler = _this$props2.dataHandler;
+
+      var params = _extends._extends({}, _this.props.params, { from: from + itemsPerPage, to: from + itemsPerPage + 1 });
+      if (dataHandler) {
+        var dataHandlerPromise = new asyncToGenerator._Promise(function (resolve, reject) {
+          try {
+            var result = dataHandler(params);
+            resolve(result);
+          } catch (e) {
+            reject(e);
+          }
+        });
+        dataHandlerPromise.then(function (dataArr) {
+          if (dataArr && dataArr.length > 0) _this.setState({ scrolling: true });else _this.setState({ scrolling: false });
+        });
+      } else {
+        client.fetch(query, params).then(function (dataArr) {
+          if (dataArr && dataArr.length > 0) _this.setState({ scrolling: true });else _this.setState({ scrolling: false });
+        });
+      }
+    }, _this.changePageNumber = function (pageNumber) {
+      var _this$props3 = _this.props,
+          seoPaginate = _this$props3.seoPaginate,
+          pageview = _this$props3.pageview,
+          router = _this$props3.router;
       var currentPage = _this.state.currentPage;
 
       if (seoPaginate) {
@@ -225,9 +255,6 @@ var MasterDeck = function (_React$Component) {
       var insertBrandInsightAd = function insertBrandInsightAd(arr, index, newElement) {
         return [].concat(toConsumableArray._toConsumableArray(arr.slice(0, index)), [newElement], toConsumableArray._toConsumableArray(arr.slice(index)));
       };
-      _this.componentDidMount = function () {
-        _this.setState({ dataRemapped: !showBI || !brandInsightAd ? true : false });
-      };
       //  Need to pass flag "lgInfeedAd={true}" along with brandInsightAd from site level for large infeed-ad to render
       //  Checking lgInfeedAd flag in desktop view ( window >= 1400px ).
       //  Integrating large infeed AD
@@ -372,10 +399,10 @@ var MasterDeck = function (_React$Component) {
         rightItems[i].component
       );
     }, _this.renderManualPagination = function () {
-      var _this$state2 = _this.state,
-          currentPage = _this$state2.currentPage,
-          itemsPerPage = _this$state2.itemsPerPage,
-          lastDataSize = _this$state2.lastDataSize;
+      var _this$state3 = _this.state,
+          currentPage = _this$state3.currentPage,
+          itemsPerPage = _this$state3.itemsPerPage,
+          lastDataSize = _this$state3.lastDataSize;
 
       console.log('lastDataSize:', lastDataSize);
       console.log('itemsPerPage:', itemsPerPage);
@@ -426,7 +453,11 @@ var MasterDeck = function (_React$Component) {
   }, {
     key: 'componentDidMount',
     value: function componentDidMount() {
-      // this.loadData();
+      var _state = this.state,
+          data = _state.data,
+          itemsPerPage = _state.itemsPerPage;
+
+      if (!(data.length < itemsPerPage)) this.checkMoreDataAvailable();
     }
     //  Passing 'brandInsightAd','showBI' and 'lgInfeedAd'
 
@@ -482,7 +513,16 @@ var MasterDeck = function (_React$Component) {
               'button',
               {
                 className: 'btn',
-                style: { margin: '0 auto 2rem', display: 'block', fontSize: '18px', padding: '.5rem 1.5rem', boxShadow: '1px 2px 4px 4px rgba(0,0,0,.15)', background: 'var(--primary)', color: '#fff', borderRadius: '5px' },
+                style: {
+                  margin: '0 auto 2rem',
+                  display: 'block',
+                  fontSize: '18px',
+                  padding: '.5rem 1.5rem',
+                  boxShadow: '1px 2px 4px 4px rgba(0,0,0,.15)',
+                  background: 'var(--primary)',
+                  color: '#fff',
+                  borderRadius: '5px'
+                },
                 onClick: function onClick(e) {
                   _this3.loadMore();
                 } },

package/dist/cjs/PartnerDetailListing.js

@@ -52,7 +52,7 @@ require('./GroupDeck.js');
 require('react-bootstrap');
 var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 require('react-bootstrap/Button');
-var getSerializers = require('./index-47e709f6.js');
+var getSerializers = require('./index-2831c002.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/cjs/View.js

@@ -47,7 +47,7 @@ require('react-bootstrap');
 var Button = _interopDefault(require('react-bootstrap/Button'));
 var defineProperty$1 = require('./defineProperty-55548b25.js');
 var Form = _interopDefault(require('react-bootstrap/Form'));
-var getSerializers = require('./index-47e709f6.js');
+var getSerializers = require('./index-2831c002.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/cjs/getSerializers.js

@@ -40,7 +40,7 @@ require('./smoothscroll-95231a70.js');
 require('./GroupDeck.js');
 require('react-bootstrap');
 require('react-bootstrap/Button');
-var getSerializers = require('./index-47e709f6.js');
+var getSerializers = require('./index-2831c002.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/cjs/{index-47e709f6.js → index-2831c002.js}

@@ -8391,29 +8391,31 @@ var ArticleSeries = function ArticleSeries(_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);
-      }
+var LightBox = function LightBox(_ref) {
+  var showLightbox = _ref.showLightbox,
+      lightboxImgSrc = _ref.lightboxImgSrc,
+      closeLightbox = _ref.closeLightbox;
+
+  var lightboxImage = React.useRef(null);
+  var lightboxContainer = React.useRef(null);
+
+  var handleClickOutside = React.useCallback(function (event) {
+    if (lightboxImage.current && !lightboxImage.current.contains(event.target) && lightboxContainer.current && lightboxContainer.current.className.includes('open')) {
+      closeLightbox();
     }
+  }, [lightboxImage, lightboxContainer]);
+
+  React.useEffect(function () {
     document.addEventListener('mousedown', handleClickOutside);
     return function () {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [ref]);
-}
+  }, [handleClickOutside]);
 
-var renderLightbox = function renderLightbox(openImg, openImgSrc, setOpenImg, setOpenImgSrc) {
-  var lightboxImage = React.useRef(null);
-  var lightboxContainer = React.useRef(null);
-  useOutsideAlerter(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
   return React__default.createElement(
     'div',
-    { ref: lightboxContainer, className: 'lightbox-target ' + (openImg ? 'open' : 'close') },
-    React__default.createElement('img', { ref: lightboxImage, src: openImgSrc }),
+    { ref: lightboxContainer, className: 'lightbox-target ' + (showLightbox ? 'open' : 'close') },
+    React__default.createElement('img', { ref: lightboxImage, src: lightboxImgSrc }),
     React__default.createElement(
       'style',
       { jsx: 'true' },
@@ -8436,40 +8438,16 @@ var compareProps = function compareProps(prevProps, nextProps) {
 var FigureComponent = function FigureComponent(props) {
   var _useState = React.useState(false),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
-      openImg = _useState2[0],
-      setOpenImg = _useState2[1];
+      showLightbox = _useState2[0],
+      setShowLightbox = _useState2[1];
 
   var _useState3 = React.useState(''),
       _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-      openImgSrc = _useState4[0],
-      setOpenImgSrc = _useState4[1];
+      lightboxImgSrc = _useState4[0],
+      setLightboxImgSrc = _useState4[1];
 
   if (typeof window === 'undefined') return null;
 
-  React.useEffect(function () {
-    var lightboxCaptions = document.querySelectorAll('.lightbox-caption');
-    if (lightboxCaptions && lightboxCaptions.length > 0) {
-      lightboxCaptions.forEach(function (mediaLink) {
-        var prevSibling = mediaLink.previousSibling;
-        if (prevSibling && prevSibling.textContent && prevSibling.textContent !== '') {
-          prevSibling.style.display = 'inline';
-          prevSibling.style.paddingRight = '0';
-          prevSibling.style.marginRight = '0';
-        }
-        var nextSibling = mediaLink.nextSibling;
-        nextSibling.remove();
-        var parentNode = mediaLink.parentNode;
-        parentNode.appendChild(nextSibling);
-        nextSibling = mediaLink.nextSibling;
-        if (nextSibling && nextSibling.textContent && nextSibling.textContent !== '') {
-          nextSibling.style.display = 'inline';
-          nextSibling.style.paddingLeft = '0';
-          nextSibling.style.marginLeft = '0';
-        }
-      });
-    }
-  }, []);
-
   var node = props.node,
       client = props.client;
 
@@ -8485,9 +8463,7 @@ var FigureComponent = function FigureComponent(props) {
       _node$class_name = node.class_name,
       class_name = _node$class_name === undefined ? 'd-block' : _node$class_name,
       _node$disableTextWrap = node.disableTextWrap,
-      disableTextWrap = _node$disableTextWrap === undefined ? false : _node$disableTextWrap,
-      _node$lightBoxmode = node.lightBoxmode,
-      lightBoxmode = _node$lightBoxmode === undefined ? false : _node$lightBoxmode;
+      disableTextWrap = _node$disableTextWrap === undefined ? false : _node$disableTextWrap;
   var _node$widthP = node.widthP,
       widthP = _node$widthP === undefined ? 'auto' : _node$widthP;
 
@@ -8538,31 +8514,6 @@ var FigureComponent = function FigureComponent(props) {
     margin: figureMargin
   };
 
-  if (lightBoxmode) {
-    if (link && caption) {
-      return React__default.createElement(
-        'a',
-        { target: blank ? '_blank' : '_self', href: link },
-        React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
-      );
-    } else if (node && node.asset && node.asset._ref && caption) {
-      return React__default.createElement(
-        React__default.Fragment,
-        null,
-        React__default.createElement('div', {
-          style: { display: 'inline', cursor: 'pointer', textDecoration: 'underline', paddingLeft: '0.25rem', paddingRight: '0.25rem' },
-          className: 'lightbox-caption',
-          onClick: function onClick() {
-            setOpenImgSrc(urlFor$3(node, client).url());
-            setOpenImg(true);
-          },
-          dangerouslySetInnerHTML: { __html: '<span>' + caption + '</span>' }
-        }),
-        renderLightbox(openImg, openImgSrc, setOpenImg, setOpenImgSrc)
-      );
-    }
-  }
-
   return React__default.createElement(
     React__default.Fragment,
     null,
@@ -8583,13 +8534,20 @@ var FigureComponent = function FigureComponent(props) {
           src: urlFor$3(node, client).url(),
           alt: alt && alt,
           onClick: function onClick() {
-            setOpenImgSrc(urlFor$3(node, client).url());
-            setOpenImg(true);
+            setLightboxImgSrc(urlFor$3(node, client).url());
+            setShowLightbox(true);
           }
         }),
         caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
       ),
-      renderLightbox(openImg, openImgSrc, setOpenImg, setOpenImgSrc)
+      React__default.createElement(LightBox, {
+        showLightbox: showLightbox,
+        lightboxImgSrc: lightboxImgSrc,
+        closeLightbox: function closeLightbox() {
+          setLightboxImgSrc('');
+          setShowLightbox(false);
+        }
+      })
     ),
     React__default.createElement(
       'style',
@@ -8606,7 +8564,7 @@ var urlFor$4 = function urlFor(source, client) {
   return builder.image(source).auto('format');
 };
 
-function useOutsideAlerter$1(ref, container, setOpenImg, setOpenImgSrc) {
+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')) {
@@ -8637,7 +8595,7 @@ var MultiFigure = function MultiFigure(props) {
 
   var lightboxImage = React.useRef(null);
   var lightboxContainer = React.useRef(null);
-  useOutsideAlerter$1(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
+  useOutsideAlerter(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
   if (images && images.length > 0) {
     return React__default.createElement(
       'div',

package/dist/cjs/index.js

@@ -79,7 +79,7 @@ require('react-bootstrap/Form');
 require('./index-5be2866f.js');
 require('./js.cookie-a511c430.js');
 var CMEDeck = require('./CMEDeck.js');
-var getSerializers = require('./index-47e709f6.js');
+var getSerializers = require('./index-2831c002.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/esm/ExternalResources.js

@@ -39,7 +39,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-ed279e5e.js';
+import { g as getSerializers } from './index-e2a6c2d0.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/dist/esm/MasterDeck.js

@@ -62,23 +62,23 @@ var MasterDeck = function (_React$Component) {
       from: _this.params ? _this.params.from : 0,
       to: _this.params ? _this.params.to : 2,
       total_pages: null,
-      scrolling: true,
+      scrolling: false,
       query: _this.query,
       currentPage: _this.props.currentPage || 1,
-      dataRemapped: false,
+      dataRemapped: !_this.props.showBI || !_this.props.brandInsightAd,
       lastDataSize: _this.data ? _this.data.length : 0,
       itemsPerPage: _this.params ? _this.params.to - _this.params.from : 2
     }, _this.loadMore = debounce_1(function () {
       _this.setState(function (state) {
         var page = state.page,
             from = state.from,
-            per = state.per,
-            to = state.to;
+            to = state.to,
+            itemsPerPage = state.itemsPerPage;
 
         return {
           page: page + 1,
-          from: from + per,
-          to: to + per
+          from: from + itemsPerPage,
+          to: to + itemsPerPage
         };
       }, _this.loadData);
     }, 0), _this.loadData = function () {
@@ -93,7 +93,7 @@ var MasterDeck = function (_React$Component) {
           dataHandler = _this$props.dataHandler;
 
 
-      var params = _extends({}, _this.props.params, { from: from, to: to });
+      var params = _extends({}, _this.props.params, { from: from, to: to + 1 });
 
       if (dataHandler) {
         var dataHandlerPromise = new _Promise(function (resolve, reject) {
@@ -117,31 +117,61 @@ var MasterDeck = function (_React$Component) {
         var pointer = _this.pointer;
         dataArr = dataArr[_this.pointerArray][pointer];
       }
-      dataArr = dataArr.map(function (item) {
-        return _extends({}, item, {
-          pageNumber: page
+
+      if (dataArr && dataArr.length > 0) {
+        var itemsPerPage = _this.state.itemsPerPage;
+
+        var scrolling = dataArr.length === itemsPerPage + 1;
+        dataArr = dataArr.slice(0, itemsPerPage).map(function (item) {
+          return _extends({}, item, {
+            pageNumber: page
+          });
         });
-      });
 
-      _this.setState(function () {
-        if (dataArr.length > 0) {
-          return {
-            data: [].concat(_toConsumableArray(data), _toConsumableArray(dataArr)),
-            lastDataSize: dataArr.length,
-            scrolling: true
-          };
-        } else {
-          return {
-            scrolling: false,
-            lastDataSize: 0
-          };
-        }
-      });
-    }, _this.changePageNumber = function (pageNumber) {
+        _this.setState({
+          data: [].concat(_toConsumableArray(data), _toConsumableArray(dataArr)),
+          lastDataSize: dataArr.length,
+          scrolling: scrolling
+        });
+      } else {
+        _this.setState({
+          scrolling: false,
+          lastDataSize: 0
+        });
+      }
+    }, _this.checkMoreDataAvailable = function () {
+      debugger;
+      var _this$state2 = _this.state,
+          from = _this$state2.from,
+          itemsPerPage = _this$state2.itemsPerPage,
+          query = _this$state2.query;
       var _this$props2 = _this.props,
-          seoPaginate = _this$props2.seoPaginate,
-          pageview = _this$props2.pageview,
-          router = _this$props2.router;
+          client = _this$props2.client,
+          dataHandler = _this$props2.dataHandler;
+
+      var params = _extends({}, _this.props.params, { from: from + itemsPerPage, to: from + itemsPerPage + 1 });
+      if (dataHandler) {
+        var dataHandlerPromise = new _Promise(function (resolve, reject) {
+          try {
+            var result = dataHandler(params);
+            resolve(result);
+          } catch (e) {
+            reject(e);
+          }
+        });
+        dataHandlerPromise.then(function (dataArr) {
+          if (dataArr && dataArr.length > 0) _this.setState({ scrolling: true });else _this.setState({ scrolling: false });
+        });
+      } else {
+        client.fetch(query, params).then(function (dataArr) {
+          if (dataArr && dataArr.length > 0) _this.setState({ scrolling: true });else _this.setState({ scrolling: false });
+        });
+      }
+    }, _this.changePageNumber = function (pageNumber) {
+      var _this$props3 = _this.props,
+          seoPaginate = _this$props3.seoPaginate,
+          pageview = _this$props3.pageview,
+          router = _this$props3.router;
       var currentPage = _this.state.currentPage;
 
       if (seoPaginate) {
@@ -219,9 +249,6 @@ var MasterDeck = function (_React$Component) {
       var insertBrandInsightAd = function insertBrandInsightAd(arr, index, newElement) {
         return [].concat(_toConsumableArray(arr.slice(0, index)), [newElement], _toConsumableArray(arr.slice(index)));
       };
-      _this.componentDidMount = function () {
-        _this.setState({ dataRemapped: !showBI || !brandInsightAd ? true : false });
-      };
       //  Need to pass flag "lgInfeedAd={true}" along with brandInsightAd from site level for large infeed-ad to render
       //  Checking lgInfeedAd flag in desktop view ( window >= 1400px ).
       //  Integrating large infeed AD
@@ -366,10 +393,10 @@ var MasterDeck = function (_React$Component) {
         rightItems[i].component
       );
     }, _this.renderManualPagination = function () {
-      var _this$state2 = _this.state,
-          currentPage = _this$state2.currentPage,
-          itemsPerPage = _this$state2.itemsPerPage,
-          lastDataSize = _this$state2.lastDataSize;
+      var _this$state3 = _this.state,
+          currentPage = _this$state3.currentPage,
+          itemsPerPage = _this$state3.itemsPerPage,
+          lastDataSize = _this$state3.lastDataSize;
 
       console.log('lastDataSize:', lastDataSize);
       console.log('itemsPerPage:', itemsPerPage);
@@ -420,7 +447,11 @@ var MasterDeck = function (_React$Component) {
   }, {
     key: 'componentDidMount',
     value: function componentDidMount() {
-      // this.loadData();
+      var _state = this.state,
+          data = _state.data,
+          itemsPerPage = _state.itemsPerPage;
+
+      if (!(data.length < itemsPerPage)) this.checkMoreDataAvailable();
     }
     //  Passing 'brandInsightAd','showBI' and 'lgInfeedAd'
 
@@ -476,7 +507,16 @@ var MasterDeck = function (_React$Component) {
               'button',
               {
                 className: 'btn',
-                style: { margin: '0 auto 2rem', display: 'block', fontSize: '18px', padding: '.5rem 1.5rem', boxShadow: '1px 2px 4px 4px rgba(0,0,0,.15)', background: 'var(--primary)', color: '#fff', borderRadius: '5px' },
+                style: {
+                  margin: '0 auto 2rem',
+                  display: 'block',
+                  fontSize: '18px',
+                  padding: '.5rem 1.5rem',
+                  boxShadow: '1px 2px 4px 4px rgba(0,0,0,.15)',
+                  background: 'var(--primary)',
+                  color: '#fff',
+                  borderRadius: '5px'
+                },
                 onClick: function onClick(e) {
                   _this3.loadMore();
                 } },

package/dist/esm/PartnerDetailListing.js

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

package/dist/esm/View.js

@@ -41,7 +41,7 @@ import 'react-bootstrap';
 import Button from 'react-bootstrap/Button';
 import { _ as _defineProperty } from './defineProperty-b798470d.js';
 import Form from 'react-bootstrap/Form';
-import { I as InscreenSensor, r as renderAuthor, g as getSerializers } from './index-ed279e5e.js';
+import { I as InscreenSensor, r as renderAuthor, g as getSerializers } from './index-e2a6c2d0.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/dist/esm/getSerializers.js

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

package/dist/esm/{index-ed279e5e.js → index-e2a6c2d0.js}

@@ -3,7 +3,7 @@ import { a as _Array$from, _ as _toConsumableArray } from './toConsumableArray-7
 import { _ as _extends } from './extends-cc5da797.js';
 import { _ as _inherits$1, a as _classCallCheck$1, b as _possibleConstructorReturn$1, c as _Object$getPrototypeOf, d as _createClass$1 } from './inherits-7ee3e0c1.js';
 import { _ as _typeof$1 } from './typeof-08f2c380.js';
-import React__default, { useState, useEffect, useRef } from 'react';
+import React__default, { useState, useEffect, useRef, useCallback } from 'react';
 import { l as lib_3 } from './index-93ec3c59.js';
 import PropTypes from 'prop-types';
 import Row from 'react-bootstrap/Row';
@@ -8384,29 +8384,31 @@ var ArticleSeries = function ArticleSeries(_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);
-      }
+var LightBox = function LightBox(_ref) {
+  var showLightbox = _ref.showLightbox,
+      lightboxImgSrc = _ref.lightboxImgSrc,
+      closeLightbox = _ref.closeLightbox;
+
+  var lightboxImage = useRef(null);
+  var lightboxContainer = useRef(null);
+
+  var handleClickOutside = useCallback(function (event) {
+    if (lightboxImage.current && !lightboxImage.current.contains(event.target) && lightboxContainer.current && lightboxContainer.current.className.includes('open')) {
+      closeLightbox();
     }
+  }, [lightboxImage, lightboxContainer]);
+
+  useEffect(function () {
     document.addEventListener('mousedown', handleClickOutside);
     return function () {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [ref]);
-}
+  }, [handleClickOutside]);
 
-var renderLightbox = function renderLightbox(openImg, openImgSrc, setOpenImg, setOpenImgSrc) {
-  var lightboxImage = useRef(null);
-  var lightboxContainer = useRef(null);
-  useOutsideAlerter(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
   return React__default.createElement(
     'div',
-    { ref: lightboxContainer, className: 'lightbox-target ' + (openImg ? 'open' : 'close') },
-    React__default.createElement('img', { ref: lightboxImage, src: openImgSrc }),
+    { ref: lightboxContainer, className: 'lightbox-target ' + (showLightbox ? 'open' : 'close') },
+    React__default.createElement('img', { ref: lightboxImage, src: lightboxImgSrc }),
     React__default.createElement(
       'style',
       { jsx: 'true' },
@@ -8429,40 +8431,16 @@ var compareProps = function compareProps(prevProps, nextProps) {
 var FigureComponent = function FigureComponent(props) {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      openImg = _useState2[0],
-      setOpenImg = _useState2[1];
+      showLightbox = _useState2[0],
+      setShowLightbox = _useState2[1];
 
   var _useState3 = useState(''),
       _useState4 = _slicedToArray(_useState3, 2),
-      openImgSrc = _useState4[0],
-      setOpenImgSrc = _useState4[1];
+      lightboxImgSrc = _useState4[0],
+      setLightboxImgSrc = _useState4[1];
 
   if (typeof window === 'undefined') return null;
 
-  useEffect(function () {
-    var lightboxCaptions = document.querySelectorAll('.lightbox-caption');
-    if (lightboxCaptions && lightboxCaptions.length > 0) {
-      lightboxCaptions.forEach(function (mediaLink) {
-        var prevSibling = mediaLink.previousSibling;
-        if (prevSibling && prevSibling.textContent && prevSibling.textContent !== '') {
-          prevSibling.style.display = 'inline';
-          prevSibling.style.paddingRight = '0';
-          prevSibling.style.marginRight = '0';
-        }
-        var nextSibling = mediaLink.nextSibling;
-        nextSibling.remove();
-        var parentNode = mediaLink.parentNode;
-        parentNode.appendChild(nextSibling);
-        nextSibling = mediaLink.nextSibling;
-        if (nextSibling && nextSibling.textContent && nextSibling.textContent !== '') {
-          nextSibling.style.display = 'inline';
-          nextSibling.style.paddingLeft = '0';
-          nextSibling.style.marginLeft = '0';
-        }
-      });
-    }
-  }, []);
-
   var node = props.node,
       client = props.client;
 
@@ -8478,9 +8456,7 @@ var FigureComponent = function FigureComponent(props) {
       _node$class_name = node.class_name,
       class_name = _node$class_name === undefined ? 'd-block' : _node$class_name,
       _node$disableTextWrap = node.disableTextWrap,
-      disableTextWrap = _node$disableTextWrap === undefined ? false : _node$disableTextWrap,
-      _node$lightBoxmode = node.lightBoxmode,
-      lightBoxmode = _node$lightBoxmode === undefined ? false : _node$lightBoxmode;
+      disableTextWrap = _node$disableTextWrap === undefined ? false : _node$disableTextWrap;
   var _node$widthP = node.widthP,
       widthP = _node$widthP === undefined ? 'auto' : _node$widthP;
 
@@ -8531,31 +8507,6 @@ var FigureComponent = function FigureComponent(props) {
     margin: figureMargin
   };
 
-  if (lightBoxmode) {
-    if (link && caption) {
-      return React__default.createElement(
-        'a',
-        { target: blank ? '_blank' : '_self', href: link },
-        React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
-      );
-    } else if (node && node.asset && node.asset._ref && caption) {
-      return React__default.createElement(
-        React__default.Fragment,
-        null,
-        React__default.createElement('div', {
-          style: { display: 'inline', cursor: 'pointer', textDecoration: 'underline', paddingLeft: '0.25rem', paddingRight: '0.25rem' },
-          className: 'lightbox-caption',
-          onClick: function onClick() {
-            setOpenImgSrc(urlFor$3(node, client).url());
-            setOpenImg(true);
-          },
-          dangerouslySetInnerHTML: { __html: '<span>' + caption + '</span>' }
-        }),
-        renderLightbox(openImg, openImgSrc, setOpenImg, setOpenImgSrc)
-      );
-    }
-  }
-
   return React__default.createElement(
     React__default.Fragment,
     null,
@@ -8576,13 +8527,20 @@ var FigureComponent = function FigureComponent(props) {
           src: urlFor$3(node, client).url(),
           alt: alt && alt,
           onClick: function onClick() {
-            setOpenImgSrc(urlFor$3(node, client).url());
-            setOpenImg(true);
+            setLightboxImgSrc(urlFor$3(node, client).url());
+            setShowLightbox(true);
           }
         }),
         caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
       ),
-      renderLightbox(openImg, openImgSrc, setOpenImg, setOpenImgSrc)
+      React__default.createElement(LightBox, {
+        showLightbox: showLightbox,
+        lightboxImgSrc: lightboxImgSrc,
+        closeLightbox: function closeLightbox() {
+          setLightboxImgSrc('');
+          setShowLightbox(false);
+        }
+      })
     ),
     React__default.createElement(
       'style',
@@ -8599,7 +8557,7 @@ var urlFor$4 = function urlFor(source, client) {
   return builder.image(source).auto('format');
 };
 
-function useOutsideAlerter$1(ref, container, setOpenImg, setOpenImgSrc) {
+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')) {
@@ -8630,7 +8588,7 @@ var MultiFigure = function MultiFigure(props) {
 
   var lightboxImage = useRef(null);
   var lightboxContainer = useRef(null);
-  useOutsideAlerter$1(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
+  useOutsideAlerter(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
   if (images && images.length > 0) {
     return React__default.createElement(
       'div',

package/dist/esm/index.js

@@ -75,7 +75,7 @@ import 'react-bootstrap/Form';
 import './index-d2f90501.js';
 import './js.cookie-6874175c.js';
 export { default as CMEDeck } from './CMEDeck.js';
-export { g as getSerializers } from './index-ed279e5e.js';
+export { g as getSerializers } from './index-e2a6c2d0.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.660",
+  "version": "1.0.662",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",