@blaze-cms/react-page-builder 0.146.0-node18-tooltips.38 → 0.146.0-node18-core-styles-tooltips.52

package/src/components/Menu/Menu.js

@@ -11,6 +11,7 @@ import BlazeLink from '../BlazeLink';
 const Menu = ({
   children,
   collapse,
+  openActiveSubmenus,
   modifier,
   mobileMenuModifier,
   mobileMenuChildrenModifier,
@@ -51,7 +52,7 @@ const Menu = ({
   });
 
   return (
-    <MenuContext.Provider value={{ showMobileMenu }}>
+    <MenuContext.Provider value={{ showMobileMenu, openActiveSubmenus }}>
       <div className={menuWrapperClasses}>
         {collapse && (
           <div className="menu--mobile-wrapper">
@@ -99,6 +100,7 @@ const Menu = ({
 
 Menu.propTypes = {
   collapse: PropTypes.bool.isRequired,
+  openActiveSubmenus: PropTypes.bool.isRequired,
   logoOnMobile: PropTypes.bool.isRequired,
   logoOnDesktop: PropTypes.bool,
   logoOnMobileUrl: PropTypes.string,

package/src/components/Menu/MenuContext.js

@@ -1,5 +1,5 @@
 import React from 'react';
 
-const MenuContext = React.createContext({ showMobileMenu: false });
+const MenuContext = React.createContext({ showMobileMenu: false, openActiveSubmenus: false });
 
 export default MenuContext;

package/src/components/MenuItem/MenuItemRender.js

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

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

@@ -0,0 +1,10 @@
+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/index.js

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

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

@@ -0,0 +1,10 @@
+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/src/hooks/index.js

@@ -9,3 +9,4 @@ export { default as useBannerInsertion } from './use-banner-insertion';
 export { default as useAppSyncEventHook } from './use-app-sync-event-hook';
 export { default as usePortal } from './use-portal';
 export { default as useFilterAggregationValues } from './use-filter-aggregation-values';
+export { default as useAppEventHook } from './use-app-event-hook';

package/src/hooks/use-app-event-hook.js

@@ -0,0 +1,40 @@
+import { AppContext } from '@blaze-cms/nextjs-components';
+import { useContext, useEffect, useState, useMemo } from 'react';
+
+const useAppEventHook = ({ eventName, data, props }) => {
+  const { blazeApp } = useContext(AppContext);
+  const hasListener =
+    blazeApp && blazeApp.events && blazeApp.events.hasListeners(`plugin:page-builder:${eventName}`);
+  const [loading, setLoading] = useState(hasListener);
+  const [updatedData, setUpdatedData] = useState(null);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const stableData = useMemo(() => data, [JSON.stringify(data)]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const stableProps = useMemo(() => props, [JSON.stringify(props)]);
+
+  useEffect(
+    () => {
+      async function emitEvent() {
+        // setLoading(true);
+        await blazeApp.events.emitAsync(`plugin:page-builder:${eventName}`, {
+          data: updatedData,
+          props: stableProps
+        });
+        setLoading(false);
+      }
+      if (hasListener && updatedData) emitEvent();
+    },
+    [updatedData, eventName, hasListener, blazeApp.events, stableProps]
+  );
+
+  useEffect(
+    () => {
+      setUpdatedData(stableData);
+    },
+    [stableData]
+  );
+
+  return { data: updatedData || stableData, loading };
+};
+export default useAppEventHook;

package/tests/unit/src/components/Card/CardsRender.test.js

@@ -0,0 +1,118 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render } from '@testing-library/react'; // No hooks here
+import { useQuery } from '@apollo/client';
+import { MainContext } from '@blaze-cms/nextjs-components';
+import CardsRender from '../../../../../src/components/Card/CardsRender';
+import { useAppEventHook } from '../../../../../src/hooks';
+import { buildQueryBooster } from '../../../../../src/components/List/helpers';
+
+// Mocks
+jest.mock('@apollo/client', () => ({
+  useQuery: jest.fn(),
+  gql: jest.fn(str => str)
+}));
+
+jest.mock('../../../../../src/hooks', () => ({
+  useGetEntitySchemasAsObj: jest.fn(() => ({})),
+  useGetImages: jest.fn(() => ({ data: [], loading: false })),
+  useAppEventHook: jest.fn()
+}));
+
+jest.mock('../../../../../src/components/List/helpers', () => ({
+  buildQueryBooster: jest.fn()
+}));
+
+// Mock dynamic import
+jest.mock('next/dynamic', () => () => {
+  const DynamicComponent = () => null;
+  DynamicComponent.displayName = 'LoadableComponent';
+  DynamicComponent.preload = jest.fn();
+  return DynamicComponent;
+});
+
+describe('CardsRender', () => {
+  const mockProps = {
+    entity: { id: '1', kind: 'Article' },
+    entities: [],
+    entityFields: {},
+    itemsToDisplay: [{ id: '1', kind: 'Article' }], // Ensure itemsToDisplay has content so query runs
+    children: null,
+    VariantComponent: () => null,
+    recencyBoostProperty: ['publishedAt'], // Example prop intended for boosting
+    parent: { itemId: '1', itemEntity: 'Article' }
+  };
+
+  const mockContext = {
+    isPreview: false
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useQuery.mockReturnValue({ data: {}, loading: false, error: null });
+
+    // Default mock implementation for app event hook (returns data unchanged)
+    useAppEventHook.mockImplementation(({ data }) => ({ data, loading: false }));
+
+    // Default mock for booster (returns data unchanged)
+    buildQueryBooster.mockImplementation((_, data) => data);
+  });
+
+  it('should trigger useAppEventHook with correct arguments', () => {
+    // We expect variables to be derived inside CardsRender (from filterQuerySetup helper logic)
+    // Since itemsToDisplay is passed, filterQuerySetup should produce some variables.
+
+    render(
+      <MainContext.Provider value={mockContext}>
+        <CardsRender {...mockProps} />
+      </MainContext.Provider>
+    );
+
+    expect(useAppEventHook).toHaveBeenCalledWith(
+      expect.objectContaining({
+        eventName: 'cards:query-variables',
+        // We can't easily predict 'data' (variables) without mocking filterQuerySetup heavily,
+        // but we can check the eventName is correct.
+        props: expect.objectContaining({
+          recencyBoostProperty: mockProps.recencyBoostProperty
+        })
+      })
+    );
+  });
+
+  it('should call buildQueryBooster with the result from useAppEventHook', () => {
+    const hookData = { someVar: 'hook-modified' };
+    useAppEventHook.mockReturnValue({ data: hookData, loading: false });
+
+    render(
+      <MainContext.Provider value={mockContext}>
+        <CardsRender {...mockProps} />
+      </MainContext.Provider>
+    );
+
+    expect(buildQueryBooster).toHaveBeenCalledWith(
+      expect.objectContaining({ recencyBoostProperty: mockProps.recencyBoostProperty }),
+      hookData
+    );
+  });
+
+  it('should pass boosted variables to useQuery', () => {
+    const boostedVars = { boosted: true };
+    buildQueryBooster.mockReturnValue(boostedVars);
+
+    render(
+      <MainContext.Provider value={mockContext}>
+        <CardsRender {...mockProps} />
+      </MainContext.Provider>
+    );
+
+    expect(useQuery).toHaveBeenCalledWith(
+      expect.any(Object), // action
+      expect.objectContaining({
+        variables: boostedVars
+      })
+    );
+  });
+});

package/tests/unit/src/components/List/helpers/build-query-booster.test.js

@@ -13,7 +13,7 @@ describe('buildQueryBooster helper function', () => {
     );
     expect(noRecencyBoostProperty).toEqual({
       rawQueryStringified:
-        '{"function_score":{"query":{"test":"t"},"functions":[{"gauss":{"date":{"origin":"now","scale":"30d","offset":"7d","decay":0.5}}}],"boost_mode":"multiply"}}'
+        '{"function_score":{"query":{"test":"t"},"functions":[{"exp":{"date":{"scale":"14d","decay":0.99,"offset":"7d"}}},{"weight":0.01}],"score_mode":"sum","boost_mode":"multiply"}}'
     });
   });
 
@@ -27,7 +27,7 @@ describe('buildQueryBooster helper function', () => {
     );
     expect(noRecencyBoostProperty).toEqual({
       rawQueryStringified:
-        '{"function_score":{"query":{"test":"t"},"functions":[{"gauss":{"test":{"origin":"now","scale":"30d","offset":"7d","decay":0.5}}},{"gauss":{"date":{"origin":"now","scale":"30d","offset":"7d","decay":0.5}}}],"boost_mode":"multiply"}}'
+        '{"function_score":{"query":{"test":"t"},"functions":[{"gauss":{"test":{"origin":"now","scale":"30d","offset":"7d","decay":0.5}}},{"exp":{"date":{"scale":"14d","decay":0.99,"offset":"7d"}}},{"weight":0.01}],"score_mode":"sum","boost_mode":"multiply"}}'
     });
   });
 });

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

@@ -19,6 +19,11 @@ 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,14 +11,22 @@ const MENU_ITEM_CHILDREN_CLASS = 'menu--item-children';
 
 let mockAsPathValue = '/';
 
-jest.mock('next/router', () => ({
-  useRouter: () => ({ asPath: mockAsPathValue })
-}));
+jest.mock('next/router', () => {
+  const router = { asPath: mockAsPathValue };
+  return {
+    useRouter: () => router
+  };
+});
 
 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/tests/unit/src/components/MenuItem/helpers/constants.js

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,35 @@
+/* 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

@@ -0,0 +1,53 @@
+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();
+  });
+});

package/tests/unit/src/hooks/use-app-event-hook.test.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { AppContext } from '@blaze-cms/nextjs-components';
+import { useAppEventHook } from '../../../../src/hooks';
+
+describe('useAppEventHook', () => {
+  const eventName = 'test-event';
+  const initialData = { foo: 'bar' };
+  const props = { prop1: 'val1' };
+  let blazeAppMock;
+
+  beforeEach(() => {
+    blazeAppMock = {
+      events: {
+        hasListeners: jest.fn(),
+        emitAsync: jest.fn().mockResolvedValue()
+      }
+    };
+  });
+
+  const wrapper = ({ children }) => (
+    <AppContext.Provider value={{ blazeApp: blazeAppMock }}>{children}</AppContext.Provider>
+  );
+
+  it('should not emit event if there are no listeners', () => {
+    blazeAppMock.events.hasListeners.mockReturnValue(false);
+
+    const { result } = renderHook(() => useAppEventHook({ eventName, data: initialData, props }), {
+      wrapper
+    });
+
+    expect(result.current.loading).toBe(false);
+    expect(result.current.data).toEqual(initialData); // Returns initial data immediately
+    expect(blazeAppMock.events.emitAsync).not.toHaveBeenCalled();
+  });
+
+  it('should emit async event if listeners exist', async () => {
+    blazeAppMock.events.hasListeners.mockReturnValue(true);
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => useAppEventHook({ eventName, data: initialData, props }),
+      { wrapper }
+    );
+
+    // Initial state: loading is true because hasListeners is true
+    expect(result.current.loading).toBe(true);
+
+    // Wait for the useEffect chain (setUpdatedData -> emitEvent -> setLoading)
+    await waitForNextUpdate();
+
+    expect(blazeAppMock.events.emitAsync).toHaveBeenCalledWith(`plugin:page-builder:${eventName}`, {
+      data: initialData,
+      props
+    });
+
+    // Loading should be false after emitAsync resolves
+    expect(result.current.loading).toBe(false);
+    expect(result.current.data).toEqual(initialData);
+  });
+});