Add example with TagGroup

Author: devongovett

packages/react-aria-components/src/Select.tsx

@@ -13,7 +13,7 @@
 import {AriaSelectProps, HiddenSelect, useFocusRing, useListFormatter, useLocalizedStringFormatter, useSelect} from 'react-aria';
 import {ButtonContext} from './Button';
 import {Collection, Node, SelectState, useSelectState} from 'react-stately';
-import {CollectionBuilder} from '@react-aria/collections';
+import {CollectionBuilder, createHideableComponent} from '@react-aria/collections';
 import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps, mergeProps, useResizeObserver} from '@react-aria/utils';
@@ -238,7 +238,9 @@ export interface SelectValueRenderProps<T> {
   /** The object values of the currently selected items. */
   selectedItems: (T | null)[],
   /** The textValue of the currently selected items. */
-  selectedText: string
+  selectedText: string,
+  /** The state of the select. */
+  state: SelectState<T, 'single' | 'multiple'>
 }
 
 export interface SelectValueProps<T extends object> extends Omit<HTMLAttributes<HTMLElement>, keyof RenderProps<unknown>>, RenderProps<SelectValueRenderProps<T>> {}
@@ -249,9 +251,9 @@ export const SelectValueContext = createContext<ContextValue<SelectValueProps<an
  * SelectValue renders the current value of a Select, or a placeholder if no value is selected.
  * It is usually placed within the button element.
  */
-export const SelectValue = /*#__PURE__*/ (forwardRef as forwardRefType)(function SelectValue<T extends object>(props: SelectValueProps<T>, ref: ForwardedRef<HTMLSpanElement>) {
+export const SelectValue = /*#__PURE__*/ createHideableComponent(function SelectValue<T extends object>(props: SelectValueProps<T>, ref: ForwardedRef<HTMLSpanElement>) {
   [props, ref] = useContextProps(props, ref, SelectValueContext);
-  let state = useContext(SelectStateContext)!;
+  let state = useContext(SelectStateContext)! as SelectState<T, 'single' | 'multiple'>;
   let {placeholder} = useSlottedContext(SelectContext)!;
   let rendered = state.selectedItems.map((item) => {
     let rendered = item.props?.children;
@@ -312,7 +314,8 @@ export const SelectValue = /*#__PURE__*/ (forwardRef as forwardRefType)(function
       selectedItem: state.selectedItems[0]?.value as T ?? null,
       selectedItems: useMemo(() => state.selectedItems.map(item => item.value as T ?? null), [state.selectedItems]),
       selectedText,
-      isPlaceholder: state.selectedItems.length === 0
+      isPlaceholder: state.selectedItems.length === 0,
+      state
     }
   });
 

packages/react-aria-components/src/TagGroup.tsx

@@ -61,9 +61,11 @@ export const TagListContext = createContext<ContextValue<TagListProps<any>, HTML
 export const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup(props: TagGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TagGroupContext);
   return (
-    <CollectionBuilder content={props.children}>
-      {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}
-    </CollectionBuilder>
+    <ListStateContext.Provider value={null}>
+      <CollectionBuilder content={props.children}>
+        {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}
+      </CollectionBuilder>
+    </ListStateContext.Provider>
   );
 });
 

packages/react-aria-components/stories/Select.stories.tsx

@@ -16,6 +16,7 @@ import {LoadingSpinner, MyListBoxItem} from './utils';
 import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import React, {JSX} from 'react';
 import styles from '../example/index.css';
+import {Tag, TagGroup} from 'vanilla-starter/TagGroup';
 import {useAsyncList} from 'react-stately';
 import './styles.css';
 
@@ -83,6 +84,35 @@ export const SelectRenderProps: SelectStory = (args) => (
   </Select>
 );
 
+export const SelectWithTagGroup: SelectStory = (args) => (
+  <Select {...args} data-testid="select-example" id="select-example-id">
+    <Label style={{display: 'block'}}>States</Label>
+    <div style={{display: 'flex', gap: 8, alignItems: 'start', maxWidth: 250}}>
+      <SelectValue>
+        {({selectedItems, state}) => (
+          <TagGroup
+            aria-label="Selected states"
+            items={selectedItems as {name: string}[]}
+            renderEmptyState={() => 'No selected items'}
+            onRemove={(keys) => {
+              for (let key of keys) {
+                state.selectionManager.toggleSelection(key);
+              }
+            }}>
+            {item => <Tag>{item.name}</Tag>}
+          </TagGroup>
+        )}
+      </SelectValue>
+      <Button>+</Button>
+    </div>
+    <Popover placement="bottom end">
+      <ListBox className={styles.menu} items={usStateOptions}>
+        {state => <MyListBoxItem>{state.name}</MyListBoxItem>}
+      </ListBox>
+    </Popover>
+  </Select>
+);
+
 let makeItems = (length: number) => Array.from({length}, (_, i) => ({
   id: i,
   name: `Item ${i}`

starters/docs/src/TagGroup.css

@@ -26,6 +26,9 @@
   display: flex;
   align-items: center;
   transition: border-color 200ms;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   &[data-hovered] {
     border-color: var(--border-color-hover);

starters/docs/src/TagGroup.tsx

@@ -36,7 +36,7 @@ export function TagGroup<T extends object>(
   return (
     (
       <AriaTagGroup {...props}>
-        <Label>{label}</Label>
+        {label && <Label>{label}</Label>}
         <TagList items={items} renderEmptyState={renderEmptyState}>
           {children}
         </TagList>