@blaze-cms/react-page-builder 0.146.0-node18-core-styles-tooltips.1 → 0.146.0-node18-core-styles-tooltips.4

package/src/components/Button.js

@@ -54,19 +54,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);
 
@@ -65,7 +67,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,
@@ -74,7 +80,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>
         ) : (
@@ -86,7 +96,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);
   };
 }
 

package/src/variants/LiveBlogList/LiveBlogList.js

@@ -7,83 +7,87 @@ 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 [{ displayedDate, 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
+    const el = contentRef.current;
+    if (!el) return;
+
+    const check = () => setShouldShowButton(el.scrollHeight > COLLAPSE_HEIGHT);
 
-    return () => {
-      clearTimeout(timeout);
-    };
+    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]);
+    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');
 
-  const toggleExpanded = () => {
-    setIsExpanded(!isExpanded);
-  };
+    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 (
-    <div className={className}>
-      {usedDate && (
+    <div className={`live-blog-container${featured ? ' live-blog-container--featured' : ''}`}>
+      {showHeader && (
         <div className="live-blog-date">
           {featured && <BsPinAngleFill />}
-          <span className="live-blog-date--date">{displayedDate}</span>
-          <span className="live-blog-date--time">{displayedTime}</span>
+          {usedDate && (
+            <>
+              <span className="live-blog-date--date">{displayedDate}</span>
+              {displayedTime && <span className="live-blog-date--time">{displayedTime}</span>}
+            </>
+          )}
+          {alternativeHeadline && (
+            <span className="live-blog-date--headline">{alternativeHeadline}</span>
+          )}
         </div>
       )}
 
       <div
         ref={contentRef}
         className={`live-blog-content ${
-          isCollapsed ? 'live-blog-content--collapsed' : 'live-blog-content--opened'
+          isCollapsed
+            ? 'live-blog-content--collapsed collapsed'
+            : 'live-blog-content--opened opened'
         }`}>
         {children}
       </div>
 
       {shouldShowButton && (
         <div className="live-blog-button-wrapper">
-          <Button className="live-blog-toggle" onClick={toggleExpanded} type="button">
+          <Button
+            aria-label={isExpanded ? 'Show Less' : 'Show More'}
+            className="live-blog-toggle"
+            onClick={toggleExpanded}
+            type="button">
             {isExpanded ? (
               <>
                 <FaMinus className="toggle-icon" /> Show Less

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

@@ -7,6 +7,8 @@ import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import MenuRender from '../../../../../src/components/MenuItem/MenuItemRender';
 
+const MENU_ITEM_CHILDREN_CLASS = 'menu--item-children';
+
 let mockAsPathValue = '/';
 
 jest.mock('next/router', () => {
@@ -75,7 +77,7 @@ describe('MenuRender component', () => {
     );
 
     fireEvent.mouseEnter(getByText('Parent'));
-    let childContainer = container.querySelector('.menu--item-children');
+    let childContainer = container.querySelector(`.${MENU_ITEM_CHILDREN_CLASS}`);
     expect(childContainer).not.toHaveClass('hidden');
 
     mockAsPathValue = '/new-route';
@@ -85,7 +87,28 @@ describe('MenuRender component', () => {
       </MenuRender>
     );
 
-    childContainer = container.querySelector('.menu--item-children');
+    childContainer = container.querySelector(`.${MENU_ITEM_CHILDREN_CLASS}`);
+    expect(childContainer).toHaveClass('hidden');
+  });
+
+  it('toggles display of children when chevron icon is clicked', () => {
+    const { container } = render(
+      <MenuRender eventType="click" text="Parent">
+        <div data-testid="child">Child</div>
+      </MenuRender>
+    );
+    let childContainer = container.querySelector(`.${MENU_ITEM_CHILDREN_CLASS}`);
+    expect(childContainer).toHaveClass('hidden');
+
+    const chevronIcon = container.querySelector('.menu--item--link--icon');
+    expect(chevronIcon).toBeInTheDocument();
+
+    chevronIcon.click();
+    childContainer = container.querySelector(`.${MENU_ITEM_CHILDREN_CLASS}`);
+    expect(childContainer).not.toHaveClass('hidden');
+
+    chevronIcon.click();
+    childContainer = container.querySelector(`.${MENU_ITEM_CHILDREN_CLASS}`);
     expect(childContainer).toHaveClass('hidden');
   });
 });

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

@@ -17,6 +17,7 @@ exports[`MenuItem component should render a MenuItem based on passed parameters
       <i
         class="menu--item--link--icon"
         role="button"
+        tabindex="0"
       >
         <svg
           fill="currentColor"

package/tests/unit/src/variants/LiveBlogList/LiveBlogList.test.js

@@ -0,0 +1,121 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import dayjs from 'dayjs';
+import LiveBlogList from '../../../../../src/variants/LiveBlogList/LiveBlogList';
+import { LONG_TEXT, SHORT_TEXT } from './constants';
+
+describe('LiveBlogList', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('short content: uses date and hides toggle button', async () => {
+    jest.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockReturnValue(200);
+    const dateProps = { date: '2025-04-15T11:26:03.863Z' };
+
+    const { container } = render(
+      <LiveBlogList {...dateProps}>
+        <h2>Short item</h2>
+        <p>{SHORT_TEXT}</p>
+      </LiveBlogList>
+    );
+
+    const contentElement = container.querySelector('.live-blog-content');
+    expect(contentElement).toBeInTheDocument();
+    expect(container.querySelector('.live-blog-toggle')).not.toBeInTheDocument();
+    const displayedDate = container.querySelector('.live-blog-date');
+
+    expect(displayedDate).toBeInTheDocument();
+    expect(displayedDate.textContent).not.toBe('');
+  });
+
+  it('long content: shows toggle button and lets you expand and collapse', async () => {
+    jest.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockReturnValue(500);
+    const dateProps = { date: '2025-04-15T15:51:59.303Z' };
+
+    const { container } = render(
+      <LiveBlogList {...dateProps}>
+        <h3>The day so far</h3>
+        <div>{LONG_TEXT}</div>
+      </LiveBlogList>
+    );
+
+    const toggleButton = await screen.findByRole('button', { name: /show more/i });
+    expect(toggleButton).toBeInTheDocument();
+    const contentElement = container.querySelector('.live-blog-content');
+    expect(contentElement).toHaveClass('collapsed');
+
+    fireEvent.click(toggleButton);
+    await waitFor(() => {
+      expect(contentElement).not.toHaveClass('collapsed');
+      expect(toggleButton.textContent).toMatch(/show less/i);
+    });
+
+    fireEvent.click(toggleButton);
+    await waitFor(() => {
+      expect(contentElement).toHaveClass('collapsed');
+      expect(toggleButton.textContent).toMatch(/show more/i);
+    });
+
+    const displayedDate = container.querySelector('.live-blog-date');
+    expect(displayedDate).toBeInTheDocument();
+    expect(displayedDate.textContent).not.toBe('');
+  });
+
+  it('if date less than 1 day ago, shows relative time', () => {
+    const recentDate = '2025-04-15T15:52:00.000Z';
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(new Date('2025-04-16T10:00:00.000Z'));
+
+    const { container } = render(
+      <LiveBlogList date={recentDate}>
+        <p>Less than 1 day old content</p>
+      </LiveBlogList>
+    );
+
+    const dateElement = container.querySelector('.live-blog-date');
+    expect(dateElement).toBeInTheDocument();
+    expect(dateElement.textContent).toMatch(/ago/i);
+    jest.useRealTimers();
+  });
+
+  it('if older than a day but within a year, shows date in DD MMM format', () => {
+    const fewDaysOld = '2025-04-09T00:00:00.000Z';
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(new Date('2025-04-16T10:00:00.000Z'));
+
+    const { container } = render(
+      <LiveBlogList date={fewDaysOld}>
+        <p>Older than 1 day but less than a year</p>
+      </LiveBlogList>
+    );
+
+    const dateElement = container.querySelector('.live-blog-date--date');
+    expect(dateElement).toBeInTheDocument();
+    const expectedDate = dayjs(fewDaysOld).format('DD MMM');
+    expect(dateElement.textContent).toBe(expectedDate);
+    jest.useRealTimers();
+  });
+
+  it('if older than a year, shows date in DD MMM YYYY format', () => {
+    const oldDate = '2023-03-15T00:00:00.000Z';
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(new Date('2025-04-16T10:00:00.000Z'));
+
+    const { container } = render(
+      <LiveBlogList date={oldDate}>
+        <p>More than 1 year old content</p>
+      </LiveBlogList>
+    );
+
+    const dateElement = container.querySelector('.live-blog-date');
+    expect(dateElement).toBeInTheDocument();
+    const expectedDate = dayjs(oldDate).format('DD MMM YYYY');
+    expect(dateElement.textContent).toBe(expectedDate);
+    jest.useRealTimers();
+  });
+});

package/tests/unit/src/variants/LiveBlogList/constants.js

@@ -0,0 +1,10 @@
+const LONG_TEXT = `
+    In case you’re just joining us, here’s a recap of the latest news and global market moves since the European market open. (You can see the earlier round-up here)
+    Europe’s main indexes started on a surprisingly positive note at the start of trading, as markets seemed to recover some ground from the tariff sell-off, even as it became clear that Trump had applied 145% tariffs on Chinese goods
+    Mining giants, supported in part by growing appetite for safe haven assets like gold, were leading the FTSE 100 – including Fresnillo, Glencore, and Anglo American
+    There was also some optimism emanating from the UK GDP figures, which showed the economy expanding by more than expected in February at 0.5%
+`;
+
+const SHORT_TEXT = `Winners of the 2022 World Superyacht Awards have been revealed. From the newly crowned Motor Yacht of the Year to the prestigious Voyagers Award, find out which yachts...`;
+
+export { LONG_TEXT, SHORT_TEXT };