fix(tabs): unregister when tab child unmount

components/tabs/tabs-context.ts

@@ -8,6 +8,7 @@ export interface TabsLabelItem {
 
 export interface TabsConfig {
   register?: (item: TabsLabelItem) => void
+  unregister?: (item: TabsLabelItem) => void
   currentValue?: string
   inGroup: boolean
 }

components/tabs/tabs-item.tsx

@@ -18,11 +18,14 @@ const TabsItem: React.FC<React.PropsWithChildren<TabsItemProps>> = ({
   children, value: userCustomValue, label, disabled,
 }) => {
   const value = useMemo(() => userCustomValue || `${label}`, [userCustomValue, label])
-  const { register, currentValue } = useTabsContext()
+  const { register, unregister, currentValue } = useTabsContext()
   const isActive = useMemo(() => currentValue === value, [currentValue, value])
 
   useEffect(() => {
     register && register({ value, label, disabled })
+    return () => {
+      unregister && unregister({ value, label, disabled })
+    }
   }, [])
 
   /* eslint-disable react/jsx-no-useless-fragment */

components/tabs/tabs.tsx

@@ -34,9 +34,13 @@ const Tabs: React.FC<React.PropsWithChildren<TabsProps>> = ({
     }
     setTabs([...tabsRef.current, next])
   }
+  const unregister = (next: TabsLabelItem) => {
+    const nextTabs = tabsRef.current.filter(item => item.value !== next.value)
+    setTabs([...nextTabs])
+  }
   
   const initialValue = useMemo<TabsConfig>(() => ({
-    register,
+    register, unregister,
     currentValue: selfValue,
     inGroup: true,
   }), [selfValue])