TagGroup alpha (#1922)

TagGroup alpha

Author: jluyau

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

@@ -13,20 +13,22 @@ governing permissions and limitations under the License.
 @import '../commons/index.css';
 
 .spectrum-Tags {
-  display: inline-block;
+  display: inherit;
 
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
 .spectrum-Tags-item {
-  display: inline-flex;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "icon content action";
   align-items: center;
   box-sizing: border-box;
 
   margin: calc(var(--spectrum-taggroup-tag-gap-y) / 2) calc(var(--spectrum-taggroup-tag-gap-x) / 2);
-  padding: 0 calc(var(--spectrum-tag-padding-x) - var(--spectrum-tag-border-size));
+  padding-inline-start:calc(var(--spectrum-tag-padding-x) - var(--spectrum-tag-border-size));
   block-size: var(--spectrum-tag-height);
   max-inline-size: 100%;
 
@@ -44,29 +46,38 @@ governing permissions and limitations under the License.
   &.is-disabled {
     pointer-events: none;
   }
+}
 
-  > .spectrum-Tags-itemIcon {
-    margin-inline-end: var(--spectrum-tag-icon-padding-x);
-    margin-inline-start: calc(var(--spectrum-tag-deletable-border-size-key-focus) * -1);
-  }
-
-  .spectrum-Tags-itemClearButton {
-    display: flex;
-    margin-inline-end: calc(-0.5 * var(--spectrum-tag-padding-x));
-    margin-inline-start: var(--spectrum-tag-deletable-border-size-key-focus);
-    block-size: var(--spectrum-alias-font-size-default);
-    inline-size: var(--spectrum-alias-font-size-default);
-    border-radius: var(--spectrum-alias-border-radius-small);
-  }
+.spectrum-Tag-icon {
+  grid-area: icon;
+  margin-inline-end: var(--spectrum-global-dimension-size-100);
 }
 
-.spectrum-Tags-itemLabel {
+.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;
+}
+
+.tags-removable {
+  margin-inline-end: 0;
+}
+
+.spectrum-Tag-label {
+  grid-area: label;
 }
+
+.spectrum-Tag-action {
+  grid-area: action;
+  height: calc(var(--spectrum-tag-height) - (2 * var(--spectrum-tag-border-size)));
+  width: var(--spectrum-global-dimension-size-300);
+}
+

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

@@ -19,9 +19,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
+    "@react-aria/grid": "^3.0.0",
     "@react-aria/i18n": "^3.1.0",
     "@react-aria/interactions": "^3.1.0",
     "@react-aria/utils": "^3.1.0",
+    "@react-stately/grid": "^3.0.0",
+    "@react-types/grid": "^3.0.0",
     "@react-types/shared": "^3.1.0",
     "@react-types/tag": "3.0.0-alpha.1"
   },

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

@@ -0,0 +1,91 @@
+/*
+ * 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 {GridCollection} from '@react-types/grid';
+import {GridKeyboardDelegate} from '@react-aria/grid';
+import {Key} from 'react';
+
+export class TagKeyboardDelegate<T> extends GridKeyboardDelegate<T, GridCollection<T>> {
+  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;
+    }
+
+    // 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);
+    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);
+        let newKey = [...item.childNodes][startItem.index].key;
+
+        // Ignore disabled tags
+        if (this.disabledKeys.has(newKey)) {
+          return this.getKeyBelow(newKey);
+        }
+        return newKey;
+      }
+
+      // Otherwise, focus the next row
+      if (this.focusMode === 'row') {
+        return key;
+      }
+    }
+  }
+
+  getKeyAbove(key) {
+    let startItem = this.collection.getItem(key);
+    if (!startItem) {
+      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);
+    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);
+        let newKey = [...item.childNodes][startItem.index].key;
+
+        // ignore disabled tags
+        if (this.disabledKeys.has(newKey)) {
+          return this.getKeyAbove(newKey);
+        }
+        return newKey;
+      }
+
+      // Otherwise, focus the previous row
+      if (this.focusMode === 'row') {
+        return key;
+      }
+    }
+  }
+}

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

@@ -10,5 +10,6 @@
  * governing permissions and limitations under the License.
  */
 
+export * from './TagKeyboardDelegate';
 export * from './useTag';
 export * from './useTagGroup';

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

@@ -10,74 +10,83 @@
  * governing permissions and limitations under the License.
  */
 
-import {ButtonHTMLAttributes, HTMLAttributes, KeyboardEvent, ReactNode} from 'react';
-import {DOMProps, Removable} from '@react-types/shared';
+import {ButtonHTMLAttributes, HTMLAttributes, KeyboardEvent} from 'react';
 import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
+import {GridState} from '@react-stately/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {TagProps} from '@react-types/tag';
+import {useGridCell, useGridRow} from '@react-aria/grid';
 import {useMessageFormatter} from '@react-aria/i18n';
 
 
-export interface AriaTagProps extends Removable<ReactNode, void>, DOMProps {
-  children?: ReactNode,
-  isDisabled?: boolean,
-  validationState?: 'invalid' | 'valid',
-  isSelected?: boolean,
-  role?: string
-}
-
 export interface TagAria {
-  tagProps: HTMLAttributes<HTMLElement>,
   labelProps: HTMLAttributes<HTMLElement>,
+  tagProps: HTMLAttributes<HTMLElement>,
+  tagRowProps: HTMLAttributes<HTMLElement>,
   clearButtonProps: ButtonHTMLAttributes<HTMLButtonElement>
 }
 
-export function useTag(props: AriaTagProps): TagAria {
+export function useTag(props: TagProps<any>, state: GridState<any, any>): TagAria {
+  let {isFocused} = props;
   const {
     isDisabled,
-    validationState,
     isRemovable,
-    isSelected,
     onRemove,
     children,
-    role
+    item,
+    tagRef,
+    tagRowRef
   } = props;
   const formatMessage = useMessageFormatter(intlMessages);
   const removeString = formatMessage('remove');
-  const tagId = useId();
+  const labelId = useId();
   const buttonId = useId();
 
+  let {rowProps} = useGridRow({
+    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);
+
   function onKeyDown(e: KeyboardEvent<HTMLElement>) {
     if (e.key === 'Delete' || e.key === 'Backspace') {
       onRemove(children, e);
       e.preventDefault();
     }
   }
   const pressProps = {
-    onPress: e => onRemove(children, e)
+    onPress: e => onRemove?.(children, e)
   };
 
+  isFocused = isFocused || state.selectionManager.focusedKey === item.childNodes[0].key;
   let domProps = filterDOMProps(props);
   return {
-    tagProps: mergeProps(domProps, {
-      'aria-selected': !isDisabled && isSelected,
-      'aria-invalid': validationState === 'invalid' || undefined,
-      'aria-errormessage': props['aria-errormessage'],
-      onKeyDown: !isDisabled && isRemovable ? onKeyDown : null,
-      role: role === 'gridcell' ? 'row' : null,
-      tabIndex: isDisabled ? -1 : 0
-    }),
-    labelProps: {
-      id: tagId,
-      role
-    },
     clearButtonProps: mergeProps(pressProps, {
       'aria-label': removeString,
-      'aria-labelledby': `${buttonId} ${tagId}`,
+      'aria-labelledby': `${buttonId} ${labelId}`,
       id: buttonId,
-      title: removeString,
-      isDisabled,
-      role
+      isDisabled
+    }),
+    labelProps: {
+      id: labelId
+    },
+    tagRowProps: otherRowProps,
+    tagProps: mergeProps(domProps, gridCellProps, {
+      'aria-errormessage': props['aria-errormessage'],
+      'aria-label': props['aria-label'],
+      onKeyDown: !isDisabled && isRemovable ? onKeyDown : null,
+      tabIndex: (isFocused || state.selectionManager.focusedKey == null) && !isDisabled ? 0 : -1,
+      onFocus() {
+        state.selectionManager.setFocusedKey(item.childNodes[0].key);
+      },
+      ref: tagRef
     })
   };
 }

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

@@ -12,10 +12,12 @@
 
 import {DOMProps} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {HTMLAttributes, useState} from 'react';
+import {HTMLAttributes, Key, ReactNode, useState} from 'react';
 import {useFocusWithin} from '@react-aria/interactions';
 
 interface AriaTagGroupProps extends DOMProps {
+  children: ReactNode,
+  disabledKeys?: Iterable<Key>,
   isDisabled?: boolean,
   isReadOnly?: boolean, // removes close button
   validationState?: 'valid' | 'invalid'
@@ -25,21 +27,23 @@ interface TagGroupAria {
   tagGroupProps: HTMLAttributes<HTMLElement>
 }
 
-export function useTagGroup(props: AriaTagGroupProps): TagGroupAria {
-  const {isDisabled} = props;
+export function useTagGroup(props: AriaTagGroupProps, listState): TagGroupAria {
+  let {isDisabled} = props;
   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, {
-      role: 'grid',
       'aria-atomic': false,
       'aria-relevant': 'additions',
       'aria-live': isFocusWithin ? 'polite' : 'off',
-      'aria-disabled': isDisabled,
+      'aria-disabled': isDisabled === true,
       ...focusWithinProps
     } as HTMLAttributes<HTMLElement>)
   };