docs: Add examples for Autocomplete and Select with TagGroup (#9068)

* Update Autocomplete examples

* Add Select + TagGroup example

Author: devongovett

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

@@ -14,11 +14,10 @@ export const tags = ['list view'];
 <PageDescription>{docs.exports.GridList.description}</PageDescription>
 
 <ExampleSwitcher>
-  ```tsx render docs={docs.exports.GridList} links={docs.links} props={['layout', 'selectionMode']} initialProps={{'aria-label': 'Favorite pokemon', selectionMode: 'multiple', layout: 'grid'}} type="vanilla" files={["starters/docs/src/GridList.tsx", "starters/docs/src/GridList.css"]}
+  ```tsx render docs={docs.exports.GridList} links={docs.links} props={['layout', 'selectionMode']} initialProps={{'aria-label': 'Photos', selectionMode: 'multiple', layout: 'grid'}} type="vanilla" files={["starters/docs/src/GridList.tsx", "starters/docs/src/GridList.css"]}
   "use client";
   import {Text} from 'react-aria-components';
   import {GridList, GridListItem} from 'vanilla-starter/GridList';
-  import {Button} from 'vanilla-starter/Button';
 
   <GridList/* PROPS */>
     <GridListItem textValue="Desert Sunset">

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

@@ -0,0 +1,19 @@
+.multi-select {
+  .react-aria-Group {
+    display: flex;
+    gap: var(--spacing-2);
+    align-items: center;
+    width: 250px;
+    padding: var(--spacing-2);
+    padding-inline-start: 8px;
+    box-sizing: border-box;
+    border: 0.5px solid var(--border-color);
+    border-radius: var(--radius);
+    background: var(--gray-50);
+  }
+
+  .react-aria-Button.react-aria-Button {
+    width: var(--spacing-6);
+    height: var(--spacing-6);
+  }
+}

packages/dev/s2-docs/pages/react-aria/MultiSelect.css

@@ -114,7 +114,7 @@ function Example() {
 
   return (
     <Select>
-      <Label>Add tag...</Label>
+      <Label>Category</Label>
       <Button>
         <SelectValue />
         <ChevronDown size={18} />
@@ -142,6 +142,124 @@ function Example() {
 }
 ```
 
+### TagGroup
+
+Use the `SelectValue` render prop function to display the selected items as a [TagGroup](TagGroup.html).
+
+```tsx render files={['packages/dev/s2-docs/pages/react-aria/MultiSelect.css']}
+"use client";
+import {Autocomplete, Select, SelectValue, Group, useFilter} from 'react-aria-components';
+import {Button} from 'vanilla-starter/Button';
+import {ListBox, DropdownItem} from 'vanilla-starter/ListBox';
+import {Label} from 'vanilla-starter/Form';
+import {Popover} from 'vanilla-starter/Popover';
+import {Plus} from 'lucide-react';
+import {SearchField} from 'vanilla-starter/SearchField';
+import {Tag, TagGroup} from 'vanilla-starter/TagGroup';
+import {useRef} from 'react';
+import './MultiSelect.css';
+
+/*- begin collapse -*/
+const states = [
+  {id: 'AL', name: 'Alabama'},
+  {id: 'AK', name: 'Alaska'},
+  {id: 'AZ', name: 'Arizona'},
+  {id: 'AR', name: 'Arkansas'},
+  {id: 'CA', name: 'California'},
+  {id: 'CO', name: 'Colorado'},
+  {id: 'CT', name: 'Connecticut'},
+  {id: 'DE', name: 'Delaware'},
+  {id: 'DC', name: 'District of Columbia'},
+  {id: 'FL', name: 'Florida'},
+  {id: 'GA', name: 'Georgia'},
+  {id: 'HI', name: 'Hawaii'},
+  {id: 'ID', name: 'Idaho'},
+  {id: 'IL', name: 'Illinois'},
+  {id: 'IN', name: 'Indiana'},
+  {id: 'IA', name: 'Iowa'},
+  {id: 'KS', name: 'Kansas'},
+  {id: 'KY', name: 'Kentucky'},
+  {id: 'LA', name: 'Louisiana'},
+  {id: 'ME', name: 'Maine'},
+  {id: 'MD', name: 'Maryland'},
+  {id: 'MA', name: 'Massachusetts'},
+  {id: 'MI', name: 'Michigan'},
+  {id: 'MN', name: 'Minnesota'},
+  {id: 'MS', name: 'Mississippi'},
+  {id: 'MO', name: 'Missouri'},
+  {id: 'MT', name: 'Montana'},
+  {id: 'NE', name: 'Nebraska'},
+  {id: 'NV', name: 'Nevada'},
+  {id: 'NH', name: 'New Hampshire'},
+  {id: 'NJ', name: 'New Jersey'},
+  {id: 'NM', name: 'New Mexico'},
+  {id: 'NY', name: 'New York'},
+  {id: 'NC', name: 'North Carolina'},
+  {id: 'ND', name: 'North Dakota'},
+  {id: 'OH', name: 'Ohio'},
+  {id: 'OK', name: 'Oklahoma'},
+  {id: 'OR', name: 'Oregon'},
+  {id: 'PA', name: 'Pennsylvania'},
+  {id: 'RI', name: 'Rhode Island'},
+  {id: 'SC', name: 'South Carolina'},
+  {id: 'SD', name: 'South Dakota'},
+  {id: 'TN', name: 'Tennessee'},
+  {id: 'TX', name: 'Texas'},
+  {id: 'UT', name: 'Utah'},
+  {id: 'VT', name: 'Vermont'},
+  {id: 'VA', name: 'Virginia'},
+  {id: 'WA', name: 'Washington'},
+  {id: 'WV', name: 'West Virginia'},
+  {id: 'WI', name: 'Wisconsin'},
+  {id: 'WY', name: 'Wyoming'}
+];
+/*- end collapse -*/
+
+function SelectWithTagGroup() {
+  let triggerRef = useRef<HTMLDivElement | null>(null);
+  let {contains} = useFilter({sensitivity: 'base'});
+
+  return (
+    <Select selectionMode="multiple" className="multi-select">
+      <Label>States</Label>
+      <Group aria-label="States" ref={triggerRef}>
+        {/*- begin highlight -*/}
+        <SelectValue<typeof states[0]> style={{flex: 1}}>
+          {({selectedItems, state}) => (
+            <TagGroup
+              aria-label="Selected states"
+              items={selectedItems.filter(item => item != null)}
+              renderEmptyState={() => 'No selected items'}
+              onRemove={(keys) => {
+                // Remove keys from Select state.
+                if (Array.isArray(state.value)) {
+                  state.setValue(state.value.filter(k => !keys.has(k)));
+                }
+              }}>
+              {item => <Tag>{item.name}</Tag>}
+            </TagGroup>
+          )}
+        </SelectValue>
+        {/*- end highlight -*/}
+        <Button variant="primary"><Plus /></Button>
+      </Group>
+      <Popover 
+        // Position popover relative to the wrapping div instead of the Button
+        triggerRef={triggerRef}
+        hideArrow
+        style={{display: 'flex', flexDirection: 'column', width: 250, padding: 4}}>
+        <Autocomplete filter={contains}>
+          <SearchField aria-label="Search states" placeholder="Search states" autoFocus style={{marginBottom: 4}} />
+          <ListBox items={states}>
+            {state => <DropdownItem>{state.name}</DropdownItem>}
+          </ListBox>
+        </Autocomplete>
+      </Popover>
+    </Select>
+  );
+}
+```
+
 ## Value
 
 Use the `defaultValue` or `value` prop to set the selected item. The value corresponds to the `id` prop of an item. When `selectionMode="multiple"`, `value` and `onChange` accept an array. Items can be disabled with the `isDisabled` prop.

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

@@ -14,7 +14,7 @@ const example = style({
   borderRadius: 'xl',
   marginY: {
     default: 32,
-    ':is([data-example-switcher] > *)': 0
+    ':is([data-example-switcher] *)': 0
   },
   padding: {
     default: 12,

packages/dev/s2-docs/src/CodeBlock.tsx

@@ -36,7 +36,11 @@ const switcher = style({
   justifySelf: {
     default: 'center',
     lg: 'start'
-  }
+  },
+  overflow: 'auto',
+  maxWidth: 'full',
+  padding: 4,
+  margin: -4
 });
 
 const themePicker = style({
@@ -118,9 +122,11 @@ export function ExampleSwitcher({type = 'style', examples = DEFAULT_EXAMPLES, ch
 
   return (
     <div className={exampleStyle} data-example-switcher>
-      <SegmentedControl selectedKey={selected} onSelectionChange={onSelectionChange} styles={switcher}>
-        {examples.map(example => <SegmentedControlItem key={example} id={example}>{example}</SegmentedControlItem>)}
-      </SegmentedControl>
+      <div className={switcher}>
+        <SegmentedControl selectedKey={selected} onSelectionChange={onSelectionChange}>
+          {examples.map(example => <SegmentedControlItem key={example} id={example}>{example}</SegmentedControlItem>)}
+        </SegmentedControl>
+      </div>
       {selected === 'Vanilla CSS' &&
         <Picker
           label="Theme"

packages/dev/s2-docs/src/ExampleSwitcher.tsx

@@ -14,7 +14,7 @@ const exampleStyle = style({
   },
   marginTop: {
     default: 20,
-    ':is([data-example-switcher] > *)': 0
+    ':is([data-example-switcher] *)': 0
   },
   borderRadius: 'xl',
   display: 'grid',

packages/dev/s2-docs/src/VisualExample.tsx

@@ -38,4 +38,13 @@
       --highlight-background: var(--gray-1600);
     }
   }
+
+  kbd {
+    font: var(--font-size-sm) system-ui;
+    background: var(--highlight-hover);
+    border: 0.5px solid var(--tint-500);
+    padding: 0 var(--spacing-1);
+    border-radius: var(--radius-sm);
+    margin-inline-start: var(--spacing-3);
+  }
 }