@eeacms/volto-eea-design-system 1.61.3 → 1.61.5

package/CHANGELOG.md

@@ -4,6 +4,23 @@ 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.61.5](https://github.com/eea/volto-eea-design-system/compare/1.61.4...1.61.5) - 6 October 2026
+
+#### :rocket: New Features
+
+- feat(subsite): use optional useAISearchIcon for subsite passed via headerSearch Controlpanel refs#308136 [nileshgulia1 - [`5c5bebc`](https://github.com/eea/volto-eea-design-system/commit/5c5bebcb47e99168553d3f811493ec7d98858c0e)]
+
+#### :nail_care: Enhancements
+
+- refactor: only turn off the site wide ai search action when subsite wants it. [nileshgulia1 - [`1cf5bed`](https://github.com/eea/volto-eea-design-system/commit/1cf5bed4bb4f5942635aabf2009f128171704a80)]
+
+### [1.61.4](https://github.com/eea/volto-eea-design-system/compare/1.61.3...1.61.4) - 6 October 2026
+
+#### :rocket: New Features
+
+- feat: add hideAction button if set in headerConfig refs#308136 [nileshgulia1 - [`03a1fc1`](https://github.com/eea/volto-eea-design-system/commit/03a1fc189347966660748ad9f6cad4efd2306a08)]
+- feat: add support for queryParams if used with a volto search block #refs308136 [nileshgulia1 - [`99e25b9`](https://github.com/eea/volto-eea-design-system/commit/99e25b97b62b4969e73b95086fd8585a7aceb8c3)]
+
 ### [1.61.3](https://github.com/eea/volto-eea-design-system/compare/1.61.2...1.61.3) - 1 October 2026
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.61.3",
+  "version": "1.61.5",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Header/Header.jsx

@@ -17,7 +17,11 @@ import burgerIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/asse
 import HeaderSearchPopUp from './HeaderSearchPopUp';
 import HeaderMenuPopUp from './HeaderMenuPopUp';
 import { useAISummaryToggle } from './useAISummaryToggle';
-import { findBestMatchingMenuItem, isMenuItemActive } from './utils';
+import {
+  findBestMatchingMenuItem,
+  getSearchInput,
+  isMenuItemActive,
+} from './utils';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
@@ -162,10 +166,16 @@ const Main = ({
   const [burger, setBurger] = React.useState('');
   const searchInputRef = React.useRef(null);
   const [isClient, setIsClient] = React.useState();
-  const useAISearchIcon = useSelector(
+  const siteUseAISearchIcon = useSelector(
     (state) =>
       state.reduxAsyncConnect?.headerSettings?.useAISearchIcon || false,
   );
+  // The search box matching the current path can turn the site-wide icon off
+  const useAISearchIcon =
+    siteUseAISearchIcon &&
+    (getSearchInput(headerSearchBox || [], { pathname: pathname || '' })
+      .useAISearchIcon ??
+      true);
 
   const [aiSummaryEnabled] = useAISummaryToggle();
 

package/src/ui/Header/Header.test.jsx

@@ -772,12 +772,13 @@ test('menu click outside behavior with different active states', async () => {
 });
 
 describe('header search icon and AI summary state', () => {
-  const renderMain = () =>
+  const renderMain = (props = {}) =>
     renderWithProvider(
       <Router history={createMemoryHistory()}>
         <Header>
           <Header.Main
             pathname="/test"
+            {...props}
             menuItems={[
               { '@id': '/test', url: '/test', title: 'Test', items: [] },
             ]}
@@ -824,4 +825,37 @@ describe('header search icon and AI summary state', () => {
       'search-line.svg',
     );
   });
+
+  describe('search box useAISearchIcon override', () => {
+    const headerSearchBox = [
+      { type: 'search-input', path: '/search' },
+      {
+        type: 'search-input',
+        matchpath: '/en/epanet',
+        path: '/en/epanet/site-search',
+        useAISearchIcon: false,
+      },
+    ];
+
+    it('shows the plain magnifier in the search box path that turns the AI icon off', () => {
+      mockState.reduxAsyncConnect.headerSettings.useAISearchIcon = true;
+
+      const { container } = renderMain({
+        pathname: '/en/epanet/about',
+        headerSearchBox,
+      });
+      expect(
+        container.querySelector('img[alt="Global search"]'),
+      ).toHaveAttribute('src', 'search-line.svg');
+    });
+
+    it('keeps the site-wide AI sparkle outside that path', () => {
+      mockState.reduxAsyncConnect.headerSettings.useAISearchIcon = true;
+
+      const { container } = renderMain({ pathname: '/en', headerSearchBox });
+      expect(
+        container.querySelector('img[alt="Global search"]'),
+      ).toHaveAttribute('src', 'ai-search.svg');
+    });
+  });
 });

package/src/ui/Header/HeaderSearchPopUp.js

@@ -10,6 +10,7 @@ import { handleEnterKeyPress } from '@eeacms/volto-eea-design-system/helpers';
 import searchSVG from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/search-line.svg';
 import aiSearchIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/ai-search.svg';
 import { useAISummaryToggle } from './useAISummaryToggle';
+import { getSearchInput } from './utils';
 
 const getRandomItems = (arr, max) => {
   return (
@@ -19,18 +20,6 @@ const getRandomItems = (arr, max) => {
   );
 };
 
-const getSearchInput = (config, location) => {
-  return (
-    config.filter(
-      (v) =>
-        v.type === 'search-input' &&
-        location.pathname.match(v.matchpath ? v.matchpath : v.path),
-    )[0] ||
-    config.filter((v) => v.type === 'search-input')[0] ||
-    {}
-  );
-};
-
 const serializeAction = (action, location) => {
   if (action.type === 'info' && isArray(action.content)) {
     const matchedContent =
@@ -75,13 +64,18 @@ function HeaderSearchPopUp({
   const nodeRef = React.useRef();
 
   const searchInput = getSearchInput(headerSearchBox, location);
-  const actions =
-    headerSearchBox
-      .filter((v) => ['info', 'button-link'].includes(v.type))
-      .map((v) => serializeAction(v, location)) || [];
+  // A search box with hideActions shows no info text or buttons below it
+  const actions = searchInput.hideActions
+    ? []
+    : headerSearchBox
+        .filter((v) => ['info', 'button-link'].includes(v.type))
+        .map((v) => serializeAction(v, location)) || [];
 
   const {
     path = '',
+    // URL parameter that carries the search text, e.g. 'SearchableText' for
+    // a page with Volto's Search block
+    queryParam = 'q',
     placeholder = 'Search',
     suggestionsTitle,
     maxToShow,
@@ -92,10 +86,13 @@ function HeaderSearchPopUp({
     getRandomItems(suggestions, maxToShow),
   );
 
-  const useAISearchIcon = useSelector(
+  const siteUseAISearchIcon = useSelector(
     (state) =>
       state.reduxAsyncConnect?.headerSettings?.useAISearchIcon || false,
   );
+  // A search box can turn the site-wide icon off, e.g. a subsite search
+  const useAISearchIcon =
+    siteUseAISearchIcon && (searchInput.useAISearchIcon ?? true);
 
   const [aiSummaryEnabled] = useAISummaryToggle();
 
@@ -112,7 +109,7 @@ function HeaderSearchPopUp({
 
   const onSubmit = (event) => {
     const text = searchInputRef?.current?.inputRef?.current?.value;
-    history.push(`${path}?q=${text}`);
+    history.push(`${path}?${queryParam}=${text}`);
 
     if (window?.searchContext?.resetSearch) {
       window.searchContext.resetSearch({ searchTerm: text });
@@ -168,7 +165,7 @@ function HeaderSearchPopUp({
                   return (
                     <List.Item key={i}>
                       <Link
-                        to={`${path}?q=${item}`}
+                        to={`${path}?${queryParam}=${item}`}
                         onClick={() => onClickHandler(item)}
                       >
                         {item}

package/src/ui/Header/HeaderSearchPopUp.test.js

@@ -111,6 +111,48 @@ describe('HeaderSearchPopUp', () => {
     expect(history.location.pathname).toBe('/search');
   });
 
+  const submitText = (headerSearchBox, text) => {
+    const searchInputRef = React.createRef();
+    const { container } = render(
+      <Provider store={mockStore}>
+        <Router history={history}>
+          <HeaderSearchPopUp
+            headerSearchBox={headerSearchBox}
+            onClose={mockOnClose}
+            searchInputRef={searchInputRef}
+            triggerRefs={[]}
+          />
+        </Router>
+      </Provider>,
+    );
+    fireEvent.change(screen.getByPlaceholderText('Search'), {
+      target: { value: text },
+    });
+    fireEvent.submit(container.querySelector('form'));
+  };
+
+  it('should submit the search text as q by default', () => {
+    submitText(sampleHeaderSearchBox, 'plenary');
+    expect(history.location.pathname).toBe('/search');
+    expect(history.location.search).toBe('?q=plenary');
+  });
+
+  it('should submit the search text as the entry queryParam', () => {
+    submitText(
+      [
+        {
+          type: 'search-input',
+          path: '/en/epanet/site-search',
+          queryParam: 'SearchableText',
+          placeholder: 'Search',
+        },
+      ],
+      'plenary',
+    );
+    expect(history.location.pathname).toBe('/en/epanet/site-search');
+    expect(history.location.search).toBe('?SearchableText=plenary');
+  });
+
   it('should navigate to the suggestion when a suggestion is clicked', () => {
     window.searchContext = { resetSearch: jest.fn() };
 
@@ -297,4 +339,62 @@ describe('HeaderSearchPopUp', () => {
       );
     });
   });
+
+  describe('search box useAISearchIcon override', () => {
+    beforeEach(() => {
+      window.localStorage.clear();
+    });
+
+    const renderWithEntry = (entry) =>
+      render(
+        <Provider store={mockStore}>
+          <Router history={history}>
+            <HeaderSearchPopUp
+              headerSearchBox={[{ ...sampleHeaderSearchBox[0], ...entry }]}
+              onClose={mockOnClose}
+              triggerRefs={[]}
+            />
+          </Router>
+        </Provider>,
+      );
+
+    it('shows the plain magnifier when the search box turns the AI icon off', () => {
+      mockState.reduxAsyncConnect.headerSettings.useAISearchIcon = true;
+
+      const { container } = renderWithEntry({ useAISearchIcon: false });
+      expect(container.querySelector('img')).toHaveAttribute(
+        'src',
+        'search-line.svg',
+      );
+    });
+  });
+
+  describe('hideActions', () => {
+    const renderWith = (headerSearchBox) =>
+      render(
+        <Provider store={mockStore}>
+          <Router history={history}>
+            <HeaderSearchPopUp
+              headerSearchBox={headerSearchBox}
+              onClose={mockOnClose}
+              triggerRefs={[]}
+            />
+          </Router>
+        </Provider>,
+      );
+
+    it('shows the actions by default', () => {
+      renderWith(sampleHeaderSearchBox);
+      expect(screen.getByText('Advanced Search')).toBeInTheDocument();
+    });
+
+    it('hides the actions when the matched search input has hideActions', () => {
+      renderWith([
+        { ...sampleHeaderSearchBox[0], hideActions: true },
+        ...sampleHeaderSearchBox.slice(1),
+      ]);
+      expect(screen.queryByText('Advanced Search')).toBeNull();
+      expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
+    });
+  });
 });

package/src/ui/Header/utils.js

@@ -91,3 +91,24 @@ export const numbersToMenuItemColumns = (numbers) => {
     })
     .filter((col) => col !== '');
 };
+
+/**
+ * Finds the search-input entry of the header search box config that matches
+ * the current path (its matchpath, else its path), falling back to the first
+ * search-input entry.
+ *
+ * @param {Array} config - headerSearchBox entries
+ * @param {Object} location - object with a pathname
+ * @returns {Object} The matched search-input entry, or {}
+ */
+export const getSearchInput = (config, location) => {
+  return (
+    config.filter(
+      (v) =>
+        v.type === 'search-input' &&
+        location.pathname.match(v.matchpath ? v.matchpath : v.path),
+    )[0] ||
+    config.filter((v) => v.type === 'search-input')[0] ||
+    {}
+  );
+};