react-aria-components 1.12.2 → 1.13.0

package/src/Select.tsx

@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaSelectProps, HiddenSelect, useFocusRing, useLocalizedStringFormatter, useSelect} from 'react-aria';
+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';
@@ -26,9 +26,11 @@ import {LabelContext} from './Label';
 import {ListBoxContext, ListStateContext} from './ListBox';
 import {OverlayTriggerStateContext} from './Dialog';
 import {PopoverContext} from './Popover';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, Fragment, HTMLAttributes, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
 import {TextContext} from './Text';
 
+type SelectionMode = 'single' | 'multiple';
+
 export interface SelectRenderProps {
   /**
    * Whether the select is focused, either via a mouse or keyboard.
@@ -62,7 +64,7 @@ export interface SelectRenderProps {
   isRequired: boolean
 }
 
-export interface SelectProps<T extends object = {}> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior' | 'items'>, RACValidation, RenderProps<SelectRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+export interface SelectProps<T extends object = {}, M extends SelectionMode = 'single'> extends Omit<AriaSelectProps<T, M>, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior' | 'items'>, RACValidation, RenderProps<SelectRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * Temporary text that occupies the select when it is empty.
    * @default 'Select an item' (localized)
@@ -70,13 +72,13 @@ export interface SelectProps<T extends object = {}> extends Omit<AriaSelectProps
   placeholder?: string
 }
 
-export const SelectContext = createContext<ContextValue<SelectProps<any>, HTMLDivElement>>(null);
-export const SelectStateContext = createContext<SelectState<unknown> | null>(null);
+export const SelectContext = createContext<ContextValue<SelectProps<any, SelectionMode>, HTMLDivElement>>(null);
+export const SelectStateContext = createContext<SelectState<unknown, SelectionMode> | null>(null);
 
 /**
  * A select displays a collapsible list of options and allows a user to select one of them.
  */
-export const Select = /*#__PURE__*/ (forwardRef as forwardRefType)(function Select<T extends object = {}>(props: SelectProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const Select = /*#__PURE__*/ (forwardRef as forwardRefType)(function Select<T extends object = {}, M extends SelectionMode = 'single'>(props: SelectProps<T, M>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SelectContext);
   let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;
   let content = useMemo(() => (
@@ -104,7 +106,7 @@ export const Select = /*#__PURE__*/ (forwardRef as forwardRefType)(function Sele
 const CLEAR_CONTEXTS = [LabelContext, ButtonContext, TextContext];
 
 interface SelectInnerProps<T extends object> {
-  props: SelectProps<T>,
+  props: SelectProps<T, SelectionMode>,
   selectRef: ForwardedRef<HTMLDivElement>,
   collection: Collection<Node<T>>
 }
@@ -228,10 +230,17 @@ export interface SelectValueRenderProps<T> {
    * @selector [data-placeholder]
    */
   isPlaceholder: boolean,
-  /** The object value of the currently selected item. */
+  /**
+   * The object value of the first selected item.
+   * @deprecated
+   */
   selectedItem: T | null,
-  /** The textValue of the currently selected item. */
-  selectedText: string | null
+  /** The object values of the currently selected items. */
+  selectedItems: (T | null)[],
+  /** The textValue of the currently selected items. */
+  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>> {}
@@ -242,46 +251,78 @@ 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 selectedItem = state.selectedKey != null
-    ? state.collection.getItem(state.selectedKey)
-    : null;
-  let rendered = selectedItem?.props.children;
-  if (typeof rendered === 'function') {
+  let rendered = state.selectedItems.map((item) => {
+    let rendered = item.props?.children;
     // If the selected item has a function as a child, we need to call it to render to React.JSX.
-    let fn = rendered as (s: ItemRenderProps) => ReactNode;
-    rendered = fn({
-      isHovered: false,
-      isPressed: false,
-      isSelected: false,
-      isFocused: false,
-      isFocusVisible: false,
-      isDisabled: false,
-      selectionMode: 'single',
-      selectionBehavior: 'toggle'
+    if (typeof rendered === 'function') {
+      let fn = rendered as (s: ItemRenderProps) => ReactNode;
+      rendered = fn({
+        isHovered: false,
+        isPressed: false,
+        isSelected: false,
+        isFocused: false,
+        isFocusVisible: false,
+        isDisabled: false,
+        selectionMode: 'single',
+        selectionBehavior: 'toggle'
+      });
+    }
+
+    return rendered;
+  });
+
+  let formatter = useListFormatter();
+  let textValue = useMemo(() => state.selectedItems.map(item => item?.textValue), [state.selectedItems]);
+  let selectionMode = state.selectionManager.selectionMode;
+  let selectedText = useMemo(() => (
+    selectionMode === 'single' 
+      ? textValue[0] ?? '' 
+      : formatter.format(textValue)
+  ), [selectionMode, formatter, textValue]);
+
+  let defaultChildren = useMemo(() => {
+    if (selectionMode === 'single') {
+      return rendered[0];
+    }
+
+    let parts = formatter.formatToParts(textValue);
+    if (parts.length === 0) {
+      return null;
+    }
+
+    let index = 0;
+    return parts.map(part => {
+      if (part.type === 'element') {
+        return <Fragment key={index}>{rendered[index++]}</Fragment>;
+      } else {
+        return part.value;
+      }
     });
-  }
+  }, [selectionMode, formatter, textValue, rendered]);
 
   let stringFormatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');
 
   let renderProps = useRenderProps({
     ...props,
-    defaultChildren: rendered ?? placeholder ?? stringFormatter.format('selectPlaceholder'),
+    defaultChildren: defaultChildren ?? placeholder ?? stringFormatter.format('selectPlaceholder'),
     defaultClassName: 'react-aria-SelectValue',
     values: {
-      selectedItem: state.selectedItem?.value as T ?? null,
-      selectedText: state.selectedItem?.textValue ?? null,
-      isPlaceholder: !selectedItem
+      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,
+      state
     }
   });
 
   let DOMProps = filterDOMProps(props, {global: true});
 
   return (
-    <span ref={ref} {...DOMProps} {...renderProps} data-placeholder={!selectedItem || undefined}>
+    <span ref={ref} {...DOMProps} {...renderProps} data-placeholder={state.selectedItems.length === 0 || undefined}>
       {/* clear description and error message slots */}
       <TextContext.Provider value={undefined}>
         {renderProps.children}

package/src/SelectionIndicator.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ContextValue, useContextProps} from './utils';
+import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import {SharedElement, SharedElementPropsBase} from './SharedElementTransition';
+
+export interface SelectionIndicatorProps extends SharedElementPropsBase {
+  isSelected?: boolean
+}
+
+export const SelectionIndicatorContext = createContext<ContextValue<SelectionIndicatorProps, HTMLDivElement>>({
+  isSelected: false
+});
+
+
+/**
+ * An animated indicator of selection state within a group of items.
+ */
+export const SelectionIndicator = forwardRef(function SelectionIndicator(props: SelectionIndicatorProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, SelectionIndicatorContext);
+  let {isSelected, ...otherProps} = props;
+  return (
+    <SharedElement
+      {...otherProps}
+      ref={ref}
+      className={props.className || 'react-aria-SelectionIndicator'}
+      name="SelectionIndicator"
+      isVisible={isSelected} />
+  );
+});

package/src/SharedElementTransition.tsx

@@ -0,0 +1,185 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {flushSync} from 'react-dom';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactNode, RefObject, useContext, useRef, useState} from 'react';
+import {RenderProps, useRenderProps} from './utils';
+import {useLayoutEffect} from '@react-aria/utils';
+import {useObjectRef} from 'react-aria';
+
+interface Snapshot {
+  rect: DOMRect,
+  style: [string, string][]
+}
+
+const SharedElementContext = createContext<RefObject<{[name: string]: Snapshot}> | null>(null);
+
+export interface SharedElementTransitionProps {
+  children: ReactNode
+}
+
+/**
+ * A scope for SharedElements, which animate between parents.
+ */
+export function SharedElementTransition(props: SharedElementTransitionProps) {
+  let ref = useRef({});
+  return (
+    <SharedElementContext.Provider value={ref}>
+      {props.children}
+    </SharedElementContext.Provider>
+  );
+}
+
+export interface SharedElementRenderProps {
+  /**
+   * Whether the element is currently entering.
+   * @selector [data-entering]
+   */
+  isEntering: boolean,
+  /**
+   * Whether the element is currently exiting.
+   * @selector [data-exiting]
+   */
+  isExiting: boolean
+}
+
+export interface SharedElementPropsBase extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>, RenderProps<SharedElementRenderProps> {}
+
+export interface SharedElementProps extends SharedElementPropsBase {
+  name: string,
+  isVisible?: boolean
+}
+
+/**
+ * An element that animates between its old and new position when moving between parents.
+ */
+export const SharedElement = forwardRef(function SharedElement(props: SharedElementProps, ref: ForwardedRef<HTMLDivElement>) {
+  let {name, isVisible = true, children, className, style, ...divProps} = props;
+  let [state, setState] = useState(isVisible ? 'visible' : 'hidden');
+  let scopeRef = useContext(SharedElementContext);
+  if (!scopeRef) {
+    throw new Error('<SharedElement> must be rendered inside a <SharedElementTransition>');
+  }
+
+  if (isVisible && state === 'hidden') {
+    setState('visible');
+  }
+
+  ref = useObjectRef(ref);
+  useLayoutEffect(() => {
+    let element = ref.current;
+    let scope = scopeRef.current;
+    let prevSnapshot = scope[name];
+    let frame: number | null = null;
+
+    if (element && isVisible && prevSnapshot) {
+      // Element is transitioning from a previous instance.
+      setState('visible');
+      let animations = element.getAnimations();
+
+      // Set properties to animate from.
+      let values = prevSnapshot.style.map(([property, prevValue]) => {
+        let value = element.style[property];
+        if (property === 'translate') {
+          let prevRect = prevSnapshot.rect;
+          let currentItem = element.getBoundingClientRect();
+          let deltaX = prevRect.left - currentItem?.left;
+          let deltaY = prevRect.top - currentItem?.top;
+          element.style.translate = `${deltaX}px ${deltaY}px`;
+        } else {
+          element.style[property] = prevValue;
+        }
+        return [property, value];
+      });
+
+      // Cancel any new animations triggered by these properties.
+      for (let a of element.getAnimations()) {
+        if (!animations.includes(a)) {
+          a.cancel();
+        }
+      }
+
+      // Remove overrides after one frame to animate to the current values.
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        for (let [property, value] of values) {
+          element.style[property] = value;
+        }
+      });
+
+      delete scope[name];
+    } else if (element && isVisible && !prevSnapshot) {
+      // No previous instance exists, apply the entering state.
+      queueMicrotask(() => flushSync(() => setState('entering')));
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        setState('visible');
+      });
+    } else if (element && !isVisible) {
+      // Wait until layout effects finish, and check if a snapshot still exists.
+      // If so, no new SharedElement consumed it, so enter the exiting state.
+      queueMicrotask(() => {
+        if (scope[name]) {
+          delete scope[name];
+          flushSync(() => setState('exiting'));
+          Promise.all(element.getAnimations().map(a => a.finished))
+            .then(() => setState('hidden'))
+            .catch(() => {});
+        } else {
+          // Snapshot was consumed by another instance, unmount.
+          setState('hidden');
+        }
+      });
+    }
+
+    return () => {
+      if (frame != null) {
+        cancelAnimationFrame(frame);
+      }
+
+      if (element && element.isConnected && !element.hasAttribute('data-exiting')) {
+        // On unmount, store a snapshot of the rectangle and computed style for transitioning properties.
+        let style = window.getComputedStyle(element);
+        if (style.transitionProperty !== 'none') {
+          let transitionProperty = style.transitionProperty.split(/\s*,\s*/);
+          scope[name] = {
+            rect: element.getBoundingClientRect(),
+            style: transitionProperty.map(p => [p, style[p]])
+          };
+        }
+      }
+    };
+  }, [ref, scopeRef, name, isVisible]);
+
+  let renderProps = useRenderProps({
+    children,
+    className,
+    style,
+    values: {
+      isEntering: state === 'entering',
+      isExiting: state === 'exiting'
+    }
+  });
+
+  if (state === 'hidden') {
+    return null;
+  }
+
+  return (
+    <div
+      {...divProps}
+      {...renderProps}
+      ref={ref}
+      data-entering={state === 'entering' || undefined}
+      data-exiting={state === 'exiting' || undefined} />
+  );
+});

package/src/Table.tsx

@@ -2,7 +2,7 @@ import {AriaLabelingProps, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps,
 import {BaseCollection, Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, FilterableNode, LoaderNode, useCachedChildren} from '@react-aria/collections';
 import {buildHeaderRows, TableColumnResizeState} from '@react-stately/table';
 import {ButtonContext} from './Button';
-import {CheckboxContext} from './RSPContexts';
+import {CheckboxContext, FieldInputContext, SelectableCollectionContext, SelectableCollectionContextValue} from './RSPContexts';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps} from './Collection';
 import {ColumnSize, ColumnStaticSize, TableCollection as ITableCollection, TableProps as SharedTableProps} from '@react-types/table';
 import {ContextValue, DEFAULT_SLOT, DOMProps, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
@@ -10,13 +10,14 @@ import {DisabledBehavior, DraggableCollectionState, DroppableCollectionState, Mu
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useLocale, useLocalizedStringFormatter, useTable, useTableCell, useTableColumnHeader, useTableColumnResize, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox, useVisuallyHidden} from 'react-aria';
-import {FieldInputContext, SelectableCollectionContext} from './context';
 import {filterDOMProps, inertValue, isScrollable, LoadMoreSentinelProps, mergeRefs, useLayoutEffect, useLoadMoreSentinel, useObjectRef, useResizeObserver} from '@react-aria/utils';
 import {GridNode} from '@react-types/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import ReactDOM from 'react-dom';
+import {SelectionIndicatorContext} from './SelectionIndicator';
+import {SharedElementTransition} from './SharedElementTransition';
 
 class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T> {
   headerRows: GridNode<T>[] = [];
@@ -355,23 +356,21 @@ export const Table = forwardRef(function Table(props: TableProps, ref: Forwarded
 });
 
 interface TableInnerProps {
-  props: TableProps,
-  forwardedRef: ForwardedRef<HTMLTableElement>,
+  props: TableProps & SelectableCollectionContextValue<unknown>,
+  forwardedRef: ForwardedRef<HTMLElement>,
   selectionState: MultipleSelectionState,
   collection: ITableCollection<Node<object>>
 }
 
 
 function TableInner({props, forwardedRef: ref, selectionState, collection}: TableInnerProps) {
-  let contextProps;
-  [contextProps] = useContextProps({}, null, SelectableCollectionContext);
-  let {filter, ...collectionProps} = contextProps;
+  [props, ref] = useContextProps(props, ref, SelectableCollectionContext);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let {shouldUseVirtualFocus, disallowTypeAhead, ...DOMCollectionProps} = collectionProps || {};
+  let {shouldUseVirtualFocus, disallowTypeAhead, filter, ...DOMCollectionProps} = props;
   let tableContainerContext = useContext(ResizableTableContainerContext);
   ref = useObjectRef(useMemo(() => mergeRefs(ref, tableContainerContext?.tableRef), [ref, tableContainerContext?.tableRef]));
   let tableState = useTableState({
-    ...props,
+    ...DOMCollectionProps,
     collection,
     children: undefined,
     UNSAFE_selectionState: selectionState
@@ -381,7 +380,6 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
   let {isVirtualized, layoutDelegate, dropTargetDelegate: ctxDropTargetDelegate, CollectionRoot} = useContext(CollectionRendererContext);
   let {dragAndDropHooks} = props;
   let {gridProps} = useTable({
-    ...props,
     ...DOMCollectionProps,
     layoutDelegate,
     isVirtualized
@@ -493,17 +491,19 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
         <ElementType
           {...mergeProps(DOMProps, renderProps, gridProps, focusProps, droppableCollection?.collectionProps)}
           style={style}
-          ref={ref}
+          ref={ref as RefObject<HTMLTableElement>}
           slot={props.slot || undefined}
           onScroll={props.onScroll}
           data-allows-dragging={isListDraggable || undefined}
           data-drop-target={isRootDropTarget || undefined}
           data-focused={isFocused || undefined}
           data-focus-visible={isFocusVisible || undefined}>
-          <CollectionRoot
-            collection={filteredState.collection}
-            scrollRef={tableContainerContext?.scrollRef ?? ref}
-            persistedKeys={useDndPersistedKeys(selectionManager, dragAndDropHooks, dropState)} />
+          <SharedElementTransition>
+            <CollectionRoot
+              collection={filteredState.collection}
+              scrollRef={tableContainerContext?.scrollRef ?? ref}
+              persistedKeys={useDndPersistedKeys(selectionManager, dragAndDropHooks, dropState)} />
+          </SharedElementTransition>
         </ElementType>
       </FocusScope>
       {dragPreview}
@@ -1182,7 +1182,8 @@ export const Row = /*#__PURE__*/ createBranchComponent(
                     }
                   }
                 }
-              }]
+              }],
+              [SelectionIndicatorContext, {isSelected: states.isSelected}]
             ]}>
             <CollectionBranch collection={state.collection} parent={item} />
           </Provider>

package/src/Tabs.tsx

@@ -18,6 +18,8 @@ import {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useCon
 import {filterDOMProps, inertValue, useObjectRef} from '@react-aria/utils';
 import {Collection as ICollection, Node, TabListState, useTabListState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, JSX, useContext, useMemo} from 'react';
+import {SelectionIndicatorContext} from './SelectionIndicator';
+import {SharedElementTransition} from './SharedElementTransition';
 
 export interface TabsProps extends Omit<AriaTabListProps<any>, 'items' | 'children'>, RenderProps<TabsRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
@@ -230,7 +232,9 @@ function TabListInner<T extends object>({props, forwardedRef: ref}: TabListInner
       {...mergeProps(DOMProps, renderProps, tabListProps)}
       ref={objectRef}
       data-orientation={orientation || undefined}>
-      <CollectionRoot collection={state.collection} persistedKeys={usePersistedKeys(state.selectionManager.focusedKey)} />
+      <SharedElementTransition>
+        <CollectionRoot collection={state.collection} persistedKeys={usePersistedKeys(state.selectionManager.focusedKey)} />
+      </SharedElementTransition>
     </div>
   );
 }
@@ -284,7 +288,9 @@ export const Tab = /*#__PURE__*/ createLeafComponent(TabItemNode, (props: TabPro
       data-focus-visible={isFocusVisible || undefined}
       data-pressed={isPressed || undefined}
       data-hovered={isHovered || undefined}>
-      {renderProps.children}
+      <SelectionIndicatorContext.Provider value={{isSelected}}>
+        {renderProps.children}
+      </SelectionIndicatorContext.Provider>
     </ElementType>
   );
 });

package/src/TagGroup.tsx

@@ -16,12 +16,14 @@ import {Collection, CollectionBuilder, createLeafComponent, ItemNode} from '@rea
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps, usePersistedKeys} from './Collection';
 import {ContextValue, DOMProps, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {filterDOMProps, mergeProps, useObjectRef} from '@react-aria/utils';
-import {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';
 import {LabelContext} from './Label';
 import {ListState, Node, UNSTABLE_useFilteredListState, useListState} from 'react-stately';
 import {ListStateContext} from './ListBox';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useRef} from 'react';
-import {SelectableCollectionContext} from './context';
+import {SelectableCollectionContext, SelectableCollectionContextValue} from './RSPContexts';
+import {SelectionIndicatorContext} from './SelectionIndicator';
+import {SharedElementTransition} from './SharedElementTransition';
 import {TextContext} from './Text';
 
 export interface TagGroupProps extends Omit<AriaTagGroupProps<unknown>, 'children' | 'items' | 'label' | 'description' | 'errorMessage' | 'keyboardDelegate'>, DOMProps, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
@@ -62,54 +64,56 @@ 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>
   );
 });
 
-interface TagGroupInnerProps {
-  props: TagGroupProps,
+interface TagGroupInnerProps<T> {
+  props: TagGroupProps & SelectableCollectionContextValue<T>,
   forwardedRef: ForwardedRef<HTMLDivElement>,
   collection
 }
 
-function TagGroupInner({props, forwardedRef: ref, collection}: TagGroupInnerProps) {
-  let contextProps;
-  [contextProps] = useContextProps({}, null, SelectableCollectionContext);
-  let {filter, ...collectionProps} = contextProps;
+function TagGroupInner<T extends object>({props, forwardedRef: ref, collection}: TagGroupInnerProps<T>) {
+  let tagListRef = useRef<HTMLElement>(null);
+  // Extract the user provided id so it doesn't clash with the collection id provided by Autocomplete
+  let {id, ...otherProps} = props;
+  [otherProps, tagListRef] = useContextProps(otherProps, tagListRef, SelectableCollectionContext);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let {shouldUseVirtualFocus, disallowTypeAhead, ...DOMCollectionProps} = collectionProps || {};
-  let tagListRef = useRef<HTMLDivElement>(null);
+  let {filter, shouldUseVirtualFocus, ...DOMCollectionProps} = otherProps;
   let [labelRef, label] = useSlot(
     !props['aria-label'] && !props['aria-labelledby']
   );
   let tagGroupState = useListState({
-    ...props,
+    ...DOMCollectionProps,
     children: undefined,
     collection
   });
 
-  let filteredState = UNSTABLE_useFilteredListState(tagGroupState, filter);
+  let filteredState = UNSTABLE_useFilteredListState(tagGroupState as ListState<T>, filter);
 
   // Prevent DOM props from going to two places.
-  let domProps = filterDOMProps(props, {global: true});
-  let domPropOverrides = Object.fromEntries(Object.entries(domProps).map(([k]) => [k, undefined]));
+  let domProps = filterDOMProps(otherProps, {global: true});
+  let domPropOverrides = Object.fromEntries(Object.entries(domProps).map(([k, val]) => [k, k === 'id' ? val : undefined]));
   let {
     gridProps,
     labelProps,
     descriptionProps,
     errorMessageProps
   } = useTagGroup({
-    ...props,
-    ...domPropOverrides,
     ...DOMCollectionProps,
+    ...domPropOverrides,
     label
   }, filteredState, tagListRef);
 
   return (
     <div
       {...domProps}
+      id={id}
       ref={ref}
       slot={props.slot || undefined}
       className={props.className ?? 'react-aria-TagGroup'}
@@ -117,7 +121,7 @@ function TagGroupInner({props, forwardedRef: ref, collection}: TagGroupInnerProp
       <Provider
         values={[
           [LabelContext, {...labelProps, elementType: 'span', ref: labelRef}],
-          [TagListContext, {...gridProps, ref: tagListRef}],
+          [TagListContext, {...gridProps, ref: tagListRef as RefObject<HTMLDivElement>}],
           [ListStateContext, filteredState],
           [TextContext, {
             slots: {
@@ -176,9 +180,11 @@ function TagListInner<T extends object>({props, forwardedRef}: TagListInnerProps
       data-empty={state.collection.size === 0 || undefined}
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}>
-      {state.collection.size === 0 && props.renderEmptyState
-        ? props.renderEmptyState(renderValues)
-        : <CollectionRoot collection={state.collection} persistedKeys={persistedKeys} />}
+      <SharedElementTransition>
+        {state.collection.size === 0 && props.renderEmptyState
+          ? props.renderEmptyState(renderValues)
+          : <CollectionRoot collection={state.collection} persistedKeys={persistedKeys} />}
+      </SharedElementTransition>
     </div>
   );
 }
@@ -263,7 +269,8 @@ export const Tag = /*#__PURE__*/ createLeafComponent(ItemNode, (props: TagProps,
                 remove: removeButtonProps
               }
             }],
-            [CollectionRendererContext, DefaultCollectionRenderer]
+            [CollectionRendererContext, DefaultCollectionRenderer],
+            [SelectionIndicatorContext, {isSelected: states.isSelected}]
           ]}>
           {renderProps.children}
         </Provider>