@docusaurus/theme-classic 0.0.0-4366 → 0.0.0-4377

package/src/theme/Heading/index.tsx

@@ -7,62 +7,55 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import type {HeadingType, Props} from '@theme/Heading';
+import type {Props} from '@theme/Heading';
 import {translate} from '@docusaurus/Translate';
 import {useThemeConfig} from '@docusaurus/theme-common';
 
 import './styles.css';
 import styles from './styles.module.css';
 
-type HeadingComponent = (props: Props) => JSX.Element;
+function AnchorHeading({as: As, id, ...props}: Props) {
+  const {
+    navbar: {hideOnScroll},
+  } = useThemeConfig();
 
-// eslint-disable-next-line react/function-component-definition
-export const MainHeading: HeadingComponent = ({...props}) => (
-  <header>
-    <h1
+  if (!id) {
+    return <As {...props} />;
+  }
+
+  return (
+    <As
       {...props}
-      id={undefined} // h1 headings do not need an id because they don't appear in the TOC
-    >
+      className={clsx('anchor', {
+        [styles.anchorWithHideOnScrollNavbar]: hideOnScroll,
+        [styles.anchorWithStickyNavbar]: !hideOnScroll,
+      })}
+      id={id}>
       {props.children}
-    </h1>
-  </header>
-);
-
-const createAnchorHeading =
-  (Tag: HeadingType) =>
-  ({id, ...props}: Props) => {
-    const {
-      navbar: {hideOnScroll},
-    } = useThemeConfig();
-
-    if (!id) {
-      return <Tag {...props} />;
-    }
-
+      <a
+        className="hash-link"
+        href={`#${id}`}
+        title={translate({
+          id: 'theme.common.headingLinkTitle',
+          message: 'Direct link to heading',
+          description: 'Title for link to heading',
+        })}>
+        &#8203;
+      </a>
+    </As>
+  );
+}
+
+export default function Heading({as, ...props}: Props) {
+  if (as === 'h1') {
     return (
-      <Tag
+      <h1
         {...props}
-        className={clsx('anchor', {
-          [styles.anchorWithHideOnScrollNavbar]: hideOnScroll,
-          [styles.anchorWithStickyNavbar]: !hideOnScroll,
-        })}
-        id={id}>
+        id={undefined} // h1 headings do not need an id because they don't appear in the TOC
+      >
         {props.children}
-        <a
-          className="hash-link"
-          href={`#${id}`}
-          title={translate({
-            id: 'theme.common.headingLinkTitle',
-            message: 'Direct link to heading',
-            description: 'Title for link to heading',
-          })}>
-          &#8203;
-        </a>
-      </Tag>
+      </h1>
     );
-  };
-
-const Heading = (headingType: HeadingType): ((props: Props) => JSX.Element) =>
-  headingType === 'h1' ? MainHeading : createAnchorHeading(headingType);
-
-export default Heading;
+  }
+  return <AnchorHeading as={as} {...props} />;
+}

package/src/theme/Layout/index.tsx

@@ -15,8 +15,7 @@ import Footer from '@theme/Footer';
 import LayoutProviders from '@theme/LayoutProviders';
 import LayoutHead from '@theme/LayoutHead';
 import type {Props} from '@theme/Layout';
-import useKeyboardNavigation from '@theme/hooks/useKeyboardNavigation';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {ThemeClassNames, useKeyboardNavigation} from '@docusaurus/theme-common';
 import ErrorPageContent from '@theme/ErrorPageContent';
 import './styles.css';
 

package/src/theme/LayoutProviders/index.tsx

@@ -6,9 +6,9 @@
  */
 
 import React from 'react';
-import ThemeProvider from '@theme/ThemeProvider';
-import UserPreferencesProvider from '@theme/UserPreferencesProvider';
 import {
+  ColorModeProvider,
+  TabGroupChoiceProvider,
   AnnouncementBarProvider,
   DocsPreferredVersionContextProvider,
   MobileSecondaryMenuProvider,
@@ -18,9 +18,9 @@ import type {Props} from '@theme/LayoutProviders';
 
 export default function LayoutProviders({children}: Props): JSX.Element {
   return (
-    <ThemeProvider>
+    <ColorModeProvider>
       <AnnouncementBarProvider>
-        <UserPreferencesProvider>
+        <TabGroupChoiceProvider>
           <ScrollControllerProvider>
             <DocsPreferredVersionContextProvider>
               <MobileSecondaryMenuProvider>
@@ -28,8 +28,8 @@ export default function LayoutProviders({children}: Props): JSX.Element {
               </MobileSecondaryMenuProvider>
             </DocsPreferredVersionContextProvider>
           </ScrollControllerProvider>
-        </UserPreferencesProvider>
+        </TabGroupChoiceProvider>
       </AnnouncementBarProvider>
-    </ThemeProvider>
+    </ColorModeProvider>
   );
 }

package/src/theme/MDXComponents/index.tsx

@@ -67,12 +67,12 @@ const MDXComponents: MDXComponentsObject = {
       </Details>
     );
   },
-  h1: Heading('h1'),
-  h2: Heading('h2'),
-  h3: Heading('h3'),
-  h4: Heading('h4'),
-  h5: Heading('h5'),
-  h6: Heading('h6'),
+  h1: (props) => <Heading as="h1" {...props} />,
+  h2: (props) => <Heading as="h2" {...props} />,
+  h3: (props) => <Heading as="h3" {...props} />,
+  h4: (props) => <Heading as="h4" {...props} />,
+  h5: (props) => <Heading as="h5" {...props} />,
+  h6: (props) => <Heading as="h6" {...props} />,
 };
 
 export default MDXComponents;

package/src/theme/Navbar/index.tsx

@@ -10,17 +10,17 @@ import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import SearchBar from '@theme/SearchBar';
 import Toggle from '@theme/Toggle';
-import useThemeContext from '@theme/hooks/useThemeContext';
 import {
   useThemeConfig,
   useMobileSecondaryMenuRenderer,
   usePrevious,
   useHistoryPopHandler,
+  useHideableNavbar,
+  useLockBodyScroll,
+  useWindowSize,
+  useColorMode,
 } from '@docusaurus/theme-common';
-import useHideableNavbar from '@theme/hooks/useHideableNavbar';
-import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
-import useWindowSize from '@theme/hooks/useWindowSize';
-import {useActivePlugin} from '@theme/hooks/useDocs';
+import {useActivePlugin} from '@docusaurus/plugin-content-docs/client';
 import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem';
 import Logo from '@theme/Logo';
 import IconMenu from '@theme/IconMenu';
@@ -88,7 +88,7 @@ function useColorModeToggle() {
   const {
     colorMode: {disableSwitch},
   } = useThemeConfig();
-  const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
+  const {isDarkTheme, setLightTheme, setDarkTheme} = useColorMode();
   const toggle = useCallback(
     (e) => (e.target.checked ? setDarkTheme() : setLightTheme()),
     [setLightTheme, setDarkTheme],

package/src/theme/NavbarItem/DefaultNavbarItem.tsx

@@ -7,71 +7,15 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+
 import type {
-  NavLinkProps,
   DesktopOrMobileNavBarItemProps,
   Props,
 } from '@theme/NavbarItem/DefaultNavbarItem';
-import IconExternalLink from '@theme/IconExternalLink';
-import isInternalUrl from '@docusaurus/isInternalUrl';
-import {isRegexpStringMatch} from '@docusaurus/theme-common';
-import {getInfimaActiveClassName} from './index';
-
-const dropdownLinkActiveClass = 'dropdown__link--active';
-
-export function NavLink({
-  activeBasePath,
-  activeBaseRegex,
-  to,
-  href,
-  label,
-  activeClassName = '',
-  prependBaseUrlToHref,
-  ...props
-}: NavLinkProps): JSX.Element {
-  // TODO all this seems hacky
-  // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
-  const toUrl = useBaseUrl(to);
-  const activeBaseUrl = useBaseUrl(activeBasePath);
-  const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
-  const isExternalLink = label && href && !isInternalUrl(href);
-  const isDropdownLink = activeClassName === dropdownLinkActiveClass;
 
-  return (
-    <Link
-      {...(href
-        ? {
-            href: prependBaseUrlToHref ? normalizedHref : href,
-          }
-        : {
-            isNavLink: true,
-            activeClassName: !props.className?.includes(activeClassName)
-              ? activeClassName
-              : '',
-            to: toUrl,
-            ...(activeBasePath || activeBaseRegex
-              ? {
-                  isActive: (_match, location) =>
-                    activeBaseRegex
-                      ? isRegexpStringMatch(activeBaseRegex, location.pathname)
-                      : location.pathname.startsWith(activeBaseUrl),
-                }
-              : null),
-          })}
-      {...props}>
-      {isExternalLink ? (
-        <span>
-          {label}
-          <IconExternalLink {...(isDropdownLink && {width: 12, height: 12})} />
-        </span>
-      ) : (
-        label
-      )}
-    </Link>
-  );
-}
+import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
 
 function DefaultNavbarItemDesktop({
   className,
@@ -79,7 +23,7 @@ function DefaultNavbarItemDesktop({
   ...props
 }: DesktopOrMobileNavBarItemProps) {
   const element = (
-    <NavLink
+    <NavbarNavLink
       className={clsx(
         isDropdownItem ? 'dropdown__link' : 'navbar__item navbar__link',
         className,
@@ -102,7 +46,7 @@ function DefaultNavbarItemMobile({
 }: DesktopOrMobileNavBarItemProps) {
   return (
     <li className="menu__list-item">
-      <NavLink className={clsx('menu__link', className)} {...props} />
+      <NavbarNavLink className={clsx('menu__link', className)} {...props} />
     </li>
   );
 }

package/src/theme/NavbarItem/DocNavbarItem.tsx

@@ -7,9 +7,12 @@
 
 import React from 'react';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import {useLatestVersion, useActiveDocContext} from '@theme/hooks/useDocs';
+import {
+  useLatestVersion,
+  useActiveDocContext,
+} from '@docusaurus/plugin-content-docs/client';
 import clsx from 'clsx';
-import {getInfimaActiveClassName} from './index';
+import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
 import type {Props} from '@theme/NavbarItem/DocNavbarItem';
 import {useDocsPreferredVersion, uniq} from '@docusaurus/theme-common';
 import type {GlobalDataVersion} from '@docusaurus/plugin-content-docs';

package/src/theme/NavbarItem/DocSidebarNavbarItem.tsx

@@ -7,11 +7,15 @@
 
 import React from 'react';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import {useLatestVersion, useActiveDocContext} from '@theme/hooks/useDocs';
+import {
+  useLatestVersion,
+  useActiveDocContext,
+} from '@docusaurus/plugin-content-docs/client';
 import clsx from 'clsx';
-import {getInfimaActiveClassName} from './index';
-import type {Props} from '@theme/NavbarItem/DocSidebarNavbarItem';
+import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
 import {useDocsPreferredVersion, uniq} from '@docusaurus/theme-common';
+
+import type {Props} from '@theme/NavbarItem/DocSidebarNavbarItem';
 import type {
   GlobalDataVersion,
   GlobalDataSidebar,

package/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx

@@ -12,7 +12,7 @@ import {
   useVersions,
   useLatestVersion,
   useActiveDocContext,
-} from '@theme/hooks/useDocs';
+} from '@docusaurus/plugin-content-docs/client';
 import type {Props} from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 import {translate} from '@docusaurus/Translate';

package/src/theme/NavbarItem/DocsVersionNavbarItem.tsx

@@ -11,7 +11,7 @@ import {
   useActiveVersion,
   useLatestVersion,
   type GlobalVersion,
-} from '@theme/hooks/useDocs';
+} from '@docusaurus/plugin-content-docs/client';
 import type {Props} from '@theme/NavbarItem/DocsVersionNavbarItem';
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 

package/src/theme/NavbarItem/DropdownNavbarItem.tsx

@@ -20,7 +20,7 @@ import type {
 } from '@theme/NavbarItem/DropdownNavbarItem';
 import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem';
 
-import {NavLink} from '@theme/NavbarItem/DefaultNavbarItem';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
 import NavbarItem from '@theme/NavbarItem';
 
 const dropdownLinkActiveClass = 'dropdown__link--active';
@@ -84,7 +84,7 @@ function DropdownNavbarItemDesktop({
         'dropdown--right': position === 'right',
         'dropdown--show': showDropdown,
       })}>
-      <NavLink
+      <NavbarNavLink
         href={props.to ? undefined : '#'}
         className={clsx('navbar__link', className)}
         {...props}
@@ -96,7 +96,7 @@ function DropdownNavbarItemDesktop({
           }
         }}>
         {props.children ?? props.label}
-      </NavLink>
+      </NavbarNavLink>
       <ul className="dropdown__menu">
         {items.map((childItemProps, i) => (
           <NavbarItem
@@ -146,7 +146,7 @@ function DropdownNavbarItemMobile({
       className={clsx('menu__list-item', {
         'menu__list-item--collapsed': collapsed,
       })}>
-      <NavLink
+      <NavbarNavLink
         role="button"
         className={clsx('menu__link menu__link--sublist', className)}
         {...props}
@@ -155,7 +155,7 @@ function DropdownNavbarItemMobile({
           toggleCollapsed();
         }}>
         {props.children ?? props.label}
-      </NavLink>
+      </NavbarNavLink>
       <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
         {items.map((childItemProps, i) => (
           <NavbarItem

package/src/theme/NavbarItem/NavbarNavLink.tsx

@@ -0,0 +1,68 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import type {Props} from '@theme/NavbarItem/NavbarNavLink';
+import IconExternalLink from '@theme/IconExternalLink';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import {isRegexpStringMatch} from '@docusaurus/theme-common';
+
+const dropdownLinkActiveClass = 'dropdown__link--active';
+
+export default function NavbarNavLink({
+  activeBasePath,
+  activeBaseRegex,
+  to,
+  href,
+  label,
+  activeClassName = '',
+  prependBaseUrlToHref,
+  ...props
+}: Props): JSX.Element {
+  // TODO all this seems hacky
+  // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
+  const toUrl = useBaseUrl(to);
+  const activeBaseUrl = useBaseUrl(activeBasePath);
+  const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
+  const isExternalLink = label && href && !isInternalUrl(href);
+  const isDropdownLink = activeClassName === dropdownLinkActiveClass;
+
+  return (
+    <Link
+      {...(href
+        ? {
+            href: prependBaseUrlToHref ? normalizedHref : href,
+          }
+        : {
+            isNavLink: true,
+            activeClassName: !props.className?.includes(activeClassName)
+              ? activeClassName
+              : '',
+            to: toUrl,
+            ...(activeBasePath || activeBaseRegex
+              ? {
+                  isActive: (_match, location) =>
+                    activeBaseRegex
+                      ? isRegexpStringMatch(activeBaseRegex, location.pathname)
+                      : location.pathname.startsWith(activeBaseUrl),
+                }
+              : null),
+          })}
+      {...props}>
+      {isExternalLink ? (
+        <span>
+          {label}
+          <IconExternalLink {...(isDropdownLink && {width: 12, height: 12})} />
+        </span>
+      ) : (
+        label
+      )}
+    </Link>
+  );
+}

package/src/theme/NavbarItem/index.tsx

@@ -58,9 +58,6 @@ function getComponentType(
   return type as NavbarItemComponentType;
 }
 
-export const getInfimaActiveClassName = (mobile?: boolean): string =>
-  mobile ? 'menu__link--active' : 'navbar__link--active';
-
 export default function NavbarItem({type, ...props}: Props): JSX.Element {
   const componentType = getComponentType(
     type,

package/src/theme/{UserPreferencesContext.ts → NavbarItem/utils.ts}

@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {createContext} from 'react';
-
-const UserPreferencesContext = createContext(undefined);
-
-export default UserPreferencesContext;
+// eslint-disable-next-line import/no-named-export
+export const getInfimaActiveClassName = (mobile?: boolean): string =>
+  mobile ? 'menu__link--active' : 'navbar__link--active';

package/src/theme/Tabs/index.tsx

@@ -13,8 +13,11 @@ import React, {
   type ReactElement,
 } from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
-import {useScrollPositionBlocker, duplicates} from '@docusaurus/theme-common';
+import {
+  useScrollPositionBlocker,
+  duplicates,
+  useTabGroupChoice,
+} from '@docusaurus/theme-common';
 import type {Props} from '@theme/Tabs';
 import type {Props as TabItemProps} from '@theme/TabItem';
 
@@ -83,7 +86,7 @@ function TabsComponent(props: Props): JSX.Element {
     );
   }
 
-  const {tabGroupChoices, setTabGroupChoices} = useUserPreferencesContext();
+  const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
   const [selectedValue, setSelectedValue] = useState(defaultValue);
   const tabRefs: (HTMLLIElement | null)[] = [];
   const {blockElementScrollPositionUntilNextRender} =

package/src/theme/ThemedImage/index.tsx

@@ -9,14 +9,14 @@ import React from 'react';
 import clsx from 'clsx';
 
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import useThemeContext from '@theme/hooks/useThemeContext';
+import {useColorMode} from '@docusaurus/theme-common';
 import type {Props} from '@theme/ThemedImage';
 
 import styles from './styles.module.css';
 
 function ThemedImage(props: Props): JSX.Element {
   const isBrowser = useIsBrowser();
-  const {isDarkTheme} = useThemeContext();
+  const {isDarkTheme} = useColorMode();
   const {sources, className, alt = '', ...propsRest} = props;
 
   type SourceName = keyof Props['sources'];