@plone/volto 16.21.3 → 16.22.0

package/src/components/manage/Blocks/ToC/variations/HorizontalMenu.jsx

@@ -1,12 +1,7 @@
-/**
- * View toc block.
- * @module components/manage/Blocks/ToC/View
- */
-
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
-import { Menu } from 'semantic-ui-react';
+import { Menu, Dropdown } from 'semantic-ui-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import AnchorLink from 'react-anchor-link-smooth-scroll';
 
@@ -32,6 +27,131 @@ const RenderMenuItems = ({ items }) => {
  * @extends Component
  */
 const View = ({ data, tocEntries }) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  // When the page is resized to prevent items from the TOC from going out of the viewport,
+  // a dropdown menu is added containing all the items that don't fit.
+  const handleResize = () => {
+    const menuElement = document.querySelector('.responsive-menu');
+    const containerWidth = menuElement.offsetWidth;
+
+    // Get all divs that contain the items from the TOC, except the dropdown button
+    const nested = document.querySelectorAll(
+      '.responsive-menu .item:not(.dropdown)',
+    );
+    const nestedArray = Object.values(nested);
+    const middle = Math.ceil(nestedArray.length / 2);
+    const firstHalfNested = nestedArray.slice(0, middle);
+    const secondHalfNested = nestedArray.slice(middle);
+
+    const dropdown = document.querySelector('.dropdown');
+    const dropdownWidth = dropdown.offsetWidth;
+
+    const firstHalfNestedHiddenItems = [];
+
+    // Add a 'hidden' class for the items that should be in the dropdown
+    firstHalfNested.forEach((item) => {
+      const itemOffsetLeft = item.offsetLeft;
+      const itemOffsetWidth = item.offsetWidth;
+      if (itemOffsetLeft + itemOffsetWidth > containerWidth - dropdownWidth) {
+        item.classList.add('hidden');
+        firstHalfNestedHiddenItems.push(item);
+      } else {
+        item.classList.remove('hidden');
+      }
+    });
+
+    secondHalfNested.forEach((item) => item.classList.add('hidden-dropdown'));
+
+    const diff = firstHalfNested.length - firstHalfNestedHiddenItems.length;
+    const secondHalfNestedShownItems = secondHalfNested.slice(diff);
+    secondHalfNestedShownItems.forEach((item) =>
+      item.classList.remove('hidden-dropdown'),
+    );
+
+    // If there are elements that should be displayed in the dropdown, show the dropdown button
+    if (secondHalfNestedShownItems.length > 0)
+      dropdown.classList.remove('hidden-dropdown');
+    else {
+      dropdown.classList.add('hidden-dropdown');
+    }
+  };
+
+  const handleDropdownKeyDown = (event) => {
+    const dropdownMenu = document.querySelector('.menu.transition');
+    if (event.key === 'ArrowDown' && isDropdownOpen) {
+      event.preventDefault();
+      const menuItems = dropdownMenu.querySelectorAll(
+        '.item:not(.hidden-dropdown)',
+      );
+      const focusedItem = dropdownMenu.querySelector('.item.focused');
+      const focusedIndex = Array.from(menuItems).indexOf(focusedItem);
+
+      if (focusedIndex === -1) {
+        // No item is currently focused, so focus the first item
+        menuItems[0].classList.add('focused');
+      } else if (focusedIndex === menuItems.length - 1) {
+        // Remove focus from the currently focused item and close the dropdown
+        focusedItem.classList.remove('focused');
+        setIsDropdownOpen(false);
+
+        // Focus the next element on the page
+        const nextElement = dropdownMenu.nextElementSibling;
+        if (nextElement) {
+          nextElement.focus();
+        }
+      } else {
+        // Remove focus from the currently focused item
+        focusedItem.classList.remove('focused');
+
+        // Focus the next item or wrap around to the first item
+        const nextIndex = (focusedIndex + 1) % menuItems.length;
+        menuItems[nextIndex].classList.add('focused');
+      }
+    } else if (event.key === 'Enter' && isDropdownOpen) {
+      const focusedItem = dropdownMenu.querySelector('.item.focused');
+      if (focusedItem) {
+        focusedItem.querySelector('a').click();
+        focusedItem.classList.remove('focused');
+      }
+    } else if (event.key === 'Tab') {
+      const focusedItem = dropdownMenu.querySelector('.item.focused');
+      if (focusedItem) {
+        focusedItem.classList.remove('focused');
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (data.sticky) {
+      const toc = document.querySelector('.horizontalMenu');
+      const tocPos = toc ? toc.offsetTop : 0;
+
+      const handleScroll = () => {
+        let scrollPos = window.scrollY;
+        if (scrollPos > tocPos && toc) {
+          toc.classList.add('sticky-toc');
+        } else if (scrollPos <= tocPos && toc) {
+          toc.classList.remove('sticky-toc');
+        }
+      };
+
+      window.addEventListener('scroll', handleScroll);
+
+      return () => {
+        window.removeEventListener('scroll', handleScroll);
+      };
+    }
+  }, [data.sticky]);
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  });
+
   return (
     <>
       {data.title && !data.hide_title ? (
@@ -46,8 +166,22 @@ const View = ({ data, tocEntries }) => {
       ) : (
         ''
       )}
-      <Menu>
+      <Menu className="responsive-menu">
         <RenderMenuItems items={tocEntries} />
+        <Dropdown
+          item
+          text="More"
+          className="hidden-dropdown"
+          open={isDropdownOpen}
+          onOpen={() => setIsDropdownOpen(true)}
+          onClose={() => setIsDropdownOpen(false)}
+          tabIndex={0}
+          onKeyDown={handleDropdownKeyDown}
+        >
+          <Dropdown.Menu>
+            <RenderMenuItems items={tocEntries} />
+          </Dropdown.Menu>
+        </Dropdown>
       </Menu>
     </>
   );

package/src/components/manage/Contents/Contents.jsx

@@ -450,7 +450,7 @@ class Contents extends Component {
       sort_on: this.props.sort?.on || 'getObjPositionInParent',
       sort_order: this.props.sort?.order || 'ascending',
       isClient: false,
-      linkIntegrityBreakages: '',
+      linkIntegrityBreakages: [],
     };
     this.filterTimeout = null;
   }
@@ -1236,7 +1236,10 @@ class Contents extends Component {
                             Show all items
                           </Button>
                         )}
-                        {this.state.linkIntegrityBreakages.length > 0 ? (
+                        {this.state.linkIntegrityBreakages.reduce(
+                          (a, b) => a + b.breaches.length,
+                          0,
+                        ) ? (
                           <div>
                             <h3>
                               {this.props.intl.formatMessage(
@@ -1249,9 +1252,8 @@ class Contents extends Component {
                               )}
                             </p>
                             <ul className="content">
-                              {map(
-                                this.state.linkIntegrityBreakages,
-                                (item) => (
+                              {map(this.state.linkIntegrityBreakages, (item) =>
+                                item.breaches.length ? (
                                   <li key={item['@id']}>
                                     <a href={item['@id']}>{item.title}</a>
                                     <p>
@@ -1269,7 +1271,7 @@ class Contents extends Component {
                                       ))}
                                     </ul>
                                   </li>
-                                ),
+                                ) : null,
                               )}
                             </ul>
                           </div>

package/src/components/manage/UniversalLink/UniversalLink.jsx

@@ -12,7 +12,6 @@ import {
   isInternalURL,
   URLUtils,
 } from '@plone/volto/helpers/Url/Url';
-import { matchPath } from 'react-router';
 
 import config from '@plone/volto/registry';
 
@@ -66,11 +65,8 @@ const UniversalLink = ({
     }
   }
 
-  const isBlacklisted =
-    (config.settings.externalRoutes ?? []).find((route) =>
-      matchPath(flattenToAppURL(url), route.match),
-    )?.length > 0;
-  const isExternal = !isInternalURL(url) || isBlacklisted;
+  const isExternal = !isInternalURL(url);
+
   const isDownload = (!isExternal && url.includes('@@download')) || download;
   const isDisplayFile =
     (!isExternal && url.includes('@@display-file')) || false;

package/src/components/manage/UniversalLink/UniversalLink.test.jsx

@@ -157,6 +157,42 @@ describe('UniversalLink', () => {
     );
   });
 
+  it('UniversalLink renders external link where link is blacklisted', () => {
+    const notInEN = /^(?!.*(#|\/en|\/static|\/controlpanel|\/cypress|\/login|\/logout|\/contact-form)).*$/;
+    config.settings.externalRoutes = [
+      {
+        match: {
+          path: notInEN,
+          exact: false,
+          strict: false,
+        },
+        url(payload) {
+          return payload.location.pathname;
+        },
+      },
+    ];
+
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            href="http://localhost:3000/blacklisted-app"
+            title="External blacklisted app"
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('External blacklisted app').getAttribute('target')).toBe(
+      '_blank',
+    );
+    expect(getByTitle('External blacklisted app').getAttribute('rel')).toBe(
+      'noopener noreferrer',
+    );
+  });
+
   it('check UniversalLink does not break with error in item', () => {
     const component = renderer.create(
       <Provider store={store}>

package/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx

@@ -427,7 +427,7 @@ class RecurrenceWidget extends Component {
           break;
       }
 
-      if (value) {
+      if (value === 0 || value) {
         //set value
         values[field] = value;
       } else {

package/src/components/theme/Login/Login.jsx

@@ -239,7 +239,7 @@ class Login extends Component {
                         <Input
                           type="password"
                           id="password"
-                          autocomplete="current-password"
+                          autoComplete="current-password"
                           name="password"
                           placeholder={this.props.intl.formatMessage(
                             messages.password,

package/src/components/theme/View/AlbumView.jsx

@@ -5,9 +5,14 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Container, GridColumn, Segment } from 'semantic-ui-react';
+import {
+  Container as SemanticContainer,
+  GridColumn,
+  Segment,
+} from 'semantic-ui-react';
 import { Button, Modal, Grid } from 'semantic-ui-react';
 import { Icon, UniversalLink, PreviewImage } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 
 import openSVG from '@plone/volto/icons/open.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
@@ -56,6 +61,9 @@ class AlbumView extends Component {
 
   render() {
     const { content } = this.props;
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
     return (
       <Container className="view-wrapper">
         <article id="content">

package/src/components/theme/View/EventView.jsx

@@ -9,6 +9,8 @@ import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
 import { Image, Grid } from 'semantic-ui-react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import { EventDetails } from '@plone/volto/components';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
 
 const EventTextfieldView = ({ content }) => (
   <React.Fragment>
@@ -41,9 +43,11 @@ const EventTextfieldView = ({ content }) => (
  */
 const EventView = (props) => {
   const { content } = props;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
   return (
-    <div id="page-document" className="ui container view-wrapper event-view">
+    <Container id="page-document" className="view-wrapper event-view">
       <Grid>
         <Grid.Column width={7} className="mobile hidden">
           {hasBlocksData(content) ? (
@@ -83,7 +87,7 @@ const EventView = (props) => {
           )}
         </Grid.Column>
       </Grid>
-    </div>
+    </Container>
   );
 };
 

package/src/components/theme/View/FileView.jsx

@@ -5,9 +5,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from 'semantic-ui-react';
-
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 /**
  * File view component class.
@@ -15,22 +15,27 @@ import { flattenToAppURL } from '@plone/volto/helpers';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const FileView = ({ content }) => (
-  <Container className="view-wrapper">
-    <h1 className="documentFirstHeading">
-      {content.title}
-      {content.subtitle && ` - ${content.subtitle}`}
-    </h1>
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content.file?.download && (
-      <a href={flattenToAppURL(content.file.download)}>
-        {content.file.filename}
-      </a>
-    )}
-  </Container>
-);
+const FileView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <h1 className="documentFirstHeading">
+        {content.title}
+        {content.subtitle && ` - ${content.subtitle}`}
+      </h1>
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.file?.download && (
+        <a href={flattenToAppURL(content.file.download)}>
+          {content.file.filename}
+        </a>
+      )}
+    </Container>
+  );
+};
 
 /**
  * Property types.

package/src/components/theme/View/ImageView.jsx

@@ -5,11 +5,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 import prettybytes from 'pretty-bytes';
-
 import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 /**
  * Image view component class.
@@ -17,37 +17,42 @@ import { flattenToAppURL } from '@plone/volto/helpers';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const ImageView = ({ content }) => (
-  <Container className="view-wrapper">
-    <h1 className="documentFirstHeading">
-      {content.title}
-      {content.subtitle && ` - ${content.subtitle}`}
-    </h1>
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content?.image?.download && (
-      <a href={flattenToAppURL(content.image.download)}>
-        <img
-          alt={content.title}
-          src={flattenToAppURL(content.image.scales.preview.download)}
-        />
-        <figcaption>
-          <FormattedMessage
-            id="Size: {size}"
-            defaultMessage="Size: {size}"
-            values={{ size: prettybytes(content.image.size) }}
-          />
-          &nbsp; &mdash; &nbsp;
-          <FormattedMessage
-            id="Click to download full sized image"
-            defaultMessage="Click to download full sized image"
+const ImageView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <h1 className="documentFirstHeading">
+        {content.title}
+        {content.subtitle && ` - ${content.subtitle}`}
+      </h1>
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content?.image?.download && (
+        <a href={flattenToAppURL(content.image.download)}>
+          <img
+            alt={content.title}
+            src={flattenToAppURL(content.image.scales.preview.download)}
           />
-        </figcaption>
-      </a>
-    )}
-  </Container>
-);
+          <figcaption>
+            <FormattedMessage
+              id="Size: {size}"
+              defaultMessage="Size: {size}"
+              values={{ size: prettybytes(content.image.size) }}
+            />
+            &nbsp; &mdash; &nbsp;
+            <FormattedMessage
+              id="Click to download full sized image"
+              defaultMessage="Click to download full sized image"
+            />
+          </figcaption>
+        </a>
+      )}
+    </Container>
+  );
+};
 
 /**
  * Property types.

package/src/components/theme/View/LinkView.jsx

@@ -6,7 +6,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import { FormattedMessage } from 'react-intl';
 import config from '@plone/volto/registry';
@@ -60,6 +60,9 @@ class LinkView extends Component {
   render() {
     const { remoteUrl } = this.props.content;
     const { openExternalLinkInNewTab } = config.settings;
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
     return (
       <Container id="page-document">
         <h1 className="documentFirstHeading">{this.props.content.title}</h1>

package/src/components/theme/View/ListingView.jsx

@@ -5,8 +5,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Segment, Container } from 'semantic-ui-react';
+import { Segment, Container as SemanticContainer } from 'semantic-ui-react';
 import { UniversalLink, PreviewImage } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 
 /**
  * List view component class.
@@ -14,32 +15,37 @@ import { UniversalLink, PreviewImage } from '@plone/volto/components';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const ListingView = ({ content }) => (
-  <Container id="page-home">
-    <section id="content-core">
-      {content.items.map((item) => (
-        <Segment key={item.url} className="listing-item">
-          <Container>
-            <h2>
-              <UniversalLink item={item} title={item['@type']}>
-                {item.title}
-              </UniversalLink>
-            </h2>
-            {item.description && <p>{item.description}</p>}
-          </Container>
-          {item.image_field && (
-            <PreviewImage
-              item={item}
-              size="thumb"
-              alt={item.image_caption ? item.image_caption : item.title}
-              className="ui image"
-            />
-          )}
-        </Segment>
-      ))}
-    </section>
-  </Container>
-);
+const ListingView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container id="page-home">
+      <section id="content-core">
+        {content.items.map((item) => (
+          <Segment key={item.url} className="listing-item">
+            <Container>
+              <h2>
+                <UniversalLink item={item} title={item['@type']}>
+                  {item.title}
+                </UniversalLink>
+              </h2>
+              {item.description && <p>{item.description}</p>}
+            </Container>
+            {item.image_field && (
+              <PreviewImage
+                item={item}
+                size="thumb"
+                alt={item.image_caption ? item.image_caption : item.title}
+                className="ui image"
+              />
+            )}
+          </Segment>
+        ))}
+      </section>
+    </Container>
+  );
+};
 
 /**
  * Property types.