Switch to DisclosureGroup

Author: nolannbiron

packages/gitbook/src/components/DocumentView/OpenAPI/style.css

@@ -334,7 +334,7 @@
 }
 
 .openapi-securities-scopes ul {
-    @apply !my-0 !list-none !pl-0;
+    @apply !my-0 ml-4 pl-0;
 }
 
 .openapi-securities-url {
@@ -1016,11 +1016,7 @@ body:has(.openapi-select-popover) {
 }
 
 .openapi-required-scopes {
-    @apply ring-1 ring-tint-subtle text-base font-medium mx-0;
-}
-
-.openapi-required-scopes .openapi-disclosure-trigger-label {
-    @apply top-1/2 -translate-y-1/2;
+    @apply border text-base rounded-md straight-corners:rounded-none circular-corners:rounded-md font-medium mx-0;
 }
 
 .openapi-required-scopes .openapi-required-scopes-header {
@@ -1029,4 +1025,15 @@ body:has(.openapi-select-popover) {
 
 .openapi-required-scopes .openapi-required-scopes-header svg {
     @apply size-3.5 text-tint-subtle rotate-none;
+}
+
+.openapi-required-scopes .openapi-disclosure-group-panel {
+    @apply px-3 pb-3;
+}
+.openapi-required-scopes .openapi-securities-scopes {
+    @apply ml-6;
+}
+
+.openapi-required-scopes .openapi-required-scopes-description {
+    @apply text-xs text-tint-subtle font-normal mb-2;
 }

packages/react-openapi/src/OpenAPIDisclosureGroup.tsx

@@ -1,22 +1,29 @@
 'use client';
 
+import clsx from 'classnames';
 import { createContext, useContext, useRef } from 'react';
 import { mergeProps, useButton, useDisclosure, useFocusRing, useId } from 'react-aria';
+import type { Key } from 'react-aria';
 import {
     type DisclosureGroupProps,
     type DisclosureGroupState,
     useDisclosureGroupState,
     useDisclosureState,
 } from 'react-stately';
+import { useStore } from 'zustand';
 import { OpenAPISelect, OpenAPISelectItem, useSelectState } from './OpenAPISelect';
+import { getOrCreateDisclosureStoreByKey } from './getOrCreateDisclosureStoreByKey';
 
 interface Props {
     groups: TDisclosureGroup[];
     icon?: React.ReactNode;
     /** State key to use with a store */
     selectStateKey?: string;
+    /** State key to synchronize disclosure groups across the page */
+    stateKey?: string;
     /** Icon to display for the select */
     selectIcon?: React.ReactNode;
+    className?: string;
 }
 
 type TDisclosureGroup = {
@@ -31,18 +38,50 @@ type TDisclosureGroup = {
 
 const DisclosureGroupStateContext = createContext<DisclosureGroupState | null>(null);
 
+function useDisclosureGroupStore(stateKey = 'disclosure-group', initialKeys?: Iterable<Key>) {
+    const store = useStore(getOrCreateDisclosureStoreByKey(stateKey, initialKeys));
+    return store;
+}
+
 /**
  * Display an interactive OpenAPI disclosure group.
  */
 export function OpenAPIDisclosureGroup(props: DisclosureGroupProps & Props) {
-    const { icon, groups, selectStateKey, selectIcon } = props;
+    const {
+        icon,
+        groups,
+        selectStateKey,
+        stateKey,
+        selectIcon,
+        className,
+        expandedKeys,
+        defaultExpandedKeys,
+        onExpandedChange,
+    } = props;
+
+    const initialKeys =
+        expandedKeys || defaultExpandedKeys
+            ? new Set(expandedKeys || defaultExpandedKeys)
+            : undefined;
+    const { expandedKeys: storeExpandedKeys, setExpandedKeys } = useDisclosureGroupStore(
+        stateKey,
+        initialKeys
+    );
 
-    const state = useDisclosureGroupState(props);
+    const state = useDisclosureGroupState({
+        ...props,
+        expandedKeys: storeExpandedKeys,
+        onExpandedChange: (keys) => {
+            setExpandedKeys(keys);
+            onExpandedChange?.(keys);
+        },
+    });
 
     return (
         <DisclosureGroupStateContext.Provider value={state}>
             {groups.map((group) => (
                 <DisclosureItem
+                    className={className}
                     selectStateKey={selectStateKey}
                     selectIcon={selectIcon}
                     icon={icon}
@@ -59,8 +98,9 @@ function DisclosureItem(props: {
     icon?: React.ReactNode;
     selectStateKey?: string;
     selectIcon?: React.ReactNode;
+    className?: string;
 }) {
-    const { icon, group, selectStateKey, selectIcon } = props;
+    const { icon, group, selectStateKey, selectIcon, className } = props;
 
     const defaultId = useId();
     const id = group.key || defaultId;
@@ -95,7 +135,10 @@ function DisclosureItem(props: {
     const selectedTab = group.tabs?.find((tab) => tab.key === store.key) || group.tabs?.[0];
 
     return (
-        <div className="openapi-disclosure-group" aria-expanded={state.isExpanded}>
+        <div
+            className={clsx('openapi-disclosure-group', className)}
+            aria-expanded={state.isExpanded}
+        >
             <div
                 slot="trigger"
                 ref={triggerRef}

packages/react-openapi/src/OpenAPIRequiredScopes.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { OpenAPICopyButton } from './OpenAPICopyButton';
-import { OpenAPIDisclosure } from './OpenAPIDisclosure';
+import { OpenAPIDisclosureGroup } from './OpenAPIDisclosureGroup';
 import { useSelectState } from './OpenAPISelect';
 import type { OpenAPIClientContext } from './context';
 import { t } from './translate';
@@ -39,20 +39,30 @@ export function OpenAPIRequiredScopes(props: {
     }
 
     return (
-        <OpenAPIDisclosure
-            defaultExpanded
+        <OpenAPIDisclosureGroup
             className="openapi-required-scopes"
-            header={
-                <div className="openapi-required-scopes-header">
-                    {context.icons.lock}
-                    <span>{t(context.translation, 'required_scopes')}</span>
-                </div>
-            }
-            icon={context.icons.plus}
-            label=""
-        >
-            <OpenAPISchemaScopes scopes={scopes} context={context} />
-        </OpenAPIDisclosure>
+            icon={context.icons.chevronRight}
+            stateKey="required-scopes"
+            defaultExpandedKeys={['required-scopes']}
+            groups={[
+                {
+                    key: 'required-scopes',
+                    label: (
+                        <div className="openapi-required-scopes-header">
+                            {context.icons.lock}
+                            <span>{t(context.translation, 'required_scopes')}</span>
+                        </div>
+                    ),
+                    tabs: [
+                        {
+                            key: 'scopes',
+                            label: '',
+                            body: <OpenAPISchemaScopes scopes={scopes} context={context} />,
+                        },
+                    ],
+                },
+            ]}
+        />
     );
 }
 
@@ -64,6 +74,9 @@ function OpenAPISchemaScopes(props: {
 
     return (
         <div className="openapi-securities-scopes openapi-markdown">
+            <div className="openapi-required-scopes-description">
+                This endpoint requires the following scopes:
+            </div>
             <ul>
                 {scopes.map((scope) => (
                     <OpenAPIScopeItem key={scope[0]} scope={scope} context={context} />

packages/react-openapi/src/getOrCreateDisclosureStoreByKey.ts

@@ -0,0 +1,51 @@
+import type { Key } from 'react-stately';
+import { createStore } from 'zustand';
+
+type DisclosureState = {
+    expandedKeys: Set<Key>;
+};
+
+type DisclosureActions = {
+    setExpandedKeys: (keys: Set<Key>) => void;
+    toggleKey: (key: Key) => void;
+};
+
+export type DisclosureStore = DisclosureState & DisclosureActions;
+
+const createDisclosureStore = (initialKeys?: Iterable<Key>) => {
+    return createStore<DisclosureStore>()((set) => ({
+        expandedKeys: initialKeys ? new Set(initialKeys) : new Set(),
+        setExpandedKeys: (keys) => {
+            set(() => ({ expandedKeys: keys }));
+        },
+        toggleKey: (key) => {
+            set((state) => {
+                const newKeys = new Set(state.expandedKeys);
+                if (newKeys.has(key)) {
+                    newKeys.delete(key);
+                } else {
+                    newKeys.add(key);
+                }
+                return { expandedKeys: newKeys };
+            });
+        },
+    }));
+};
+
+const defaultDisclosureStores = new Map<string, ReturnType<typeof createDisclosureStore>>();
+
+const createDisclosureStoreFactory = (stores: typeof defaultDisclosureStores) => {
+    return (storeKey: string, initialKeys?: Iterable<Key>) => {
+        if (!stores.has(storeKey)) {
+            stores.set(storeKey, createDisclosureStore(initialKeys));
+        }
+        const store = stores.get(storeKey);
+        if (!store) {
+            throw new Error(`Failed to get or create store for key: ${storeKey}`);
+        }
+        return store;
+    };
+};
+
+export const getOrCreateDisclosureStoreByKey =
+    createDisclosureStoreFactory(defaultDisclosureStores);