@docusaurus/theme-classic 2.0.1 → 2.2.0

package/src/theme/SkipToContent/index.tsx

@@ -6,23 +6,10 @@
  */
 
 import React from 'react';
-import Translate from '@docusaurus/Translate';
-import {useSkipToContent} from '@docusaurus/theme-common/internal';
+import {SkipToContentLink} from '@docusaurus/theme-common';
 
 import styles from './styles.module.css';
 
 export default function SkipToContent(): JSX.Element {
-  const {containerRef, handleSkip} = useSkipToContent();
-  return (
-    <div ref={containerRef} role="region">
-      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-      <a href="#" className={styles.skipToContent} onClick={handleSkip}>
-        <Translate
-          id="theme.common.skipToMainContent"
-          description="The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation">
-          Skip to main content
-        </Translate>
-      </a>
-    </div>
-  );
+  return <SkipToContentLink className={styles.skipToContent} />;
 }

package/src/theme/Tabs/index.tsx

@@ -104,7 +104,10 @@ function TabsComponent(props: Props): JSX.Element {
   }
 
   const handleTabChange = (
-    event: React.FocusEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>,
+    event:
+      | React.FocusEvent<HTMLLIElement>
+      | React.MouseEvent<HTMLLIElement>
+      | React.KeyboardEvent<HTMLLIElement>,
   ) => {
     const newTab = event.currentTarget;
     const newTabIndex = tabRefs.indexOf(newTab);
@@ -124,6 +127,10 @@ function TabsComponent(props: Props): JSX.Element {
     let focusElement: HTMLLIElement | null = null;
 
     switch (event.key) {
+      case 'Enter': {
+        handleTabChange(event);
+        break;
+      }
       case 'ArrowRight': {
         const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
         focusElement = tabRefs[nextTab] ?? tabRefs[0]!;
@@ -161,7 +168,6 @@ function TabsComponent(props: Props): JSX.Element {
             key={value}
             ref={(tabControl) => tabRefs.push(tabControl)}
             onKeyDown={handleKeydown}
-            onFocus={handleTabChange}
             onClick={handleTabChange}
             {...attributes}
             className={clsx(

package/src/theme/Tag/styles.module.css

@@ -20,8 +20,8 @@
 }
 
 .tagRegular {
-  border-radius: 0.5rem;
-  padding: 0.3rem 0.5rem;
+  border-radius: var(--ifm-global-radius);
+  padding: 0.2rem 0.5rem 0.3rem;
   font-size: 90%;
 }
 

package/src/theme-classic.d.ts

@@ -55,6 +55,22 @@ declare module '@theme/AnnouncementBar' {
   export default function AnnouncementBar(): JSX.Element | null;
 }
 
+declare module '@theme/AnnouncementBar/Content' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'div'> {}
+
+  export default function AnnouncementBarContent(props: Props): JSX.Element;
+}
+
+declare module '@theme/AnnouncementBar/CloseButton' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'button'> {}
+
+  export default function AnnouncementBarCloseButton(props: Props): JSX.Element;
+}
+
 declare module '@theme/BackToTopButton' {
   export default function BackToTopButton(): JSX.Element;
 }
@@ -320,7 +336,7 @@ declare module '@theme/DocCardList' {
   import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 
   export interface Props {
-    readonly items: PropSidebarItem[];
+    readonly items?: PropSidebarItem[];
     readonly className?: string;
   }
 
@@ -772,6 +788,7 @@ declare module '@theme/MDXComponents' {
   import type MDXUl from '@theme/MDXComponents/Ul';
   import type MDXImg from '@theme/MDXComponents/Img';
   import type Admonition from '@theme/Admonition';
+  import type Mermaid from '@theme/Mermaid';
 
   export type MDXComponentsObject = {
     readonly head: typeof MDXHead;
@@ -788,6 +805,7 @@ declare module '@theme/MDXComponents' {
     readonly h5: (props: ComponentProps<'h5'>) => JSX.Element;
     readonly h6: (props: ComponentProps<'h6'>) => JSX.Element;
     readonly admonition: typeof Admonition;
+    readonly mermaid: typeof Mermaid;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     [tagName: string]: ComponentType<any>;
   };
@@ -1096,6 +1114,14 @@ declare module '@theme/SearchBar' {
   export default function SearchBar(): JSX.Element;
 }
 
+declare module '@theme/Mermaid' {
+  export interface Props {
+    value: string;
+  }
+
+  export default function Mermaid(props: Props): JSX.Element;
+}
+
 declare module '@theme/TabItem' {
   import type {ReactNode} from 'react';