Fix OpenAPISelect

Author: nolannbiron

Diff for: packages/gitbook/src/components/DocumentView/OpenAPI/style.css

@@ -531,12 +531,20 @@ body:has(.openapi-select-popover) {
     @apply hover:bg-tint-hover transition-all;
 }
 
+.openapi-select > button > span.react-aria-SelectValue {
+    @apply shrink truncate;
+}
+
+.openapi-select > button > .gb-icon {
+    @apply shrink-0;
+}
+
 .openapi-select > button svg {
     @apply size-2.5;
 }
 
 .openapi-select-popover {
-    @apply min-w-32 max-w-44 w-fit max-h-52 right-0 overflow-y-auto p-1.5 border border-tint-subtle bg-tint-base backdrop-blur-xl rounded-md;
+    @apply min-w-32 max-w-fit w-auto max-h-52 overflow-y-auto p-1.5 border border-tint-subtle bg-tint-base backdrop-blur-xl rounded-md;
     @apply shadow-md shadow-tint-12/1 dark:shadow-tint-1/1;
 }
 

Diff for: packages/react-openapi/src/InteractiveSection.tsx

@@ -114,7 +114,7 @@ export function InteractiveSection(props: {
                                 )}
                                 items={tabs}
                                 selectedKey={selectedTab?.key ?? ''}
-                                onChange={(key) => {
+                                onSelectionChange={(key) => {
                                     setSelectedTab(String(key));
                                     state.expand();
                                 }}

Diff for: packages/react-openapi/src/OpenAPICodeSampleInteractive.tsx

@@ -70,6 +70,11 @@ function MediaTypeSelector(props: {
         return null;
     }
 
+    const items = renderers.map((renderer) => ({
+        key: renderer.mediaType,
+        label: renderer.mediaType,
+    }));
+
     return (
         <OpenAPISelect
             className={clsx('openapi-select')}
@@ -78,11 +83,12 @@ function MediaTypeSelector(props: {
                 key: renderer.mediaType,
                 label: renderer.mediaType,
             }))}
-            onChange={(e) => state.setMediaType(String(e))}
+            onSelectionChange={(e) => state.setMediaType(String(e))}
+            placement="bottom start"
         >
-            {renderers.map((renderer) => (
-                <OpenAPISelectItem key={renderer.mediaType} value={renderer}>
-                    {renderer.mediaType}
+            {items.map((item) => (
+                <OpenAPISelectItem key={item.key} id={item.key} value={item}>
+                    {item.label}
                 </OpenAPISelectItem>
             ))}
         </OpenAPISelect>
@@ -107,13 +113,13 @@ function ExamplesSelector(props: {
 
     return (
         <OpenAPISelect
-            className={clsx('openapi-select')}
             items={items}
-            selectedKey={String(state.index)}
-            onChange={(e) => state.setIndex(Number(e))}
+            selectedKey={state.index}
+            onSelectionChange={(e) => state.setIndex(Number(e))}
+            placement="bottom start"
         >
             {items.map((item) => (
-                <OpenAPISelectItem key={item.key} value={item}>
+                <OpenAPISelectItem key={item.key} id={item.key} value={item}>
                     {item.label}
                 </OpenAPISelectItem>
             ))}

Diff for: packages/react-openapi/src/OpenAPICodeSampleSelector.tsx

@@ -37,11 +37,11 @@ export function OpenAPICodeSampleHeader(props: {
             {items.length > 1 ? (
                 <OpenAPISelect
                     selectedKey={selected?.key}
-                    onChange={(key) => {
+                    onSelectionChange={(key) => {
                         state.setKey(key);
                     }}
                     items={items}
-                    defaultSelectedKey={items[0]?.key}
+                    placement="bottom end"
                 >
                     {items.map((item) => (
                         <OpenAPISelectItem key={item.key} id={item.key} value={item}>

Diff for: packages/react-openapi/src/OpenAPISelect.tsx

@@ -8,6 +8,7 @@ import {
     ListBoxItem,
     type ListBoxItemProps,
     Popover,
+    type PopoverProps,
     Select,
     type SelectProps,
     SelectValue,
@@ -23,18 +24,14 @@ interface OpenAPISelectProps<T extends OpenAPISelectItem> extends Omit<SelectPro
     children: React.ReactNode | ((item: T) => React.ReactNode);
     selectedKey?: Key;
     onChange?: (key: string | number) => void;
+    placement?: PopoverProps['placement'];
 }
 
 export function OpenAPISelect<T extends OpenAPISelectItem>(props: OpenAPISelectProps<T>) {
-    const { items, children, className, selectedKey, onChange } = props;
+    const { items, children, className, placement } = props;
 
     return (
-        <Select
-            {...props}
-            className={clsx('openapi-select', className)}
-            selectedKey={selectedKey}
-            onSelectionChange={onChange}
-        >
+        <Select {...props} className={clsx('openapi-select', className)}>
             <Button>
                 <SelectValue />
                 <span aria-hidden="true">
@@ -49,7 +46,7 @@ export function OpenAPISelect<T extends OpenAPISelectItem>(props: OpenAPISelectP
                     />
                 </span>
             </Button>
-            <Popover placement="bottom end" className="openapi-select-popover">
+            <Popover placement={placement} className="openapi-select-popover">
                 <ListBox className="openapi-select-listbox" items={items}>
                     {children}
                 </ListBox>