Add support for collapsing groups+categories

Resolves #2330
TypeStrong · Jun 9, 2024 · 1482eb5 · 1482eb5
1 parent 9f78397
commit 1482eb5
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -48,6 +48,7 @@
 -   New option, `--customFooterHtml` to add custom HTML to the generated page footer, #2559.
 -   TypeDoc will now copy modifier tags to children if specified in the `--cascadedModifierTags` option, #2056.
 -   TypeDoc will now warn if mutually exclusive modifier tags are specified for a comment (e.g. both `@alpha` and `@beta`), #2056.
+-   Groups and categories can now be collapsed in the page body, #2330.
 -   Added support for JSDoc `@hideconstructor` tag.
     This tag should only be used to work around TypeScript#58653, prefer the more general `@hidden`/`@ignore` tag to hide members normally, #2577.
 -   Added `--useHostedBaseUrlForAbsoluteLinks` option to use the `--hostedBaseUrl` option to produce absolute links to pages on a site, #940.

diff --git a/src/lib/models/reflections/kind.ts b/src/lib/models/reflections/kind.ts
@@ -38,6 +38,7 @@ export enum ReflectionKind {
 export namespace ReflectionKind {
     export type KindString = EnumKeys<typeof ReflectionKind>;
 
+    /** @internal */
     export const All = ReflectionKind.Reference * 2 - 1;
 
     /** @internal */
@@ -89,6 +90,7 @@ export namespace ReflectionKind {
         ReflectionKind.Interface |
         ReflectionKind.TypeAlias |
         ReflectionKind.Reference;
+    /** @internal */
     export const MayContainDocuments =
         SomeExport | ReflectionKind.Project | ReflectionKind.Document;
     /** @internal */

diff --git a/src/lib/output/themes/default/assets/bootstrap.ts b/src/lib/output/themes/default/assets/bootstrap.ts
@@ -7,7 +7,7 @@ import { initTheme } from "./typedoc/Theme";
 import { initNav } from "./typedoc/Navigation";
 
 registerComponent(Toggle, "a[data-toggle]");
-registerComponent(Accordion, ".tsd-index-accordion");
+registerComponent(Accordion, ".tsd-accordion");
 registerComponent(Filter, ".tsd-filter-item input[type=checkbox]");
 
 const themeChoice = document.getElementById("tsd-theme");

diff --git a/src/lib/output/themes/default/assets/typedoc/Navigation.ts b/src/lib/output/themes/default/assets/typedoc/Navigation.ts
@@ -57,8 +57,8 @@ function buildNavElement(
         const fullPath = [...path, el.text];
         const details = li.appendChild(document.createElement("details"));
         details.className = el.class
-            ? `${el.class} tsd-index-accordion`
-            : "tsd-index-accordion";
+            ? `${el.class} tsd-accordion`
+            : "tsd-accordion";
         details.dataset.key = fullPath.join("$");
 
         const summary = details.appendChild(document.createElement("summary"));

diff --git a/src/lib/output/themes/default/partials/index.tsx b/src/lib/output/themes/default/partials/index.tsx
@@ -57,7 +57,7 @@ export function index(context: DefaultThemeRenderContext, props: ContainerReflec
         )
     ) {
         content = (
-            <details class="tsd-index-content tsd-index-accordion" open={true}>
+            <details class="tsd-index-content tsd-accordion" open={true}>
                 <summary class="tsd-accordion-summary tsd-index-summary">
                     <h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex={0}>
                         {context.icons.chevronSmall()} {context.i18n.theme_index()}

diff --git a/src/lib/output/themes/default/partials/members.group.tsx b/src/lib/output/themes/default/partials/members.group.tsx
@@ -6,23 +6,34 @@ export function membersGroup(context: DefaultThemeRenderContext, group: Reflecti
     if (group.categories) {
         return (
             <>
-                {group.categories.map((item) => (
-                    <section class="tsd-panel-group tsd-member-group">
-                        <h2>
-                            {group.title}
-                            {!!item.title && <> - {item.title}</>}
-                        </h2>
-                        {item.children.map((item) => !item.hasOwnDocument && context.member(item))}
-                    </section>
-                ))}
+                {group.categories.map((item) => {
+                    const title = `${group.title} - ${item.title}`;
+
+                    return (
+                        <details class="tsd-panel-group tsd-member-group tsd-accordion" open>
+                            <summary class="tsd-accordion-summary" data-key={"section-" + title}>
+                                <h2>
+                                    {context.icons.chevronDown()} {title}
+                                </h2>
+                            </summary>
+                            <section>
+                                {item.children.map((item) => !item.hasOwnDocument && context.member(item))}
+                            </section>
+                        </details>
+                    );
+                })}
             </>
         );
     }
 
     return (
-        <section class="tsd-panel-group tsd-member-group">
-            <h2>{group.title}</h2>
-            {group.children.map((item) => !item.hasOwnDocument && context.member(item))}
-        </section>
+        <details class="tsd-panel-group tsd-member-group tsd-accordion" open>
+            <summary class="tsd-accordion-summary" data-key={"section-" + group.title}>
+                <h2>
+                    {context.icons.chevronDown()} {group.title}
+                </h2>
+            </summary>
+            <section>{group.children.map((item) => !item.hasOwnDocument && context.member(item))}</section>
+        </details>
     );
 }
diff --git a/src/lib/output/themes/default/partials/members.tsx b/src/lib/output/themes/default/partials/members.tsx
@@ -10,15 +10,21 @@ export function members(context: DefaultThemeRenderContext, props: ContainerRefl
                 {props.categories.map(
                     (item) =>
                         !item.allChildrenHaveOwnDocument() && (
-                            <section
+                            <details
                                 class={classNames(
-                                    { "tsd-panel-group": true, "tsd-member-group": true },
+                                    { "tsd-panel-group": true, "tsd-member-group": true, "tsd-accordion": true },
                                     props instanceof DeclarationReflection ? context.getReflectionClasses(props) : "",
                                 )}
                             >
-                                <h2>{item.title}</h2>
-                                {item.children.map((item) => !item.hasOwnDocument && context.member(item))}
-                            </section>
+                                <summary class="tsd-accordion-summary" data-key={"section-" + item.title}>
+                                    <h2>
+                                        {context.icons.chevronDown()} {item.title}
+                                    </h2>
+                                </summary>
+                                <section>
+                                    {item.children.map((item) => !item.hasOwnDocument && context.member(item))}
+                                </section>
+                            </details>
                         ),
                 )}
             </>

diff --git a/src/lib/output/themes/default/partials/navigation.tsx b/src/lib/output/themes/default/partials/navigation.tsx
@@ -73,7 +73,7 @@ export function settings(context: DefaultThemeRenderContext) {
 
     return (
         <div class="tsd-navigation settings">
-            <details class="tsd-index-accordion" open={false}>
+            <details class="tsd-accordion" open={false}>
                 <summary class="tsd-accordion-summary">
                     <h3>
                         {context.icons.chevronDown()}
@@ -176,7 +176,7 @@ export function pageNavigation(context: DefaultThemeRenderContext, props: PageEv
     finalizeLevel(true);
 
     return (
-        <details open={true} class="tsd-index-accordion tsd-page-navigation">
+        <details open={true} class="tsd-accordion tsd-page-navigation">
             <summary class="tsd-accordion-summary">
                 <h3>
                     {context.icons.chevronDown()}

diff --git a/static/style.css b/static/style.css
@@ -839,7 +839,7 @@ a.tsd-index-link {
     padding-top: 0;
     padding-bottom: 0;
 }
-.tsd-index-accordion .tsd-accordion-summary > svg {
+.tsd-accordion .tsd-accordion-summary > svg {
     margin-left: 0.25rem;
 }
 .tsd-index-content > :not(:first-child) {
@@ -888,14 +888,17 @@ a.tsd-index-link {
 }
 
 .tsd-panel-group {
-    margin: 4rem 0;
+    margin: 2rem 0;
 }
 .tsd-panel-group.tsd-index-group {
     margin: 2rem 0;
 }
 .tsd-panel-group.tsd-index-group details {
     margin: 2rem 0;
 }
+.tsd-panel-group > .tsd-accordion-summary {
+    margin-bottom: 1rem;
+}
 
 #tsd-search {
     transition: background-color 0.2s;