Fix openapi CR preview (#3197)

.changeset/giant-dolphins-approve.md

@@ -0,0 +1,6 @@
+---
+'@gitbook/react-openapi': patch
+'gitbook': patch
+---
+
+Fix openapi CR preview

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

@@ -692,18 +692,18 @@ body:has(.openapi-select-popover) {
 }
 
 .openapi-disclosure-group-trigger {
-    @apply flex w-full items-baseline gap-3 transition-all relative flex-1 p-3 -outline-offset-1;
+    @apply flex w-full cursor-pointer items-baseline gap-3 transition-all relative flex-1 p-3 -outline-offset-1;
 }
 
 .openapi-disclosure-group-label {
     @apply flex flex-wrap items-baseline gap-x-3 gap-y-1 flex-1 truncate;
 }
 
-.openapi-disclosure-group-trigger:disabled {
+.openapi-disclosure-group-trigger[aria-disabled="true"] {
     @apply cursor-default hover:bg-inherit;
 }
 
-.openapi-disclosure-group-trigger:disabled .openapi-disclosure-group-icon {
+.openapi-disclosure-group-trigger[aria-disabled="true"] .openapi-disclosure-group-icon {
     @apply invisible;
 }
 

packages/react-openapi/src/OpenAPIDisclosureGroup.tsx

@@ -76,7 +76,7 @@ function DisclosureItem(props: {
     });
 
     const panelRef = useRef<HTMLDivElement | null>(null);
-    const triggerRef = useRef<HTMLButtonElement | null>(null);
+    const triggerRef = useRef<HTMLDivElement | null>(null);
     const isDisabled = groupState?.isDisabled || !group.tabs?.length || false;
     const { buttonProps: triggerProps, panelProps } = useDisclosure(
         {
@@ -96,11 +96,11 @@ function DisclosureItem(props: {
 
     return (
         <div className="openapi-disclosure-group" aria-expanded={state.isExpanded}>
-            <button
+            <div
                 slot="trigger"
                 ref={triggerRef}
                 {...mergeProps(buttonProps, focusProps)}
-                disabled={isDisabled}
+                aria-disabled={isDisabled}
                 style={{
                     outline: isFocusVisible
                         ? '2px solid rgb(var(--primary-color-500)/0.4)'
@@ -146,7 +146,7 @@ function DisclosureItem(props: {
                         </div>
                     ) : null}
                 </div>
-            </button>
+            </div>
 
             {state.isExpanded && selectedTab && (
                 <div className="openapi-disclosure-group-panel" ref={panelRef} {...panelProps}>