@blaze-cms/react-page-builder 0.146.0-core-styles.60 → 0.146.0-core-styles.62

package/lib-es/components/MenuItem/MenuItemRender.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
@@ -35,6 +36,7 @@ const MenuItemRender = ({
   const isActive = router ? isUrlPathMatch(router.asPath, urlToUse) : false;
   const isActiveParent = router ? hasActiveChild(router.asPath, children) : false;
   const shouldPreOpen = openActiveSubmenus && isActiveParent && isClickEvent;
+  const hasValidChildren = hasChildren(children);
   const [displayChildren, setDisplayChildren] = useState(shouldPreOpen);
   useEffect(() => {
     if (!showMobileMenu && !shouldPreOpen) setDisplayChildren(false);
@@ -58,7 +60,11 @@ const MenuItemRender = ({
       }
     }
   };
-  const hasValidChildren = hasChildren(children);
+  const handleMobileClick = () => {
+    if (!urlToUse && hasValidChildren) {
+      setDisplayChildren(!displayChildren);
+    }
+  };
   const menuItemLinkClassname = classnames('menu--item--link', {
     'menu--item--link--active': isActive,
     'menu--item--link--active-parent': isActiveParent
@@ -68,7 +74,10 @@ const MenuItemRender = ({
     onMouseEnter: handleItemEvent,
     onMouseLeave: handleItemEvent
   }, /*#__PURE__*/React.createElement("div", {
-    className: menuItemLinkClassname
+    className: menuItemLinkClassname,
+    onClick: handleMobileClick,
+    role: !urlToUse && hasValidChildren ? 'button' : undefined,
+    tabIndex: !urlToUse && hasValidChildren ? 0 : undefined
   }, urlToUse ? /*#__PURE__*/React.createElement(BlazeLink, {
     href: urlToUse
   }, textToUse) : /*#__PURE__*/React.createElement("span", {
@@ -77,7 +86,11 @@ const MenuItemRender = ({
   }, textToUse), hasValidChildren && /*#__PURE__*/React.createElement("i", {
     role: "button",
     className: "menu--item--link--icon",
-    onClick: () => setDisplayChildren(!displayChildren)
+    onClick: e => {
+      e.stopPropagation();
+      setDisplayChildren(!displayChildren);
+    },
+    tabIndex: 0
   }, displayChildren ? /*#__PURE__*/React.createElement(FaChevronUp, null) : /*#__PURE__*/React.createElement(FaChevronDown, null))), hasValidChildren && /*#__PURE__*/React.createElement("div", {
     className: `menu--item-children ${childrenDisplayClass}`
   }, children));

package/lib-es/components/MenuItem/MenuItemRender.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemRender.js","names":["React","useState","useContext","useEffect","PropTypes","FaChevronDown","FaChevronUp","classnames","useRouter","useStringTemplate","HOVER","MOUSE_ENTER","MOUSE_LEAVE","HIDDEN","CLICK","hasChildren","BlazeLink","MenuContext","injectHelperIntoTemplate","isUrlPathMatch","hasActiveChild","MenuItemRender","children","eventType","text","modifier","url","parent","router","showMobileMenu","openActiveSubmenus","isHoverEvent","isClickEvent","loading","loadingText","data","textToUse","loadingUrl","urlToUse","isActive","asPath","isActiveParent","shouldPreOpen","displayChildren","setDisplayChildren","childrenDisplayClass","handleItemEvent","type","hasValidChildren","menuItemLinkClassname","createElement","className","onMouseEnter","onMouseLeave","href","role","onClick","propTypes","string","isRequired","object","oneOfType","arrayOf","node","defaultProps"],"sources":["../../../src/components/MenuItem/MenuItemRender.js"],"sourcesContent":["import React, { useState, useContext, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { FaChevronDown, FaChevronUp } from 'react-icons/fa';\nimport classnames from 'classnames';\nimport { useRouter } from 'next/router';\nimport { useStringTemplate } from '@blaze-cms/utils-handlebars';\nimport { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN, CLICK } from '../../constants';\nimport { hasChildren } from '../../helpers';\nimport BlazeLink from '../BlazeLink';\nimport MenuContext from '../Menu/MenuContext';\nimport { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild } from './helpers';\n\nconst MenuItemRender = ({ children, eventType, text, modifier, url, parent }) => {\n  const router = useRouter();\n  const { showMobileMenu, openActiveSubmenus } = useContext(MenuContext);\n\n  const isHoverEvent = eventType === HOVER;\n  const isClickEvent = eventType === CLICK;\n\n  const {\n    loading: loadingText,\n    data: [textToUse]\n  } = useStringTemplate(parent, [text]);\n  const {\n    loading: loadingUrl,\n    data: [urlToUse]\n  } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);\n\n  const isActive = router ? isUrlPathMatch(router.asPath, urlToUse) : false;\n  const isActiveParent = router ? hasActiveChild(router.asPath, children) : false;\n  const shouldPreOpen = openActiveSubmenus && isActiveParent && isClickEvent;\n\n  const [displayChildren, setDisplayChildren] = useState(shouldPreOpen);\n\n  useEffect(\n    () => {\n      if (!showMobileMenu && !shouldPreOpen) setDisplayChildren(false);\n    },\n    [children, isClickEvent, loadingUrl, openActiveSubmenus, router, shouldPreOpen, showMobileMenu]\n  );\n\n  useEffect(\n    () => {\n      if (isHoverEvent) {\n        setDisplayChildren(false);\n      }\n    },\n    [router.asPath, isHoverEvent]\n  );\n\n  if (loadingUrl || loadingText) return '';\n\n  const childrenDisplayClass = displayChildren ? '' : HIDDEN;\n\n  const handleItemEvent = ({ type }) => {\n    if (isHoverEvent) {\n      if (type === MOUSE_ENTER) {\n        setDisplayChildren(true);\n      }\n      if (type === MOUSE_LEAVE) {\n        setDisplayChildren(false);\n      }\n    }\n  };\n\n  const hasValidChildren = hasChildren(children);\n\n  const menuItemLinkClassname = classnames('menu--item--link', {\n    'menu--item--link--active': isActive,\n    'menu--item--link--active-parent': isActiveParent\n  });\n\n  return (\n    <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>\n      <div className={menuItemLinkClassname}>\n        {urlToUse ? (\n          <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>\n        ) : (\n          <span role=\"button\" onClick={handleItemEvent}>\n            {textToUse}\n          </span>\n        )}\n        {hasValidChildren && (\n          <i\n            role=\"button\"\n            className=\"menu--item--link--icon\"\n            onClick={() => setDisplayChildren(!displayChildren)}>\n            {displayChildren ? <FaChevronUp /> : <FaChevronDown />}\n          </i>\n        )}\n      </div>\n\n      {hasValidChildren && (\n        <div className={`menu--item-children ${childrenDisplayClass}`}>{children}</div>\n      )}\n    </li>\n  );\n};\n\nMenuItemRender.propTypes = {\n  modifier: PropTypes.string,\n  text: PropTypes.string,\n  url: PropTypes.string,\n  eventType: PropTypes.string.isRequired,\n  parent: PropTypes.object,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])\n};\n\nMenuItemRender.defaultProps = {\n  url: '',\n  modifier: '',\n  text: '',\n  children: null,\n  parent: {}\n};\n\nexport default MenuItemRender;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MenuItemRender.js","names":["React","useState","useContext","useEffect","PropTypes","FaChevronDown","FaChevronUp","classnames","useRouter","useStringTemplate","HOVER","MOUSE_ENTER","MOUSE_LEAVE","HIDDEN","CLICK","hasChildren","BlazeLink","MenuContext","injectHelperIntoTemplate","isUrlPathMatch","hasActiveChild","MenuItemRender","children","eventType","text","modifier","url","parent","router","showMobileMenu","openActiveSubmenus","isHoverEvent","isClickEvent","loading","loadingText","data","textToUse","loadingUrl","urlToUse","isActive","asPath","isActiveParent","shouldPreOpen","hasValidChildren","displayChildren","setDisplayChildren","childrenDisplayClass","handleItemEvent","type","handleMobileClick","menuItemLinkClassname","createElement","className","onMouseEnter","onMouseLeave","onClick","role","undefined","tabIndex","href","e","stopPropagation","propTypes","string","isRequired","object","oneOfType","arrayOf","node","defaultProps"],"sources":["../../../src/components/MenuItem/MenuItemRender.js"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { useState, useContext, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { FaChevronDown, FaChevronUp } from 'react-icons/fa';\nimport classnames from 'classnames';\nimport { useRouter } from 'next/router';\nimport { useStringTemplate } from '@blaze-cms/utils-handlebars';\nimport { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN, CLICK } from '../../constants';\nimport { hasChildren } from '../../helpers';\nimport BlazeLink from '../BlazeLink';\nimport MenuContext from '../Menu/MenuContext';\nimport { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild } from './helpers';\n\nconst MenuItemRender = ({ children, eventType, text, modifier, url, parent }) => {\n  const router = useRouter();\n  const { showMobileMenu, openActiveSubmenus } = useContext(MenuContext);\n\n  const isHoverEvent = eventType === HOVER;\n  const isClickEvent = eventType === CLICK;\n\n  const {\n    loading: loadingText,\n    data: [textToUse]\n  } = useStringTemplate(parent, [text]);\n  const {\n    loading: loadingUrl,\n    data: [urlToUse]\n  } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);\n\n  const isActive = router ? isUrlPathMatch(router.asPath, urlToUse) : false;\n  const isActiveParent = router ? hasActiveChild(router.asPath, children) : false;\n  const shouldPreOpen = openActiveSubmenus && isActiveParent && isClickEvent;\n  const hasValidChildren = hasChildren(children);\n\n  const [displayChildren, setDisplayChildren] = useState(shouldPreOpen);\n\n  useEffect(\n    () => {\n      if (!showMobileMenu && !shouldPreOpen) setDisplayChildren(false);\n    },\n    [children, isClickEvent, loadingUrl, openActiveSubmenus, router, shouldPreOpen, showMobileMenu]\n  );\n\n  useEffect(\n    () => {\n      if (isHoverEvent) {\n        setDisplayChildren(false);\n      }\n    },\n    [router.asPath, isHoverEvent]\n  );\n\n  if (loadingUrl || loadingText) return '';\n\n  const childrenDisplayClass = displayChildren ? '' : HIDDEN;\n\n  const handleItemEvent = ({ type }) => {\n    if (isHoverEvent) {\n      if (type === MOUSE_ENTER) {\n        setDisplayChildren(true);\n      }\n      if (type === MOUSE_LEAVE) {\n        setDisplayChildren(false);\n      }\n    }\n  };\n\n  const handleMobileClick = () => {\n    if (!urlToUse && hasValidChildren) {\n      setDisplayChildren(!displayChildren);\n    }\n  };\n\n  const menuItemLinkClassname = classnames('menu--item--link', {\n    'menu--item--link--active': isActive,\n    'menu--item--link--active-parent': isActiveParent\n  });\n\n  return (\n    <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>\n      <div\n        className={menuItemLinkClassname}\n        onClick={handleMobileClick}\n        role={!urlToUse && hasValidChildren ? 'button' : undefined}\n        tabIndex={!urlToUse && hasValidChildren ? 0 : undefined}>\n        {urlToUse ? (\n          <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>\n        ) : (\n          <span role=\"button\" onClick={handleItemEvent}>\n            {textToUse}\n          </span>\n        )}\n        {hasValidChildren && (\n          <i\n            role=\"button\"\n            className=\"menu--item--link--icon\"\n            onClick={e => {\n              e.stopPropagation();\n              setDisplayChildren(!displayChildren);\n            }}\n            tabIndex={0}>\n            {displayChildren ? <FaChevronUp /> : <FaChevronDown />}\n          </i>\n        )}\n      </div>\n\n      {hasValidChildren && (\n        <div className={`menu--item-children ${childrenDisplayClass}`}>{children}</div>\n      )}\n    </li>\n  );\n};\n\nMenuItemRender.propTypes = {\n  modifier: PropTypes.string,\n  text: PropTypes.string,\n  url: PropTypes.string,\n  eventType: PropTypes.string.isRequired,\n  parent: PropTypes.object,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])\n};\n\nMenuItemRender.defaultProps = {\n  url: '',\n  modifier: '',\n  text: '',\n  children: null,\n  parent: {}\n};\n\nexport default MenuItemRender;\n"],"mappings":"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","ignoreList":[]}

package/lib-es/hooks/helpers/StoreImages.js

@@ -1,41 +1,55 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+var _images = /*#__PURE__*/new WeakMap();
+var _pageBuilderID = /*#__PURE__*/new WeakMap();
+var _handlers = /*#__PURE__*/new WeakMap();
 class StoreImages {
   constructor() {
-    _defineProperty(this, "removeDuplicated", (images, key) => {
-      this.images = images.map(item => item[key]).map((item, index, final) => final.indexOf(item) === index && index).filter(item => images[item]).map(item => images[item]);
+    _classPrivateFieldInitSpec(this, _images, []);
+    _classPrivateFieldInitSpec(this, _pageBuilderID, null);
+    _classPrivateFieldInitSpec(this, _handlers, {
+      toggleModal: () => {},
+      onSelect: () => {}
     });
-    _defineProperty(this, "handleSelectedImage", imageId => {
-      const index = this.images.findIndex(image => image.imageId === imageId);
-      if (index !== -1) {
-        this.setSelectedImage(index);
-      }
-    });
-    _defineProperty(this, "setHandlers", ({
-      toggleModal = this.toggleModal,
-      setSelectedImage = this.setSelectedImage
-    }) => {
-      this.toggleModal = toggleModal;
-      this.setSelectedImage = setSelectedImage;
+    _defineProperty(this, "toggleModal", () => {
+      _classPrivateFieldGet(_handlers, this).toggleModal();
     });
-    _defineProperty(this, "addImages", (images, options = {}) => {
-      if (!images.length) return this.images;
-      const {
-        pageBuilderID
-      } = options;
-      if (pageBuilderID !== this.id) {
-        this.resetImages();
-        this.id = pageBuilderID;
-      }
-      this.removeDuplicated(this.images.concat(images), 'imageId');
-      return this.images;
+    _defineProperty(this, "handleSelectedImage", imageId => {
+      const idx = _classPrivateFieldGet(_images, this).findIndex(img => img.imageId === imageId);
+      if (idx !== -1) _classPrivateFieldGet(_handlers, this).onSelect(idx);
     });
-    this.images = [];
-    this.id = null;
-    this.toggleModal = () => {};
-    this.setSelectedImage = () => {};
+  }
+  get images() {
+    return [..._classPrivateFieldGet(_images, this)];
   }
   resetImages() {
-    this.images = [];
+    _classPrivateFieldSet(_images, this, []);
+  }
+  setHandlers({
+    toggleModal,
+    setSelectedImage
+  }) {
+    if (typeof toggleModal === 'function') _classPrivateFieldGet(_handlers, this).toggleModal = toggleModal;
+    if (typeof setSelectedImage === 'function') _classPrivateFieldGet(_handlers, this).onSelect = setSelectedImage;
+  }
+  addImages(newImages, {
+    pageBuilderID
+  } = {}, handlers = {}) {
+    if (!Array.isArray(newImages) || newImages.length === 0) {
+      return this.images;
+    }
+    if (pageBuilderID != null && pageBuilderID !== _classPrivateFieldGet(_pageBuilderID, this)) {
+      this.resetImages();
+      _classPrivateFieldSet(_pageBuilderID, this, pageBuilderID);
+    }
+    const merged = _classPrivateFieldGet(_images, this).concat(newImages);
+    _classPrivateFieldSet(_images, this, Array.from(new Map(merged.map(img => [img.imageId, img])).values()));
+    this.setHandlers(handlers);
+    return this.images;
   }
 }
 export default new StoreImages();

package/lib-es/hooks/helpers/StoreImages.js.map

@@ -1 +1 @@
-{"version":3,"file":"StoreImages.js","names":["StoreImages","constructor","_defineProperty","images","key","map","item","index","final","indexOf","filter","imageId","findIndex","image","setSelectedImage","toggleModal","options","length","pageBuilderID","id","resetImages","removeDuplicated","concat"],"sources":["../../../src/hooks/helpers/StoreImages.js"],"sourcesContent":["class StoreImages {\n  constructor() {\n    this.images = [];\n    this.id = null;\n    this.toggleModal = () => {};\n    this.setSelectedImage = () => {};\n  }\n\n  resetImages() {\n    this.images = [];\n  }\n\n  removeDuplicated = (images, key) => {\n    this.images = images\n      .map(item => item[key])\n      .map((item, index, final) => final.indexOf(item) === index && index)\n      .filter(item => images[item])\n      .map(item => images[item]);\n  };\n\n  handleSelectedImage = imageId => {\n    const index = this.images.findIndex(image => image.imageId === imageId);\n    if (index !== -1) {\n      this.setSelectedImage(index);\n    }\n  };\n\n  setHandlers = ({ toggleModal = this.toggleModal, setSelectedImage = this.setSelectedImage }) => {\n    this.toggleModal = toggleModal;\n    this.setSelectedImage = setSelectedImage;\n  };\n\n  addImages = (images, options = {}) => {\n    if (!images.length) return this.images;\n\n    const { pageBuilderID } = options;\n\n    if (pageBuilderID !== this.id) {\n      this.resetImages();\n      this.id = pageBuilderID;\n    }\n\n    this.removeDuplicated(this.images.concat(images), 'imageId');\n\n    return this.images;\n  };\n}\n\nexport default new StoreImages();\n"],"mappings":";AAAA,MAAMA,WAAW,CAAC;EAChBC,WAAWA,CAAA,EAAG;IAAAC,eAAA,2BAWK,CAACC,MAAM,EAAEC,GAAG,KAAK;MAClC,IAAI,CAACD,MAAM,GAAGA,MAAM,CACjBE,GAAG,CAACC,IAAI,IAAIA,IAAI,CAACF,GAAG,CAAC,CAAC,CACtBC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,EAAEC,KAAK,KAAKA,KAAK,CAACC,OAAO,CAACH,IAAI,CAAC,KAAKC,KAAK,IAAIA,KAAK,CAAC,CACnEG,MAAM,CAACJ,IAAI,IAAIH,MAAM,CAACG,IAAI,CAAC,CAAC,CAC5BD,GAAG,CAACC,IAAI,IAAIH,MAAM,CAACG,IAAI,CAAC,CAAC;IAC9B,CAAC;IAAAJ,eAAA,8BAEqBS,OAAO,IAAI;MAC/B,MAAMJ,KAAK,GAAG,IAAI,CAACJ,MAAM,CAACS,SAAS,CAACC,KAAK,IAAIA,KAAK,CAACF,OAAO,KAAKA,OAAO,CAAC;MACvE,IAAIJ,KAAK,KAAK,CAAC,CAAC,EAAE;QAChB,IAAI,CAACO,gBAAgB,CAACP,KAAK,CAAC;MAC9B;IACF,CAAC;IAAAL,eAAA,sBAEa,CAAC;MAAEa,WAAW,GAAG,IAAI,CAACA,WAAW;MAAED,gBAAgB,GAAG,IAAI,CAACA;IAAiB,CAAC,KAAK;MAC9F,IAAI,CAACC,WAAW,GAAGA,WAAW;MAC9B,IAAI,CAACD,gBAAgB,GAAGA,gBAAgB;IAC1C,CAAC;IAAAZ,eAAA,oBAEW,CAACC,MAAM,EAAEa,OAAO,GAAG,CAAC,CAAC,KAAK;MACpC,IAAI,CAACb,MAAM,CAACc,MAAM,EAAE,OAAO,IAAI,CAACd,MAAM;MAEtC,MAAM;QAAEe;MAAc,CAAC,GAAGF,OAAO;MAEjC,IAAIE,aAAa,KAAK,IAAI,CAACC,EAAE,EAAE;QAC7B,IAAI,CAACC,WAAW,CAAC,CAAC;QAClB,IAAI,CAACD,EAAE,GAAGD,aAAa;MACzB;MAEA,IAAI,CAACG,gBAAgB,CAAC,IAAI,CAAClB,MAAM,CAACmB,MAAM,CAACnB,MAAM,CAAC,EAAE,SAAS,CAAC;MAE5D,OAAO,IAAI,CAACA,MAAM;IACpB,CAAC;IA3CC,IAAI,CAACA,MAAM,GAAG,EAAE;IAChB,IAAI,CAACgB,EAAE,GAAG,IAAI;IACd,IAAI,CAACJ,WAAW,GAAG,MAAM,CAAC,CAAC;IAC3B,IAAI,CAACD,gBAAgB,GAAG,MAAM,CAAC,CAAC;EAClC;EAEAM,WAAWA,CAAA,EAAG;IACZ,IAAI,CAACjB,MAAM,GAAG,EAAE;EAClB;AAoCF;AAEA,eAAe,IAAIH,WAAW,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"StoreImages.js","names":["StoreImages","constructor","_classPrivateFieldInitSpec","_images","_pageBuilderID","_handlers","toggleModal","onSelect","_defineProperty","_classPrivateFieldGet","imageId","idx","findIndex","img","images","resetImages","_classPrivateFieldSet","setHandlers","setSelectedImage","addImages","newImages","pageBuilderID","handlers","Array","isArray","length","merged","concat","from","Map","map","values"],"sources":["../../../src/hooks/helpers/StoreImages.js"],"sourcesContent":["class StoreImages {\n  #images = [];\n\n  #pageBuilderID = null;\n\n  #handlers = {\n    toggleModal: () => {},\n    onSelect: () => {}\n  };\n\n  get images() {\n    return [...this.#images];\n  }\n\n  resetImages() {\n    this.#images = [];\n  }\n\n  setHandlers({ toggleModal, setSelectedImage }) {\n    if (typeof toggleModal === 'function') this.#handlers.toggleModal = toggleModal;\n    if (typeof setSelectedImage === 'function') this.#handlers.onSelect = setSelectedImage;\n  }\n\n  addImages(newImages, { pageBuilderID } = {}, handlers = {}) {\n    if (!Array.isArray(newImages) || newImages.length === 0) {\n      return this.images;\n    }\n\n    if (pageBuilderID != null && pageBuilderID !== this.#pageBuilderID) {\n      this.resetImages();\n      this.#pageBuilderID = pageBuilderID;\n    }\n\n    const merged = this.#images.concat(newImages);\n    this.#images = Array.from(new Map(merged.map(img => [img.imageId, img])).values());\n\n    this.setHandlers(handlers);\n    return this.images;\n  }\n\n  toggleModal = () => {\n    this.#handlers.toggleModal();\n  };\n\n  handleSelectedImage = imageId => {\n    const idx = this.#images.findIndex(img => img.imageId === imageId);\n    if (idx !== -1) this.#handlers.onSelect(idx);\n  };\n}\n\nexport default new StoreImages();\n"],"mappings":";;;;;;;;;AAAA,MAAMA,WAAW,CAAC;EAAAC,YAAA;IAChBC,0BAAA,OAAAC,OAAO,EAAG,EAAE;IAEZD,0BAAA,OAAAE,cAAc,EAAG,IAAI;IAErBF,0BAAA,OAAAG,SAAS,EAAG;MACVC,WAAW,EAAEA,CAAA,KAAM,CAAC,CAAC;MACrBC,QAAQ,EAAEA,CAAA,KAAM,CAAC;IACnB,CAAC;IAACC,eAAA,sBAgCY,MAAM;MAClBC,qBAAA,CAAKJ,SAAS,EAAd,IAAa,CAAC,CAACC,WAAW,CAAC,CAAC;IAC9B,CAAC;IAAAE,eAAA,8BAEqBE,OAAO,IAAI;MAC/B,MAAMC,GAAG,GAAGF,qBAAA,CAAKN,OAAO,EAAZ,IAAW,CAAC,CAACS,SAAS,CAACC,GAAG,IAAIA,GAAG,CAACH,OAAO,KAAKA,OAAO,CAAC;MAClE,IAAIC,GAAG,KAAK,CAAC,CAAC,EAAEF,qBAAA,CAAKJ,SAAS,EAAd,IAAa,CAAC,CAACE,QAAQ,CAACI,GAAG,CAAC;IAC9C,CAAC;EAAA;EArCD,IAAIG,MAAMA,CAAA,EAAG;IACX,OAAO,CAAC,GAAGL,qBAAA,CAAKN,OAAO,EAAZ,IAAW,CAAC,CAAC;EAC1B;EAEAY,WAAWA,CAAA,EAAG;IACZC,qBAAA,CAAKb,OAAO,EAAZ,IAAI,EAAW,EAAJ,CAAC;EACd;EAEAc,WAAWA,CAAC;IAAEX,WAAW;IAAEY;EAAiB,CAAC,EAAE;IAC7C,IAAI,OAAOZ,WAAW,KAAK,UAAU,EAAEG,qBAAA,CAAKJ,SAAS,EAAd,IAAa,CAAC,CAACC,WAAW,GAAGA,WAAW;IAC/E,IAAI,OAAOY,gBAAgB,KAAK,UAAU,EAAET,qBAAA,CAAKJ,SAAS,EAAd,IAAa,CAAC,CAACE,QAAQ,GAAGW,gBAAgB;EACxF;EAEAC,SAASA,CAACC,SAAS,EAAE;IAAEC;EAAc,CAAC,GAAG,CAAC,CAAC,EAAEC,QAAQ,GAAG,CAAC,CAAC,EAAE;IAC1D,IAAI,CAACC,KAAK,CAACC,OAAO,CAACJ,SAAS,CAAC,IAAIA,SAAS,CAACK,MAAM,KAAK,CAAC,EAAE;MACvD,OAAO,IAAI,CAACX,MAAM;IACpB;IAEA,IAAIO,aAAa,IAAI,IAAI,IAAIA,aAAa,KAAKZ,qBAAA,CAAKL,cAAc,EAAnB,IAAkB,CAAC,EAAE;MAClE,IAAI,CAACW,WAAW,CAAC,CAAC;MAClBC,qBAAA,CAAKZ,cAAc,EAAnB,IAAI,EAAkBiB,aAAJ,CAAC;IACrB;IAEA,MAAMK,MAAM,GAAGjB,qBAAA,CAAKN,OAAO,EAAZ,IAAW,CAAC,CAACwB,MAAM,CAACP,SAAS,CAAC;IAC7CJ,qBAAA,CAAKb,OAAO,EAAZ,IAAI,EAAWoB,KAAK,CAACK,IAAI,CAAC,IAAIC,GAAG,CAACH,MAAM,CAACI,GAAG,CAACjB,GAAG,IAAI,CAACA,GAAG,CAACH,OAAO,EAAEG,GAAG,CAAC,CAAC,CAAC,CAACkB,MAAM,CAAC,CAAC,CAAtE,CAAC;IAEZ,IAAI,CAACd,WAAW,CAACK,QAAQ,CAAC;IAC1B,OAAO,IAAI,CAACR,MAAM;EACpB;AAUF;AAEA,eAAe,IAAId,WAAW,CAAC,CAAC","ignoreList":[]}

package/lib-es/variants/LiveBlogList/LiveBlogList.js

@@ -5,13 +5,14 @@ import Button from '@blaze-react/button';
 import { FaPlus, FaMinus } from 'react-icons/fa';
 import { BsPinAngleFill } from 'react-icons/bs';
 dayjs.extend(relativeTime);
-const LiveBlogList = props => {
-  const {
-    children,
-    date,
-    published,
-    featured
-  } = props;
+const COLLAPSE_HEIGHT = 380;
+const LiveBlogList = ({
+  children,
+  date,
+  published,
+  featured,
+  alternativeHeadline
+}) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [shouldShowButton, setShouldShowButton] = useState(false);
   const [{
@@ -19,64 +20,53 @@ const LiveBlogList = props => {
     displayedTime
   }, setDisplayedDate] = useState({
     displayedDate: ' ',
-    displayTime: ''
+    displayedTime: ''
   });
-  const usedDate = date || published;
+  const usedDate = date;
   const contentRef = useRef(null);
   useEffect(() => {
-    const timeout = setTimeout(() => {
-      if (contentRef.current) {
-        const contentHeight = contentRef.current.scrollHeight;
-        if (contentHeight > 380) {
-          setShouldShowButton(true);
-        }
-      }
-    }, 500); // delay to wait for content load
-    // todo: change to use mutation observer
-
-    return () => {
-      clearTimeout(timeout);
-    };
+    const el = contentRef.current;
+    if (!el) return;
+    const check = () => setShouldShowButton(el.scrollHeight > COLLAPSE_HEIGHT);
+    if (typeof ResizeObserver !== 'undefined') {
+      check();
+      const ro = new ResizeObserver(check);
+      ro.observe(el);
+      return () => ro.disconnect();
+    }
+    check();
   }, [children]);
   useEffect(() => {
-    // delay setting time so no SSR issues based on timezone
-    let newDate = '';
-    if (usedDate) {
-      const diffInDays = dayjs().diff(dayjs(usedDate), 'day');
-      if (diffInDays < 1) {
-        newDate = dayjs(usedDate).fromNow();
-      } else if (diffInDays < 365) {
-        newDate = dayjs(usedDate).format('DD MMM');
-      } else {
-        newDate = dayjs(usedDate).format('DD MMM YYYY');
-      }
-      setDisplayedDate({
-        displayedDate: newDate,
-        displayedTime: dayjs(usedDate).format('HH:mm')
-      });
-    }
-  }, [date, published, usedDate]);
-  const toggleExpanded = () => {
-    setIsExpanded(!isExpanded);
-  };
+    if (!usedDate) return;
+    const days = dayjs().diff(dayjs(usedDate), 'day');
+    const lessThanAYear = days < 365;
+    let newDate;
+    if (days < 1) newDate = dayjs(usedDate).fromNow();else if (lessThanAYear) newDate = dayjs(usedDate).format('DD MMM');else newDate = dayjs(usedDate).format('DD MMM YYYY');
+    setDisplayedDate({
+      displayedDate: newDate,
+      displayedTime: lessThanAYear ? dayjs(usedDate).format('HH:mm') : null
+    });
+  }, [usedDate]);
+  const toggleExpanded = () => setIsExpanded(value => !value);
   const isCollapsed = !isExpanded;
-  const baseClass = 'live-blog-container';
-  const modifier = featured ? ` ${baseClass}--featured` : '';
-  const className = `${baseClass}${modifier}`;
+  const showHeader = usedDate || alternativeHeadline || featured;
   return /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, usedDate && /*#__PURE__*/React.createElement("div", {
+    className: `live-blog-container${featured ? ' live-blog-container--featured' : ''}`
+  }, showHeader && /*#__PURE__*/React.createElement("div", {
     className: "live-blog-date"
-  }, featured && /*#__PURE__*/React.createElement(BsPinAngleFill, null), /*#__PURE__*/React.createElement("span", {
+  }, featured && /*#__PURE__*/React.createElement(BsPinAngleFill, null), usedDate && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: "live-blog-date--date"
-  }, displayedDate), /*#__PURE__*/React.createElement("span", {
+  }, displayedDate), displayedTime && /*#__PURE__*/React.createElement("span", {
     className: "live-blog-date--time"
-  }, displayedTime)), /*#__PURE__*/React.createElement("div", {
+  }, displayedTime)), alternativeHeadline && /*#__PURE__*/React.createElement("span", {
+    className: "live-blog-date--headline"
+  }, alternativeHeadline)), /*#__PURE__*/React.createElement("div", {
     ref: contentRef,
-    className: `live-blog-content ${isCollapsed ? 'live-blog-content--collapsed' : 'live-blog-content--opened'}`
+    className: `live-blog-content ${isCollapsed ? 'live-blog-content--collapsed collapsed' : 'live-blog-content--opened opened'}`
   }, children), shouldShowButton && /*#__PURE__*/React.createElement("div", {
     className: "live-blog-button-wrapper"
   }, /*#__PURE__*/React.createElement(Button, {
+    "aria-label": isExpanded ? 'Show Less' : 'Show More',
     className: "live-blog-toggle",
     onClick: toggleExpanded,
     type: "button"

package/lib-es/variants/LiveBlogList/LiveBlogList.js.map

@@ -1 +1 @@
-{"version":3,"file":"LiveBlogList.js","names":["React","useRef","useState","useEffect","dayjs","relativeTime","Button","FaPlus","FaMinus","BsPinAngleFill","extend","LiveBlogList","props","children","date","published","featured","isExpanded","setIsExpanded","shouldShowButton","setShouldShowButton","displayedDate","displayedTime","setDisplayedDate","displayTime","usedDate","contentRef","timeout","setTimeout","current","contentHeight","scrollHeight","clearTimeout","newDate","diffInDays","diff","fromNow","format","toggleExpanded","isCollapsed","baseClass","modifier","className","createElement","ref","onClick","type","Fragment"],"sources":["../../../src/variants/LiveBlogList/LiveBlogList.js"],"sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport dayjs from 'dayjs';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport Button from '@blaze-react/button';\nimport { FaPlus, FaMinus } from 'react-icons/fa';\nimport { BsPinAngleFill } from 'react-icons/bs';\n\ndayjs.extend(relativeTime);\n\nconst LiveBlogList = props => {\n  const { children, date, published, featured } = props;\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [shouldShowButton, setShouldShowButton] = useState(false);\n  const [{ displayedDate, displayedTime }, setDisplayedDate] = useState({\n    displayedDate: '&nbsp;',\n    displayTime: ''\n  });\n  const usedDate = date || published;\n\n  const contentRef = useRef(null);\n\n  useEffect(\n    () => {\n      const timeout = setTimeout(() => {\n        if (contentRef.current) {\n          const contentHeight = contentRef.current.scrollHeight;\n          if (contentHeight > 380) {\n            setShouldShowButton(true);\n          }\n        }\n      }, 500); // delay to wait for content load\n      // todo: change to use mutation observer\n\n      return () => {\n        clearTimeout(timeout);\n      };\n    },\n    [children]\n  );\n\n  useEffect(\n    () => {\n      // delay setting time so no SSR issues based on timezone\n      let newDate = '';\n      if (usedDate) {\n        const diffInDays = dayjs().diff(dayjs(usedDate), 'day');\n        if (diffInDays < 1) {\n          newDate = dayjs(usedDate).fromNow();\n        } else if (diffInDays < 365) {\n          newDate = dayjs(usedDate).format('DD MMM');\n        } else {\n          newDate = dayjs(usedDate).format('DD MMM YYYY');\n        }\n        setDisplayedDate({\n          displayedDate: newDate,\n          displayedTime: dayjs(usedDate).format('HH:mm')\n        });\n      }\n    },\n    [date, published, usedDate]\n  );\n\n  const toggleExpanded = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const isCollapsed = !isExpanded;\n  const baseClass = 'live-blog-container';\n  const modifier = featured ? ` ${baseClass}--featured` : '';\n  const className = `${baseClass}${modifier}`;\n\n  return (\n    <div className={className}>\n      {usedDate && (\n        <div className=\"live-blog-date\">\n          {featured && <BsPinAngleFill />}\n          <span className=\"live-blog-date--date\">{displayedDate}</span>\n          <span className=\"live-blog-date--time\">{displayedTime}</span>\n        </div>\n      )}\n\n      <div\n        ref={contentRef}\n        className={`live-blog-content ${\n          isCollapsed ? 'live-blog-content--collapsed' : 'live-blog-content--opened'\n        }`}>\n        {children}\n      </div>\n\n      {shouldShowButton && (\n        <div className=\"live-blog-button-wrapper\">\n          <Button className=\"live-blog-toggle\" onClick={toggleExpanded} type=\"button\">\n            {isExpanded ? (\n              <>\n                <FaMinus className=\"toggle-icon\" /> Show Less\n              </>\n            ) : (\n              <>\n                <FaPlus className=\"toggle-icon\" /> Show More\n              </>\n            )}\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default LiveBlogList;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"LiveBlogList.js","names":["React","useRef","useState","useEffect","dayjs","relativeTime","Button","FaPlus","FaMinus","BsPinAngleFill","extend","COLLAPSE_HEIGHT","LiveBlogList","children","date","published","featured","alternativeHeadline","isExpanded","setIsExpanded","shouldShowButton","setShouldShowButton","displayedDate","displayedTime","setDisplayedDate","usedDate","contentRef","el","current","check","scrollHeight","ResizeObserver","ro","observe","disconnect","days","diff","lessThanAYear","newDate","fromNow","format","toggleExpanded","value","isCollapsed","showHeader","createElement","className","Fragment","ref","onClick","type"],"sources":["../../../src/variants/LiveBlogList/LiveBlogList.js"],"sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport dayjs from 'dayjs';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport Button from '@blaze-react/button';\nimport { FaPlus, FaMinus } from 'react-icons/fa';\nimport { BsPinAngleFill } from 'react-icons/bs';\n\ndayjs.extend(relativeTime);\n\nconst COLLAPSE_HEIGHT = 380;\n\nconst LiveBlogList = ({ children, date, published, featured, alternativeHeadline }) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [shouldShowButton, setShouldShowButton] = useState(false);\n  const [{ displayedDate, displayedTime }, setDisplayedDate] = useState({\n    displayedDate: '&nbsp;',\n    displayedTime: ''\n  });\n  const usedDate = date;\n  const contentRef = useRef(null);\n\n  useEffect(\n    () => {\n      const el = contentRef.current;\n      if (!el) return;\n\n      const check = () => setShouldShowButton(el.scrollHeight > COLLAPSE_HEIGHT);\n\n      if (typeof ResizeObserver !== 'undefined') {\n        check();\n        const ro = new ResizeObserver(check);\n        ro.observe(el);\n        return () => ro.disconnect();\n      }\n      check();\n    },\n    [children]\n  );\n\n  useEffect(\n    () => {\n      if (!usedDate) return;\n      const days = dayjs().diff(dayjs(usedDate), 'day');\n      const lessThanAYear = days < 365;\n\n      let newDate;\n      if (days < 1) newDate = dayjs(usedDate).fromNow();\n      else if (lessThanAYear) newDate = dayjs(usedDate).format('DD MMM');\n      else newDate = dayjs(usedDate).format('DD MMM YYYY');\n\n      setDisplayedDate({\n        displayedDate: newDate,\n        displayedTime: lessThanAYear ? dayjs(usedDate).format('HH:mm') : null\n      });\n    },\n    [usedDate]\n  );\n\n  const toggleExpanded = () => setIsExpanded(value => !value);\n  const isCollapsed = !isExpanded;\n  const showHeader = usedDate || alternativeHeadline || featured;\n\n  return (\n    <div className={`live-blog-container${featured ? ' live-blog-container--featured' : ''}`}>\n      {showHeader && (\n        <div className=\"live-blog-date\">\n          {featured && <BsPinAngleFill />}\n          {usedDate && (\n            <>\n              <span className=\"live-blog-date--date\">{displayedDate}</span>\n              {displayedTime && <span className=\"live-blog-date--time\">{displayedTime}</span>}\n            </>\n          )}\n          {alternativeHeadline && (\n            <span className=\"live-blog-date--headline\">{alternativeHeadline}</span>\n          )}\n        </div>\n      )}\n\n      <div\n        ref={contentRef}\n        className={`live-blog-content ${\n          isCollapsed\n            ? 'live-blog-content--collapsed collapsed'\n            : 'live-blog-content--opened opened'\n        }`}>\n        {children}\n      </div>\n\n      {shouldShowButton && (\n        <div className=\"live-blog-button-wrapper\">\n          <Button\n            aria-label={isExpanded ? 'Show Less' : 'Show More'}\n            className=\"live-blog-toggle\"\n            onClick={toggleExpanded}\n            type=\"button\">\n            {isExpanded ? (\n              <>\n                <FaMinus className=\"toggle-icon\" /> Show Less\n              </>\n            ) : (\n              <>\n                <FaPlus className=\"toggle-icon\" /> Show More\n              </>\n            )}\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default LiveBlogList;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.146.0-core-styles.60",
+  "version": "0.146.0-core-styles.62",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -32,7 +32,7 @@
     "@blaze-cms/core-errors-ui": "0.145.1-core-styles.0",
     "@blaze-cms/image-cdn-react": "0.3.0-alpha.7",
     "@blaze-cms/nextjs-components": "0.146.0-core-styles.42",
-    "@blaze-cms/plugin-search-ui": "0.146.0-core-styles.60",
+    "@blaze-cms/plugin-search-ui": "0.146.0-core-styles.61",
     "@blaze-cms/setup-ui": "0.145.1-core-styles.0",
     "@blaze-cms/utils": "0.146.0-core-styles.52",
     "@blaze-cms/utils-handlebars": "0.146.0-core-styles.42",
@@ -91,5 +91,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "46c7acca5c2b59a139a483135c81e0ee40f50e51"
+  "gitHead": "92dcab6fab3478c0e7966f13df33bd4a144c1401"
 }

package/src/components/Button.js

@@ -57,19 +57,23 @@ const Button = props => {
     return !!(url || hasChildren(children));
   };
 
-  const logout = () => {
-    handleLogout(client);
-    if (hasChildren(children)) return setShowChildren(true);
+  const logout = async () => {
+    await handleLogout(client);
 
-    if (!urlToUse) return router.reload();
+    if (hasChildren(children)) {
+      setShowChildren(true);
+      return;
+    }
 
-    return urlToUse.startsWith('/')
-      ? router.push('/Resolver', urlToUse)
-      : (window.location.href = urlToUse);
+    if (!urlToUse) {
+      return router.reload();
+    }
+
+    window.location.href = urlToUse;
   };
 
-  const handleClick = () => {
-    if (isLogoutButton) logout();
+  const handleClick = async () => {
+    if (isLogoutButton) await logout();
     if (!url && !isLogoutButton) setShowChildren(!showChildren);
   };
 

package/src/components/List/ListFactory.js

@@ -49,7 +49,7 @@ const ListFactory = props => {
     operator: filterOperator,
     sortProperties,
     itemListName,
-    VariantComponent // extracted from props
+    VariantComponent
   } = props;
   const { isPreview } = useContext(MainContext);
   const router = useRouter();

package/src/components/MenuItem/MenuItemRender.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
@@ -29,6 +30,7 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
   const isActive = router ? isUrlPathMatch(router.asPath, urlToUse) : false;
   const isActiveParent = router ? hasActiveChild(router.asPath, children) : false;
   const shouldPreOpen = openActiveSubmenus && isActiveParent && isClickEvent;
+  const hasValidChildren = hasChildren(children);
 
   const [displayChildren, setDisplayChildren] = useState(shouldPreOpen);
 
@@ -63,7 +65,11 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     }
   };
 
-  const hasValidChildren = hasChildren(children);
+  const handleMobileClick = () => {
+    if (!urlToUse && hasValidChildren) {
+      setDisplayChildren(!displayChildren);
+    }
+  };
 
   const menuItemLinkClassname = classnames('menu--item--link', {
     'menu--item--link--active': isActive,
@@ -72,7 +78,11 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
 
   return (
     <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
-      <div className={menuItemLinkClassname}>
+      <div
+        className={menuItemLinkClassname}
+        onClick={handleMobileClick}
+        role={!urlToUse && hasValidChildren ? 'button' : undefined}
+        tabIndex={!urlToUse && hasValidChildren ? 0 : undefined}>
         {urlToUse ? (
           <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
         ) : (
@@ -84,7 +94,11 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
           <i
             role="button"
             className="menu--item--link--icon"
-            onClick={() => setDisplayChildren(!displayChildren)}>
+            onClick={e => {
+              e.stopPropagation();
+              setDisplayChildren(!displayChildren);
+            }}
+            tabIndex={0}>
             {displayChildren ? <FaChevronUp /> : <FaChevronDown />}
           </i>
         )}

package/src/hooks/helpers/StoreImages.js

@@ -1,48 +1,50 @@
 class StoreImages {
-  constructor() {
-    this.images = [];
-    this.id = null;
-    this.toggleModal = () => {};
-    this.setSelectedImage = () => {};
-  }
+  #images = [];
 
-  resetImages() {
-    this.images = [];
-  }
+  #pageBuilderID = null;
 
-  removeDuplicated = (images, key) => {
-    this.images = images
-      .map(item => item[key])
-      .map((item, index, final) => final.indexOf(item) === index && index)
-      .filter(item => images[item])
-      .map(item => images[item]);
+  #handlers = {
+    toggleModal: () => {},
+    onSelect: () => {}
   };
 
-  handleSelectedImage = imageId => {
-    const index = this.images.findIndex(image => image.imageId === imageId);
-    if (index !== -1) {
-      this.setSelectedImage(index);
-    }
-  };
+  get images() {
+    return [...this.#images];
+  }
 
-  setHandlers = ({ toggleModal = this.toggleModal, setSelectedImage = this.setSelectedImage }) => {
-    this.toggleModal = toggleModal;
-    this.setSelectedImage = setSelectedImage;
-  };
+  resetImages() {
+    this.#images = [];
+  }
 
-  addImages = (images, options = {}) => {
-    if (!images.length) return this.images;
+  setHandlers({ toggleModal, setSelectedImage }) {
+    if (typeof toggleModal === 'function') this.#handlers.toggleModal = toggleModal;
+    if (typeof setSelectedImage === 'function') this.#handlers.onSelect = setSelectedImage;
+  }
 
-    const { pageBuilderID } = options;
+  addImages(newImages, { pageBuilderID } = {}, handlers = {}) {
+    if (!Array.isArray(newImages) || newImages.length === 0) {
+      return this.images;
+    }
 
-    if (pageBuilderID !== this.id) {
+    if (pageBuilderID != null && pageBuilderID !== this.#pageBuilderID) {
       this.resetImages();
-      this.id = pageBuilderID;
+      this.#pageBuilderID = pageBuilderID;
     }
 
-    this.removeDuplicated(this.images.concat(images), 'imageId');
+    const merged = this.#images.concat(newImages);
+    this.#images = Array.from(new Map(merged.map(img => [img.imageId, img])).values());
 
+    this.setHandlers(handlers);
     return this.images;
+  }
+
+  toggleModal = () => {
+    this.#handlers.toggleModal();
+  };
+
+  handleSelectedImage = imageId => {
+    const idx = this.#images.findIndex(img => img.imageId === imageId);
+    if (idx !== -1) this.#handlers.onSelect(idx);
   };
 }