docs: Fix sandboxes, localStorage, and search cards (#9135)

* Fix ZIP/CodeSandbox/Stackblitz for all examples

* docs: Fix ZIP download, CodeSandbox, and StackBlitz

* Refactor local storage

* Use ListBox for ComponentCardView

* Update node to latest 22.x

* Fix getting text from wrong element

* namespace local storage keys

* Fix focus ring

Author: devongovett

.circleci/config.yml

@@ -16,30 +16,30 @@ parameters:
 executors:
   rsp:
     docker:
-      - image: cimg/node:22.13.1
+      - image: cimg/node:22.21.1
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-large:
     docker:
-      - image: cimg/node:22.13.1
+      - image: cimg/node:22.21.1
     resource_class: large
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-xlarge:
     docker:
-      - image: cimg/node:22.13.1
+      - image: cimg/node:22.21.1
     resource_class: xlarge
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-2xlarge:
     docker:
-      - image: cimg/node:22.13.1
+      - image: cimg/node:22.21.1
     resource_class: 2xlarge
     environment:
       CACHE_VERSION: v1

packages/@react-spectrum/s2/src/Tabs.tsx

@@ -448,7 +448,11 @@ const tabPanel = style({
   marginTop: 4,
   color: 'gray-800',
   flexGrow: 1,
-  minHeight: 0
+  minHeight: 0,
+  display: {
+    default: 'block',
+    isInert: 'none'
+  }
 }, getAllowedOverrides({height: true}));
 
 export function TabPanel(props: TabPanelProps): ReactNode | null {

packages/dev/s2-docs/pages/react-aria/Calendar.mdx

@@ -85,13 +85,15 @@ import type {AnyCalendarDate} from '@internationalized/date';
 import {CalendarDate, startOfWeek, toCalendar, GregorianCalendar} from '@internationalized/date';
 import {Calendar} from 'vanilla-starter/Calendar';
 
-export default (
-  <Calendar
-    firstDayOfWeek="sun"
-    ///- begin highlight -///
-    createCalendar={() => new Custom454()} />
-    ///- end highlight -///
-);
+export default function Example() {
+  return (
+    <Calendar
+      firstDayOfWeek="sun"
+      ///- begin highlight -///
+      createCalendar={() => new Custom454()} />
+      ///- end highlight -///
+  );
+}
 
 // See @internationalized/date docs linked above.
 ///- begin collapse -///

packages/dev/s2-docs/pages/react-aria/DropZone.mdx

@@ -86,6 +86,7 @@ export const tags = ['file', 'drag', 'dnd', 'upload'];
         </Text>
       </DropZone>
     );
+  }
   ```
 </ExampleSwitcher>
 

packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx

@@ -95,13 +95,15 @@ import type {AnyCalendarDate} from '@internationalized/date';
 import {CalendarDate, startOfWeek, toCalendar, GregorianCalendar} from '@internationalized/date';
 import {RangeCalendar} from 'vanilla-starter/RangeCalendar';
 
-export default (
-  <RangeCalendar
-    firstDayOfWeek="sun"
-    ///- begin highlight -///
-    createCalendar={() => new Custom454()} />
-    ///- end highlight -///
-);
+export default function Example() {
+  return (
+    <RangeCalendar
+      firstDayOfWeek="sun"
+      ///- begin highlight -///
+      createCalendar={() => new Custom454()} />
+      ///- end highlight -///
+  );
+}
 
 // See @internationalized/date docs linked above.
 ///- begin collapse -///