diff --git a/packages/react-openapi/src/OpenAPIPath.tsx b/packages/react-openapi/src/OpenAPIPath.tsx
index ddc6893fe..aa5857a5d 100644
--- a/packages/react-openapi/src/OpenAPIPath.tsx
+++ b/packages/react-openapi/src/OpenAPIPath.tsx
@@ -1,5 +1,5 @@
import { OpenAPICopyButton } from './OpenAPICopyButton';
-import type { OpenAPIContext, OpenAPIOperationData } from './types';
+import type { OpenAPIOperationData } from './types';
import { getDefaultServerURL } from './util/server';
/**
@@ -7,25 +7,42 @@ import { getDefaultServerURL } from './util/server';
*/
export function OpenAPIPath(props: {
data: OpenAPIOperationData;
- context: OpenAPIContext;
+ /** Whether to show the server URL.
+ * @default true
+ */
+ withServer?: boolean;
+ /**
+ * Whether the path is copyable.
+ * @default true
+ */
+ canCopy?: boolean;
}) {
- const { data } = props;
+ const { data, withServer = true, canCopy = true } = props;
const { method, path, operation } = data;
const server = getDefaultServerURL(data.servers);
const formattedPath = formatPath(path);
+ const element = (() => {
+ return (
+ <>
+ {withServer ?
{server} : null}
+ {formattedPath}
+
+ );
+ })();
+
return (
{method}
- {server}
- {formattedPath}
+ {element}
);
diff --git a/packages/react-openapi/src/OpenAPISelect.tsx b/packages/react-openapi/src/OpenAPISelect.tsx
new file mode 100644
index 000000000..14b83b77d
--- /dev/null
+++ b/packages/react-openapi/src/OpenAPISelect.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import clsx from 'clsx';
+import {
+ Button,
+ type Key,
+ ListBox,
+ ListBoxItem,
+ type ListBoxItemProps,
+ Popover,
+ type PopoverProps,
+ Select,
+ type SelectProps,
+ SelectValue,
+} from 'react-aria-components';
+
+export type OpenAPISelectItem = {
+ key: Key;
+ label: string;
+};
+
+interface OpenAPISelectProps
extends Omit, 'children'> {
+ items: T[];
+ children: React.ReactNode | ((item: T) => React.ReactNode);
+ selectedKey?: Key;
+ onChange?: (key: string | number) => void;
+ placement?: PopoverProps['placement'];
+}
+
+export function OpenAPISelect(props: OpenAPISelectProps) {
+ const { items, children, className, placement } = props;
+
+ return (
+
+ );
+}
+
+export function OpenAPISelectItem(props: ListBoxItemProps) {
+ return (
+
+ clsx('openapi-select-item', {
+ 'openapi-select-item-focused': isFocused,
+ 'openapi-select-item-selected': isSelected,
+ })
+ }
+ />
+ );
+}
diff --git a/packages/react-openapi/src/OpenAPITabs.tsx b/packages/react-openapi/src/OpenAPITabs.tsx
index 6f8eec0c3..f3502ba1d 100644
--- a/packages/react-openapi/src/OpenAPITabs.tsx
+++ b/packages/react-openapi/src/OpenAPITabs.tsx
@@ -3,7 +3,7 @@
import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { type Key, Tab, TabList, TabPanel, Tabs, type TabsProps } from 'react-aria-components';
import { useEventCallback } from 'usehooks-ts';
-import { getOrCreateTabStoreByKey } from './useSyncedTabsGlobalState';
+import { getOrCreateStoreByKey } from './getOrCreateStoreByKey';
export type TabItem = {
key: Key;
@@ -36,8 +36,8 @@ export function OpenAPITabs(
const { children, items, stateKey } = props;
const [tabKey, setTabKey] = useState(() => {
if (stateKey && typeof window !== 'undefined') {
- const store = getOrCreateTabStoreByKey(stateKey);
- const tabKey = store.getState().tabKey;
+ const store = getOrCreateStoreByKey(stateKey);
+ const tabKey = store.getState().key;
if (tabKey) {
return tabKey;
}
@@ -60,10 +60,10 @@ export function OpenAPITabs(
if (!stateKey) {
return undefined;
}
- const store = getOrCreateTabStoreByKey(stateKey);
+ const store = getOrCreateStoreByKey(stateKey);
return store.subscribe((state) => {
cancelDeferRef.current?.();
- cancelDeferRef.current = defer(() => selectTab(state.tabKey));
+ cancelDeferRef.current = defer(() => selectTab(state.key));
});
}, [stateKey, selectTab]);
useEffect(() => {
@@ -77,8 +77,8 @@ export function OpenAPITabs(
onSelectionChange={(tabKey) => {
selectTab(tabKey);
if (stateKey) {
- const store = getOrCreateTabStoreByKey(stateKey);
- store.setState({ tabKey });
+ const store = getOrCreateStoreByKey(stateKey);
+ store.setState({ key: tabKey });
}
}}
selectedKey={tabKey}
diff --git a/packages/react-openapi/src/getOrCreateStoreByKey.ts b/packages/react-openapi/src/getOrCreateStoreByKey.ts
new file mode 100644
index 000000000..06f4cc44b
--- /dev/null
+++ b/packages/react-openapi/src/getOrCreateStoreByKey.ts
@@ -0,0 +1,35 @@
+'use client';
+
+import { createStore } from 'zustand';
+
+type Key = string | number;
+
+type State = {
+ key: Key | null;
+};
+
+type Actions = { setKey: (key: Key | null) => void };
+
+type Store = State & Actions;
+
+const createStateStore = (initial?: Key) => {
+ return createStore()((set) => ({
+ key: initial ?? null,
+ setKey: (key) => {
+ set(() => ({ key }));
+ },
+ }));
+};
+
+const defaultStores = new Map>();
+
+const createStateStoreFactory = (stores: typeof defaultStores) => {
+ return (storeKey: string, initialKey?: Key) => {
+ if (!stores.has(storeKey)) {
+ stores.set(storeKey, createStateStore(initialKey));
+ }
+ return stores.get(storeKey)!;
+ };
+};
+
+export const getOrCreateStoreByKey = createStateStoreFactory(defaultStores);
diff --git a/packages/react-openapi/src/useSyncedTabsGlobalState.ts b/packages/react-openapi/src/useSyncedTabsGlobalState.ts
deleted file mode 100644
index 42a6c3a09..000000000
--- a/packages/react-openapi/src/useSyncedTabsGlobalState.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client';
-
-import { createStore } from 'zustand';
-
-type Key = string | number;
-
-type TabState = {
- tabKey: Key | null;
-};
-
-type TabActions = { setTabKey: (tab: Key | null) => void };
-
-type TabStore = TabState & TabActions;
-
-const createTabStore = (initialTab?: Key) => {
- return createStore()((set) => ({
- tabKey: initialTab ?? null,
- setTabKey: (tabKey) => {
- set(() => ({ tabKey }));
- },
- }));
-};
-
-const defaultTabStores = new Map>();
-
-const createTabStoreFactory = (stores: typeof defaultTabStores) => {
- return (storeKey: string, initialKey?: Key) => {
- if (!stores.has(storeKey)) {
- stores.set(storeKey, createTabStore(initialKey));
- }
- return stores.get(storeKey)!;
- };
-};
-
-export const getOrCreateTabStoreByKey = createTabStoreFactory(defaultTabStores);