@eeacms/volto-eea-website-theme 3.19.1 → 4.0.0

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

@@ -9,15 +9,18 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { map } from 'lodash';
+import map from 'lodash/map';
 import { defineMessages, injectIntl } from 'react-intl';
 import {
   getVocabFromHint,
   getVocabFromField,
   getVocabFromItems,
-} from '@plone/volto/helpers';
-import { FormFieldWrapper } from '@plone/volto/components';
-import { getVocabulary, getVocabularyTokenTitle } from '@plone/volto/actions';
+} from '@plone/volto/helpers/Vocabularies/Vocabularies';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import {
+  getVocabulary,
+  getVocabularyTokenTitle,
+} from '@plone/volto/actions/vocabularies/vocabularies';
 import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
 
 import {

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

@@ -9,7 +9,7 @@ const CreatorsViewWidget = ({ value, content, children, className }) => {
         const key = `${label}-${index}`;
         return (
           <span key={key}>
-            {index ? ', ' : ''}
+            {index > 0 && ', '}
             {children ? children(label) : label}
           </span>
         );

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { useSelector } from 'react-redux';
-import { toBackendLang } from '@plone/volto/helpers';
+import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
 import { formatDate } from '@plone/volto/helpers/Utils/Date';
 import config from '@plone/volto/registry';
 

package/src/components/theme/Widgets/DateWidget.test.js

@@ -22,7 +22,7 @@ describe('DateWidget', () => {
       </Provider>,
     );
     const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(json).toBeFalsy();
   });
 
   it('renders a date view widget component', () => {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { useSelector } from 'react-redux';
-import { toBackendLang } from '@plone/volto/helpers';
+import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
 import { formatDate } from '@plone/volto/helpers/Utils/Date';
 import config from '@plone/volto/registry';
 

package/src/components/theme/Widgets/DatetimeWidget.test.js

@@ -22,7 +22,7 @@ describe('DatetimeWidget', () => {
       </Provider>,
     );
     const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(json).toBeFalsy();
   });
 
   it('renders a datetime view widget component with a date and time', () => {

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

@@ -1,3 +1,4 @@
 export default function ImageViewWidget({ value }) {
+  // eslint-disable-next-line no-restricted-syntax
   return <img src={value?.download} alt={value?.filename} />;
 }

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

@@ -1,10 +1,11 @@
 import React, { useEffect, useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { v4 as uuid } from 'uuid';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
 import { Accordion, Button, Segment, Form, Dropdown } from 'semantic-ui-react';
-import { getNavigation } from '@plone/volto/actions';
+import { getNavigation } from '@plone/volto/actions/navigation/navigation';
 import { defineMessages, useIntl } from 'react-intl';
 import config from '@plone/volto/registry';
 
@@ -13,6 +14,8 @@ import { numbersToMenuItemColumns } from '@eeacms/volto-eea-design-system/ui/Hea
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 
+const EMPTY_NAVIGATION = [];
+
 const messages = defineMessages({
   loadNavigationRoutes: {
     id: 'Load Main Navigation Routes',
@@ -257,7 +260,8 @@ const NavigationBehaviorWidget = (props) => {
   const { value = '{}', id, onChange } = props;
   const intl = useIntl();
   const dispatch = useDispatch();
-  const navigation = useSelector((state) => state.navigation?.items || []);
+  const navigation =
+    useSelector((state) => state.navigation?.items) || EMPTY_NAVIGATION;
   const navigationLoaded = useSelector((state) => state.navigation?.loaded);
 
   // Parse JSON string to object

package/src/components/theme/Widgets/NavigationBehaviorWidget.test.jsx

@@ -9,14 +9,13 @@ import '@testing-library/jest-dom';
 
 const mockStore = configureStore([thunk]);
 
-// Mock the getNavigation action
 const mockGetNavigation = jest.fn(() => ({ type: 'GET_NAVIGATION' }));
-jest.mock('@plone/volto/actions', () => ({
+jest.mock('@plone/volto/actions/navigation/navigation', () => ({
   getNavigation: mockGetNavigation,
 }));
 
-// Mock the config
 jest.mock('@plone/volto/registry', () => ({
+  __esModule: true,
   default: {
     settings: {
       menuItemsLayouts: {
@@ -42,60 +41,66 @@ jest.mock('uuid', () => ({
   v4: () => 'test-uuid-123',
 }));
 
-// Mock Volto components
-jest.mock('@plone/volto/components', () => ({
-  Icon: ({ name, size }) => (
+jest.mock('@plone/volto/components/theme/Icon/Icon', () => ({
+  __esModule: true,
+  default: ({ name, size }) => (
     <div data-testid="icon" data-name={name} data-size={size} />
   ),
-  FormFieldWrapper: ({ children, ...props }) => (
+}));
+
+jest.mock('@plone/volto/components/manage/Widgets/FormFieldWrapper', () => ({
+  __esModule: true,
+  default: ({ children, ...props }) => (
     <div data-testid="form-field-wrapper" {...props}>
       {children}
     </div>
   ),
 }));
 
-// Mock ObjectWidget
 jest.mock('@plone/volto/components/manage/Widgets/ObjectWidget', () => {
-  return function MockObjectWidget({ id, schema, value, onChange }) {
-    return (
-      <div data-testid="object-widget" data-id={id}>
-        {schema.properties.hideChildrenFromNavigation && (
-          <div>
-            <label>Hide Children From Navigation</label>
-            <input
-              type="checkbox"
-              checked={value.hideChildrenFromNavigation || false}
-              onChange={(e) =>
-                onChange(id, {
-                  ...value,
-                  hideChildrenFromNavigation: e.target.checked,
-                })
-              }
-            />
-          </div>
-        )}
-        {schema.properties.menuItemColumns && (
-          <div>
-            <label>Menu Item Columns</label>
-            <div data-testid="menu-item-columns">
-              {(value.menuItemColumns || []).map((col, index) => (
-                <span key={index}>{col}</span>
-              ))}
+  return {
+    __esModule: true,
+    default: function MockObjectWidget({ id, schema, value, onChange }) {
+      return (
+        <div data-testid="object-widget" data-id={id}>
+          {schema.properties.hideChildrenFromNavigation && (
+            <div>
+              <label>Hide Children From Navigation</label>
+              <input
+                type="checkbox"
+                checked={value.hideChildrenFromNavigation || false}
+                onChange={(e) =>
+                  onChange(id, {
+                    ...value,
+                    hideChildrenFromNavigation: e.target.checked,
+                  })
+                }
+              />
             </div>
-          </div>
-        )}
-        {schema.properties.menuItemChildrenListColumns && (
-          <div>
-            <label>Menu Item Children List Columns</label>
-            <div data-testid="menu-item-children-columns">
-              {(value.menuItemChildrenListColumns || []).map((col, index) => (
-                <span key={index}>{col}</span>
-              ))}
+          )}
+          {schema.properties.menuItemColumns && (
+            <div>
+              <label>Menu Item Columns</label>
+              <div data-testid="menu-item-columns">
+                {(value.menuItemColumns || []).map((col, index) => (
+                  <span key={index}>{col}</span>
+                ))}
+              </div>
             </div>
-          </div>
-        )}
-      </div>
-    );
+          )}
+          {schema.properties.menuItemChildrenListColumns && (
+            <div>
+              <label>Menu Item Children List Columns</label>
+              <div data-testid="menu-item-children-columns">
+                {(value.menuItemChildrenListColumns || []).map((col, index) => (
+                  <span key={index}>{col}</span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      );
+    },
   };
 });
 

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

@@ -16,14 +16,17 @@ import {
 } from '@plone/volto/components/manage/Widgets/SelectUtils';
 import checkSVG from '@plone/volto/icons/check.svg';
 import checkBlankSVG from '@plone/volto/icons/check-blank.svg';
-import { Icon } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 
 import {
   getVocabFromHint,
   getVocabFromField,
   getVocabFromItems,
-} from '@plone/volto/helpers';
-import { getVocabulary, getVocabularyTokenTitle } from '@plone/volto/actions';
+} from '@plone/volto/helpers/Vocabularies/Vocabularies';
+import {
+  getVocabulary,
+  getVocabularyTokenTitle,
+} from '@plone/volto/actions/vocabularies/vocabularies';
 
 import {
   ClearIndicator,
@@ -34,7 +37,7 @@ import {
   MenuList,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 const messages = defineMessages({
   select: {
@@ -319,12 +322,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/customizations/@plone/volto-slate/blocks/Table/TableBlockView.jsx

@@ -6,7 +6,7 @@
 import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Table } from 'semantic-ui-react';
-import { map } from 'lodash';
+import map from 'lodash/map';
 import {
   serializeNodes,
   serializeNodesToText,
@@ -80,8 +80,8 @@ const View = ({ data }) => {
         state.column !== index
           ? 'ascending'
           : state.direction === 'ascending'
-          ? 'descending'
-          : 'ascending',
+            ? 'descending'
+            : 'ascending',
     });
   };
 

package/src/customizations/@plone/volto-slate/blocks/Text/TextBlockView.jsx

@@ -3,9 +3,9 @@ import {
   serializeNodesToText,
 } from '@plone/volto-slate/editor/render';
 import config from '@plone/volto/registry';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 import Slugger from 'github-slugger';
-import { normalizeString } from '@plone/volto/helpers';
+import { normalizeString } from '@plone/volto/helpers/Utils/Utils';
 
 const TextBlockView = (props) => {
   const { id, data, styling = {} } = props;

package/src/customizations/@plone/volto-slate/editor/SlateEditor.jsx

@@ -1,6 +1,7 @@
 import ReactDOM from 'react-dom';
 import cx from 'classnames';
-import { isEqual, cloneDeep } from 'lodash';
+import isEqual from 'lodash/isEqual';
+import cloneDeep from 'lodash/cloneDeep';
 import { Transforms, Editor, Point } from 'slate'; // , Transforms
 import { Slate, Editable, ReactEditor } from 'slate-react';
 import React, { Component } from 'react'; // , useState
@@ -81,16 +82,14 @@ class SlateEditor extends Component {
     this.handleChange = this.handleChange.bind(this);
     this.getSavedSelection = this.getSavedSelection.bind(this);
     this.setSavedSelection = this.setSavedSelection.bind(this);
+    this.getEditorValue = this.getEditorValue.bind(this);
 
     this.savedSelection = null;
 
     const uid = uuid(); // used to namespace the editor's plugins
 
     this.slateSettings = props.slateSettings || config.settings.slate;
-    this.initialValue =
-      this.props.value && this.props.value.length > 0
-        ? cloneDeep(this.props.value)
-        : this.slateSettings.defaultValue();
+    this.initialValue = this.getEditorValue(this.props.value);
 
     this.state = {
       editor: this.createEditor(uid),
@@ -103,6 +102,21 @@ class SlateEditor extends Component {
     this.selectionTimeout = null;
   }
 
+  getEditorValue(value = this.props.value) {
+    if (Array.isArray(value) && value.length > 0) {
+      return cloneDeep(value);
+    }
+
+    return (
+      this.slateSettings.defaultValue?.() || [
+        {
+          type: 'p',
+          children: [{ text: '' }],
+        },
+      ]
+    );
+  }
+
   getSavedSelection() {
     return this.savedSelection;
   }
@@ -183,10 +197,7 @@ class SlateEditor extends Component {
       !isEqual(this.props.value, this.state.internalValue)
     ) {
       const { editor } = this.state;
-      const newValue =
-        this.props.value && this.props.value.length > 0
-          ? cloneDeep(this.props.value)
-          : this.slateSettings.defaultValue();
+      const newValue = this.getEditorValue(this.props.value);
 
       resetNodes(editor, { nodes: newValue });
 
@@ -239,6 +250,7 @@ class SlateEditor extends Component {
 
   render() {
     const {
+      id,
       selected,
       placeholder,
       onKeyDown,
@@ -290,7 +302,7 @@ class SlateEditor extends Component {
         <EditorContext.Provider value={editor}>
           <Slate
             editor={editor}
-            initialValue={this.initialValue}
+            initialValue={this.getEditorValue()}
             onChange={this.handleChange}
           >
             {selected ? (
@@ -367,6 +379,7 @@ class SlateEditor extends Component {
                 if (handled) return;
                 onKeyDown && onKeyDown({ editor, event });
               }}
+              aria-labelledby={id ? `field-${id}` : undefined}
               {...editableProps}
             />
             {selected &&

package/src/customizations/@plone/volto-slate/editor/render.jsx

@@ -6,9 +6,13 @@ import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { Node, Text } from 'slate';
 import cx from 'classnames';
-import { isEmpty, isEqual, omit } from 'lodash';
-import { UniversalLink, Toast } from '@plone/volto/components';
-import { messages, addAppURL } from '@plone/volto/helpers';
+import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
+import omit from 'lodash/omit';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
+import { messages } from '@plone/volto/helpers//MessageLabels/MessageLabels';
+import { addAppURL } from '@plone/volto/helpers/Url/Url';
 import useClipboard from '@plone/volto/hooks/clipboard/useClipboard';
 import config from '@plone/volto/registry';
 import linkSVG from '@plone/volto/icons/link.svg';

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

@@ -4,8 +4,11 @@ import config from '@plone/volto/registry';
 import {
   getBlocksFieldname,
   getBlocksLayoutFieldname,
-} from '@plone/volto/helpers';
-import _ from 'lodash';
+} from '@plone/volto/helpers/Blocks/Blocks';
+import find from 'lodash/find';
+import first from 'lodash/first';
+import includes from 'lodash/includes';
+import some from 'lodash/some';
 import { makeEditor } from '@plone/volto-slate/utils/editor';
 
 // case sensitive; first in an inner array is the default and preffered format
@@ -138,10 +141,10 @@ export const isSingleBlockTypeActive = (editor, format) => {
 };
 
 export const isBlockActive = (editor, format) => {
-  const aliasList = _.find(formatAliases, (x) => _.includes(x, format));
+  const aliasList = find(formatAliases, (x) => includes(x, format));
 
   if (aliasList) {
-    const aliasFound = _.some(aliasList, (y) => {
+    const aliasFound = some(aliasList, (y) => {
       return isSingleBlockTypeActive(editor, y);
     });
 
@@ -156,17 +159,17 @@ export const isBlockActive = (editor, format) => {
 export const getBlockTypeContextData = (editor, format) => {
   let isActive, defaultFormat, matcher;
 
-  const aliasList = _.find(formatAliases, (x) => _.includes(x, format));
+  const aliasList = find(formatAliases, (x) => includes(x, format));
 
   if (aliasList) {
-    const aliasFound = _.some(aliasList, (y) => {
+    const aliasFound = some(aliasList, (y) => {
       return isSingleBlockTypeActive(editor, y);
     });
 
     if (aliasFound) {
       isActive = true;
-      defaultFormat = _.first(aliasList);
-      matcher = (n) => _.includes(aliasList, n.type);
+      defaultFormat = first(aliasList);
+      matcher = (n) => includes(aliasList, n.type);
 
       return { isActive, defaultFormat, matcher };
     }

package/src/customizations/volto/components/manage/Blocks/Grid/View.jsx

@@ -1,7 +1,7 @@
 import { Grid } from 'semantic-ui-react';
 import cx from 'classnames';
-import { RenderBlocks } from '@plone/volto/components';
-import { withBlockExtensions } from '@plone/volto/helpers';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+import { withBlockExtensions } from '@plone/volto/helpers//Extensions';
 import config from '@plone/volto/registry';
 
 const convertTeaserToGridIfNecessaryAndTransformEmptyBlocksToSlate = (data) => {

package/src/customizations/volto/components/manage/Blocks/Image/Edit.jsx

@@ -2,7 +2,6 @@
  * Edit image block.
  * @module components/manage/Blocks/Image/Edit
  */
-
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
@@ -12,20 +11,22 @@ import { Button, Dimmer, Input, Loader, Message } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import loadable from '@loadable/component';
 import cx from 'classnames';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 
-import { Icon, ImageSidebar, SidebarPortal } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import ImageSidebar from '@plone/volto/components/manage/Blocks/Image/ImageSidebar';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import { Icon as IconSemantic } from 'semantic-ui-react';
-import { createContent } from '@plone/volto/actions';
-import { Copyright } from '@eeacms/volto-eea-design-system/ui';
+import { createContent } from '@plone/volto/actions/content/content';
+import Copyright from '@eeacms/volto-eea-design-system/ui/Copyright/Copyright';
 
 import {
   flattenToAppURL,
   getBaseUrl,
   isInternalURL,
-  withBlockExtensions,
-  validateFileUploadSize,
-} from '@plone/volto/helpers';
+} from '@plone/volto/helpers/Url/Url';
+import { withBlockExtensions } from '@plone/volto/helpers//Extensions';
+import { validateFileUploadSize } from '@plone/volto/helpers//FormValidation/FormValidation';
 import config from '@plone/volto/registry';
 
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
@@ -271,6 +272,7 @@ class Edit extends Component {
       this.props.data.placeholder ||
       this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
     const { copyright, copyrightIcon, copyrightPosition } = data;
+    const resolvedCopyrightPosition = copyrightPosition || 'left';
 
     const showCopyright = data?.size === 'l' || !data.size;
 
@@ -321,36 +323,36 @@ class Edit extends Component {
                   data.image_scales
                     ? undefined
                     : isInternalURL(data.url)
-                    ? // Backwards compat in the case that the block is storing the full server URL
-                      (() => {
-                        if (data.size === 'l')
+                      ? // Backwards compat in the case that the block is storing the full server URL
+                        (() => {
+                          if (data.size === 'l')
+                            return `${flattenToAppURL(
+                              data.url,
+                            )}/@@images/image/large`;
+                          if (data.size === 'm')
+                            return `${flattenToAppURL(
+                              data.url,
+                            )}/@@images/image/preview`;
+                          if (data.size === 's')
+                            return `${flattenToAppURL(
+                              data.url,
+                            )}/@@images/image/mini`;
                           return `${flattenToAppURL(
                             data.url,
                           )}/@@images/image/large`;
-                        if (data.size === 'm')
-                          return `${flattenToAppURL(
-                            data.url,
-                          )}/@@images/image/preview`;
-                        if (data.size === 's')
-                          return `${flattenToAppURL(
-                            data.url,
-                          )}/@@images/image/mini`;
-                        return `${flattenToAppURL(
-                          data.url,
-                        )}/@@images/image/large`;
-                      })()
-                    : data.url
+                        })()
+                      : data.url
                 }
                 sizes={config.blocks.blocksConfig.image.getSizes(data)}
                 alt={data.alt || ''}
                 loading="lazy"
                 responsive={true}
               />
-              <div className={`copyright-wrapper ${copyrightPosition}`}>
+              <div className={`copyright-wrapper ${resolvedCopyrightPosition}`}>
                 {copyright && showCopyright ? (
-                  <Copyright copyrightPosition={copyrightPosition}>
+                  <Copyright copyrightPosition={resolvedCopyrightPosition}>
                     <Copyright.Icon>
-                      <IconSemantic name={copyrightIcon} />
+                      <IconSemantic className={copyrightIcon} />
                     </Copyright.Icon>
                     <Copyright.Text>{copyright}</Copyright.Text>
                   </Copyright>
@@ -383,6 +385,7 @@ class Edit extends Component {
                           </Dimmer>
                         )}
                         <div className="no-image-wrapper">
+                          {/* eslint-disable-next-line no-restricted-syntax */}
                           <img src={imageBlockSVG} alt="" />
                           <div className="toolbar-inner">
                             <Button.Group>