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

package/lib/theme-classic.d.ts

@@ -6,7 +6,9 @@
  */
 
 declare module '@docusaurus/theme-classic' {
-  export type Options = Partial<import('./index').PluginOptions>;
+  export type Options = {
+    customCss?: string | string[];
+  };
 }
 
 declare module '@theme/AnnouncementBar' {
@@ -202,18 +204,6 @@ declare module '@theme/hooks/useHideableNavbar' {
   export default useHideableNavbar;
 }
 
-declare module '@theme/hooks/useLocationHash' {
-  import type {Dispatch, SetStateAction} from 'react';
-
-  export type useLocationHashReturns = readonly [
-    string,
-    Dispatch<SetStateAction<string>>,
-  ];
-
-  const useLocationHash: (initialHash: string) => useLocationHashReturns;
-  export default useLocationHash;
-}
-
 declare module '@theme/hooks/useLockBodyScroll' {
   const useLockBodyScroll: (lock?: boolean) => void;
   export default useLockBodyScroll;
@@ -526,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;
@@ -541,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/NavbarItem/DropdownNavbarItem.js

@@ -39,7 +39,6 @@ function containsActiveItems(items, localPathname) {
 
 function DropdownNavbarItemDesktop({items, position, className, ...props}) {
   const dropdownRef = useRef(null);
-  const dropdownMenuRef = useRef(null);
   const [showDropdown, setShowDropdown] = useState(false);
   useEffect(() => {
     const handleClickOutside = (event) => {
@@ -77,7 +76,7 @@ function DropdownNavbarItemDesktop({items, position, className, ...props}) {
         }}>
         {props.children ?? props.label}
       </NavLink>
-      <ul ref={dropdownMenuRef} className="dropdown__menu">
+      <ul className="dropdown__menu">
         {items.map((childItemProps, i) => (
           <NavbarItem
             isDropdownItem

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-4279",
+  "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-4279",
-    "@docusaurus/plugin-content-blog": "0.0.0-4279",
-    "@docusaurus/plugin-content-docs": "0.0.0-4279",
-    "@docusaurus/plugin-content-pages": "0.0.0-4279",
-    "@docusaurus/theme-common": "0.0.0-4279",
-    "@docusaurus/theme-translations": "0.0.0-4279",
-    "@docusaurus/utils": "0.0.0-4279",
-    "@docusaurus/utils-validation": "0.0.0-4279",
+    "@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-4279",
-    "@docusaurus/types": "0.0.0-4279",
+    "@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": "6075dccc83c1127e43a59b5f881bf8da07390962"
+  "gitHead": "2a87bcff19729fff3df8fe20ca79fcac87b31371"
 }

package/src/index.ts

@@ -13,6 +13,7 @@ import {createRequire} from 'module';
 import type {Plugin as PostCssPlugin} from 'postcss';
 import rtlcss from 'rtlcss';
 import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
+import type {Options} from '@docusaurus/theme-classic';
 
 const requireFromDocusaurusCore = createRequire(
   require.resolve('@docusaurus/core/package.json'),
@@ -89,13 +90,9 @@ function getInfimaCSSFile(direction: string) {
   }.css`;
 }
 
-export type PluginOptions = {
-  customCss?: string | string[];
-};
-
 export default function docusaurusThemeClassic(
   context: DocusaurusContext, // TODO: LoadContext is missing some of properties
-  options: PluginOptions,
+  options: Options,
 ): Plugin<void> {
   const {
     siteConfig: {themeConfig: roughlyTypedThemeConfig},

package/src/theme/NavbarItem/DropdownNavbarItem.tsx

@@ -55,7 +55,6 @@ function DropdownNavbarItemDesktop({
   ...props
 }: DesktopOrMobileNavBarItemProps) {
   const dropdownRef = useRef<HTMLDivElement>(null);
-  const dropdownMenuRef = useRef<HTMLUListElement>(null);
   const [showDropdown, setShowDropdown] = useState(false);
 
   useEffect(() => {
@@ -98,7 +97,7 @@ function DropdownNavbarItemDesktop({
         }}>
         {props.children ?? props.label}
       </NavLink>
-      <ul ref={dropdownMenuRef} className="dropdown__menu">
+      <ul className="dropdown__menu">
         {items.map((childItemProps, i) => (
           <NavbarItem
             isDropdownItem

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

@@ -6,7 +6,9 @@
  */
 
 declare module '@docusaurus/theme-classic' {
-  export type Options = Partial<import('./index').PluginOptions>;
+  export type Options = {
+    customCss?: string | string[];
+  };
 }
 
 declare module '@theme/AnnouncementBar' {
@@ -202,18 +204,6 @@ declare module '@theme/hooks/useHideableNavbar' {
   export default useHideableNavbar;
 }
 
-declare module '@theme/hooks/useLocationHash' {
-  import type {Dispatch, SetStateAction} from 'react';
-
-  export type useLocationHashReturns = readonly [
-    string,
-    Dispatch<SetStateAction<string>>,
-  ];
-
-  const useLocationHash: (initialHash: string) => useLocationHashReturns;
-  export default useLocationHash;
-}
-
 declare module '@theme/hooks/useLockBodyScroll' {
   const useLockBodyScroll: (lock?: boolean) => void;
   export default useLockBodyScroll;
@@ -526,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;
@@ -541,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/babel.config.js

@@ -1,35 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-module.exports = {
-  env: {
-    // USED FOR NODE/RUNTIME
-    // maybe we should differenciate both cases because
-    // we mostly need to transpile some features so that node does not crash...
-    lib: {
-      presets: [
-        ['@babel/preset-typescript', {isTSX: true, allExtensions: true}],
-      ],
-      // Useful to transpile for older node versions
-      plugins: [
-        '@babel/plugin-transform-modules-commonjs',
-        '@babel/plugin-proposal-nullish-coalescing-operator',
-        '@babel/plugin-proposal-optional-chaining',
-      ],
-    },
-
-    // USED FOR JS SWIZZLE
-    // /lib-next folder is used as source to swizzle JS source code
-    // This JS code is created from TS source code
-    // This source code should look clean/human readable to be usable
-    'lib-next': {
-      presets: [
-        ['@babel/preset-typescript', {isTSX: true, allExtensions: true}],
-      ],
-    },
-  },
-};

package/lib/__tests__/__snapshots__/translations.test.ts.snap

@@ -1,116 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`getTranslationFiles should return translation files matching snapshot 1`] = `
-Array [
-  Object {
-    "content": Object {
-      "item.label.Dropdown": Object {
-        "description": "Navbar item with label Dropdown",
-        "message": "Dropdown",
-      },
-      "item.label.Dropdown item 1": Object {
-        "description": "Navbar item with label Dropdown item 1",
-        "message": "Dropdown item 1",
-      },
-      "item.label.Dropdown item 2": Object {
-        "description": "Navbar item with label Dropdown item 2",
-        "message": "Dropdown item 2",
-      },
-      "title": Object {
-        "description": "The title in the navbar",
-        "message": "navbar title",
-      },
-    },
-    "path": "navbar",
-  },
-  Object {
-    "content": Object {
-      "copyright": Object {
-        "description": "The footer copyright",
-        "message": "Copyright FB",
-      },
-      "link.item.label.Link 1": Object {
-        "description": "The label of footer link with label=Link 1 linking to https://facebook.com",
-        "message": "Link 1",
-      },
-      "link.item.label.Link 2": Object {
-        "description": "The label of footer link with label=Link 2 linking to https://facebook.com",
-        "message": "Link 2",
-      },
-      "link.item.label.Link 3": Object {
-        "description": "The label of footer link with label=Link 3 linking to https://facebook.com",
-        "message": "Link 3",
-      },
-      "link.title.Footer link column 1": Object {
-        "description": "The title of the footer links column with title=Footer link column 1 in the footer",
-        "message": "Footer link column 1",
-      },
-      "link.title.Footer link column 2": Object {
-        "description": "The title of the footer links column with title=Footer link column 2 in the footer",
-        "message": "Footer link column 2",
-      },
-    },
-    "path": "footer",
-  },
-]
-`;
-
-exports[`translateThemeConfig should return translated themeConfig matching snapshot 1`] = `
-Object {
-  "announcementBar": Object {},
-  "colorMode": Object {},
-  "docs": Object {
-    "versionPersistence": "none",
-  },
-  "footer": Object {
-    "copyright": "Copyright FB (translated)",
-    "links": Array [
-      Object {
-        "items": Array [
-          Object {
-            "label": "Link 1 (translated)",
-            "to": "https://facebook.com",
-          },
-          Object {
-            "label": "Link 2 (translated)",
-            "to": "https://facebook.com",
-          },
-        ],
-        "title": "Footer link column 1 (translated)",
-      },
-      Object {
-        "items": Array [
-          Object {
-            "label": "Link 3 (translated)",
-            "to": "https://facebook.com",
-          },
-        ],
-        "title": "Footer link column 2 (translated)",
-      },
-    ],
-    "style": "light",
-  },
-  "hideableSidebar": true,
-  "navbar": Object {
-    "hideOnScroll": false,
-    "items": Array [
-      Object {
-        "items": Array [
-          Object {
-            "items": Array [],
-            "label": "Dropdown item 1 (translated)",
-          },
-          Object {
-            "items": Array [],
-            "label": "Dropdown item 2 (translated)",
-          },
-        ],
-        "label": "Dropdown (translated)",
-      },
-    ],
-    "style": "dark",
-    "title": "navbar title (translated)",
-  },
-  "prism": Object {},
-}
-`;

package/lib/__tests__/translations.test.js

@@ -1,112 +0,0 @@
-"use strict";
-
-var _translations = require("../translations");
-
-var _utils = require("@docusaurus/utils");
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-const ThemeConfigSample = {
-  colorMode: {},
-  announcementBar: {},
-  prism: {},
-  docs: {
-    versionPersistence: 'none'
-  },
-  hideableSidebar: true,
-  navbar: {
-    title: 'navbar title',
-    style: 'dark',
-    hideOnScroll: false,
-    items: [{
-      label: 'Dropdown',
-      items: [{
-        label: 'Dropdown item 1',
-        items: []
-      }, {
-        label: 'Dropdown item 2',
-        items: []
-      }]
-    }]
-  },
-  footer: {
-    copyright: 'Copyright FB',
-    style: 'light',
-    links: [{
-      title: 'Footer link column 1',
-      items: [{
-        label: 'Link 1',
-        to: 'https://facebook.com'
-      }, {
-        label: 'Link 2',
-        to: 'https://facebook.com'
-      }]
-    }, {
-      title: 'Footer link column 2',
-      items: [{
-        label: 'Link 3',
-        to: 'https://facebook.com'
-      }]
-    }]
-  }
-};
-
-function getSampleTranslationFiles() {
-  return (0, _translations.getTranslationFiles)({
-    themeConfig: ThemeConfigSample
-  });
-}
-
-function getSampleTranslationFilesTranslated() {
-  const translationFiles = getSampleTranslationFiles();
-  return translationFiles.map(translationFile => (0, _utils.updateTranslationFileMessages)(translationFile, message => `${message} (translated)`));
-}
-
-describe('getTranslationFiles', () => {
-  test('should return translation files matching snapshot', () => {
-    expect(getSampleTranslationFiles()).toMatchSnapshot();
-  });
-});
-describe('translateThemeConfig', () => {
-  test('should not translate anything if translation files are untranslated', () => {
-    const translationFiles = getSampleTranslationFiles();
-    expect((0, _translations.translateThemeConfig)({
-      themeConfig: ThemeConfigSample,
-      translationFiles
-    })).toEqual(ThemeConfigSample);
-  });
-  test('should return translated themeConfig matching snapshot', () => {
-    const translationFiles = getSampleTranslationFilesTranslated();
-    expect((0, _translations.translateThemeConfig)({
-      themeConfig: ThemeConfigSample,
-      translationFiles
-    })).toMatchSnapshot();
-  });
-});
-describe('getTranslationFiles and translateThemeConfig isomorphism', () => {
-  function verifyIsomorphism(themeConfig) {
-    const translationFiles = (0, _translations.getTranslationFiles)({
-      themeConfig
-    });
-    const translatedThemeConfig = (0, _translations.translateThemeConfig)({
-      themeConfig,
-      translationFiles
-    });
-    expect(translatedThemeConfig).toEqual(themeConfig);
-  }
-
-  test('should be verified for main sample', () => {
-    verifyIsomorphism(ThemeConfigSample);
-  }); // undefined footer should not make the translation code crash
-  // See https://github.com/facebook/docusaurus/issues/3936
-
-  test('should be verified for sample without footer', () => {
-    verifyIsomorphism({ ...ThemeConfigSample,
-      footer: undefined
-    });
-  });
-});