@eeacms/volto-eea-website-theme 1.11.2 → 1.12.0

package/CHANGELOG.md

@@ -4,12 +4,51 @@ 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.12.0](https://github.com/eea/volto-eea-website-theme/compare/1.11.3...1.12.0) - 24 March 2023
+
+#### :nail_care: Enhancements
+
+- change(banner): modified title of share buttons [David Ichim - [`c6dcbb5`](https://github.com/eea/volto-eea-website-theme/commit/c6dcbb534d26155d82d8a2729c454fbe3e2b312b)]
+- change(banner): use custom-made Popup for better accessibility [David Ichim - [`955abf1`](https://github.com/eea/volto-eea-website-theme/commit/955abf1c525841577b7cc737871e9640c64a10dc)]
+- change(banner): removed title parameter from MetadataField [David Ichim - [`aff3b6a`](https://github.com/eea/volto-eea-website-theme/commit/aff3b6a8302be165c6bce5cc20d3da734c81fc87)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.12.0 [Alin Voinea - [`4f77af8`](https://github.com/eea/volto-eea-website-theme/commit/4f77af895d6ba9952fa54b1928bbb9f56543765d)]
+- (feat):Page Header Banner accessibility #119 from eea/banner-accesibility [ichim-david - [`3102129`](https://github.com/eea/volto-eea-website-theme/commit/3102129fe6e1416c566522d7da90fd1f118726d5)]
+- delete id [Dobricean Ioan Dorian - [`500727f`](https://github.com/eea/volto-eea-website-theme/commit/500727f87b93dc2c1498c1ed1861d93e464532f4)]
+- final version [Dobricean Ioan Dorian - [`f26adf4`](https://github.com/eea/volto-eea-website-theme/commit/f26adf4fb584a1f7f31a177852bfbde1a15ebd4f)]
+- popup accesibility [Dobricean Ioan Dorian - [`14961bd`](https://github.com/eea/volto-eea-website-theme/commit/14961bdf6bdfcd2a83c53f8fbca83671833217f7)]
+### [1.11.3](https://github.com/eea/volto-eea-website-theme/compare/1.11.2...1.11.3) - 24 March 2023
+
+#### :rocket: New Features
+
+- feat: add 'with-title-block' class to body [Miu Razvan - [`6fdf40f`](https://github.com/eea/volto-eea-website-theme/commit/6fdf40f603559a99ceca2ad9066d86b42ab09d5d)]
+
+#### :nail_care: Enhancements
+
+- change(header): Remove customization moved to volto-eea-design-system [Krisztina Elekes - [`9276965`](https://github.com/eea/volto-eea-website-theme/commit/92769656f56caeaf32fcdf4ae6d623698c07f386)]
+- change(colors): update the design system colour palette defined in package config #123 from eea/update-color-palette [ichim-david - [`ba3b729`](https://github.com/eea/volto-eea-website-theme/commit/ba3b729d90e44fff6cd27e7b45239ef802008dbb)]
+- refactor(colors): update colors according to latest [ITML - [`f256205`](https://github.com/eea/volto-eea-website-theme/commit/f256205b2b93019c1c18c421381a94e5abc1065b)]
+- change(theme): removed outdated browser info from core Volto [David Ichim - [`6d6fa03`](https://github.com/eea/volto-eea-website-theme/commit/6d6fa036c9ef85dbc5d6416a4f34635da0784778)]
+
+#### :house: Internal changes
+
+- chore(Form): Update Form shadow to Volto 16.17.1 #122 from eea/form-customization-to-volto-16-17-1 [ichim-david - [`5815668`](https://github.com/eea/volto-eea-website-theme/commit/5815668000c4ff5e7236f7dc12999b04840eb849)]
+- chore(Form): Update Form shadow to Volto 16.17.1 [Alin Voinea - [`36d5f2c`](https://github.com/eea/volto-eea-website-theme/commit/36d5f2c18df8173701a769d7ad8991a36bf771ee)]
+
+#### :hammer_and_wrench: Others
+
+- lint fix [David Ichim - [`97057a8`](https://github.com/eea/volto-eea-website-theme/commit/97057a811bacd63b352cdf08e7c0a20e199feed6)]
 ### [1.11.2](https://github.com/eea/volto-eea-website-theme/compare/1.11.1...1.11.2) - 15 March 2023
 
 #### :bug: Bug Fixes
 
 - fix(imageBlock): re-add sizeWidget classes [nileshgulia1 - [`de4673b`](https://github.com/eea/volto-eea-website-theme/commit/de4673b1efe3e0559e4bcde9fe15a014fac5a6da)]
 
+#### :hammer_and_wrench: Others
+
+- Merge pull request #121 from eea/develop [Nilesh - [`1ce20da`](https://github.com/eea/volto-eea-website-theme/commit/1ce20da3c52678cbbe38cea1de8aa7f878b0d8f3)]
 ### [1.11.1](https://github.com/eea/volto-eea-website-theme/compare/1.11.0...1.11.1) - 14 March 2023
 
 #### :nail_care: Enhancements
@@ -68,7 +107,6 @@ 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
@@ -215,7 +253,6 @@ 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
@@ -249,7 +286,6 @@ 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
 
@@ -259,7 +295,6 @@ 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
@@ -268,9 +303,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - feat(Footer): Bring back footer contacts extra actions - refs #151856 [Alin Voinea - [`6c19413`](https://github.com/eea/volto-eea-website-theme/commit/6c194139420c9fd847692d180db1c1593e2483de)]
 
-#### :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
@@ -311,7 +343,6 @@ 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
@@ -359,7 +390,6 @@ 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
@@ -627,7 +657,6 @@ 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)]
@@ -669,5 +698,4 @@ 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.11.2",
+  "version": "1.12.0",
   "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/Edit.jsx

@@ -10,6 +10,7 @@ import { Editor, createEditor, Transforms, Node, Range } from 'slate';
 import { ReactEditor, Editable, Slate, withReact } from 'slate-react';
 import config from '@plone/volto/registry';
 import { SidebarPortal } from '@plone/volto/components';
+import { BodyClass } from '@plone/volto/helpers';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import BannerView from '@eeacms/volto-eea-website-theme/components/theme/Banner/View';
 import schema from './schema';
@@ -163,6 +164,7 @@ export const TitleBlockEdit = (props) => {
 
   return (
     <React.Fragment>
+      <BodyClass className="with-title-block" />
       <BannerView
         {...props}
         banner={{

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

@@ -6,6 +6,7 @@
 import React from 'react';
 import { Portal } from 'react-portal';
 import PropTypes from 'prop-types';
+import { BodyClass } from '@plone/volto/helpers';
 
 import BannerView from '@eeacms/volto-eea-website-theme/components/theme/Banner/View';
 
@@ -26,9 +27,12 @@ function IsomorphicPortal({ children }) {
  * @extends Component
  */
 const View = (props) => (
-  <IsomorphicPortal>
-    <BannerView {...props} />
-  </IsomorphicPortal>
+  <React.Fragment>
+    <BodyClass className="with-title-block" />
+    <IsomorphicPortal>
+      <BannerView {...props} />
+    </IsomorphicPortal>
+  </React.Fragment>
 );
 
 /**

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

@@ -1,11 +1,12 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { defineMessages, injectIntl } from 'react-intl';
 import { startCase } from 'lodash';
 import qs from 'querystring';
-import { Popup, Icon } from 'semantic-ui-react';
+import { Icon } from 'semantic-ui-react';
+import Popup from '@eeacms/volto-eea-design-system/ui/Popup/Popup';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import Banner from '@eeacms/volto-eea-design-system/ui/Banner/Banner';
 import {
@@ -33,26 +34,14 @@ const messages = defineMessages({
     id: 'Created',
     defaultMessage: 'Created',
   },
-  created_on: {
-    id: 'Created on',
-    defaultMessage: 'Created on',
-  },
   published: {
     id: 'Published',
     defaultMessage: 'Published',
   },
-  published_on: {
-    id: 'Published on',
-    defaultMessage: 'Published on',
-  },
   modified: {
     id: 'Modified',
     defaultMessage: 'Modified',
   },
-  modified_on: {
-    id: 'Modified on',
-    defaultMessage: 'Modified on',
-  },
 });
 
 const friendlyId = (id) => {
@@ -74,6 +63,7 @@ const Title = ({ config = {}, properties }) => {
 const View = (props) => {
   const { banner = {}, intl, location, types = [] } = props;
   const metadata = props.metadata || props.properties;
+  const popupRef = useRef(null);
   const {
     info = [],
     hideContentType,
@@ -134,44 +124,50 @@ const View = (props) => {
         actions={
           <>
             {!hideShareButton && (
-              <Popup
-                className="share-popup"
-                content={() => (
-                  <>
-                    <p>{intl.formatMessage(messages.share_to)}</p>
-                    <div className="actions">
-                      <Banner.Action
-                        icon="ri-facebook-fill"
-                        onClick={() => {
-                          sharePage(metadata['@id'], 'facebook');
-                        }}
-                      />
-                      <Banner.Action
-                        icon="ri-twitter-fill"
-                        onClick={() => {
-                          sharePage(metadata['@id'], 'twitter');
-                        }}
-                      />
-                      <Banner.Action
-                        icon="ri-linkedin-fill"
-                        onClick={() => {
-                          sharePage(metadata['@id'], 'linkedin');
-                        }}
-                      />
-                    </div>
-                  </>
-                )}
-                position="bottom center"
-                size="small"
-                trigger={
-                  <Banner.Action
-                    icon="ri-share-fill"
-                    title={intl.formatMessage(messages.share)}
-                    className="share"
-                    onClick={() => {}}
-                  />
-                }
-              />
+              <>
+                <Popup
+                  className={'share-popup'}
+                  trigger={
+                    <Banner.Action
+                      icon="ri-share-fill"
+                      title={intl.formatMessage(messages.share)}
+                      className="share"
+                      onClick={() => {}}
+                    />
+                  }
+                  content={
+                    <>
+                      <p>{intl.formatMessage(messages.share_to)}</p>
+                      <div className="actions" ref={popupRef}>
+                        <Banner.Action
+                          icon="ri-facebook-fill"
+                          title={'Share page to Facebook'}
+                          titleClass={'hiddenStructure'}
+                          onClick={() => {
+                            sharePage(metadata['@id'], 'facebook');
+                          }}
+                        />
+                        <Banner.Action
+                          icon="ri-twitter-fill"
+                          title={'Share page to Twitter'}
+                          titleClass={'hiddenStructure'}
+                          onClick={() => {
+                            sharePage(metadata['@id'], 'twitter');
+                          }}
+                        />
+                        <Banner.Action
+                          icon="ri-linkedin-fill"
+                          title={'Share page to Linkedin'}
+                          titleClass={'hiddenStructure'}
+                          onClick={() => {
+                            sharePage(metadata['@id'], 'linkedin');
+                          }}
+                        />
+                      </div>
+                    </>
+                  }
+                />
+              </>
             )}
             {!hideDownloadButton && (
               <Banner.Action
@@ -197,19 +193,16 @@ const View = (props) => {
             type="date"
             label={intl.formatMessage(messages.created)}
             value={creationDate}
-            title={`${intl.formatMessage(messages.created_on)} {}`}
           />
           <Banner.MetadataField
             type="date"
             label={intl.formatMessage(messages.published)}
             value={publishingDate}
-            title={`${intl.formatMessage(messages.published_on)} {}`}
           />
           <Banner.MetadataField
             type="date"
             label={intl.formatMessage(messages.modified)}
             value={modificationDate}
-            title={`${intl.formatMessage(messages.modified_on)} {}`}
           />
           {info.map((item, index) => (
             <Banner.MetadataField

package/src/config.js

@@ -289,10 +289,10 @@ export const colors = [
   '#007B6C',
   '#005248',
   '#007B6C',
-  '#00A390',
-  '#00CCB4',
-  '#00F5D8',
-  '#85FFF1',
+  '#289588',
+  '#50B0A4',
+  '#78CAC0',
+  '#A0E5DC',
   '#C8FFF8',
   // Secondary & shades
   '#004B7F',
@@ -308,13 +308,13 @@ export const colors = [
   '#3D5265',
   '#4C677F',
   '#6989A5',
-  '#8EA6C2',
+  '#87A7C3',
   '#ACCAE5',
   '#DAE8F4',
   // Black & White shades
   '#000000',
   '#323232',
-  '#67696b',
+  '#747678',
   '#BCBEC0',
   '#E6E7E8',
   '#F9F9F9',

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

@@ -180,10 +180,11 @@ class Form extends Component {
       formData.hasOwnProperty(blocksLayoutFieldname) &&
       formData[blocksLayoutFieldname].items.length > 0
     ) {
-      selectedBlock = formData[blocksLayoutFieldname].items[0];
-
-      if (config.blocks?.initialBlocksFocus?.[this.props.type]) {
-        //Default selected is not the first block, but the one from config.
+      if (config.blocks?.initialBlocksFocus === null) {
+        selectedBlock = null;
+      } else if (this.props.type in config.blocks?.initialBlocksFocus) {
+        // Default selected is not the first block, but the one from config.
+        // TODO Select first block and not an arbitrary one.
         Object.keys(formData[blocksFieldname]).forEach((b_key) => {
           if (
             formData[blocksFieldname][b_key]['@type'] ===
@@ -192,8 +193,11 @@ class Form extends Component {
             selectedBlock = b_key;
           }
         });
+      } else {
+        selectedBlock = formData[blocksLayoutFieldname].items[0];
       }
     }
+
     this.state = {
       formData,
       initialFormData: cloneDeep(formData),
@@ -254,7 +258,11 @@ class Form extends Component {
    * Tab selection is done only by setting activeIndex in state
    */
   onTabChange(e, { activeIndex }) {
-    this.setState({ activeIndex });
+    const defaultFocus = this.props.schema.fieldsets[activeIndex].fields[0];
+    this.setState({
+      activeIndex,
+      ...(defaultFocus ? { inFocus: { [defaultFocus]: true } } : {}),
+    });
   }
 
   /**
@@ -641,7 +649,7 @@ class Form extends Component {
           error={keys(this.state.errors).length > 0}
           className={settings.verticalFormTabs ? 'vertical-form' : ''}
         >
-          <fieldset className="invisible" disabled={!this.props.editable}>
+          <fieldset className="invisible">
             <Segment.Group raised>
               {schema && schema.fieldsets.length > 1 && (
                 <>
@@ -678,10 +686,11 @@ class Form extends Component {
                         ...map(item.fields, (field, index) => (
                           <Field
                             {...schema.properties[field]}
+                            isDisabled={!this.props.editable}
                             id={field}
                             formData={this.state.formData}
                             fieldSet={item.title.toLowerCase()}
-                            focus={index === 0}
+                            focus={this.state.inFocus[field]}
                             value={this.state.formData?.[field]}
                             required={schema.required.indexOf(field) !== -1}
                             onChange={this.onChangeField}

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

@@ -60,6 +60,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
 
   const { eea } = config.settings;
   const headerOpts = eea.headerOpts || {};
+  const headerSearchBox = eea.headerSearchBox || [];
   const { logo, logoWhite } = headerOpts || {};
   const width = useSelector((state) => state.screen?.width);
   const dispatch = useDispatch();
@@ -199,6 +200,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
       </Header.TopHeader>
       <Header.Main
         pathname={pathname}
+        headerSearchBox={headerSearchBox}
         inverted={isHomePageInverse ? true : false}
         transparency={isHomePageInverse ? true : false}
         logo={

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

@@ -0,0 +1,5 @@
+const OutdatedBrowser = () => {
+  return null;
+};
+
+export default OutdatedBrowser;

package/src/customizations/@eeacms/volto-eea-design-system/ui/Header/HeaderSearchPopUp.js

@@ -1,131 +0,0 @@
-import React, { useEffect } from 'react';
-import { Container, Input, List } from 'semantic-ui-react';
-import { withRouter, Link } from 'react-router-dom';
-import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
-import config from '@plone/volto/registry';
-
-const getRandomItems = (arr, max) => {
-  return (
-    arr?.slice(0, max).map(function () {
-      return this.splice(Math.floor(Math.random() * this.length), 1)[0];
-    }, arr.slice()) || []
-  );
-};
-
-function HeaderSearchPopUp({
-  history,
-  location,
-  onClose,
-  searchInputRef,
-  triggerRefs = [],
-}) {
-  const nodeRef = React.useRef();
-  const { eea } = config.settings;
-  const defaultView = eea.headerSearchBox.filter((v) => v.isDefault);
-  const localView = eea.headerSearchBox.filter((v) =>
-    location.pathname.includes(v.path),
-  );
-  const activeView = localView.length > 0 ? localView[0] : defaultView[0];
-  const {
-    path,
-    placeholder,
-    buttonTitle,
-    description,
-    searchSuggestions,
-  } = activeView;
-  const { suggestionsTitle, suggestions, maxToShow } = searchSuggestions || {};
-
-  const [text, setText] = React.useState('');
-  const [visibleSuggestions, setVisibileSuggestions] = React.useState(
-    getRandomItems(suggestions, maxToShow),
-  );
-
-  useEffect(() => {
-    setVisibileSuggestions(getRandomItems(suggestions, maxToShow));
-  }, [maxToShow, suggestions]);
-
-  useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
-
-  const onChangeText = (event, { value }) => {
-    setText(value);
-    event.preventDefault();
-  };
-
-  const onSubmit = (event) => {
-    history.push(`${path}?q=${text}`);
-
-    if (window?.searchContext?.resetSearch) {
-      window.searchContext.resetSearch({ searchTerm: text });
-    }
-
-    onClose();
-    event.preventDefault();
-  };
-
-  const onClickHandler = (suggestion) => {
-    if (window?.searchContext?.resetSearch) {
-      window.searchContext.resetSearch({ searchTerm: suggestion });
-    }
-
-    onClose();
-  };
-
-  return (
-    <div id="search-box" ref={nodeRef}>
-      <div className="wrapper">
-        <Container>
-          <form method="get" onSubmit={onSubmit}>
-            <Input
-              ref={searchInputRef}
-              className="search"
-              onChange={onChangeText}
-              icon={{
-                className: 'ri-search-line',
-                link: true,
-                onClick: onSubmit,
-              }}
-              placeholder={placeholder}
-              fluid
-            />
-          </form>
-          {searchSuggestions && suggestions.length > 0 && (
-            <div className="search-suggestions">
-              {suggestionsTitle && <h4>{suggestionsTitle}</h4>}
-
-              <List>
-                {visibleSuggestions.map((item, i) => {
-                  return (
-                    <List.Item key={i}>
-                      <Link
-                        to={`${path}?q=${item}`}
-                        onClick={() => onClickHandler(item)}
-                      >
-                        {item}
-                      </Link>
-                    </List.Item>
-                  );
-                })}
-              </List>
-            </div>
-          )}
-        </Container>
-        {buttonTitle && (
-          <div className="advanced-search">
-            <Container>
-              <div>{description}</div>
-              <a
-                href={defaultView[0].path}
-                className="ui button white inverted"
-                title="Advanced search"
-              >
-                {buttonTitle}
-              </a>
-            </Container>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default withRouter(HeaderSearchPopUp);