@react-aria/tag 3.0.0-rc.0 → 3.1.0

package/dist/types.d.ts

@@ -1,38 +1,8 @@
-import { Collection, Direction, KeyboardDelegate, AriaLabelingProps, DOMAttributes, DOMProps, FocusableElement, Validation } from "@react-types/shared";
+import { AriaLabelingProps, CollectionBase, DOMAttributes, DOMProps, HelpTextProps, KeyboardDelegate, LabelableProps, MultipleSelection, SelectionBehavior, FocusableElement, Node } from "@react-types/shared";
 import { Key, RefObject } from "react";
+import { ListState } from "@react-stately/list";
 import { AriaButtonProps } from "@react-types/button";
-import { TagGroupState } from "@react-stately/tag";
-import { TagProps, TagGroupProps } from "@react-types/tag";
-export class TagKeyboardDelegate<T> implements KeyboardDelegate {
-    constructor(collection: Collection<T>, direction: Direction);
-    getFirstKey(): Key;
-    getLastKey(): Key;
-    getKeyRightOf(key: Key): any;
-    getKeyLeftOf(key: Key): any;
-    getKeyBelow(key: any): any;
-    getKeyAbove(key: any): any;
-    getKeyPageAbove(key: any): any;
-    getKeyPageBelow(key: any): any;
-}
-export interface TagAria {
-    /** Props for the tag visible label (if any). */
-    labelProps: DOMAttributes;
-    /** Props for the tag cell element. */
-    gridCellProps: DOMAttributes;
-    /** Props for the tag row element. */
-    rowProps: DOMAttributes;
-    /** Props for the tag remove button. */
-    removeButtonProps: AriaButtonProps;
-}
-export interface AriaTagProps<T> extends TagProps<T>, DOMProps, AriaLabelingProps {
-}
-/**
- * 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 ref - A ref to a DOM element for the tag.
- */
-export function useTag<T>(props: AriaTagProps<T>, state: TagGroupState<T>, ref: RefObject<FocusableElement>): TagAria;
+import { SelectableItemStates } from "@react-aria/selection";
 export interface TagGroupAria {
     /** Props for the tag grouping element. */
     gridProps: DOMAttributes;
@@ -43,21 +13,47 @@ export interface TagGroupAria {
     /** Props for the tag group error message element, if any. */
     errorMessageProps: DOMAttributes;
 }
-export interface AriaTagGroupProps<T> extends TagGroupProps<T>, DOMProps, AriaLabelingProps, Validation {
+export interface AriaTagGroupProps<T> extends CollectionBase<T>, MultipleSelection, DOMProps, LabelableProps, AriaLabelingProps, HelpTextProps {
+    /** How multiple selection should behave in the collection. */
+    selectionBehavior?: SelectionBehavior;
+    /** Handler that is called when a user deletes a tag.  */
+    onRemove?: (keys: Set<Key>) => void;
+}
+interface AriaTagGroupOptions<T> extends Omit<AriaTagGroupProps<T>, 'children'> {
     /**
      * An optional keyboard delegate to handle arrow key navigation,
      * to override the default.
      */
-    keyboardDelegate?: TagKeyboardDelegate<T>;
+    keyboardDelegate?: KeyboardDelegate;
 }
 /**
  * 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.
+ * A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, 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 type { TagProps } from '@react-types/tag';
+export function useTagGroup<T>(props: AriaTagGroupOptions<T>, state: ListState<T>, ref: RefObject<HTMLElement>): TagGroupAria;
+export interface TagAria extends Omit<SelectableItemStates, 'hasAction'> {
+    /** Props for the tag row element. */
+    rowProps: DOMAttributes;
+    /** Props for the tag cell element. */
+    gridCellProps: DOMAttributes;
+    /** Props for the tag remove button. */
+    removeButtonProps: AriaButtonProps;
+    /** Whether the tag can be removed. */
+    allowsRemoving: boolean;
+}
+export interface AriaTagProps<T> {
+    /** An object representing the tag. Contains all the relevant information that makes up the tag. */
+    item: Node<T>;
+}
+/**
+ * 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 `useListState`.
+ * @param ref - A ref to a DOM element for the tag.
+ */
+export function useTag<T>(props: AriaTagProps<T>, state: ListState<T>, ref: RefObject<FocusableElement>): TagAria;
 
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;;AAeA,iCAAiC,CAAC,CAAE,YAAW,gBAAgB;gBAIjD,UAAU,EAAE,WAAW,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS;IAK3D,WAAW;IAIX,UAAU;IAIV,aAAa,CAAC,GAAG,EAAE,GAAG;IAItB,YAAY,CAAC,GAAG,EAAE,GAAG;IAIrB,WAAW,CAAC,GAAG,KAAA;IAgBf,WAAW,CAAC,GAAG,KAAA;IAef,eAAe,CAAC,GAAG,KAAA;IAInB,eAAe,CAAC,GAAG,KAAA;CAGpB;ACrDD;IACE,gDAAgD;IAChD,UAAU,EAAE,aAAa,CAAC;IAC1B,sCAAsC;IACtC,aAAa,EAAE,aAAa,CAAC;IAC7B,qCAAqC;IACrC,QAAQ,EAAE,aAAa,CAAC;IACxB,uCAAuC;IACvC,iBAAiB,EAAE,eAAe,CAAA;CACnC;AAED,8BAA8B,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,EAAE,QAAQ,EAAE,iBAAiB;CAAG;AAEpF;;;;;GAKG;AACH,uBAAuB,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,gBAAgB,CAAC,GAAG,OAAO,CAwDpH;AC7ED;IACE,0CAA0C;IAC1C,SAAS,EAAE,aAAa,CAAC;IACzB,wDAAwD;IACxD,UAAU,EAAE,aAAa,CAAC;IAC1B,2DAA2D;IAC3D,gBAAgB,EAAE,aAAa,CAAC;IAChC,6DAA6D;IAC7D,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED,mCAAmC,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU;IACrG;;;OAGG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAA;CAC1C;AAED;;;;;;GAMG;AACH,4BAA4B,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,YAAY,CA2B9H;AC5DD,YAAY,EAAC,QAAQ,EAAC,MAAM,kBAAkB,CAAC","sources":["packages/@react-aria/tag/src/packages/@react-aria/tag/src/TagKeyboardDelegate.ts","packages/@react-aria/tag/src/packages/@react-aria/tag/src/useTag.ts","packages/@react-aria/tag/src/packages/@react-aria/tag/src/useTagGroup.ts","packages/@react-aria/tag/src/packages/@react-aria/tag/src/index.ts","packages/@react-aria/tag/src/index.ts"],"sourcesContent":[null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {TagKeyboardDelegate} from './TagKeyboardDelegate';\nexport {useTag} from './useTag';\nexport {useTagGroup} from './useTagGroup';\n\nexport type {TagProps} from '@react-types/tag';\nexport type {TagGroupAria, AriaTagGroupProps} from './useTagGroup';\nexport type {AriaTagProps, TagAria} from './useTag';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;;;AAsBA;IACE,0CAA0C;IAC1C,SAAS,EAAE,aAAa,CAAC;IACzB,wDAAwD;IACxD,UAAU,EAAE,aAAa,CAAC;IAC1B,2DAA2D;IAC3D,gBAAgB,EAAE,aAAa,CAAC;IAChC,6DAA6D;IAC7D,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED,mCAAmC,CAAC,CAAE,SAAQ,eAAe,CAAC,CAAC,EAAE,iBAAiB,EAAE,QAAQ,EAAE,cAAc,EAAE,iBAAiB,EAAE,aAAa;IAC5I,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAA;CACpC;AAED,8BAAqC,CAAC,CAAE,SAAQ,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,UAAU,CAAC;IACpF;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC;AAQD;;;;;;GAMG;AACH,4BAA4B,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,YAAY,CAkD5H;ACrFD,wBAAyB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC;IACtE,qCAAqC;IACrC,QAAQ,EAAE,aAAa,CAAC;IACxB,sCAAsC;IACtC,aAAa,EAAE,aAAa,CAAC;IAC7B,uCAAuC;IACvC,iBAAiB,EAAE,eAAe,CAAC;IACnC,sCAAsC;IACtC,cAAc,EAAE,OAAO,CAAA;CACxB;AAED,8BAA8B,CAAC;IAC7B,mGAAmG;IACnG,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;CACd;AAED;;;;;GAKG;AACH,uBAAuB,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,gBAAgB,CAAC,GAAG,OAAO,CAuDhH","sources":["packages/@react-aria/tag/src/packages/@react-aria/tag/src/useTagGroup.ts","packages/@react-aria/tag/src/packages/@react-aria/tag/src/useTag.ts","packages/@react-aria/tag/src/packages/@react-aria/tag/src/index.ts","packages/@react-aria/tag/src/index.ts"],"sourcesContent":[null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {useTag} from './useTag';\nexport {useTagGroup} from './useTagGroup';\n\nexport type {TagGroupAria, AriaTagGroupProps} from './useTagGroup';\nexport type {AriaTagProps, TagAria} from './useTag';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/tag",
-  "version": "3.0.0-rc.0",
+  "version": "3.1.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,17 +22,16 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/gridlist": "^3.3.0",
-    "@react-aria/i18n": "^3.7.1",
-    "@react-aria/interactions": "^3.15.0",
-    "@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",
-    "@swc/helpers": "^0.4.14"
+    "@react-aria/gridlist": "^3.5.0",
+    "@react-aria/i18n": "^3.8.0",
+    "@react-aria/interactions": "^3.16.0",
+    "@react-aria/label": "^3.6.0",
+    "@react-aria/selection": "^3.16.0",
+    "@react-aria/utils": "^3.18.0",
+    "@react-stately/list": "^3.9.0",
+    "@react-types/button": "^3.7.3",
+    "@react-types/shared": "^3.18.1",
+    "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
@@ -40,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9d1ba9bd8ebcd63bf3495ade16d349bcb71795ce"
+  "gitHead": "504e40e0a50c1b20ed0fb3ba9561a263b6d5565e"
 }

package/src/index.ts

@@ -10,10 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-export {TagKeyboardDelegate} from './TagKeyboardDelegate';
 export {useTag} from './useTag';
 export {useTagGroup} from './useTagGroup';
 
-export type {TagProps} from '@react-types/tag';
 export type {TagGroupAria, AriaTagGroupProps} from './useTagGroup';
 export type {AriaTagProps, TagAria} from './useTag';

package/src/useTag.ts

@@ -11,59 +11,63 @@
  */
 
 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 {DOMAttributes, FocusableElement, Node} from '@react-types/shared';
+import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
+import {hookData} from './useTagGroup';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {KeyboardEvent, RefObject} from 'react';
-import type {TagGroupState} from '@react-stately/tag';
-import {TagProps} from '@react-types/tag';
+import type {ListState} from '@react-stately/list';
+import {SelectableItemStates} from '@react-aria/selection';
 import {useGridListItem} from '@react-aria/gridlist';
 import {useInteractionModality} from '@react-aria/interactions';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 
-export interface TagAria {
-  /** Props for the tag visible label (if any). */
-  labelProps: DOMAttributes,
-  /** Props for the tag cell element. */
-  gridCellProps: DOMAttributes,
+export interface TagAria extends Omit<SelectableItemStates, 'hasAction'> {
   /** Props for the tag row element. */
   rowProps: DOMAttributes,
+  /** Props for the tag cell element. */
+  gridCellProps: DOMAttributes,
   /** Props for the tag remove button. */
-  removeButtonProps: AriaButtonProps
+  removeButtonProps: AriaButtonProps,
+  /** Whether the tag can be removed. */
+  allowsRemoving: boolean
 }
 
-export interface AriaTagProps<T> extends TagProps<T>, DOMProps, AriaLabelingProps {}
+export interface AriaTagProps<T> {
+  /** An object representing the tag. Contains all the relevant information that makes up the tag. */
+  item: Node<T>
+}
 
 /**
  * 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 {
-  let {
-    allowsRemoving,
-    item
-  } = props;
+export function useTag<T>(props: AriaTagProps<T>, state: ListState<T>, ref: RefObject<FocusableElement>): TagAria {
+  let {item} = props;
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
-  let labelId = useId();
   let buttonId = useId();
 
-  let {rowProps, gridCellProps} = useGridListItem({
+  let {onRemove} = hookData.get(state) || {};
+  let {rowProps, gridCellProps, ...states} = useGridListItem({
     node: item
   }, state, ref);
 
   // We want the group to handle keyboard navigation between tags.
   delete rowProps.onKeyDownCapture;
-
-  let onRemove = chain(props.onRemove, state.onRemove);
+  delete states.descriptionProps;
 
   let onKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Delete' || e.key === 'Backspace') {
-      onRemove(item.key);
       e.preventDefault();
+      if (state.selectionManager.isSelected(item.key)) {
+        onRemove(new Set(state.selectionManager.selectedKeys));
+      } else {
+        onRemove(new Set([item.key]));
+      }
     }
   };
 
@@ -71,31 +75,30 @@ export function useTag<T>(props: AriaTagProps<T>, state: TagGroupState<T>, ref:
   if (modality === 'virtual' &&  (typeof window !== 'undefined' && 'ontouchstart' in window)) {
     modality = 'touch';
   }
-  let description = allowsRemoving && (modality === 'keyboard' || modality === 'virtual') ? stringFormatter.format('removeDescription') : '';
+  let description = onRemove && (modality === 'keyboard' || modality === 'virtual') ? stringFormatter.format('removeDescription') : '';
   let descProps = useDescription(description);
 
-  let domProps = filterDOMProps(props);
   let isFocused = item.key === state.selectionManager.focusedKey;
+  // @ts-ignore - data attributes are ok but TS doesn't know about them.
+  let domProps = filterDOMProps(props);
   return {
     removeButtonProps: {
-      'aria-label': stringFormatter.format('removeButtonLabel', {label: item.textValue}),
-      'aria-labelledby': `${buttonId} ${labelId}`,
+      'aria-label': stringFormatter.format('removeButtonLabel'),
+      'aria-labelledby': `${buttonId} ${rowProps.id}`,
       id: buttonId,
-      onPress: () => allowsRemoving && onRemove ? onRemove(item.key) : null,
+      onPress: () => onRemove ? onRemove(new Set([item.key])) : null,
       excludeFromTabOrder: true
     },
-    labelProps: {
-      id: labelId
-    },
-    rowProps: {
-      ...rowProps,
+    rowProps: mergeProps(rowProps, domProps, {
       tabIndex: (isFocused || state.selectionManager.focusedKey == null) ? 0 : -1,
-      onKeyDown: allowsRemoving ? onKeyDown : null,
+      onKeyDown: onRemove ? onKeyDown : undefined,
       'aria-describedby': descProps['aria-describedby']
-    },
-    gridCellProps: mergeProps(domProps, gridCellProps, {
+    }),
+    gridCellProps: mergeProps(gridCellProps, {
       'aria-errormessage': props['aria-errormessage'],
       'aria-label': props['aria-label']
-    })
+    }),
+    ...states,
+    allowsRemoving: !!onRemove
   };
 }

package/src/useTagGroup.ts

@@ -10,12 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMAttributes, DOMProps, Validation} from '@react-types/shared';
+import {AriaLabelingProps, CollectionBase, DOMAttributes, DOMProps, HelpTextProps, KeyboardDelegate, LabelableProps, MultipleSelection, SelectionBehavior} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {RefObject, useState} from 'react';
-import {TagGroupProps} from '@react-types/tag';
-import type {TagGroupState} from '@react-stately/tag';
-import {TagKeyboardDelegate} from './TagKeyboardDelegate';
+import {Key, RefObject, useEffect, useRef, useState} from 'react';
+import {ListKeyboardDelegate} from '@react-aria/selection';
+import type {ListState} from '@react-stately/list';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
 import {useGridList} from '@react-aria/gridlist';
@@ -32,35 +31,71 @@ export interface TagGroupAria {
   errorMessageProps: DOMAttributes
 }
 
-export interface AriaTagGroupProps<T> extends TagGroupProps<T>, DOMProps, AriaLabelingProps, Validation {
+export interface AriaTagGroupProps<T> extends CollectionBase<T>, MultipleSelection, DOMProps, LabelableProps, AriaLabelingProps, HelpTextProps {
+  /** How multiple selection should behave in the collection. */
+  selectionBehavior?: SelectionBehavior,
+  /** Handler that is called when a user deletes a tag.  */
+  onRemove?: (keys: Set<Key>) => void
+}
+
+export interface AriaTagGroupOptions<T> extends Omit<AriaTagGroupProps<T>, 'children'> {
   /**
    * An optional keyboard delegate to handle arrow key navigation,
    * to override the default.
    */
-  keyboardDelegate?: TagKeyboardDelegate<T>
+  keyboardDelegate?: KeyboardDelegate
+}
+
+interface HookData {
+  onRemove?: (keys: Set<Key>) => void
 }
 
+export const hookData = new WeakMap<ListState<any>, HookData>();
+
 /**
  * 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.
+ * A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, 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: AriaTagGroupOptions<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);
-  let {gridProps} = useGridList({...props, ...fieldProps, keyboardDelegate}, state, ref);
-
-  // Don't want the grid to be focusable or accessible via keyboard
-  delete gridProps.tabIndex;
+  let keyboardDelegate = props.keyboardDelegate || new ListKeyboardDelegate({
+    collection: state.collection,
+    ref,
+    orientation: 'horizontal',
+    direction,
+    disabledKeys: state.disabledKeys
+  });
+  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
+    ...props,
+    labelElementType: 'span'
+  });
+  let {gridProps} = useGridList({
+    ...props,
+    ...fieldProps,
+    keyboardDelegate,
+    shouldFocusWrap: true
+  }, state, ref);
 
   let [isFocusWithin, setFocusWithin] = useState(false);
   let {focusWithinProps} = useFocusWithin({
     onFocusWithinChange: setFocusWithin
   });
   let domProps = filterDOMProps(props);
+
+  // If the last tag is removed, focus the container.
+  let prevCount = useRef(state.collection.size);
+  useEffect(() => {
+    if (prevCount.current > 0 && state.collection.size === 0 && isFocusWithin) {
+      ref.current.focus();
+    }
+    prevCount.current = state.collection.size;
+  }, [state.collection.size, isFocusWithin, ref]);
+
+  hookData.set(state, {onRemove: props.onRemove});
+
   return {
     gridProps: mergeProps(gridProps, domProps, {
       role: state.collection.size ? 'grid' : null,

package/src/TagKeyboardDelegate.ts

@@ -1,79 +0,0 @@
-/*
- * Copyright 2020 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 {Collection, Direction, KeyboardDelegate} from '@react-types/shared';
-import {Key} from 'react';
-
-export class TagKeyboardDelegate<T> implements KeyboardDelegate {
-  private collection: Collection<T>;
-  private direction: Direction;
-
-  constructor(collection: Collection<T>, direction: Direction) {
-    this.collection = collection;
-    this.direction = direction;
-  }
-
-  getFirstKey() {
-    return this.collection.getFirstKey();
-  }
-
-  getLastKey() {
-    return this.collection.getLastKey();
-  }
-  
-  getKeyRightOf(key: Key) {
-    return this.direction === 'rtl' ? this.getKeyAbove(key) : this.getKeyBelow(key);
-  }
-
-  getKeyLeftOf(key: Key) {
-    return this.direction === 'rtl' ? this.getKeyBelow(key) : this.getKeyAbove(key);
-  }
-
-  getKeyBelow(key) {
-    let startItem = this.collection.getItem(key);
-    if (!startItem) {
-      return;
-    }
-
-    // Find the next item
-    key = this.collection.getKeyAfter(key);
-
-    if (key != null) {
-      return key;
-    } else {
-      return this.collection.getFirstKey();
-    }
-  }
-
-  getKeyAbove(key) {
-    let startItem = this.collection.getItem(key);
-    if (!startItem) {
-      return;
-    }
-
-    // Find the previous item
-    key = this.collection.getKeyBefore(key);
-    if (key != null) {
-      return key;
-    } else {
-      return this.collection.getLastKey();
-    }
-  }
-
-  getKeyPageAbove(key) {
-    return this.getKeyAbove(key);
-  }
-
-  getKeyPageBelow(key) {
-    return this.getKeyBelow(key);
-  }
-}