@mjhls/mjh-framework 1.0.108 → 1.0.109-8.1

package/dist/esm/ADSkyscraper.js

@@ -0,0 +1,119 @@
+import { _ as _slicedToArray } from './slicedToArray-72ed566b.js';
+import React__default, { useState, useEffect } from 'react';
+import DFPAdSlot from './AdSlot.js';
+import { d as main_22 } from './main-754d4992.js';
+import './_commonjsHelpers-0c4b6f40.js';
+import './web.dom.iterable-3fffc027.js';
+import './core.get-iterator-method-95db387d.js';
+import './extends-2f4448b8.js';
+import 'prop-types';
+import './index-5cc7b406.js';
+import './debounce-533d9748.js';
+import './isSymbol-a7e9aafe.js';
+import './toNumber-5aeba6e7.js';
+import './Beam.js';
+import './stringify-1e2a5946.js';
+import './asyncToGenerator-1ebeb135.js';
+import './_library-528f1934.js';
+import './_set-species-7d3317b7.js';
+import './_iter-detect-2f89237f.js';
+import './Segment.js';
+
+// Skyscraper is below sponsored resource ad in the left column.
+var ADSkyscraper = function ADSkyscraper(_ref) {
+  var skyscraperAd = _ref.skyscraperAd,
+      _ref$minScreenWidth = _ref.minScreenWidth,
+      minScreenWidth = _ref$minScreenWidth === undefined ? 1200 : _ref$minScreenWidth,
+      _ref$refreshFlag = _ref.refreshFlag,
+      refreshFlag = _ref$refreshFlag === undefined ? false : _ref$refreshFlag;
+
+  // position is set to 'sky1' as default.
+  var className = skyscraperAd.className,
+      slotId = skyscraperAd.slotId,
+      adUnit = skyscraperAd.adUnit,
+      _skyscraperAd$targeti = skyscraperAd.targeting,
+      targeting = _skyscraperAd$targeti === undefined ? {} : _skyscraperAd$targeti,
+      _skyscraperAd$positio = skyscraperAd.position,
+      position = _skyscraperAd$positio === undefined ? 'sky1' : _skyscraperAd$positio,
+      networkID = skyscraperAd.networkID,
+      sizes = skyscraperAd.sizes;
+
+
+  var adTargeting = {
+    content_placement: targeting.content_placement,
+    tags: targeting.tags,
+    document_group: targeting.document_group,
+    document_url: targeting.document_url,
+    rootDocumentGroup: targeting.rootDocumentGroup,
+    pos: position,
+    campaign_id: targeting.campaign_id,
+    issue_url: targeting.issue_url,
+    publication_url: targeting.publication_url
+  };
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      widthFlag = _useState2[0],
+      setWidthFlag = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2);
+      _useState4[0];
+      var setPreviewAd = _useState4[1];
+
+  var _useState5 = useState(refreshFlag),
+      _useState6 = _slicedToArray(_useState5, 2),
+      adRefreshFlag = _useState6[0],
+      setAdRefreshFlag = _useState6[1];
+
+  useEffect(function () {
+    var path = window && window.location && window.location.search;
+    // Setting flag for Ad-preview URLs
+    setPreviewAd(path.split('&').some(function (param) {
+      return param.includes('creativeId');
+    }));
+    if (main_22.toLowerCase().indexOf('adwallet') >= 0) {
+      setAdRefreshFlag(false);
+    }
+  }, []);
+
+  useEffect(function () {
+    // Setting flag to hide ad in screens < 1200px.
+    if (window && window.innerWidth >= minScreenWidth) {
+      setWidthFlag(true);
+    }
+  }, [minScreenWidth]);
+  if (widthFlag) {
+    return React__default.createElement(
+      React__default.Fragment,
+      null,
+      React__default.createElement(
+        'div',
+        { id: 'skyscraper-ad-wrapper', className: 'skyscraper-ad-wrapper' },
+        React__default.createElement(
+          'div',
+          { className: 'skyscraper-ad' },
+          React__default.createElement(DFPAdSlot, {
+            className: className,
+            slotId: slotId,
+            networkID: networkID,
+            sizes: sizes,
+            adUnit: adUnit,
+            targeting: adTargeting
+            /* Passing refresh flag */
+            , refreshFlag: adRefreshFlag
+            /* Passing function to check for ad creative only if it is not in preview. */
+            // checkIsAdFound={previewAd ? null : checkIsAdFound}
+          })
+        ),
+        React__default.createElement(
+          'style',
+          { jsx: 'true' },
+          '\n            .skyscraper-ad-wrapper {\n              margin-top: 20px;\n              margin-bottom: 20px;\n            }\n            .skyscraper-ad-wrapper div[id*=\'google_ads_iframe\']:empty {\n              height: 0px !important;\n            }\n          '
+        )
+      )
+    );
+  } else return null;
+};
+
+export { ADSkyscraper as default };

package/dist/esm/ADSponsoredResources.js

@@ -0,0 +1,116 @@
+import { _ as _slicedToArray } from './slicedToArray-72ed566b.js';
+import React__default, { useState, useEffect } from 'react';
+import DFPAdSlot from './AdSlot.js';
+import { d as main_22 } from './main-754d4992.js';
+import './_commonjsHelpers-0c4b6f40.js';
+import './web.dom.iterable-3fffc027.js';
+import './core.get-iterator-method-95db387d.js';
+import './extends-2f4448b8.js';
+import 'prop-types';
+import './index-5cc7b406.js';
+import './debounce-533d9748.js';
+import './isSymbol-a7e9aafe.js';
+import './toNumber-5aeba6e7.js';
+import './Beam.js';
+import './stringify-1e2a5946.js';
+import './asyncToGenerator-1ebeb135.js';
+import './_library-528f1934.js';
+import './_set-species-7d3317b7.js';
+import './_iter-detect-2f89237f.js';
+import './Segment.js';
+
+var ADSponsoredResources = function ADSponsoredResources(_ref) {
+  var sponsoredAd = _ref.sponsoredAd,
+      _ref$minScreenWidth = _ref.minScreenWidth,
+      minScreenWidth = _ref$minScreenWidth === undefined ? 1200 : _ref$minScreenWidth,
+      _ref$refreshFlag = _ref.refreshFlag,
+      refreshFlag = _ref$refreshFlag === undefined ? false : _ref$refreshFlag;
+  var className = sponsoredAd.className,
+      slotId = sponsoredAd.slotId,
+      adUnit = sponsoredAd.adUnit,
+      _sponsoredAd$targetin = sponsoredAd.targeting,
+      targeting = _sponsoredAd$targetin === undefined ? {} : _sponsoredAd$targetin,
+      _sponsoredAd$position = sponsoredAd.position,
+      position = _sponsoredAd$position === undefined ? 'sponsor' : _sponsoredAd$position,
+      networkID = sponsoredAd.networkID,
+      sizes = sponsoredAd.sizes;
+
+
+  var adTargeting = {
+    content_placement: targeting.content_placement,
+    tags: targeting.tags,
+    document_group: targeting.document_group,
+    document_url: targeting.document_url,
+    pos: position,
+    rootDocumentGroup: targeting.rootDocumentGroup,
+    campaign_id: targeting.campaign_id,
+    issue_url: targeting.issue_url,
+    publication_url: targeting.publication_url
+  };
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      widthFlag = _useState2[0],
+      setWidthFlag = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2);
+      _useState4[0];
+      var setPreviewAd = _useState4[1];
+
+  var _useState5 = useState(refreshFlag),
+      _useState6 = _slicedToArray(_useState5, 2),
+      adRefreshFlag = _useState6[0],
+      setAdRefreshFlag = _useState6[1];
+
+  useEffect(function () {
+    var path = window && window.location && window.location.search;
+    // Setting flag for Ad-preview URLs
+    setPreviewAd(path.split('&').some(function (param) {
+      return param.includes('creativeId');
+    }));
+    if (main_22.toLowerCase().indexOf('adwallet') >= 0) {
+      setAdRefreshFlag(false);
+    }
+  }, []);
+
+  useEffect(function () {
+    if (window && window.innerWidth >= minScreenWidth) {
+      setWidthFlag(true);
+    }
+  }, [minScreenWidth]);
+
+  if (widthFlag) {
+    return React__default.createElement(
+      React__default.Fragment,
+      null,
+      React__default.createElement(
+        'div',
+        { id: 'sponsored-ad-wrapper', className: 'sponsored-ad-wrapper' },
+        React__default.createElement(
+          'div',
+          { className: 'sponsored-ad' },
+          React__default.createElement(DFPAdSlot, {
+            className: className,
+            slotId: slotId,
+            networkID: networkID,
+            sizes: sizes,
+            adUnit: adUnit,
+            targeting: adTargeting
+            /* Passing refresh flag */
+            , refreshFlag: adRefreshFlag
+            /* Passing function to check for ad creative only if it is not in preview. */
+            // checkIsAdFound={previewAd ? null : checkIsAdFound}
+          })
+        ),
+        React__default.createElement(
+          'style',
+          { jsx: 'true' },
+          '\n            /* setting height to 0px when the ad slot is empty. */\n            .sponsored-ad-wrapper div[id*=\'google_ads_iframe\']:empty {\n              height: 0px !important;\n            }\n          '
+        )
+      )
+    );
+  } else return null;
+};
+
+export { ADSponsoredResources as default };

package/dist/esm/ADWebcast.js

@@ -0,0 +1,121 @@
+import { _ as _slicedToArray } from './slicedToArray-72ed566b.js';
+import React__default, { useState, useEffect } from 'react';
+import DFPAdSlot from './AdSlot.js';
+import { d as main_22 } from './main-754d4992.js';
+import './_commonjsHelpers-0c4b6f40.js';
+import './web.dom.iterable-3fffc027.js';
+import './core.get-iterator-method-95db387d.js';
+import './extends-2f4448b8.js';
+import 'prop-types';
+import './index-5cc7b406.js';
+import './debounce-533d9748.js';
+import './isSymbol-a7e9aafe.js';
+import './toNumber-5aeba6e7.js';
+import './Beam.js';
+import './stringify-1e2a5946.js';
+import './asyncToGenerator-1ebeb135.js';
+import './_library-528f1934.js';
+import './_set-species-7d3317b7.js';
+import './_iter-detect-2f89237f.js';
+import './Segment.js';
+
+//  Webcast AD : New AD with size [200,100] that is to be renderedin the LeftNav between the spotlight and subnavigation.
+var ADWebcast = function ADWebcast(_ref) {
+  var webcastAd = _ref.webcastAd,
+      _ref$minScreenWidth = _ref.minScreenWidth,
+      minScreenWidth = _ref$minScreenWidth === undefined ? 1200 : _ref$minScreenWidth,
+      _ref$refreshFlag = _ref.refreshFlag,
+      refreshFlag = _ref$refreshFlag === undefined ? false : _ref$refreshFlag;
+  var className = webcastAd.className,
+      _webcastAd$slotId = webcastAd.slotId,
+      slotId = _webcastAd$slotId === undefined ? 'webcast-ad' : _webcastAd$slotId,
+      adUnit = webcastAd.adUnit,
+      _webcastAd$targeting = webcastAd.targeting,
+      targeting = _webcastAd$targeting === undefined ? {} : _webcastAd$targeting,
+      networkID = webcastAd.networkID,
+      _webcastAd$sizes = webcastAd.sizes,
+      sizes = _webcastAd$sizes === undefined ? [[200, 100]] : _webcastAd$sizes;
+
+  // AD targeting
+
+  var adTargeting = {
+    content_placement: targeting.content_placement,
+    tags: targeting.tags,
+    document_group: targeting.document_group,
+    document_url: targeting.document_url,
+    rootDocumentGroup: targeting.rootDocumentGroup,
+    // setting pos for webcast ad.
+    pos: 'smrec1',
+    campaign_id: targeting.campaign_id,
+    issue_url: targeting.issue_url,
+    publication_url: targeting.publication_url
+  };
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      widthFlag = _useState2[0],
+      setWidthFlag = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2);
+      _useState4[0];
+      var setPreviewAd = _useState4[1];
+
+  var _useState5 = useState(refreshFlag),
+      _useState6 = _slicedToArray(_useState5, 2),
+      adRefreshFlag = _useState6[0],
+      setAdRefreshFlag = _useState6[1];
+
+  useEffect(function () {
+    var path = window && window.location && window.location.search;
+    // Setting flag for Ad-preview URLs
+    setPreviewAd(path.split('&').some(function (param) {
+      return param.includes('creativeId');
+    }));
+    if (main_22.toLowerCase().indexOf('adwallet') >= 0) {
+      setAdRefreshFlag(false);
+    }
+  }, []);
+
+  useEffect(function () {
+    if (window && window.innerWidth >= minScreenWidth) {
+      setWidthFlag(true);
+    }
+  }, [minScreenWidth]);
+
+  if (widthFlag) {
+    return React__default.createElement(
+      React__default.Fragment,
+      null,
+      React__default.createElement(
+        'div',
+        { id: 'webcast-ad-wrapper', className: 'webcast-ad-wrapper' },
+        React__default.createElement(
+          'div',
+          { className: 'webcast-ad', style: { paddingBottom: '15px' } },
+          React__default.createElement(DFPAdSlot, {
+            className: className,
+            slotId: slotId,
+            networkID: networkID,
+            sizes: sizes
+            // To show AD from screenwidth >= 1200
+            , sizeMapping: [{ viewport: [1200, 0], sizes: sizes }, { viewport: [0, 0], sizes: [0, 0] }],
+            adUnit: adUnit,
+            targeting: adTargeting
+            /* Passing refresh flag */
+            , refreshFlag: adRefreshFlag
+            /* Passing function to check for ad creative only if it is not in preview. */
+            // checkIsAdFound={previewAd ? null : checkIsAdFound}
+          })
+        ),
+        React__default.createElement(
+          'style',
+          { jsx: 'true' },
+          '\n            /* setting height to 0px when the ad slot is empty. */\n            .webcast-ad-wrapper div[id*=\'google_ads_iframe\']:empty {\n              height: 0px !important;\n            }\n          '
+        )
+      )
+    );
+  } else return null;
+};
+
+export { ADWebcast as default };

package/dist/esm/ADWelcome.js

@@ -0,0 +1,160 @@
+import { _ as _slicedToArray } from './slicedToArray-72ed566b.js';
+import React__default, { useState, useEffect } from 'react';
+import DFPAdSlot from './AdSlot.js';
+import './_commonjsHelpers-0c4b6f40.js';
+import './web.dom.iterable-3fffc027.js';
+import './core.get-iterator-method-95db387d.js';
+import './extends-2f4448b8.js';
+import 'prop-types';
+import './index-5cc7b406.js';
+import './debounce-533d9748.js';
+import './isSymbol-a7e9aafe.js';
+import './toNumber-5aeba6e7.js';
+import './Beam.js';
+import './stringify-1e2a5946.js';
+import './asyncToGenerator-1ebeb135.js';
+import './_library-528f1934.js';
+import './_set-species-7d3317b7.js';
+import './_iter-detect-2f89237f.js';
+import './Segment.js';
+import './main-754d4992.js';
+
+var ADWelcome = function ADWelcome(_ref) {
+  var title = _ref.title,
+      welcomeAd = _ref.welcomeAd,
+      setFlag = _ref.setFlag,
+      Website = _ref.Website,
+      counter = _ref.counter;
+  var className = welcomeAd.className,
+      slotId = welcomeAd.slotId,
+      adUnit = welcomeAd.adUnit,
+      _welcomeAd$targeting = welcomeAd.targeting,
+      targeting = _welcomeAd$targeting === undefined ? {} : _welcomeAd$targeting,
+      _welcomeAd$position = welcomeAd.position,
+      position = _welcomeAd$position === undefined ? 'welcome' : _welcomeAd$position,
+      networkID = welcomeAd.networkID,
+      sizes = welcomeAd.sizes;
+
+  var adTargeting = {
+    content_placement: targeting.content_placement,
+    tags: targeting.tags,
+    document_group: targeting.document_group,
+    document_url: targeting.document_url,
+    pos: position,
+    rootDocumentGroup: targeting.rootDocumentGroup,
+    campaign_id: targeting.campaign_id,
+    issue_url: targeting.issue_url,
+    publication_url: targeting.publication_url
+  };
+
+  var calculateTimeLeft = function calculateTimeLeft(timeLeft) {
+    return --timeLeft;
+  };
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      timeLeft = _useState2[0],
+      setTimeLeft = _useState2[1];
+
+  useEffect(function () {
+    if (timeLeft !== null) {
+      if (timeLeft > 0) {
+        setTimeout(function () {
+          setTimeLeft(calculateTimeLeft(timeLeft));
+        }, 1000);
+      } else {
+        document.body.style.overflow = 'auto';
+        setFlag(true);
+      }
+    }
+  }, [timeLeft]);
+  useEffect(function () {
+    var adBlockDetected = function adBlockDetected() {
+      console.log('ADBLOCKER DETECTED');
+      document.body.style.overflow = 'auto';
+      setFlag(true);
+    };
+    fetch('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js').then('', function () {
+      adBlockDetected();
+    });
+  }, []);
+  var checkIsAdFound = function checkIsAdFound(isFound, adData) {
+    if (isFound) {
+      var parent = document.getElementById('welcome-modal');
+      document.body.style.overflow = 'hidden';
+      parent.style.display = 'block';
+      parent.style.opacity = '1';
+      setTimeLeft(counter);
+    } else {
+      document.body.style.overflow = 'auto';
+      setFlag(true);
+    }
+  };
+
+  return (
+    // Setting welcome ad to display:none and Setting to display:block after checking for cookie in site level.
+    React__default.createElement(
+      'div',
+      { style: { outline: 'none', display: 'none' }, className: 'welcome-modal', id: 'welcome-modal' },
+      React__default.createElement(
+        'div',
+        { className: 'welcome-ad-head-wrapper' },
+        React__default.createElement(
+          'div',
+          { className: 'left-top' },
+          React__default.createElement('img', { style: { width: '100%' }, src: Website.logo, alt: Website.title })
+        ),
+        React__default.createElement(
+          'div',
+          { className: 'right-top' },
+          React__default.createElement(
+            'span',
+            {
+              className: 'continue-site',
+              style: {
+                fontSize: '1.2rem',
+                fontWeight: 'bold',
+                fontFamily: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"
+              },
+              onClick: function onClick() {
+                document.body.style.overflow = 'auto';
+                setFlag(true);
+              } },
+            'CONTINUE TO SITE'
+          ),
+          React__default.createElement(
+            'p',
+            {
+              style: {
+                fontSize: '0.8rem',
+                fontFamily: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"
+              },
+              className: 'timer-block' },
+            'OR WAIT ' + timeLeft + ' SECS'
+          )
+        )
+      ),
+      React__default.createElement(
+        'div',
+        { className: title },
+        React__default.createElement(DFPAdSlot, {
+          className: className,
+          slotId: slotId,
+          networkID: networkID,
+          sizes: sizes,
+          adUnit: adUnit,
+          targeting: adTargeting,
+          refreshFlag: false,
+          checkIsAdFound: checkIsAdFound
+        })
+      ),
+      React__default.createElement(
+        'style',
+        { jsx: 'true' },
+        '\n        .continue-site:hover {\n          cursor: pointer;\n        }\n\n        .welcome-modal {\n          max-width: 100% !important;\n          margin: 0px !important;\n          height: 100vh;\n        }\n        .welcome-ad-head-wrapper {\n          display: flex;\n          justify-content: space-between;\n        }\n        .right-top {\n          max-width: 250px;\n          padding: 10px;\n        }\n        .left-top {\n          max-width: 250px;\n          padding: 10px;\n        }\n        .' + title + ' {\n          width: auto !important;\n          padding-top: 25px;\n          justify-content: center;\n          align-items: center;\n          display: flex;\n        }\n        /* setting height to 0px when the ad slot is empty. */\n        .' + title + ' div[id*=\'google_ads_iframe\']:empty {\n          height: 0px !important;\n        }\n      '
+      )
+    )
+  );
+};
+
+export { ADWelcome as default };

package/dist/esm/ADlgInfeed-30649360.js

@@ -0,0 +1,63 @@
+import { _ as _slicedToArray } from './slicedToArray-72ed566b.js';
+import React__default, { useState, useEffect } from 'react';
+import 'react-bootstrap/Card';
+import DFPAdSlot from './AdSlot.js';
+import { d as main_22 } from './main-754d4992.js';
+
+var ADlgInfeed = function ADlgInfeed(props) {
+  var className = props.className,
+      slotId = props.slotId,
+      adUnit = props.adUnit,
+      _props$targeting = props.targeting,
+      targeting = _props$targeting === undefined ? {} : _props$targeting,
+      networkID = props.networkID,
+      sizes = props.sizes,
+      index = props.index,
+      _props$refreshFlag = props.refreshFlag,
+      refreshFlag = _props$refreshFlag === undefined ? false : _props$refreshFlag;
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2);
+      _useState2[0];
+      var setPreviewAd = _useState2[1];
+
+  var _useState3 = useState(refreshFlag),
+      _useState4 = _slicedToArray(_useState3, 2),
+      adRefreshFlag = _useState4[0],
+      setAdRefreshFlag = _useState4[1];
+
+  useEffect(function () {
+    var path = window && window.location && window.location.search;
+    // Setting flag for Ad-preview URLs
+    setPreviewAd(path.split('&').some(function (param) {
+      return param.includes('creativeId');
+    }));
+    if (main_22.toLowerCase().indexOf('adwallet') >= 0) {
+      setAdRefreshFlag(false);
+    }
+  }, []);
+
+  return React__default.createElement(
+    'div',
+    { id: 'lg-infeed-wrapper-' + (index + 1), className: 'lg-infeed-wrapper', style: { display: 'flex', flex: '1 0 auto' } },
+    React__default.createElement(DFPAdSlot, {
+      className: className,
+      networkID: networkID,
+      adUnit: adUnit,
+      slotId: slotId,
+      targeting: targeting,
+      sizes: sizes
+      /* Passing function to check for ad creative only if it is not in preview. */
+      // checkIsAdFound={previewAd ? null : checkIsAdFound}
+      /* Passing refresh flag */
+      , refreshFlag: adRefreshFlag
+    }),
+    React__default.createElement(
+      'style',
+      { jsx: 'true' },
+      '\n        .lg-infeed-wrapper {\n          flex-direction: row;\n          margin-bottom: 1.25rem;\n          padding-bottom: 1.25rem;\n          border-bottom: 1px solid rgb(221, 221, 221);\n        }\n        .lg-infeed-wrapper div[id*=\'google_ads_iframe\']:empty {\n          height: 0px !important;\n        }\n      '
+    )
+  );
+};
+
+export { ADlgInfeed as A };

package/dist/esm/AccordionPanel.js

@@ -0,0 +1,87 @@
+import { _ as _slicedToArray } from './slicedToArray-72ed566b.js';
+import React__default, { useState } from 'react';
+import Accordion from 'react-bootstrap/Accordion';
+import { useAccordionToggle } from 'react-bootstrap/AccordionToggle';
+import { a as IoMdArrowDropdown } from './index.esm-eb1e8e80.js';
+import './_commonjsHelpers-0c4b6f40.js';
+import './web.dom.iterable-3fffc027.js';
+import './core.get-iterator-method-95db387d.js';
+import './iconBase-ccc56b97.js';
+
+var AccordionPanel = function AccordionPanel(props) {
+  var accordionClassName = props.accordionClassName,
+      data = props.data;
+
+  var _useState = useState('0'),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeAccordionKey = _useState2[0],
+      setaAtiveAccordionKey = _useState2[1];
+
+  var handleAccordion = function handleAccordion(id) {
+    setaAtiveAccordionKey(id);
+  };
+
+  var CustomToggle = function CustomToggle(_ref) {
+    var children = _ref.children,
+        eventKey = _ref.eventKey;
+
+    var decoratedOnClick = useAccordionToggle(eventKey, function () {
+      return handleAccordion(eventKey);
+    });
+    return React__default.createElement(
+      'div',
+      { onMouseEnter: decoratedOnClick, className: 'accordion-head' },
+      children
+    );
+  };
+
+  return React__default.createElement(
+    React__default.Fragment,
+    null,
+    data && data.length && React__default.createElement(
+      Accordion,
+      { defaultActiveKey: '0', activeKey: activeAccordionKey, className: accordionClassName },
+      data.map(function (item) {
+        return React__default.createElement(
+          React__default.Fragment,
+          null,
+          React__default.createElement(
+            CustomToggle,
+            { key: item.id, eventKey: item.id },
+            React__default.createElement(
+              'a',
+              { href: item.url },
+              React__default.createElement(
+                React__default.Fragment,
+                null,
+                item.title,
+                item.subItems && React__default.createElement(IoMdArrowDropdown, null)
+              )
+            )
+          ),
+          React__default.createElement(
+            Accordion.Collapse,
+            { eventKey: item.id },
+            React__default.createElement(
+              'div',
+              null,
+              item.subItems && item.subItems.map(function (subItem) {
+                return React__default.createElement(
+                  'a',
+                  { href: subItem.url },
+                  React__default.createElement(
+                    'div',
+                    { key: subItem.id, className: 'accordion-sub-item' },
+                    subItem.title
+                  )
+                );
+              })
+            )
+          )
+        );
+      })
+    )
+  );
+};
+
+export { AccordionPanel as default };