feat: Tabs - allowEmpty

Author: apostololeg

src/components/Tabs/Tabs.tsx

@@ -17,6 +17,7 @@ export function Tabs(props: T.Props) {
     contentClassName,
     items,
     hideTabsIfSingle = false,
+    allowEmpty = false,
     onChange,
     renderAll,
     activeId: initialId,
@@ -33,16 +34,21 @@ export function Tabs(props: T.Props) {
     }
   }, [initialId]);
 
-  const onTabClick = useCallback((e, { id, onClick } = {} as T.Item) => {
-    // @ts-ignore
-    if (onClick && !onClick(e)) {
-      e.peventDefault();
-      return;
-    }
+  const onTabClick = useCallback(
+    (e, { id, onClick } = {} as T.Item) => {
+      // @ts-ignore
+      if (onClick && !onClick(e)) {
+        e.peventDefault();
+        return;
+      }
+
+      const newId = allowEmpty && id === activeId ? null : id;
 
-    setActiveId(id);
-    onChange?.(id);
-  }, []);
+      setActiveId(newId);
+      onChange?.(newId);
+    },
+    [activeId]
+  );
 
   const tabsContent = [];
   const tabsButtons = items.map((params: T.Item) => {

src/components/Tabs/Tabs.types.ts

@@ -23,6 +23,8 @@ export type Props = {
   contentClassName?: string;
   items: Item[];
   hideTabsIfSingle?: boolean;
+  // Allow to unselect tab, so no content will be rendered
+  allowEmpty?: boolean;
   activeId?: ID;
   onChange: (id: ID) => void;
   renderAll?: boolean;