@docusaurus/theme-classic 0.0.0-4285 → 0.0.0-4286

package/lib/theme-classic.d.ts

@@ -516,6 +516,7 @@ declare module '@theme/TabItem' {
     readonly label?: string;
     readonly hidden?: boolean;
     readonly className?: string;
+    readonly attributes?: Record<string, unknown>;
   }
 
   const TabItem: (props: Props) => JSX.Element;
@@ -531,7 +532,11 @@ declare module '@theme/Tabs' {
     readonly block?: boolean;
     readonly children: readonly ReactElement<TabItemProps>[];
     readonly defaultValue?: string | null;
-    readonly values?: readonly {value: string; label?: string}[];
+    readonly values?: readonly {
+      value: string;
+      label?: string;
+      attributes?: Record<string, unknown>;
+    }[];
     readonly groupId?: string;
     readonly className?: string;
   }

package/lib-next/theme/Tabs/index.js

@@ -39,10 +39,11 @@ function TabsComponent(props) {
     );
   });
   const values =
-    valuesProp ??
-    children.map(({props: {value, label}}) => ({
+    valuesProp ?? // We only pick keys that we recognize. MDX would inject some keys by default
+    children.map(({props: {value, label, attributes}}) => ({
       value,
       label,
+      attributes,
     }));
   const dup = duplicates(values, (a, b) => a.value === b.value);
 
@@ -139,19 +140,25 @@ function TabsComponent(props) {
           },
           className,
         )}>
-        {values.map(({value, label}) => (
+        {values.map(({value, label, attributes}) => (
           <li
             role="tab"
             tabIndex={selectedValue === value ? 0 : -1}
             aria-selected={selectedValue === value}
-            className={clsx('tabs__item', styles.tabItem, {
-              'tabs__item--active': selectedValue === value,
-            })}
             key={value}
             ref={(tabControl) => tabRefs.push(tabControl)}
             onKeyDown={handleKeydown}
             onFocus={handleTabChange}
-            onClick={handleTabChange}>
+            onClick={handleTabChange}
+            {...attributes}
+            className={clsx(
+              'tabs__item',
+              styles.tabItem,
+              attributes?.className,
+              {
+                'tabs__item--active': selectedValue === value,
+              },
+            )}>
             {label ?? value}
           </li>
         ))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4285",
+  "version": "0.0.0-4286",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -23,14 +23,14 @@
     "update-code-translations": "node -e 'require(\"./update-code-translations.js\").run()'"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4285",
-    "@docusaurus/plugin-content-blog": "0.0.0-4285",
-    "@docusaurus/plugin-content-docs": "0.0.0-4285",
-    "@docusaurus/plugin-content-pages": "0.0.0-4285",
-    "@docusaurus/theme-common": "0.0.0-4285",
-    "@docusaurus/theme-translations": "0.0.0-4285",
-    "@docusaurus/utils": "0.0.0-4285",
-    "@docusaurus/utils-validation": "0.0.0-4285",
+    "@docusaurus/core": "0.0.0-4286",
+    "@docusaurus/plugin-content-blog": "0.0.0-4286",
+    "@docusaurus/plugin-content-docs": "0.0.0-4286",
+    "@docusaurus/plugin-content-pages": "0.0.0-4286",
+    "@docusaurus/theme-common": "0.0.0-4286",
+    "@docusaurus/theme-translations": "0.0.0-4286",
+    "@docusaurus/utils": "0.0.0-4286",
+    "@docusaurus/utils-validation": "0.0.0-4286",
     "@mdx-js/mdx": "^1.6.21",
     "@mdx-js/react": "^1.6.21",
     "chalk": "^4.1.2",
@@ -46,8 +46,8 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4285",
-    "@docusaurus/types": "0.0.0-4285",
+    "@docusaurus/module-type-aliases": "0.0.0-4286",
+    "@docusaurus/types": "0.0.0-4286",
     "@types/mdx-js__react": "^1.5.4",
     "@types/parse-numeric-range": "^0.0.1",
     "@types/rtlcss": "^3.1.1",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "8296043e765cbf0d41e33516e8acb36a6268f922"
+  "gitHead": "2a87bcff19729fff3df8fe20ca79fcac87b31371"
 }

package/src/theme/Tabs/index.tsx

@@ -51,7 +51,13 @@ function TabsComponent(props: Props): JSX.Element {
     );
   });
   const values =
-    valuesProp ?? children.map(({props: {value, label}}) => ({value, label}));
+    valuesProp ??
+    // We only pick keys that we recognize. MDX would inject some keys by default
+    children.map(({props: {value, label, attributes}}) => ({
+      value,
+      label,
+      attributes,
+    }));
   const dup = duplicates(values, (a, b) => a.value === b.value);
   if (dup.length > 0) {
     throw new Error(
@@ -144,19 +150,25 @@ function TabsComponent(props: Props): JSX.Element {
           },
           className,
         )}>
-        {values.map(({value, label}) => (
+        {values.map(({value, label, attributes}) => (
           <li
             role="tab"
             tabIndex={selectedValue === value ? 0 : -1}
             aria-selected={selectedValue === value}
-            className={clsx('tabs__item', styles.tabItem, {
-              'tabs__item--active': selectedValue === value,
-            })}
             key={value}
             ref={(tabControl) => tabRefs.push(tabControl)}
             onKeyDown={handleKeydown}
             onFocus={handleTabChange}
-            onClick={handleTabChange}>
+            onClick={handleTabChange}
+            {...attributes}
+            className={clsx(
+              'tabs__item',
+              styles.tabItem,
+              attributes?.className as string,
+              {
+                'tabs__item--active': selectedValue === value,
+              },
+            )}>
             {label ?? value}
           </li>
         ))}

package/src/theme-classic.d.ts

@@ -516,6 +516,7 @@ declare module '@theme/TabItem' {
     readonly label?: string;
     readonly hidden?: boolean;
     readonly className?: string;
+    readonly attributes?: Record<string, unknown>;
   }
 
   const TabItem: (props: Props) => JSX.Element;
@@ -531,7 +532,11 @@ declare module '@theme/Tabs' {
     readonly block?: boolean;
     readonly children: readonly ReactElement<TabItemProps>[];
     readonly defaultValue?: string | null;
-    readonly values?: readonly {value: string; label?: string}[];
+    readonly values?: readonly {
+      value: string;
+      label?: string;
+      attributes?: Record<string, unknown>;
+    }[];
     readonly groupId?: string;
     readonly className?: string;
   }