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

package/src/components/manage/Blocks/GroupBlockTemplate/FlexGroup/FlexGroup.jsx

@@ -1,9 +1,7 @@
 import React from 'react';
-import { Button } from 'semantic-ui-react';
-import { Icon, BlocksForm } from '@plone/volto/components';
-import EditBlockWrapper from '@eeacms/volto-group-block/components/manage/Blocks/Group/EditBlockWrapper';
+import BlocksForm from '@plone/volto/components/manage/Blocks/Block/BlocksForm';
+import cx from 'classnames';
 
-import helpSVG from '@plone/volto/icons/help.svg';
 import RenderBlocks from './RenderBlocks';
 import './editor-flex.less';
 
@@ -17,8 +15,6 @@ const FlexGroup = (props) => {
     selected,
     selectedBlock,
     onSelectBlock,
-    setSelectedBlock,
-    multiSelected,
     manage,
     childBlocksForm,
     formDescription,
@@ -26,7 +22,7 @@ const FlexGroup = (props) => {
   } = props;
   const metadata = props.metadata || props.properties;
   const blockState = {};
-  const { no_of_columns = 2 } = data;
+  const { no_of_columns = 1 } = data;
   const flexClassNames = `ui unstackable items row flex-items-wrapper items-${no_of_columns}-columns`;
 
   React.useEffect(() => {
@@ -43,12 +39,19 @@ const FlexGroup = (props) => {
   }
 
   return (
-    <div className="flex-blocks-form" data-block={block}>
+    <div
+      className={cx('flex-blocks-form', {
+        'disable-inner-buttons': data.disableInnerButtons,
+      })}
+      data-block={block}
+    >
       {isEditMode ? (
         <BlocksForm
           metadata={metadata}
           properties={childBlocksForm}
           manage={manage}
+          isMainForm={false}
+          stopPropagation={selectedBlock}
           selectedBlock={selected ? selectedBlock : null}
           allowedBlocks={data.allowedBlocks}
           title={data.placeholder}
@@ -80,42 +83,7 @@ const FlexGroup = (props) => {
             }
           }}
           pathname={pathname}
-        >
-          {({ draginfo }, editBlock, blockProps) => (
-            <div className="flex-item">
-              <div className="item-wrapper">
-                <EditBlockWrapper
-                  draginfo={draginfo}
-                  blockProps={blockProps}
-                  disabled={data.disableInnerButtons}
-                  extraControls={
-                    <>
-                      {instructions && (
-                        <>
-                          <Button
-                            icon
-                            basic
-                            title="Section help"
-                            onClick={() => {
-                              setSelectedBlock();
-                              const tab = manage ? 0 : 1;
-                              props.setSidebarTab(tab);
-                            }}
-                          >
-                            <Icon name={helpSVG} className="" size="19px" />
-                          </Button>
-                        </>
-                      )}
-                    </>
-                  }
-                  multiSelected={multiSelected.includes(blockProps.block)}
-                >
-                  {editBlock}
-                </EditBlockWrapper>
-              </div>
-            </div>
-          )}
-        </BlocksForm>
+        />
       ) : (
         <div className={flexClassNames}>
           <RenderBlocks metadata={metadata} content={data?.data || {}} />

package/src/components/manage/Blocks/GroupBlockTemplate/FlexGroup/RenderBlocks.jsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import { getBaseUrl, applyBlockDefaults } from '@plone/volto/helpers';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { applyBlockDefaults } from '@plone/volto/helpers/Blocks/Blocks';
 import { defineMessages, injectIntl } from 'react-intl';
-import { map } from 'lodash';
+import map from 'lodash/map';
 import {
   getBlocksFieldname,
   getBlocksLayoutFieldname,
   hasBlocksData,
-} from '@plone/volto/helpers';
+} from '@plone/volto/helpers/Blocks/Blocks';
 import StyleWrapper from '@plone/volto/components/manage/Blocks/Block/StyleWrapper';
 import config from '@plone/volto/registry';
-import { ViewDefaultBlock } from '@plone/volto/components';
+import ViewDefaultBlock from '@plone/volto/components/manage/Blocks/Block/DefaultView';
 
 const messages = defineMessages({
   unknownBlock: {

package/src/components/manage/Blocks/GroupBlockTemplate/FlexGroup/editor-flex.less

@@ -3,12 +3,53 @@
 @type: 'extra';
 @element: 'custom';
 
-@baseWidth: 100%;
-
 // on edit ensure add button is next to the block input area
 .flex-blocks-form {
-  .item-wrapper {
+  [data-rbd-draggable-context-id] {
     position: relative;
-    width: 100%;
+    min-width: var(--flex-item-width, 100%);
+  }
+
+  &.disable-inner-buttons {
+    .drag.handle.wrapper,
+    .delete-button,
+    .block-add-button {
+      display: none !important;
+    }
+  }
+}
+
+// Mirror column width rules from item.overrides for edit mode
+// (.flex-item wrapper was removed; DnD wrappers are now the flex children)
+// items-1-columns: override inherited 25% from .group.flex .items-1-columns in item.overrides
+.flex-blocks-form
+  .flex-items-wrapper.items-1-columns
+  [data-rbd-draggable-context-id] {
+  --flex-item-width: 100%;
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .flex-blocks-form
+    .flex-items-wrapper.items-2-columns
+    [data-rbd-draggable-context-id] {
+    --flex-item-width: calc(100% / 2 - 1%);
+  }
+
+  .flex-blocks-form
+    .flex-items-wrapper.items-3-columns
+    [data-rbd-draggable-context-id] {
+    --flex-item-width: calc(100% / 3 - 1%);
+  }
+
+  .flex-blocks-form
+    .flex-items-wrapper.items-4-columns
+    [data-rbd-draggable-context-id] {
+    --flex-item-width: calc(100% / 4 - 1%);
+  }
+
+  .flex-blocks-form
+    .flex-items-wrapper.items-5-columns
+    [data-rbd-draggable-context-id] {
+    --flex-item-width: calc(100% / 5 - 1%);
   }
 }

package/src/components/manage/Blocks/LayoutSettings/LayoutSettingsEdit.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { EditSchema } from './schema';
-import { BlockDataForm, SidebarPortal } from '@plone/volto/components';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import LayoutSettingsView from './LayoutSettingsView';
 
 const LayoutSettingsEdit = (props) => {

package/src/components/manage/Blocks/LayoutSettings/LayoutSettingsEdit.test.jsx

@@ -11,8 +11,9 @@ jest.mock('./schema', () => ({
   EditSchema: jest.fn(),
 }));
 
-jest.mock('@plone/volto/components', () => ({
-  BlockDataForm: jest.fn(({ title, schema, formData, onChangeField }) => (
+jest.mock('@plone/volto/components/manage/Form/BlockDataForm', () => ({
+  __esModule: true,
+  default: jest.fn(({ title, schema, formData, onChangeField }) => (
     <div data-testid="block-data-form">
       <div data-testid="form-title">{title}</div>
       <div data-testid="form-schema">{JSON.stringify(schema)}</div>
@@ -25,7 +26,11 @@ jest.mock('@plone/volto/components', () => ({
       </button>
     </div>
   )),
-  SidebarPortal: jest.fn(({ selected, children }) => (
+}));
+
+jest.mock('@plone/volto/components/manage/Sidebar/SidebarPortal', () => ({
+  __esModule: true,
+  default: jest.fn(({ selected, children }) => (
     <div data-testid="sidebar-portal" data-selected={selected}>
       {children}
     </div>
@@ -43,7 +48,10 @@ jest.mock('./LayoutSettingsView', () => ({
 
 const mockLayoutSettingsView = require('./LayoutSettingsView').default;
 
-const { BlockDataForm, SidebarPortal } = require('@plone/volto/components');
+const BlockDataForm =
+  require('@plone/volto/components/manage/Form/BlockDataForm').default;
+const SidebarPortal =
+  require('@plone/volto/components/manage/Sidebar/SidebarPortal').default;
 
 describe('LayoutSettingsEdit', () => {
   const mockSchema = {

package/src/components/manage/Blocks/LayoutSettings/LayoutSettingsView.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BodyClass } from '@plone/volto/helpers';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 import { getVoltoStyles } from '@eeacms/volto-eea-website-theme/helpers/schema-utils';
 import cx from 'classnames';
 

package/src/components/manage/Blocks/Title/Edit.jsx

@@ -9,8 +9,8 @@ import PropTypes from 'prop-types';
 import { Editor, createEditor, Transforms, Node, Range } from 'slate';
 import { ReactEditor, Editable, Slate, withReact } from 'slate-react';
 import config from '@plone/volto/registry';
-import { SidebarPortal } from '@plone/volto/components';
-import { BodyClass } from '@plone/volto/helpers';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 import View from '@eeacms/volto-eea-website-theme/components/manage/Blocks/Title/View';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import schema from './schema';
@@ -171,7 +171,7 @@ export const TitleBlockEdit = (props) => {
         banner={{
           title: {
             view: (
-              <Slate editor={editor} onChange={handleChange} value={val}>
+              <Slate editor={editor} onChange={handleChange} initialValue={val}>
                 <Editable
                   readOnly={!editable}
                   onKeyDown={handleKeyDown}

package/src/components/manage/Blocks/Title/View.jsx

@@ -6,7 +6,8 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { withBlockExtensions, BodyClass } from '@plone/volto/helpers';
+import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 import DefaultTemplate from './variations/Default';
 
 /**

package/src/components/manage/Blocks/Title/variations/WebReport.jsx

@@ -7,12 +7,12 @@ import React from 'react';
 import { Portal } from 'react-portal';
 import PropTypes from 'prop-types';
 
-import { MaybeWrap } from '@plone/volto/components';
+import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
 import BannerView from '@eeacms/volto-eea-website-theme/components/theme/Banner/View';
 import Banner from '@eeacms/volto-eea-design-system/ui/Banner/Banner';
 import clsx from 'clsx';
 
-import { BodyClass } from '@plone/volto/helpers';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 
 function IsomorphicPortal({ children }) {
   const [isClient, setIsClient] = React.useState();

package/src/components/manage/Blocks/Title/variations/WebReport.test.jsx

@@ -8,14 +8,16 @@ jest.mock('react-portal', () => ({
   Portal: ({ children }) => <div data-testid="portal">{children}</div>,
 }));
 
-jest.mock('@plone/volto/helpers', () => ({
-  BodyClass: ({ className }) => (
+jest.mock('@plone/volto/helpers/BodyClass/BodyClass', () => ({
+  __esModule: true,
+  default: ({ className }) => (
     <div data-testid="body-class" className={className} />
   ),
 }));
 
-jest.mock('@plone/volto/components', () => ({
-  MaybeWrap: ({ condition, as: As, children }) =>
+jest.mock('@plone/volto/components/manage/MaybeWrap/MaybeWrap', () => ({
+  __esModule: true,
+  default: ({ condition, as: As, children }) =>
     condition ? <As>{children}</As> : children,
 }));
 

package/src/components/manage/Blocks/Title/variations/WebReportPage.jsx

@@ -7,11 +7,11 @@ import React from 'react';
 import { Portal } from 'react-portal';
 import PropTypes from 'prop-types';
 
-import { MaybeWrap } from '@plone/volto/components';
+import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
 import BannerView from '@eeacms/volto-eea-website-theme/components/theme/Banner/View';
 import clsx from 'clsx';
 
-import { BodyClass } from '@plone/volto/helpers';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 
 function IsomorphicPortal({ children }) {
   const [isClient, setIsClient] = React.useState();

package/src/components/manage/Blocks/Title/variations/WebReportPage.test.jsx

@@ -14,8 +14,9 @@ jest.mock('react-portal', () => ({
   ),
 }));
 
-jest.mock('@plone/volto/components', () => ({
-  MaybeWrap: ({ children, condition, as: Component }) =>
+jest.mock('@plone/volto/components/manage/MaybeWrap/MaybeWrap', () => ({
+  __esModule: true,
+  default: ({ children, condition, as: Component }) =>
     condition ? <Component>{children}</Component> : <div>{children}</div>,
 }));
 
@@ -51,8 +52,9 @@ jest.mock(
 
 jest.mock('clsx', () => jest.fn((classes) => classes));
 
-jest.mock('@plone/volto/helpers', () => ({
-  BodyClass: ({ className }) => (
+jest.mock('@plone/volto/helpers/BodyClass/BodyClass', () => ({
+  __esModule: true,
+  default: ({ className }) => (
     <div data-testid="body-class" data-classname={className} />
   ),
 }));

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useRef } from 'react';
-import { Helmet } from '@plone/volto/helpers';
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import { compose } from 'redux';
 import { connect, useDispatch } from 'react-redux';
 import { withRouter } from 'react-router';

package/src/components/theme/BaseTag.jsx

@@ -1,5 +1,6 @@
 import { useSelector } from 'react-redux';
-import { flattenToAppURL, Helmet } from '@plone/volto/helpers';
+import Helmet from '@plone/volto/helpers//Helmet/Helmet';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 
 export default function BaseTag(props) {
   const contentId = useSelector((store) => store?.content?.data?.['@id']);

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

@@ -6,7 +6,8 @@ import BaseTag from './BaseTag';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/helpers', () => ({
+jest.mock('@plone/volto/helpers/Url/Url', () => ({
+  __esModule: true,
   flattenToAppURL: jest.fn((url) => {
     if (url.startsWith('http://') || url.startsWith('https://')) {
       const urlObj = new URL(url);
@@ -14,7 +15,11 @@ jest.mock('@plone/volto/helpers', () => ({
     }
     return url;
   }),
-  Helmet: ({ base }) => (
+}));
+
+jest.mock('@plone/volto/helpers//Helmet/Helmet', () => ({
+  __esModule: true,
+  default: ({ base }) => (
     <div
       data-testid="helmet-base"
       data-target={base?.target}

package/src/components/theme/DraftBackground/DraftBackground.jsx

@@ -1,4 +1,5 @@
-import { BodyClass, flattenToAppURL } from '@plone/volto/helpers';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { compose } from 'redux';

package/src/components/theme/Homepage/HomePageInverseView.jsx

@@ -5,11 +5,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DefaultView } from '@plone/volto/components/';
+import DefaultView from '@plone/volto/components/theme/View/DefaultView';
 
-import { BodyClass } from '@plone/volto/helpers';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 
-import { hasBlocksData } from '@plone/volto/helpers';
+import { hasBlocksData } from '@plone/volto/helpers/Blocks/Blocks';
 
 /**
  * Component to display the default view.

package/src/components/theme/Homepage/HomePageInverseView.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import HomePageInverseView from './HomePageInverseView';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('HomePageInverseView Component', () => {
   it('renders without crashing', () => {

package/src/components/theme/Homepage/HomePageView.jsx

@@ -5,11 +5,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DefaultView } from '@plone/volto/components/';
+import DefaultView from '@plone/volto/components/theme/View/DefaultView';
 
-import { BodyClass } from '@plone/volto/helpers';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 
-import { hasBlocksData } from '@plone/volto/helpers';
+import { hasBlocksData } from '@plone/volto/helpers/Blocks/Blocks';
 
 /**
  * Component to display the default view.

package/src/components/theme/Homepage/HomePageView.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import HomePageView from './HomePageView';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 describe('HomePageView Component', () => {
   it('renders without crashing', () => {

package/src/components/theme/Logo.jsx

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { defineMessages, useIntl } from 'react-intl';
 import config from '@plone/volto/registry';
 
-import { Logo } from '@eeacms/volto-eea-design-system/ui';
+import Logo from '@eeacms/volto-eea-design-system/ui/Logo/Logo';
 import LogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-logo.svg';
 
 const messages = defineMessages({
@@ -55,8 +55,8 @@ const EEALogo = ({
   const url = config.settings.eea?.logoTargetUrl
     ? config.settings.eea.logoTargetUrl
     : config.settings.isMultilingual
-    ? `/${lang}`
-    : '/';
+      ? `/${lang}`
+      : '/';
 
   // Only pass inverted=true if we have an invertedSrc, otherwise the design system
   // Logo will try to use undefined invertedSrc instead of falling back to src

package/src/components/theme/NotFound/GoneView.jsx

@@ -2,13 +2,14 @@ import { useEffect, useState } from 'react';
 import { compose } from 'redux';
 import { injectIntl } from 'react-intl';
 import { withRootNavigation } from '@eeacms/volto-eea-website-theme/hocs';
-import { BodyClass, toBackendLang } from '@plone/volto/helpers';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
+import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
 import { FormattedMessage } from 'react-intl';
 import { Link, useLocation } from 'react-router-dom';
 import { Container, Accordion } from 'semantic-ui-react';
 import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
 import { useDispatch, useSelector } from 'react-redux';
-import { getNavigation } from '@plone/volto/actions';
+import { getNavigation } from '@plone/volto/actions/navigation/navigation';
 import config from '@plone/volto/registry';
 
 /**

package/src/components/theme/NotFound/GoneView.test.jsx

@@ -14,19 +14,20 @@ jest.mock('@eeacms/volto-eea-website-theme/hocs', () => ({
 }));
 
 jest.mock('@plone/volto/helpers/Utils/Utils', () => ({
+  toBackendLang: jest.fn((lang) => lang),
   withServerErrorCode: () => (Component) => Component,
 }));
 
-jest.mock('@plone/volto/helpers', () => ({
-  BodyClass: ({ className, children }) => (
+jest.mock('@plone/volto/helpers/BodyClass/BodyClass', () => ({
+  __esModule: true,
+  default: ({ className, children }) => (
     <div data-testid="body-class" data-classname={className}>
       {children}
     </div>
   ),
-  toBackendLang: jest.fn((lang) => lang),
 }));
 
-jest.mock('@plone/volto/actions', () => ({
+jest.mock('@plone/volto/actions/navigation/navigation', () => ({
   getNavigation: jest.fn(() => ({ type: 'GET_NAVIGATION' })),
 }));
 

package/src/components/theme/NotFound/NotFound.jsx

@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { injectIntl } from 'react-intl';
 import { withRootNavigation } from '@eeacms/volto-eea-website-theme/hocs';
-import { NotFound } from '@plone/volto/components';
+import NotFound from '@plone/volto/components/theme/NotFound/NotFound';
 
 export default compose(injectIntl, withRootNavigation)(NotFound);

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

@@ -8,8 +8,9 @@ import NotFound from './NotFound';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components', () => ({
-  NotFound: () => <div data-testid="volto-notfound">Not Found Page</div>,
+jest.mock('@plone/volto/components/theme/NotFound/NotFound', () => ({
+  __esModule: true,
+  default: () => <div data-testid="volto-notfound">Not Found Page</div>,
 }));
 
 jest.mock('@eeacms/volto-eea-website-theme/hocs', () => ({

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { render, fireEvent } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';

package/src/components/theme/SubsiteClass.jsx

@@ -3,13 +3,15 @@ import cx from 'classnames';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
-import { BodyClass } from '@plone/volto/helpers';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 import { isSubsiteRoot } from 'volto-subsites/utils';
 
+const EMPTY_SUBSITE = {};
+
 const SubsiteClass = () => {
-  const subsite = useSelector(
-    (state) => state.content?.data?.['@components']?.subsite || {},
-  );
+  const subsite =
+    useSelector((state) => state.content?.data?.['@components']?.subsite) ||
+    EMPTY_SUBSITE;
   const location = useLocation();
 
   return (

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

@@ -13,8 +13,9 @@ jest.mock('volto-subsites/utils', () => ({
   isSubsiteRoot: (...args) => mockIsSubsiteRoot(...args),
 }));
 
-jest.mock('@plone/volto/helpers', () => ({
-  BodyClass: ({ className }) => (
+jest.mock('@plone/volto/helpers/BodyClass/BodyClass', () => ({
+  __esModule: true,
+  default: ({ className }) => (
     <div data-testid="body-class" data-classname={className} />
   ),
 }));

package/src/components/theme/WebReport/WebReportSectionView.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
-import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
-import { DefaultView } from '@plone/volto/components/';
+import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import DefaultView from '@plone/volto/components/theme/View/DefaultView';
 import { Redirect } from 'react-router-dom';
 
 const WebReportSectionView = (props) => {

package/src/components/theme/WebReport/WebReportSectionView.test.jsx

@@ -8,13 +8,14 @@ import WebReportSectionView from './WebReportSectionView';
 import '@testing-library/jest-dom';
 
 // Mock external dependencies
-jest.mock('@plone/volto/helpers', () => ({
+jest.mock('@plone/volto/helpers/Url/Url', () => ({
   isInternalURL: jest.fn(),
   flattenToAppURL: jest.fn(),
 }));
 
-jest.mock('@plone/volto/components/', () => ({
-  DefaultView: jest.fn(({ children, content, token, ...otherProps }) => (
+jest.mock('@plone/volto/components/theme/View/DefaultView', () => ({
+  __esModule: true,
+  default: jest.fn(({ children }) => (
     <div data-testid="default-view">{children}</div>
   )),
 }));
@@ -24,8 +25,12 @@ jest.mock('react-router-dom', () => ({
   Redirect: jest.fn(({ to }) => <div data-testid="redirect" data-to={to} />),
 }));
 
-const { isInternalURL, flattenToAppURL } = require('@plone/volto/helpers');
-const { DefaultView } = require('@plone/volto/components/');
+const {
+  isInternalURL,
+  flattenToAppURL,
+} = require('@plone/volto/helpers/Url/Url');
+const DefaultView =
+  require('@plone/volto/components/theme/View/DefaultView').default;
 const { Redirect } = require('react-router-dom');
 
 describe('WebReportSectionView', () => {

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

@@ -10,7 +10,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { Popup } from 'semantic-ui-react';
-import { Icon } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { getSharing } from '@plone/volto/actions/sharing/sharing';
 import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
 
@@ -27,7 +27,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: {

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

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