♻️ Change toc components structure

packages/theme-nonepress/src/theme/TOC/Container/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import clsx from "clsx";
+
+import type { Props } from "@theme/TOC/Container";
+
+export default function TOCContainer({
+  className,
+  children,
+}: Props): JSX.Element {
+  return (
+    <div className={clsx("toc", className)}>
+      <div className="toc-container">{children}</div>
+    </div>
+  );
+}

packages/theme-nonepress/src/theme/TOC/index.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 
-import clsx from "clsx";
-
 import "./styles.css";
 import { useWindowSize } from "@nullbot/docusaurus-theme-nonepress/client";
 import { useTOCContent } from "@nullbot/docusaurus-theme-nonepress/contexts";
 import type { Props } from "@theme/TOC";
+import TOCContainer from "@theme/TOC/Container";
 import TOCContent from "@theme/TOC/Content";
 
 export default function TOC({ className }: Props): JSX.Element | null {
@@ -24,10 +23,8 @@ export default function TOC({ className }: Props): JSX.Element | null {
   }
 
   return (
-    <div className={clsx("toc", className)}>
-      <div className="toc-container">
-        <TOCContent {...tocContent} />
-      </div>
-    </div>
+    <TOCContainer className={className}>
+      <TOCContent {...tocContent} />
+    </TOCContainer>
   );
 }

packages/theme-nonepress/src/types.d.ts

@@ -1213,10 +1213,10 @@ declare module "@theme/Page" {
   import type { ReactNode } from "react";
 
   export interface Props {
-    children?: ReactNode;
-    hideSidebar?: boolean;
-    hideTableOfContents?: boolean;
-    reduceContentWidth?: boolean;
+    readonly children?: ReactNode;
+    readonly hideSidebar?: boolean;
+    readonly hideTableOfContents?: boolean;
+    readonly reduceContentWidth?: boolean;
   }
 
   export default function Page(props: Props): JSX.Element;
@@ -1415,6 +1415,16 @@ declare module "@theme/TOC" {
   export default function TOC(props: Props): JSX.Element | null;
 }
 
+declare module "@theme/TOC/Container" {
+  import type { ReactNode } from "react";
+  export interface Props {
+    readonly className?: string;
+    readonly children?: ReactNode;
+  }
+
+  export default function TOCContainer(props: Props): JSX.Element;
+}
+
 declare module "@theme/TOC/Content" {
   import type { TOCItem } from "@docusaurus/mdx-loader";