feat: Update Expandable to use native <details> element (#13168)

* feat: Update `Expandable` to use native `<details>` element

This has some important benefits:

1. It should be covered by search etc. as this is statically rendered now and just "hidden" via CSS.
2. The browser automatically searches in it when using CMD+F - it will auto-open respective details that contain the searched content.

* fix link

* remove dead code, oops

* oops fix it

Author: mydea

docs/contributing/pages/components.mdx

@@ -130,6 +130,12 @@ Render an expandable section to provide additional information to users on deman
   provide optional information that can help users be more successful.
 </Expandable>
 
+<Expandable title="Expandable with a code block">
+  ```js
+  const foo = 'bar';
+  ```
+</Expandable>
+
 ```markdown {tabTitle:Example}
 <Expandable title="Here's something worth noting">
   This is an expandable section in an `'info'` alert style.

docs/platforms/javascript/common/troubleshooting/index.mdx

@@ -105,7 +105,7 @@ To fix this, change the `tracePropagationTargets` option during SDK initializati
 </PlatformCategorySection>
 
 <PlatformCategorySection notSupported={['browser']}>
-<PlatformSection notSupported={['javascript.aws-lambda', 'javascript.azure-functions', 'javascript.bun', 'javascript.cloudflare', 'javascript.deno', 'javascript.electron', 'javascript.gcp-functions']}>
+<PlatformSection notSupported={['javascript.aws-lambda', 'javascript.azure-functions', 'javascript.bun', 'javascript.cloudflare', 'javascript.deno', 'javascript.electron', 'javascript.gcp-functions', 'javascript.tanstackstart-react']}>
 <Expandable permalink title="Error: 'import-in-the-middle' failed to wrap">
  When using ESM, by default all packages are wrapped under the hood by
  [import-in-the-middle](https://www.npmjs.com/package/import-in-the-middle).

src/components/codeBlock/code-blocks.module.scss

@@ -19,7 +19,7 @@
     font-size: 0.85rem;
     border: 0;
     border-radius: 4px;
-    margin: 0 0 1rem;
+    margin: 0;
   }
 
   /**

src/components/codeTabs.tsx

@@ -134,8 +134,6 @@ export function CodeTabs({children}: CodeTabProps) {
 }
 
 const Container = styled('div')`
-  margin-bottom: 1.5rem;
-
   pre[class*='language-'] {
     padding: 10px 12px;
     border-radius: 0 0 3px 3px;

src/components/docPage/type.scss

@@ -136,6 +136,10 @@
     font-weight: 500;
   }
 
+  .code-tabs-wrapper:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
+
   .anchorlink,
   .anchorlink.before {
     display: flex;

src/components/expandable.tsx renamed to src/components/expandable/index.tsx

@@ -3,11 +3,16 @@
 import {ReactNode, useEffect, useState} from 'react';
 import {ChevronDownIcon, ChevronRightIcon} from '@radix-ui/react-icons';
 
-import {Callout} from './callout';
+// explicitly not usig CSS modules here
+// because there's some prerendered content that depends on these exact class names
+import '../callout/styles.scss';
+import styles from './style.module.scss';
 
 type Props = {
   children: ReactNode;
   title: string;
+  /** If defined, the expandable will be grouped with other expandables that have the same group. */
+  group?: string;
   level?: 'info' | 'warning' | 'success';
   permalink?: boolean;
 };
@@ -19,7 +24,7 @@ function slugify(str: string) {
     .replace(/[^a-z0-9-]/g, '');
 }
 
-export function Expandable({title, level, children, permalink}: Props) {
+export function Expandable({title, level = 'info', children, permalink, group}: Props) {
   const id = permalink ? slugify(title) : undefined;
 
   const [isExpanded, setIsExpanded] = useState(false);
@@ -50,8 +55,8 @@ export function Expandable({title, level, children, permalink}: Props) {
     };
   }, [id]);
 
-  function toggleIsExpanded() {
-    const newVal = !isExpanded;
+  function toggleIsExpanded(event: React.MouseEvent<HTMLDetailsElement>) {
+    const newVal = event.currentTarget.open;
 
     if (id) {
       if (newVal) {
@@ -65,14 +70,26 @@ export function Expandable({title, level, children, permalink}: Props) {
   }
 
   return (
-    <Callout
-      level={level}
-      title={title}
-      Icon={isExpanded ? ChevronDownIcon : ChevronRightIcon}
+    <details
+      name={group}
+      className={`${styles.expandable} callout !block ${'callout-' + level}`}
+      open={isExpanded}
+      // We only need this to keep the URL hash in sync
+      onToggle={id ? toggleIsExpanded : undefined}
       id={id}
-      titleOnClick={toggleIsExpanded}
     >
-      {isExpanded ? children : undefined}
-    </Callout>
+      <summary className={`${styles['expandable-header']} callout-header`}>
+        <ChevronDownIcon
+          className={`${styles['expandable-icon-expanded']} callout-icon`}
+        />
+        <ChevronRightIcon
+          className={`${styles['expandable-icon-collapsed']} callout-icon`}
+        />
+        <div>{title}</div>
+      </summary>
+      <div className={`${styles['expandable-body']} callout-body content-flush-bottom`}>
+        {children}
+      </div>
+    </details>
   );
 }

src/components/expandable/style.module.scss

@@ -0,0 +1,32 @@
+.expandable-header {
+  display: flex;
+  cursor: pointer;
+  gap: 0.7rem;
+  margin-bottom: 0.3rem;
+}
+
+.expandable-body {
+  margin-left: 1.6rem;
+
+  & ul, & ol {
+    padding-left: 1.2rem;
+  }
+}
+
+.expandable {
+  &:open {
+    padding-bottom: 1rem;
+  }
+
+  &:not(:open) .expandable-header {
+    margin-bottom: 0;
+  }
+
+  &:open .expandable-icon-collapsed {
+    display: none;
+  }
+
+  &:not(:open) .expandable-icon-expanded {
+    display: none;
+  }
+}