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

package/src/components/manage/Rules/Rules.jsx

@@ -8,7 +8,7 @@ import { Helmet } from '@plone/volto/helpers';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link } from 'react-router-dom';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import {
   Button,
   Checkbox,
@@ -484,8 +484,8 @@ class Rules extends Component {
             </Button>
           </React.Fragment>
         )}
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -502,9 +502,9 @@ class Rules extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
@@ -9,9 +9,8 @@ import Rules from './Rules';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+
 jest.mock('../Toolbar/More', () => jest.fn(() => <div className="More" />));
 
 describe('Rules', () => {
@@ -65,12 +64,13 @@ describe('Rules', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Rules location={{ pathname: '/blog/rules' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Sharing/Sharing.jsx

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link, withRouter } from 'react-router-dom';
 import { find, isEqual, map } from 'lodash';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import {
   Button,
   Checkbox,
@@ -505,8 +505,8 @@ class SharingComponent extends Component {
             </Form>
           </Plug>
         </Segment.Group>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -523,9 +523,9 @@ class SharingComponent extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }

package/src/components/manage/Sharing/Sharing.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 jwt from 'jsonwebtoken';
@@ -10,9 +10,7 @@ import Sharing from './Sharing';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('Sharing', () => {
   it('renders a sharing component', () => {
@@ -57,16 +55,18 @@ describe('Sharing', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+
+    const { container } = render(
       <Provider store={store}>
         <PluggablesProvider>
           <MemoryRouter>
             <Sharing location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
           </MemoryRouter>
         </PluggablesProvider>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

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/ObjectBrowserBody.jsx

@@ -104,27 +104,27 @@ class ObjectBrowserBody extends Component {
         this.props.mode === 'multiple'
           ? '/'
           : this.props.mode === 'image' && this.props.data?.url
-          ? getParentURL(this.props.data.url)
-          : '/',
+            ? getParentURL(this.props.data.url)
+            : '/',
       currentLinkFolder:
         this.props.mode === 'multiple'
           ? '/'
           : this.props.mode === 'link' && this.props.data?.href
-          ? getParentURL(this.props.data.href)
-          : '/',
+            ? getParentURL(this.props.data.href)
+            : '/',
       parentFolder: '',
       selectedImage:
         this.props.mode === 'multiple'
           ? ''
           : this.props.mode === 'image' && this.props.data?.url
-          ? flattenToAppURL(this.props.data.url)
-          : '',
+            ? flattenToAppURL(this.props.data.url)
+            : '',
       selectedHref:
         this.props.mode === 'multiple'
           ? ''
           : this.props.mode === 'link' && this.props.data?.href
-          ? flattenToAppURL(this.props.data.href)
-          : '',
+            ? flattenToAppURL(this.props.data.href)
+            : '',
       showSearchInput: false,
       // In image mode, the searchable types default to the image types which
       // can be overridden with the property if specified.
@@ -150,8 +150,8 @@ class ObjectBrowserBody extends Component {
       mode === 'multiple'
         ? ''
         : mode === 'image'
-        ? this.state.selectedImage
-        : this.state.selectedHref;
+          ? this.state.selectedImage
+          : this.state.selectedHref;
     if (currentSelected && isInternalURL(currentSelected)) {
       this.props.searchContent(
         getParentURL(currentSelected),

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/Widgets/ArrayWidget.jsx

@@ -325,27 +325,27 @@ class ArrayWidget extends Component {
             this.props.vocabBaseUrl
               ? choices
               : this.props.choices
-              ? [
-                  ...choices,
-                  ...(this.props.noValueOption &&
-                  (this.props.default === undefined ||
-                    this.props.default === null)
-                    ? [
-                        {
-                          label: this.props.intl.formatMessage(
-                            messages.no_value,
-                          ),
-                          value: 'no-value',
-                        },
-                      ]
-                    : []),
-                ]
-              : [
-                  {
-                    label: this.props.intl.formatMessage(messages.no_value),
-                    value: 'no-value',
-                  },
-                ]
+                ? [
+                    ...choices,
+                    ...(this.props.noValueOption &&
+                    (this.props.default === undefined ||
+                      this.props.default === null)
+                      ? [
+                          {
+                            label: this.props.intl.formatMessage(
+                              messages.no_value,
+                            ),
+                            value: 'no-value',
+                          },
+                        ]
+                      : []),
+                  ]
+                : [
+                    {
+                      label: this.props.intl.formatMessage(messages.no_value),
+                      value: 'no-value',
+                    },
+                  ]
           }
           styles={customSelectStyles}
           theme={selectTheme}

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

@@ -84,8 +84,8 @@ const FileWidget = (props) => {
   const imgsrc = value?.download
     ? `${flattenToAppURL(value?.download)}?id=${Date.now()}`
     : null || value?.data
-    ? `data:${value['content-type']};${value.encoding},${value.data}`
-    : null;
+      ? `data:${value['content-type']};${value.encoding},${value.data}`
+      : null;
 
   /**
    * Drop handler
@@ -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/RecurrenceWidget/RecurrenceWidget.jsx

@@ -445,8 +445,8 @@ class RecurrenceWidget extends Component {
       field === 'dtstart'
         ? value
         : rruleSet.dtstart()
-        ? rruleSet.dtstart()
-        : this.moment().utc().toDate();
+          ? rruleSet.dtstart()
+          : this.moment().utc().toDate();
     var exdates =
       field === 'exdates' ? value : Object.assign([], rruleSet.exdates());
 

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

@@ -244,8 +244,8 @@ class ReferenceWidget extends Component {
                   )
                 : []
               : value
-              ? flattenToAppURL(value['@id'])
-              : ''
+                ? flattenToAppURL(value['@id'])
+                : ''
           }
           onChange={(event, data) => {
             return onChange(

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/SelectAutoComplete.jsx

@@ -277,12 +277,12 @@ export default compose(
       return props.items?.choices
         ? { choices: props.items.choices, lang: state.intl.locale }
         : vocabState
-        ? {
-            choices: vocabState,
-            vocabBaseUrl,
-            lang: state.intl.locale,
-          }
-        : { vocabBaseUrl, lang: state.intl.locale };
+          ? {
+              choices: vocabState,
+              vocabBaseUrl,
+              lang: state.intl.locale,
+            }
+          : { vocabBaseUrl, lang: state.intl.locale };
     },
     { getVocabulary, getVocabularyTokenTitle },
   ),

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

@@ -150,10 +150,10 @@ export const customSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isDisabled
-      ? '#b5b5b5'
-      : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#b5b5b5'
+        : state.isFocused
+          ? '#4a4a4a'
+          : 'inherit',
     ':active': {
       backgroundColor: null,
     },

package/src/components/manage/Widgets/SelectUtils.js

@@ -28,8 +28,8 @@ export function convertValueToVocabQuery(value) {
           isObject(v)
             ? v.value ?? v.token
             : isString(v) || isBoolean(v)
-            ? v
-            : null,
+              ? v
+              : null,
         )
         .filter((f) => f !== null),
     };

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/manage/Workflow/Workflow.jsx

@@ -145,8 +145,8 @@ const customSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#4a4a4a'
+        : 'inherit',
     ':active': {
       backgroundColor: null,
     },