@eeacms/volto-eea-website-theme 1.29.0 → 1.31.0

package/.eslintrc.js

@@ -48,12 +48,7 @@ const defaultConfig = {
     },
   },
   rules: {
-    'react/jsx-no-target-blank': [
-      'error',
-      {
-        allowReferrer: true,
-      },
-    ],
+    'react/jsx-no-target-blank': 'off',
   },
 };
 

package/CHANGELOG.md

@@ -4,7 +4,16 @@ 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.29.0](https://github.com/eea/volto-eea-website-theme/compare/1.28.3...1.29.0) - 7 March 2024
+### [1.31.0](https://github.com/eea/volto-eea-website-theme/compare/1.30.0...1.31.0) - 14 March 2024
+
+#### :rocket: New Features
+
+- feat: Put default alt as the rights field  than image title - refs #159551 [dobri1408 - [`4f0e60b`](https://github.com/eea/volto-eea-website-theme/commit/4f0e60b02ce1167d92de3b294e75d2577c892c85)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.31.0 [alin - [`36690f7`](https://github.com/eea/volto-eea-website-theme/commit/36690f75e4773e40f5ab4e4ce4b956b650df62b5)]
+### [1.30.0](https://github.com/eea/volto-eea-website-theme/compare/1.29.0...1.30.0) - 13 March 2024
 
 #### :rocket: New Features
 
@@ -21,6 +30,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Update package.json [ichim-david - [`4c2f794`](https://github.com/eea/volto-eea-website-theme/commit/4c2f794256098dff98aa4b78ba99be65709b1b9b)]
+- Fix export statement in reducers/index.js [David Ichim - [`bbaf5be`](https://github.com/eea/volto-eea-website-theme/commit/bbaf5be2e7cd24b6a8c5d694ee4030b6fafbd120)]
+- Lint fix, export of print should be made after import [David Ichim - [`2a670db`](https://github.com/eea/volto-eea-website-theme/commit/2a670db0a9bcb741ea24ea3ac98ba7267b6a83e1)]
 - test: TokenWidget.test.jsx and TopicsWidget.test.jsx cover more conditions [laszlocseh - [`dd154bb`](https://github.com/eea/volto-eea-website-theme/commit/dd154bb520237f458be563280cac1545eb381bdf)]
 - Bump version to 1.29.0 from 1.28.4 [Claudia Ifrim - [`7bc8eab`](https://github.com/eea/volto-eea-website-theme/commit/7bc8eabd4b0462fc5afc07ed131d074af642cc89)]
 - test: added TokenWidget.test.jsx and TopicsWidget.test.jsx [laszlocseh - [`f7292bb`](https://github.com/eea/volto-eea-website-theme/commit/f7292bb426591f758dcc7bc159b5dbd75b7afb36)]
@@ -28,6 +40,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - test: fix in Logo.test.jsx [laszlocseh - [`6d552f8`](https://github.com/eea/volto-eea-website-theme/commit/6d552f89d5aff6e47ef3032d4862a1bcbe364c01)]
 - test: add Logo.test.jsx [laszlocseh - [`752c562`](https://github.com/eea/volto-eea-website-theme/commit/752c5629840d906382858f088b97d33147684ca8)]
 - add isPrint missing files [laszlocseh - [`d995789`](https://github.com/eea/volto-eea-website-theme/commit/d995789f337a00455d45b5ec26de9c4c0c898ce6)]
+### [1.29.0](https://github.com/eea/volto-eea-website-theme/compare/1.28.3...1.29.0) - 7 March 2024
+
 ### [1.28.3](https://github.com/eea/volto-eea-website-theme/compare/1.28.2...1.28.3) - 5 March 2024
 
 #### :bug: Bug Fixes

package/package.json

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

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'] || '';
+  const href = data?.href?.[0]?.['@id'] ?? (data?.href || '');
   const { copyright, copyrightIcon, copyrightPosition } = data;
   // const [hovering, setHovering] = React.useState(false);
   const [viewLoaded, setViewLoaded] = React.useState(false);

package/src/customizations/volto/components/manage/Blocks/Search/SearchBlockEdit.jsx

@@ -0,0 +1,106 @@
+//this customization is used for fixing: in the search block, on edit sort on and reversed order doesn't work.
+//See here volto pr: https://github.com/plone/volto/pull/5262
+import React, { useEffect } from 'react';
+import { defineMessages } from 'react-intl';
+import { compose } from 'redux';
+
+import { SidebarPortal, BlockDataForm } from '@plone/volto/components';
+import { addExtensionFieldToSchema } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
+import { getBaseUrl } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+import { SearchBlockViewComponent } from '@plone/volto/components/manage/Blocks/Search/SearchBlockView';
+import Schema from '@plone/volto/components/manage/Blocks/Search/schema';
+import {
+  withSearch,
+  withQueryString,
+} from '@plone/volto/components/manage/Blocks/Search/hocs';
+import { cloneDeep } from 'lodash';
+
+const messages = defineMessages({
+  template: {
+    id: 'Results template',
+    defaultMessage: 'Results template',
+  },
+});
+
+const SearchBlockEdit = (props) => {
+  const {
+    block,
+    onChangeBlock,
+    data,
+    selected,
+    intl,
+    navRoot,
+    contentType,
+    onTriggerSearch,
+    querystring = {},
+  } = props;
+  const { sortable_indexes = {} } = querystring;
+
+  let schema = Schema({ data, intl });
+
+  schema = addExtensionFieldToSchema({
+    schema,
+    name: 'listingBodyTemplate',
+    items: config.blocks.blocksConfig.listing.variations,
+    intl,
+    title: { id: intl.formatMessage(messages.template) },
+  });
+  const listingVariations = config.blocks.blocksConfig?.listing?.variations;
+  let activeItem = listingVariations.find(
+    (item) => item.id === data.listingBodyTemplate,
+  );
+  const listingSchemaEnhancer = activeItem?.schemaEnhancer;
+  if (listingSchemaEnhancer)
+    schema = listingSchemaEnhancer({
+      schema: cloneDeep(schema),
+      data,
+      intl,
+    });
+  schema.properties.sortOnOptions.items = {
+    choices: Object.keys(sortable_indexes).map((k) => [
+      k,
+      sortable_indexes[k].title,
+    ]),
+  };
+
+  const { query = {} } = data || {};
+  // We don't need deep compare here, as this is just json serializable data.
+  const deepQuery = JSON.stringify(query);
+  useEffect(() => {
+    onTriggerSearch(
+      '',
+      data?.facets,
+      data?.query?.sort_on,
+      data?.query?.sort_order,
+    );
+  }, [deepQuery, onTriggerSearch, data]);
+
+  return (
+    <>
+      <SearchBlockViewComponent
+        {...props}
+        path={getBaseUrl(props.pathname)}
+        mode="edit"
+      />
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          schema={schema}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={onChangeBlock}
+          formData={data}
+          navRoot={navRoot}
+          contentType={contentType}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default compose(withQueryString, withSearch())(SearchBlockEdit);

package/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -0,0 +1,479 @@
+//this customization is used for fixing: in the search block, on edit sort on and reversed order doesn't work.
+//See here volto pr: https://github.com/plone/volto/pull/5262
+import React from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'query-string';
+import { useLocation, useHistory } from 'react-router-dom';
+
+import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
+import config from '@plone/volto/registry';
+import { usePrevious } from '@plone/volto/helpers';
+import { isEqual } from 'lodash';
+
+function getDisplayName(WrappedComponent) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+const SEARCH_ENDPOINT_FIELDS = [
+  'SearchableText',
+  'b_size',
+  'limit',
+  'sort_on',
+  'sort_order',
+];
+
+const PAQO = 'plone.app.querystring.operation';
+
+/**
+ * Based on URL state, gets an initial internal state for the search
+ *
+ * @function getInitialState
+ *
+ */
+function getInitialState(
+  data,
+  facets,
+  urlSearchText,
+  id,
+  sortOnParam,
+  sortOrderParam,
+) {
+  const {
+    types: facetWidgetTypes,
+  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+  const facetSettings = data?.facets || [];
+
+  return {
+    query: [
+      ...(data.query?.query || []),
+      ...(facetSettings || [])
+        .map((facet) => {
+          if (!facet?.field) return null;
+
+          const { valueToQuery } = resolveExtension(
+            'type',
+            facetWidgetTypes,
+            facet,
+          );
+
+          const name = facet.field.value;
+          const value = facets[name];
+
+          return valueToQuery({ value, facet });
+        })
+        .filter((f) => !!f),
+      ...(urlSearchText
+        ? [
+            {
+              i: 'SearchableText',
+              o: 'plone.app.querystring.operation.string.contains',
+              v: urlSearchText,
+            },
+          ]
+        : []),
+    ],
+    sort_on: sortOnParam || data.query?.sort_on,
+    sort_order: sortOrderParam || data.query?.sort_order,
+    b_size: data.query?.b_size,
+    limit: data.query?.limit,
+    block: id,
+  };
+}
+
+/**
+ * "Normalizes" the search state to something that's serializable
+ * (for querying) and used to compute data for the ListingBody
+ *
+ * @function normalizeState
+ *
+ */
+function normalizeState({
+  query, // base query
+  facets, // facet values
+  id, // block id
+  searchText, // SearchableText
+  sortOn,
+  sortOrder,
+  facetSettings, // data.facets extracted from block data
+}) {
+  const {
+    types: facetWidgetTypes,
+  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+
+  // Here, we are removing the QueryString of the Listing ones, which is present in the Facet
+  // because we already initialize the facet with those values.
+  const configuredFacets = facetSettings
+    ? facetSettings.map((facet) => facet?.field?.value)
+    : [];
+
+  let copyOfQuery = query.query ? [...query.query] : [];
+
+  const queryWithoutFacet = copyOfQuery.filter((query) => {
+    return !configuredFacets.includes(query.i);
+  });
+
+  const params = {
+    query: [
+      ...(queryWithoutFacet || []),
+      ...(facetSettings || []).map((facet) => {
+        if (!facet?.field) return null;
+
+        const { valueToQuery } = resolveExtension(
+          'type',
+          facetWidgetTypes,
+          facet,
+        );
+
+        const name = facet.field.value;
+        const value = facets[name];
+
+        return valueToQuery({ value, facet });
+      }),
+    ].filter((o) => !!o),
+    sort_on: sortOn || query.sort_on,
+    sort_order: sortOrder || query.sort_order,
+    b_size: query.b_size,
+    limit: query.limit,
+    block: id,
+  };
+
+  // Note Ideally the searchtext functionality should be restructured as being just
+  // another facet. But right now it's the same. This means that if a searchText
+  // is provided, it will override the SearchableText facet.
+  // If there is no searchText, the SearchableText in the query remains in effect.
+  // TODO eventually the searchText should be a distinct facet from SearchableText, and
+  // the two conditions could be combined, in comparison to the current state, when
+  // one overrides the other.
+  if (searchText) {
+    params.query = params.query.reduce(
+      // Remove SearchableText from query
+      (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
+      [],
+    );
+    params.query.push({
+      i: 'SearchableText',
+      o: 'plone.app.querystring.operation.string.contains',
+      v: searchText,
+    });
+  }
+
+  return params;
+}
+
+const getSearchFields = (searchData) => {
+  return Object.assign(
+    {},
+    ...SEARCH_ENDPOINT_FIELDS.map((k) => {
+      return searchData[k] ? { [k]: searchData[k] } : {};
+    }),
+    searchData.query ? { query: serializeQuery(searchData['query']) } : {},
+  );
+};
+
+/**
+ * A hook that will mirror the search block state to a hash location
+ */
+const useHashState = () => {
+  const location = useLocation();
+  const history = useHistory();
+
+  /**
+   * Required to maintain parameter compatibility.
+    With this we will maintain support for receiving hash (#) and search (?) type parameters.
+  */
+  const oldState = React.useMemo(() => {
+    return {
+      ...qs.parse(location.search),
+      ...qs.parse(location.hash),
+    };
+  }, [location.hash, location.search]);
+
+  // This creates a shallow copy. Why is this needed?
+  const current = Object.assign(
+    {},
+    ...Array.from(Object.keys(oldState)).map((k) => ({ [k]: oldState[k] })),
+  );
+
+  const setSearchData = React.useCallback(
+    (searchData) => {
+      const newParams = qs.parse(location.search);
+
+      let changed = false;
+
+      Object.keys(searchData)
+        .sort()
+        .forEach((k) => {
+          if (searchData[k]) {
+            newParams[k] = searchData[k];
+            if (oldState[k] !== searchData[k]) {
+              changed = true;
+            }
+          }
+        });
+
+      if (changed) {
+        history.push({
+          search: qs.stringify(newParams),
+        });
+      }
+    },
+    [history, oldState, location.search],
+  );
+
+  return [current, setSearchData];
+};
+
+/**
+ * A hook to make it possible to switch disable mirroring the search block
+ * state to the window location. When using the internal state we "start from
+ * scratch", as it's intended to be used in the edit page.
+ */
+const useSearchBlockState = (uniqueId, isEditMode) => {
+  const [hashState, setHashState] = useHashState();
+  const [internalState, setInternalState] = React.useState({});
+
+  return isEditMode
+    ? [internalState, setInternalState]
+    : [hashState, setHashState];
+};
+
+// Simple compress/decompress the state in URL by replacing the lengthy string
+const deserializeQuery = (q) => {
+  return JSON.parse(q)?.map((kvp) => ({
+    ...kvp,
+    o: kvp.o.replace(/^paqo/, PAQO),
+  }));
+};
+const serializeQuery = (q) => {
+  return JSON.stringify(
+    q?.map((kvp) => ({ ...kvp, o: kvp.o.replace(PAQO, 'paqo') })),
+  );
+};
+
+const withSearch = (options) => (WrappedComponent) => {
+  const { inputDelay = 1000 } = options || {};
+
+  function WithSearch(props) {
+    const { data, id, editable = false } = props;
+
+    const [locationSearchData, setLocationSearchData] = useSearchBlockState(
+      id,
+      editable,
+    );
+
+    // TODO: Improve the hook dependencies out of the scope of https://github.com/plone/volto/pull/4662
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const urlQuery = locationSearchData.query
+      ? deserializeQuery(locationSearchData.query)
+      : [];
+    const urlSearchText =
+      locationSearchData.SearchableText ||
+      urlQuery.find(({ i }) => i === 'SearchableText')?.v ||
+      '';
+
+    // TODO: refactor, should use only useLocationStateManager()!!!
+    const [searchText, setSearchText] = React.useState(urlSearchText);
+    // TODO: Improve the hook dependencies out of the scope of https://github.com/plone/volto/pull/4662
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const configuredFacets =
+      data.facets?.map((facet) => facet?.field?.value) || [];
+
+    // Here we are getting the initial value of the facet if Listing Query contains the same criteria as
+    // facet.
+    const queryData = data?.query?.query
+      ? deserializeQuery(JSON.stringify(data?.query?.query))
+      : [];
+
+    let intializeFacetWithQueryValue = [];
+
+    for (let value of configuredFacets) {
+      const queryString = queryData.find((item) => item.i === value);
+      if (queryString) {
+        intializeFacetWithQueryValue = [
+          ...intializeFacetWithQueryValue,
+          { [queryString.i]: queryString.v },
+        ];
+      }
+    }
+
+    const multiFacets = data.facets
+      ?.filter((facet) => facet?.multiple)
+      .map((facet) => facet?.field?.value);
+    const [facets, setFacets] = React.useState(
+      Object.assign(
+        {},
+        ...urlQuery.map(({ i, v }) => ({ [i]: v })),
+        // TODO: the 'o' should be kept. This would be a major refactoring of the facets
+        ...intializeFacetWithQueryValue,
+        // support for simple filters like ?Subject=something
+        // TODO: since the move to hash params this is no longer working.
+        // We'd have to treat the location.search and manage it just like the
+        // hash, to support it. We can read it, but we'd have to reset it as
+        // well, so at that point what's the difference to the hash?
+        ...configuredFacets.map((f) =>
+          locationSearchData[f]
+            ? {
+                [f]:
+                  multiFacets.indexOf(f) > -1
+                    ? [locationSearchData[f]]
+                    : locationSearchData[f],
+              }
+            : {},
+        ),
+      ),
+    );
+    const previousUrlQuery = usePrevious(urlQuery);
+
+    // During first render the previousUrlQuery is undefined and urlQuery
+    // is empty so it ressetting the facet when you are navigating but during reload we have urlQuery and we need
+    // to set the facet at first render.
+    const preventOverrideOfFacetState =
+      previousUrlQuery === undefined && urlQuery.length === 0;
+
+    React.useEffect(() => {
+      if (
+        !isEqual(urlQuery, previousUrlQuery) &&
+        !preventOverrideOfFacetState
+      ) {
+        setFacets(
+          Object.assign(
+            {},
+            ...urlQuery.map(({ i, v }) => ({ [i]: v })), // TODO: the 'o' should be kept. This would be a major refactoring of the facets
+
+            // support for simple filters like ?Subject=something
+            // TODO: since the move to hash params this is no longer working.
+            // We'd have to treat the location.search and manage it just like the
+            // hash, to support it. We can read it, but we'd have to reset it as
+            // well, so at that point what's the difference to the hash?
+            ...configuredFacets.map((f) =>
+              locationSearchData[f]
+                ? {
+                    [f]:
+                      multiFacets.indexOf(f) > -1
+                        ? [locationSearchData[f]]
+                        : locationSearchData[f],
+                  }
+                : {},
+            ),
+          ),
+        );
+      }
+    }, [
+      urlQuery,
+      configuredFacets,
+      locationSearchData,
+      multiFacets,
+      previousUrlQuery,
+      preventOverrideOfFacetState,
+    ]);
+
+    const [sortOn, setSortOn] = React.useState(data?.query?.sort_on);
+    const [sortOrder, setSortOrder] = React.useState(data?.query?.sort_order);
+
+    const [searchData, setSearchData] = React.useState(
+      getInitialState(data, facets, urlSearchText, id),
+    );
+
+    const deepFacets = JSON.stringify(facets);
+    const deepData = JSON.stringify(data);
+    React.useEffect(() => {
+      setSearchData(
+        getInitialState(
+          JSON.parse(deepData),
+          JSON.parse(deepFacets),
+          urlSearchText,
+          id,
+          sortOn,
+          sortOrder,
+        ),
+      );
+    }, [deepData, deepFacets, urlSearchText, id, sortOn, sortOrder]);
+
+    const timeoutRef = React.useRef();
+    const facetSettings = data?.facets;
+
+    const deepQuery = JSON.stringify(data.query);
+    const onTriggerSearch = React.useCallback(
+      (
+        toSearchText = undefined,
+        toSearchFacets = undefined,
+        toSortOn = undefined,
+        toSortOrder = undefined,
+      ) => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(
+          () => {
+            const newSearchData = normalizeState({
+              id,
+              query: data.query || {},
+              facets: toSearchFacets || facets,
+              searchText: toSearchText ? toSearchText.trim() : '',
+              sortOn: toSortOn || undefined,
+              sortOrder: toSortOrder || sortOrder,
+              facetSettings,
+            });
+            if (toSearchFacets) setFacets(toSearchFacets);
+            if (toSortOn) setSortOn(toSortOn || undefined);
+            if (toSortOrder) setSortOrder(toSortOrder);
+            setSearchData(newSearchData);
+            setLocationSearchData(getSearchFields(newSearchData));
+          },
+          toSearchFacets ? inputDelay / 3 : inputDelay,
+        );
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [
+        // Use deep comparison of data.query
+        deepQuery,
+        facets,
+        id,
+        setLocationSearchData,
+        searchText,
+        sortOn,
+        sortOrder,
+        facetSettings,
+      ],
+    );
+
+    const removeSearchQuery = () => {
+      let newSearchData = { ...searchData };
+      newSearchData.query = searchData.query.reduce(
+        // Remove SearchableText from query
+        (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
+        [],
+      );
+      setSearchData(newSearchData);
+      setLocationSearchData(getSearchFields(newSearchData));
+    };
+
+    const querystringResults = useSelector(
+      (state) => state.querystringsearch.subrequests,
+    );
+    const totalItems =
+      querystringResults[id]?.total || querystringResults[id]?.items?.length;
+
+    return (
+      <WrappedComponent
+        {...props}
+        searchData={searchData}
+        facets={facets}
+        setFacets={setFacets}
+        setSortOn={setSortOn}
+        setSortOrder={setSortOrder}
+        sortOn={sortOn}
+        sortOrder={sortOrder}
+        searchedText={urlSearchText}
+        searchText={searchText}
+        removeSearchQuery={removeSearchQuery}
+        setSearchText={setSearchText}
+        onTriggerSearch={onTriggerSearch}
+        totalItems={totalItems}
+      />
+    );
+  }
+  WithSearch.displayName = `WithSearch(${getDisplayName(WrappedComponent)})`;
+
+  return WithSearch;
+};
+
+export default withSearch;

package/src/customizations/volto/components/manage/Sidebar/ObjectBrowserBody.jsx

@@ -0,0 +1,511 @@
+/* this customization is used to put default alt as the rights field
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import { Input, Segment, Breadcrumb } from 'semantic-ui-react';
+
+import { join } from 'lodash';
+
+// These absolute imports (without using the corresponding centralized index.js) are required
+// to cut circular import problems, this file should never use them. This is because of
+// the very nature of the functionality of the component and its relationship with others
+import { searchContent } from '@plone/volto/actions/search/search';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url';
+import config from '@plone/volto/registry';
+
+import backSVG from '@plone/volto/icons/back.svg';
+import folderSVG from '@plone/volto/icons/folder.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import searchSVG from '@plone/volto/icons/zoom.svg';
+import linkSVG from '@plone/volto/icons/link.svg';
+import homeSVG from '@plone/volto/icons/home.svg';
+
+import ObjectBrowserNav from '@plone/volto/components/manage/Sidebar/ObjectBrowserNav';
+
+const messages = defineMessages({
+  SearchInputPlaceholder: {
+    id: 'Search content',
+    defaultMessage: 'Search content',
+  },
+  SelectedItems: {
+    id: 'Selected items',
+    defaultMessage: 'Selected items',
+  },
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  search: {
+    id: 'Search SVG',
+    defaultMessage: 'Search SVG',
+  },
+  of: { id: 'Selected items - x of y', defaultMessage: 'of' },
+});
+
+function getParentURL(url) {
+  return flattenToAppURL(`${join(url.split('/').slice(0, -1), '/')}`) || '/';
+}
+
+/**
+ * ObjectBrowserBody container class.
+ * @class ObjectBrowserBody
+ * @extends Component
+ */
+class ObjectBrowserBody extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    block: PropTypes.string.isRequired,
+    mode: PropTypes.string.isRequired,
+    data: PropTypes.any.isRequired,
+    searchSubrequests: PropTypes.objectOf(PropTypes.any).isRequired,
+    searchContent: PropTypes.func.isRequired,
+    closeObjectBrowser: PropTypes.func.isRequired,
+    onChangeBlock: PropTypes.func.isRequired,
+    onSelectItem: PropTypes.func,
+    dataName: PropTypes.string,
+    maximumSelectionSize: PropTypes.number,
+    contextURL: PropTypes.string,
+    searchableTypes: PropTypes.arrayOf(PropTypes.string),
+  };
+
+  /**
+   * Default properties.
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    image: '',
+    href: '',
+    onSelectItem: null,
+    dataName: null,
+    selectableTypes: [],
+    searchableTypes: null,
+    maximumSelectionSize: null,
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs WysiwygEditor
+   */
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentFolder:
+        this.props.mode === 'multiple' ? '/' : this.props.contextURL || '/',
+      currentImageFolder:
+        this.props.mode === 'multiple'
+          ? '/'
+          : this.props.mode === 'image' && this.props.data?.url
+          ? getParentURL(this.props.data.url)
+          : '/',
+      currentLinkFolder:
+        this.props.mode === 'multiple'
+          ? '/'
+          : this.props.mode === 'link' && this.props.data?.href
+          ? getParentURL(this.props.data.href)
+          : '/',
+      parentFolder: '',
+      selectedImage:
+        this.props.mode === 'multiple'
+          ? ''
+          : this.props.mode === 'image' && this.props.data?.url
+          ? flattenToAppURL(this.props.data.url)
+          : '',
+      selectedHref:
+        this.props.mode === 'multiple'
+          ? ''
+          : this.props.mode === 'link' && this.props.data?.href
+          ? flattenToAppURL(this.props.data.href)
+          : '',
+      showSearchInput: false,
+      // In image mode, the searchable types default to the image types which
+      // can be overridden with the property if specified.
+      searchableTypes:
+        this.props.mode === 'image'
+          ? this.props.searchableTypes || config.settings.imageObjects
+          : this.props.searchableTypes,
+    };
+    this.searchInputRef = React.createRef();
+  }
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.initialSearch(this.props.mode);
+  }
+
+  initialSearch = (mode) => {
+    const currentSelected =
+      mode === 'multiple'
+        ? ''
+        : mode === 'image'
+        ? this.state.selectedImage
+        : this.state.selectedHref;
+    if (currentSelected && isInternalURL(currentSelected)) {
+      this.props.searchContent(
+        getParentURL(currentSelected),
+        {
+          'path.depth': 1,
+          sort_on: 'getObjPositionInParent',
+          metadata_fields: '_all',
+          b_size: 1000,
+        },
+        `${this.props.block}-${mode}`,
+      );
+    } else {
+      this.props.searchContent(
+        this.state.currentFolder,
+        {
+          'path.depth': 1,
+          sort_on: 'getObjPositionInParent',
+          metadata_fields: '_all',
+          b_size: 1000,
+        },
+        `${this.props.block}-${mode}`,
+      );
+    }
+  };
+
+  navigateTo = (id) => {
+    this.props.searchContent(
+      id,
+      {
+        'path.depth': 1,
+        sort_on: 'getObjPositionInParent',
+        metadata_fields: '_all',
+        b_size: 1000,
+      },
+      `${this.props.block}-${this.props.mode}`,
+    );
+    const parent = `${join(id.split('/').slice(0, -1), '/')}` || '/';
+    this.setState(() => ({
+      parentFolder: parent,
+      currentFolder: id || '/',
+    }));
+  };
+
+  toggleSearchInput = () =>
+    this.setState(
+      (prevState) => ({
+        showSearchInput: !prevState.showSearchInput,
+      }),
+      () => {
+        if (this.searchInputRef?.current) this.searchInputRef.current.focus();
+      },
+    );
+
+  onSearch = (e) => {
+    const text = flattenToAppURL(e.target.value);
+    if (text.startsWith('/')) {
+      this.setState({ currentFolder: text });
+      this.props.searchContent(
+        text,
+        {
+          'path.depth': 1,
+          sort_on: 'getObjPositionInParent',
+          metadata_fields: '_all',
+          portal_type: this.state.searchableTypes,
+        },
+        `${this.props.block}-${this.props.mode}`,
+      );
+    } else {
+      text.length > 2
+        ? this.props.searchContent(
+            '/',
+            {
+              SearchableText: `${text}*`,
+              metadata_fields: '_all',
+              portal_type: this.state.searchableTypes,
+            },
+            `${this.props.block}-${this.props.mode}`,
+          )
+        : this.props.searchContent(
+            '/',
+            {
+              'path.depth': 1,
+              sort_on: 'getObjPositionInParent',
+              metadata_fields: '_all',
+              portal_type: this.state.searchableTypes,
+            },
+            `${this.props.block}-${this.props.mode}`,
+          );
+    }
+  };
+
+  onSelectItem = (item) => {
+    const url = item['@id'];
+    const { block, data, mode, dataName, onChangeBlock } = this.props;
+
+    const updateState = (mode) => {
+      switch (mode) {
+        case 'image':
+          this.setState({
+            selectedImage: url,
+            currentImageFolder: getParentURL(url),
+          });
+          break;
+        case 'link':
+          this.setState({
+            selectedHref: url,
+            currentLinkFolder: getParentURL(url),
+          });
+          break;
+        default:
+          break;
+      }
+    };
+
+    if (dataName) {
+      onChangeBlock(block, {
+        ...data,
+        [dataName]: url,
+      });
+    } else if (this.props.onSelectItem) {
+      this.props.onSelectItem(url, item);
+    } else if (mode === 'image') {
+      onChangeBlock(block, {
+        ...data,
+        url: flattenToAppURL(item.getURL),
+        alt: item.title || item.description || '',
+        copyright: item.rights || '',
+      });
+    } else if (mode === 'link') {
+      onChangeBlock(block, {
+        ...data,
+        href: flattenToAppURL(url),
+      });
+    }
+    updateState(mode);
+  };
+
+  onChangeBlockData = (key, value) => {
+    this.props.onChangeBlock(this.props.block, {
+      ...this.props.data,
+      [key]: value,
+    });
+  };
+
+  isSelectable = (item) => {
+    return this.props.selectableTypes.length > 0
+      ? this.props.selectableTypes.indexOf(item['@type']) >= 0
+      : true;
+  };
+
+  handleClickOnItem = (item) => {
+    if (this.props.mode === 'image') {
+      if (item.is_folderish) {
+        this.navigateTo(item['@id']);
+      }
+      if (config.settings.imageObjects.includes(item['@type'])) {
+        this.onSelectItem(item);
+      }
+    } else {
+      if (this.isSelectable(item)) {
+        if (
+          !this.props.maximumSelectionSize ||
+          this.props.mode === 'multiple' ||
+          !this.props.data ||
+          this.props.data.length < this.props.maximumSelectionSize
+        ) {
+          this.onSelectItem(item);
+          let length = this.props.data ? this.props.data.length : 0;
+
+          let stopSelecting =
+            this.props.mode !== 'multiple' ||
+            (this.props.maximumSelectionSize > 0 &&
+              length + 1 >= this.props.maximumSelectionSize);
+
+          if (stopSelecting) {
+            this.props.closeObjectBrowser();
+          }
+        } else {
+          this.props.closeObjectBrowser();
+        }
+      } else {
+        this.navigateTo(item['@id']);
+      }
+    }
+  };
+
+  handleDoubleClickOnItem = (item) => {
+    if (this.props.mode === 'image') {
+      if (item.is_folderish) {
+        this.navigateTo(item['@id']);
+      }
+      if (config.settings.imageObjects.includes(item['@type'])) {
+        this.onSelectItem(item);
+        this.props.closeObjectBrowser();
+      }
+    } else {
+      if (this.isSelectable(item)) {
+        if (this.props.data.length < this.props.maximumSelectionSize) {
+          this.onSelectItem(item);
+        }
+        this.props.closeObjectBrowser();
+      } else {
+        this.navigateTo(item['@id']);
+      }
+    }
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    return (
+      <Segment.Group raised>
+        <header className="header pulled">
+          <div className="vertical divider" />
+          {this.state.currentFolder === '/' ? (
+            <>
+              {this.props.mode === 'image' ? (
+                <Icon name={folderSVG} size="24px" />
+              ) : (
+                <Icon name={linkSVG} size="24px" />
+              )}
+            </>
+          ) : (
+            <button
+              aria-label={this.props.intl.formatMessage(messages.back)}
+              onClick={() => this.navigateTo(this.state.parentFolder)}
+            >
+              <Icon name={backSVG} size="24px" />
+            </button>
+          )}
+          {this.state.showSearchInput ? (
+            <Input
+              className="search"
+              ref={this.searchInputRef}
+              onChange={this.onSearch}
+              placeholder={this.props.intl.formatMessage(
+                messages.SearchInputPlaceholder,
+              )}
+            />
+          ) : this.props.mode === 'image' ? (
+            <h2>
+              <FormattedMessage
+                id="Choose Image"
+                defaultMessage="Choose Image"
+              />
+            </h2>
+          ) : (
+            <h2>
+              <FormattedMessage
+                id="Choose Target"
+                defaultMessage="Choose Target"
+              />
+            </h2>
+          )}
+
+          <button
+            aria-label={this.props.intl.formatMessage(messages.search)}
+            onClick={this.toggleSearchInput}
+          >
+            <Icon name={searchSVG} size="24px" />
+          </button>
+          <button className="clearSVG" onClick={this.props.closeObjectBrowser}>
+            <Icon name={clearSVG} size="24px" />
+          </button>
+        </header>
+        <Segment secondary className="breadcrumbs" vertical>
+          <Breadcrumb>
+            {this.state.currentFolder !== '/' ? (
+              this.state.currentFolder.split('/').map((item, index, items) => {
+                return (
+                  <React.Fragment key={`divider-${item}-${index}`}>
+                    {index === 0 ? (
+                      <Breadcrumb.Section onClick={() => this.navigateTo('/')}>
+                        <Icon
+                          className="home-icon"
+                          name={homeSVG}
+                          size="18px"
+                        />
+                      </Breadcrumb.Section>
+                    ) : (
+                      <>
+                        <Breadcrumb.Divider key={`divider-${item.url}`} />
+                        <Breadcrumb.Section
+                          onClick={() =>
+                            this.navigateTo(items.slice(0, index + 1).join('/'))
+                          }
+                        >
+                          {item}
+                        </Breadcrumb.Section>
+                      </>
+                    )}
+                  </React.Fragment>
+                );
+              })
+            ) : (
+              <Breadcrumb.Section onClick={() => this.navigateTo('/')}>
+                <Icon className="home-icon" name={homeSVG} size="18px" />
+              </Breadcrumb.Section>
+            )}
+          </Breadcrumb>
+        </Segment>
+        {this.props.mode === 'multiple' && (
+          <Segment className="infos">
+            {this.props.intl.formatMessage(messages.SelectedItems)}:{' '}
+            {this.props.data?.length}
+            {this.props.maximumSelectionSize > 0 && (
+              <>
+                {' '}
+                {this.props.intl.formatMessage(messages.of)}{' '}
+                {this.props.maximumSelectionSize}
+              </>
+            )}
+          </Segment>
+        )}
+        <ObjectBrowserNav
+          currentSearchResults={
+            this.props.searchSubrequests[
+              `${this.props.block}-${this.props.mode}`
+            ]
+          }
+          selected={
+            this.props.mode === 'multiple'
+              ? this.props.data
+              : [
+                  {
+                    '@id':
+                      this.props.mode === 'image'
+                        ? this.state.selectedImage
+                        : this.state.selectedHref,
+                  },
+                ]
+          }
+          handleClickOnItem={this.handleClickOnItem}
+          handleDoubleClickOnItem={this.handleDoubleClickOnItem}
+          mode={this.props.mode}
+          navigateTo={this.navigateTo}
+          isSelectable={this.isSelectable}
+        />
+      </Segment.Group>
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  connect(
+    (state) => ({
+      searchSubrequests: state.search.subrequests,
+    }),
+    { searchContent },
+  ),
+)(ObjectBrowserBody);

package/src/customizations/volto/components/theme/EventDetails/EventDetails.jsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Segment, Header, List } from 'semantic-ui-react';
+import {
+  When,
+  Recurrence,
+} from '@plone/volto/components/theme/View/EventDatesInfo';
+import { Icon } from '@plone/volto/components';
+import { expandToBackendURL } from '@plone/volto/helpers';
+
+import calendarSVG from '@plone/volto/icons/calendar.svg';
+
+const messages = defineMessages({
+  what: {
+    id: 'event_what',
+    defaultMessage: 'What',
+  },
+  when: {
+    id: 'event_when',
+    defaultMessage: 'When',
+  },
+  allDates: {
+    id: 'event_alldates',
+    defaultMessage: 'All dates',
+  },
+  downloadEvent: {
+    id: 'Download Event',
+    defaultMessage: 'Download Event',
+  },
+  where: {
+    id: 'event_where',
+    defaultMessage: 'Where',
+  },
+  contactName: {
+    id: 'event_contactname',
+    defaultMessage: 'Contact Name',
+  },
+  contactPhone: {
+    id: 'event_contactphone',
+    defaultMessage: 'Contact Phone',
+  },
+  attendees: {
+    id: 'event_attendees',
+    defaultMessage: 'Attendees',
+  },
+  website: {
+    id: 'event_website',
+    defaultMessage: 'Website',
+  },
+  visitWebsite: {
+    id: 'visit_external_website',
+    defaultMessage: 'Visit external website',
+  },
+});
+
+const EventDetails = ({ content, display_as = 'aside' }) => {
+  const intl = useIntl();
+  return (
+    <Segment
+      as={display_as}
+      {...(display_as === 'aside' ? { floated: 'right' } : {})}
+    >
+      {content.subjects?.length > 0 && (
+        <>
+          <Header dividing sub>
+            {intl.formatMessage(messages.what)}
+          </Header>
+          <List items={content.subjects} />
+        </>
+      )}
+      <Header dividing sub>
+        {intl.formatMessage(messages.when)}
+      </Header>
+      <When
+        start={content.start}
+        end={content.end}
+        whole_day={content.whole_day}
+        open_end={content.open_end}
+      />
+      {content.recurrence && (
+        <>
+          <Header dividing sub>
+            {intl.formatMessage(messages.allDates)}
+          </Header>
+          <Recurrence recurrence={content.recurrence} start={content.start} />
+        </>
+      )}
+      {content.location && (
+        <>
+          <Header dividing sub>
+            {intl.formatMessage(messages.where)}
+          </Header>
+          <p>{content.location}</p>
+        </>
+      )}
+      {content.contact_name && (
+        <>
+          <Header dividing sub>
+            {intl.formatMessage(messages.contactName)}
+          </Header>
+          <p>
+            {content.contact_email ? (
+              <a href={`mailto:${content.contact_email}`}>
+                {content.contact_name}
+              </a>
+            ) : (
+              content.contact_name
+            )}
+          </p>
+        </>
+      )}
+      {content.contact_phone && (
+        <>
+          <Header dividing sub>
+            {intl.formatMessage(messages.contactPhone)}
+          </Header>
+          <p>{content.contact_phone}</p>
+        </>
+      )}
+      {content.attendees?.length > 0 && (
+        <>
+          <Header dividing sub>
+            {intl.formatMessage(messages.attendees)}
+          </Header>
+          <List items={content.attendees} />
+        </>
+      )}
+      {content.event_url && (
+        <>
+          <Header dividing sub>
+            {intl.formatMessage(messages.website)}
+          </Header>
+          <p>
+            <a href={content.event_url} target="_blank" rel="noopener">
+              {intl.formatMessage(messages.visitWebsite)}
+            </a>
+          </p>
+        </>
+      )}
+      <div className="download-event">
+        <Icon name={calendarSVG} />
+        <a
+          className="ics-download"
+          target="_blank"
+          href={`${expandToBackendURL(content['@id'])}/ics_view`}
+        >
+          {intl.formatMessage(messages.downloadEvent)}
+        </a>
+      </div>
+    </Segment>
+  );
+};
+
+export default EventDetails;

package/src/reducers/index.js

@@ -1 +1,3 @@
-export print from './print';
+import print from './print';
+
+export { print };