From bcfc839f687e481d989ec166b2b75c34df8ad8b8 Mon Sep 17 00:00:00 2001
From: Ju4tCode <42488585+yanyongyu@users.noreply.github.com>
Date: Wed, 27 Sep 2023 06:53:03 +0000
Subject: [PATCH] :recycle: Change toc components structure

---
 .../src/theme/TOC/Container/index.tsx          | 16 ++++++++++++++++
 .../theme-nonepress/src/theme/TOC/index.tsx    | 11 ++++-------
 packages/theme-nonepress/src/types.d.ts        | 18 ++++++++++++++----
 3 files changed, 34 insertions(+), 11 deletions(-)
 create mode 100644 packages/theme-nonepress/src/theme/TOC/Container/index.tsx

diff --git a/packages/theme-nonepress/src/theme/TOC/Container/index.tsx b/packages/theme-nonepress/src/theme/TOC/Container/index.tsx
new file mode 100644
index 0000000..08a37e7
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/theme-nonepress/src/theme/TOC/index.tsx b/packages/theme-nonepress/src/theme/TOC/index.tsx
index ceb748a..e4ad071 100644
--- a/packages/theme-nonepress/src/theme/TOC/index.tsx
+++ b/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>
   );
 }
diff --git a/packages/theme-nonepress/src/types.d.ts b/packages/theme-nonepress/src/types.d.ts
index b85d9e5..52b728d 100644
--- a/packages/theme-nonepress/src/types.d.ts
+++ b/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";