@docusaurus/theme-classic 0.0.0-5008 → 0.0.0-5012

package/src/theme/ColorModeToggle/index.tsx

@@ -6,13 +6,13 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/ColorModeToggle';
+import clsx from 'clsx';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import {translate} from '@docusaurus/Translate';
 import IconLightMode from '@theme/IconLightMode';
 import IconDarkMode from '@theme/IconDarkMode';
+import type {Props} from '@theme/ColorModeToggle';
 
-import clsx from 'clsx';
 import styles from './styles.module.css';
 
 function ColorModeToggle({className, value, onChange}: Props): JSX.Element {

package/src/theme/Details/index.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import clsx from 'clsx';
 import {Details as DetailsGeneric} from '@docusaurus/theme-common/Details';
 import type {Props} from '@theme/Details';
+
 import styles from './styles.module.css';
 
 // Should we have a custom details/summary comp in Infima instead of reusing

package/src/theme/DocBreadcrumbs/index.tsx

@@ -6,18 +6,19 @@
  */
 
 import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
 import {
   ThemeClassNames,
   useSidebarBreadcrumbs,
   useHomePageRoute,
 } from '@docusaurus/theme-common';
-import styles from './styles.module.css';
-import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import {translate} from '@docusaurus/Translate';
 import IconHome from '@theme/IconHome';
 
+import styles from './styles.module.css';
+
 // TODO move to design system folder
 function BreadcrumbsItemLink({
   children,

package/src/theme/DocCard/index.tsx

@@ -6,17 +6,18 @@
  */
 
 import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
+import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import {translate} from '@docusaurus/Translate';
+import type {Props} from '@theme/DocCard';
+
+import styles from './styles.module.css';
 import type {
   PropSidebarItemCategory,
   PropSidebarItemLink,
 } from '@docusaurus/plugin-content-docs';
-import type {Props} from '@theme/DocCard';
-import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common';
-import clsx from 'clsx';
-import styles from './styles.module.css';
-import isInternalUrl from '@docusaurus/isInternalUrl';
-import {translate} from '@docusaurus/Translate';
 
 function CardContainer({
   href,

package/src/theme/DocCardList/index.tsx

@@ -7,11 +7,10 @@
 
 import React from 'react';
 import clsx from 'clsx';
-
-import DocCard from '@theme/DocCard';
-import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 import {findFirstCategoryLink} from '@docusaurus/theme-common';
+import DocCard from '@theme/DocCard';
 import type {Props} from '@theme/DocCardList';
+import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 
 // Filter categories that don't have a link.
 function filterItems(items: PropSidebarItem[]): PropSidebarItem[] {

package/src/theme/DocCategoryGeneratedIndexPage/index.tsx

@@ -10,14 +10,14 @@ import {
   PageMetadata,
   useCurrentSidebarCategory,
 } from '@docusaurus/theme-common';
-import type {Props} from '@theme/DocCategoryGeneratedIndexPage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import DocCardList from '@theme/DocCardList';
 import DocPaginator from '@theme/DocPaginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import Heading from '@theme/Heading';
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import type {Props} from '@theme/DocCategoryGeneratedIndexPage';
 
 import styles from './styles.module.css';
 

package/src/theme/DocItem/index.tsx

@@ -7,23 +7,24 @@
 
 import React from 'react';
 import clsx from 'clsx';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  useWindowSize,
+} from '@docusaurus/theme-common';
 import DocPaginator from '@theme/DocPaginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
-import type {Props} from '@theme/DocItem';
 import DocItemFooter from '@theme/DocItemFooter';
 import TOC from '@theme/TOC';
 import TOCCollapsible from '@theme/TOCCollapsible';
 import Heading from '@theme/Heading';
-import styles from './styles.module.css';
-import {
-  PageMetadata,
-  HtmlClassNameProvider,
-  ThemeClassNames,
-  useWindowSize,
-} from '@docusaurus/theme-common';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import MDXContent from '@theme/MDXContent';
+import type {Props} from '@theme/DocItem';
+
+import styles from './styles.module.css';
 
 function DocItemMetadata(props: Props): JSX.Element {
   const {content: DocContent} = props;

package/src/theme/DocItemFooter/index.tsx

@@ -7,16 +7,15 @@
 
 import React from 'react';
 import clsx from 'clsx';
-
+import {ThemeClassNames} from '@docusaurus/theme-common';
 import LastUpdated from '@theme/LastUpdated';
-import type {Props} from '@theme/DocItem';
 import EditThisPage from '@theme/EditThisPage';
 import TagsListInline, {
   type Props as TagsListInlineProps,
 } from '@theme/TagsListInline';
+import type {Props} from '@theme/DocItem';
 
 import styles from './styles.module.css';
-import {ThemeClassNames} from '@docusaurus/theme-common';
 
 function TagsRow(props: TagsListInlineProps) {
   return (

package/src/theme/DocPage/Layout/Main/index.tsx

@@ -6,12 +6,11 @@
  */
 
 import React from 'react';
-
+import clsx from 'clsx';
 import {useDocsSidebar} from '@docusaurus/theme-common';
+import type {Props} from '@theme/DocPage/Layout/Main';
 
-import clsx from 'clsx';
 import styles from './styles.module.css';
-import type {Props} from '@theme/DocPage/Layout/Main';
 
 export default function DocPageLayoutMain({
   hiddenSidebarContainer,

package/src/theme/DocPage/Layout/Sidebar/ExpandButton/index.tsx

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
-import IconArrow from '@theme/IconArrow';
 import {translate} from '@docusaurus/Translate';
+import IconArrow from '@theme/IconArrow';
 import type {Props} from '@theme/DocPage/Layout/Sidebar/ExpandButton';
 
 import styles from './styles.module.css';

package/src/theme/DocPage/Layout/Sidebar/index.tsx

@@ -6,15 +6,14 @@
  */
 
 import React, {type ReactNode, useState, useCallback} from 'react';
-import DocSidebar from '@theme/DocSidebar';
+import clsx from 'clsx';
+import {ThemeClassNames, useDocsSidebar} from '@docusaurus/theme-common';
 import {useLocation} from '@docusaurus/router';
-import type {Props} from '@theme/DocPage/Layout/Sidebar';
+import DocSidebar from '@theme/DocSidebar';
 import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton';
+import type {Props} from '@theme/DocPage/Layout/Sidebar';
 
-import clsx from 'clsx';
-import styles from './index.module.css';
-
-import {ThemeClassNames, useDocsSidebar} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
 
 // Reset sidebar state when sidebar changes
 // Use React key to unmount/remount the children

package/src/theme/DocPage/Layout/index.tsx

@@ -6,15 +6,14 @@
  */
 
 import React, {useState} from 'react';
+import {useDocsSidebar} from '@docusaurus/theme-common';
 import Layout from '@theme/Layout';
 import BackToTopButton from '@theme/BackToTopButton';
-import type {Props} from '@theme/DocPage/Layout';
 import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar';
 import DocPageLayoutMain from '@theme/DocPage/Layout/Main';
+import type {Props} from '@theme/DocPage/Layout';
 
-import styles from './index.module.css';
-
-import {useDocsSidebar} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
 
 export default function DocPageLayout({children}: Props): JSX.Element {
   const sidebar = useDocsSidebar();

package/src/theme/DocPage/index.tsx

@@ -6,12 +6,7 @@
  */
 
 import React from 'react';
-import NotFound from '@theme/NotFound';
-import type {Props} from '@theme/DocPage';
-import DocPageLayout from '@theme/DocPage/Layout';
-
 import clsx from 'clsx';
-
 import {
   HtmlClassNameProvider,
   ThemeClassNames,
@@ -20,7 +15,10 @@ import {
   DocsVersionProvider,
   useDocRouteMetadata,
 } from '@docusaurus/theme-common';
+import DocPageLayout from '@theme/DocPage/Layout';
+import NotFound from '@theme/NotFound';
 import SearchMetadata from '@theme/SearchMetadata';
+import type {Props} from '@theme/DocPage';
 
 export default function DocPage(props: Props): JSX.Element {
   const {versionMetadata} = props;

package/src/theme/DocSidebar/Desktop/CollapseButton/index.tsx

@@ -7,8 +7,8 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import IconArrow from '@theme/IconArrow';
 import {translate} from '@docusaurus/Translate';
+import IconArrow from '@theme/IconArrow';
 import type {Props} from '@theme/DocSidebar/Desktop/CollapseButton';
 
 import styles from './styles.module.css';

package/src/theme/DocSidebar/index.tsx

@@ -7,9 +7,9 @@
 
 import React from 'react';
 import {useWindowSize} from '@docusaurus/theme-common';
-import type {Props} from '@theme/DocSidebar';
 import DocSidebarDesktop from '@theme/DocSidebar/Desktop';
 import DocSidebarMobile from '@theme/DocSidebar/Mobile';
+import type {Props} from '@theme/DocSidebar';
 
 export default function DocSidebar(props: Props): JSX.Element {
   const windowSize = useWindowSize();

package/src/theme/DocSidebarItem/{Category.tsx → Category/index.tsx}

@@ -20,30 +20,28 @@ import {
 } from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
-
+import useIsBrowser from '@docusaurus/useIsBrowser';
 import DocSidebarItems from '@theme/DocSidebarItems';
 import type {Props} from '@theme/DocSidebarItem/Category';
 
-import useIsBrowser from '@docusaurus/useIsBrowser';
-
 // If we navigate to a category and it becomes active, it should automatically
 // expand itself
 function useAutoExpandActiveCategory({
   isActive,
   collapsed,
-  setCollapsed,
+  updateCollapsed,
 }: {
   isActive: boolean;
   collapsed: boolean;
-  setCollapsed: (b: boolean) => void;
+  updateCollapsed: (b: boolean) => void;
 }) {
   const wasActive = usePrevious(isActive);
   useEffect(() => {
     const justBecameActive = isActive && !wasActive;
     if (justBecameActive && collapsed) {
-      setCollapsed(false);
+      updateCollapsed(false);
     }
-  }, [isActive, wasActive, collapsed, setCollapsed]);
+  }, [isActive, wasActive, collapsed, updateCollapsed]);
 }
 
 /**
@@ -105,6 +103,11 @@ export default function DocSidebarItemCategory({
   ...props
 }: Props): JSX.Element {
   const {items, label, collapsible, className, href} = item;
+  const {
+    docs: {
+      sidebar: {autoCollapseCategories},
+    },
+  } = useThemeConfig();
   const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
 
   const isActive = isActiveSidebarItem(item, activePath);
@@ -121,17 +124,13 @@ export default function DocSidebarItemCategory({
     },
   });
 
-  useAutoExpandActiveCategory({isActive, collapsed, setCollapsed});
   const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
-  function updateCollapsed(toCollapsed: boolean = !collapsed) {
+  // Use this instead of `setCollapsed`, because it is also reactive
+  const updateCollapsed = (toCollapsed: boolean = !collapsed) => {
     setExpandedItem(toCollapsed ? null : index);
     setCollapsed(toCollapsed);
-  }
-  const {
-    docs: {
-      sidebar: {autoCollapseCategories},
-    },
-  } = useThemeConfig();
+  };
+  useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed});
   useEffect(() => {
     if (
       collapsible &&

package/src/theme/DocSidebarItem/{Html.tsx → Html/index.tsx}

@@ -10,7 +10,7 @@ import clsx from 'clsx';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import type {Props} from '@theme/DocSidebarItem/Html';
 
-import styles from './Html.module.css';
+import styles from './styles.module.css';
 
 export default function DocSidebarItemHtml({
   item,

package/src/theme/DocSidebarItem/{Link.tsx → Link/index.tsx}

@@ -11,10 +11,9 @@ import {isActiveSidebarItem, ThemeClassNames} from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import IconExternalLink from '@theme/IconExternalLink';
-
 import type {Props} from '@theme/DocSidebarItem/Link';
 
-import styles from './Link.module.css';
+import styles from './styles.module.css';
 
 export default function DocSidebarItemLink({
   item,

package/src/theme/DocSidebarItems/index.tsx

@@ -6,8 +6,8 @@
  */
 
 import React, {memo} from 'react';
-import DocSidebarItem from '@theme/DocSidebarItem';
 import {DocSidebarItemsExpandedStateProvider} from '@docusaurus/theme-common';
+import DocSidebarItem from '@theme/DocSidebarItem';
 
 import type {Props} from '@theme/DocSidebarItems';
 

package/src/theme/DocTagDocListPage/index.tsx

@@ -6,8 +6,7 @@
  */
 
 import React from 'react';
-
-import Layout from '@theme/Layout';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import {
   PageMetadata,
@@ -16,9 +15,9 @@ import {
   usePluralForm,
 } from '@docusaurus/theme-common';
 import Translate, {translate} from '@docusaurus/Translate';
-import type {Props} from '@theme/DocTagDocListPage';
+import Layout from '@theme/Layout';
 import SearchMetadata from '@theme/SearchMetadata';
-import clsx from 'clsx';
+import type {Props} from '@theme/DocTagDocListPage';
 
 // Very simple pluralization: probably good enough for now
 function useNDocsTaggedPlural() {

package/src/theme/DocTagsListPage/index.tsx

@@ -6,18 +6,17 @@
  */
 
 import React from 'react';
-
-import Layout from '@theme/Layout';
+import clsx from 'clsx';
 import {
   PageMetadata,
   HtmlClassNameProvider,
   ThemeClassNames,
   translateTagsPageTitle,
 } from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
 import TagsListByLetter from '@theme/TagsListByLetter';
-import type {Props} from '@theme/DocTagsListPage';
 import SearchMetadata from '@theme/SearchMetadata';
-import clsx from 'clsx';
+import type {Props} from '@theme/DocTagsListPage';
 
 export default function DocTagsListPage({tags}: Props): JSX.Element {
   const title = translateTagsPageTitle();

package/src/theme/DocVersionBadge/index.tsx

@@ -6,9 +6,9 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import {ThemeClassNames, useDocsVersion} from '@docusaurus/theme-common';
-import clsx from 'clsx';
 import type {Props} from '@theme/DocVersionBadge';
 
 export default function DocVersionBadge({

package/src/theme/DocVersionBanner/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, {type ComponentType} from 'react';
+import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
@@ -21,7 +22,6 @@ import {
 } from '@docusaurus/theme-common';
 
 import type {Props} from '@theme/DocVersionBanner';
-import clsx from 'clsx';
 import type {
   VersionBanner,
   PropVersionMetadata,

package/src/theme/EditThisPage/index.tsx

@@ -7,10 +7,9 @@
 
 import React from 'react';
 import Translate from '@docusaurus/Translate';
-
-import type {Props} from '@theme/EditThisPage';
-import IconEdit from '@theme/IconEdit';
 import {ThemeClassNames} from '@docusaurus/theme-common';
+import IconEdit from '@theme/IconEdit';
+import type {Props} from '@theme/EditThisPage';
 
 export default function EditThisPage({editUrl}: Props): JSX.Element {
   return (

package/src/theme/Footer/Links/MultiColumn/index.tsx

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/Footer/Links/MultiColumn';
 import LinkItem from '@theme/Footer/LinkItem';
+import type {Props} from '@theme/Footer/Links/MultiColumn';
 
 type ColumnType = Props['columns'][number];
 type ColumnItemType = ColumnType['items'][number];

package/src/theme/Footer/Links/Simple/index.tsx

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/Footer/Links/Simple';
 import LinkItem from '@theme/Footer/LinkItem';
+import type {Props} from '@theme/Footer/Links/Simple';
 
 function Separator() {
   return <span className="footer__link-separator">·</span>;

package/src/theme/Footer/Links/index.tsx

@@ -8,9 +8,9 @@
 import React from 'react';
 
 import {isMultiColumnFooterLinks} from '@docusaurus/theme-common';
-import type {Props} from '@theme/Footer/Links';
 import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn';
 import FooterLinksSimple from '@theme/Footer/Links/Simple';
+import type {Props} from '@theme/Footer/Links';
 
 export default function FooterLinks({links}: Props): JSX.Element {
   return isMultiColumnFooterLinks(links) ? (

package/src/theme/Footer/Logo/index.tsx

@@ -6,13 +6,13 @@
  */
 
 import React from 'react';
-
 import Link from '@docusaurus/Link';
 import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
-import styles from './styles.module.css';
 import ThemedImage from '@theme/ThemedImage';
 import type {Props} from '@theme/Footer/Logo';
 
+import styles from './styles.module.css';
+
 function LogoImage({logo}: Props) {
   const {withBaseUrl} = useBaseUrlUtils();
   const sources = {

package/src/theme/Heading/index.tsx

@@ -7,9 +7,9 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import type {Props} from '@theme/Heading';
 import {translate} from '@docusaurus/Translate';
 import {useThemeConfig} from '@docusaurus/theme-common';
+import type {Props} from '@theme/Heading';
 
 import styles from './styles.module.css';
 

package/src/theme/IconEdit/index.tsx

@@ -7,7 +7,6 @@
 
 import React from 'react';
 import clsx from 'clsx';
-
 import type {Props} from '@theme/IconEdit';
 
 import styles from './styles.module.css';

package/src/theme/LastUpdated/index.tsx

@@ -7,8 +7,8 @@
 
 import React from 'react';
 import Translate from '@docusaurus/Translate';
-import type {Props} from '@theme/LastUpdated';
 import {ThemeClassNames} from '@docusaurus/theme-common';
+import type {Props} from '@theme/LastUpdated';
 
 function LastUpdatedAtDate({
   lastUpdatedAt,

package/src/theme/Layout/index.tsx

@@ -8,19 +8,19 @@
 import React from 'react';
 import clsx from 'clsx';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
-import SkipToContent from '@theme/SkipToContent';
-import AnnouncementBar from '@theme/AnnouncementBar';
-import Navbar from '@theme/Navbar';
-import Footer from '@theme/Footer';
-import LayoutProviders from '@theme/LayoutProviders';
-import type {Props} from '@theme/Layout';
 import {
   PageMetadata,
   ThemeClassNames,
   useKeyboardNavigation,
 } from '@docusaurus/theme-common';
+import SkipToContent from '@theme/SkipToContent';
+import AnnouncementBar from '@theme/AnnouncementBar';
+import Navbar from '@theme/Navbar';
+import Footer from '@theme/Footer';
+import LayoutProviders from '@theme/LayoutProviders';
 import ErrorPageContent from '@theme/ErrorPageContent';
 import './styles.css';
+import type {Props} from '@theme/Layout';
 
 export default function Layout(props: Props): JSX.Element {
   const {

package/src/theme/Logo/index.tsx

@@ -6,13 +6,12 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/Logo';
-
 import Link from '@docusaurus/Link';
-import ThemedImage from '@theme/ThemedImage';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useThemeConfig} from '@docusaurus/theme-common';
+import ThemedImage from '@theme/ThemedImage';
+import type {Props} from '@theme/Logo';
 
 export default function Logo(props: Props): JSX.Element {
   const {

package/src/theme/MDXComponents/{Img.tsx → Img/index.tsx}

@@ -6,9 +6,10 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/MDXComponents/Img';
-import styles from './Img.module.css';
 import clsx from 'clsx';
+import type {Props} from '@theme/MDXComponents/Img';
+
+import styles from './styles.module.css';
 
 function transformImgClassName(className?: string): string {
   return clsx(className, styles.img);

package/src/theme/MDXComponents/Ul.tsx

@@ -12,8 +12,8 @@ import type {Props} from '@theme/MDXComponents/Ul';
 function transformUlClassName(className?: string): string {
   return clsx(
     className,
-    // This class is set globally by GitHub/MDX
-    // We keep the global class, but add Infima class to get list without styling
+    // This class is set globally by GitHub/MDX. We keep the global class, and
+    // add another Infima class to get list without styling
     // See https://github.com/syntax-tree/mdast-util-to-hast/issues/28
     className?.includes('contains-task-list') && 'clean-list',
   );