@eeacms/volto-tabs-block 9.0.2 → 9.1.0

package/CHANGELOG.md

@@ -4,11 +4,20 @@ 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).
 
-### [9.0.2](https://github.com/eea/volto-tabs-block/compare/9.0.1...9.0.2) - 27 January 2025
+### [9.1.0](https://github.com/eea/volto-tabs-block/compare/9.0.3...9.1.0) - 24 July 2025
+
+#### :hammer_and_wrench: Others
+
+- Release 9.1.0 [Alin Voinea - [`4396e37`](https://github.com/eea/volto-tabs-block/commit/4396e3740694d99cbb66414783c3fbbef7ed2022)]
+### [9.0.3](https://github.com/eea/volto-tabs-block/compare/9.0.2...9.0.3) - 7 May 2025
 
 #### :bug: Bug Fixes
 
-- fix: add BlockHasValue check on all child items instead one refs#282712 [nileshgulia1 - [`6c97620`](https://github.com/eea/volto-tabs-block/commit/6c9762054bdccef12c225bf3ac3daca50aca62dd)]
+- fix: Active tab when navigation from within - refs #287006 [Nilesh - [`5133d07`](https://github.com/eea/volto-tabs-block/commit/5133d07b1fcf9fef8b336ea27a679d4aea594513)]
+
+#### :hammer_and_wrench: Others
+
+### [9.0.2](https://github.com/eea/volto-tabs-block/compare/9.0.1...9.0.2) - 27 January 2025
 
 #### :house: Internal changes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tabs-block",
-  "version": "9.0.2",
+  "version": "9.1.0",
   "description": "volto-tabs-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/View.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import cx from 'classnames';
 import { compose } from 'redux';
 import { withRouter } from 'react-router';
@@ -39,32 +39,34 @@ const View = (props) => {
 
   const TabsView = activeVariation?.[0]?.view || DefaultView;
 
-  const query = React.useMemo(() => {
+  const query = useMemo(() => {
     const { search } = location;
 
     return new URLSearchParams(search);
   }, [location]);
-  const activeTabId = query.get('activeTab');
+  const activeTabId = useMemo(() => query.get('activeTab'), [query]);
 
-  const addQueryParam = (key, value) => {
-    const searchParams = new URLSearchParams(location.search);
-    searchParams.set(key, value);
+  const handleActiveTabChange = useCallback(
+    (id) => {
+      const searchParams = new URLSearchParams(location.search);
+      searchParams.set('activeTab', id);
 
-    history.push({
-      pathname: location.pathname,
-      search: searchParams.toString(),
-    });
-  };
-
-  const handleActiveTabChange = (id) => {
-    setActiveTab(id);
-    addQueryParam('activeTab', id);
-  };
+      history.push({
+        pathname: location.pathname,
+        search: searchParams.toString(),
+      });
+      setActiveTab(id);
+    },
+    [history, location],
+  );
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (tabsList.includes(activeTabId)) {
       setActiveTab(activeTabId);
     }
+  }, [activeTabId, tabsList]);
+
+  useEffect(() => {
     const urlHash = props.location.hash.substring(1) || '';
     const parentTabId = getParentTabFromHash(data, urlHash);
     const id = parentTabId;

package/src/components/View.test.jsx

@@ -34,6 +34,11 @@ jest.mock('react-router', () => ({
   },
 }));
 
+// ENOENT: no such file or directory, open 'node:crypto'
+jest.mock('uuid', () => ({
+  v4: () => 'test-uuid-1234',
+}));
+
 jest.mock('@eeacms/volto-block-style/StyleWrapper', () => ({
   StyleWrapperView: (props) => {
     return <div className="mocked-style-wrapper">{props.children}</div>;
@@ -51,14 +56,14 @@ describe('View Component', () => {
   it('Should render and switch Tabs', () => {
     const customTabsData = {
       blocks_layout: {
-        items: ['tab1', 'tab2', 'tab3'],
+        items: ['test-uuid-1234', 'test-uuid-5678', 'tab3'],
       },
       blocks: {
-        tab1: {
+        'test-uuid-1234': {
           title: 'Tab 1 Title',
           content: 'Tab 1 Content',
         },
-        tab2: {
+        'test-uuid-5678': {
           title: 'Tab 2 Title',
           content: 'Tab 2 Content',
         },

package/src/components/variations/default/Edit.jsx

@@ -248,6 +248,7 @@ const Edit = (props) => {
               allowedBlocks={data?.allowedBlocks}
               description={data?.instructions?.data}
               manage={manage}
+              isMainForm={false}
               metadata={metadata}
               pathname={props.pathname}
               properties={isEmpty(tabs[tab]) ? emptyBlocksForm() : tabs[tab]}

package/src/components/variations/horizontal-responsive/Edit.jsx

@@ -351,6 +351,7 @@ const Edit = (props) => {
               allowedBlocks={data?.allowedBlocks}
               description={data?.instructions?.data}
               manage={manage}
+              isMainForm={false}
               metadata={metadata}
               pathname={props.pathname}
               properties={isEmpty(tabs[tab]) ? emptyBlocksForm() : tabs[tab]}