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

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

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

package/src/components/theme/PasswordReset/RequestPasswordReset.test.jsx

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

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

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

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import SlotRenderer from './SlotRenderer';
+import config from '@plone/volto/registry';
+
+describe('SlotRenderer Component', () => {
+  const RouteConditionTrue = () => () => true;
+  const RouteConditionFalse = () => () => false;
+  const ContentTypeConditionTrue = () => () => true;
+  const ContentTypeConditionFalse = () => () => false;
+
+  test('renders a SlotRenderer component for the aboveContentTitle with two slots in the root', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: (props) => <div className="slot-component-true" />,
+      predicates: [RouteConditionTrue()],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: (props) => <div className="slot-component-false" />,
+      predicates: [RouteConditionFalse(), ContentTypeConditionFalse()],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: (props) => <div className="slot-component-false" />,
+      predicates: [RouteConditionFalse()],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: (props) => (
+        <aside className="slot-component-true-predicates" />
+      ),
+      predicates: [RouteConditionTrue(), ContentTypeConditionTrue()],
+    });
+
+    const { container } = render(
+      <MemoryRouter initialEntries={[{ pathname: '/' }]}>
+        <SlotRenderer name="toolbar" content={{}} />
+      </MemoryRouter>,
+    );
+
+    const divSlot = container.querySelector('div');
+    expect(divSlot).toHaveClass('slot-component-true');
+    const asideSlot = container.querySelector('aside');
+    expect(asideSlot).toHaveClass('slot-component-true-predicates');
+  });
+});

package/src/components/theme/SlotRenderer/SlotRenderer.tsx

@@ -0,0 +1,54 @@
+import { useLocation } from 'react-router-dom';
+import config from '@plone/volto/registry';
+
+import type { Content } from '@plone/types';
+
+/*
+Usage:
+<SlotRenderer name="aboveContent" content={content} route={} />
+*/
+
+const SlotRenderer = ({
+  name,
+  content,
+  navRoot,
+}: {
+  name: string;
+  content: Content;
+  navRoot?: Content;
+}) => {
+  const pathname = useLocation().pathname;
+
+  let slots = config.getSlot(name, {
+    content,
+    pathname,
+    // This is to cover the use case while adding a new content and we don't have
+    // have the navRoot information in the initial content. This will be
+    // useful for SlotRenderers rendered in the `Add` route.
+    navRoot: content?.['@components']?.navroot?.navroot || navRoot,
+  });
+
+  if (!slots) {
+    return null;
+  }
+
+  return (
+    <>
+      {slots.map(
+        ({
+          component,
+          name,
+        }: {
+          component: React.ComponentType<any>;
+          name: string;
+        }) => {
+          // ^^ Weird compilation issue for Jest tests, that forced to re-declare the type above
+          const SlotComponent = component;
+          return <SlotComponent key={name} />;
+        },
+      )}
+    </>
+  );
+};
+
+export default 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';
 
@@ -28,6 +28,7 @@ import {
 } from '@plone/volto/helpers';
 
 import config from '@plone/volto/registry';
+import SlotRenderer from '../SlotRenderer/SlotRenderer';
 
 /**
  * View container class.
@@ -244,6 +245,7 @@ class View extends Component {
               : null
           }
         />
+        <SlotRenderer name="aboveContent" content={this.props.content} />
         <RenderedView
           key={this.props.content['@id']}
           content={this.props.content}
@@ -251,6 +253,7 @@ class View extends Component {
           token={this.props.token}
           history={this.props.history}
         />
+        <SlotRenderer name="belowContent" content={this.props.content} />
         {config.settings.showTags &&
           this.props.content.subjects &&
           this.props.content.subjects.length > 0 && (
@@ -266,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,14 +25,18 @@ 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" />),
 );
 jest.mock('../Comments/Comments', () => jest.fn(() => <div id="Comments" />));
 jest.mock('../Tags/Tags', () => jest.fn(() => <div id="Tags" />));
+jest.mock('../SlotRenderer/SlotRenderer', () =>
+  jest.fn(() => <div id="SlotRenderer" />),
+);
 jest.mock('../ContentMetadataTags/ContentMetadataTags', () =>
   jest.fn(() => <div id="ContentMetadataTags" />),
 );
@@ -147,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', () => {
@@ -167,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', () => {
@@ -187,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', () => {
@@ -207,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', () => {
@@ -235,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/config/index.js

@@ -75,7 +75,7 @@ let config = {
     okRoute: '/ok',
     apiPath,
     apiExpanders: [
-      // Added here for documentation purposes, addded at the end because it
+      // Added here for documentation purposes, added at the end because it
       // depends on a value of this object.
       // Add the following expanders for only issuing a single request.
       // https://6.docs.plone.org/volto/configuration/settings-reference.html#term-apiExpanders
@@ -223,6 +223,7 @@ let config = {
   },
   addonRoutes: [],
   addonReducers: {},
+  slots: {},
   components,
 };
 
@@ -250,5 +251,6 @@ ConfigRegistry.widgets = config.widgets;
 ConfigRegistry.addonRoutes = config.addonRoutes;
 ConfigRegistry.addonReducers = config.addonReducers;
 ConfigRegistry.components = config.components;
+ConfigRegistry.slots = config.slots;
 
 applyAddonConfiguration(ConfigRegistry);

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

@@ -701,10 +701,13 @@ export function findBlocks(blocks, types, result = []) {
 
   Object.keys(blocks).forEach((blockId) => {
     const block = blocks[blockId];
+    // check blocks from data as well since some add-ons use that
+    // such as @eeacms/volto-tabs-block
+    const child_blocks = block.blocks || block.data?.blocks;
     if (types.includes(block['@type'])) {
       result.push(blockId);
-    } else if (containerBlockTypes.includes(block['@type']) || block.blocks) {
-      findBlocks(block.blocks, types, result);
+    } else if (containerBlockTypes.includes(block['@type']) || child_blocks) {
+      findBlocks(child_blocks, types, result);
     }
   });
 

package/src/helpers/Slots/index.tsx

@@ -0,0 +1,12 @@
+import type { Content } from '@plone/types';
+import { matchPath } from 'react-router-dom';
+
+export function RouteCondition(path: string, exact?: boolean) {
+  return ({ pathname }: { pathname: string }) =>
+    Boolean(matchPath(pathname, { path, exact }));
+}
+
+export function ContentTypeCondition(contentType: string[]) {
+  return ({ content }: { content: Content }) =>
+    contentType.includes(content?.['@type']);
+}

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/index.js

@@ -129,3 +129,4 @@ export {
   getWorkflowOptions,
 } from './Workflows/Workflows';
 export { getSiteAsyncPropExtender } from './Site';
+export { ContentTypeCondition } from './Slots';

package/src/start-client.jsx

@@ -1,7 +1,7 @@
 import '@plone/volto/config'; // This is the bootstrap for the global config - client side
 import '@root/theme';
 import React from 'react';
-import { hydrate } from 'react-dom';
+import { hydrateRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { IntlProvider } from 'react-intl-redux';
 import { ConnectedRouter } from 'connected-react-router';
@@ -58,7 +58,8 @@ export default function client() {
   }
 
   loadableReady(() => {
-    hydrate(
+    hydrateRoot(
+      document.getElementById('main'),
       <CookiesProvider>
         <Provider store={store}>
           <IntlProvider onError={reactIntlErrorHandler}>
@@ -70,7 +71,6 @@ export default function client() {
           </IntlProvider>
         </Provider>
       </CookiesProvider>,
-      document.getElementById('main'),
     );
   });
 }

package/test-setup-config.js

@@ -188,3 +188,4 @@ config.set('experimental', {
     enabled: false,
   },
 });
+config.set('slots', {});

package/theme/themes/pastanaga/extras/toolbar.less

@@ -184,8 +184,8 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
         background: transparent;
         text-align: initial;
 
-        &:focus {
-          outline: none;
+        &:focus-visible {
+          outline: 1px auto;
         }
 
         &.ui {
@@ -291,8 +291,8 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
       cursor: pointer;
       text-align: initial;
 
-      &:focus {
-        outline: none;
+      &:focus-visible {
+        outline: 1px auto;
       }
     }
   }

package/tsconfig.declarations.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": true,
     "declaration": true,
     "emitDeclarationOnly": true,

package/types/components/manage/Actions/Actions.d.ts

@@ -1,5 +1,5 @@
 export default Actions;
-declare function Actions(props: any): JSX.Element;
+declare function Actions(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace Actions {
     namespace propTypes {
         let pathname: any;

package/types/components/manage/Add/Add.d.ts

@@ -1,5 +1,2 @@
-declare const _default: React.ForwardRefExoticComponent<Omit<import("react-intl").WithIntlProps<import("react-intl").WrappedComponentProps<string>>, "ref"> & React.RefAttributes<React.ComponentType<import("react-intl").WrappedComponentProps<string>>>> & {
-    WrappedComponent: React.ComponentType<import("react-intl").WrappedComponentProps<string>>;
-};
+declare const _default: any;
 export default _default;
-import React from 'react';

package/types/components/manage/Aliases/Aliases.d.ts

@@ -1,5 +1,2 @@
-declare const _default: React.ForwardRefExoticComponent<Omit<import("react-intl").WithIntlProps<import("react-intl").WrappedComponentProps<string>>, "ref"> & React.RefAttributes<React.ComponentType<import("react-intl").WrappedComponentProps<string>>>> & {
-    WrappedComponent: React.ComponentType<import("react-intl").WrappedComponentProps<string>>;
-};
+declare const _default: any;
 export default _default;
-import React from 'react';

package/types/components/manage/AnchorPlugin/components/Link/index.d.ts

@@ -5,7 +5,7 @@ declare function Link({ children, className, entityKey, getEditorState, target }
     entityKey: any;
     getEditorState: any;
     target: any;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare namespace Link {
     export { propTypes };
     export namespace defaultProps {

package/types/components/manage/BlockChooser/BlockChooserButton.d.ts

@@ -1,3 +1,3 @@
-export function ButtonComponent(props: any): JSX.Element;
+export function ButtonComponent(props: any): import("react/jsx-runtime").JSX.Element;
 export default BlockChooserButton;
-declare function BlockChooserButton(props: any): JSX.Element;
+declare function BlockChooserButton(props: any): import("react/jsx-runtime").JSX.Element;