@eeacms/volto-eea-website-theme 3.5.5 → 3.6.1

package/CHANGELOG.md

@@ -4,7 +4,32 @@ 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).
 
-### [3.5.5](https://github.com/eea/volto-eea-website-theme/compare/3.5.4...3.5.5) - 15 April 2025
+### [3.6.1](https://github.com/eea/volto-eea-website-theme/compare/3.6.0...3.6.1) - 7 May 2025
+
+#### :nail_care: Enhancements
+
+- change(item): added one column for flex-group refs #279420 [David Ichim - [`139f614`](https://github.com/eea/volto-eea-website-theme/commit/139f614658ef431f9b347a851d2ad6c015d5031e)]
+- change(lead-image): add lazy loading for better performance when using LeadImage [David Ichim - [`a388f7f`](https://github.com/eea/volto-eea-website-theme/commit/a388f7fa3d33de5e14f4258e76fcab9cbce57af5)]
+
+#### :house: Internal changes
+
+- chore(tests): fix unittests [David Ichim - [`db15cde`](https://github.com/eea/volto-eea-website-theme/commit/db15cde41e2528d7afcc7ef2556499ea5d74a3e3)]
+
+#### :hammer_and_wrench: Others
+
+- fix uuid mock from previous commit [David Ichim - [`30fac90`](https://github.com/eea/volto-eea-website-theme/commit/30fac9067b19ed260649c13ade283132b2e660dd)]
+### [3.6.0](https://github.com/eea/volto-eea-website-theme/compare/3.5.5...3.6.0) - 30 April 2025
+
+#### :bug: Bug Fixes
+
+- fix: Create widgets for creators and contributors full name - refs #284007 [Teodor Voicu - [`a3f73ae`](https://github.com/eea/volto-eea-website-theme/commit/a3f73ae02a6a8f92793d7e747e7ba9bbe1f51e05)]
+- fix: Add email tooltip for users in creators and contributors metadata - refs #274362 [Teodor Voicu - [`f00d2bc`](https://github.com/eea/volto-eea-website-theme/commit/f00d2bcb5c0115db40d95f7e4d9618ce7164b71a)]
+
+#### :hammer_and_wrench: Others
+
+- Release 3.6.0 [Alin Voinea - [`645d434`](https://github.com/eea/volto-eea-website-theme/commit/645d434318c3cf5a0f1765fa0aa539cb2ecedd74)]
+- Update ImageViewWidget [Miu Razvan - [`7b574be`](https://github.com/eea/volto-eea-website-theme/commit/7b574beac1ef64f1ec54c8f42b4c907291d182ea)]
+### [3.5.5](https://github.com/eea/volto-eea-website-theme/compare/3.5.4...3.5.5) - 25 April 2025
 
 #### :bug: Bug Fixes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "3.5.5",
+  "version": "3.6.1",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -0,0 +1,134 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import WebReport from './WebReport';
+
+// Mock Portal since we are not in real DOM
+jest.mock('react-portal', () => ({
+  Portal: ({ children }) => <div data-testid="portal">{children}</div>,
+}));
+
+jest.mock('@plone/volto/helpers', () => ({
+  BodyClass: ({ className }) => (
+    <div data-testid="body-class" className={className} />
+  ),
+}));
+
+jest.mock('@plone/volto/components', () => ({
+  MaybeWrap: ({ condition, as: As, children }) =>
+    condition ? <As>{children}</As> : children,
+}));
+
+jest.mock(
+  '@eeacms/volto-eea-website-theme/components/theme/Banner/View',
+  () => (props) => (
+    <div data-testid="banner-view">
+      {props.data.aboveTitle}
+      {props.data.belowTitle}
+    </div>
+  ),
+);
+
+jest.mock('@eeacms/volto-eea-design-system/ui/Banner/Banner', () => {
+  const Subtitle = ({ children }) => (
+    <div data-testid="banner-subtitle">{children}</div>
+  );
+  return {
+    Subtitle,
+  };
+});
+
+describe('WebReport', () => {
+  it('renders with content type and subtitle', () => {
+    const props = {
+      isEditMode: false,
+      data: {
+        hero_header: true,
+        content_type: 'Report',
+        subtitle: 'This is a subtitle',
+      },
+      properties: {
+        type_title: 'Fallback Title',
+      },
+    };
+
+    render(<WebReport {...props} />);
+
+    // Check portal wrapping
+    expect(screen.getByTestId('portal')).toBeInTheDocument();
+
+    // Check BodyClass applied
+    expect(screen.getByTestId('body-class')).toHaveClass(
+      'homepage-inverse',
+      'homepage-header',
+      'light-header',
+      'hero-header',
+    );
+
+    // Check BannerView rendered
+    expect(screen.getByTestId('banner-view')).toBeInTheDocument();
+
+    // Content Type shown
+    expect(screen.getByText('Report')).toBeInTheDocument();
+
+    // Subtitle shown
+    expect(screen.getByText('This is a subtitle')).toBeInTheDocument();
+  });
+
+  it('renders fallback type_title when content_type missing', () => {
+    const props = {
+      isEditMode: false,
+      data: {
+        hero_header: true,
+        subtitle: 'Another subtitle',
+      },
+      properties: {
+        type_title: 'Fallback Title',
+      },
+    };
+
+    render(<WebReport {...props} />);
+
+    // Fallback title used
+    expect(screen.getByText('Fallback Title')).toBeInTheDocument();
+  });
+
+  it('hides content type if hideContentType is true', () => {
+    const props = {
+      isEditMode: false,
+      data: {
+        hero_header: false,
+        hideContentType: true,
+        subtitle: 'Hidden subtitle',
+      },
+      properties: {
+        type_title: 'Hidden Title',
+      },
+    };
+
+    render(<WebReport {...props} />);
+
+    // Should NOT find content type div
+    expect(screen.queryByText('Hidden Title')).not.toBeInTheDocument();
+  });
+
+  it('renders directly without portal in edit mode', () => {
+    const props = {
+      isEditMode: true,
+      data: {
+        subtitle: 'Edit mode subtitle',
+      },
+      properties: {
+        type_title: 'Edit Title',
+      },
+    };
+
+    render(<WebReport {...props} />);
+
+    // Should not wrap with Portal when in edit mode
+    expect(screen.queryByTestId('portal')).not.toBeInTheDocument();
+
+    // Banner still rendered
+    expect(screen.getByTestId('banner-view')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,23 @@
+import cx from 'classnames';
+
+const ContributorsViewWidget = ({ value, content, children, className }) => {
+  const resolvedValue = content?.contributors_fullname || value || [];
+  return resolvedValue ? (
+    <span className={cx(className, 'array', 'widget')}>
+      {resolvedValue.map((item, key) => (
+        <>
+          {key ? ', ' : ''}
+          <span key={item.token || item.title || item}>
+            {children
+              ? children(item.title || item.token || item)
+              : item.title || item.token || item}
+          </span>
+        </>
+      ))}
+    </span>
+  ) : (
+    ''
+  );
+};
+
+export default ContributorsViewWidget;

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import ContributorsViewWidget from './ContributorsViewWidget';
+
+describe('ContributorsViewWidget', () => {
+  it('renders an empty array view widget component', () => {
+    const component = renderer.create(<ContributorsViewWidget />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a simple array view widget component', () => {
+    const component = renderer.create(
+      <ContributorsViewWidget className="metadata" value={['foo', 'bar']} />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a vocabulary array view widget component', () => {
+    const component = renderer.create(
+      <ContributorsViewWidget
+        className="metadata"
+        value={[{ title: 'Foo' }, { title: 'Bar' }]}
+      />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a full vocabulary array view widget component', () => {
+    const component = renderer.create(
+      <ContributorsViewWidget
+        className="metadata"
+        value={[
+          { title: 'Foo', token: 'foo' },
+          { title: 'Bar', token: 'bar' },
+        ]}
+      />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a full vocabulary array view widget component with children', () => {
+    const component = renderer.create(
+      <ContributorsViewWidget
+        className="metadata"
+        value={[
+          { title: 'Foo', token: 'foo' },
+          { title: 'Bar', token: 'bar' },
+        ]}
+      >
+        {(child) => <strong>{child}</strong>}
+      </ContributorsViewWidget>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,23 @@
+import cx from 'classnames';
+
+const CreatorsViewWidget = ({ value, content, children, className }) => {
+  const resolvedValue = content?.creators_fullname || value || [];
+  return resolvedValue ? (
+    <span className={cx(className, 'array', 'widget')}>
+      {resolvedValue.map((item, key) => (
+        <>
+          {key ? ', ' : ''}
+          <span key={item.token || item.title || item}>
+            {children
+              ? children(item.title || item.token || item)
+              : item.title || item.token || item}
+          </span>
+        </>
+      ))}
+    </span>
+  ) : (
+    ''
+  );
+};
+
+export default CreatorsViewWidget;

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import CreatorsViewWidget from './CreatorsViewWidget';
+
+describe('CreatorsViewWidget', () => {
+  it('renders an empty array view widget component', () => {
+    const component = renderer.create(<CreatorsViewWidget />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a simple array view widget component', () => {
+    const component = renderer.create(
+      <CreatorsViewWidget className="metadata" value={['foo', 'bar']} />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a vocabulary array view widget component', () => {
+    const component = renderer.create(
+      <CreatorsViewWidget
+        className="metadata"
+        value={[{ title: 'Foo' }, { title: 'Bar' }]}
+      />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a full vocabulary array view widget component', () => {
+    const component = renderer.create(
+      <CreatorsViewWidget
+        className="metadata"
+        value={[
+          { title: 'Foo', token: 'foo' },
+          { title: 'Bar', token: 'bar' },
+        ]}
+      />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a full vocabulary array view widget component with children', () => {
+    const component = renderer.create(
+      <CreatorsViewWidget
+        className="metadata"
+        value={[
+          { title: 'Foo', token: 'foo' },
+          { title: 'Bar', token: 'bar' },
+        ]}
+      >
+        {(child) => <strong>{child}</strong>}
+      </CreatorsViewWidget>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

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

@@ -1,3 +1,3 @@
 export default function ImageViewWidget({ value }) {
-  return <img src={value.download} alt={value.filename} />;
+  return <img src={value?.download} alt={value?.filename} />;
 }

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

@@ -0,0 +1,331 @@
+/**
+ * UserSelectWidget component.
+ * @module components/manage/Widgets/UserSelectWidget
+ */
+
+import React, { Component } from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { Popup } from 'semantic-ui-react';
+import {
+  normalizeValue,
+  convertValueToVocabQuery,
+} from '@plone/volto/components/manage/Widgets/SelectUtils';
+import checkSVG from '@plone/volto/icons/check.svg';
+import checkBlankSVG from '@plone/volto/icons/check-blank.svg';
+import { Icon } from '@plone/volto/components';
+
+import {
+  getVocabFromHint,
+  getVocabFromField,
+  getVocabFromItems,
+} from '@plone/volto/helpers';
+import { getVocabulary, getVocabularyTokenTitle } from '@plone/volto/actions';
+
+import {
+  ClearIndicator,
+  DropdownIndicator,
+  MultiValueContainer,
+  selectTheme,
+  customSelectStyles,
+  MenuList,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+
+import { FormFieldWrapper } from '@plone/volto/components';
+
+const messages = defineMessages({
+  select: {
+    id: 'Select…',
+    defaultMessage: 'Select…',
+  },
+  no_options: {
+    id: 'No options',
+    defaultMessage: 'No options',
+  },
+  type_text: {
+    id: 'Type text...',
+    defaultMessage: 'Type text...',
+  },
+});
+
+export const normalizeSingleSelectOption = (value, intl) => {
+  if (!value) return value;
+
+  if (Array.isArray(value)) {
+    // Assuming [token, title] pair.
+    if (value.length === 2)
+      return { value: value[0], label: value[1] || value[0], email: '' };
+
+    throw new Error(`Unknown value type of select widget: ${value}`);
+  }
+
+  const token = value.token ?? value.value ?? value.UID ?? 'no-value';
+  const label =
+    (value.title && value.title !== 'None' ? value.title : undefined) ??
+    value.label ??
+    value.token ??
+    intl.formatMessage(messages.no_value);
+  return {
+    value: token,
+    label,
+    email: value.email ? value.email : label || token,
+  };
+};
+
+export const normalizeChoices = (items, intl) =>
+  items.map((item) => normalizeSingleSelectOption(item, intl));
+
+/**
+ * Custom Option component with a tooltip
+ */
+const CustomOption = injectLazyLibs('reactSelect')((props) => {
+  const { Option } = props.reactSelect.components;
+  const color = props.isFocused && !props.isSelected ? '#b8c6c8' : '#007bc1';
+  const svgIcon =
+    props.isFocused || props.isSelected ? checkSVG : checkBlankSVG;
+
+  const { data, innerRef, innerProps } = props;
+  const { label, email } = data;
+
+  return (
+    <Option {...props}>
+      <div ref={innerRef} {...innerProps}>
+        <Popup
+          content={email}
+          position="top center"
+          trigger={
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: '0.5rem',
+              }}
+            >
+              <span>{label}</span>
+              <Icon name={svgIcon} size="20px" color={color} />
+            </div>
+          }
+        />
+      </div>
+    </Option>
+  );
+});
+
+/**
+ * UserSelectWidget component class.
+ * @class UserSelectWidget
+ * @extends Component
+ */
+class UserSelectWidget extends Component {
+  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,
+    choices: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    ),
+    items: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    widgetOptions: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    value: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+    ),
+    onChange: PropTypes.func.isRequired,
+    wrapped: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    placeholder: PropTypes.string,
+  };
+
+  static defaultProps = {
+    description: null,
+    required: false,
+    items: {
+      vocabulary: null,
+    },
+    widgetOptions: {
+      vocabulary: null,
+    },
+    error: [],
+    choices: [],
+    value: null,
+  };
+
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.state = {
+      searchLength: 0,
+      termsPairsCache: [],
+    };
+  }
+
+  componentDidMount() {
+    const { id, lang, value, choices } = this.props;
+    if (value && value?.length > 0) {
+      const tokensQuery = convertValueToVocabQuery(
+        normalizeValue(choices, value, this.props.intl),
+      );
+
+      this.props.getVocabularyTokenTitle({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        subrequest: `widget-${id}-${lang}`,
+        ...tokensQuery,
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const { value, choices } = this.props;
+    if (
+      this.state.termsPairsCache.length === 0 &&
+      value?.length > 0 &&
+      choices?.length > 0 &&
+      (value !== prevProps.value || choices !== prevProps.choices)
+    ) {
+      this.setState((state) => ({
+        termsPairsCache: [...state.termsPairsCache, ...choices],
+      }));
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.timeoutRef.current) {
+      clearTimeout(this.timeoutRef.current);
+    }
+  }
+
+  /**
+   * Handle the field change, store it in the local state and back to simple
+   * array of tokens for correct serialization
+   * @method handleChange
+   * @param {array} selectedOption The selected options (already aggregated).
+   * @returns {undefined}
+   */
+  handleChange(selectedOption) {
+    this.props.onChange(
+      this.props.id,
+      selectedOption ? selectedOption.map((item) => item.value) : null,
+    );
+    this.setState((state) => ({
+      termsPairsCache: [...state.termsPairsCache, ...selectedOption],
+    }));
+  }
+
+  timeoutRef = React.createRef();
+  // How many characters to hold off searching from. Search tarts at this plus one.
+  SEARCH_HOLDOFF = 2;
+
+  loadOptions = (query) => {
+    // Implement a debounce of 400ms and a min search of 3 chars
+    if (query.length > this.SEARCH_HOLDOFF) {
+      if (this.timeoutRef.current) clearTimeout(this.timeoutRef.current);
+      return new Promise((resolve) => {
+        this.timeoutRef.current = setTimeout(async () => {
+          const res = await this.fetchAvailableChoices(query);
+          resolve(res);
+        }, 400);
+      });
+    } else {
+      return Promise.resolve([]);
+    }
+  };
+
+  fetchAvailableChoices = async (query) => {
+    const resp = await this.props.getVocabulary({
+      vocabNameOrURL: this.props.vocabBaseUrl,
+      query,
+      size: -1,
+      subrequest: this.props.lang,
+    });
+    return normalizeChoices(resp.items || [], this.props.intl);
+  };
+
+  render() {
+    const selectedOption = normalizeValue(
+      this.state.termsPairsCache,
+      this.props.value,
+      this.props.intl,
+    );
+    const SelectAsync = this.props.reactSelectAsync.default;
+
+    return (
+      <FormFieldWrapper {...this.props}>
+        <SelectAsync
+          id={`field-${this.props.id}`}
+          key={this.props.id}
+          isDisabled={this.props.disabled || this.props.isDisabled}
+          className="react-select-container"
+          classNamePrefix="react-select"
+          cacheOptions
+          defaultOptions={[]}
+          loadOptions={this.loadOptions}
+          onInputChange={(search) =>
+            this.setState({ searchLength: search.length })
+          }
+          noOptionsMessage={() =>
+            this.props.intl.formatMessage(
+              this.state.searchLength > this.SEARCH_HOLDOFF
+                ? messages.no_options
+                : messages.type_text,
+            )
+          }
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{
+            ...(this.props.choices?.length > 25 && { MenuList }),
+            MultiValueContainer,
+            ClearIndicator,
+            DropdownIndicator,
+            Option: CustomOption,
+          }}
+          value={selectedOption || []}
+          placeholder={
+            this.props.placeholder ??
+            this.props.intl.formatMessage(messages.select)
+          }
+          onChange={this.handleChange}
+          isMulti
+        />
+      </FormFieldWrapper>
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  injectLazyLibs(['reactSelectAsync']),
+  connect(
+    (state, props) => {
+      const vocabBaseUrl =
+        getVocabFromHint(props) ||
+        getVocabFromField(props) ||
+        getVocabFromItems(props);
+
+      const vocabState =
+        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[
+          `widget-${props.id}-${state.intl.locale}`
+        ]?.items;
+
+      return props.items?.choices
+        ? { choices: props.items.choices, lang: state.intl.locale }
+        : vocabState
+        ? {
+            choices: vocabState,
+            vocabBaseUrl,
+            lang: state.intl.locale,
+          }
+        : { vocabBaseUrl, lang: state.intl.locale };
+    },
+    { getVocabulary, getVocabularyTokenTitle },
+  ),
+)(UserSelectWidget);

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

@@ -0,0 +1,255 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { waitFor, render, screen } from '@testing-library/react';
+
+import UserSelectWidget, {
+  normalizeChoices,
+  normalizeSingleSelectOption,
+} from './UserSelectWidget';
+
+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: [
+          { email: 'myemail@provider.com', title: 'My item', value: 'myitem' },
+        ],
+        itemsTotal: 1,
+      },
+    },
+  });
+
+  const props = {
+    getVocabulary: () => {
+      return Promise.resolve({
+        items: [
+          { email: 'foo@provider.com', token: 'foo', title: 'Foo' },
+          { email: 'bar@provider.com', token: 'bar', title: 'Bar' },
+          { email: 'foobar@provider.com', token: 'fooBar', title: 'FooBar' },
+        ],
+      });
+    },
+    widgetOptions: {
+      vocabulary: { '@id': 'plone.app.vocabularies.Keywords' },
+    },
+  };
+
+  const { container } = render(
+    <Provider store={store}>
+      <UserSelectWidget
+        {...props}
+        id="my-field"
+        title="My field"
+        fieldSet="default"
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+      />
+    </Provider>,
+  );
+
+  await waitFor(() => screen.getByText('My field'));
+  expect(container).toMatchSnapshot();
+});
+
+// Test normalization of choices
+test('normalizes vocabulary API response correctly', () => {
+  const mockData = [
+    { email: 'charlie@example.com', token: 'charlie', title: 'Charlie' },
+    { email: 'dana@example.com', token: 'dana', title: 'Dana' },
+  ];
+
+  const result = normalizeChoices(mockData, {
+    formatMessage: (msg) => msg.defaultMessage,
+  });
+
+  expect(result).toEqual([
+    { value: 'charlie', label: 'Charlie', email: 'charlie@example.com' },
+    { value: 'dana', label: 'Dana', email: 'dana@example.com' },
+  ]);
+});
+
+// Test missing email default handling
+test('defaults missing email to label or token', () => {
+  const mockData = [{ token: 'no-email', title: 'No Email User' }];
+
+  const result = normalizeChoices(mockData, {
+    formatMessage: (msg) => msg.defaultMessage,
+  });
+
+  expect(result).toEqual([
+    { value: 'no-email', label: 'No Email User', email: 'No Email User' },
+  ]);
+});
+
+// Test search logic (filters results based on query)
+test('filters choices based on search query', () => {
+  const mockData = [
+    { email: 'george@example.com', token: 'george', title: 'George' },
+    { email: 'hannah@example.com', token: 'hannah', title: 'Hannah' },
+  ];
+
+  const result = normalizeChoices(mockData, {
+    formatMessage: (msg) => msg.defaultMessage,
+  });
+
+  const filteredResults = result.filter((item) =>
+    item.label.toLowerCase().includes('geo'),
+  );
+
+  expect(filteredResults).toEqual([
+    { value: 'george', label: 'George', email: 'george@example.com' },
+  ]);
+});
+
+test('normalizes a valid object with email', () => {
+  const result = normalizeSingleSelectOption(
+    { token: 'user1', title: 'User One', email: 'user1@example.com' },
+    { formatMessage: (msg) => msg.defaultMessage },
+  );
+
+  expect(result).toEqual({
+    value: 'user1',
+    label: 'User One',
+    email: 'user1@example.com',
+  });
+});
+
+test('normalizes an object with missing email using label fallback', () => {
+  const result = normalizeSingleSelectOption(
+    { token: 'user2', title: 'User Two' },
+    { formatMessage: (msg) => msg.defaultMessage },
+  );
+
+  expect(result).toEqual({
+    value: 'user2',
+    label: 'User Two',
+    email: 'User Two',
+  });
+});
+
+test('normalizes an array [token, title]', () => {
+  const result = normalizeSingleSelectOption(['user3', 'User Three'], {
+    formatMessage: (msg) => msg.defaultMessage,
+  });
+
+  expect(result).toEqual({
+    value: 'user3',
+    label: 'User Three',
+    email: '',
+  });
+});
+
+test('throws an error for unexpected array format', () => {
+  expect(() => {
+    normalizeSingleSelectOption(['wrongFormat'], {
+      formatMessage: (msg) => msg.defaultMessage,
+    });
+  }).toThrow('Unknown value type of select widget: wrongFormat');
+});
+
+test('normalizes an object with only token and falls back correctly', () => {
+  const result = normalizeSingleSelectOption(
+    { token: 'user4' },
+    { formatMessage: (msg) => msg.defaultMessage },
+  );
+
+  expect(result).toEqual({
+    value: 'user4',
+    label: 'user4',
+    email: 'user4',
+  });
+});
+
+test('returns input when value is null or undefined', () => {
+  expect(normalizeSingleSelectOption(null, {})).toBe(null);
+  expect(normalizeSingleSelectOption(undefined, {})).toBe(undefined);
+});
+
+// Test normalizeSingleSelectOption with an object missing title
+test('normalizes an object with missing title and fallback to token', () => {
+  const result = normalizeSingleSelectOption(
+    { token: 'user5', email: 'user5@example.com' },
+    { formatMessage: (msg) => msg.defaultMessage },
+  );
+
+  expect(result).toEqual({
+    value: 'user5',
+    label: 'user5',
+    email: 'user5@example.com',
+  });
+});
+
+// Test normalizeChoices with an empty array
+test('handles empty array correctly in normalizeChoices', () => {
+  const result = normalizeChoices([], {
+    formatMessage: (msg) => msg.defaultMessage,
+  });
+
+  expect(result).toEqual([]);
+});
+
+// Test normalizeSingleSelectOption when title is "None"
+test('defaults label to token when title is "None"', () => {
+  const result = normalizeSingleSelectOption(
+    { token: 'user6', title: 'None', email: 'user6@example.com' },
+    { formatMessage: (msg) => msg.defaultMessage },
+  );
+
+  expect(result).toEqual({
+    value: 'user6',
+    label: 'user6',
+    email: 'user6@example.com',
+  });
+});
+
+// Test normalizeSingleSelectOption with both token and value fields
+test('handles object with both token and value fields', () => {
+  const result = normalizeSingleSelectOption(
+    { token: 'user7', value: 'actualValue', title: 'User Seven' },
+    { formatMessage: (msg) => msg.defaultMessage },
+  );
+
+  expect(result).toEqual({
+    value: 'user7',
+    label: 'User Seven',
+    email: 'User Seven',
+  });
+});
+
+// Test normalizeChoices with nested objects
+test('ignores extra nested data in normalizeChoices', () => {
+  const mockData = [
+    {
+      email: 'nested@example.com',
+      token: 'nestedUser',
+      title: 'Nested User',
+      extraField: { something: 'should be ignored' },
+    },
+  ];
+
+  const result = normalizeChoices(mockData, {
+    formatMessage: (msg) => msg.defaultMessage,
+  });
+
+  expect(result).toEqual([
+    {
+      value: 'nestedUser',
+      label: 'Nested User',
+      email: 'nested@example.com',
+    },
+  ]);
+});

package/src/customizations/volto/actions/vocabularies/vocabularies.js

@@ -0,0 +1,89 @@
+/**
+ * Vocabularies actions.
+ * @module actions/vocabularies/vocabularies
+ */
+
+import {
+  GET_VOCABULARY,
+  GET_VOCABULARY_TOKEN_TITLE,
+} from '@plone/volto/constants/ActionTypes';
+import { getVocabName } from '@plone/volto/helpers/Vocabularies/Vocabularies';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import qs from 'query-string';
+
+/**
+ * Get vocabulary given a URL (coming from a Schema) or from a vocabulary name.
+ * @function getVocabulary
+ * @param {string} vocabNameOrURL Full API URL of vocabulary or vocabulary name
+ * @param {string} query Only include results containing this string.
+ * @param {number} start Start of result batch.
+ * @param {number} b_size The size of the batch.
+ * @param {string} subrequest Name of the subrequest.
+ * @returns {Object} Get vocabulary action.
+ */
+export function getVocabulary({
+  vocabNameOrURL,
+  query = null,
+  start = 0,
+  size,
+  subrequest,
+}) {
+  const vocabPath = vocabNameOrURL.includes('/')
+    ? flattenToAppURL(vocabNameOrURL)
+    : `/@vocabularies/${vocabNameOrURL}`;
+
+  let queryString = `b_start=${start}${size ? '&b_size=' + size : ''}`;
+
+  if (query) {
+    queryString = `${queryString}&title=${query}`;
+  }
+  return {
+    type: GET_VOCABULARY,
+    vocabulary: vocabNameOrURL,
+    start,
+    request: {
+      op: 'get',
+      path: `${vocabPath}?${queryString}`,
+    },
+    subrequest,
+  };
+}
+
+/**
+ * Get the title value given a token from vocabulary given a vocabulary URL
+ * (coming from a Schema) or from a vocabulary name.
+ * @function getVocabularyTokenTitle
+ * @param {string} vocabNameOrURL Full API URL of vocabulary or vocabulary name
+ * @param {string} token Only include results containing this string.
+ * @returns {Object} Get vocabulary action.
+ */
+export function getVocabularyTokenTitle({
+  vocabNameOrURL,
+  token = null,
+  tokens = null,
+  subrequest,
+}) {
+  // In case we have a URL, we have to get the vocabulary name
+  const vocabulary = getVocabName(vocabNameOrURL);
+  const queryString = {
+    ...(token && { token }),
+    ...(tokens && { tokens }),
+  };
+
+  return {
+    type: GET_VOCABULARY_TOKEN_TITLE,
+    vocabulary: vocabNameOrURL,
+    token,
+    tokens,
+    subrequest,
+    request: {
+      op: 'get',
+      path: `/@vocabularies/${vocabulary}?b_size=-1&${qs.stringify(
+        queryString,
+        {
+          encode: false,
+        },
+      )}`,
+    },
+  };
+}

package/src/customizations/volto/actions/vocabularies/vocabularies.js.diff

@@ -0,0 +1,32 @@
+diff --git a/src/customizations/volto/actions/vocabularies/vocabularies.js b/src/customizations/volto/actions/vocabularies/vocabularies.js
+index 811aee2..ec60589 100644
+--- a/src/customizations/volto/actions/vocabularies/vocabularies.js
++++ b/src/customizations/volto/actions/vocabularies/vocabularies.js
+@@ -8,6 +8,7 @@ import {
+   GET_VOCABULARY_TOKEN_TITLE,
+ } from '@plone/volto/constants/ActionTypes';
+ import { getVocabName } from '@plone/volto/helpers/Vocabularies/Vocabularies';
++import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+ import qs from 'query-string';
+
+ /**
+@@ -27,7 +28,9 @@ export function getVocabulary({
+   size,
+   subrequest,
+ }) {
+-  const vocabulary = getVocabName(vocabNameOrURL);
++  const vocabPath = vocabNameOrURL.includes('/')
++    ? flattenToAppURL(vocabNameOrURL)
++    : `/@vocabularies/${vocabNameOrURL}`;
+
+   let queryString = `b_start=${start}${size ? '&b_size=' + size : ''}`;
+
+@@ -40,7 +43,7 @@ export function getVocabulary({
+     start,
+     request: {
+       op: 'get',
+-      path: `/@vocabularies/${vocabulary}?${queryString}`,
++      path: `${vocabPath}?${queryString}`,
+     },
+     subrequest,
+   };

package/src/customizations/volto/actions/vocabularies/vocabularies.js.md

@@ -0,0 +1,4 @@
+Backport vocabularies actions from Volto 19.x. See:
+
+- https://github.com/plone/volto/pull/6935
+- https://github.com/plone/volto/issues/3216

package/src/customizations/volto/actions/vocabularies/vocabularies.test.js

@@ -0,0 +1,57 @@
+import { getVocabulary } from './vocabularies';
+import { GET_VOCABULARY } from '@plone/volto/constants/ActionTypes';
+
+describe('Vocabularies actions', () => {
+  describe('getVocabulary', () => {
+    it('should create an action to get a vocabulary', () => {
+      const vocabNameOrURL = 'plone.app.vocabularies.Keywords';
+      const query = 'john';
+      const action = getVocabulary({ vocabNameOrURL, query });
+
+      expect(action.type).toEqual(GET_VOCABULARY);
+      expect(action.vocabulary).toEqual(vocabNameOrURL);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(
+        `/@vocabularies/${vocabNameOrURL}?b_start=0&title=${query}`,
+      );
+    });
+    it('should create an action to get a vocabulary if a URL is passed', () => {
+      const vocabNameOrURL =
+        'http://localhost:3000/@vocabularies/plone.app.vocabularies.Keywords';
+      const query = 'john';
+      const action = getVocabulary({ vocabNameOrURL, query });
+
+      expect(action.type).toEqual(GET_VOCABULARY);
+      expect(action.vocabulary).toEqual(vocabNameOrURL);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(
+        `/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&title=${query}`,
+      );
+    });
+    it('should create an action to get a vocabulary if a URL with path is passed', () => {
+      const vocabNameOrURL =
+        'http://localhost:3000/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords';
+      const query = 'john';
+      const action = getVocabulary({ vocabNameOrURL, query });
+
+      expect(action.type).toEqual(GET_VOCABULARY);
+      expect(action.vocabulary).toEqual(vocabNameOrURL);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(
+        `/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&title=${query}`,
+      );
+    });
+    it('should create an action to get a vocabulary if an b_size=-1 is passed', () => {
+      const vocabNameOrURL =
+        'http://localhost:3000/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords';
+      const action = getVocabulary({ vocabNameOrURL, size: -1 });
+
+      expect(action.type).toEqual(GET_VOCABULARY);
+      expect(action.vocabulary).toEqual(vocabNameOrURL);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(
+        `/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&b_size=-1`,
+      );
+    });
+  });
+});

package/src/customizations/volto/actions/vocabularies/vocabularies.test.js.diff

@@ -0,0 +1,45 @@
+diff --git a/src/customizations/volto/actions/vocabularies/vocabularies.test.js b/src/customizations/volto/actions/vocabularies/vocabularies.test.js
+index b7deafc..ca4fc8a 100644
+--- a/src/customizations/volto/actions/vocabularies/vocabularies.test.js
++++ b/src/customizations/volto/actions/vocabularies/vocabularies.test.js
+@@ -17,7 +17,7 @@ describe('Vocabularies actions', () => {
+     });
+     it('should create an action to get a vocabulary if a URL is passed', () => {
+       const vocabNameOrURL =
+-        'http://localhost:8080/@vocabularies/plone.app.vocabularies.Keywords';
++        'http://localhost:3000/@vocabularies/plone.app.vocabularies.Keywords';
+       const query = 'john';
+       const action = getVocabulary({ vocabNameOrURL, query });
+
+@@ -30,7 +30,7 @@ describe('Vocabularies actions', () => {
+     });
+     it('should create an action to get a vocabulary if a URL with path is passed', () => {
+       const vocabNameOrURL =
+-        'http://localhost:8080/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords';
++        'http://localhost:3000/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords';
+       const query = 'john';
+       const action = getVocabulary({ vocabNameOrURL, query });
+
+@@ -38,19 +38,19 @@ describe('Vocabularies actions', () => {
+       expect(action.vocabulary).toEqual(vocabNameOrURL);
+       expect(action.request.op).toEqual('get');
+       expect(action.request.path).toEqual(
+-        `/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&title=${query}`,
++        `/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&title=${query}`,
+       );
+     });
+     it('should create an action to get a vocabulary if an b_size=-1 is passed', () => {
+       const vocabNameOrURL =
+-        'http://localhost:8080/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords';
++        'http://localhost:3000/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords';
+       const action = getVocabulary({ vocabNameOrURL, size: -1 });
+
+       expect(action.type).toEqual(GET_VOCABULARY);
+       expect(action.vocabulary).toEqual(vocabNameOrURL);
+       expect(action.request.op).toEqual('get');
+       expect(action.request.path).toEqual(
+-        `/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&b_size=-1`,
++        `/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&b_size=-1`,
+       );
+     });
+   });

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

@@ -53,6 +53,7 @@ const View = ({ data, properties }) => {
                       )}
                       alt={properties.image_caption || ''}
                       responsive={true}
+                      loading="lazy"
                     />
                     <div
                       className={`copyright-wrapper ${

package/src/hocs/withRootNavigation.test.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk'; // ✅ Add redux-thunk middleware
+import { render } from '@testing-library/react';
+import withRootNavigation from './withRootNavigation';
+import { getNavigation } from '@plone/volto/actions';
+import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+// Mock dependencies
+jest.mock('@plone/volto/actions', () => ({
+  getNavigation: jest.fn(() => ({ type: 'GET_NAVIGATION' })), // ✅ Ensure it returns a plain object
+}));
+jest.mock('@plone/volto/helpers', () => ({
+  getBaseUrl: jest.fn(() => '/en'),
+  hasApiExpander: jest.fn(() => false),
+}));
+jest.mock('@plone/volto/registry', () => ({
+  settings: { navDepth: 2 },
+}));
+
+// ✅ Use redux-thunk middleware
+const mockStore = configureStore([thunk]); // Add thunk to support async actions
+
+const initialState = {
+  navigation: { items: [{ title: 'Home', url: '/' }] },
+  intl: { locale: 'en' },
+};
+
+const store = mockStore(initialState);
+
+// Mock Wrapped Component
+const MockComponent = (props) => {
+  return (
+    <div data-testid="wrapped-component">{JSON.stringify(props.items)}</div>
+  );
+};
+
+const WrappedComponent = withRootNavigation(MockComponent);
+
+describe('withRootNavigation HOC', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('calls getNavigation when API expander is not set', () => {
+    render(
+      <Provider store={store}>
+        <WrappedComponent />
+      </Provider>,
+    );
+
+    expect(getBaseUrl).toHaveBeenCalledWith('/en'); // Check base URL calculation
+    expect(hasApiExpander).toHaveBeenCalledWith('navigation', '/en'); // Ensure API expander is checked
+    expect(getNavigation).toHaveBeenCalledWith('/en', config.settings.navDepth); // Ensure getNavigation is dispatched
+  });
+
+  test('does not call getNavigation if API expander is already set', () => {
+    hasApiExpander.mockReturnValue(true); // Simulate that API expander is already set
+
+    render(
+      <Provider store={store}>
+        <WrappedComponent />
+      </Provider>,
+    );
+
+    expect(getNavigation).not.toHaveBeenCalled(); // Ensure getNavigation is NOT called
+  });
+});

package/src/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { v4 as uuid } from 'uuid';
 import { Icon } from '@plone/volto/components';
 import { default as TokenWidgetEdit } from '@plone/volto/components/manage/Widgets/TokenWidget';
-import SelectAutoCompleteWidget from '@plone/volto/components/manage/Widgets/SelectAutoComplete';
 import { serializeNodesToText } from '@plone/volto-slate/editor/render';
 import TableBlockEdit from '@plone/volto-slate/blocks/Table/TableBlockEdit';
 import TableBlockView from '@plone/volto-slate/blocks/Table/TableBlockView';
@@ -20,7 +19,10 @@ import { TopicsWidget } from '@eeacms/volto-eea-website-theme/components/theme/W
 import { DateWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/DateWidget';
 import { DatetimeWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/DatetimeWidget';
 import CreatableSelectWidget from '@eeacms/volto-eea-website-theme/components/theme/Widgets/CreatableSelectWidget';
+import UserSelectWidget from '@eeacms/volto-eea-website-theme/components/theme/Widgets/UserSelectWidget';
 import ImageViewWidget from '@eeacms/volto-eea-website-theme/components/theme/Widgets/ImageViewWidget';
+import CreatorsViewWidget from '@eeacms/volto-eea-website-theme/components/theme/Widgets/CreatorsViewWidget';
+import ContributorsViewWidget from '@eeacms/volto-eea-website-theme/components/theme/Widgets/ContributorsViewWidget';
 
 import Tag from '@eeacms/volto-eea-design-system/ui/Tag/Tag';
 
@@ -336,6 +338,7 @@ const applyConfig = (config) => {
             title: 'No. of columns',
             description: 'Choose the number of flex columns',
             choices: [
+              [1, 1],
               [2, 2],
               [3, 3],
               [4, 4],
@@ -371,9 +374,12 @@ const applyConfig = (config) => {
   config.widgets.views.id.topics = TopicsWidget;
   config.widgets.views.id.subjects = TokenWidget;
   config.widgets.views.widget.tags = TokenWidget;
+  config.widgets.views.id.creators = CreatorsViewWidget;
+  config.widgets.views.id.contributors = ContributorsViewWidget;
+  config.widgets.views.widget.contributors = ContributorsViewWidget;
+  config.widgets.views.widget.creators = CreatorsViewWidget;
   config.widgets.widget.creatable_select = CreatableSelectWidget;
-  config.widgets.vocabulary['plone.app.vocabularies.Users'] =
-    SelectAutoCompleteWidget;
+  config.widgets.vocabulary['plone.app.vocabularies.Users'] = UserSelectWidget;
 
   config.widgets.views.factory = {
     ...(config.widgets.views.factory || {}),

package/src/index.test.js

@@ -46,6 +46,12 @@ jest.mock('@plone/volto/components', () => ({
   Icon: 'MockedIcon',
 }));
 
+jest.mock('uuid', () => {
+  return {
+    v4: () => 'mock-uuid-' + Math.random().toString(36).substr(2, 9),
+  };
+});
+
 global.__SERVER__ = true;
 
 describe('applyConfig', () => {