@blaze-cms/react-page-builder 0.146.0-node18-core-styles-tooltips.43 → 0.146.0-node18-tooltips.37

package/src/components/MenuItem/MenuItemRender.js

@@ -1,23 +1,17 @@
-/* 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';
-import classnames from 'classnames';
 import { useRouter } from 'next/router';
 import { useStringTemplate } from '@blaze-cms/utils-handlebars';
-import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN, CLICK } from '../../constants';
+import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
 import { hasChildren } from '../../helpers';
 import BlazeLink from '../BlazeLink';
 import MenuContext from '../Menu/MenuContext';
-import { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild } from './helpers';
+import { injectHelperIntoTemplate } from './helpers';
 
 const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) => {
-  const router = useRouter();
-  const { showMobileMenu, openActiveSubmenus } = useContext(MenuContext);
-
-  const isHoverEvent = eventType === HOVER;
-  const isClickEvent = eventType === CLICK;
-
+  const [displayChildren, setDisplayChildren] = useState(false);
+  const { showMobileMenu } = useContext(MenuContext);
   const {
     loading: loadingText,
     data: [textToUse]
@@ -27,24 +21,14 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     data: [urlToUse]
   } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);
 
-  const isActive = router ? isUrlPathMatch(router.asPath, urlToUse) : false;
-  const isActiveParent = router ? hasActiveChild(router.asPath, children) : false;
-  const shouldPreOpen = openActiveSubmenus && isActiveParent && isClickEvent;
+  const router = useRouter();
+  const isHoverEvent = eventType === HOVER;
+  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
   const hasValidChildren = hasChildren(children);
 
-  const [displayChildren, setDisplayChildren] = useState(shouldPreOpen);
-
   useEffect(() => {
-    if (!showMobileMenu && !shouldPreOpen) setDisplayChildren(false);
-  }, [
-    children,
-    isClickEvent,
-    loadingUrl,
-    openActiveSubmenus,
-    router,
-    shouldPreOpen,
-    showMobileMenu
-  ]);
+    if (!showMobileMenu) setDisplayChildren(false);
+  }, [showMobileMenu]);
 
   useEffect(() => {
     if (isHoverEvent) {
@@ -54,8 +38,6 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
 
   if (loadingUrl || loadingText) return '';
 
-  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
-
   const handleItemEvent = ({ type }) => {
     if (isHoverEvent) {
       if (type === MOUSE_ENTER) {
@@ -73,25 +55,15 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     }
   };
 
-  const menuItemLinkClassname = classnames('menu--item--link', {
-    'menu--item--link--active': isActive,
-    'menu--item--link--active-parent': isActiveParent
-  });
-
   return (
     <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
       <div
-        className={menuItemLinkClassname}
+        className="menu--item--link"
         onClick={handleMobileClick}
         role={!urlToUse && hasValidChildren ? 'button' : undefined}
         tabIndex={!urlToUse && hasValidChildren ? 0 : undefined}>
-        {urlToUse ? (
-          <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
-        ) : (
-          <span role="button" onClick={handleItemEvent}>
-            {textToUse}
-          </span>
-        )}
+        {urlToUse ? <BlazeLink href={urlToUse}>{textToUse}</BlazeLink> : <span>{textToUse}</span>}
+
         {hasValidChildren && (
           <i
             role="button"

package/src/components/MenuItem/helpers/index.js

@@ -1,5 +1,3 @@
 import injectHelperIntoTemplate from './inject-helper-into-template';
-import isUrlPathMatch from './isUrlPathMatch';
-import hasActiveChild from './has-active-child';
 
-export { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild };
+export { injectHelperIntoTemplate };

package/tests/unit/src/components/Carousel/Carousel.test.js

@@ -121,4 +121,10 @@ describe('Carousel component', () => {
     setup(getMockedProps({ displayCount: false }));
     expect(screen.queryByTestId('count')).toBeNull();
   });
+
+  it('should remove duplicate imageIds keeping first occurrence', () => {
+    setup(getMockedProps({ imageIds: ['id1', 'id2', 'id3', 'id1', 'id4', 'id2'] }));
+    // Should display count as 4 unique images, not 6
+    expect(screen.getByTestId('count')).toHaveTextContent('4 images');
+  });
 });

package/tests/unit/src/components/MenuItem/MenuItem.test.js

@@ -19,11 +19,6 @@ jest.mock('next/router', () => ({
   useRouter: () => ({ asPath: '/' })
 }));
 
-// todo: add extra tests to support this util
-jest.mock('../../../../../src/components/MenuItem/helpers/has-active-child', () =>
-  jest.fn(() => false)
-);
-
 const componentProps = {
   id: 'id',
   name: 'mock name',

package/tests/unit/src/components/MenuItem/MenuItemRender.test.js

@@ -11,22 +11,14 @@ const MENU_ITEM_CHILDREN_CLASS = 'menu--item-children';
 
 let mockAsPathValue = '/';
 
-jest.mock('next/router', () => {
-  const router = { asPath: mockAsPathValue };
-  return {
-    useRouter: () => router
-  };
-});
+jest.mock('next/router', () => ({
+  useRouter: () => ({ asPath: mockAsPathValue })
+}));
 
 jest.mock('@blaze-cms/utils-handlebars', () => ({
   useStringTemplate: jest.fn((parent, [title]) => ({ loading: false, data: [title] }))
 }));
 
-// todo: add extra tests to support this util
-jest.mock('../../../../../src/components/MenuItem/helpers/has-active-child', () =>
-  jest.fn(() => false)
-);
-
 describe('MenuRender component', () => {
   it('renders menu item with link when URL is provided', () => {
     const { getByText } = render(<MenuRender eventType="click" text="Home" url="/home" />);

package/lib/components/MenuItem/helpers/has-active-child.js

@@ -1,19 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-require("core-js/modules/es.array.find.js");
-require("core-js/modules/es.object.to-string.js");
-var _isUrlPathMatch = _interopRequireDefault(require("./isUrlPathMatch"));
-var _helpers = require("../../../helpers");
-var hasActiveChild = function hasActiveChild(path, children) {
-  return (0, _helpers.hasChildren)(children) && children.props.children[1][0].props.component.items.find(function (menuItem) {
-    return (0, _isUrlPathMatch["default"])(path, menuItem.settings.url);
-  });
-};
-var _default = exports["default"] = hasActiveChild;
-//# sourceMappingURL=has-active-child.js.map

package/lib/components/MenuItem/helpers/has-active-child.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"has-active-child.js","names":["_isUrlPathMatch","_interopRequireDefault","require","_helpers","hasActiveChild","path","children","hasChildren","props","component","items","find","menuItem","isUrlPathMatch","settings","url","_default","exports"],"sources":["../../../../src/components/MenuItem/helpers/has-active-child.js"],"sourcesContent":["import isUrlPathMatch from './isUrlPathMatch';\nimport { hasChildren } from '../../../helpers';\n\nconst hasActiveChild = (path, children) =>\n  hasChildren(children) &&\n  children.props.children[1][0].props.component.items.find(menuItem =>\n    isUrlPathMatch(path, menuItem.settings.url)\n  );\n\nexport default hasActiveChild;\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAEA,IAAME,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,IAAI,EAAEC,QAAQ;EAAA,OACpC,IAAAC,oBAAW,EAACD,QAAQ,CAAC,IACrBA,QAAQ,CAACE,KAAK,CAACF,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAACE,KAAK,CAACC,SAAS,CAACC,KAAK,CAACC,IAAI,CAAC,UAAAC,QAAQ;IAAA,OAC/D,IAAAC,0BAAc,EAACR,IAAI,EAAEO,QAAQ,CAACE,QAAQ,CAACC,GAAG,CAAC;EAAA,CAC7C,CAAC;AAAA;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEWb,cAAc","ignoreList":[]}

package/lib/components/MenuItem/helpers/isUrlPathMatch.js

@@ -1,18 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-require("core-js/modules/es.regexp.constructor.js");
-require("core-js/modules/es.regexp.exec.js");
-require("core-js/modules/es.regexp.to-string.js");
-var isUrlPathMatch = function isUrlPathMatch(path, itemUrl) {
-  if (!itemUrl || !path) return false;
-  var reg = new RegExp(/^[^#?]+/);
-  var _path = reg.exec(path)[0];
-  return _path === itemUrl || _path === "/".concat(itemUrl);
-};
-var _default = exports["default"] = isUrlPathMatch;
-//# sourceMappingURL=isUrlPathMatch.js.map

package/lib/components/MenuItem/helpers/isUrlPathMatch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"isUrlPathMatch.js","names":["isUrlPathMatch","path","itemUrl","reg","RegExp","_path","exec","concat","_default","exports"],"sources":["../../../../src/components/MenuItem/helpers/isUrlPathMatch.js"],"sourcesContent":["const isUrlPathMatch = (path, itemUrl) => {\n  if (!itemUrl || !path) return false;\n\n  const reg = new RegExp(/^[^#?]+/);\n  const _path = reg.exec(path)[0];\n\n  return _path === itemUrl || _path === `/${itemUrl}`;\n};\n\nexport default isUrlPathMatch;\n"],"mappings":";;;;;;;;;;AAAA,IAAMA,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,IAAI,EAAEC,OAAO,EAAK;EACxC,IAAI,CAACA,OAAO,IAAI,CAACD,IAAI,EAAE,OAAO,KAAK;EAEnC,IAAME,GAAG,GAAG,IAAIC,MAAM,CAAC,SAAS,CAAC;EACjC,IAAMC,KAAK,GAAGF,GAAG,CAACG,IAAI,CAACL,IAAI,CAAC,CAAC,CAAC,CAAC;EAE/B,OAAOI,KAAK,KAAKH,OAAO,IAAIG,KAAK,SAAAE,MAAA,CAASL,OAAO,CAAE;AACrD,CAAC;AAAC,IAAAM,QAAA,GAAAC,OAAA,cAEaT,cAAc","ignoreList":[]}

package/lib-es/components/MenuItem/helpers/has-active-child.js

@@ -1,5 +0,0 @@
-import isUrlPathMatch from './isUrlPathMatch';
-import { hasChildren } from '../../../helpers';
-const hasActiveChild = (path, children) => hasChildren(children) && children.props.children[1][0].props.component.items.find(menuItem => isUrlPathMatch(path, menuItem.settings.url));
-export default hasActiveChild;
-//# sourceMappingURL=has-active-child.js.map

package/lib-es/components/MenuItem/helpers/has-active-child.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"has-active-child.js","names":["isUrlPathMatch","hasChildren","hasActiveChild","path","children","props","component","items","find","menuItem","settings","url"],"sources":["../../../../src/components/MenuItem/helpers/has-active-child.js"],"sourcesContent":["import isUrlPathMatch from './isUrlPathMatch';\nimport { hasChildren } from '../../../helpers';\n\nconst hasActiveChild = (path, children) =>\n  hasChildren(children) &&\n  children.props.children[1][0].props.component.items.find(menuItem =>\n    isUrlPathMatch(path, menuItem.settings.url)\n  );\n\nexport default hasActiveChild;\n"],"mappings":"AAAA,OAAOA,cAAc,MAAM,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,kBAAkB;AAE9C,MAAMC,cAAc,GAAGA,CAACC,IAAI,EAAEC,QAAQ,KACpCH,WAAW,CAACG,QAAQ,CAAC,IACrBA,QAAQ,CAACC,KAAK,CAACD,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAACC,KAAK,CAACC,SAAS,CAACC,KAAK,CAACC,IAAI,CAACC,QAAQ,IAC/DT,cAAc,CAACG,IAAI,EAAEM,QAAQ,CAACC,QAAQ,CAACC,GAAG,CAC5C,CAAC;AAEH,eAAeT,cAAc","ignoreList":[]}

package/lib-es/components/MenuItem/helpers/isUrlPathMatch.js

@@ -1,8 +0,0 @@
-const isUrlPathMatch = (path, itemUrl) => {
-  if (!itemUrl || !path) return false;
-  const reg = new RegExp(/^[^#?]+/);
-  const _path = reg.exec(path)[0];
-  return _path === itemUrl || _path === `/${itemUrl}`;
-};
-export default isUrlPathMatch;
-//# sourceMappingURL=isUrlPathMatch.js.map

package/lib-es/components/MenuItem/helpers/isUrlPathMatch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"isUrlPathMatch.js","names":["isUrlPathMatch","path","itemUrl","reg","RegExp","_path","exec"],"sources":["../../../../src/components/MenuItem/helpers/isUrlPathMatch.js"],"sourcesContent":["const isUrlPathMatch = (path, itemUrl) => {\n  if (!itemUrl || !path) return false;\n\n  const reg = new RegExp(/^[^#?]+/);\n  const _path = reg.exec(path)[0];\n\n  return _path === itemUrl || _path === `/${itemUrl}`;\n};\n\nexport default isUrlPathMatch;\n"],"mappings":"AAAA,MAAMA,cAAc,GAAGA,CAACC,IAAI,EAAEC,OAAO,KAAK;EACxC,IAAI,CAACA,OAAO,IAAI,CAACD,IAAI,EAAE,OAAO,KAAK;EAEnC,MAAME,GAAG,GAAG,IAAIC,MAAM,CAAC,SAAS,CAAC;EACjC,MAAMC,KAAK,GAAGF,GAAG,CAACG,IAAI,CAACL,IAAI,CAAC,CAAC,CAAC,CAAC;EAE/B,OAAOI,KAAK,KAAKH,OAAO,IAAIG,KAAK,KAAK,IAAIH,OAAO,EAAE;AACrD,CAAC;AAED,eAAeF,cAAc","ignoreList":[]}

package/src/components/MenuItem/helpers/has-active-child.js

@@ -1,10 +0,0 @@
-import isUrlPathMatch from './isUrlPathMatch';
-import { hasChildren } from '../../../helpers';
-
-const hasActiveChild = (path, children) =>
-  hasChildren(children) &&
-  children.props.children[1][0].props.component.items.find(menuItem =>
-    isUrlPathMatch(path, menuItem.settings.url)
-  );
-
-export default hasActiveChild;

package/src/components/MenuItem/helpers/isUrlPathMatch.js

@@ -1,10 +0,0 @@
-const isUrlPathMatch = (path, itemUrl) => {
-  if (!itemUrl || !path) return false;
-
-  const reg = new RegExp(/^[^#?]+/);
-  const _path = reg.exec(path)[0];
-
-  return _path === itemUrl || _path === `/${itemUrl}`;
-};
-
-export default isUrlPathMatch;

package/tests/unit/src/components/MenuItem/helpers/constants.js

@@ -1,73 +0,0 @@
-export const mockMenuProps = {
-  props: {
-    children: [
-      false,
-      [
-        {
-          props: {
-            component: {
-              items: [
-                {
-                  type: 'menuitem',
-                  settings: {
-                    name: 'menuitem-card',
-                    url: 'card',
-                    text: 'Card'
-                  },
-                  id: 'menuitem-card-1',
-                  items: [],
-                  name: 'menuitem-card-1'
-                },
-                {
-                  type: 'menuitem',
-                  settings: {
-                    name: 'menuitem-Card',
-
-                    url: 'card',
-                    text: 'Card'
-                  },
-                  id: 'menuitem-Card-1',
-                  items: [],
-                  name: 'menuitem-Card-1'
-                },
-                {
-                  type: 'menuitem',
-                  settings: {
-                    name: 'menuitem-card-Carousel',
-                    url: 'card-carousel',
-                    text: 'Card Carousel'
-                  },
-                  id: 'menuitem-card-carousel-1',
-                  items: [],
-                  name: 'menuitem-card-carousel-1'
-                },
-                {
-                  type: 'menuitem',
-                  settings: {
-                    eventType: 'hover',
-                    name: 'menuitem-Content-Group',
-                    modifier: null,
-                    url: 'content-group',
-                    text: 'Content Group',
-                    variant: null,
-                    gtmClassName: null,
-                    entities: [],
-                    filterByProperty: [],
-                    filterByFeatured: 'off',
-                    filterBySponsored: 'off',
-                    operator: 'AND',
-                    filterBy: [],
-                    sortProperties: []
-                  },
-                  id: 'menuitem-Content-Group-1',
-                  items: [],
-                  name: 'menuitem-Content-Group-1'
-                }
-              ]
-            }
-          }
-        }
-      ]
-    ]
-  }
-};

package/tests/unit/src/components/MenuItem/helpers/has-active-child.test.js

@@ -1,35 +0,0 @@
-/* eslint-disable no-unused-vars */
-import '@testing-library/jest-dom/extend-expect';
-import { hasActiveChild } from '../../../../../../src/components/MenuItem/helpers';
-import { mockMenuProps } from './constants';
-
-describe('hasActiveChild', () => {
-  const structuredClone = val => JSON.parse(JSON.stringify(val));
-
-  it('should return true for finding active menu-item child', () => {
-    const activePath = '/card';
-    const menuProps = mockMenuProps;
-    const result = !!hasActiveChild(activePath, menuProps);
-    expect(result).toBe(true);
-  });
-
-  it('shoul return false for findng no exact match', () => {
-    const activePath = '/carousel';
-    const menuProps = mockMenuProps;
-
-    const result = !!hasActiveChild(activePath, menuProps);
-    expect(result).toBe(false);
-  });
-
-  it('should return false for empty children-items', () => {
-    const activePath = '/carousel';
-    const menuWithNoChildrenProps = (() => {
-      const obj = structuredClone(mockMenuProps);
-      obj.props.children[1][0].props.component.items = [];
-      return obj;
-    }).call();
-
-    const result = !!hasActiveChild(activePath, menuWithNoChildrenProps);
-    expect(result).toBe(false);
-  });
-});

package/tests/unit/src/components/MenuItem/helpers/is-url-path-match.test.js

@@ -1,53 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-import { isUrlPathMatch } from '../../../../../../src/components/MenuItem/helpers';
-
-describe('isUrlPathMatch', () => {
-  it('should return true since path and itemUrl match', () => {
-    const path = '/button';
-    const itemUrl = 'button';
-    const result = isUrlPathMatch(path, itemUrl);
-    expect(result).toBeTruthy();
-  });
-
-  it('should match since path and itemUrl do not match', () => {
-    const path = '/card';
-    const itemUrl = 'button';
-    const result = isUrlPathMatch(path, itemUrl);
-    expect(result).toBeFalsy();
-  });
-
-  it('should not match since path and itemUrl is a partial match', () => {
-    const path = '/button-card';
-    const itemUrl = 'button';
-    const result = isUrlPathMatch(path, itemUrl);
-    expect(result).toBeFalsy();
-  });
-
-  it('should not match since nested path and itemUrl is a partial match', () => {
-    const path = '/button/child';
-    const itemUrl = 'button';
-    const result = isUrlPathMatch(path, itemUrl);
-    expect(result).toBeFalsy();
-  });
-
-  it('should match with uri-with-fragment', () => {
-    const path = '/button#dark';
-    const itemUrl = 'button';
-    const result = isUrlPathMatch(path, itemUrl);
-    expect(result).toBeTruthy();
-  });
-
-  it('should match with uri-with-parameters', () => {
-    const path = '/button?paramater=value';
-    const itemUrl = 'button';
-    const result = isUrlPathMatch(path, itemUrl);
-    expect(result).toBeTruthy();
-  });
-
-  it('should not match with empty itemUrl', () => {
-    const path = '/';
-    const itemUrl = null;
-    const result = isUrlPathMatch(path, itemUrl);
-    expect(result).toBeFalsy();
-  });
-});