From e65c12e1187cc6f636eca0702a39f0d2eae86b95 Mon Sep 17 00:00:00 2001
From: Kevin Manson <kevin.manson@qohash.com>
Date: Fri, 4 Oct 2024 15:00:32 -0400
Subject: [PATCH] fix: tab deletion

---
 src/Tabs.tsx                | 12 +++++++-----
 src/__tests__/Tabs.test.tsx | 12 ++++++++++++
 src/__tests__/suts.tsx      |  7 +++++++
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index c439cb2..ec16a9b 100644
--- a/src/Tabs.tsx
+++ b/src/Tabs.tsx
@@ -122,11 +122,13 @@ const Tabs = ({
 
     const idsToCreate = tabNames.length - tabIds.current.length
 
-    tabIds.current.push(
-      ...Array.from(new Array(idsToCreate)).map(
-        (_, index) => `${id}-${tabNames.length + index - 1}`,
-      ),
-    )
+    if (idsToCreate > 0) {
+      tabIds.current.push(
+        ...Array.from(new Array(idsToCreate)).map(
+          (_, index) => `${id}-${tabNames.length + index - 1}`,
+        ),
+      )
+    }
 
     return React.Children.map(children, (child) => {
       if (isTabListElement(child)) {
diff --git a/src/__tests__/Tabs.test.tsx b/src/__tests__/Tabs.test.tsx
index 840e145..c3c7a18 100644
--- a/src/__tests__/Tabs.test.tsx
+++ b/src/__tests__/Tabs.test.tsx
@@ -35,6 +35,7 @@ const ui = {
   prevButton: byRole('button', { name: 'Prev' }),
   nextButton: byRole('button', { name: 'Next' }),
   addButton: byRole('button', { name: 'Add' }),
+  removeButton: byRole('button', { name: 'Remove' }),
   externalButton: byRole('button', { name: 'Action' }),
   externalParagraph: byText('text text'),
   asyncTab: byRole('tab', { name: 'Async' }),
@@ -290,6 +291,17 @@ describe('Tabs', () => {
         })
       })
     })
+
+    describe('when removing a tab', () => {
+      beforeEach(async () => {
+        expect(ui.tab2.get()).toBeInTheDocument()
+        await userEvent.click(ui.removeButton.get())
+      })
+
+      it('should remove the second tab', () => {
+        expect(ui.tab2.query()).not.toBeInTheDocument()
+      })
+    })
   })
 
   describe('keyboard management', () => {
diff --git a/src/__tests__/suts.tsx b/src/__tests__/suts.tsx
index 9d4e172..45b873f 100644
--- a/src/__tests__/suts.tsx
+++ b/src/__tests__/suts.tsx
@@ -58,6 +58,10 @@ export function displayComponentWithControls() {
       setTabs([...tabs, `Tab ${tabs.length + 1}`])
     }
 
+    const remove = () => {
+      setTabs(tabs.slice(0, tabs.length - 1))
+    }
+
     return (
       <>
         <Tabs onSelect={setSelected} selected={selected}>
@@ -79,6 +83,9 @@ export function displayComponentWithControls() {
         <button type="button" onClick={add}>
           Add
         </button>
+        <button type="button" onClick={remove}>
+          Remove
+        </button>
       </>
     )
   }