TagGroup beta updates (#3692)

Author: tiffany-sy-lin

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

@@ -18,23 +18,15 @@ export class TagKeyboardDelegate<T> extends GridKeyboardDelegate<T, GridCollecti
   getFirstKey() {
     let key = this.collection.getFirstKey();
     let item = this.collection.getItem(key);
-    let newKey = [...item.childNodes][0].key;
 
-    if (this.disabledKeys.has(newKey)) {
-      newKey = this.getKeyBelow(newKey);
-    }
-    return newKey;
+    return [...item.childNodes][0].key;
   }
 
   getLastKey() {
     let key = this.collection.getLastKey();
     let item = this.collection.getItem(key);
-    let newKey = [...item.childNodes][0].key;
 
-    if (this.disabledKeys.has(newKey)) {
-      newKey = this.getKeyAbove(newKey);
-    }
-    return newKey;
+    return [...item.childNodes][0].key;
   }
 
   getKeyRightOf(key: Key) {
@@ -62,13 +54,8 @@ export class TagKeyboardDelegate<T> extends GridKeyboardDelegate<T, GridCollecti
       // 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);
-        let newKey = [...item.childNodes][startItem.index].key;
 
-        // Ignore disabled tags
-        if (this.disabledKeys.has(newKey)) {
-          return this.getKeyBelow(newKey);
-        }
-        return newKey;
+        return [...item.childNodes][startItem.index].key;
       }
 
       // Otherwise, focus the next row
@@ -97,13 +84,7 @@ export class TagKeyboardDelegate<T> extends GridKeyboardDelegate<T, GridCollecti
       // 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);
-        let newKey = [...item.childNodes][startItem.index].key;
-
-        // ignore disabled tags
-        if (this.disabledKeys.has(newKey)) {
-          return this.getKeyAbove(newKey);
-        }
-        return newKey;
+        return [...item.childNodes][startItem.index].key;
       }
 
       // Otherwise, focus the previous row

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

@@ -31,10 +31,8 @@ export interface TagAria {
 export function useTag(props: TagProps<any>, state: GridState<any, any>): TagAria {
   let {isFocused} = props;
   const {
-    isDisabled,
-    isRemovable,
+    allowsRemoving,
     onRemove,
-    children,
     item,
     tagRef,
     tagRowRef
@@ -56,14 +54,14 @@ export function useTag(props: TagProps<any>, state: GridState<any, any>): TagAri
     focusMode: 'cell'
   }, state, tagRef);
 
-  function onKeyDown(e: KeyboardEvent<Element>) {
+  function onKeyDown(e: KeyboardEvent) {
     if (e.key === 'Delete' || e.key === 'Backspace' || e.key === ' ') {
-      onRemove(children, e);
+      onRemove(item.childNodes[0].key);
       e.preventDefault();
     }
   }
   const pressProps = {
-    onPress: e => onRemove?.(children, e)
+    onPress: () => onRemove?.(item.childNodes[0].key)
   };
 
   isFocused = isFocused || state.selectionManager.focusedKey === item.childNodes[0].key;
@@ -72,19 +70,17 @@ export function useTag(props: TagProps<any>, state: GridState<any, any>): TagAri
     clearButtonProps: mergeProps(pressProps, {
       'aria-label': removeString,
       'aria-labelledby': `${buttonId} ${labelId}`,
-      id: buttonId,
-      isDisabled
+      id: buttonId
     }),
     labelProps: {
       id: labelId
     },
     tagRowProps: otherRowProps,
     tagProps: mergeProps(domProps, gridCellProps, {
-      'aria-disabled': isDisabled,
       'aria-errormessage': props['aria-errormessage'],
       'aria-label': props['aria-label'],
-      onKeyDown: !isDisabled && isRemovable ? onKeyDown : null,
-      tabIndex: (isFocused || state.selectionManager.focusedKey == null) && !isDisabled ? 0 : -1
+      onKeyDown: allowsRemoving ? onKeyDown : null,
+      tabIndex: (isFocused || state.selectionManager.focusedKey == null) ? 0 : -1
     })
   };
 }

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

@@ -12,13 +12,11 @@
 
 import {DOMAttributes, DOMProps} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {Key, ReactNode, useState} from 'react';
+import {ReactNode, useState} from 'react';
 import {useFocusWithin} from '@react-aria/interactions';
 
 export interface AriaTagGroupProps extends DOMProps {
   children: ReactNode,
-  disabledKeys?: Iterable<Key>,
-  isDisabled?: boolean,
   isReadOnly?: boolean, // removes close button
   validationState?: 'valid' | 'invalid'
 }
@@ -27,23 +25,17 @@ export interface TagGroupAria {
   tagGroupProps: DOMAttributes
 }
 
-export function useTagGroup(props: AriaTagGroupProps, listState): TagGroupAria {
-  let {isDisabled} = props;
+export function useTagGroup(props: AriaTagGroupProps): TagGroupAria {
   let [isFocusWithin, setFocusWithin] = useState(false);
   let {focusWithinProps} = useFocusWithin({
     onFocusWithinChange: setFocusWithin
   });
-  let allKeys = [...listState.collection.getKeys()];
-  if (!allKeys.some(key => !listState.disabledKeys.has(key))) {
-    isDisabled = true;
-  }
   let domProps = filterDOMProps(props);
   return {
     tagGroupProps: mergeProps(domProps, {
       'aria-atomic': false,
       'aria-relevant': 'additions',
       'aria-live': isFocusWithin ? 'polite' : 'off',
-      'aria-disabled': isDisabled === true,
       ...focusWithinProps
     } as DOMAttributes)
   };

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

@@ -24,8 +24,7 @@ import {useTag} from '@react-aria/tag';
 export function Tag<T>(props: SpectrumTagProps<T>) {
   const {
     children,
-    isDisabled,
-    isRemovable,
+    allowsRemoving,
     item,
     state,
     onRemove,
@@ -34,15 +33,14 @@ export function Tag<T>(props: SpectrumTagProps<T>) {
 
   // @ts-ignore
   let {styleProps} = useStyleProps(otherProps);
-  let {hoverProps, isHovered} = useHover({isDisabled});
+  let {hoverProps, isHovered} = useHover({});
   let {isFocused, isFocusVisible, focusProps} = useFocusRing({within: true});
   let tagRef = useRef();
   let tagRowRef = useRef();
   let {clearButtonProps, labelProps, tagProps, tagRowProps} = useTag({
     ...props,
-    isDisabled,
     isFocused,
-    isRemovable,
+    allowsRemoving,
     item,
     onRemove,
     tagRef,
@@ -59,10 +57,8 @@ export function Tag<T>(props: SpectrumTagProps<T>) {
           styles,
           'spectrum-Tags-item',
           {
-            'is-disabled': isDisabled,
             'focus-ring': isFocusVisible,
             'is-focused': isFocused,
-            'not-removable': !isRemovable,
             'is-hovered': isHovered
           },
           styleProps.className
@@ -71,11 +67,11 @@ export function Tag<T>(props: SpectrumTagProps<T>) {
         <SlotProvider
           slots={{
             icon: {UNSAFE_className: classNames(styles, 'spectrum-Tag-icon'), size: 'XS'},
-            text: {UNSAFE_className: classNames(styles, 'spectrum-Tag-content', {'tags-removable': isRemovable}), ...labelProps}
+            text: {UNSAFE_className: classNames(styles, 'spectrum-Tag-content', {'tags-removable': allowsRemoving}), ...labelProps}
           }}>
 
           {typeof children === 'string' ? <Text>{children}</Text> : children}
-          {isRemovable && <TagRemoveButton item={item} {...clearButtonProps} UNSAFE_className={classNames(styles, 'spectrum-Tag-action')} />}
+          {allowsRemoving && <TagRemoveButton item={item} {...clearButtonProps} UNSAFE_className={classNames(styles, 'spectrum-Tag-action')} />}
         </SlotProvider>
       </div>
     </div>

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

@@ -28,8 +28,7 @@ import {useProviderProps} from '@react-spectrum/provider';
 function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let {
-    isDisabled,
-    isRemovable,
+    allowsRemoving,
     onRemove,
     ...otherProps
   } = props;
@@ -52,15 +51,15 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
       };
     })
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [listState.collection, isRemovable]);
+  }), [listState.collection, allowsRemoving]);
   let state = useGridState({
     ...props,
     collection: gridCollection,
     focusMode: 'cell'
   });
   let keyboardDelegate = new TagKeyboardDelegate({
     collection: state.collection,
-    disabledKeys: state.disabledKeys,
+    disabledKeys: new Set(),
     ref: domRef,
     direction,
     focusMode: 'cell'
@@ -69,7 +68,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
     ...props,
     keyboardDelegate
   }, state, domRef);
-  const {tagGroupProps} = useTagGroup(props, listState);
+  const {tagGroupProps} = useTagGroup(props);
 
   // Don't want the grid to be focusable or accessible via keyboard
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -81,9 +80,6 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
         classNames(
           styles,
           'spectrum-Tags',
-          {
-            'is-disabled': isDisabled
-          },
           styleProps.className
         )
       }
@@ -95,8 +91,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
           key={item.key}
           item={item}
           state={state}
-          isDisabled={isDisabled || state.disabledKeys.has(item?.childNodes[0]?.key)}
-          isRemovable={isRemovable}
+          allowsRemoving={allowsRemoving}
           onRemove={onRemove}>
           {item.childNodes[0].rendered}
         </Tag>

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

@@ -14,7 +14,7 @@ import {action} from '@storybook/addon-actions';
 import Audio from '@spectrum-icons/workflow/Audio';
 import {Icon} from '@react-spectrum/icon';
 import {Item, TagGroup} from '../src';
-import React from 'react';
+import React, {useState} from 'react';
 import {storiesOf} from '@storybook/react';
 import {Text} from '@react-spectrum/text';
 
@@ -23,11 +23,6 @@ storiesOf('TagGroup', module)
     'default',
     () => render({})
   )
-  .add(
-    'disabledKeys',
-    () => render({
-      disabledKeys: ['1']
-    }))
   .add('icons', () => (
     <TagGroup aria-label="tag group" items={[{key: '1', label: 'Cool Tag 1'}, {key: '2', label: 'Cool Tag 2'}]}>
       {item => (
@@ -40,33 +35,29 @@ storiesOf('TagGroup', module)
       )}
     </TagGroup>
   ))
-  .add(
-    'isDisabled',
-    () => render({
-      isDisabled: true
-    }))
   .add(
     'onRemove',
-    () => render({
-      isRemovable: true,
-      onRemove: action('onRemove')
-    })
-  )
-  .add(
-    'onRemove + disabledKeys',
-    () => render({
-      disabledKeys: ['2'],
-      isRemovable: true,
-      onRemove: action('onRemove')
-    })
-  )
-  .add(
-    'onRemove + isDisabled',
-    () => render({
-      isDisabled: true,
-      isRemovable: true,
-      onRemove: action('onRemove')
-    })
+    () => {
+      const [items, setItems] = useState([
+        {key: 1, label: 'Cool Tag 1'},
+        {key: 2, label: 'Another cool tag'},
+        {key: 3, label: 'This tag'},
+        {key: 4, label: 'What tag?'},
+        {key: 5, label: 'This tag is cool too'},
+        {key: 6, label: 'Shy tag'}
+      ]);
+      const onRemove = (key) => {
+        const newItems = [...items].filter((item) => key !== item.key.toString());
+        setItems(newItems);
+        action('onRemove')(key);
+      };
+
+      return (<TagGroup allowsRemoving aria-label="tag group" items={items} onRemove={key => onRemove(key)}>
+        {item => (
+          <Item key={item.key}>{item.label}</Item>
+        )}
+      </TagGroup>);
+    }
   )
   .add('wrapping', () => (
     <div style={{width: '200px'}}>
@@ -81,7 +72,7 @@ storiesOf('TagGroup', module)
     </div>
     )
   )
-  .add('truncation', () => (
+  .add('label truncation', () => (
     <div style={{width: '100px'}}>
       <TagGroup aria-label="tag group">
         <Item key="1">Cool Tag 1 with a really long label</Item>
@@ -100,12 +91,6 @@ storiesOf('TagGroup', module)
         }
       </TagGroup>
     )
-  )
-  .add(
-    'with announcing',
-    () => (
-      <WithAnnouncing />
-    )
   );
 
 function render(props: any = {}) {
@@ -118,14 +103,3 @@ function render(props: any = {}) {
   );
 }
 
-function WithAnnouncing() {
-  let tags = ['Testing tag', 'Other testing label'];
-
-  return (
-    <React.Fragment>
-      <TagGroup aria-label="tag group">
-        {tags.map((t, index) => <Item key={index}>{t}</Item>)}
-      </TagGroup>
-    </React.Fragment>
-  );
-}