From b4e2987212e1656f6b06fea5e8833240b2a6116b Mon Sep 17 00:00:00 2001
From: fermarinsanchez <fermarinsanchez@yahoo.es>
Date: Wed, 18 Jun 2025 10:15:43 +0200
Subject: [PATCH 1/2] fix: extract state and refactor on tabindex and storybook

---
 src/tabGroup/TabGroup.tsx              |  42 ++-
 stories/TabGroup/ClassBased.stories.js | 341 ++++++++++++++-----------
 stories/TabGroup/Documentation.mdx     |  10 +-
 stories/TabGroup/UnStyled.stories.js   |  32 ++-
 stories/liveEdit/TabGroupLive.tsx      |  13 +-
 5 files changed, 242 insertions(+), 196 deletions(-)

diff --git a/src/tabGroup/TabGroup.tsx b/src/tabGroup/TabGroup.tsx
index de927132..99c5d972 100644
--- a/src/tabGroup/TabGroup.tsx
+++ b/src/tabGroup/TabGroup.tsx
@@ -5,7 +5,6 @@ import React, {
   useEffect,
   useImperativeHandle,
   useRef,
-  useState,
 } from 'react';
 import { classNames, Roles, useHydrated } from '../common';
 
@@ -72,7 +71,7 @@ type TabContextProps = {
   /**
    * Tab next tab
    */
-  nextTab?: string
+  nextTab?: string;
   /**
    * Tab Context update selected tab
    */
@@ -111,29 +110,18 @@ export const TabGroup = forwardRef(
 
     const initialMount = useRef(true);
 
-    const defaultActiveTabKey = activeKey || children[0].props.eventKey;
-    const defaultPreviousTabKey = children[children.findIndex((child: JSX.Element) => child.props.eventKey === defaultActiveTabKey) - 1]?.props.eventKey;
-    const defaultNextTabKey = children[children.findIndex((child: JSX.Element) => child.props.eventKey === defaultActiveTabKey) + 1]?.props.eventKey;
-    const [activeTab, setActiveTab] = useState<string>(defaultActiveTabKey);
-    const [previousTab, setPreviousTab] = useState<string | undefined>(defaultPreviousTabKey);
-    const [nextTab, setNextTab] = useState<string| undefined>(defaultNextTabKey);
+    const currentActiveKey = activeKey || children[0].props.eventKey;
 
-    const onClickHandler: (id: string) => void = (id: string) =>
-      updateActiveTab(id);
+    const onClickHandler: (id: string) => void = (id: string) => {
+      onSelect && onSelect(id);
+    };
 
     const updateActiveTab: (id: string) => boolean = (id: string) => {
-      const index = children.findIndex((child: JSX.Element) => child.props.eventKey === id);
-      if (index < 0) {
-        return false;
-      }
-
-      if (!children[index].props.disabled) {
-        setActiveTab(id);
+      if (children.some((child: JSX.Element) => child.props.eventKey === id)) {
+        onSelect && onSelect(id);
+        return true;
       }
-      
-      setPreviousTab(children[index - 1]?.props.eventKey);
-      setNextTab(children[index + 1]?.props.eventKey);
-      return true;
+      return false;
     };
 
     useImperativeHandle(ref, () => ({
@@ -141,12 +129,12 @@ export const TabGroup = forwardRef(
     }));
 
     useEffect(() => {
-      if (!initialMount.current) onSelect && onSelect(activeTab);
+      if (!initialMount.current) onSelect && onSelect(currentActiveKey);
       else initialMount.current = false;
-    }, [activeTab]);
+    }, [currentActiveKey]);
 
     const activeTabElement = children.find(
-      (child: JSX.Element) => activeTab === child.props.eventKey
+      (child: JSX.Element) => currentActiveKey === child.props.eventKey
     );
 
     const hydrated = useHydrated();
@@ -162,7 +150,10 @@ export const TabGroup = forwardRef(
           aria-label={ariaLabelTabList}
         >
           <TabContext.Provider
-            value={{ activeTab, previousTab, nextTab, changeActiveTab: onClickHandler }}
+            value={{
+              activeTab: currentActiveKey,
+              changeActiveTab: onClickHandler,
+            }}
           >
             {children.map((child: JSX.Element, index: number) => {
               const classes: string = classNames([
@@ -192,7 +183,6 @@ export const TabGroup = forwardRef(
                 key={index}
                 role={Roles.tabpanel}
                 className={contentClassName}
-                tabIndex={0}
                 aria-labelledby={tabPanel.props.eventKey}
               >
                 {tabPanel.props.children}
diff --git a/stories/TabGroup/ClassBased.stories.js b/stories/TabGroup/ClassBased.stories.js
index 36388835..2847b8ef 100644
--- a/stories/TabGroup/ClassBased.stories.js
+++ b/stories/TabGroup/ClassBased.stories.js
@@ -1,6 +1,6 @@
 import { TabGroup, Tab } from '../../src/tabGroup';
 import { Button } from '../../src/button';
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import './style.css';
 /**
  * In this section we're using the TabGroup component providing the **GovUk style** passing the relative `className.
@@ -17,114 +17,215 @@ export default {
   tags: ['autodocs'],
 };
 
-export const Basic = {
-  name: 'Basic',
-  render: function () {
-    return (
+const BasicTabs = () => {
+  const [activeTab, setActiveTab] = useState('tab-1');
+
+  return (
+    <TabGroup
+      containerClassName="govuk-tabs"
+      className="govuk-tabs__list"
+      tabClassName="govuk-tabs__list-item"
+      tabLinkClassName="govuk-tabs__tab"
+      activeTabClassName="govuk-tabs__list-item--selected"
+      contentClassName="govuk-tabs__panel"
+      activeKey={activeTab}
+      onSelect={setActiveTab}
+    >
+      <Tab eventKey="tab-1" label="Past day">
+        <h2>Past day</h2>
+        This the content for <em>Past day</em>
+      </Tab>
+      <Tab eventKey="tab-2" label="Past week">
+        <h2>Past week</h2>
+        This the content for <em>Past week</em>
+      </Tab>
+      <Tab eventKey="tab-3" label="Past month">
+        <h2>Past month</h2>
+        This the content for <em>Past month</em>
+      </Tab>
+      <Tab eventKey="tab-4" label="Past year">
+        <h2>Past year</h2>
+        This the content for <em>Past year</em>
+      </Tab>
+    </TabGroup>
+  );
+};
+
+const DisabledTabs = () => {
+  const [activeTab, setActiveTab] = useState('tab-1');
+
+  return (
+    <TabGroup
+      activeTabClassName="tab-list-active"
+      disabledClassName="tab-list-disabled"
+      tabClassName="tab-list-item"
+      className="tab-list"
+      activeKey={activeTab}
+      onSelect={setActiveTab}
+    >
+      <Tab eventKey="tab-1" label="tab 1">
+        This the content for <em>tab 1</em>
+      </Tab>
+      <Tab eventKey="tab-2" label="tab 2">
+        This the content for <em>tab 2</em>
+      </Tab>
+      <Tab eventKey="tab-3" label="tab 3" disabled={true}>
+        This the content for <em>tab 3</em>
+      </Tab>
+    </TabGroup>
+  );
+};
+
+const PreselectedTabs = () => {
+  const [activeTab, setActiveTab] = useState('tab-2');
+
+  return (
+    <TabGroup
+      activeTabClassName="tab-list-active"
+      disabledClassName="tab-list-disabled"
+      tabClassName="tab-list-item"
+      className="tab-list"
+      activeKey={activeTab}
+      onSelect={setActiveTab}
+    >
+      <Tab eventKey="tab-1" label="tab 1">
+        This the content for <em>tab 1</em>
+      </Tab>
+      <Tab eventKey="tab-2" label="tab 2">
+        This the content for <em>tab 2</em>
+      </Tab>
+      <Tab eventKey="tab-3" label="tab 3">
+        This the content for <em>tab 3</em>
+      </Tab>
+    </TabGroup>
+  );
+};
+
+const EventTabs = () => {
+  const [activeTab, setActiveTab] = useState('tab-1');
+  const handleChange = (eventKey) => {
+    setActiveTab(eventKey);
+    alert(`${eventKey} selected`);
+  };
+
+  return (
+    <TabGroup
+      activeTabClassName="tab-list-active"
+      tabClassName="tab-list-item"
+      className="tab-list"
+      activeKey={activeTab}
+      onSelect={handleChange}
+    >
+      <Tab eventKey="tab-1" label="tab 1">
+        This the content for <em>tab 1</em>
+      </Tab>
+      <Tab eventKey="tab-2" label="tab 2">
+        This the content for <em>tab 2</em>
+      </Tab>
+      <Tab eventKey="tab-3" label="tab 3">
+        This the content for <em>tab 3</em>
+      </Tab>
+    </TabGroup>
+  );
+};
+
+const ProgrammaticTabs = () => {
+  const [activeTab, setActiveTab] = useState('tab-pane-1-id');
+  const tabRef = useRef();
+
+  return (
+    <>
       <TabGroup
-        containerClassName="govuk-tabs"
-        className="govuk-tabs__list"
-        tabClassName="govuk-tabs__list-item"
-        tabLinkClassName="govuk-tabs__tab"
-        activeTabClassName="govuk-tabs__list-item--selected"
-        contentClassName="govuk-tabs__panel"
+        activeTabClassName="tab-list-active"
+        tabClassName="tab-list-item"
+        className="tab-list"
+        ref={tabRef}
+        activeKey={activeTab}
+        onSelect={setActiveTab}
       >
-        <Tab eventKey="tab-1" label="Past day">
-          <h2>Past day</h2>
-          This the content for <em>Past day</em>
+        <Tab label="Tab 1" eventKey="tab-pane-1-id">
+          This is content for <em>tab 1</em>
+        </Tab>
+        <Tab label="Tab 2" eventKey="tab-pane-2-id">
+          This is content for <em>tab 2</em>
         </Tab>
-        <Tab eventKey="tab-2" label="Past week">
-          <h2>Past week</h2>
-          This the content for <em>Past week</em>
+        <Tab label="Tab 3" eventKey="tab-pane-3-id">
+          This is content for <em>tab 3</em>
         </Tab>
-        <Tab eventKey="tab-3" label="Past month">
-          <h2>Past month</h2>
-          This the content for <em>Past month</em>
+        <Tab label="Tab 4" eventKey="tab-pane-4-id">
+          This is content for <em>tab 4</em>
         </Tab>
-        <Tab eventKey="tab-4" label="Past year">
-          <h2>Past year</h2>
-          This the content for <em>Past year</em>
+        <Tab label="Tab 5" eventKey="tab-pane-5-id">
+          This is content for <em>tab 5</em>
         </Tab>
       </TabGroup>
-    );
-  },
+      <br />
+      <Button
+        onClick={() => {
+          const changed = tabRef.current.updateActiveTab('tab-pane-5-id');
+          if (changed) {
+            setActiveTab('tab-pane-5-id');
+          }
+        }}
+        label="Click to change to Tab 5"
+      />
+    </>
+  );
+};
+
+const CustomLabelTabs = () => {
+  const [activeTab, setActiveTab] = useState('tab-1');
+
+  return (
+    <TabGroup
+      activeTabClassName="tab-list-active"
+      tabClassName="tab-list-item"
+      className="tab-list"
+      activeKey={activeTab}
+      onSelect={setActiveTab}
+    >
+      <Tab eventKey="tab-1" label="tab 1">
+        This the content for <em>tab 1</em>
+      </Tab>
+      <Tab eventKey="tab-2" label="tab 2">
+        This the content for <em>tab 2</em>
+      </Tab>
+      <Tab
+        label={
+          <img
+            src="https://freesvg.org/img/afaulconbridge-Lightbulb-OnOff-1.png"
+            width="20px"
+          />
+        }
+        eventKey="tab-3"
+      >
+        This is content for <em>tab 3</em>
+      </Tab>
+    </TabGroup>
+  );
+};
+
+export const Basic = {
+  name: 'Basic',
+  render: () => <BasicTabs />,
   args: {},
 };
 
 export const Disabled = {
   name: 'Disabled',
-  render: function () {
-    return (
-      <TabGroup
-        activeTabClassName="tab-list-active"
-        disabledClassName="tab-list-disabled"
-        tabClassName="tab-list-item"
-        className="tab-list"
-      >
-        <Tab eventKey="tab-1" label="tab 1">
-          This the content for <em>tab 1</em>
-        </Tab>
-        <Tab eventKey="tab-2" label="tab 2">
-          This the content for <em>tab 2</em>
-        </Tab>
-        <Tab eventKey="tab-3" label="tab 3" disabled={true}>
-          This the content for <em>tab 3</em>
-        </Tab>
-      </TabGroup>
-    );
-  },
+  render: () => <DisabledTabs />,
   args: {},
 };
 
 export const Preselected = {
   name: 'Preselected',
-  render: function () {
-    return (
-      <TabGroup
-        activeTabClassName="tab-list-active"
-        activeKey="tab 2"
-        disabledClassName="tab-list-disabled"
-        tabClassName="tab-list-item"
-        className="tab-list"
-      >
-        <Tab eventKey="tab-1" label="tab 1">
-          This the content for <em>tab 1</em>
-        </Tab>
-        <Tab eventKey="tab-2" label="tab 2">
-          This the content for <em>tab 2</em>
-        </Tab>
-        <Tab eventKey="tab-3" label="tab 3">
-          This the content for <em>tab 3</em>
-        </Tab>
-      </TabGroup>
-    );
-  },
+  render: () => <PreselectedTabs />,
   args: {},
 };
 
 export const Event = {
   name: 'Select event',
-  render: function () {
-    const handleChange = (label) => alert(`${label} selected`);
-    return (
-      <TabGroup
-        activeTabClassName="tab-list-active"
-        tabClassName="tab-list-item"
-        className="tab-list"
-        onClick={handleChange}
-      >
-        <Tab eventKey="tab-1" label="tab 1">
-          This the content for <em>tab 1</em>
-        </Tab>
-        <Tab eventKey="tab-2" label="tab 2">
-          This the content for <em>tab 2</em>
-        </Tab>
-        <Tab eventKey="tab-3" label="tab 3">
-          This the content for <em>tab 3</em>
-        </Tab>
-      </TabGroup>
-    );
-  },
+  render: () => <EventTabs />,
   args: {},
 };
 
@@ -154,74 +255,12 @@ export const Keyboard = {
 
 export const Programmatic = {
   name: 'Programatically controlled',
-  render: function () {
-    const tabRef = useRef();
-    return (
-      <>
-        <TabGroup
-          activeTabClassName="tab-list-active"
-          tabClassName="tab-list-item"
-          className="tab-list"
-          ref={tabRef}
-        >
-          <Tab label="Tab 1" eventKey="tab-pane-1-id">
-            This is content for <em>tab 1</em>
-          </Tab>
-          <Tab label="Tab 2" eventKey="tab-pane-2-id">
-            This is content for <em>tab 2</em>
-          </Tab>
-          <Tab label="Tab 3" eventKey="tab-pane-3-id">
-            This is content for <em>tab 3</em>
-          </Tab>
-          <Tab label="Tab 4" eventKey="tab-pane-4-id">
-            This is content for <em>tab 4</em>
-          </Tab>
-          <Tab label="Tab 5" eventKey="tab-pane-5-id">
-            This is content for <em>tab 5</em>
-          </Tab>
-        </TabGroup>
-        <br />
-        <Button
-          onClick={() => {
-            //@ts-ignore
-            const changed = tabRef.current.updateActiveTab('tab-pane-5-id');
-          }}
-          label="Click to change to Tab 5"
-        />
-      </>
-    );
-  },
+  render: () => <ProgrammaticTabs />,
   args: {},
 };
 
 export const CustomLabel = {
   name: 'Custom label',
-  render: function () {
-    return (
-      <TabGroup
-        activeTabClassName="tab-list-active"
-        tabClassName="tab-list-item"
-        className="tab-list"
-      >
-        <Tab eventKey="tab-1" label="tab 1">
-          This the content for <em>tab 1</em>
-        </Tab>
-        <Tab eventKey="tab-2" label="tab 2">
-          This the content for <em>tab 2</em>
-        </Tab>
-        <Tab
-          label={
-            <img
-              src="https://freesvg.org/img/afaulconbridge-Lightbulb-OnOff-1.png"
-              width="20px"
-            />
-          }
-          eventKey="tab-3"
-        >
-          This is content for <em>tab 3</em>
-        </Tab>
-      </TabGroup>
-    );
-  },
+  render: () => <CustomLabelTabs />,
   args: {},
 };
diff --git a/stories/TabGroup/Documentation.mdx b/stories/TabGroup/Documentation.mdx
index f2854fdd..4e97274a 100644
--- a/stories/TabGroup/Documentation.mdx
+++ b/stories/TabGroup/Documentation.mdx
@@ -27,17 +27,19 @@ When you import the button component without providing any className or style as
 
 An example with all the available properties is:
 
-```js
+```jsx
+const [activeTab, setActiveTab] = React.useState('tab-1');
+
 <TabGroup
   activeTabClassName="tab-active-class"
   id="tab-label-id"
-  activeKey="tab label"
+  activeKey={activeTab}
   disabledClassName="disabled-class-name"
   className="class-name"
   containerClassName="container-class-name"
   contentClassName="content-class-name"
   tabClassName="common-tab-class"
-  onSelect={onChangeHandler}
+  onSelect={setActiveTab}
 >
   <Tab
     label="tab label"
@@ -47,7 +49,7 @@ An example with all the available properties is:
   >
     This the content for tab
   </Tab>
-</TabGroup>
+</TabGroup>;
 ```
 
 below are described the list of all available properties. the one marked with (\*) are mandatory the other instead are optional.
diff --git a/stories/TabGroup/UnStyled.stories.js b/stories/TabGroup/UnStyled.stories.js
index e714c392..c7c07ae4 100644
--- a/stories/TabGroup/UnStyled.stories.js
+++ b/stories/TabGroup/UnStyled.stories.js
@@ -1,4 +1,23 @@
 import { TabGroup, Tab } from '../../src/tabGroup';
+import React, { useState } from 'react';
+
+const UnstyledTabs = () => {
+  const [activeTab, setActiveTab] = useState('tab-1');
+
+  return (
+    <TabGroup
+      activeKey={activeTab}
+      onSelect={setActiveTab}
+    >
+      <Tab eventKey="tab-1" label="tab 1">
+        This the content for <em>tab 1</em>
+      </Tab>
+      <Tab eventKey="tab-2" label="tab 2">
+        This the content for <em>tab 2</em>
+      </Tab>
+    </TabGroup>
+  );
+};
 
 export default {
   title: 'DCXLibrary/Layout/Tabs/Without style',
@@ -11,17 +30,6 @@ export default {
 };
 
 export const Unstyled = {
-  render: function () {
-    return (
-      <TabGroup>
-        <Tab eventKey="tab-1" label="tab 1">
-          This the content for <em>tab 1</em>
-        </Tab>
-        <Tab eventKey="tab-2" label="tab 2">
-          This the content for <em>tab 2</em>
-        </Tab>
-      </TabGroup>
-    );
-  },
+  render: () => <UnstyledTabs />,
   args: {},
 };
diff --git a/stories/liveEdit/TabGroupLive.tsx b/stories/liveEdit/TabGroupLive.tsx
index d39a1843..b6620c24 100644
--- a/stories/liveEdit/TabGroupLive.tsx
+++ b/stories/liveEdit/TabGroupLive.tsx
@@ -1,17 +1,24 @@
 import React from 'react';
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
-import { TabGroup } from '../../src/tabGroup/TabGroup';
+import { TabGroup, useTabGroup } from '../../src/tabGroup/TabGroup';
 import { Tab } from '../../src/tabGroup/components/Tab';
 
 const TabGroupDemo = `
 function TabGroupDemo() {
+    const [selectedTab, setSelectedTab] = React.useState('Tab 2');
+    
+    const handleSelect = (eventKey) => {
+      setSelectedTab(eventKey);
+    };
+
     return (
       <TabGroup
         activeTabClassName="tab-list-active"
-        activeKey="Tab 2"
+        activeKey={selectedTab}
         disabledClassName="tab-list-disabled"
         tabClassName="tab-list-item"
         className="tab-list"
+        onSelect={handleSelect}
       >
         <Tab eventKey="tab-1" label="Tab 1">This is content for <em>tab 1</em></Tab>
         <Tab eventKey="tab-2" label="Tab 2">This is content for <em>tab 2</em></Tab>
@@ -23,7 +30,7 @@ function TabGroupDemo() {
 `.trim();
 
 const TabGroupDemoLive = () => {
-  const scope = { TabGroup, Tab };
+  const scope = { TabGroup, Tab, useTabGroup };
   return (
     <LiveProvider code={TabGroupDemo} scope={scope}>
       <div className="container">

From cfd8cbae15ebd90c6ddde1620efdb45ac5af4396 Mon Sep 17 00:00:00 2001
From: fermarinsanchez <fermarinsanchez@yahoo.es>
Date: Wed, 9 Jul 2025 23:01:18 +0200
Subject: [PATCH 2/2] fix: remove useImperativeHandle. Update CHANELLOG and
 create migration.md file

---
 CHANGELOG.md              |   2 +
 migration.md              | 110 +++++++++++++++++++++
 src/tabGroup/TabGroup.tsx | 200 +++++++++++++++++---------------------
 3 files changed, 200 insertions(+), 112 deletions(-)
 create mode 100644 migration.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f680292b..0025d153 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -86,6 +86,8 @@
 
 - [Autocomplete - adding hiddenErrorText as mandatory](https://github.com/Capgemini/dcx-react-library/issues/638)
 
+- [Tabs - manage state outside component (from props) as mandatory](https://github.com/Capgemini/dcx-react-library/issues/705)
+
 **Upgrade notes**
 
 - If you upgrading from a previous release and you use the Autocomplete component it will requires the addition of a new property called **hiddenErrorText**.
diff --git a/migration.md b/migration.md
new file mode 100644
index 00000000..ef0e2d9c
--- /dev/null
+++ b/migration.md
@@ -0,0 +1,110 @@
+# Migration Guide: Tabs Component
+
+This document explains how to migrate your code from the old implementation of the `TabGroup`/`Tabs` component to the new version, which now manages active state internally and provides a simpler, more declarative API.
+
+---
+
+## Main Changes
+
+- **Removal of imperative ref-based state control:**
+  You no longer need (or are able) to manipulate the active tab using refs and imperative methods like `updateActiveTab`.
+- **Active tab state is managed internally:**
+  The active tab is now handled inside the component. You can still control it externally using the `activeKey` prop if needed.
+- **Simpler, more declarative API:**
+  Interactions are handled via standard React props and events (`onSelect`), not via refs.
+
+---
+
+## Before (Old Implementation)
+
+```jsx
+const ref = useRef();
+
+<TabGroup ref={ref} onSelect={handleSelect}>
+  <Tab eventKey="tab-1" label="Tab 1">
+    Content 1
+  </Tab>
+  <Tab eventKey="tab-2" label="Tab 2">
+    Content 2
+  </Tab>
+</TabGroup>;
+
+// Change the active tab imperatively:
+ref.current.updateActiveTab('tab-2');
+```
+
+---
+
+## After (New Implementation)
+
+### 1. **Controlled by Parent (optional):**
+
+If you want to control the active tab from the parent, use the `activeKey` prop and the `onSelect` event:
+
+```jsx
+const [activeTab, setActiveTab] = useState('tab-1');
+
+<TabGroup activeKey={activeTab} onSelect={setActiveTab}>
+  <Tab eventKey="tab-1" label="Tab 1">
+    Content 1
+  </Tab>
+  <Tab eventKey="tab-2" label="Tab 2">
+    Content 2
+  </Tab>
+</TabGroup>;
+```
+
+### 2. **Uncontrolled (Internal State):**
+
+If you do not pass `activeKey`, the component will manage the active tab internally:
+
+```jsx
+<TabGroup>
+  <Tab eventKey="tab-1" label="Tab 1">
+    Content 1
+  </Tab>
+  <Tab eventKey="tab-2" label="Tab 2">
+    Content 2
+  </Tab>
+</TabGroup>
+```
+
+---
+
+## What do you need to change in your code?
+
+1. **Remove any use of refs to manipulate the active tab.**
+2. **If you need to change the active tab from the parent, use the controlled pattern with `activeKey` and `onSelect`.**
+3. **Update your tests:**
+   - Do not use refs or imperative methods.
+   - Simulate user interactions (clicks, keyboard) and check the visual state.
+
+---
+
+## Example: Migrating a Test
+
+**Before:**
+
+```js
+// Using ref and updateActiveTab
+ref.current.updateActiveTab('tab-2');
+```
+
+**After:**
+
+```js
+// Simulate a click on the desired tab
+fireEvent.click(screen.getByText('Tab 2'));
+```
+
+---
+
+## Summary
+
+- Remove the use of refs and imperative methods.
+- Use props and events to control the active tab if needed.
+- Enjoy a simpler, more declarative API.
+
+---
+
+If you have questions, check the component documentation or open an issue.
diff --git a/src/tabGroup/TabGroup.tsx b/src/tabGroup/TabGroup.tsx
index 99c5d972..67604b3b 100644
--- a/src/tabGroup/TabGroup.tsx
+++ b/src/tabGroup/TabGroup.tsx
@@ -1,11 +1,4 @@
-import React, {
-  createContext,
-  forwardRef,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-} from 'react';
+import React, { createContext, useContext, useEffect, useRef } from 'react';
 import { classNames, Roles, useHydrated } from '../common';
 
 export type TabGroupProps = {
@@ -80,120 +73,103 @@ type TabContextProps = {
 
 export const TabContext = createContext<TabContextProps | undefined>(undefined);
 
-export const TabGroup = forwardRef(
-  (
-    {
-      children,
-      id,
-      ariaLabelTabList,
-      activeTabClassName,
-      disabledClassName,
-      activeKey,
-      className,
-      containerClassName,
-      contentClassName,
-      tabClassName,
-      tabLinkClassName,
-      onSelect,
-    }: TabGroupProps,
-    ref: any
-  ) => {
-    const hasUniqueEventKeys: (children: JSX.Element[]) => boolean = (
-      children: JSX.Element[]
-    ) =>
-      children.length ===
-      new Set(children.map((child: JSX.Element) => child.props.eventKey)).size;
-
-    if (!hasUniqueEventKeys(children)) {
-      throw new Error('Tab event keys must be unique');
-    }
-
-    const initialMount = useRef(true);
-
-    const currentActiveKey = activeKey || children[0].props.eventKey;
+export const TabGroup = ({
+  children,
+  id,
+  ariaLabelTabList,
+  activeTabClassName,
+  disabledClassName,
+  activeKey,
+  className,
+  containerClassName,
+  contentClassName,
+  tabClassName,
+  tabLinkClassName,
+  onSelect,
+}: TabGroupProps) => {
+  const hasUniqueEventKeys: (children: JSX.Element[]) => boolean = (
+    children: JSX.Element[]
+  ) =>
+    children.length ===
+    new Set(children.map((child: JSX.Element) => child.props.eventKey)).size;
+
+  if (!hasUniqueEventKeys(children)) {
+    throw new Error('Tab event keys must be unique');
+  }
 
-    const onClickHandler: (id: string) => void = (id: string) => {
-      onSelect && onSelect(id);
-    };
+  const initialMount = useRef(true);
 
-    const updateActiveTab: (id: string) => boolean = (id: string) => {
-      if (children.some((child: JSX.Element) => child.props.eventKey === id)) {
-        onSelect && onSelect(id);
-        return true;
-      }
-      return false;
-    };
+  const currentActiveKey = activeKey || children[0].props.eventKey;
 
-    useImperativeHandle(ref, () => ({
-      updateActiveTab,
-    }));
+  const onClickHandler: (id: string) => void = (id: string) => {
+    onSelect && onSelect(id);
+  };
 
-    useEffect(() => {
-      if (!initialMount.current) onSelect && onSelect(currentActiveKey);
-      else initialMount.current = false;
-    }, [currentActiveKey]);
+  useEffect(() => {
+    if (!initialMount.current) onSelect && onSelect(currentActiveKey);
+    else initialMount.current = false;
+  }, [currentActiveKey]);
 
-    const activeTabElement = children.find(
-      (child: JSX.Element) => currentActiveKey === child.props.eventKey
-    );
+  const activeTabElement = children.find(
+    (child: JSX.Element) => currentActiveKey === child.props.eventKey
+  );
 
-    const hydrated = useHydrated();
+  const hydrated = useHydrated();
 
-    const tabPanels = hydrated ? [activeTabElement] : children;
+  const tabPanels = hydrated ? [activeTabElement] : children;
 
-    return (
-      <div className={containerClassName}>
-        <ol
-          role={Roles.tablist}
-          id={id}
-          className={className}
-          aria-label={ariaLabelTabList}
+  return (
+    <div className={containerClassName}>
+      <ol
+        role={Roles.tablist}
+        id={id}
+        className={className}
+        aria-label={ariaLabelTabList}
+      >
+        <TabContext.Provider
+          value={{
+            activeTab: currentActiveKey,
+            changeActiveTab: onClickHandler,
+          }}
         >
-          <TabContext.Provider
-            value={{
-              activeTab: currentActiveKey,
-              changeActiveTab: onClickHandler,
-            }}
-          >
-            {children.map((child: JSX.Element, index: number) => {
-              const classes: string = classNames([
-                tabClassName,
-                child.props.className,
-              ]);
-
-              return (
-                <child.type
-                  key={index}
-                  {...child.props}
-                  activeTabClassName={activeTabClassName}
-                  ariaControls={child.props.eventKey}
-                  disabledClassName={disabledClassName}
-                  className={classes}
-                  linkClassName={tabLinkClassName}
-                />
-              );
-            })}
-          </TabContext.Provider>
-        </ol>
-        {tabPanels.map((tabPanel: JSX.Element | undefined, index: number) => (
-          <React.Fragment key={index}>
-            {tabPanel && (
-              <div
-                id={tabPanel.props.eventKey}
+          {children.map((child: JSX.Element, index: number) => {
+            const classes: string = classNames([
+              tabClassName,
+              child.props.className,
+            ]);
+
+            return (
+              <child.type
                 key={index}
-                role={Roles.tabpanel}
-                className={contentClassName}
-                aria-labelledby={tabPanel.props.eventKey}
-              >
-                {tabPanel.props.children}
-              </div>
-            )}
-          </React.Fragment>
-        ))}
-      </div>
-    );
-  }
-);
+                {...child.props}
+                activeTabClassName={activeTabClassName}
+                ariaControls={child.props.eventKey}
+                disabledClassName={disabledClassName}
+                className={classes}
+                linkClassName={tabLinkClassName}
+              />
+            );
+          })}
+        </TabContext.Provider>
+      </ol>
+      {tabPanels.map((tabPanel: JSX.Element | undefined, index: number) => (
+        <React.Fragment key={index}>
+          {tabPanel && (
+            <div
+              id={tabPanel.props.eventKey}
+              key={index}
+              role={Roles.tabpanel}
+              className={contentClassName}
+              aria-labelledby={tabPanel.props.eventKey}
+            >
+              {tabPanel.props.children}
+            </div>
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
 
 export const useTabGroup = () => {
   const context = useContext(TabContext);