TagGroup: Add useTagGroupState and fix focus issues (#3798)

* add useTagGroupState

* update TagGroup to use useTagGroupState

* update useTagGroup

* cleanup useTag

* cleanup stories

* add comment

* remove private from package.json

* lint

* fix types

* lint

* fix types

* update removal string

* switch to focus row instead of cell

* fix types

* add test for focus after deleting

* set focusMode: 'cell'

* cleanup useTag

* lint

* update translation string punctuation

* fix type

* refactor to use useGridList

* update tests

* improve types

* lint

* update comments

* add test for clicking remove button

* update tests to check that onRemove is called once

* cleanup onPress and clearButtonProps type

* fix text overflow and cleanup styles

* update dependencies

* cleanup Tag

* update keyboard focus tests

* fix types and imports

* style fix

* update tests

* only restore focus if onRemove called

* cleanup chain

* formatting

* lint

* fix types

* lint

* lint

* lint

* formatting

* remove unnecessary export

Author: reidbarber

packages/@adobe/spectrum-css-temp/components/tags/index.css

@@ -13,7 +13,7 @@ governing permissions and limitations under the License.
 @import '../commons/index.css';
 
 .spectrum-Tags {
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
 
   margin: 0;
@@ -27,7 +27,7 @@ governing permissions and limitations under the License.
   --spectrum-focus-ring-border-size: var(--spectrum-tag-border-size);
 
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: auto 1fr auto;
   grid-template-areas: "icon content action";
   align-items: center;
   box-sizing: border-box;
@@ -58,28 +58,36 @@ governing permissions and limitations under the License.
     height: calc(var(--spectrum-tag-height) - (2 * var(--spectrum-tag-border-size)));
     width: var(--spectrum-global-dimension-size-300);
   }
-}
 
-.spectrum-Tag-icon {
-  grid-area: icon;
-  margin-inline-end: var(--spectrum-global-dimension-size-100);
-}
+  .spectrum-Tag-cell {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: flex;
+    align-items: center;
+  }
 
-.spectrum-Tag-content {
-  grid-area: content;
-  block-size: 100%;
-  line-height: calc(var(--spectrum-tag-height) - calc(var(--spectrum-tag-border-size) * 2));
-  margin-inline-end: var(--spectrum-tag-padding-x);
-  flex: 1 1 auto;
-  font-size: var(--spectrum-tag-text-size);
-  cursor: default;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  outline: none;
-}
+  .spectrum-Tag-icon {
+    grid-area: icon;
+    margin-inline-end: var(--spectrum-global-dimension-size-100);
+  }
+
+  .spectrum-Tag-content {
+    grid-area: content;
+    line-height: calc(var(--spectrum-tag-height) - calc(var(--spectrum-tag-border-size) * 2));
+    margin-inline-end: var(--spectrum-tag-padding-x);
+    flex: 1 1 auto;
+    font-size: var(--spectrum-tag-text-size);
+    cursor: default;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    outline: none;
+  }
 
-.tags-removable {
-  margin-inline-end: 0;
+  &.is-removable {
+    .spectrum-Tag-content {
+      margin-inline-end: 0;
+    }
+  }
 }
 

packages/@react-aria/tag/intl/en-US.json

@@ -1,3 +1,3 @@
 {
-  "remove": "Remove"
+  "remove": "Press Space or Delete to remove tag."
 }

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

@@ -17,12 +17,12 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/grid": "^3.5.2",
+    "@react-aria/gridlist": "^3.1.1",
     "@react-aria/i18n": "^3.6.3",
     "@react-aria/interactions": "^3.13.1",
     "@react-aria/utils": "^3.14.2",
-    "@react-stately/grid": "^3.4.2",
-    "@react-types/grid": "^3.1.5",
+    "@react-stately/tag": "3.0.0-alpha.1",
+    "@react-types/button": "^3.7.0",
     "@react-types/shared": "^3.16.0",
     "@react-types/tag": "3.0.0-beta.1",
     "@swc/helpers": "^0.4.14"

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

@@ -10,25 +10,26 @@
  * governing permissions and limitations under the License.
  */
 
-import {GridCollection} from '@react-types/grid';
-import {GridKeyboardDelegate} from '@react-aria/grid';
+import {Collection, Direction, KeyboardDelegate} from '@react-types/shared';
 import {Key} from 'react';
 
-export class TagKeyboardDelegate<T> extends GridKeyboardDelegate<T, GridCollection<T>> {
-  getFirstKey() {
-    let key = this.collection.getFirstKey();
-    let item = this.collection.getItem(key);
+export class TagKeyboardDelegate<T> implements KeyboardDelegate {
+  private collection: Collection<T>;
+  private direction: Direction;
 
-    return [...item.childNodes][0].key;
+  constructor(collection: Collection<T>, direction: Direction) {
+    this.collection = collection;
+    this.direction = direction;
   }
 
-  getLastKey() {
-    let key = this.collection.getLastKey();
-    let item = this.collection.getItem(key);
-
-    return [...item.childNodes][0].key;
+  getFirstKey() {
+    return this.collection.getFirstKey();
   }
 
+  getLastKey() {
+    return this.collection.getLastKey();
+  }
+  
   getKeyRightOf(key: Key) {
     return this.direction === 'rtl' ? this.getKeyAbove(key) : this.getKeyBelow(key);
   }
@@ -43,27 +44,12 @@ export class TagKeyboardDelegate<T> extends GridKeyboardDelegate<T, GridCollecti
       return;
     }
 
-    // If focus was on a cell, start searching from the parent row
-    if (this.isCell(startItem)) {
-      key = startItem.parentKey;
-    }
-
     // Find the next item
-    key = this.findNextKey(key);
+    key = this.collection.getKeyAfter(key);
     if (key != null) {
-      // If focus was on a cell, focus the cell with the same index in the next row.
-      if (this.isCell(startItem)) {
-        let item = this.collection.getItem(key);
-
-        return [...item.childNodes][startItem.index].key;
-      }
-
-      // Otherwise, focus the next row
-      if (this.focusMode === 'row') {
-        return key;
-      }
+      return key;
     } else {
-      return this.getFirstKey();
+      return this.collection.getFirstKey();
     }
   }
 
@@ -73,26 +59,12 @@ export class TagKeyboardDelegate<T> extends GridKeyboardDelegate<T, GridCollecti
       return;
     }
 
-    // If focus is on a cell, start searching from the parent row
-    if (this.isCell(startItem)) {
-      key = startItem.parentKey;
-    }
-
     // Find the previous item
-    key = this.findPreviousKey(key);
+    key = this.collection.getKeyBefore(key);
     if (key != null) {
-      // If focus was on a cell, focus the cell with the same index in the previous row.
-      if (this.isCell(startItem)) {
-        let item = this.collection.getItem(key);
-        return [...item.childNodes][startItem.index].key;
-      }
-
-      // Otherwise, focus the previous row
-      if (this.focusMode === 'row') {
-        return key;
-      }
+      return key;
     } else {
-      return this.getLastKey();
+      return this.collection.getLastKey();
     }
   }
 

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

@@ -15,5 +15,5 @@ export {useTag} from './useTag';
 export {useTagGroup} from './useTagGroup';
 
 export type {TagProps} from '@react-types/tag';
-export type {AriaTagGroupProps, TagGroupAria} from './useTagGroup';
+export type {TagGroupAria} from './useTagGroup';
 export type {TagAria} from './useTag';

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

@@ -10,77 +10,78 @@
  * governing permissions and limitations under the License.
  */
 
-import {ButtonHTMLAttributes, KeyboardEvent} from 'react';
+import {AriaButtonProps} from '@react-types/button';
+import {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';
 import {DOMAttributes} from '@react-types/shared';
-import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
-import {GridState} from '@react-stately/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {KeyboardEvent} from 'react';
+import type {TagGroupState} from '@react-stately/tag';
 import {TagProps} from '@react-types/tag';
-import {useGridCell, useGridRow} from '@react-aria/grid';
+import {useGridListItem} from '@react-aria/gridlist';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 
 export interface TagAria {
   labelProps: DOMAttributes,
   tagProps: DOMAttributes,
   tagRowProps: DOMAttributes,
-  clearButtonProps: ButtonHTMLAttributes<HTMLButtonElement>
+  clearButtonProps: AriaButtonProps
 }
 
-export function useTag(props: TagProps<any>, state: GridState<any, any>): TagAria {
-  let {isFocused} = props;
-  const {
+/**
+ * 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`.
+ */
+export function useTag<T>(props: TagProps<T>, state: TagGroupState<T>): TagAria {
+  let {
+    isFocused,
     allowsRemoving,
-    onRemove,
     item,
-    tagRef,
     tagRowRef
   } = props;
-  const stringFormatter = useLocalizedStringFormatter(intlMessages);
-  const removeString = stringFormatter.format('remove');
-  const labelId = useId();
-  const buttonId = useId();
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
+  let removeString = stringFormatter.format('remove');
+  let labelId = useId();
+  let buttonId = useId();
 
-  let {rowProps} = useGridRow({
+  let {rowProps, gridCellProps} = useGridListItem({
     node: item
   }, state, tagRowRef);
-  // Don't want the row to be focusable or accessible via keyboard
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let {tabIndex, ...otherRowProps} = rowProps;
 
-  let {gridCellProps} = useGridCell({
-    node: [...item.childNodes][0],
-    focusMode: 'cell'
-  }, state, tagRef);
+  // We want the group to handle keyboard navigation between tags.
+  delete rowProps.onKeyDownCapture;
+
+  let onRemove = chain(props.onRemove, state.onRemove);
 
-  function onKeyDown(e: KeyboardEvent) {
+  let onKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Delete' || e.key === 'Backspace' || e.key === ' ') {
-      onRemove(item.childNodes[0].key);
+      onRemove(item.key);
       e.preventDefault();
     }
-  }
-  const pressProps = {
-    onPress: () => onRemove?.(item.childNodes[0].key)
   };
 
-  isFocused = isFocused || state.selectionManager.focusedKey === item.childNodes[0].key;
+  isFocused = isFocused || state.selectionManager.focusedKey === item.key;
   let domProps = filterDOMProps(props);
   return {
-    clearButtonProps: mergeProps(pressProps, {
+    clearButtonProps: {
       'aria-label': removeString,
       'aria-labelledby': `${buttonId} ${labelId}`,
-      id: buttonId
-    }),
+      id: buttonId,
+      onPress: () => allowsRemoving && onRemove ? onRemove(item.key) : null
+    },
     labelProps: {
       id: labelId
     },
-    tagRowProps: otherRowProps,
+    tagRowProps: {
+      ...rowProps,
+      tabIndex: (isFocused || state.selectionManager.focusedKey == null) ? 0 : -1,
+      onKeyDown: allowsRemoving ? onKeyDown : null
+    },
     tagProps: mergeProps(domProps, gridCellProps, {
       'aria-errormessage': props['aria-errormessage'],
-      'aria-label': props['aria-label'],
-      onKeyDown: allowsRemoving ? onKeyDown : null,
-      tabIndex: (isFocused || state.selectionManager.focusedKey == null) ? 0 : -1
+      'aria-label': props['aria-label']
     })
   };
 }

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

@@ -10,29 +10,43 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes, DOMProps} from '@react-types/shared';
+import {AriaTagGroupProps} from '@react-types/tag';
+import {DOMAttributes} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {ReactNode, useState} from 'react';
+import {RefObject, useState} from 'react';
+import type {TagGroupState} from '@react-stately/tag';
+import {TagKeyboardDelegate} from './TagKeyboardDelegate';
 import {useFocusWithin} from '@react-aria/interactions';
-
-export interface AriaTagGroupProps extends DOMProps {
-  children: ReactNode,
-  isReadOnly?: boolean, // removes close button
-  validationState?: 'valid' | 'invalid'
-}
+import {useGridList} from '@react-aria/gridlist';
+import {useLocale} from '@react-aria/i18n';
 
 export interface TagGroupAria {
   tagGroupProps: DOMAttributes
 }
 
-export function useTagGroup(props: AriaTagGroupProps): TagGroupAria {
+/**
+ * Provides the behavior and accessibility implementation for a tag group component.
+ * Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.
+ * @param props - Props to be applied to the tag group.
+ * @param state - State for the tag group, as returned by `useTagGroupState`.
+ * @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 {
+  let {direction} = useLocale();
+  let keyboardDelegate = new TagKeyboardDelegate(state.collection, direction);
+  let {gridProps} = useGridList({...props, keyboardDelegate}, state, ref);
+
+  // Don't want the grid to be focusable or accessible via keyboard
+  delete gridProps.role;
+  delete gridProps.tabIndex;
+
   let [isFocusWithin, setFocusWithin] = useState(false);
   let {focusWithinProps} = useFocusWithin({
     onFocusWithinChange: setFocusWithin
   });
   let domProps = filterDOMProps(props);
   return {
-    tagGroupProps: mergeProps(domProps, {
+    tagGroupProps: mergeProps(gridProps, domProps, {
       'aria-atomic': false,
       'aria-relevant': 'additions',
       'aria-live': isFocusWithin ? 'polite' : 'off',

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

@@ -32,20 +32,16 @@
   },
   "dependencies": {
     "@react-aria/focus": "^3.10.1",
-    "@react-aria/grid": "^3.5.2",
-    "@react-aria/i18n": "^3.6.3",
     "@react-aria/interactions": "^3.13.1",
     "@react-aria/tag": "3.0.0-beta.1",
     "@react-aria/utils": "^3.14.2",
     "@react-spectrum/button": "^3.11.2",
     "@react-spectrum/text": "^3.3.4",
     "@react-spectrum/utils": "^3.8.1",
     "@react-stately/collections": "^3.5.1",
-    "@react-stately/grid": "^3.4.2",
-    "@react-stately/list": "^3.6.1",
+    "@react-stately/tag": "3.0.0-alpha.1",
     "@react-types/shared": "^3.16.0",
     "@react-types/tag": "3.0.0-beta.1",
-    "@spectrum-icons/workflow": "^4.0.6",
     "@swc/helpers": "^0.4.14"
   },
   "devDependencies": {