@eeacms/volto-cca-policy 0.3.73 → 0.3.75

package/src/components/manage/Blocks/CountryMapProfile/styles.less

@@ -36,8 +36,8 @@
     z-index: 10;
     display: none;
     padding: 3px;
-    background-color: #2a2a2a;
     border-radius: 3px;
+    background-color: #2a2a2a;
     color: white;
     font-size: 10px;
   }

package/src/components/manage/Blocks/CountryProfileDetail/View.test.jsx

@@ -13,8 +13,7 @@ describe('View', () => {
     const properties = {
       '@components': {
         countryprofile: {
-          html:
-            '{"menu":[],"content":[],"html":"","updated":"","message_top":"", "top_accordeon":""}',
+          html: '{"menu":[],"content":[],"html":"","updated":"","message_top":"", "top_accordeon":""}',
         },
       },
     };

package/src/components/manage/Blocks/FlourishEmbedBlock/schema.js

@@ -1,4 +1,4 @@
-export default {
+const schema = {
   title: 'Flourish visualization block',
   fieldsets: [
     {
@@ -15,3 +15,5 @@ export default {
   },
   required: [],
 };
+
+export default schema;

package/src/components/manage/Blocks/RASTBlock/schema.js

@@ -1,6 +1,6 @@
 const fields = ['root_path', 'skip_items', 'show_subfolders'];
 
-export default {
+const schema = {
   title: 'RAST',
 
   fieldsets: [
@@ -37,3 +37,5 @@ export default {
 
   required: [],
 };
+
+export default schema;

package/src/components/manage/Blocks/ReadMore/schema.js

@@ -1,4 +1,4 @@
-export default {
+const schema = {
   title: 'Read more',
   fieldsets: [
     {
@@ -40,3 +40,5 @@ export default {
   },
   required: [],
 };
+
+export default schema;

package/src/components/manage/Blocks/RelevantAceContent/schema.js

@@ -23,7 +23,7 @@ const Item = () => ({
   required: ['title'],
 });
 
-export default {
+const schema = {
   title: 'Relevant Ace Content',
   fieldsets: [
     {
@@ -153,3 +153,5 @@ export default {
   },
   required: [],
 };
+
+export default schema;

package/src/components/manage/Blocks/SearchAceContent/schema.js

@@ -1,4 +1,4 @@
-export default {
+const schema = {
   title: 'Search Ace Content',
   fieldsets: [
     {
@@ -98,3 +98,5 @@ export default {
   },
   required: [],
 };
+
+export default schema;

package/src/components/manage/Blocks/TransRegionSelect/schema.js

@@ -1,4 +1,4 @@
-export default {
+const schema = {
   title: 'Trans Region Select',
   fieldsets: [
     {
@@ -20,3 +20,5 @@ export default {
   },
   required: [],
 };
+
+export default schema;

package/src/components/manage/Blocks/index.js

@@ -22,7 +22,6 @@ import installASTNavigation from './ASTNavigation';
 import installFlourishEmbedBlock from './FlourishEmbedBlock';
 import installDataConnectedEmbed from './DataConnectedEmbedBlock';
 
-// import installMKHMap from './MKHMap';
 // import installCountryMapHeatIndex from './CountryMapHeatIndex';
 import installCountryMapProfile from './CountryMapProfile';
 

package/src/components/theme/ASTNavigation/ASTNavigation.jsx

@@ -18,9 +18,8 @@ const ASTNavigation = (props) => {
   const searchSubrequests = useSelector((state) => state.search.subrequests);
   const items = searchSubrequests?.ast?.items || [];
   const isAdaptationSupportTool = isAdaptationSupportToolURL(rootPath);
-  const isUrbanAdaptationSupportTool = isUrbanAdaptationSupportToolURL(
-    rootPath,
-  );
+  const isUrbanAdaptationSupportTool =
+    isUrbanAdaptationSupportToolURL(rootPath);
 
   React.useEffect(() => {
     if (isAdaptationSupportTool) {

package/src/components/theme/BannerTitle/BannerTitle.jsx

@@ -29,6 +29,7 @@ const BannerTitle = (props) => {
           <TitleBlockView
             {...props}
             data={{
+              '@type': 'title',
               info: [{ description: '' }],
               hideContentType: false,
               hideCreationDate: false,
@@ -38,6 +39,7 @@ const BannerTitle = (props) => {
               hideShareButton: false,
             }}
             metadata={content}
+            properties={content}
           />
         </>
       ) : null}

package/src/components/theme/Header/Header.jsx

@@ -4,10 +4,10 @@
  */
 
 import React from 'react';
-import { compose } from 'recompose';
-import { withRouter } from 'react-router-dom';
 import { Dropdown, Image } from 'semantic-ui-react';
 import { connect, useDispatch, useSelector } from 'react-redux';
+
+import { withRouter } from 'react-router-dom';
 import { UniversalLink } from '@plone/volto/components';
 import {
   getBaseUrl,
@@ -16,14 +16,18 @@ import {
   toPublicURL,
   BodyClass,
 } from '@plone/volto/helpers';
-import config from '@plone/volto/registry';
 import { getNavigation } from '@plone/volto/actions';
 import { Header, Logo } from '@eeacms/volto-eea-design-system/ui';
 import { usePrevious } from '@eeacms/volto-eea-design-system/helpers';
-import LanguageSwitch from './LanguageSwitch';
+import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
+
+import config from '@plone/volto/registry';
+import { compose } from 'recompose';
+
 import cx from 'classnames';
+import loadable from '@loadable/component';
 
-import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
+const LazyLanguageSwitcher = loadable(() => import('./LanguageSwitch'));
 
 function removeTrailingSlash(path) {
   while (path.endsWith('/')) {
@@ -63,8 +67,7 @@ const DirectLinkLogo = ({
 /**
  * EEA Specific Header component.
  */
-const EEAHeader = (props) => {
-  const { pathname, token, items, subsite } = props;
+const EEAHeader = ({ pathname, token, items, history, subsite }) => {
   const router_pathname = useSelector((state) => {
     return removeTrailingSlash(state.router?.location?.pathname) || '';
   });
@@ -76,10 +79,12 @@ const EEAHeader = (props) => {
     const has_home_layout =
       layout === 'homepage_inverse_view' ||
       (__CLIENT__ && document.body.classList.contains('homepage-inverse'));
+
     return (
       has_home_layout &&
       (removeTrailingSlash(pathname) === router_pathname ||
-        router_pathname.endsWith('/edit'))
+        router_pathname.endsWith('/edit') ||
+        router_pathname.endsWith('/add'))
     );
   });
 
@@ -95,20 +100,17 @@ const EEAHeader = (props) => {
   React.useEffect(() => {
     const { settings } = config;
     const base_url = getBaseUrl(pathname);
+
+    // Check if navigation data needs to be fetched based on the API expander availability
     if (!hasApiExpander('navigation', base_url)) {
       dispatch(getNavigation(base_url, settings.navDepth));
     }
-  }, [pathname, dispatch]);
 
-  React.useEffect(() => {
+    // Additional check for token changes
     if (token !== previousToken) {
-      const { settings } = config;
-      const base = getBaseUrl(pathname);
-      if (!hasApiExpander('navigation', base)) {
-        dispatch(getNavigation(base, settings.navDepth));
-      }
+      dispatch(getNavigation(base_url, settings.navDepth));
     }
-  }, [token, dispatch, pathname, previousToken]);
+  }, [pathname, token, dispatch, previousToken]);
 
   const subsiteView = subsiteHeaderOpts.filter((v) =>
     router_pathname.match(v.matchpath),
@@ -125,21 +127,22 @@ const EEAHeader = (props) => {
       {isHomePageInverse && <BodyClass className="homepage" />}
       <Header.TopHeader>
         <Header.TopItem className="official-union">
-          <Image src={eeaFlag} alt="eea flag"></Image>
+          <Image src={eeaFlag} alt="European Union flag"></Image>
           <Header.TopDropdownMenu
             text="An official website of the European Union | How do you know?"
             tabletText="EEA information systems"
-            mobileText=" "
+            mobileText="EEA information systems"
             icon="chevron down"
             aria-label="dropdown"
-            className=""
+            classNameHeader="mobile-sr-only"
             viewportWidth={width}
           >
-            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
             <div
               className="content"
               onClick={(evt) => evt.stopPropagation()}
               onKeyDown={(evt) => evt.stopPropagation()}
+              tabIndex={0}
+              role={'presentation'}
             >
               <p>
                 All official European Union website addresses are in the{' '}
@@ -148,6 +151,7 @@ const EEAHeader = (props) => {
               <a
                 href="https://europa.eu/european-union/contact/institutions-bodies_en"
                 target="_blank"
+                rel="noopener"
                 onKeyDown={(evt) => evt.stopPropagation()}
               >
                 See all EU institutions and bodies
@@ -162,15 +166,17 @@ const EEAHeader = (props) => {
               <Header.TopDropdownMenu
                 id="theme-sites"
                 text={headerOpts.partnerLinks.title}
+                aria-label={headerOpts.partnerLinks.title}
                 viewportWidth={width}
               >
-                <div className="wrapper">
+                <div className="wrapper" tabIndex={0} role={'presentation'}>
                   {headerOpts.partnerLinks.links.map((item, index) => (
                     <Dropdown.Item key={index}>
                       <a
                         href={item.href}
                         className="site"
                         target="_blank"
+                        rel="noopener"
                         onKeyDown={(evt) => evt.stopPropagation()}
                       >
                         {item.title}
@@ -182,7 +188,11 @@ const EEAHeader = (props) => {
             </Header.TopItem>
           )}
 
-          {config.settings.isMultilingual && <LanguageSwitch {...props} />}
+          {config.settings.isMultilingual &&
+            config.settings.supportedLanguages.length > 1 &&
+            config.settings.hasLanguageDropdown && (
+              <LazyLanguageSwitcher width={width} history={history} />
+            )}
         </div>
       </Header.TopHeader>
       <Header.Main

package/src/components/theme/Header/LanguageSwitch.jsx

@@ -2,12 +2,12 @@ import React from 'react';
 import { find } from 'lodash';
 import { useAtom } from 'jotai';
 import { useSelector } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
 import { Dropdown, Image } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import config from '@plone/volto/registry';
 import { Header } from '@eeacms/volto-eea-design-system/ui';
+import config from '@plone/volto/registry';
 import cx from 'classnames';
-import { FormattedMessage } from 'react-intl';
 
 import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
 

package/src/components/theme/Views/BrokenLinks.jsx

@@ -11,8 +11,6 @@ import {
   TableRow,
 } from 'semantic-ui-react';
 
-import './brokenlinks.less';
-
 function Filter({ column }) {
   const columnFilterValue = column.getFilterValue();
   const { filterVariant } = column.columnDef.meta ?? {};

package/src/components/theme/Views/CcaEventView.jsx

@@ -47,10 +47,8 @@ function CcaEventView(props) {
     contact_email,
   } = content;
 
-  const {
-    blocks: filteredBlocks,
-    blocks_layout: filteredBlocksLayout,
-  } = filterBlocks(content, ['tabs_block', 'metadataSection']);
+  const { blocks: filteredBlocks, blocks_layout: filteredBlocksLayout } =
+    filterBlocks(content, ['tabs_block', 'metadataSection']);
 
   const titleBlock = Object.values(filteredBlocks).find(
     (block) => block['@type'] === 'title',

package/src/components/theme/Views/DatabaseItemView.test.jsx

@@ -33,8 +33,7 @@ describe('DatabaseItemView', () => {
       title: 'My DatabaseItemView',
       long_description: {
         'content-type': null,
-        data:
-          '<p>Nam commodo suscipit quam. Praesent egestas neque eu enim. Quisque rutrum.</p>',
+        data: '<p>Nam commodo suscipit quam. Praesent egestas neque eu enim. Quisque rutrum.</p>',
         encoding: 'utf-8',
       },
       publication_date: '2022-06-24',

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

@@ -7,8 +7,6 @@ import { injectIntl } from 'react-intl';
 import { FormFieldWrapper } from '@plone/volto/components';
 import MapContainer from './GeolocationWidgetMapContainer';
 
-import './geolocation.css';
-
 const defaultValue = {
   latitude: 55.6761,
   longitude: 12.5683,

package/src/customizations/@plone/volto-slate/utils/volto-blocks.js

@@ -249,11 +249,8 @@ export function deconstructToVoltoBlocks(editor) {
   return new Promise((resolve, reject) => {
     if (!editor?.children) return;
 
-    const {
-      properties,
-      onChangeFormData,
-      onSelectBlock,
-    } = editor.getBlockProps();
+    const { properties, onChangeFormData, onSelectBlock } =
+      editor.getBlockProps();
     const blocksFieldname = getBlocksFieldname(properties);
     const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
 

package/src/customizations/@plone/volto-slate/widgets/HtmlSlateWidget.jsx

@@ -3,6 +3,7 @@
  */
 
 import React from 'react';
+import { debounce } from 'lodash';
 import ReactDOMServer from 'react-dom/server';
 import configureStore from 'redux-mock-store';
 import { MemoryRouter } from 'react-router-dom';
@@ -14,7 +15,6 @@ import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
 import { makeEditor } from '@plone/volto-slate/utils';
 import deserialize from '@plone/volto-slate/editor/deserialize';
-
 import {
   createEmptyParagraph,
   normalizeExternalData,
@@ -25,8 +25,7 @@ import '@plone/volto-slate/widgets/style.css';
 
 const messages = defineMessages({
   error: {
-    id:
-      'An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.',
+    id: 'An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.',
     defaultMessage:
       'An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.',
   },
@@ -59,8 +58,6 @@ const HtmlSlateWidget = (props) => {
           <MemoryRouter>{serializeNodes(value || [])}</MemoryRouter>
         </Provider>,
       );
-      // console.log('toHtml value', JSON.stringify(value));
-      // console.log('toHtml html', html);
 
       return {
         'content-type': value ? value['content-type'] : 'text/html',
@@ -93,6 +90,7 @@ const HtmlSlateWidget = (props) => {
       parent.removeChild(div);
     });
   };
+
   const fromHtml = React.useCallback(
     (value) => {
       const html = value?.data || '';
@@ -122,15 +120,38 @@ const HtmlSlateWidget = (props) => {
     [editor],
   );
 
-  const valueFromHtml = React.useMemo(() => {
-    return fromHtml(value);
+  const lastSavedHtmlRef = React.useRef(value?.data);
+
+  const [valueFromHtml, setValueFromHtml] = React.useState(() =>
+    fromHtml(value),
+  );
+
+  React.useEffect(() => {
+    if (value?.data !== lastSavedHtmlRef.current) {
+      setValueFromHtml(fromHtml(value));
+    }
   }, [value, fromHtml]);
 
+  const debouncedOnChange = React.useMemo(() => {
+    return debounce((newSlateValue) => {
+      const htmlValue = toHtml(newSlateValue);
+      lastSavedHtmlRef.current = htmlValue.data;
+      onChange(id, htmlValue);
+    }, 100);
+  }, [id, onChange, toHtml]);
+
+  React.useEffect(() => {
+    return () => {
+      debouncedOnChange.cancel();
+    };
+  }, [debouncedOnChange]);
+
   const handleChange = React.useCallback(
     (newValue) => {
-      onChange(id, toHtml(newValue));
+      setValueFromHtml(newValue);
+      debouncedOnChange(newValue);
     },
-    [onChange, toHtml, id],
+    [debouncedOnChange],
   );
 
   const handleClick = React.useCallback(() => {

package/src/customizations/@plone/volto-slate/widgets/README.md

@@ -16,4 +16,18 @@ and this:
 let data = deserialize(editor, body, { collapseWhitespace: true });
 ```
 
-Also added `unwrapDivs()` to unwrap `<div>` elements and wrap loose text nodes in `<p>` before deserialization. This fixes issues where content inside `<div>` tags was not recognized by the Slate editor and appeared empty or uneditable in edit mode.
+Fix missing content inside `<div>` tag:
+
+Added `unwrapDivs()` to unwrap `<div>` elements and wrap loose text nodes in `<p>` before deserialization. This fixes issues where content inside `<div>` tags was not recognized by the Slate editor and appeared empty or uneditable in edit mode.
+
+Preserve trailing spaces:
+
+Fixes issue where typing a space at the end of a line wouldn’t persist due to `collapseWhitespace: true` during deserialization.
+
+```js
+const [valueFromHtml, setValueFromHtml] = React.useState(() =>
+  fromHtml(value),
+);
+
+const debouncedOnChange = useMemo(() => debounce(...), [...]);
+```

package/src/customizations/volto/components/manage/Blocks/Grid/grid-1.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="#9FD1E5" rx="3"/>
+    <rect width="67" height="53" fill="#FFF" opacity=".9" transform="translate(15 22)"/>
+  </g>
+</svg>

package/src/customizations/volto/components/manage/Blocks/Grid/grid-2.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="#9FD1E5" rx="3"/>
+    <g fill="#FFF" opacity=".9" transform="translate(9 22)">
+      <rect width="37" height="53"/>
+      <rect width="37" height="53" x="42"/>
+    </g>
+  </g>
+</svg>

package/src/customizations/volto/components/manage/Blocks/Grid/grid-3.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="#9FD1E5" rx="3"/>
+    <g fill="#FFF" opacity=".9" transform="translate(6 22)">
+      <rect width="25" height="53" x="58"/>
+      <rect width="25" height="53"/>
+      <rect width="25" height="53" x="29"/>
+    </g>
+  </g>
+</svg>

package/src/customizations/volto/components/manage/Blocks/Grid/grid-4.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="#9FD1E5" rx="3"/>
+    <g fill="#FFF" opacity=".9" transform="translate(8 22)">
+      <rect width="18" height="53" x="42"/>
+      <rect width="18" height="53" x="63"/>
+      <rect width="18" height="53"/>
+      <rect width="18" height="53" x="21"/>
+    </g>
+  </g>
+</svg>

package/src/customizations/volto/components/manage/Blocks/Grid/grid-5.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="96" height="96" version="1.1" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
+ <g fill-rule="evenodd">
+  <rect width="96" height="96" rx="3" fill="#9FD1E5"/>
+  <g transform="matrix(.80193 0 0 1 24.044 22)" fill="#fff" opacity=".9">
+   <rect x="42" width="18" height="53"/>
+   <rect x="63" width="18" height="53"/>
+   <rect width="18" height="53"/>
+   <rect x="21" width="18" height="53"/>
+   <rect x="-21.024" width="18" height="53"/>
+  </g>
+ </g>
+</svg>

package/src/customizations/volto/components/manage/Blocks/Grid/grid-6.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="96" height="96" version="1.1" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
+ <g fill-rule="evenodd">
+  <rect width="96" height="96" rx="3" fill="#9FD1E5"/>
+  <g transform="matrix(.66542 0 0 1 35.101 22)" fill="#fff" opacity=".9">
+   <rect x="42" width="18" height="53"/>
+   <rect x="63" width="18" height="53"/>
+   <rect width="18" height="53"/>
+   <rect x="21" width="18" height="53"/>
+   <rect x="-21.024" width="18" height="53"/>
+   <rect x="-42.165" width="18" height="53"/>
+  </g>
+ </g>
+</svg>

package/src/customizations/volto/components/manage/Blocks/Grid/templates.js

@@ -0,0 +1,61 @@
+import { defineMessages } from 'react-intl';
+import { blocksFormGenerator } from '@plone/volto/helpers';
+
+import gridTemplate1 from './grid-1.svg';
+import gridTemplate2 from './grid-2.svg';
+import gridTemplate3 from './grid-3.svg';
+import gridTemplate4 from './grid-4.svg';
+import gridTemplate5 from './grid-5.svg';
+import gridTemplate6 from './grid-6.svg';
+
+const messages = defineMessages({
+  column: {
+    id: 'column',
+    defaultMessage: 'column',
+  },
+  columns: {
+    id: 'columns',
+    defaultMessage: 'columns',
+  },
+});
+
+const templates = (type) => (intl) => [
+  {
+    image: gridTemplate1,
+    id: 'gridtemplateone',
+    title: `1 ${intl.formatMessage(messages.column)}`,
+    blocksData: blocksFormGenerator(1, type),
+  },
+  {
+    image: gridTemplate2,
+    id: 'gridtemplatetwo',
+    title: `2 ${intl.formatMessage(messages.columns)}`,
+    blocksData: blocksFormGenerator(2, type),
+  },
+  {
+    image: gridTemplate3,
+    id: 'gridtemplatethree',
+    title: `3 ${intl.formatMessage(messages.columns)}`,
+    blocksData: blocksFormGenerator(3, type),
+  },
+  {
+    image: gridTemplate4,
+    id: 'gridtemplatefour',
+    title: `4 ${intl.formatMessage(messages.columns)}`,
+    blocksData: blocksFormGenerator(4, type),
+  },
+  {
+    image: gridTemplate5,
+    id: 'gridtemplatefive',
+    title: `5 ${intl.formatMessage(messages.columns)}`,
+    blocksData: blocksFormGenerator(5, type),
+  },
+  {
+    image: gridTemplate6,
+    id: 'gridtemplatesix',
+    title: `6 ${intl.formatMessage(messages.columns)}`,
+    blocksData: blocksFormGenerator(6, type),
+  },
+];
+
+export default templates;

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

@@ -238,7 +238,9 @@ export const fetchContent = async ({ store, location }) => {
 
   const visitor = ([id, data]) => {
     const blockType = data['@type'];
-    const { getAsyncData } = blocksConfig[blockType];
+    const block = blocksConfig[blockType];
+    if (!block) return;
+    const { getAsyncData } = block;
     if (getAsyncData) {
       const p = getAsyncData({
         store,

package/src/customizations/volto/helpers/Html/Html.jsx

@@ -88,15 +88,8 @@ class Html extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const {
-      extractor,
-      markup,
-      store,
-      criticalCss,
-      apiPath,
-      publicURL,
-      nonce,
-    } = this.props;
+    const { extractor, markup, store, criticalCss, apiPath, publicURL, nonce } =
+      this.props;
     const head = Helmet.rewind();
     const bodyClass = join(BodyClass.rewind(), ' ');
     const htmlAttributes = head.htmlAttributes.toComponent();