@plone/volto 18.0.0-alpha.13 → 18.0.0-alpha.15

package/src/components/manage/Sidebar/ObjectBrowser.jsx

@@ -98,7 +98,7 @@ const withObjectBrowser = (WrappedComponent) =>
               <ObjectBrowserBody
                 {...this.props}
                 data={
-                  this.state.propDataName
+                  this.state.propDataName && this.props[this.state.propDataName]
                     ? this.props[this.state.propDataName]
                     : this.props.data
                 }

package/src/components/manage/Sidebar/Sidebar.jsx

@@ -138,6 +138,7 @@ const Sidebar = (props) => {
           panes={[
             !!documentTab && {
               menuItem: {
+                key: 'documentTab',
                 as: 'button',
                 className: 'ui button',
                 content: type || intl.formatMessage(messages.document),
@@ -152,6 +153,7 @@ const Sidebar = (props) => {
             },
             !!blockTab && {
               menuItem: {
+                key: 'blockTab',
                 as: 'button',
                 className: 'ui button',
                 content: intl.formatMessage(messages.block),

package/src/components/manage/Sidebar/SidebarPopup.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import PropTypes from 'prop-types';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
@@ -32,9 +32,13 @@ const SidebarPopup = (props) => {
           classNames="overlay-container"
           unmountOnExit
         >
-          <Portal node={document?.body}>
-            <div className="overlay-container"></div>
-          </Portal>
+          <>
+            {document?.body &&
+              createPortal(
+                <div className="overlay-container"></div>,
+                document?.body,
+              )}
+          </>
         </CSSTransition>
       )}
       <CSSTransition
@@ -43,23 +47,26 @@ const SidebarPopup = (props) => {
         classNames="sidebar-container"
         unmountOnExit
       >
-        <Portal>
-          <aside
-            role="presentation"
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            onKeyDown={(e) => {
-              e.stopPropagation();
-            }}
-            ref={asideElement}
-            key="sidebarpopup"
-            className="sidebar-container"
-            style={{ overflowY: 'auto' }}
-          >
-            {children}
-          </aside>
-        </Portal>
+        <>
+          {createPortal(
+            <aside
+              role="presentation"
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+              onKeyDown={(e) => {
+                e.stopPropagation();
+              }}
+              ref={asideElement}
+              key="sidebarpopup"
+              className="sidebar-container"
+              style={{ overflowY: 'auto' }}
+            >
+              {children}
+            </aside>,
+            document.body,
+          )}
+        </>
       </CSSTransition>
     </>
   );

package/src/components/manage/Sidebar/SidebarPortal.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 
 /**
  * Portal that wraps Sidebar components
@@ -16,8 +16,9 @@ const SidebarPortal = ({ children, selected, tab = 'sidebar-properties' }) => {
 
   return (
     <>
-      {selected && (
-        <Portal node={isClient && document.getElementById(tab)}>
+      {isClient &&
+        selected &&
+        createPortal(
           <div role="form" style={{ height: '100%' }}>
             <div
               style={{ height: '100%' }}
@@ -31,9 +32,9 @@ const SidebarPortal = ({ children, selected, tab = 'sidebar-properties' }) => {
             >
               {children}
             </div>
-          </div>
-        </Portal>
-      )}
+          </div>,
+          document.getElementById(tab),
+        )}
     </>
   );
 };

package/src/components/manage/Toolbar/Toolbar.jsx

@@ -181,7 +181,9 @@ class Toolbar extends Component {
     types: [],
   };
 
+  toolbarRef = React.createRef();
   toolbarWindow = React.createRef();
+  buttonRef = React.createRef();
 
   constructor(props) {
     super(props);
@@ -262,8 +264,9 @@ class Toolbar extends Component {
     );
   };
 
-  closeMenu = () =>
+  closeMenu = () => {
     this.setState(() => ({ showMenu: false, loadedComponents: [] }));
+  };
 
   loadComponent = (type) => {
     const { loadedComponents } = this.state;
@@ -285,6 +288,15 @@ class Toolbar extends Component {
     }));
   };
 
+  toggleButtonPressed = (e) => {
+    const target = e.target;
+    const button =
+      target.tagName === 'BUTTON'
+        ? target
+        : this.findAncestor(e.target, 'button');
+    this.buttonRef.current = button;
+  };
+
   toggleMenu = (e, selector) => {
     if (this.state.showMenu) {
       this.closeMenu();
@@ -310,11 +322,29 @@ class Toolbar extends Component {
         menuStyle: { top: 0 },
       }));
     }
+    this.toggleButtonPressed(e);
     this.loadComponent(selector);
   };
 
+  findAncestor = (el, sel) => {
+    while (
+      (el = el.parentElement) &&
+      !(el.matches || el.matchesSelector).call(el, sel)
+    );
+    return el;
+  };
+
   handleClickOutside = (e) => {
+    const target = e.target;
     if (this.pusher && doesNodeContainClick(this.pusher, e)) return;
+
+    // if the click is on the same button, do not close the menu as it
+    // may be handled by the toggleMenu action
+    const button =
+      doesNodeContainClick(this.toolbarRef.current, e) &&
+      this.findAncestor(target, 'button');
+    if (button && button === this.buttonRef.current) return;
+
     this.closeMenu();
   };
 
@@ -427,7 +457,10 @@ class Toolbar extends Component {
               )}
             </div>
           </div>
-          <div className={this.state.expanded ? 'toolbar expanded' : 'toolbar'}>
+          <div
+            className={this.state.expanded ? 'toolbar expanded' : 'toolbar'}
+            ref={this.toolbarRef}
+          >
             <div className="toolbar-body">
               <div className="toolbar-actions">
                 {this.props.hideDefaultViewButtons && this.props.inner && (

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

@@ -306,7 +306,9 @@ class ArrayWidget extends Component {
           useDragHandle
           // react-sortable-hoc props:
           axis="xy"
-          onSortEnd={this.onSortEnd}
+          onSortEnd={(sortProp) => {
+            this.onSortEnd(selectedOption, sortProp);
+          }}
           menuShouldScrollIntoView={false}
           distance={4}
           // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:

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

@@ -112,7 +112,7 @@ const FileWidget = (props) => {
       if (imageMimetypes.includes(fields[1])) {
         setFileType(true);
         let imagePreview = document.getElementById(`field-${id}-image`);
-        imagePreview.src = reader.result;
+        if (imagePreview) imagePreview.src = reader.result;
       } else {
         setFileType(false);
       }

package/src/components/manage/Widgets/ObjectBrowserWidget.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import ObjectBrowserWidget from './ObjectBrowserWidget';
@@ -14,7 +14,7 @@ test('renders a objectBrowser widget component', () => {
       messages: {},
     },
   });
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={store}>
       <MemoryRouter>
         <ObjectBrowserWidget
@@ -26,6 +26,6 @@ test('renders a objectBrowser widget component', () => {
       </MemoryRouter>
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(container).toMatchSnapshot();
 });

package/src/components/manage/Widgets/ObjectListWidget.test.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { Provider } from 'react-intl-redux';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
-import '@testing-library/jest-dom/extend-expect';
 import ObjectListWidget from './ObjectListWidget';
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');

package/src/components/manage/Widgets/ObjectWidget.test.jsx

@@ -3,7 +3,6 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import ObjectWidget from './ObjectWidget';
 
 const mockStore = configureStore();

package/src/components/manage/Widgets/SchemaWidget.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -21,7 +21,7 @@ test('renders a schema widget component', () => {
     },
   });
 
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={store}>
       <SchemaWidget
         id="my-field"
@@ -31,6 +31,6 @@ test('renders a schema widget component', () => {
       />
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(container).toMatchSnapshot();
 });

package/src/components/manage/Widgets/SchemaWidgetFieldset.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import SchemaWidgetFieldsetComponent from './SchemaWidgetFieldset';
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
@@ -10,7 +10,7 @@ beforeAll(
 );
 
 test('renders a contents item component', () => {
-  const component = renderer.create(
+  const { container } = render(
     <DragDropContext onDragEnd={(x) => x}>
       <Droppable droppableId="tabs-schema-edit" direction="horizontal">
         {(provided, snapshot) => (
@@ -28,7 +28,7 @@ test('renders a contents item component', () => {
               onShowEditFieldset={(x) => x}
               onShowDeleteFieldset={(x) => x}
               onClick={(x) => x}
-              getItemStyle={(x) => x}
+              getItemStyle={(x) => ({})}
               isDraggable={false}
               isDisabled={false}
             />
@@ -38,6 +38,6 @@ test('renders a contents item component', () => {
       </Droppable>
     </DragDropContext>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(container).toMatchSnapshot();
 });

package/src/components/manage/Widgets/UrlWidget.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -15,7 +15,7 @@ test('renders an url widget component', () => {
     },
   });
 
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={store}>
       <UrlWidget
         id="test-url"
@@ -27,6 +27,6 @@ test('renders an url widget component', () => {
       />
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(container).toMatchSnapshot();
 });

package/src/components/manage/Widgets/VocabularyTermsWidget.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -55,7 +55,7 @@ test('renders a dictionary widget component', () => {
       },
     ],
   };
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={store}>
       <VocabularyTermsWidget
         id="test-dict"
@@ -68,6 +68,6 @@ test('renders a dictionary widget component', () => {
       />
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(container).toMatchSnapshot();
 });

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

@@ -1,7 +1,7 @@
 import { useEffect, useState, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { compose } from 'redux';
 import { Button, Comment, Container, Icon } from 'semantic-ui-react';
@@ -356,19 +356,18 @@ const Comments = (props) => {
         </Button>
       )}
 
-      {replyTo && (
-        <Portal
-          node={document && document.getElementById(`reply-place-${replyTo}`)}
-        >
+      {replyTo &&
+        document &&
+        createPortal(
           <Form
             onSubmit={onSubmit}
             onCancel={onEditCancel}
             submitLabel={intl.formatMessage(messages.comment)}
             resetAfterSubmit
             schema={makeFormSchema(intl)}
-          />
-        </Portal>
-      )}
+          />,
+          document.getElementById(`reply-place-${replyTo}`),
+        )}
     </Container>
   );
 };

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

@@ -57,6 +57,13 @@ describe('Comments', () => {
         locale: 'en',
         messages: {},
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/Component/Component.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
 import { render } from '@testing-library/react';
 import Component from './Component';
 import config from '@plone/volto/registry';

package/src/components/theme/ContactForm/ContactForm.jsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Container, Message, Icon } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link, useHistory, useLocation } from 'react-router-dom';
@@ -149,8 +149,8 @@ const ContactFormComponent = () => {
             required: ['from', 'message'],
           }}
         />
-        {isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {isClient &&
+          createPortal(
             <Toolbar
               pathname={pathname}
               hideDefaultViewButtons
@@ -164,9 +164,9 @@ const ContactFormComponent = () => {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     </div>
   );

package/src/components/theme/ContactForm/ContactForm.test.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 import ContactForm from './ContactForm';
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../../manage/Toolbar/Toolbar', () =>
+  jest.fn(() => <div id="Portal" />),
+);
 
 const mockStore = configureStore();
 describe('Contact form', () => {
@@ -25,15 +25,16 @@ describe('Contact form', () => {
       userSession: {},
       content: {},
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <ContactForm />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders a contact form with error message', () => {
@@ -52,14 +53,15 @@ describe('Contact form', () => {
       userSession: {},
       content: {},
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <ContactForm />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/theme/Footer/Footer.test.jsx

@@ -3,7 +3,6 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import Footer from './Footer';
 
 const mockStore = configureStore();

package/src/components/theme/Logo/Logo.Multilingual.test.jsx

@@ -30,7 +30,7 @@ describe('Multilingual Logo', () => {
         },
       },
       site: {
-        data: {},
+        data: { 'plone.site_title': 'Plone Site' },
       },
     });
     const component = renderer.create(
@@ -95,6 +95,7 @@ describe('Multilingual Logo', () => {
         data: {
           'plone.site_logo':
             'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+          'plone.site_title': 'Plone Site',
         },
       },
     });
@@ -128,6 +129,7 @@ describe('Multilingual Logo', () => {
         data: {
           'plone.site_logo':
             'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+          'plone.site_title': 'Plone Site',
         },
       },
     });

package/src/components/theme/Logo/Logo.jsx

@@ -2,9 +2,9 @@
  * Logo component.
  * @module components/theme/Logo/Logo
  */
+import { defineMessages, useIntl } from 'react-intl';
 import { useEffect } from 'react';
 import { Image } from 'semantic-ui-react';
-import { ConditionalLink } from '@plone/volto/components';
 import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
 import { useSelector, useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
@@ -26,6 +26,18 @@ const Logo = () => {
   const site = useSelector((state) => state.site.data);
   const navroot = useSelector((state) => state.navroot.data);
   const dispatch = useDispatch();
+  const intl = useIntl();
+
+  const messages = defineMessages({
+    home: {
+      id: 'Home',
+      defaultMessage: 'Home',
+    },
+    logoOf: {
+      id: 'Logo of',
+      defaultMessage: 'Logo of',
+    },
+  });
 
   useEffect(() => {
     if (pathname && !hasApiExpander('navroot', getBaseUrl(pathname))) {
@@ -34,26 +46,20 @@ const Logo = () => {
   }, [dispatch, pathname]);
 
   const navRootPath = flattenToAppURL(navroot?.navroot?.['@id']) || '/';
-  const currentURLIsNavRoot = pathname !== navRootPath;
 
   return (
-    <ConditionalLink
-      href={navRootPath}
-      title={navroot?.navroot?.title}
-      // In case that the content returns 404, there is no information about the portal
-      // then render the link anyways to get out of the Unauthorized page
-      condition={!navroot || currentURLIsNavRoot}
-    >
+    <a href={navRootPath} aria-label={intl.formatMessage(messages.home)}>
       <Image
         src={
           site['plone.site_logo']
             ? flattenToAppURL(site['plone.site_logo'])
             : LogoImage
         }
-        alt={navroot?.navroot?.title}
-        title={navroot?.navroot?.title}
+        alt={
+          intl.formatMessage(messages.logoOf) + ' ' + site['plone.site_title']
+        }
       />
-    </ConditionalLink>
+    </a>
   );
 };
 

package/src/components/theme/Logo/Logo.test.jsx

@@ -31,7 +31,7 @@ describe('Logo', () => {
         },
       },
       site: {
-        data: {},
+        data: { 'plone.site_title': 'Plone Site' },
       },
     });
     const component = renderer.create(
@@ -63,6 +63,7 @@ describe('Logo', () => {
         data: {
           'plone.site_logo':
             'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+          'plone.site_title': 'Plone Site',
         },
       },
     });
@@ -101,6 +102,7 @@ describe('Logo', () => {
         data: {
           'plone.site_logo':
             'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+          'plone.site_title': 'Plone Site',
         },
       },
     });
@@ -134,6 +136,7 @@ describe('Logo', () => {
         data: {
           'plone.site_logo':
             'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+          'plone.site_title': 'Plone Site',
         },
       },
     });