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

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

@@ -8,12 +8,11 @@ const buildQueryBooster = (props, data) => {
   const { function_score: { query, functions = [] } = {} } = parsedRawQuery;
 
   const boostedPropsFunctios = recencyBoostProperty.map(propToBoost => ({
-    gauss: {
+    exp: {
       [propToBoost]: {
-        origin: 'now',
-        scale: '30d',
-        offset: '7d',
-        decay: 0.5
+        scale: '14d',
+        decay: 0.99, // high value slow decay
+        offset: '7d'
       }
     }
   }));
@@ -21,7 +20,14 @@ const buildQueryBooster = (props, data) => {
   const updatedData = {
     function_score: {
       query: functions.length ? query : parsedRawQuery,
-      functions: [...functions, ...boostedPropsFunctios],
+      functions: [
+        ...functions,
+        ...boostedPropsFunctios,
+        {
+          weight: 0.01 // minimum score to avoid zeroing out
+        }
+      ],
+      score_mode: 'sum',
       boost_mode: 'multiply'
     }
   };

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/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();
+  });
+});