@stainless-api/docs 0.1.0-beta.94 → 0.1.0-beta.95

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stainless-api/docs
 
+## 0.1.0-beta.95
+
+### Minor Changes
+
+- 6b86a8b: Support multiple snippet examples
+
+### Patch Changes
+
+- Updated dependencies [6b86a8b]
+  - @stainless-api/docs-ui@0.1.0-beta.72
+  - @stainless-api/docs-search@0.1.0-beta.25
+
 ## 0.1.0-beta.94
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/docs",
-  "version": "0.1.0-beta.94",
+  "version": "0.1.0-beta.95",
   "publishConfig": {
     "access": "public"
   },
@@ -56,8 +56,8 @@
     "vite-plugin-prebundle-workers": "^0.2.0",
     "web-worker": "^1.5.0",
     "yaml": "^2.8.2",
-    "@stainless-api/docs-search": "0.1.0-beta.24",
-    "@stainless-api/docs-ui": "0.1.0-beta.71",
+    "@stainless-api/docs-search": "0.1.0-beta.25",
+    "@stainless-api/docs-ui": "0.1.0-beta.72",
     "@stainless-api/ui-primitives": "0.1.0-beta.47"
   },
   "devDependencies": {
@@ -73,7 +73,7 @@
     "vite": "^6.4.1",
     "zod": "^4.3.5",
     "@stainless/eslint-config": "0.1.0-beta.1",
-    "@stainless/sdk-json": "^0.1.0-beta.4"
+    "@stainless/sdk-json": "^0.1.0-beta.5"
   },
   "scripts": {
     "vendor-deps": "tsx scripts/vendor_deps.ts",

package/plugin/globalJs/code-snippets.ts

@@ -19,9 +19,10 @@ document.addEventListener(getPageLoadEvent(), () => {
       document
         .querySelectorAll(`[data-snippet-response-pane-id="${panelId}"]`)
         .forEach((p) => p.classList.add('stldocs-snippet-response-pane-active'));
-      document
-        .querySelectorAll(`[data-snippet-response-tab-id="${panelId}"]`)
-        .forEach((p) => p.classList.add('stldocs-snippet-response-tab-item-active'));
+      document.querySelectorAll(`[data-snippet-response-tab-id="${panelId}"]`).forEach((p) => {
+        p.classList.add('stldocs-snippet-response-tab-item-active');
+        p.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+      });
     });
   });
 
@@ -91,4 +92,25 @@ document.addEventListener(getPageLoadEvent(), () => {
       btn.textContent = 'Show more';
     }
   });
+
+  document.querySelectorAll('[data-stldocs-multi-snippet-container]').forEach((container) => {
+    const radios = container.querySelectorAll<HTMLInputElement>('input[type="radio"]');
+    const panes = container.querySelectorAll<HTMLDivElement>('[data-stldocs-multi-snippet-id]');
+
+    radios.forEach((radio) => {
+      radio.addEventListener('change', (e) => {
+        if (!(e.target instanceof HTMLInputElement)) return;
+        if (e.target.checked) {
+          const selectedIndex = e.target.value;
+          panes.forEach((pane) => {
+            pane.classList.toggle(
+              'stldocs-snippet-multi-pane-active',
+              pane.dataset.stldocsMultiSnippetId === selectedIndex,
+            );
+          });
+          e.target.parentElement?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+        }
+      });
+    });
+  });
 });

package/plugin/globalJs/copy.ts

@@ -92,7 +92,8 @@ function loadPlayground(playButton: HTMLElement) {
       doc: (language === 'python' ? 'from rich import print\n' : '') + code.trimEnd(),
       container,
       onLanguageSelect: (value) => {
-        const originalLanguage = document.getElementById('stldocs-snippet-select')?.dataset.currentValue;
+        const originalLanguage = container.querySelector<HTMLElement>('[data-stldocs-snippet-select]')
+          ?.dataset.currentValue;
         const path: string = updateSelectedLanguage(RESOLVED_API_REFERENCE_PATH, originalLanguage, value);
         navigate(path.replace(/(\?.+)?($|#)/, (_, str, end) => (str ? str + '&play' : '?play') + end));
       },

package/plugin/globalJs/navigation.ts

@@ -22,15 +22,14 @@ window.addEventListener('popstate', (ev: PopStateEvent) => {
 });
 
 document.addEventListener(getPageLoadEvent(), () => {
-  const rootElement = document.getElementById('stldocs-snippet-select');
-  if (!rootElement) return;
-
-  initDropdown({
-    root: rootElement,
-    onSelect: (value) => {
-      const originalLanguage = rootElement?.dataset.currentValue;
-      navigate(updateSelectedLanguage(RESOLVED_API_REFERENCE_PATH, originalLanguage, value));
-    },
+  document.querySelectorAll<HTMLElement>('[data-stldocs-snippet-select]').forEach((rootElement) => {
+    initDropdown({
+      root: rootElement,
+      onSelect: (value) => {
+        const originalLanguage = rootElement.dataset.currentValue;
+        navigate(updateSelectedLanguage(RESOLVED_API_REFERENCE_PATH, originalLanguage, value));
+      },
+    });
   });
 
   const path = getStainlessPathForLocation();

package/plugin/react/Routing.tsx

@@ -192,16 +192,15 @@ async function highlight(content: string, language?: string) {
 export function SDKSelectReactComponent({
   selected,
   languages,
-  id,
   className,
+  ...rest
 }: {
   selected: DocsLanguage;
   languages: DocsLanguage[];
-  id: string;
   className?: string;
-}) {
+} & Omit<React.ComponentProps<'div'>, 'children'>) {
   return (
-    <Dropdown id={id} data-current-value={selected} className={className}>
+    <Dropdown data-current-value={selected} className={className} {...rest}>
       <Dropdown.Trigger>
         <Dropdown.TriggerSelectedItem>
           <Dropdown.Icon>
@@ -244,7 +243,7 @@ function SDKRequestTitle({ snippetLanguage }: SDKRequestTitleProps) {
     <SDKSelectReactComponent
       selected={selected || 'http'}
       languages={languages}
-      id="stldocs-snippet-select"
+      data-stldocs-snippet-select
       className="stl-sdk-select stl-ui-not-prose"
     />
   );