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

package/lib-next/theme/NavbarItem/DefaultNavbarItem.js

@@ -6,70 +6,8 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-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
-}) {
-  // 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 NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
 
 function DefaultNavbarItemDesktop({
   className,
@@ -77,7 +15,7 @@ function DefaultNavbarItemDesktop({
   ...props
 }) {
   const element = (
-    <NavLink
+    <NavbarNavLink
       className={clsx(
         isDropdownItem ? 'dropdown__link' : 'navbar__item navbar__link',
         className,
@@ -100,7 +38,7 @@ function DefaultNavbarItemMobile({
 }) {
   return (
     <li className="menu__list-item">
-      <NavLink className={clsx('menu__link', className)} {...props} />
+      <NavbarNavLink className={clsx('menu__link', className)} {...props} />
     </li>
   );
 }

package/lib-next/theme/NavbarItem/DocNavbarItem.js

@@ -6,9 +6,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 {useDocsPreferredVersion, uniq} from '@docusaurus/theme-common';
 
 function getDocInVersions(versions, docId) {

package/lib-next/theme/NavbarItem/DocSidebarNavbarItem.js

@@ -6,9 +6,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 {useDocsPreferredVersion, uniq} from '@docusaurus/theme-common';
 
 function getSidebarLink(versions, sidebarId) {

package/lib-next/theme/NavbarItem/DocsVersionDropdownNavbarItem.js

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

package/lib-next/theme/NavbarItem/DocsVersionNavbarItem.js

@@ -6,7 +6,10 @@
  */
 import React from 'react';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import {useActiveVersion, useLatestVersion} from '@theme/hooks/useDocs';
+import {
+  useActiveVersion,
+  useLatestVersion,
+} from '@docusaurus/plugin-content-docs/client';
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 
 const getVersionMainDoc = (version) =>

package/lib-next/theme/NavbarItem/DropdownNavbarItem.js

@@ -13,7 +13,7 @@ import {
   isRegexpStringMatch,
   useLocalPathname,
 } from '@docusaurus/theme-common';
-import {NavLink} from '@theme/NavbarItem/DefaultNavbarItem';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
 import NavbarItem from '@theme/NavbarItem';
 const dropdownLinkActiveClass = 'dropdown__link--active';
 
@@ -63,7 +63,7 @@ function DropdownNavbarItemDesktop({items, position, className, ...props}) {
         'dropdown--right': position === 'right',
         'dropdown--show': showDropdown,
       })}>
-      <NavLink
+      <NavbarNavLink
         href={props.to ? undefined : '#'}
         className={clsx('navbar__link', className)}
         {...props}
@@ -75,7 +75,7 @@ function DropdownNavbarItemDesktop({items, position, className, ...props}) {
           }
         }}>
         {props.children ?? props.label}
-      </NavLink>
+      </NavbarNavLink>
       <ul className="dropdown__menu">
         {items.map((childItemProps, i) => (
           <NavbarItem
@@ -124,7 +124,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}
@@ -133,7 +133,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/lib-next/theme/NavbarItem/NavbarNavLink.js

@@ -0,0 +1,70 @@
+/**
+ * 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 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
+}) {
+  // 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/lib-next/theme/NavbarItem/index.js

@@ -46,8 +46,6 @@ function getComponentType(type, isDropdown) {
   return type;
 }
 
-export const getInfimaActiveClassName = (mobile) =>
-  mobile ? 'menu__link--active' : 'navbar__link--active';
 export default function NavbarItem({type, ...props}) {
   const componentType = getComponentType(type, props.items !== undefined);
   const NavbarItemComponent = getNavbarItemComponent(componentType);

package/lib-next/theme/{ThemeContext.js → NavbarItem/utils.js}

@@ -4,6 +4,6 @@
  * 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';
-const ThemeContext = React.createContext(undefined);
-export default ThemeContext;
+// eslint-disable-next-line import/no-named-export
+export const getInfimaActiveClassName = (mobile) =>
+  mobile ? 'menu__link--active' : 'navbar__link--active';

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

@@ -8,8 +8,10 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import Tabs from '../index';
 import TabItem from '../../TabItem';
-import UserPreferencesProvider from '@theme/UserPreferencesProvider';
-import {ScrollControllerProvider} from '@docusaurus/theme-common';
+import {
+  TabGroupChoiceProvider,
+  ScrollControllerProvider,
+} from '@docusaurus/theme-common';
 describe('Tabs', () => {
   test('Should reject bad Tabs child', () => {
     expect(() => {
@@ -55,7 +57,7 @@ describe('Tabs', () => {
     expect(() => {
       renderer.create(
         <ScrollControllerProvider>
-          <UserPreferencesProvider>
+          <TabGroupChoiceProvider>
             <Tabs>
               <TabItem value="v1">Tab 1</TabItem>
               <TabItem value="v2">Tab 2</TabItem>
@@ -112,7 +114,7 @@ describe('Tabs', () => {
                 Tab 2
               </TabItem>
             </Tabs>
-          </UserPreferencesProvider>
+          </TabGroupChoiceProvider>
         </ScrollControllerProvider>,
       );
     }).not.toThrow(); // TODO Better Jest infrastructure to mock the Layout
@@ -123,7 +125,7 @@ describe('Tabs', () => {
       const tabs = ['Apple', 'Banana', 'Carrot'];
       renderer.create(
         <ScrollControllerProvider>
-          <UserPreferencesProvider>
+          <TabGroupChoiceProvider>
             <Tabs
               values={tabs.map((t, idx) => ({
                 label: t,
@@ -134,7 +136,7 @@ describe('Tabs', () => {
                 <TabItem value={idx}>{t}</TabItem>
               ))}
             </Tabs>
-          </UserPreferencesProvider>
+          </TabGroupChoiceProvider>
         </ScrollControllerProvider>,
       );
     }).not.toThrow();

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

@@ -6,8 +6,11 @@
  */
 import React, {useState, cloneElement, Children, isValidElement} 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 clsx from 'clsx';
 import styles from './styles.module.css'; // A very rough duck type, but good enough to guard against mistakes while
 // allowing customization
@@ -72,7 +75,7 @@ function TabsComponent(props) {
     );
   }
 
-  const {tabGroupChoices, setTabGroupChoices} = useUserPreferencesContext();
+  const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
   const [selectedValue, setSelectedValue] = useState(defaultValue);
   const tabRefs = [];
   const {blockElementScrollPositionUntilNextRender} =

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

@@ -7,12 +7,12 @@
 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 styles from './styles.module.css';
 
 function ThemedImage(props) {
   const isBrowser = useIsBrowser();
-  const {isDarkTheme} = useThemeContext();
+  const {isDarkTheme} = useColorMode();
   const {sources, className, alt = '', ...propsRest} = props;
   const clientThemes = isDarkTheme ? ['dark'] : ['light'];
   const renderedSourceNames = isBrowser

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4366",
+  "version": "0.0.0-4377",
   "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-4366",
-    "@docusaurus/plugin-content-blog": "0.0.0-4366",
-    "@docusaurus/plugin-content-docs": "0.0.0-4366",
-    "@docusaurus/plugin-content-pages": "0.0.0-4366",
-    "@docusaurus/theme-common": "0.0.0-4366",
-    "@docusaurus/theme-translations": "0.0.0-4366",
-    "@docusaurus/utils": "0.0.0-4366",
-    "@docusaurus/utils-validation": "0.0.0-4366",
+    "@docusaurus/core": "0.0.0-4377",
+    "@docusaurus/plugin-content-blog": "0.0.0-4377",
+    "@docusaurus/plugin-content-docs": "0.0.0-4377",
+    "@docusaurus/plugin-content-pages": "0.0.0-4377",
+    "@docusaurus/theme-common": "0.0.0-4377",
+    "@docusaurus/theme-translations": "0.0.0-4377",
+    "@docusaurus/utils": "0.0.0-4377",
+    "@docusaurus/utils-validation": "0.0.0-4377",
     "@mdx-js/mdx": "^1.6.21",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
@@ -45,8 +45,8 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4366",
-    "@docusaurus/types": "0.0.0-4366",
+    "@docusaurus/module-type-aliases": "0.0.0-4377",
+    "@docusaurus/types": "0.0.0-4377",
     "@types/mdx-js__react": "^1.5.4",
     "@types/parse-numeric-range": "^0.0.1",
     "@types/rtlcss": "^3.1.1",
@@ -61,5 +61,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "0f52a6663666b8a3c31c1c06dc9486766dd53ea3"
+  "gitHead": "5dea134d7853ad86c969384e51bc51c1e7b9fc8a"
 }

package/src/index.ts

@@ -171,10 +171,6 @@ export default function docusaurusThemeClassic(
         .join('|');
 
       return {
-        ignoreWarnings: [
-          // See https://github.com/facebook/docusaurus/pull/3382
-          (e) => e.message.includes("Can't resolve '@theme-init/hooks/useDocs"),
-        ],
         plugins: [
           new ContextReplacementPlugin(
             /prismjs[\\/]components$/,

package/src/theme/CodeBlock/index.tsx

@@ -16,8 +16,8 @@ import {
   parseLanguage,
   parseLines,
   ThemeClassNames,
+  usePrismTheme,
 } from '@docusaurus/theme-common';
-import usePrismTheme from '@theme/hooks/usePrismTheme';
 import type {Props} from '@theme/CodeBlock';
 
 import styles from './styles.module.css';

package/src/theme/DocCategoryGeneratedIndexPage/index.tsx

@@ -13,7 +13,7 @@ import DocPaginator from '@theme/DocPaginator';
 import Seo from '@theme/Seo';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
-import {MainHeading} from '@theme/Heading';
+import Heading from '@theme/Heading';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import styles from './styles.module.css';
@@ -35,9 +35,9 @@ export default function DocCategoryGeneratedIndexPage({
         <DocVersionBanner />
         <DocVersionBadge />
         <header>
-          <MainHeading className={styles.title}>
+          <Heading as="h1" className={styles.title}>
             {categoryGeneratedIndex.title}
-          </MainHeading>
+          </Heading>
           {categoryGeneratedIndex.description && (
             <p>{categoryGeneratedIndex.description}</p>
           )}

package/src/theme/DocItem/index.tsx

@@ -7,7 +7,6 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import useWindowSize from '@theme/hooks/useWindowSize';
 import DocPaginator from '@theme/DocPaginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
@@ -16,9 +15,9 @@ import type {Props} from '@theme/DocItem';
 import DocItemFooter from '@theme/DocItemFooter';
 import TOC from '@theme/TOC';
 import TOCCollapsible from '@theme/TOCCollapsible';
-import {MainHeading} from '@theme/Heading';
+import Heading from '@theme/Heading';
 import styles from './styles.module.css';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common';
 
 export default function DocItem(props: Props): JSX.Element {
   const {content: DocContent} = props;
@@ -80,7 +79,11 @@ export default function DocItem(props: Props): JSX.Element {
                 To make both cases consistent, the added title is added under the same div.markdown block
                 See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
                 */}
-                {shouldAddTitle && <MainHeading>{title}</MainHeading>}
+                {shouldAddTitle && (
+                  <header>
+                    <Heading as="h1">{title}</Heading>
+                  </header>
+                )}
 
                 <DocContent />
               </div>

package/src/theme/DocSidebar/index.tsx

@@ -14,12 +14,12 @@ import {
   type MobileSecondaryMenuComponent,
   ThemeClassNames,
   useScrollPosition,
+  useWindowSize,
 } from '@docusaurus/theme-common';
-import useWindowSize from '@theme/hooks/useWindowSize';
 import Logo from '@theme/Logo';
 import IconArrow from '@theme/IconArrow';
 import {translate} from '@docusaurus/Translate';
-import {DocSidebarItems} from '@theme/DocSidebarItem';
+import DocSidebarItems from '@theme/DocSidebarItems';
 import type {Props} from '@theme/DocSidebar';
 
 import styles from './styles.module.css';

package/src/theme/DocSidebarItem/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useEffect, memo, useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import clsx from 'clsx';
 import {
   isActiveSidebarItem,
@@ -20,7 +20,8 @@ import isInternalUrl from '@docusaurus/isInternalUrl';
 import {translate} from '@docusaurus/Translate';
 import IconExternalLink from '@theme/IconExternalLink';
 
-import type {Props, DocSidebarItemsProps} from '@theme/DocSidebarItem';
+import DocSidebarItems from '@theme/DocSidebarItems';
+import type {Props} from '@theme/DocSidebarItem';
 import type {
   PropSidebarItemCategory,
   PropSidebarItemLink,
@@ -29,23 +30,6 @@ import type {
 import styles from './styles.module.css';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 
-// Optimize sidebar at each "level"
-// TODO this item should probably not receive the "activePath" props
-// TODO this triggers whole sidebar re-renders on navigation
-export const DocSidebarItems = memo(
-  ({items, ...props}: DocSidebarItemsProps): JSX.Element => (
-    <>
-      {items.map((item, index) => (
-        <DocSidebarItem
-          key={index} // sidebar is static, the index does not change
-          item={item}
-          {...props}
-        />
-      ))}
-    </>
-  ),
-);
-
 export default function DocSidebarItem({
   item,
   ...props

package/src/theme/DocSidebarItems/index.tsx

@@ -0,0 +1,31 @@
+/**
+ * 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, {memo} from 'react';
+
+import DocSidebarItem from '@theme/DocSidebarItem';
+
+import type {Props} from '@theme/DocSidebarItems';
+
+// TODO this item should probably not receive the "activePath" props
+// TODO this triggers whole sidebar re-renders on navigation
+function DocSidebarItems({items, ...props}: Props): JSX.Element {
+  return (
+    <>
+      {items.map((item, index) => (
+        <DocSidebarItem
+          key={index} // sidebar is static, the index does not change
+          item={item}
+          {...props}
+        />
+      ))}
+    </>
+  );
+}
+
+// Optimize sidebar at each "level"
+export default memo(DocSidebarItems);

package/{lib-next/theme/hooks/styles.css → src/theme/DocSidebarItems/styles.module.css}

@@ -5,6 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-body:not(.navigation-with-keyboard) *:not(input):focus {
-  outline: none;
+@media (min-width: 997px) {
+  .menuLinkText {
+    cursor: initial;
+  }
+  .menuLinkText:hover {
+    background: none;
+  }
+
+  .menuLinkText.hasHref {
+    cursor: pointer;
+  }
 }

package/src/theme/DocVersionBanner/index.tsx

@@ -13,7 +13,7 @@ import {
   useActivePlugin,
   useDocVersionSuggestions,
   type GlobalVersion,
-} from '@theme/hooks/useDocs';
+} from '@docusaurus/plugin-content-docs/client';
 import {
   ThemeClassNames,
   useDocsPreferredVersion,