@docusaurus/theme-classic 3.6.3 → 3.7.0

package/src/theme/Blog/Components/Author/Socials/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {ComponentType} from 'react';
+import type {ComponentType, ReactNode} from 'react';
 import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
@@ -17,6 +17,12 @@ import X from '@theme/Icon/Socials/X';
 import StackOverflow from '@theme/Icon/Socials/StackOverflow';
 import LinkedIn from '@theme/Icon/Socials/LinkedIn';
 import DefaultSocialIcon from '@theme/Icon/Socials/Default';
+import Bluesky from '@theme/Icon/Socials/Bluesky';
+import Instagram from '@theme/Icon/Socials/Instagram';
+import Threads from '@theme/Icon/Socials/Threads';
+import Youtube from '@theme/Icon/Socials/YouTube';
+import Mastodon from '@theme/Icon/Socials/Mastodon';
+import Twitch from '@theme/Icon/Socials/Twitch';
 
 import styles from './styles.module.css';
 
@@ -30,6 +36,12 @@ const SocialPlatformConfigs: Record<string, SocialPlatformConfig> = {
   stackoverflow: {Icon: StackOverflow, label: 'Stack Overflow'},
   linkedin: {Icon: LinkedIn, label: 'LinkedIn'},
   x: {Icon: X, label: 'X'},
+  bluesky: {Icon: Bluesky, label: 'Bluesky'},
+  instagram: {Icon: Instagram, label: 'Instagram'},
+  threads: {Icon: Threads, label: 'Threads'},
+  mastodon: {Icon: Mastodon, label: 'Mastodon'},
+  youtube: {Icon: Youtube, label: 'YouTube'},
+  twitch: {Icon: Twitch, label: 'Twitch'},
 };
 
 function getSocialPlatformConfig(platformKey: string): SocialPlatformConfig {
@@ -54,7 +66,7 @@ export default function BlogAuthorSocials({
   author,
 }: {
   author: Props['author'];
-}): JSX.Element {
+}): ReactNode {
   const entries = Object.entries(author.socials ?? {});
   return (
     <div className={styles.authorSocials}>

package/src/theme/Blog/Components/Author/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import Link, {type Props as LinkProps} from '@docusaurus/Link';
 import AuthorSocials from '@theme/Blog/Components/Author/Socials';
@@ -13,7 +13,7 @@ import type {Props} from '@theme/Blog/Components/Author';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 
-function MaybeLink(props: LinkProps): JSX.Element {
+function MaybeLink(props: LinkProps): ReactNode {
   if (props.href) {
     return <Link {...props} />;
   }
@@ -53,7 +53,7 @@ export default function BlogAuthor({
   author,
   className,
   count,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const {name, title, url, imageURL, email, page} = author;
   const link =
     page?.permalink || url || (email && `mailto:${email}`) || undefined;

package/src/theme/Blog/Pages/BlogAuthorsPostsPage/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {
   PageMetadata,
@@ -26,7 +26,7 @@ import type {Props} from '@theme/Blog/Pages/BlogAuthorsPostsPage';
 import BlogPostItems from '@theme/BlogPostItems';
 import Author from '@theme/Blog/Components/Author';
 
-function Metadata({author}: Props): JSX.Element {
+function Metadata({author}: Props): ReactNode {
   const title = useBlogAuthorPageTitle(author);
   return (
     <>
@@ -45,7 +45,7 @@ function ViewAllAuthorsLink() {
   );
 }
 
-function Content({author, items, sidebar, listMetadata}: Props): JSX.Element {
+function Content({author, items, sidebar, listMetadata}: Props): ReactNode {
   return (
     <BlogLayout sidebar={sidebar}>
       <header className="margin-bottom--xl">
@@ -68,7 +68,7 @@ function Content({author, items, sidebar, listMetadata}: Props): JSX.Element {
   );
 }
 
-export default function BlogAuthorsPostsPage(props: Props): JSX.Element {
+export default function BlogAuthorsPostsPage(props: Props): ReactNode {
   return (
     <HtmlClassNameProvider
       className={clsx(

package/src/theme/BlogArchivePage/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
 import {PageMetadata} from '@docusaurus/theme-common';
@@ -76,7 +76,7 @@ function listPostsByYears(blogPosts: readonly ArchiveBlogPost[]): YearProp[] {
   }));
 }
 
-export default function BlogArchive({archive}: Props): JSX.Element {
+export default function BlogArchive({archive}: Props): ReactNode {
   const title = translate({
     id: 'theme.blog.archive.title',
     message: 'Archive',

package/src/theme/BlogLayout/index.tsx

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import Layout from '@theme/Layout';
 import BlogSidebar from '@theme/BlogSidebar';
 
 import type {Props} from '@theme/BlogLayout';
 
-export default function BlogLayout(props: Props): JSX.Element {
+export default function BlogLayout(props: Props): ReactNode {
   const {sidebar, toc, children, ...layoutProps} = props;
   const hasSidebar = sidebar && sidebar.items.length > 0;
 

package/src/theme/BlogListPage/StructuredData/index.tsx

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Head from '@docusaurus/Head';
 import {useBlogListPageStructuredData} from '@docusaurus/plugin-content-blog/client';
 import type {Props} from '@theme/BlogListPage/StructuredData';
 
-export default function BlogListPageStructuredData(props: Props): JSX.Element {
+export default function BlogListPageStructuredData(props: Props): ReactNode {
   const structuredData = useBlogListPageStructuredData(props);
   return (
     <Head>

package/src/theme/BlogListPage/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -21,7 +21,7 @@ import type {Props} from '@theme/BlogListPage';
 import BlogPostItems from '@theme/BlogPostItems';
 import BlogListPageStructuredData from '@theme/BlogListPage/StructuredData';
 
-function BlogListPageMetadata(props: Props): JSX.Element {
+function BlogListPageMetadata(props: Props): ReactNode {
   const {metadata} = props;
   const {
     siteConfig: {title: siteTitle},
@@ -37,7 +37,7 @@ function BlogListPageMetadata(props: Props): JSX.Element {
   );
 }
 
-function BlogListPageContent(props: Props): JSX.Element {
+function BlogListPageContent(props: Props): ReactNode {
   const {metadata, items, sidebar} = props;
   return (
     <BlogLayout sidebar={sidebar}>
@@ -47,7 +47,7 @@ function BlogListPageContent(props: Props): JSX.Element {
   );
 }
 
-export default function BlogListPage(props: Props): JSX.Element {
+export default function BlogListPage(props: Props): ReactNode {
   return (
     <HtmlClassNameProvider
       className={clsx(

package/src/theme/BlogListPaginator/index.tsx

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
 import PaginatorNavLink from '@theme/PaginatorNavLink';
 import type {Props} from '@theme/BlogListPaginator';
 
-export default function BlogListPaginator(props: Props): JSX.Element {
+export default function BlogListPaginator(props: Props): ReactNode {
   const {metadata} = props;
   const {previousPage, nextPage} = metadata;
 

package/src/theme/BlogPostItem/Container/index.tsx

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import type {Props} from '@theme/BlogPostItem/Container';
 
 export default function BlogPostItemContainer({
   children,
   className,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   return <article className={className}>{children}</article>;
 }

package/src/theme/BlogPostItem/Content/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {blogPostContainerID} from '@docusaurus/utils-common';
 import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
@@ -15,7 +15,7 @@ import type {Props} from '@theme/BlogPostItem/Content';
 export default function BlogPostItemContent({
   children,
   className,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const {isBlogPostPage} = useBlogPost();
   return (
     <div

package/src/theme/BlogPostItem/Footer/ReadMoreLink/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
 import type {Props} from '@theme/BlogPostItem/Footer/ReadMoreLink';
@@ -24,7 +24,7 @@ function ReadMoreLabel() {
 
 export default function BlogPostItemFooterReadMoreLink(
   props: Props,
-): JSX.Element {
+): ReactNode {
   const {blogPostTitle, ...linkProps} = props;
   return (
     <Link

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import {ThemeClassNames} from '@docusaurus/theme-common';
@@ -13,7 +13,7 @@ import EditMetaRow from '@theme/EditMetaRow';
 import TagsListInline from '@theme/TagsListInline';
 import ReadMoreLink from '@theme/BlogPostItem/Footer/ReadMoreLink';
 
-export default function BlogPostItemFooter(): JSX.Element | null {
+export default function BlogPostItemFooter(): ReactNode {
   const {metadata, isBlogPostPage} = useBlogPost();
   const {
     tags,

package/src/theme/BlogPostItem/Header/Authors/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import BlogAuthor from '@theme/Blog/Components/Author';
@@ -15,7 +15,7 @@ import styles from './styles.module.css';
 // Component responsible for the authors layout
 export default function BlogPostItemHeaderAuthors({
   className,
-}: Props): JSX.Element | null {
+}: Props): ReactNode {
   const {
     metadata: {authors},
     assets,

package/src/theme/BlogPostItem/Header/Info/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
 import {usePluralForm} from '@docusaurus/theme-common';
@@ -54,9 +54,7 @@ function Spacer() {
   return <>{' · '}</>;
 }
 
-export default function BlogPostItemHeaderInfo({
-  className,
-}: Props): JSX.Element {
+export default function BlogPostItemHeaderInfo({className}: Props): ReactNode {
   const {metadata} = useBlogPost();
   const {date, readingTime} = metadata;
 

package/src/theme/BlogPostItem/Header/Title/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
@@ -13,9 +13,7 @@ import type {Props} from '@theme/BlogPostItem/Header/Title';
 
 import styles from './styles.module.css';
 
-export default function BlogPostItemHeaderTitle({
-  className,
-}: Props): JSX.Element {
+export default function BlogPostItemHeaderTitle({className}: Props): ReactNode {
   const {metadata, isBlogPostPage} = useBlogPost();
   const {permalink, title} = metadata;
   const TitleHeading = isBlogPostPage ? 'h1' : 'h2';

package/src/theme/BlogPostItem/Header/index.tsx

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import BlogPostItemHeaderTitle from '@theme/BlogPostItem/Header/Title';
 import BlogPostItemHeaderInfo from '@theme/BlogPostItem/Header/Info';
 import BlogPostItemHeaderAuthors from '@theme/BlogPostItem/Header/Authors';
 
-export default function BlogPostItemHeader(): JSX.Element {
+export default function BlogPostItemHeader(): ReactNode {
   return (
     <header>
       <BlogPostItemHeaderTitle />

package/src/theme/BlogPostItem/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import BlogPostItemContainer from '@theme/BlogPostItem/Container';
@@ -20,10 +20,7 @@ function useContainerClassName() {
   return !isBlogPostPage ? 'margin-bottom--xl' : undefined;
 }
 
-export default function BlogPostItem({
-  children,
-  className,
-}: Props): JSX.Element {
+export default function BlogPostItem({children, className}: Props): ReactNode {
   const containerClassName = useContainerClassName();
   return (
     <BlogPostItemContainer className={clsx(containerClassName, className)}>

package/src/theme/BlogPostItems/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import {BlogPostProvider} from '@docusaurus/plugin-content-blog/client';
 import BlogPostItem from '@theme/BlogPostItem';
 import type {Props} from '@theme/BlogPostItems';
@@ -13,7 +13,7 @@ import type {Props} from '@theme/BlogPostItems';
 export default function BlogPostItems({
   items,
   component: BlogPostItemComponent = BlogPostItem,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   return (
     <>
       {items.map(({content: BlogPostContent}) => (

package/src/theme/BlogPostPage/Metadata/index.tsx

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import {PageMetadata} from '@docusaurus/theme-common';
 import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 
-export default function BlogPostPageMetadata(): JSX.Element {
+export default function BlogPostPageMetadata(): ReactNode {
   const {assets, metadata} = useBlogPost();
   const {title, description, date, tags, authors, frontMatter} = metadata;
 

package/src/theme/BlogPostPage/StructuredData/index.tsx

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Head from '@docusaurus/Head';
 import {useBlogPostStructuredData} from '@docusaurus/plugin-content-blog/client';
 
-export default function BlogPostStructuredData(): JSX.Element {
+export default function BlogPostStructuredData(): ReactNode {
   const structuredData = useBlogPostStructuredData();
   return (
     <Head>

package/src/theme/BlogPostPage/index.tsx

@@ -28,7 +28,7 @@ function BlogPostPageContent({
 }: {
   sidebar: BlogSidebar;
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   const {metadata, toc} = useBlogPost();
   const {nextItem, prevItem, frontMatter} = metadata;
   const {
@@ -59,7 +59,7 @@ function BlogPostPageContent({
   );
 }
 
-export default function BlogPostPage(props: Props): JSX.Element {
+export default function BlogPostPage(props: Props): ReactNode {
   const BlogPostContent = props.content;
   return (
     <BlogPostProvider content={props.content} isBlogPostPage>

package/src/theme/BlogPostPaginator/index.tsx

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
 import PaginatorNavLink from '@theme/PaginatorNavLink';
 import type {Props} from '@theme/BlogPostPaginator';
 
-export default function BlogPostPaginator(props: Props): JSX.Element {
+export default function BlogPostPaginator(props: Props): ReactNode {
   const {nextItem, prevItem} = props;
 
   return (

package/src/theme/BlogSidebar/Mobile/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {memo} from 'react';
+import React, {memo, type ReactNode} from 'react';
 import {
   useVisibleBlogSidebarItems,
   BlogSidebarItemList,
@@ -29,7 +29,7 @@ const ListComponent: BlogSidebarContentProps['ListComponent'] = ({items}) => {
   );
 };
 
-function BlogSidebarMobileSecondaryMenu({sidebar}: Props): JSX.Element {
+function BlogSidebarMobileSecondaryMenu({sidebar}: Props): ReactNode {
   const items = useVisibleBlogSidebarItems(sidebar.items);
   return (
     <BlogSidebarContent
@@ -40,7 +40,7 @@ function BlogSidebarMobileSecondaryMenu({sidebar}: Props): JSX.Element {
   );
 }
 
-function BlogSidebarMobile(props: Props): JSX.Element {
+function BlogSidebarMobile(props: Props): ReactNode {
   return (
     <NavbarSecondaryMenuFiller
       component={BlogSidebarMobileSecondaryMenu}

package/src/theme/BlogSidebar/index.tsx

@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import {useWindowSize} from '@docusaurus/theme-common';
 import BlogSidebarDesktop from '@theme/BlogSidebar/Desktop';
 import BlogSidebarMobile from '@theme/BlogSidebar/Mobile';
 import type {Props} from '@theme/BlogSidebar';
 
-export default function BlogSidebar({sidebar}: Props): JSX.Element | null {
+export default function BlogSidebar({sidebar}: Props): ReactNode {
   const windowSize = useWindowSize();
   if (!sidebar?.items.length) {
     return null;

package/src/theme/BlogTagsListPage/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {
   PageMetadata,
@@ -19,7 +19,7 @@ import type {Props} from '@theme/BlogTagsListPage';
 import SearchMetadata from '@theme/SearchMetadata';
 import Heading from '@theme/Heading';
 
-export default function BlogTagsListPage({tags, sidebar}: Props): JSX.Element {
+export default function BlogTagsListPage({tags, sidebar}: Props): ReactNode {
   const title = translateTagsPageTitle();
   return (
     <HtmlClassNameProvider

package/src/theme/BlogTagsPostsPage/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import {
@@ -23,7 +23,7 @@ import BlogPostItems from '@theme/BlogPostItems';
 import Unlisted from '@theme/ContentVisibility/Unlisted';
 import Heading from '@theme/Heading';
 
-function BlogTagsPostsPageMetadata({tag}: Props): JSX.Element {
+function BlogTagsPostsPageMetadata({tag}: Props): ReactNode {
   const title = useBlogTagsPostsPageTitle(tag);
   return (
     <>
@@ -38,7 +38,7 @@ function BlogTagsPostsPageContent({
   items,
   sidebar,
   listMetadata,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const title = useBlogTagsPostsPageTitle(tag);
   return (
     <BlogLayout sidebar={sidebar}>
@@ -59,7 +59,7 @@ function BlogTagsPostsPageContent({
     </BlogLayout>
   );
 }
-export default function BlogTagsPostsPage(props: Props): JSX.Element {
+export default function BlogTagsPostsPage(props: Props): ReactNode {
   return (
     <HtmlClassNameProvider
       className={clsx(

package/src/theme/CodeBlock/Container/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ComponentProps} from 'react';
+import React, {type ComponentProps, type ReactNode} from 'react';
 import clsx from 'clsx';
 import {ThemeClassNames, usePrismTheme} from '@docusaurus/theme-common';
 import {getPrismCssVariables} from '@docusaurus/theme-common/internal';
@@ -14,7 +14,7 @@ import styles from './styles.module.css';
 export default function CodeBlockContainer<T extends 'div' | 'pre'>({
   as: As,
   ...props
-}: {as: T} & ComponentProps<T>): JSX.Element {
+}: {as: T} & ComponentProps<T>): ReactNode {
   const prismTheme = usePrismTheme();
   const prismCssVariables = getPrismCssVariables(prismTheme);
   return (

package/src/theme/CodeBlock/Content/Element.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import Container from '@theme/CodeBlock/Container';
 import type {Props} from '@theme/CodeBlock/Content/Element';
@@ -15,10 +15,7 @@ import styles from './styles.module.css';
 // <pre> tags in markdown map to CodeBlocks. They may contain JSX children. When
 // the children is not a simple string, we just return a styled block without
 // actually highlighting.
-export default function CodeBlockJSX({
-  children,
-  className,
-}: Props): JSX.Element {
+export default function CodeBlockJSX({children, className}: Props): ReactNode {
   return (
     <Container
       as="pre"

package/src/theme/CodeBlock/Content/String.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {useThemeConfig, usePrismTheme} from '@docusaurus/theme-common';
 import {
@@ -38,7 +38,7 @@ export default function CodeBlockString({
   title: titleProp,
   showLineNumbers: showLineNumbersProp,
   language: languageProp,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const {
     prism: {defaultLanguage, magicComments},
   } = useThemeConfig();

package/src/theme/CodeBlock/CopyButton/index.tsx

@@ -5,7 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useCallback, useState, useRef, useEffect} from 'react';
+import React, {
+  useCallback,
+  useState,
+  useRef,
+  useEffect,
+  type ReactNode,
+} from 'react';
 import clsx from 'clsx';
 import copy from 'copy-text-to-clipboard';
 import {translate} from '@docusaurus/Translate';
@@ -15,7 +21,7 @@ import IconSuccess from '@theme/Icon/Success';
 
 import styles from './styles.module.css';
 
-export default function CopyButton({code, className}: Props): JSX.Element {
+export default function CopyButton({code, className}: Props): ReactNode {
   const [isCopied, setIsCopied] = useState(false);
   const copyTimeout = useRef<number | undefined>(undefined);
   const handleCopyCode = useCallback(() => {