From e5ba60a1c042114d86181d079c0dc3a6d72d4cf3 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Tue, 17 Dec 2024 14:38:14 +0000
Subject: [PATCH] chore: add className modifiers for TabManu root and contents
 elements

---
 src/core/TabMenu.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/core/TabMenu.tsx b/src/core/TabMenu.tsx
index dfbdfdea..f515eb3d 100644
--- a/src/core/TabMenu.tsx
+++ b/src/core/TabMenu.tsx
@@ -27,6 +27,16 @@ export type TabMenuProps = {
    */
   tabClassName?: string;
 
+  /**
+   * An optional class name to apply to the Tabs.Root element.
+   */
+  rootClassName?: string;
+
+  /**
+   * An optional class name to apply to the Tabs.Content element.
+   */
+  contentClassName?: string;
+
   /**
    * Optional configuration options for the TabMenu.
    */
@@ -65,6 +75,8 @@ const TabMenu: React.FC<TabMenuProps> = ({
   contents = [],
   tabOnClick,
   tabClassName,
+  rootClassName,
+  contentClassName,
   options,
 }) => {
   const {
@@ -129,7 +141,7 @@ const TabMenu: React.FC<TabMenuProps> = ({
   return (
     <Tabs.Root
       defaultValue={`tab-${defaultTabIndex}`}
-      className={cn({ "h-full": flexibleTabHeight })}
+      className={cn({ "h-full": flexibleTabHeight }, rootClassName)}
     >
       <Tabs.List
         ref={listRef}
@@ -170,7 +182,11 @@ const TabMenu: React.FC<TabMenuProps> = ({
         ></div>
       </Tabs.List>
       {contents.map((content, index) => (
-        <Tabs.Content key={`tab-${index}`} value={`tab-${index}`}>
+        <Tabs.Content
+          key={`tab-${index}`}
+          value={`tab-${index}`}
+          className={contentClassName}
+        >
           {content}
         </Tabs.Content>
       ))}