@plone/volto 18.0.0-alpha.47 → 18.0.0-alpha.49

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

@@ -7,7 +7,7 @@ import { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
 import { Input } from 'semantic-ui-react';
-import { compact, concat, keys, map, union, uniq } from 'lodash';
+import { compact, concat, map, union, uniq } from 'lodash';
 
 import { defineMessages, useIntl } from 'react-intl';
 import { Icon } from '@plone/volto/components';
@@ -46,8 +46,7 @@ const IdWidget = (props) => {
   const intl = useIntl();
   const dispatch = useDispatch();
   const ref = useRef();
-
-  const indexes = useSelector((state) => keys(state.querystring.indexes));
+  const indexes = useSelector((state) => state.querystring.indexes);
 
   const [errors, setError] = useState([]);
   const [reservedIds] = useState(
@@ -62,11 +61,11 @@ const IdWidget = (props) => {
       ),
     ),
   );
-  const fieldValidation = (values) => {
+  const fieldValidation = (value) => {
     const error = [];
 
     // Check reserved id's
-    if (reservedIds.indexOf(values) !== -1) {
+    if (reservedIds.indexOf(value) !== -1) {
       error.push(intl.formatMessage(messages.reservedId));
     }
 
@@ -74,14 +73,14 @@ const IdWidget = (props) => {
     if (
       // eslint-disable-next-line no-control-regex
       !/^(?!.*\\)(?!\+\+)(?!@@)(?!.*request)(?!.*contributors)(?!aq_)(?!.*__)(?!_)(?!((^|\/)\.\.?($|\/)|^"\s*"$))(?!.*[A-Z])(?:(?![\r\n<>/?&#\x00-\x1F\x7F])['\x00-\x7F\u0080-\uFFFF. _])*$/.test(
-        values,
+        value,
       )
     ) {
       error.push(intl.formatMessage(messages.invalidCharacters));
     }
 
     // Check indexes
-    if (indexes.indexOf(values) !== -1) {
+    if (value in indexes) {
       error.push(intl.formatMessage(messages.reservedId));
     }
 

package/src/components/theme/App/App.jsx

@@ -51,6 +51,7 @@ import clearSVG from '@plone/volto/icons/clear.svg';
 import MultilingualRedirector from '@plone/volto/components/theme/MultilingualRedirector/MultilingualRedirector';
 import WorkingCopyToastsFactory from '@plone/volto/components/manage/WorkingCopyToastsFactory/WorkingCopyToastsFactory';
 import LockingToastsFactory from '@plone/volto/components/manage/LockingToastsFactory/LockingToastsFactory';
+import RouteAnnouncer from '@plone/volto/components/theme/RouteAnnouncer/RouteAnnouncer';
 
 /**
  * @export
@@ -191,6 +192,7 @@ export class App extends Component {
             </main>
           </Segment>
         </MultilingualRedirector>
+        <RouteAnnouncer />
         <Footer />
         <LockingToastsFactory
           content={this.props.content}

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

@@ -1,9 +1,9 @@
+import config from '@plone/volto/registry';
 import React from 'react';
-import renderer from 'react-test-renderer';
-import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
-import config from '@plone/volto/registry';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
 
 import { __test__ as App } from './App';
 
@@ -64,5 +64,6 @@ describe('App', () => {
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
+    component.unmount();
   });
 });

package/src/components/theme/RouteAnnouncer/RouteAnnouncer.jsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+
+function RouteAnnouncer() {
+  const [pageTitle, setPageTitle] = useState('');
+
+  useEffect(() => {
+    function updatePage(title) {
+      setPageTitle(title);
+      document.activeElement.blur();
+    }
+    function handlePop(event) {
+      const pageTitle = event.target.document.title;
+      updatePage(pageTitle);
+    }
+
+    const observer = new MutationObserver((mutationList) => {
+      for (const mutation of mutationList) {
+        if (mutation.type === 'childList') {
+          for (const node of mutation.addedNodes) {
+            if (node.nodeType === Node.TEXT_NODE && node.textContent) {
+              updatePage(node.textContent);
+            }
+          }
+        }
+      }
+    });
+    observer.observe(document.querySelector('title'), {
+      characterData: true,
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
+    window.addEventListener('popstate', handlePop);
+
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('popstate', handlePop);
+    };
+  }, []);
+
+  return (
+    <p
+      id="route-announcer"
+      role="alert"
+      // Off-screen element with 'best' browser support
+      style={{
+        border: 0,
+        clip: 'rect(1px 1px 1px 1px)', // IE-style CSS for compatibility
+        height: '1px',
+        margin: '-1px',
+        overflow: 'hidden',
+        padding: 0,
+        position: 'absolute',
+        width: '1px',
+        whiteSpace: 'nowrap',
+        wordWrap: 'normal',
+      }}
+    >
+      {pageTitle}
+    </p>
+  );
+}
+
+export default RouteAnnouncer;

package/src/helpers/Blocks/Blocks.js

@@ -629,11 +629,11 @@ export const styleDataToStyleObject = (key, value, prefix = '') => {
  * Generate styles object from data
  *
  * @function buildStyleObjectFromData
- * @param {Object} obj A style wrapper object data
+ * @param {Object} data A block data object
  * @param {string} prefix The prefix (could be dragged from a recursive call, initially empty)
  * @return {Object} The style object ready to be passed as prop
  */
-export const buildStyleObjectFromData = (obj = {}, prefix = '') => {
+export const buildStyleObjectFromData = (data = {}, prefix = '') => {
   // style wrapper object has the form:
   // const styles = {
   //   color: 'red',
@@ -641,39 +641,79 @@ export const buildStyleObjectFromData = (obj = {}, prefix = '') => {
   // }
   // Returns: {'--background-color: '#AABBCC'}
 
-  return Object.fromEntries(
-    Object.entries(obj)
-      .filter(([k, v]) => k.startsWith('--') || isObject(v))
-      .reduce(
-        (acc, [k, v]) => [
-          ...acc,
-          // Kept for easy debugging
-          // ...(() => {
-          //   if (isObject(v)) {
-          //     return Object.entries(
-          //       buildStyleObjectFromData(
-          //         v,
-          //         `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`,
-          //       ),
-          //     );
-          //   }
-          //   return [styleDataToStyleObject(k, v, prefix)];
-          // })(),
-          ...(isObject(v)
-            ? Object.entries(
-                buildStyleObjectFromData(
-                  v,
-                  `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`, // We don't add a prefix if the key ends with the marker suffix
-                ),
-              )
-            : [styleDataToStyleObject(k, v, prefix)]),
-        ],
-        [],
-      )
-      .filter((v) => !!v),
-  );
+  function recursiveBuildStyleObjectFromData(obj, prefix) {
+    return Object.fromEntries(
+      Object.entries(obj)
+        .filter(([k, v]) => k.startsWith('--') || isObject(v))
+        .reduce(
+          (acc, [k, v]) => [
+            ...acc,
+            // Kept for easy debugging
+            // ...(() => {
+            //   if (isObject(v)) {
+            //     return Object.entries(
+            //       buildStyleObjectFromData(
+            //         v,
+            //         `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`,
+            //       ),
+            //     );
+            //   }
+            //   return [styleDataToStyleObject(k, v, prefix)];
+            // })(),
+            ...(isObject(v)
+              ? Object.entries(
+                  recursiveBuildStyleObjectFromData(
+                    v,
+                    `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`, // We don't add a prefix if the key ends with the marker suffix
+                  ),
+                )
+              : [styleDataToStyleObject(k, v, prefix)]),
+          ],
+          [],
+        )
+        .filter((v) => !!v),
+    );
+  }
+
+  // If the block has a `@type`, it's a full data block object
+  // Then apply the style enhancers
+  if (data['@type']) {
+    const styleObj = data.styles || {};
+    const stylesFromCSSproperties = recursiveBuildStyleObjectFromData(
+      styleObj,
+      prefix,
+    );
+
+    let stylesFromObjectStyleEnhancers = {};
+    const enhancers = config.getUtilities({
+      type: 'styleWrapperStyleObjectEnhancer',
+    });
+
+    enhancers.forEach(({ method }) => {
+      stylesFromObjectStyleEnhancers = {
+        ...stylesFromObjectStyleEnhancers,
+        ...method(data),
+      };
+    });
+
+    return { ...stylesFromCSSproperties, ...stylesFromObjectStyleEnhancers };
+  } else {
+    return recursiveBuildStyleObjectFromData(data, prefix);
+  }
 };
 
+/**
+ * Find a matching style by name given a style definition
+ *
+ * @function findStyleByName
+ * @param {Object} styleDefinitions An object with the style definitions
+ * @param {string} name The name of the style to find
+ * @return {Object} The style object of the matching name
+ */
+export function findStyleByName(styleDefinitions, name) {
+  return styleDefinitions.find((color) => color.name === name)?.style;
+}
+
 /**
  * Return previous/next blocks given the content object and the current block id
  *

package/src/helpers/Blocks/Blocks.test.js

@@ -24,6 +24,7 @@ import {
   findBlocks,
   findContainer,
   isBlockContainer,
+  findStyleByName,
 } from './Blocks';
 
 import config from '@plone/volto/registry';
@@ -1103,38 +1104,68 @@ describe('Blocks', () => {
   });
 
   describe('buildStyleObjectFromData', () => {
+    beforeEach(() => {
+      function blockThemesEnhancer(data) {
+        const blockConfig = config.blocks.blocksConfig[data['@type']];
+        const blockStyleDefinitions =
+          // We look up for the blockThemes in the block's data, then in the global config
+          // We keep data.colors for BBB, but data.themes should be used
+          blockConfig.themes ||
+          blockConfig.colors ||
+          config.blocks.themes ||
+          [];
+        return data.theme
+          ? findStyleByName(blockStyleDefinitions, data.theme)
+          : {};
+      }
+      config.registerUtility({
+        name: 'blockThemesEnhancer',
+        type: 'styleWrapperStyleObjectEnhancer',
+        method: blockThemesEnhancer,
+      });
+    });
+
     it('Understands style converter for style values, no styles found', () => {
-      const styles = {
-        color: 'red',
-        backgroundColor: '#FFF',
+      const data = {
+        '@type': 'text',
+        styles: {
+          color: 'red',
+          backgroundColor: '#FFF',
+        },
       };
-      expect(buildStyleObjectFromData(styles)).toEqual({});
+      expect(buildStyleObjectFromData(data)).toEqual({});
     });
 
     it('Understands style converter for style values', () => {
-      const styles = {
-        color: 'red',
-        '--background-color': '#FFF',
+      const data = {
+        '@type': 'text',
+        styles: {
+          color: 'red',
+          '--background-color': '#FFF',
+        },
       };
-      expect(buildStyleObjectFromData(styles)).toEqual({
+      expect(buildStyleObjectFromData(data)).toEqual({
         '--background-color': '#FFF',
       });
     });
 
     it('Supports multiple nested levels', () => {
-      const styles = {
-        '--color': 'red',
-        backgroundColor: '#AABBCC',
-        nested: {
-          l1: 'white',
-          '--foo': 'white',
-          level2: {
-            '--foo': '#fff',
-            bar: '#000',
+      const data = {
+        '@type': 'text',
+        styles: {
+          '--color': 'red',
+          backgroundColor: '#AABBCC',
+          nested: {
+            l1: 'white',
+            '--foo': 'white',
+            level2: {
+              '--foo': '#fff',
+              bar: '#000',
+            },
           },
         },
       };
-      expect(buildStyleObjectFromData(styles)).toEqual({
+      expect(buildStyleObjectFromData(data)).toEqual({
         '--color': 'red',
         '--nested--foo': 'white',
         '--nested--level2--foo': '#fff',
@@ -1142,22 +1173,168 @@ describe('Blocks', () => {
     });
 
     it('Supports multiple nested levels and optional inclusion of the name of the level', () => {
-      const styles = {
+      const data = {
+        '@type': 'text',
+        styles: {
+          '--color': 'red',
+          backgroundColor: '#AABBCC',
+          'nested:noprefix': {
+            l1: 'white',
+            '--foo': 'white',
+            level2: {
+              '--foo': '#fff',
+              bar: '#000',
+            },
+          },
+        },
+      };
+      expect(buildStyleObjectFromData(data)).toEqual({
         '--color': 'red',
-        backgroundColor: '#AABBCC',
-        'nested:noprefix': {
-          l1: 'white',
-          '--foo': 'white',
-          level2: {
-            '--foo': '#fff',
-            bar: '#000',
+        '--foo': 'white',
+        '--level2--foo': '#fff',
+      });
+    });
+
+    it('Supports named theme block - with global config', () => {
+      config.blocks.themes = [
+        {
+          style: {
+            '--primary-color': '#fff',
+            '--primary-foreground-color': '#ecebeb',
+          },
+          name: 'default',
+          label: 'Default',
+        },
+        {
+          style: {
+            '--primary-color': '#000',
+            '--primary-foreground-color': '#fff',
+          },
+          name: 'primary',
+          label: 'Primary',
+        },
+      ];
+      const data = {
+        '@type': 'text',
+        theme: 'primary',
+      };
+      expect(buildStyleObjectFromData(data)).toEqual({
+        '--primary-color': '#000',
+        '--primary-foreground-color': '#fff',
+      });
+    });
+
+    it('Supports named theme block - with local block themes config', () => {
+      config.blocks.themes = [
+        {
+          style: {
+            '--primary-color': '#fff',
+            '--primary-foreground-color': '#ecebeb',
+          },
+          name: 'default',
+          label: 'Default',
+        },
+        {
+          style: {
+            '--primary-color': '#000',
+            '--primary-foreground-color': '#fff',
+          },
+          name: 'primary',
+          label: 'Primary',
+        },
+      ];
+      const themes = [
+        {
+          style: {
+            '--primary-color': '#fff',
+            '--primary-foreground-color': '#ecebeb',
+          },
+          name: 'default',
+          label: 'Default',
+        },
+        {
+          style: {
+            '--secondary-color': '#bbb',
+            '--secondary-foreground-color': '#ddd',
           },
+          name: 'secondary',
+          label: 'Secondary',
         },
+      ];
+      config.blocks.blocksConfig.text.themes = themes;
+      const data = {
+        '@type': 'text',
+        theme: 'secondary',
       };
-      expect(buildStyleObjectFromData(styles)).toEqual({
+
+      expect(buildStyleObjectFromData(data)).toEqual({
+        '--secondary-color': '#bbb',
+        '--secondary-foreground-color': '#ddd',
+      });
+    });
+
+    it('All together now - named theme block - with local block themes config', () => {
+      config.blocks.blocksThemes = [
+        {
+          style: {
+            '--primary-color': '#fff',
+            '--primary-foreground-color': '#ecebeb',
+          },
+          name: 'default',
+          label: 'Default',
+        },
+        {
+          style: {
+            '--primary-color': '#000',
+            '--primary-foreground-color': '#fff',
+          },
+          name: 'primary',
+          label: 'Primary',
+        },
+      ];
+      const themes = [
+        {
+          style: {
+            '--primary-color': '#fff',
+            '--primary-foreground-color': '#ecebeb',
+          },
+          name: 'default',
+          label: 'Default',
+        },
+        {
+          style: {
+            '--secondary-color': '#bbb',
+            '--secondary-foreground-color': '#ddd',
+          },
+          name: 'secondary',
+          label: 'Secondary',
+        },
+      ];
+
+      const data = {
+        '@type': 'text',
+        styles: {
+          '--color': 'red',
+          backgroundColor: '#AABBCC',
+          'nested:noprefix': {
+            l1: 'white',
+            '--foo': 'white',
+            level2: {
+              '--foo': '#fff',
+              bar: '#000',
+            },
+          },
+        },
+        theme: 'secondary',
+        themes,
+      };
+
+      expect(buildStyleObjectFromData(data)).toEqual({
         '--color': 'red',
         '--foo': 'white',
         '--level2--foo': '#fff',
+        '--secondary-color': '#bbb',
+        '--secondary-foreground-color': '#ddd',
       });
     });
   });

package/types/components/manage/Blocks/ToC/View.d.ts

@@ -4,8 +4,5 @@ export function getBlocksTocEntries(properties: any, tocData: any): {
     tocEntries: {};
     tocEntriesLayout: any[];
 };
-declare const _default: React.FC<import("react-intl").WithIntlProps<any>> & {
-    WrappedComponent: React.ComponentType<any>;
-};
+declare const _default: (props: any) => import("react/jsx-runtime").JSX.Element;
 export default _default;
-import React from 'react';

package/types/components/manage/Blocks/ToC/variations/DefaultTocRenderer.d.ts

@@ -1,5 +1,10 @@
-declare const _default: React.FC<import("react-intl").WithIntlProps<import("react-intl").WrappedComponentProps<string>>> & {
-    WrappedComponent: React.ComponentType<import("react-intl").WrappedComponentProps<string>>;
-};
-export default _default;
-import React from 'react';
+export default View;
+declare function View({ data, tocEntries }: {
+    data: any;
+    tocEntries: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace View {
+    namespace propTypes {
+        let properties: any;
+    }
+}

package/types/components/manage/Blocks/ToC/variations/HorizontalMenu.d.ts

@@ -1,5 +1,10 @@
-declare const _default: React.FC<import("react-intl").WithIntlProps<import("react-intl").WrappedComponentProps<string>>> & {
-    WrappedComponent: React.ComponentType<import("react-intl").WrappedComponentProps<string>>;
-};
-export default _default;
-import React from 'react';
+export default View;
+declare function View({ data, tocEntries }: {
+    data: any;
+    tocEntries: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace View {
+    namespace propTypes {
+        let properties: any;
+    }
+}

package/types/components/manage/Blocks/ToC/variations/index.d.ts

@@ -2,15 +2,27 @@ export default ToCVariations;
 declare const ToCVariations: ({
     id: string;
     title: string;
-    view: import("react").FC<import("react-intl").WithIntlProps<import("react-intl").WrappedComponentProps<string>>> & {
-        WrappedComponent: import("react").ComponentType<import("react-intl").WrappedComponentProps<string>>;
+    view: {
+        ({ data, tocEntries }: {
+            data: any;
+            tocEntries: any;
+        }): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            properties: any;
+        };
     };
     isDefault: boolean;
 } | {
     id: string;
     title: string;
-    view: import("react").FC<import("react-intl").WithIntlProps<import("react-intl").WrappedComponentProps<string>>> & {
-        WrappedComponent: import("react").ComponentType<import("react-intl").WrappedComponentProps<string>>;
+    view: {
+        ({ data, tocEntries }: {
+            data: any;
+            tocEntries: any;
+        }): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            properties: any;
+        };
     };
     isDefault?: undefined;
 })[];

package/types/components/theme/RouteAnnouncer/RouteAnnouncer.d.ts

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

package/types/helpers/Blocks/Blocks.d.ts

@@ -134,6 +134,15 @@ export function applySchemaDefaults({ data, schema, intl }: {
  * @return {Object} Derived data, with the defaults extracted from the schema
  */
 export function applyBlockDefaults({ data, intl, navRoot, contentType, ...rest }: any, blocksConfig: any): any;
+/**
+ * Find a matching style by name given a style definition
+ *
+ * @function findStyleByName
+ * @param {Object} styleDefinitions An object with the style definitions
+ * @param {string} name The name of the style to find
+ * @return {Object} The style object of the matching name
+ */
+export function findStyleByName(styleDefinitions: any, name: string): any;
 /**
  * Check if a block is a container block
  * check blocks from data as well since some add-ons use that
@@ -168,7 +177,7 @@ export function styleToClassName(key: any, value: any, prefix?: string): any;
 export function buildStyleClassNamesFromData(obj?: {}, prefix?: string): any;
 export function buildStyleClassNamesExtenders({ block, content, data, classNames, }: any): any[];
 export function styleDataToStyleObject(key: any, value: any, prefix?: string): any[];
-export function buildStyleObjectFromData(obj?: any, prefix?: string): any;
+export function buildStyleObjectFromData(data?: any, prefix?: string): any;
 export function getPreviousNextBlock({ content, block }: any): any[];
 export function getBlocksHierarchy(properties: any): any;
 export function findContainer(formData: object, { containerId }: {