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

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

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