docs: Fix sandboxes, localStorage, and search cards

.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 -///

packages/dev/s2-docs/pages/react-aria/examples/crud.mdx

@@ -3,7 +3,7 @@ export default Layout;
 
 import '../../../tailwind/tailwind.css';
 
-import {App} from './plants/App';
+import App from './plants/App';
 import {ExampleApp} from '../../../src/ExampleApp';
 import {ComponentList} from '../../../src/ComponentCard';
 
@@ -18,7 +18,7 @@ export const description = 'Table with search, filters, column resizing, and for
 
 <App />
 
-<ExampleApp dir="packages/dev/s2-docs/pages/react-aria/examples/plants" defaultSelected="App.tsx" />
+<ExampleApp dir="packages/dev/s2-docs/pages/react-aria/examples/plants" defaultSelected="App.tsx" type="tailwind" />
 
 ## Components
 

packages/dev/s2-docs/pages/react-aria/examples/emoji-picker.mdx

@@ -12,11 +12,57 @@ export const description = 'With autocomplete, virtualized scrolling, and keyboa
 
 <PageDescription>An emoji picker with autocomplete, virtualized scrolling, and arrow key navigation.</PageDescription>
 
-```tsx render files={['packages/dev/s2-docs/pages/react-aria/examples/EmojiPicker/EmojiPicker.tsx', 'packages/dev/s2-docs/pages/react-aria/examples/EmojiPicker/EmojiPicker.css']} type="vanilla" hideExampleCode expanded includeAllImports
+```tsx render dir="react-aria/examples" files={['packages/dev/s2-docs/pages/react-aria/examples/EmojiPicker.css']} type="vanilla" expanded includeAllImports
 "use client";
-import {EmojiPicker} from './EmojiPicker/EmojiPicker';
+import {Autocomplete, GridLayout, ListBox, ListBoxItem, Select, SelectValue, Size, useFilter, Virtualizer} from 'react-aria-components';
+import {Button} from 'vanilla-starter/Button';
+import {Popover} from 'vanilla-starter/Popover';
+import {SearchField} from 'vanilla-starter/SearchField';
+import _emojis from 'emojibase-data/en/compact.json';
+import './EmojiPicker.css';
 
-<EmojiPicker />
+const emojis = _emojis.filter((e) => !e.label.startsWith('regional indicator'));
+
+export default function EmojiPicker() {
+  let {contains} = useFilter({ sensitivity: 'base' });
+
+  return (
+    <Select aria-label="Emoji" className="emoji-picker" defaultValue="🥳">
+      <Button variant="secondary">
+        <SelectValue />
+      </Button>
+      <Popover placement="bottom" className="emoji-picker-popover">
+        <Autocomplete filter={contains}>
+          <SearchField aria-label="Search" placeholder="Search emoji" autoFocus />
+          <Virtualizer
+            layout={GridLayout}
+            layoutOptions={{
+              minItemSize: new Size(32, 32),
+              maxItemSize: new Size(32, 32),
+              minSpace: new Size(4, 4),
+              preserveAspectRatio: true,
+            }}>
+            <ListBox className="emoji-list" items={emojis} aria-label="Emoji list" layout="grid">
+              {(item) => <EmojiItem id={item.unicode} item={item} />}
+            </ListBox>
+          </Virtualizer>
+        </Autocomplete>
+      </Popover>
+    </Select>
+  );
+}
+
+function EmojiItem({ id, item }: { id: string; item: (typeof emojis)[0] }) {
+  return (
+    <ListBoxItem
+      id={id}
+      value={item}
+      textValue={item.label + (item.tags || []).join(' ')}
+      className="emoji-item">
+      {item.unicode}
+    </ListBoxItem>
+  );
+}
 ```
 
 ## Components

packages/dev/s2-docs/pages/react-aria/examples/photos.mdx

@@ -1,7 +1,7 @@
 import {Layout} from '../../../src/Layout';
 export default Layout;
 
-import {App} from './photos/App';
+import App from './photos/App';
 import {ExampleApp} from '../../../src/ExampleApp';
 import {ComponentList} from '../../../src/ComponentCard';
 

packages/dev/s2-docs/pages/react-aria/examples/photos/App.css

@@ -7,6 +7,7 @@
   padding: 0;
   color-scheme: light dark;
   font: 1rem system-ui;
+  color: light-dark(black, white);
   background: light-dark(white, #111);
   border: 1px solid light-dark(#eee, #222);
   border-radius: 10px;

packages/dev/s2-docs/pages/react-aria/examples/photos/App.tsx

@@ -8,7 +8,7 @@ import {PhotoDetail} from './PhotoDetail';
 
 type Photo = typeof photos[0];
 
-export function App() {
+export default function App() {
   let [album, setAlbum] = useState('library');
   let [library, setLibrary] = useState(photos);
   let [isMobile, setMobile] = useState(false);

packages/dev/s2-docs/pages/react-aria/examples/plants/App.tsx

@@ -7,7 +7,7 @@ import {DialogTrigger, Heading, Key, Selection, SortDescriptor, TooltipTrigger}
 import {Dialog} from 'tailwind-starter/Dialog';
 import {Menu, MenuItem, MenuTrigger} from 'tailwind-starter/Menu';
 import {Modal} from 'tailwind-starter/Modal';
-import plants, {Plant} from '@react-spectrum/docs/pages/react-aria/home/plants';
+import plants, {Plant} from './plants';
 import {Popover} from 'tailwind-starter/Popover';
 import React, {useState} from 'react';
 import {SearchField} from 'tailwind-starter/SearchField';
@@ -19,7 +19,7 @@ import {PlantTable} from './PlantTable';
 import {PlantDialog} from './PlantDialog';
 import {PlantList} from './PlantList';
 
-export function App(): React.ReactNode {
+export default function App(): React.ReactNode {
   let [allItems, setAllItems] = useState<Plant[]>(() => plants.map(p => ({...p, isFavorite: false})));
   let [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
     column: 'common_name',

packages/dev/s2-docs/pages/react-aria/examples/plants/Labels.tsx

@@ -1,6 +1,6 @@
-import { Plant } from "@react-spectrum/docs/pages/react-aria/home/plants";
-import { CloudSun, Dessert, Droplet, Droplets, RefreshCw, Sun, SunDim } from "lucide-react";
-import { ReactElement } from "react";
+import { Plant } from './plants';
+import { CloudSun, Dessert, Droplet, Droplets, RefreshCw, Sun, SunDim } from 'lucide-react';
+import { ReactElement } from 'react';
 
 const labelStyles = {
   gray: 'bg-gray-100 text-gray-600 border-gray-200 dark:bg-zinc-700 dark:text-zinc-300 dark:border-zinc-600',

packages/dev/s2-docs/pages/react-aria/examples/plants/PlantActionMenu.tsx

@@ -1,7 +1,7 @@
 import {Button} from 'tailwind-starter/Button';
 import {Mail, MoreHorizontal, PencilIcon, ShareIcon, StarIcon, TrashIcon, Twitter} from 'lucide-react';
 import {Menu, MenuItem, MenuTrigger, SubmenuTrigger} from 'tailwind-starter/Menu';
-import { Plant } from '@react-spectrum/docs/pages/react-aria/home/plants';
+import {Plant} from './plants';
 
 interface PlantActionMenuProps {
   item: Plant,

packages/dev/s2-docs/pages/react-aria/examples/plants/PlantDialog.tsx

@@ -6,7 +6,7 @@ import {Dialog} from 'tailwind-starter/Dialog';
 import {DropZone} from 'tailwind-starter/DropZone';
 import {Form} from 'tailwind-starter/Form';
 import {getLocalTimeZone, today} from '@internationalized/date';
-import plants, {Plant} from '@react-spectrum/docs/pages/react-aria/home/plants';
+import plants, {Plant} from './plants';
 import {Select, SelectItem} from 'tailwind-starter/Select';
 import {TextField} from 'tailwind-starter/TextField';
 import {cycleIcon, getSunlight, sunIcons, wateringIcons} from './Labels';

packages/dev/s2-docs/pages/react-aria/examples/plants/PlantList.tsx

@@ -1,6 +1,6 @@
 "use client";
 import {GridList, GridListItem} from 'tailwind-starter/GridList';
-import {Plant} from '@react-spectrum/docs/pages/react-aria/home/plants';
+import {Plant} from './plants';
 import {PlantActionMenu} from './PlantActionMenu';
 
 interface PlantListProps {

packages/dev/s2-docs/pages/react-aria/examples/plants/PlantTable.tsx

@@ -2,7 +2,7 @@ import {Cell, Column, Row, Table, TableHeader, TableBody} from 'tailwind-starter
 import {StarIcon} from 'lucide-react';
 import {ColumnProps, Key, SortDescriptor, ToggleButton, ToggleButtonProps, VisuallyHidden} from 'react-aria-components';
 import {focusRing} from 'tailwind-starter/utils';
-import {Plant} from '@react-spectrum/docs/pages/react-aria/home/plants';
+import {Plant} from './plants';
 import React, {useMemo} from 'react';
 import {tv} from 'tailwind-variants';
 import {CycleLabel, getSunlight, SunLabel, WateringLabel} from './Labels';