Merge branch 'main' of github.com:adobe/react-spectrum

Author: devongovett

packages/@react-aria/tag/docs/useTagGroup.mdx

@@ -77,7 +77,7 @@ Each individual tag should use `rowProps` on its outer container, and use `gridC
 
 ```tsx example export=true
 import {useTag, useTagGroup} from '@react-aria/tag';
-import {useTagGroupState} from '@react-stately/tag';
+import {useListState} from '@react-stately/list';
 import {Item} from '@react-stately/collections';
 import {useFocusRing} from '@react-aria/focus';
 
@@ -88,7 +88,7 @@ function TagGroup(props) {
   let { label, description, errorMessage, validationState, allowsRemoving, onRemove } = props;
   let ref = React.useRef(null);
 
-  let state = useTagGroupState(props);
+  let state = useListState(props);
   let {
     gridProps,
     labelProps,

packages/@react-aria/tag/package.json

@@ -28,7 +28,6 @@
     "@react-aria/label": "^3.5.1",
     "@react-aria/utils": "^3.16.0",
     "@react-stately/list": "^3.8.0",
-    "@react-stately/tag": "3.0.0-rc.0",
     "@react-types/button": "^3.7.2",
     "@react-types/shared": "^3.18.0",
     "@react-types/tag": "3.0.0-rc.0",

packages/@react-aria/tag/src/useTag.ts

@@ -12,11 +12,11 @@
 
 import {AriaButtonProps} from '@react-types/button';
 import {AriaLabelingProps, DOMAttributes, DOMProps, FocusableElement} from '@react-types/shared';
-import {chain, filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {KeyboardEvent, RefObject} from 'react';
-import type {TagGroupState} from '@react-stately/tag';
+import type {ListState} from '@react-stately/list';
 import {TagProps} from '@react-types/tag';
 import {useGridListItem} from '@react-aria/gridlist';
 import {useInteractionModality} from '@react-aria/interactions';
@@ -39,13 +39,14 @@ export interface AriaTagProps<T> extends TagProps<T>, DOMProps, AriaLabelingProp
 /**
  * Provides the behavior and accessibility implementation for a tag component.
  * @param props - Props to be applied to the tag.
- * @param state - State for the tag group, as returned by `useTagGroupState`.
+ * @param state - State for the tag group, as returned by `useListState`.
  * @param ref - A ref to a DOM element for the tag.
  */
-export function useTag<T>(props: AriaTagProps<T>, state: TagGroupState<T>, ref: RefObject<FocusableElement>): TagAria {
+export function useTag<T>(props: AriaTagProps<T>, state: ListState<T>, ref: RefObject<FocusableElement>): TagAria {
   let {
     allowsRemoving,
-    item
+    item,
+    onRemove
   } = props;
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let labelId = useId();
@@ -58,8 +59,6 @@ export function useTag<T>(props: AriaTagProps<T>, state: TagGroupState<T>, ref:
   // We want the group to handle keyboard navigation between tags.
   delete rowProps.onKeyDownCapture;
 
-  let onRemove = chain(props.onRemove, state.onRemove);
-
   let onKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Delete' || e.key === 'Backspace') {
       onRemove(item.key);

packages/@react-aria/tag/src/useTagGroup.ts

@@ -12,9 +12,9 @@
 
 import {AriaLabelingProps, DOMAttributes, DOMProps, Validation} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import type {ListState} from '@react-stately/list';
 import {RefObject, useState} from 'react';
 import {TagGroupProps} from '@react-types/tag';
-import type {TagGroupState} from '@react-stately/tag';
 import {TagKeyboardDelegate} from './TagKeyboardDelegate';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
@@ -44,10 +44,10 @@ export interface AriaTagGroupProps<T> extends TagGroupProps<T>, DOMProps, AriaLa
  * Provides the behavior and accessibility implementation for a tag group component.
  * A tag group is a focusable list of labels, categories, keywords, or other items, with support for keyboard navigation and removal.
  * @param props - Props to be applied to the tag group.
- * @param state - State for the tag group, as returned by `useTagGroupState`.
+ * @param state - State for the tag group, as returned by `useListState`.
  * @param ref - A ref to a DOM element for the tag group.
  */
-export function useTagGroup<T>(props: AriaTagGroupProps<T>, state: TagGroupState<T>, ref: RefObject<HTMLElement>): TagGroupAria {
+export function useTagGroup<T>(props: AriaTagGroupProps<T>, state: ListState<T>, ref: RefObject<HTMLElement>): TagGroupAria {
   let {direction} = useLocale();
   let keyboardDelegate = props.keyboardDelegate || new TagKeyboardDelegate(state.collection, direction);
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField(props);

packages/@react-spectrum/tag/package.json

@@ -48,7 +48,6 @@
     "@react-spectrum/utils": "^3.9.1",
     "@react-stately/collections": "^3.7.0",
     "@react-stately/list": "^3.8.0",
-    "@react-stately/tag": "3.0.0-rc.0",
     "@react-types/shared": "^3.18.0",
     "@react-types/tag": "3.0.0-rc.0",
     "@swc/helpers": "^0.4.14"

packages/@react-spectrum/tag/src/Tag.tsx

@@ -12,18 +12,18 @@
 
 import {classNames, ClearSlots, SlotProvider, useStyleProps} from '@react-spectrum/utils';
 import {ClearButton} from '@react-spectrum/button';
+import type {ListState} from '@react-stately/list';
 import {mergeProps} from '@react-aria/utils';
 import React, {useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/tags/vars.css';
-import type {TagGroupState} from '@react-stately/tag';
 import {TagProps} from '@react-types/tag';
 import {Text} from '@react-spectrum/text';
 import {useFocusRing} from '@react-aria/focus';
 import {useHover} from '@react-aria/interactions';
 import {useTag} from '@react-aria/tag';
 
 export interface SpectrumTagProps<T> extends TagProps<T> {
-  state: TagGroupState<T>
+  state: ListState<T>
 }
 
 export function Tag<T>(props: SpectrumTagProps<T>) {

packages/@react-spectrum/tag/src/TagGroup.tsx

@@ -18,15 +18,14 @@ import {Field} from '@react-spectrum/label';
 import {FocusScope} from '@react-aria/focus';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {ListCollection} from '@react-stately/list';
+import {ListCollection, useListState} from '@react-stately/list';
 import {Provider, useProviderProps} from '@react-spectrum/provider';
 import React, {ReactElement, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/tags/vars.css';
 import {Tag} from './Tag';
 import {useFormProps} from '@react-spectrum/form';
 import {useId, useLayoutEffect, useResizeObserver, useValueEffect} from '@react-aria/utils';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
-import {useTagGroupState} from '@react-stately/tag';
 
 export interface SpectrumTagGroupProps<T> extends AriaTagGroupProps<T>, StyleProps, SpectrumLabelableProps, Omit<SpectrumHelpTextProps, 'showErrorIcon'> {
   /** The label to display on the action button.  */
@@ -53,7 +52,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
   let {direction} = useLocale();
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let [isCollapsed, setIsCollapsed] = useState(maxRows != null);
-  let state = useTagGroupState(props);
+  let state = useListState(props);
   let [tagState, setTagState] = useValueEffect({visibleTagCount: state.collection.size, showCollapseButton: false, maxHeight: undefined});
   let keyboardDelegate = useMemo(() => (
     isCollapsed