fix: tab deletion

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)) {

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', () => {

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>
       </>
     )
   }