@plone/volto 18.0.0-alpha.14 → 18.0.0-alpha.16

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/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/Logout/Logout.test.jsx

@@ -1,8 +1,9 @@
 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-redux';
 import { IntlProvider } from 'react-intl';
+import { MemoryRouter } from 'react-router-dom';
 
 import Logout from './Logout';
 
@@ -21,14 +22,16 @@ describe('Logout', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <IntlProvider locale="en">
-          <Logout location={{ pathname: '' }} />
+          <MemoryRouter>
+            <Logout location={{ pathname: '' }} />
+          </MemoryRouter>
         </IntlProvider>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/theme/Search/Search.jsx

@@ -10,7 +10,7 @@ import { compose } from 'redux';
 import { UniversalLink } from '@plone/volto/components';
 import { asyncConnect } from '@plone/volto/helpers';
 import { FormattedMessage } from 'react-intl';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Container, Pagination, Button, Header } from 'semantic-ui-react';
 import qs from 'query-string';
 import classNames from 'classnames';
@@ -309,15 +309,15 @@ class Search extends Component {
             </section>
           </article>
         </div>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
               inner={<span />}
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }

package/src/components/theme/Search/Search.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 { MemoryRouter } from 'react-router-dom';
@@ -8,9 +8,10 @@ import { __test__ as Search } from './Search';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../../manage/Toolbar/Toolbar', () =>
+  jest.fn(() => <div id="Portal" />),
+);
+
 jest.mock('./SearchTags', () => jest.fn(() => <div id="search-tags" />));
 
 describe('Search', () => {
@@ -27,15 +28,16 @@ describe('Search', () => {
     const history = {
       location: { pathname: '/blog', search: '?SearchableText=blog' },
     };
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Search history={history} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders a search component', () => {
@@ -59,14 +61,15 @@ describe('Search', () => {
     const history = {
       location: { pathname: '/blog', search: '?SearchableText=blog' },
     };
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Search history={history} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
 import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import SlotRenderer from './SlotRenderer';

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

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Redirect } from 'react-router-dom';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { injectIntl } from 'react-intl';
 import qs from 'query-string';
 
@@ -269,11 +269,11 @@ class View extends Component {
         {this.props.content.allow_discussion && (
           <Comments pathname={this.props.pathname} />
         )}
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
-            <Toolbar pathname={this.props.pathname} inner={<span />} />
-          </Portal>
-        )}
+        {this.state.isClient &&
+          createPortal(
+            <Toolbar pathname={this.props.pathname} inner={<span />} />,
+            document.getElementById('toolbar'),
+          )}
       </div>
     );
   }

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

@@ -1,5 +1,5 @@
 import React, { useEffect } 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';
 
@@ -25,9 +25,10 @@ beforeAll(() => {
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../../manage/Toolbar/Toolbar', () =>
+  jest.fn(() => <div id="Portal" />),
+);
+
 jest.mock('../SocialSharing/SocialSharing', () =>
   jest.fn(() => <div id="SocialSharing" />),
 );
@@ -150,13 +151,14 @@ describe('View', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <View location={{ pathname: '/test' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders a summary view', () => {
@@ -170,13 +172,14 @@ describe('View', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <View location={{ pathname: '/test' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders a tabular view', () => {
@@ -190,13 +193,14 @@ describe('View', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <View location={{ pathname: '/test' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders a document view', () => {
@@ -210,13 +214,14 @@ describe('View', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <View location={{ pathname: '/test' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders a new view element if the @id changed', () => {
@@ -238,16 +243,18 @@ describe('View', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { rerender } = render(
       <Provider store={store}>
         <View location={{ pathname: '/a' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
     expect(instanceCount).toBe(1);
     store.getState().content.data['@id'] = '/b';
-    component.update(
+    rerender(
       <Provider store={store}>
         <View location={{ pathname: '/b' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
     expect(instanceCount).toBe(2);

package/src/components/theme/Widgets/BooleanWidget.jsx

@@ -24,8 +24,8 @@ const BooleanWidget = ({ value, children, className, intl }) => {
               : intl.formatMessage(messages.no),
           )
         : value
-        ? intl.formatMessage(messages.yes)
-        : intl.formatMessage(messages.no)}
+          ? intl.formatMessage(messages.yes)
+          : intl.formatMessage(messages.no)}
     </span>
   ) : (
     ''

package/src/config/Loadables.jsx

@@ -39,22 +39,22 @@ export const loadables = {
   // draftjs libs
   immutableLib: loadable.lib(() => import('immutable')),
   draftJs: loadable.lib(() => import('draft-js')),
-  draftJsLibIsSoftNewlineEvent: loadable.lib(() =>
-    import('draft-js/lib/isSoftNewlineEvent'),
+  draftJsLibIsSoftNewlineEvent: loadable.lib(
+    () => import('draft-js/lib/isSoftNewlineEvent'),
   ),
   draftJsFilters: loadable.lib(() => import('draftjs-filters')),
-  draftJsInlineToolbarPlugin: loadable.lib(() =>
-    import('draft-js-inline-toolbar-plugin'),
+  draftJsInlineToolbarPlugin: loadable.lib(
+    () => import('draft-js-inline-toolbar-plugin'),
   ),
   draftJsImportHtml: loadable.lib(() => import('draft-js-import-html')),
-  draftJsBlockBreakoutPlugin: loadable.lib(() =>
-    import('draft-js-block-breakout-plugin'),
+  draftJsBlockBreakoutPlugin: loadable.lib(
+    () => import('draft-js-block-breakout-plugin'),
   ),
-  draftJsCreateInlineStyleButton: loadable.lib(() =>
-    import('draft-js-buttons/lib/utils/createInlineStyleButton'),
+  draftJsCreateInlineStyleButton: loadable.lib(
+    () => import('draft-js-buttons/lib/utils/createInlineStyleButton'),
   ),
-  draftJsCreateBlockStyleButton: loadable.lib(() =>
-    import('draft-js-buttons/lib/utils/createBlockStyleButton'),
+  draftJsCreateBlockStyleButton: loadable.lib(
+    () => import('draft-js-buttons/lib/utils/createBlockStyleButton'),
   ),
   draftJsPluginsUtils: loadable.lib(() => import('draft-js-plugins-utils')),
 };

package/src/config/Views.jsx

@@ -18,8 +18,8 @@ import Unauthorized from '@plone/volto/components/theme/Unauthorized/Unauthorize
 import Forbidden from '@plone/volto/components/theme/Forbidden/Forbidden';
 import ServerError from '@plone/volto/components/theme/Error/ServerError';
 
-const EventView = loadable(() =>
-  import('@plone/volto/components/theme/View/EventView'),
+const EventView = loadable(
+  () => import('@plone/volto/components/theme/View/EventView'),
 );
 
 defineMessages({

package/src/config/Widgets.jsx

@@ -55,13 +55,14 @@ import TitleViewWidget from '@plone/volto/components/theme/Widgets/TitleWidget';
 import TokenViewWidget from '@plone/volto/components/theme/Widgets/TokenWidget';
 import UrlViewWidget from '@plone/volto/components/theme/Widgets/UrlWidget';
 
-export const DatetimeWidget = loadable(() =>
-  import('@plone/volto/components/manage/Widgets/DatetimeWidget'),
+export const DatetimeWidget = loadable(
+  () => import('@plone/volto/components/manage/Widgets/DatetimeWidget'),
 );
-export const RecurrenceWidget = loadable(() =>
-  import(
-    '@plone/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget'
-  ),
+export const RecurrenceWidget = loadable(
+  () =>
+    import(
+      '@plone/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget'
+    ),
 );
 
 // Widgets mapping

package/src/helpers/AsyncConnect/AsyncConnect.test.js

@@ -12,8 +12,6 @@ import { AsyncConnectWithContext, AsyncConnect } from './AsyncConnect'; // , Asy
 import { asyncConnect, loadOnServer } from './';
 import { matchAllRoutes } from './utils';
 
-import '@testing-library/jest-dom/extend-expect';
-
 describe('<ReduxAsyncConnect />', () => {
   const initialEmptyState = {
     router: {

package/src/helpers/Blocks/Blocks.js

@@ -483,26 +483,26 @@ export function applySchemaDefaults({ data = {}, schema, intl }) {
             [currentField]: schema.properties[currentField].default,
           }
         : intl &&
-          schema.properties[currentField].schema &&
-          !(schema.properties[currentField].widget === 'object_list') // TODO: this should be renamed as itemSchema
-        ? {
-            ...accumulator,
-            [currentField]: {
-              ...applySchemaDefaults({
-                data: { ...data[currentField], ...accumulator[currentField] },
-                schema:
-                  typeof schema.properties[currentField].schema === 'function'
-                    ? schema.properties[currentField].schema({
-                        data: accumulator[currentField],
-                        formData: accumulator[currentField],
-                        intl,
-                      })
-                    : schema.properties[currentField].schema,
-                intl,
-              }),
-            },
-          }
-        : accumulator;
+            schema.properties[currentField].schema &&
+            !(schema.properties[currentField].widget === 'object_list') // TODO: this should be renamed as itemSchema
+          ? {
+              ...accumulator,
+              [currentField]: {
+                ...applySchemaDefaults({
+                  data: { ...data[currentField], ...accumulator[currentField] },
+                  schema:
+                    typeof schema.properties[currentField].schema === 'function'
+                      ? schema.properties[currentField].schema({
+                          data: accumulator[currentField],
+                          formData: accumulator[currentField],
+                          intl,
+                        })
+                      : schema.properties[currentField].schema,
+                  intl,
+                }),
+              },
+            }
+          : accumulator;
     }, {}),
     data,
   );

package/src/helpers/Html/Html.jsx

@@ -143,8 +143,8 @@ class Html extends Component {
               rel: !criticalCss
                 ? elem.props.rel
                 : elem.props.as === 'style'
-                ? 'prefetch'
-                : elem.props.rel,
+                  ? 'prefetch'
+                  : elem.props.rel,
             }),
           )}
           {/* Styles in development are loaded with Webpack's style-loader, in production,

package/src/helpers/Utils/Date.js

@@ -42,10 +42,10 @@ export function formatDate({
   format = format
     ? format
     : long && !includeTime
-    ? long_date_format
-    : includeTime
-    ? short_date_and_time_format
-    : short_date_format;
+      ? long_date_format
+      : includeTime
+        ? short_date_and_time_format
+        : short_date_format;
 
   const formatter = new Intl.DateTimeFormat(locale, format);
   return formatToParts
@@ -94,6 +94,6 @@ export function formatRelativeDate({
   return isNaN(v)
     ? ''
     : formatToParts
-    ? formatter.formatToParts(v, tag)
-    : formatter.format(v, tag).replace('\u202F', ' '); // use "now" ?
+      ? formatter.formatToParts(v, tag)
+      : formatter.format(v, tag).replace('\u202F', ' '); // use "now" ?
 }

package/src/helpers/Utils/UseDetectClickOutside.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDetectClickOutside } from './useDetectClickOutside';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import { BlockChooser } from '@plone/volto/components';
 
@@ -44,10 +44,9 @@ function OpenedChooserWithPortal(props) {
     triggerKeys: ['Escape'],
   });
 
-  return (
-    <Portal node={document.getElementById('body')}>
-      <div ref={blockChooserRef}>{`Hello ${props.id}`}</div>
-    </Portal>
+  return createPortal(
+    <div ref={blockChooserRef}>{`Hello ${props.id}`}</div>,
+    document.getElementById('body'),
   );
 }
 
@@ -124,7 +123,7 @@ function TestComponentWithPortalAndPopper(props) {
         ref={setReferenceElement}
         onClick={() => setOpenMenu(true)}
       >{`Click me ${props.id}`}</button>
-      <Portal node={document.getElementById('body')}>
+      {createPortal(
         <div
           ref={setPopperElement}
           style={styles.popper}
@@ -136,8 +135,9 @@ function TestComponentWithPortalAndPopper(props) {
               setOpenMenu={setOpenMenu}
             />
           )}
-        </div>
-      </Portal>
+        </div>,
+        document.body,
+      )}
     </div>
   );
 }

package/src/helpers/Utils/Utils.js

@@ -136,8 +136,8 @@ export const getColor = (name) => {
   const namedColor = namedColors[name]
     ? namedColors[name]
     : safeColors.length > 0
-    ? safeColors.pop()
-    : `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+      ? safeColors.pop()
+      : `#${Math.floor(Math.random() * 16777215).toString(16)}`;
   if (!namedColors[name]) {
     namedColors[name] = namedColor;
   }