@react-aria/tag 3.0.0-nightly.2199 → 3.0.0-nightly.2206

package/src/useTag.ts

@@ -11,30 +11,34 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
-import {AriaLabelingProps, DOMAttributes, DOMProps, FocusableElement} from '@react-types/shared';
+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 {ListState} from '@react-stately/list';
-import {TagProps} from '@react-types/tag';
+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.
@@ -43,58 +47,58 @@ export interface AriaTagProps<T> extends TagProps<T>, DOMProps, AriaLabelingProp
  * @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 {
-  let {
-    allowsRemoving,
-    item,
-    onRemove
-  } = props;
+  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;
+  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]));
+      }
     }
   };
-  
+
   let modality: string = useInteractionModality();
   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 {Key, RefObject, useEffect, useRef, useState} from 'react';
+import {ListKeyboardDelegate} from '@react-aria/selection';
 import type {ListState} from '@react-stately/list';
-import {RefObject, useEffect, useRef, useState} from 'react';
-import {TagGroupProps} from '@react-types/tag';
-import {TagKeyboardDelegate} from './TagKeyboardDelegate';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
 import {useGridList} from '@react-aria/gridlist';
@@ -32,14 +31,27 @@ 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?: (key: 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.
@@ -47,11 +59,22 @@ export interface AriaTagGroupProps<T> extends TagGroupProps<T>, DOMProps, AriaLa
  * @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: ListState<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 keyboardDelegate = props.keyboardDelegate || new ListKeyboardDelegate({
+    collection: state.collection,
+    ref,
+    orientation: 'horizontal',
+    direction,
+    disabledKeys: state.disabledKeys
+  });
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField(props);
-  let {gridProps} = useGridList({...props, ...fieldProps, keyboardDelegate}, state, ref);
+  let {gridProps} = useGridList({
+    ...props,
+    ...fieldProps,
+    keyboardDelegate,
+    shouldFocusWrap: true
+  }, state, ref);
 
   let [isFocusWithin, setFocusWithin] = useState(false);
   let {focusWithinProps} = useFocusWithin({
@@ -68,6 +91,8 @@ export function useTagGroup<T>(props: AriaTagGroupProps<T>, state: ListState<T>,
     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);
-  }
-}