@plone/volto 16.21.3 → 16.22.1

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/Contents/ContentsPropertiesModal.jsx

@@ -70,14 +70,6 @@ const messages = defineMessages({
     defaultMessage:
       'If selected, this item will not appear in the navigation tree',
   },
-  yes: {
-    id: 'Yes',
-    defaultMessage: 'Yes',
-  },
-  no: {
-    id: 'No',
-    defaultMessage: 'No',
-  },
 });
 
 /**
@@ -209,11 +201,7 @@ class ContentsPropertiesModal extends Component {
                 title: this.props.intl.formatMessage(
                   messages.excludeFromNavTitle,
                 ),
-                type: 'array',
-                choices: [
-                  [true, this.props.intl.formatMessage(messages.yes)],
-                  [false, this.props.intl.formatMessage(messages.no)],
-                ],
+                type: 'boolean',
               },
             },
             required: [],

package/src/components/manage/Controlpanels/Groups/RenderGroups.jsx

@@ -57,7 +57,7 @@ class RenderGroups extends Component {
    * @memberof UsersControlpanelUser
    */
   onChange(event, { value }) {
-    const [group, role] = value.split('.');
+    const [group, role] = value.split('&role=');
     this.props.updateGroups(group, role);
   }
 
@@ -97,7 +97,7 @@ class RenderGroups extends Component {
                     : this.props.group.roles.includes(role.id)
                 }
                 onChange={this.onChange}
-                value={`${this.props.group.id}.${role.id}`}
+                value={`${this.props.group.id}&role=${role.id}`}
               />
             )}
           </Table.Cell>

package/src/components/manage/Controlpanels/Users/RenderUsers.jsx

@@ -53,7 +53,7 @@ class RenderUsers extends Component {
    */
 
   onChange(event, { value }) {
-    const [user, role] = value.split('.');
+    const [user, role] = value.split('&role=');
     this.props.updateUser(user, role);
   }
   /**
@@ -83,7 +83,7 @@ class RenderUsers extends Component {
               <Checkbox
                 checked={this.props.user.roles.includes(role.id)}
                 onChange={this.onChange}
-                value={`${this.props.user.id}.${role.id}`}
+                value={`${this.props.user.id}&role=${role.id}`}
               />
             )}
           </Table.Cell>

package/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx

@@ -107,6 +107,7 @@ class UsersControlpanel extends Component {
       isClient: false,
       currentPage: 0,
       pageSize: 10,
+      loginUsingEmail: false,
     };
   }
 
@@ -122,6 +123,14 @@ class UsersControlpanel extends Component {
     }
   };
 
+  // Because username field needs to be disabled if email login is enabled!
+  checkLoginUsingEmailStatus = async () => {
+    await this.props.getControlpanel('security');
+    this.setState({
+      loginUsingEmail: this.props.controlPanelData?.data.use_email_as_login,
+    });
+  };
+
   /**
    * Component did mount
    * @method componentDidMount
@@ -132,6 +141,7 @@ class UsersControlpanel extends Component {
       isClient: true,
     });
     this.fetchData();
+    this.checkLoginUsingEmailStatus();
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -425,7 +435,7 @@ class UsersControlpanel extends Component {
                     id: 'default',
                     title: 'FIXME: User Data',
                     fields: [
-                      'username',
+                      ...(!this.state.loginUsingEmail ? ['username'] : []),
                       'fullname',
                       'email',
                       'password',
@@ -436,15 +446,19 @@ class UsersControlpanel extends Component {
                   },
                 ],
                 properties: {
-                  username: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserFormUsernameTitle,
-                    ),
-                    type: 'string',
-                    description: this.props.intl.formatMessage(
-                      messages.addUserFormUsernameDescription,
-                    ),
-                  },
+                  ...(!this.state.loginUsingEmail
+                    ? {
+                        username: {
+                          title: this.props.intl.formatMessage(
+                            messages.addUserFormUsernameTitle,
+                          ),
+                          type: 'string',
+                          description: this.props.intl.formatMessage(
+                            messages.addUserFormUsernameDescription,
+                          ),
+                        },
+                      }
+                    : {}),
                   fullname: {
                     title: this.props.intl.formatMessage(
                       messages.addUserFormFullnameTitle,
@@ -670,6 +684,7 @@ export default compose(
       createRequest: state.users.create,
       loadRolesRequest: state.roles,
       inheritedRole: state.authRole.authenticatedRole,
+      controlPanelData: state.controlpanels?.controlpanel,
     }),
     (dispatch) =>
       bindActionCreators(

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/manage/Widgets/SelectUtils.js

@@ -111,7 +111,7 @@ export function normalizeValue(choices, value, intl) {
 
   if (Array.isArray(value)) {
     // a list of values, like ['foo', 'bar'];
-    return value.map((v) => normalizeValue(choices, v));
+    return value.map((v) => normalizeValue(choices, v, intl));
   }
 
   if (isObject(value)) {

package/src/components/theme/Error/ServerError.jsx

@@ -0,0 +1,29 @@
+/**
+ * @module components/theme/Error/ServerError
+ */
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Container } from 'semantic-ui-react';
+import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
+
+/**
+ * server error
+ * @function ServerError
+ * @returns {string} Markup of the server error page.
+ */
+const ServerError = () => (
+  <Container className="view-wrapper">
+    <h1>
+      <FormattedMessage id="Server Error" defaultMessage="Server Error" />
+    </h1>
+    <p className="description">
+      <FormattedMessage
+        id="We apologize for the inconvenience, but there was an unexpected error on the server."
+        defaultMessage="We apologize for the inconvenience, but there was an unexpected error on the server."
+      />
+    </p>
+  </Container>
+);
+
+export default withServerErrorCode(500)(ServerError);

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.