@eeacms/volto-eea-website-theme 1.32.1 → 1.33.1

package/CHANGELOG.md

@@ -4,6 +4,31 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.33.1](https://github.com/eea/volto-eea-website-theme/compare/1.33.0...1.33.1) - 4 April 2024
+
+#### :bug: Bug Fixes
+
+- fix: adding page with an empty title - refs #268074 [dobri1408 - [`6443924`](https://github.com/eea/volto-eea-website-theme/commit/64439247ab34eef693d4192c778e330267b25fd0)]
+
+### [1.33.0](https://github.com/eea/volto-eea-website-theme/compare/1.32.1...1.33.0) - 3 April 2024
+
+#### :rocket: New Features
+
+- feat(columnsBlock): move tocEntries definition to volto-columns-block [Miu Razvan - [`eb55ff8`](https://github.com/eea/volto-eea-website-theme/commit/eb55ff8753e443c83fd4a8bb3dca8c2b2a78a782)]
+
+#### :bug: Bug Fixes
+
+- fix(toc): use the correct function to render entries in toc [Miu Razvan - [`869ae7c`](https://github.com/eea/volto-eea-website-theme/commit/869ae7cbe2ec555ebfe563d66bb00e5bc80651c2)]
+
+#### :house: Internal changes
+
+- chore: Cleanup package.json [alin - [`c5a1c37`](https://github.com/eea/volto-eea-website-theme/commit/c5a1c370eec27a0ebea9df51dde12040580def2f)]
+
+#### :hammer_and_wrench: Others
+
+- Update index.js to fix jslint issue [ichim-david - [`89b9cef`](https://github.com/eea/volto-eea-website-theme/commit/89b9cefbe35f780bdd07fa6f44234fbfc2fe7bb0)]
+- Update package.json [ichim-david - [`a0ecadf`](https://github.com/eea/volto-eea-website-theme/commit/a0ecadf6efcdeb0fec4ee533d27a6c6787029373)]
+- Revert "fix(blocks): Allow image block urls to be external (#214)" [David Ichim - [`2bbc620`](https://github.com/eea/volto-eea-website-theme/commit/2bbc620d0a375d69ba7982c8e3113628365bb8da)]
 ### [1.32.1](https://github.com/eea/volto-eea-website-theme/compare/1.32.0...1.32.1) - 26 March 2024
 
 #### :rocket: New Features
@@ -112,6 +137,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - bump version [Razvan - [`721e939`](https://github.com/eea/volto-eea-website-theme/commit/721e939d12e324b459ebfa78a2e656ee7142a3d6)]
 - merge master into this branch [Razvan - [`586c8f9`](https://github.com/eea/volto-eea-website-theme/commit/586c8f910bac55a043bd8dda60e9444bd2ae1663)]
+- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`fd90044`](https://github.com/eea/volto-eea-website-theme/commit/fd9004442a9d1d465f7601ecdefe3e23c61e6a9c)]
+- Add Sonarqube tag using insitu-frontend addons list [EEA Jenkins - [`4bc3dd3`](https://github.com/eea/volto-eea-website-theme/commit/4bc3dd3ae412a66befd04b5b80fab3716c929240)]
 - test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`c4dbd28`](https://github.com/eea/volto-eea-website-theme/commit/c4dbd289358205bc2d849aab7edb11ccf3b89cee)]
 - fix tests [Razvan - [`042330b`](https://github.com/eea/volto-eea-website-theme/commit/042330bc97d32ffe7ba769b4f2453f71cffed706)]
 - remove RemoveSchema logic [Razvan - [`08d10f8`](https://github.com/eea/volto-eea-website-theme/commit/08d10f8bf6f75478260e4e4c66d7316ba87b907a)]
@@ -206,6 +233,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - test: Add real image to cypress test [Alin Voinea - [`4ff591a`](https://github.com/eea/volto-eea-website-theme/commit/4ff591ae3318c9588b4e2114582c0fa6cfdf31ae)]
 - test: Add cypress tests for Image block styling position and align [Alin Voinea - [`7341ef7`](https://github.com/eea/volto-eea-website-theme/commit/7341ef7b92714fc0cc3ab0c31c39033e7b3e19e7)]
 - Revert "change(tests): commented out rss test since title block config is missing" [Alin Voinea - [`fb61191`](https://github.com/eea/volto-eea-website-theme/commit/fb611918d6ca380b89b594f283dcf9f685a4b294)]
+- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`6a3be30`](https://github.com/eea/volto-eea-website-theme/commit/6a3be3092589411af7808a235f76de5222fd3868)]
+- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`c3978f2`](https://github.com/eea/volto-eea-website-theme/commit/c3978f23375ef066e9fd6f6c2e34ba6c1c058f69)]
+- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`f672779`](https://github.com/eea/volto-eea-website-theme/commit/f672779e845bec9240ccc901e9f53ec80c5a1819)]
+- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`ae5d8e3`](https://github.com/eea/volto-eea-website-theme/commit/ae5d8e3f4e04dc2808d47ce2ee886e1b23b528da)]
+- test: [JENKINS] Improve cypress time [valentinab25 - [`170ff0c`](https://github.com/eea/volto-eea-website-theme/commit/170ff0c8e3b30e69479bdf1117e811fea94f1027)]
 ### [1.23.0](https://github.com/eea/volto-eea-website-theme/compare/1.22.1...1.23.0) - 2 November 2023
 
 #### :rocket: New Features
@@ -218,6 +250,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
+- chore: [JENKINS] Refactor automated testing [valentinab25 - [`f28fce3`](https://github.com/eea/volto-eea-website-theme/commit/f28fce3d1eb815f95fb9aa40de42b10b7e8e30c5)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`6d15088`](https://github.com/eea/volto-eea-website-theme/commit/6d150886c5aeb2ca0b569270486e60f7cc274e2c)]
 - chore:volto 16 in tests, update docs, fix stylelint overrides [valentinab25 - [`20c0323`](https://github.com/eea/volto-eea-website-theme/commit/20c032380b33c0077c869a05136f93e2fb68e5d4)]
 
@@ -403,6 +436,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
+- chore: [JENKINS] Deprecate circularity website [valentinab25 - [`370dcbf`](https://github.com/eea/volto-eea-website-theme/commit/370dcbfbf1a8135ce7b1b3b271b004552a631837)]
 
 #### :hammer_and_wrench: Others
 
@@ -558,6 +592,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`6c5e2f8`](https://github.com/eea/volto-eea-website-theme/commit/6c5e2f80456e2061d9e9c15fd0a0b91b9ac70568)]
 ### [1.9.1](https://github.com/eea/volto-eea-website-theme/compare/1.9.0...1.9.1) - 28 February 2023
 
 #### :bug: Bug Fixes
@@ -704,6 +739,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - For some reasons types is a string [Alin Voinea - [`3769a09`](https://github.com/eea/volto-eea-website-theme/commit/3769a0981181d5b633f3498daebbe96be8b4b833)]
 - Fix(redirect): o.filter - refs #157627 [Alin Voinea - [`deb23da`](https://github.com/eea/volto-eea-website-theme/commit/deb23da846444cc96539697fd798429ae0abe89e)]
+- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`f1fffc5`](https://github.com/eea/volto-eea-website-theme/commit/f1fffc5db96725440863d545580b4e76cce4b796)]
 ### [1.5.0](https://github.com/eea/volto-eea-website-theme/compare/1.4.2...1.5.0) - 9 January 2023
 
 #### :hammer_and_wrench: Others
@@ -737,6 +773,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 1.4.0 [Alin Voinea - [`bd42a0d`](https://github.com/eea/volto-eea-website-theme/commit/bd42a0d26e928cac5d99933194755da3db06b341)]
 - bump version to use as volto-eea-design-system [David Ichim - [`f4be047`](https://github.com/eea/volto-eea-website-theme/commit/f4be047328b46399b03b612d378b18aaf82e7dc1)]
+- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`9b7cfef`](https://github.com/eea/volto-eea-website-theme/commit/9b7cfefb4d34fc1c948015e491feb370f9795bd8)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`df252a9`](https://github.com/eea/volto-eea-website-theme/commit/df252a9bfed0bb86cadf53c59dd1603b1e2cd822)]
 ### [1.3.2](https://github.com/eea/volto-eea-website-theme/compare/1.3.1...1.3.2) - 16 December 2022
 
@@ -746,6 +783,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`a43c658`](https://github.com/eea/volto-eea-website-theme/commit/a43c658a7920c8df95e763b9a637f38ce77eba2c)]
 - Better razzle.config [Tiberiu Ichim - [`81dbf48`](https://github.com/eea/volto-eea-website-theme/commit/81dbf48815fb27facb4f82c9b764540fdf188b2e)]
 - Better razzle.config [Tiberiu Ichim - [`7bc9da2`](https://github.com/eea/volto-eea-website-theme/commit/7bc9da2cd837ab62a95cd29979cdd9b0055b7d67)]
 ### [1.3.1](https://github.com/eea/volto-eea-website-theme/compare/1.3.0...1.3.1) - 28 November 2022
@@ -756,6 +794,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- yarn 3 [Alin Voinea - [`ea7a709`](https://github.com/eea/volto-eea-website-theme/commit/ea7a7094945312776e9b6f44e371178603e92139)]
 ### [1.3.0](https://github.com/eea/volto-eea-website-theme/compare/1.2.0...1.3.0) - 22 November 2022
 
 #### :rocket: New Features
@@ -796,6 +835,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Add subsite class to body [Tiberiu Ichim - [`74d700f`](https://github.com/eea/volto-eea-website-theme/commit/74d700fbfd6249a8604762a7e4e49cce857db0f3)]
 - Add subsite info to header [Tiberiu Ichim - [`47daf8b`](https://github.com/eea/volto-eea-website-theme/commit/47daf8bb6374a1222040626b19d4154df7ba1b83)]
 - fix eslint [Miu Razvan - [`eb8d0a7`](https://github.com/eea/volto-eea-website-theme/commit/eb8d0a790bc70c0aae256c6ff35f63c4885f338e)]
+- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`cc578a4`](https://github.com/eea/volto-eea-website-theme/commit/cc578a413b205a8e61e091fab3a88f94cedefc89)]
 ### [1.1.0](https://github.com/eea/volto-eea-website-theme/compare/1.0.0...1.1.0) - 28 October 2022
 
 #### :nail_care: Enhancements
@@ -843,6 +883,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`33b56ac`](https://github.com/eea/volto-eea-website-theme/commit/33b56acb13fbaf0c5b79e8fc6e13c4b699c79c90)]
 ### [0.7.3](https://github.com/eea/volto-eea-website-theme/compare/0.7.2...0.7.3) - 22 September 2022
 
 #### :hammer_and_wrench: Others
@@ -1110,6 +1151,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Header refactor, add custom logo #5 [ichim-david - [`4950235`](https://github.com/eea/volto-eea-website-theme/commit/49502358105437cfeac3b144e6d301cb59aa2346)]
 - Update footer.config with new publication card component [ichim-david - [`2e38e9a`](https://github.com/eea/volto-eea-website-theme/commit/2e38e9a417f835009d60c80d4eb4b30229f55e45)]
 - feature(breadcrumbs): implement eea-design-system breadcrumb as Volto component #32 #7 [ichim-david - [`181af41`](https://github.com/eea/volto-eea-website-theme/commit/181af4125ce2b9ddac56dab4723cb11c26633221)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`da8ceb6`](https://github.com/eea/volto-eea-website-theme/commit/da8ceb68ea68bfbc9504e48ccd4d68277f11ab9a)]
 - use breadcrumbs from eea-design-system [nileshgulia1 - [`db2f9e9`](https://github.com/eea/volto-eea-website-theme/commit/db2f9e9a4327420a3cce9a9903cd88549b129eab)]
 - Update theme.config [ichim-david - [`8eca4f4`](https://github.com/eea/volto-eea-website-theme/commit/8eca4f40397a4aeca6d39029c92db78968d37064)]
 - Added keyContent component to theme.config [ichim-david - [`d86f202`](https://github.com/eea/volto-eea-website-theme/commit/d86f202d0274d839487a88b51cae9a0e899beb23)]
@@ -1151,4 +1193,5 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- yarn bootstrap [Alin Voinea - [`6995e9e`](https://github.com/eea/volto-eea-website-theme/commit/6995e9e091f21fdbbdffa8a44fc0e2c626f6d46a)]
 - Initial commit [Alin Voinea - [`6a9c03a`](https://github.com/eea/volto-eea-website-theme/commit/6a9c03a7cebe71ca87e82cf58c42904063e9d8d3)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.32.1",
+  "version": "1.33.1",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -79,4 +79,4 @@
     "cypress:open": "make cypress-open",
     "prepare": "husky install"
   }
-}
+}

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import LayoutSettingsView from './LayoutSettingsView';
+
+const mockStore = configureStore();
+let history = createMemoryHistory();
+
+describe('LayoutSettingsView Component', () => {
+  it('renders without crashing', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const data = {
+      '@layout': 'e28ec238-4cd7-4b72-8025-66da44a6062f',
+      '@type': 'layoutSettings',
+      block: '87911ec6-4242-4bae-b6a5-9b28151169fa',
+      body_class: 'body-class-1',
+      layout_size: 'container_view',
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <LayoutSettingsView data={data} />
+        </Router>
+      </Provider>,
+    );
+
+    expect(container).toBeTruthy();
+  });
+});
+
+describe('LayoutSettingsView Component', () => {
+  it('renders without crashing with multiple classes', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const data = {
+      '@layout': 'e28ec238-4cd7-4b72-8025-66da44a6062f',
+      '@type': 'layoutSettings',
+      block: '87911ec6-4242-4bae-b6a5-9b28151169fa',
+      body_class: ['body-class-1', 'body-class-2'],
+      layout_size: 'container_view',
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <LayoutSettingsView data={data} />
+        </Router>
+      </Provider>,
+    );
+
+    expect(container).toBeTruthy();
+  });
+});

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

@@ -32,6 +32,7 @@ export const EditSchema = () => {
           ['homepage', 'Homepage'],
           ['homepage-inverse', 'Homepage inverse'],
         ],
+        widget: 'creatable_select',
       },
     },
   };

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

@@ -0,0 +1,304 @@
+/**
+ * CreatableSelectWidget component.
+ * @module components/manage/Widgets/SelectWidget
+ *
+ * A copy of the SelectWidget component. The only difference is that is uses the Creatable component as a base
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { map } from 'lodash';
+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';
+import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
+
+import {
+  customSelectStyles,
+  DropdownIndicator,
+  ClearIndicator,
+  Option,
+  selectTheme,
+  MenuList,
+  MultiValueContainer,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+import loadable from '@loadable/component';
+
+export const Creatable = loadable(() => import('react-select/creatable'));
+
+const messages = defineMessages({
+  default: {
+    id: 'Default',
+    defaultMessage: 'Default',
+  },
+  idTitle: {
+    id: 'Short Name',
+    defaultMessage: 'Short Name',
+  },
+  idDescription: {
+    id: 'Used for programmatic access to the fieldset.',
+    defaultMessage: 'Used for programmatic access to the fieldset.',
+  },
+  title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  description: {
+    id: 'Description',
+    defaultMessage: 'Description',
+  },
+  close: {
+    id: 'Close',
+    defaultMessage: 'Close',
+  },
+  choices: {
+    id: 'Choices',
+    defaultMessage: 'Choices',
+  },
+  required: {
+    id: 'Required',
+    defaultMessage: 'Required',
+  },
+  select: {
+    id: 'Select…',
+    defaultMessage: 'Select…',
+  },
+  no_value: {
+    id: 'No value',
+    defaultMessage: 'No value',
+  },
+  no_options: {
+    id: 'No options',
+    defaultMessage: 'No options',
+  },
+});
+
+/**
+ * SelectWidget component class.
+ * @function SelectWidget
+ * @returns {string} Markup of the component.
+ */
+class SelectWidget extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    required: PropTypes.bool,
+    error: PropTypes.arrayOf(PropTypes.string),
+    getVocabulary: PropTypes.func.isRequired,
+    getVocabularyTokenTitle: PropTypes.func.isRequired,
+    choices: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    ),
+    items: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    widgetOptions: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    value: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string,
+      PropTypes.bool,
+      PropTypes.func,
+      PropTypes.array,
+    ]),
+    onChange: PropTypes.func.isRequired,
+    onBlur: PropTypes.func,
+    onClick: PropTypes.func,
+    onEdit: PropTypes.func,
+    onDelete: PropTypes.func,
+    wrapped: PropTypes.bool,
+    noValueOption: PropTypes.bool,
+    customOptionStyling: PropTypes.any,
+    isMulti: PropTypes.bool,
+    placeholder: PropTypes.string,
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    description: null,
+    required: false,
+    items: {
+      vocabulary: null,
+    },
+    widgetOptions: {
+      vocabulary: null,
+    },
+    error: [],
+    choices: [],
+    value: null,
+    onChange: () => {},
+    onBlur: () => {},
+    onClick: () => {},
+    onEdit: null,
+    onDelete: null,
+    noValueOption: true,
+    customOptionStyling: null,
+  };
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    if (
+      (!this.props.choices || this.props.choices?.length === 0) &&
+      this.props.vocabBaseUrl
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      this.props.vocabBaseUrl !== prevProps.vocabBaseUrl &&
+      (!this.props.choices || this.props.choices?.length === 0)
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const { id, choices, value, intl, onChange } = this.props;
+    const normalizedValue = normalizeValue(choices, value, intl);
+    // Make sure that both disabled and isDisabled (from the DX layout feat work)
+    const disabled = this.props.disabled || this.props.isDisabled;
+
+    let options = this.props.vocabBaseUrl
+      ? this.props.choices
+      : [
+          ...map(choices, (option) => ({
+            value: option[0],
+            label:
+              // Fix "None" on the serializer, to remove when fixed in p.restapi
+              option[1] !== 'None' && option[1] ? option[1] : option[0],
+          })),
+          // Only set "no-value" option if there's no default in the field
+          // TODO: also if this.props.defaultValue?
+          ...(this.props.noValueOption &&
+          (this.props.default === undefined || this.props.default === null)
+            ? [
+                {
+                  label: this.props.intl.formatMessage(messages.no_value),
+                  value: 'no-value',
+                },
+              ]
+            : []),
+        ];
+
+    return (
+      <FormFieldWrapper {...this.props}>
+        <Creatable
+          isMulti
+          id={`field-${id}`}
+          key={choices}
+          name={id}
+          menuShouldScrollIntoView={false}
+          isDisabled={disabled}
+          isSearchable={true}
+          className="react-select-container"
+          classNamePrefix="react-select"
+          options={options}
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{
+            ...(options?.length > 25 && {
+              MenuList,
+            }),
+            MultiValueContainer,
+            DropdownIndicator,
+            ClearIndicator,
+            Option: this.props.customOptionStyling || Option,
+          }}
+          value={normalizedValue}
+          placeholder={
+            this.props.placeholder ??
+            this.props.intl.formatMessage(messages.select)
+          }
+          onChange={(selectedOption) => {
+            return onChange(
+              id,
+              selectedOption.map((el) => el.value),
+            );
+          }}
+          isClearable
+        />
+      </FormFieldWrapper>
+    );
+  }
+}
+
+export const SelectWidgetComponent = injectIntl(SelectWidget);
+
+export default compose(
+  injectLazyLibs(['reactSelect']),
+  connect(
+    (state, props) => {
+      const vocabBaseUrl = !props.choices
+        ? getVocabFromHint(props) ||
+          getVocabFromField(props) ||
+          getVocabFromItems(props)
+        : '';
+
+      const vocabState =
+        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[state.intl.locale];
+
+      // If the schema already has the choices in it, then do not try to get the vocab,
+      // even if there is one
+      if (props.choices) {
+        return {
+          choices: props.choices,
+          lang: state.intl.locale,
+        };
+      } else if (vocabState) {
+        return {
+          vocabBaseUrl,
+          choices: vocabState?.items ?? [],
+          lang: state.intl.locale,
+        };
+        // There is a moment that vocabState is not there yet, so we need to pass the
+        // vocabBaseUrl to the component.
+      } else if (vocabBaseUrl) {
+        return {
+          vocabBaseUrl,
+          lang: state.intl.locale,
+        };
+      }
+      return { lang: state.intl.locale };
+    },
+    { getVocabulary, getVocabularyTokenTitle },
+  ),
+)(SelectWidgetComponent);

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { waitFor, render, screen, fireEvent } from '@testing-library/react';
+
+import CreatableSelectWidget from './CreatableSelectWidget';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
+test('renders a select widget component', async () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    vocabularies: {
+      'plone.app.vocabularies.Keywords': {
+        items: [{ title: 'My item', value: 'myitem' }],
+        itemsTotal: 1,
+      },
+    },
+  });
+
+  const { container } = render(
+    <Provider store={store}>
+      <CreatableSelectWidget
+        id="my-field"
+        title="My field"
+        fieldSet="default"
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+      />
+    </Provider>,
+  );
+
+  await waitFor(() => screen.getByText('My field'));
+  expect(container).toBeTruthy();
+});
+
+test("No 'No value' option when default value is 0", async () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const choices = [
+    ['0', 'None'],
+    ['1', 'One'],
+  ];
+
+  const value = {
+    value: '0',
+    label: 'None',
+  };
+
+  const _default = 0;
+
+  const { container } = render(
+    <Provider store={store}>
+      <CreatableSelectWidget
+        id="my-field"
+        title="My field"
+        fieldSet="default"
+        choices={choices}
+        default={_default}
+        value={value}
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+      />
+    </Provider>,
+  );
+
+  await waitFor(() => screen.getByText('None'));
+  fireEvent.mouseDown(
+    container.querySelector('.react-select__dropdown-indicator'),
+    { button: 0 },
+  );
+  expect(container).toBeTruthy();
+});

package/src/customizations/volto/components/manage/Add/Add.jsx

@@ -0,0 +1,498 @@
+/**
+ * Add container.
+ * @module components/manage/Add/Add
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { BodyClass, Helmet } from '@plone/volto/helpers';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { keys, isEmpty } from 'lodash';
+import { defineMessages, injectIntl } from 'react-intl';
+import { Button, Grid, Menu } from 'semantic-ui-react';
+import { Portal } from 'react-portal';
+import { v4 as uuid } from 'uuid';
+import qs from 'query-string';
+import { toast } from 'react-toastify';
+
+import { createContent, getSchema, changeLanguage } from '@plone/volto/actions';
+import {
+  Form,
+  Icon,
+  Toolbar,
+  Sidebar,
+  Toast,
+  TranslationObject,
+} from '@plone/volto/components';
+import {
+  getBaseUrl,
+  hasBlocksData,
+  flattenToAppURL,
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+  getLanguageIndependentFields,
+  langmap,
+  toGettextLang,
+} from '@plone/volto/helpers';
+
+import { preloadLazyLibs } from '@plone/volto/helpers/Loadable';
+import { tryParseJSON } from '@plone/volto/helpers';
+
+import config from '@plone/volto/registry';
+
+import saveSVG from '@plone/volto/icons/save.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+const messages = defineMessages({
+  add: {
+    id: 'Add {type}',
+    defaultMessage: 'Add {type}',
+  },
+  save: {
+    id: 'Save',
+    defaultMessage: 'Save',
+  },
+  cancel: {
+    id: 'Cancel',
+    defaultMessage: 'Cancel',
+  },
+  error: {
+    id: 'Error',
+    defaultMessage: 'Error',
+  },
+  translateTo: {
+    id: 'Translate to {lang}',
+    defaultMessage: 'Translate to {lang}',
+  },
+  someErrors: {
+    id: 'There are some errors.',
+    defaultMessage: 'There are some errors.',
+  },
+});
+
+/**
+ * Add class.
+ * @class Add
+ * @extends Component
+ */
+class Add extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    createContent: PropTypes.func.isRequired,
+    getSchema: PropTypes.func.isRequired,
+    pathname: PropTypes.string.isRequired,
+    schema: PropTypes.objectOf(PropTypes.any),
+    content: PropTypes.shape({
+      // eslint-disable-line react/no-unused-prop-types
+      '@id': PropTypes.string,
+      '@type': PropTypes.string,
+    }),
+    returnUrl: PropTypes.string,
+    createRequest: PropTypes.shape({
+      loading: PropTypes.bool,
+      loaded: PropTypes.bool,
+    }).isRequired,
+    schemaRequest: PropTypes.shape({
+      loading: PropTypes.bool,
+      loaded: PropTypes.bool,
+    }).isRequired,
+    type: PropTypes.string,
+    location: PropTypes.objectOf(PropTypes.any),
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    schema: null,
+    content: null,
+    returnUrl: null,
+    type: 'Default',
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs WysiwygEditor
+   */
+  constructor(props) {
+    super(props);
+    this.onCancel = this.onCancel.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+
+    if (config.blocks?.initialBlocks[props.type]) {
+      this.initialBlocksLayout = config.blocks.initialBlocks[
+        props.type
+      ].map((item) => uuid());
+      this.initialBlocks = this.initialBlocksLayout.reduce(
+        (acc, value, index) => ({
+          ...acc,
+          [value]: { '@type': config.blocks.initialBlocks[props.type][index] },
+        }),
+        {},
+      );
+    }
+    this.state = {
+      isClient: false,
+      error: null,
+      formSelected: 'addForm',
+    };
+  }
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.props.getSchema(this.props.type, getBaseUrl(this.props.pathname));
+    this.setState({ isClient: true });
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (
+      this.props.createRequest.loading &&
+      nextProps.createRequest.loaded &&
+      nextProps.content['@type'] === this.props.type
+    ) {
+      this.props.history.push(
+        this.props.returnUrl || flattenToAppURL(nextProps.content['@id']),
+      );
+    }
+
+    if (this.props.createRequest.loading && nextProps.createRequest.error) {
+      const message =
+        nextProps.createRequest.error.response?.body?.message ||
+        nextProps.createRequest.error.response?.text;
+
+      const error =
+        new DOMParser().parseFromString(message, 'text/html')?.all[0]
+          ?.textContent || message;
+
+      const errorsList = tryParseJSON(error);
+      let erroMessage;
+      if (Array.isArray(errorsList)) {
+        const invariantErrors = errorsList
+          .filter((errorItem) => !('field' in errorItem))
+          .map((errorItem) => errorItem['message']);
+        if (invariantErrors.length > 0) {
+          // Plone invariant validation message.
+          erroMessage = invariantErrors.join(' - ');
+        } else {
+          // Error in specific field.
+          erroMessage = this.props.intl.formatMessage(messages.someErrors);
+        }
+      } else {
+        erroMessage = errorsList.error?.message || error;
+      }
+
+      this.setState({ error: error });
+
+      if (
+        document?.querySelector('.sidebar-container .tabs-wrapper a')?.click
+      ) {
+        document.querySelector('.sidebar-container .tabs-wrapper a').click();
+      }
+      toast.error(
+        <Toast
+          error
+          title={this.props.intl.formatMessage(messages.error)}
+          content={erroMessage}
+        />,
+      );
+    }
+  }
+
+  /**
+   * Submit handler
+   * @method onSubmit
+   * @param {object} data Form data.
+   * @returns {undefined}
+   */
+  onSubmit(data) {
+    this.props.createContent(getBaseUrl(this.props.pathname), {
+      ...data,
+      '@static_behaviors': this.props.schema.definitions
+        ? keys(this.props.schema.definitions)
+        : null,
+      '@type': this.props.type,
+      ...(config.settings.isMultilingual &&
+        this.props.location?.state?.translationOf && {
+          translation_of: this.props.location.state.translationOf,
+          language: this.props.location.state.language,
+        }),
+    });
+  }
+
+  /**
+   * Cancel handler
+   * @method onCancel
+   * @returns {undefined}
+   */
+  onCancel() {
+    if (this.props.location?.state?.translationOf) {
+      const language = this.props.location.state.languageFrom;
+      const langFileName = toGettextLang(language);
+      import('@root/../locales/' + langFileName + '.json').then((locale) => {
+        this.props.changeLanguage(language, locale.default);
+      });
+      this.props.history.push(this.props.location?.state?.translationOf);
+    } else {
+      this.props.history.push(getBaseUrl(this.props.pathname));
+    }
+  }
+
+  form = React.createRef();
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    if (this.props.schemaRequest.loaded) {
+      const visual = hasBlocksData(this.props.schema.properties);
+      const blocksFieldname = getBlocksFieldname(this.props.schema.properties);
+      const blocksLayoutFieldname = getBlocksLayoutFieldname(
+        this.props.schema.properties,
+      );
+      const translationObject = this.props.location?.state?.translationObject;
+
+      const translateTo = translationObject
+        ? langmap?.[this.props.location?.state?.language]?.nativeName
+        : null;
+
+      // Lookup initialBlocks and initialBlocksLayout within schema
+      const schemaBlocks = this.props.schema.properties[blocksFieldname]
+        ?.default;
+      const schemaBlocksLayout = this.props.schema.properties[
+        blocksLayoutFieldname
+      ]?.default?.items;
+      let initialBlocks = this.initialBlocks;
+      let initialBlocksLayout = this.initialBlocksLayout;
+
+      if (!isEmpty(schemaBlocksLayout) && !isEmpty(schemaBlocks)) {
+        initialBlocks = {};
+        initialBlocksLayout = [];
+        schemaBlocksLayout.forEach((value) => {
+          if (!isEmpty(schemaBlocks[value])) {
+            let newUid = uuid();
+            initialBlocksLayout.push(newUid);
+            initialBlocks[newUid] = schemaBlocks[value];
+            initialBlocks[newUid].block = newUid;
+
+            // Layout ID - keep a reference to the original block id within layout
+            initialBlocks[newUid]['@layout'] = value;
+          }
+        });
+      }
+      //copy blocks from translationObject
+      if (translationObject && blocksFieldname && blocksLayoutFieldname) {
+        initialBlocks = {};
+        initialBlocksLayout = [];
+        const originalBlocks = JSON.parse(
+          JSON.stringify(translationObject[blocksFieldname]),
+        );
+        const originalBlocksLayout =
+          translationObject[blocksLayoutFieldname].items;
+
+        originalBlocksLayout.forEach((value) => {
+          if (!isEmpty(originalBlocks[value])) {
+            let newUid = uuid();
+            initialBlocksLayout.push(newUid);
+            initialBlocks[newUid] = originalBlocks[value];
+            initialBlocks[newUid].block = newUid;
+
+            // Layout ID - keep a reference to the original block id within layout
+            initialBlocks[newUid]['@canonical'] = value;
+          }
+        });
+      }
+
+      const lifData = () => {
+        const data = {};
+        if (translationObject) {
+          getLanguageIndependentFields(this.props.schema).forEach(
+            (lif) => (data[lif] = translationObject[lif]),
+          );
+        }
+        return data;
+      };
+
+      const pageAdd = (
+        <div id="page-add">
+          <Helmet
+            title={this.props.intl.formatMessage(messages.add, {
+              type: this.props.type,
+            })}
+          />
+          <Form
+            ref={this.form}
+            key="translated-or-new-content-form"
+            navRoot={
+              this.props.content?.['@components']?.navroot?.navroot || {}
+            }
+            schema={this.props.schema}
+            type={this.props.type}
+            formData={{
+              ...(blocksFieldname && {
+                [blocksFieldname]:
+                  initialBlocks ||
+                  this.props.schema.properties[blocksFieldname]?.default,
+              }),
+              ...(blocksLayoutFieldname && {
+                [blocksLayoutFieldname]: {
+                  items:
+                    initialBlocksLayout ||
+                    this.props.schema.properties[blocksLayoutFieldname]?.default
+                      ?.items,
+                },
+              }),
+              // Copy the Language Independent Fields values from the to-be translated content
+              // into the default values of the translated content Add form.
+              ...lifData(),
+              parent: {
+                '@id': this.props.content?.['@id'] || '',
+              },
+            }}
+            requestError={this.state.error}
+            onSubmit={this.onSubmit}
+            hideActions
+            pathname={this.props.pathname}
+            visual={visual}
+            title={
+              this.props?.schema?.title
+                ? this.props.intl.formatMessage(messages.add, {
+                    type: this.props.schema.title,
+                  })
+                : null
+            }
+            loading={this.props.createRequest.loading}
+            isFormSelected={this.state.formSelected === 'addForm'}
+            onSelectForm={() => {
+              this.setState({ formSelected: 'addForm' });
+            }}
+            global
+          />
+          {this.state.isClient && (
+            <Portal node={document.getElementById('toolbar')}>
+              <Toolbar
+                pathname={this.props.pathname}
+                hideDefaultViewButtons
+                inner={
+                  <>
+                    <Button
+                      id="toolbar-save"
+                      className="save"
+                      aria-label={this.props.intl.formatMessage(messages.save)}
+                      onClick={() => this.form.current.onSubmit()}
+                      loading={this.props.createRequest.loading}
+                    >
+                      <Icon
+                        name={saveSVG}
+                        className="circled"
+                        size="30px"
+                        title={this.props.intl.formatMessage(messages.save)}
+                      />
+                    </Button>
+                    <Button className="cancel" onClick={() => this.onCancel()}>
+                      <Icon
+                        name={clearSVG}
+                        className="circled"
+                        aria-label={this.props.intl.formatMessage(
+                          messages.cancel,
+                        )}
+                        size="30px"
+                        title={this.props.intl.formatMessage(messages.cancel)}
+                      />
+                    </Button>
+                  </>
+                }
+              />
+            </Portal>
+          )}
+          {visual && this.state.isClient && (
+            <Portal node={document.getElementById('sidebar')}>
+              <Sidebar />
+            </Portal>
+          )}
+        </div>
+      );
+
+      return translationObject ? (
+        <>
+          <BodyClass className="babel-view" />
+          <Grid
+            celled="internally"
+            stackable
+            columns={2}
+            id="page-add-translation"
+          >
+            <Grid.Column className="source-object">
+              <TranslationObject
+                translationObject={translationObject}
+                schema={this.props.schema}
+                pathname={this.props.pathname}
+                visual={visual}
+                isFormSelected={
+                  this.state.formSelected === 'translationObjectForm'
+                }
+                onSelectForm={() => {
+                  this.setState({
+                    formSelected: 'translationObjectForm',
+                  });
+                }}
+              />
+            </Grid.Column>
+            <Grid.Column>
+              <div className="new-translation">
+                <Menu pointing secondary attached tabular>
+                  <Menu.Item name={translateTo.toUpperCase()} active={true}>
+                    {`${this.props.intl.formatMessage(messages.translateTo, {
+                      lang: translateTo,
+                    })}`}
+                  </Menu.Item>
+                </Menu>
+                {pageAdd}
+              </div>
+            </Grid.Column>
+          </Grid>
+        </>
+      ) : (
+        pageAdd
+      );
+    }
+    return <div />;
+  }
+}
+
+export default compose(
+  injectIntl,
+  connect(
+    (state, props) => ({
+      createRequest: state.content.create,
+      schemaRequest: state.schema,
+      content: state.content.data,
+      schema: state.schema.schema,
+      pathname: props.location.pathname,
+      returnUrl: qs.parse(props.location.search).return_url,
+      type: qs.parse(props.location.search).type,
+    }),
+    { createContent, getSchema, changeLanguage },
+  ),
+  preloadLazyLibs('cms'),
+)(Add);

package/src/customizations/volto/components/manage/Add/readme.md

@@ -0,0 +1 @@
+This customization aims to resolve the issue of adding a page with an empty title. It is a temporary solution and should be removed upon upgrading to Volto 17. Please check this for more information: https://github.com/plone/volto/pull/5842

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

@@ -20,7 +20,7 @@ import { Copyright } from '@eeacms/volto-eea-design-system/ui';
  */
 export const View = (props) => {
   const { data, detached } = props;
-  const href = data?.href?.[0]?.['@id'] ?? (data?.href || '');
+  const href = data?.href?.[0]?.['@id'] || '';
   const { copyright, copyrightIcon, copyrightPosition } = data;
   // const [hovering, setHovering] = React.useState(false);
   const [viewLoaded, setViewLoaded] = React.useState(false);

package/src/helpers/schema-utils.js

@@ -66,7 +66,13 @@ export const getVoltoStyles = (props) => {
     if (styles[key] === true) {
       output[key] = key;
     } else {
-      output[value] = value;
+      if (Array.isArray(value)) {
+        value.forEach((el, i) => {
+          output[el] = el;
+        });
+      } else {
+        output[value] = value;
+      }
     }
   }
   return output;

package/src/index.js

@@ -6,8 +6,9 @@ import HomePageView from '@eeacms/volto-eea-website-theme/components/theme/Homep
 import NotFound from '@eeacms/volto-eea-website-theme/components/theme/NotFound/NotFound';
 import { TokenWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TokenWidget';
 import { TopicsWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TopicsWidget';
+import CreatableSelectWidget from '@eeacms/volto-eea-website-theme/components/theme/Widgets/CreatableSelectWidget';
+
 import { Icon } from '@plone/volto/components';
-import { getBlocks } from '@plone/volto/helpers';
 import { serializeNodesToText } from '@plone/volto-slate/editor/render';
 import Tag from '@eeacms/volto-eea-design-system/ui/Tag/Tag';
 
@@ -301,26 +302,6 @@ const applyConfig = (config) => {
   // Apply columns block customization
   if (config.blocks.blocksConfig.columnsBlock) {
     config.blocks.blocksConfig.columnsBlock.available_colors = eea.colors;
-    config.blocks.blocksConfig.columnsBlock.tocEntries = (
-      tocData,
-      block = {},
-    ) => {
-      // integration with volto-block-toc
-      const headlines = tocData.levels || ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-      let entries = [];
-      const sorted_column_blocks = getBlocks(block?.data || {});
-      sorted_column_blocks.forEach((column_block) => {
-        const sorted_blocks = getBlocks(column_block[1]);
-        sorted_blocks.forEach((block) => {
-          const { value, plaintext } = block[1];
-          const type = value?.[0]?.type;
-          if (headlines.includes(type)) {
-            entries.push([parseInt(type.slice(1)), plaintext, block[0]]);
-          }
-        });
-      });
-      return entries;
-    };
   }
 
   // Description block custom CSS
@@ -336,6 +317,7 @@ const applyConfig = (config) => {
   config.widgets.views.id.topics = TopicsWidget;
   config.widgets.views.id.subjects = TokenWidget;
   config.widgets.views.widget.tags = TokenWidget;
+  config.widgets.widget.creatable_select = CreatableSelectWidget;
 
   // /voltoCustom.css express-middleware
   // /ok express-middleware - see also: https://github.com/plone/volto/pull/4432

package/src/index.test.js

@@ -91,6 +91,7 @@ describe('applyConfig', () => {
             tags: undefined,
           },
         },
+        widget: {},
       },
       settings: {
         eea: {
@@ -243,6 +244,7 @@ describe('applyConfig', () => {
             tags: undefined,
           },
         },
+        widget: {},
       },
       settings: {
         eea: {},