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

package/src/components/manage/Preferences/ChangePassword.test.jsx

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

package/src/components/manage/Preferences/PersonalInformation.test.jsx

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

package/src/components/manage/Preferences/PersonalPreferences.test.jsx

@@ -31,6 +31,13 @@ describe('PersonalPreferences', () => {
           itemsTotal: 1,
         },
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const { container } = render(
       <Provider store={store}>

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/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/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',
         },
       },
     });

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

@@ -0,0 +1,56 @@
+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';
+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

@@ -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 && (

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

@@ -33,6 +33,9 @@ jest.mock('../SocialSharing/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" />),
 );

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

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

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/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;

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

@@ -2,4 +2,4 @@ export default BlockChooserSearch;
 declare function BlockChooserSearch({ onChange, searchValue }: {
     onChange: any;
     searchValue: any;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/types/components/manage/Blocks/Block/BlocksForm.d.ts

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

package/types/components/manage/Blocks/Block/DefaultEdit.d.ts

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

package/types/components/manage/Blocks/Block/DefaultView.d.ts

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

package/types/components/manage/Blocks/Block/Style.d.ts

@@ -2,4 +2,4 @@ export default function Style({ data, detached, children }: {
     data: any;
     detached: any;
     children: any;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/types/components/manage/Blocks/Container/Data.d.ts

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

package/types/components/manage/Blocks/Container/Edit.d.ts

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

package/types/components/manage/Blocks/Container/EditBlockWrapper.d.ts

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

package/types/components/manage/Blocks/Container/NewBlockAddButton.d.ts

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

package/types/components/manage/Blocks/Container/SimpleContainerToolbar.d.ts

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

package/types/components/manage/Blocks/Description/Edit.d.ts

@@ -1,4 +1,4 @@
-export function DescriptionBlockEdit(props: any): JSX.Element;
+export function DescriptionBlockEdit(props: any): import("react/jsx-runtime").JSX.Element;
 export namespace DescriptionBlockEdit {
     namespace propTypes {
         let properties: any;