@plone/volto 17.0.0-alpha.16 → 17.0.0-alpha.18

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';
 import Slugger from 'github-slugger';
@@ -36,6 +31,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 ? (
@@ -50,8 +170,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/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/theme/Anontools/Anontools.jsx

@@ -3,13 +3,12 @@ import { Link } from 'react-router-dom';
 import { Menu } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { useToken } from '@plone/volto/hooks/userSession/useToken';
-import { useContent } from '@plone/volto/hooks/content/useContent';
 import config from '@plone/volto/registry';
+import { useSelector, shallowEqual } from 'react-redux';
 
 const Anontools = () => {
-  const token = useToken();
-  const { data: content } = useContent();
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const content = useSelector((state) => state.content.data, shallowEqual);
 
   const { settings } = config;
   return (

package/src/components/theme/Breadcrumbs/Breadcrumbs.jsx

@@ -1,20 +1,13 @@
-/**
- * Breadcrumbs components.
- * @module components/theme/Breadcrumbs/Breadcrumbs
- */
-
-import React, { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
 import { Link } from 'react-router-dom';
 import { Breadcrumb, Container, Segment } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 
-import { Icon } from '@plone/volto/components';
 import { getBreadcrumbs } from '@plone/volto/actions';
 import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
-
+import { Icon } from '@plone/volto/components';
 import homeSVG from '@plone/volto/icons/home.svg';
 
 const messages = defineMessages({
@@ -28,96 +21,56 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Breadcrumbs container class.
- */
-export class BreadcrumbsComponent extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getBreadcrumbs: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-    root: PropTypes.string,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        url: PropTypes.string,
-      }),
-    ).isRequired,
-  };
+const BreadcrumbsComponent = ({ pathname }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
 
-  componentDidMount() {
-    if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-      this.props.getBreadcrumbs(getBaseUrl(this.props.pathname));
-    }
-  }
+  const items = useSelector((state) => state.breadcrumbs.items, shallowEqual);
+  const root = useSelector((state) => state.breadcrumbs.root);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.pathname !== this.props.pathname) {
-      if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-        this.props.getBreadcrumbs(getBaseUrl(nextProps.pathname));
-      }
+  useEffect(() => {
+    if (!hasApiExpander('breadcrumbs', getBaseUrl(pathname))) {
+      dispatch(getBreadcrumbs(getBaseUrl(pathname)));
     }
-  }
+  }, [dispatch, pathname]);
+
+  return (
+    <Segment
+      role="navigation"
+      aria-label={intl.formatMessage(messages.breadcrumbs)}
+      className="breadcrumbs"
+      secondary
+      vertical
+    >
+      <Container>
+        <Breadcrumb>
+          <Link
+            to={root || '/'}
+            className="section"
+            title={intl.formatMessage(messages.home)}
+          >
+            <Icon name={homeSVG} size="18px" />
+          </Link>
+          {items.map((item, index, items) => [
+            <Breadcrumb.Divider key={`divider-${item.url}`} />,
+            index < items.length - 1 ? (
+              <Link key={item.url} to={item.url} className="section">
+                {item.title}
+              </Link>
+            ) : (
+              <Breadcrumb.Section key={item.url} active>
+                {item.title}
+              </Breadcrumb.Section>
+            ),
+          ])}
+        </Breadcrumb>
+      </Container>
+    </Segment>
+  );
+};
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Segment
-        role="navigation"
-        aria-label={this.props.intl.formatMessage(messages.breadcrumbs)}
-        className="breadcrumbs"
-        secondary
-        vertical
-      >
-        <Container>
-          <Breadcrumb>
-            <Link
-              to={this.props.root || '/'}
-              className="section"
-              title={this.props.intl.formatMessage(messages.home)}
-            >
-              <Icon name={homeSVG} size="18px" />
-            </Link>
-            {this.props.items.map((item, index, items) => [
-              <Breadcrumb.Divider key={`divider-${item.url}`} />,
-              index < items.length - 1 ? (
-                <Link key={item.url} to={item.url} className="section">
-                  {item.title}
-                </Link>
-              ) : (
-                <Breadcrumb.Section key={item.url} active>
-                  {item.title}
-                </Breadcrumb.Section>
-              ),
-            ])}
-          </Breadcrumb>
-        </Container>
-      </Segment>
-    );
-  }
-}
+BreadcrumbsComponent.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      items: state.breadcrumbs.items,
-      root: state.breadcrumbs.root,
-    }),
-    { getBreadcrumbs },
-  ),
-)(BreadcrumbsComponent);
+export default BreadcrumbsComponent;

package/src/components/theme/Breadcrumbs/Breadcrumbs.stories.jsx

@@ -1,23 +1,24 @@
 import { injectIntl } from 'react-intl';
 import React from 'react';
-import { BreadcrumbsComponent } from './Breadcrumbs';
+import BreadcrumbsComponent from './Breadcrumbs';
 import Wrapper from '@plone/volto/storybook';
 
 export const Breadcrumb = injectIntl(({ children, ...args }) => {
   return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+    <Wrapper
+      anonymous
+      location={{ pathname: '/folder2/folder21/doc212' }}
+      customStore={{
+        breadcrumbs: {
+          items: [
+            { title: 'Blog', url: '/blog' },
+            { title: 'My first blog', url: '/blog/my-first-blog' },
+          ],
+        },
+      }}
+    >
       <div className="ui segment form attached" style={{ width: '400px' }}>
-        <BreadcrumbsComponent
-          pathname=""
-          items={[
-            {
-              '@id': 'https://volto.kitconcept.com/api/Members',
-              title: 'Users',
-            },
-          ]}
-          getBreadcrumbs={() => {}}
-          {...args}
-        />
+        <BreadcrumbsComponent pathname="" />
       </div>
     </Wrapper>
   );

package/src/components/theme/Comments/CommentEditModal.jsx

@@ -1,14 +1,9 @@
-/**
- * Comment edit modal.
- * @module components/theme/Comments/CommentEditModal
- */
-
-import React, { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { defineMessages, injectIntl } from 'react-intl';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
 
+import { usePrevious } from '@plone/volto/helpers';
 import { updateComment } from '@plone/volto/actions';
 import { ModalForm } from '@plone/volto/components';
 
@@ -27,116 +22,69 @@ const messages = defineMessages({
   },
 });
 
-/**
- * CommentEditModal class.
- * @class CommentEditModal
- * @extends Component
- */
-class CommentEditModal extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    updateComment: PropTypes.func.isRequired,
-    id: PropTypes.string,
-    text: PropTypes.string,
-    request: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    open: PropTypes.bool.isRequired,
-    onOk: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    id: '',
-    text: '',
-  };
+const CommentEditModal = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { onOk, open, onCancel } = props;
+  const request = useSelector((state) => state.comments.update, shallowEqual);
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs CommentEditModal
-   */
-  constructor(props) {
-    super(props);
-    this.onSubmit = this.onSubmit.bind(this);
-  }
+  const prevRequestLoading = usePrevious(request.loading);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.request.loading && nextProps.request.loaded) {
-      this.props.onOk();
+  useEffect(() => {
+    if (prevRequestLoading && request.loaded) {
+      onOk();
     }
-  }
+  }, [onOk, prevRequestLoading, request.loaded]);
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {Object} data Form data
-   * @returns {undefined}
-   */
-  onSubmit(data) {
-    this.props.updateComment(this.props.id, data.text);
-  }
+  const onSubmit = (data) => {
+    dispatch(updateComment(props.id, data.text));
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      this.props.open && (
-        <ModalForm
-          open={this.props.open}
-          onSubmit={this.onSubmit}
-          onCancel={this.props.onCancel}
-          formData={{ text: this.props.text }}
-          title={this.props.intl.formatMessage(messages.editComment)}
-          schema={{
-            fieldsets: [
-              {
-                id: 'default',
-                title: this.props.intl.formatMessage(messages.default),
-                fields: ['text'],
-              },
-            ],
-            properties: {
-              text: {
-                title: this.props.intl.formatMessage(messages.comment),
-                type: 'string',
-                description: '',
-              },
+  return (
+    props.open && (
+      <ModalForm
+        open={open}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        formData={{ text: props.text }}
+        title={intl.formatMessage(messages.editComment)}
+        schema={{
+          fieldsets: [
+            {
+              id: 'default',
+              title: intl.formatMessage(messages.default),
+              fields: ['text'],
+            },
+          ],
+          properties: {
+            text: {
+              title: intl.formatMessage(messages.comment),
+              type: 'string',
+              description: '',
             },
-            required: ['text'],
-          }}
-        />
-      )
-    );
-  }
-}
+          },
+          required: ['text'],
+        }}
+      />
+    )
+  );
+};
+
+CommentEditModal.propTypes = {
+  id: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  request: PropTypes.shape({
+    loading: PropTypes.bool,
+    loaded: PropTypes.bool,
+  }),
+  open: PropTypes.bool.isRequired,
+  onOk: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
+CommentEditModal.defaultProps = {
+  id: '',
+  text: '',
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      request: state.comments.update,
-    }),
-    { updateComment },
-  ),
-)(CommentEditModal);
+export default CommentEditModal;