@react-aria/tag 3.0.0-beta.1 → 3.0.0-beta.2

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;;;AAgBA,iCAAiC,CAAC,CAAE,SAAQ,qBAAqB,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC;IACpF,WAAW;IAOX,UAAU;IAOV,aAAa,CAAC,GAAG,EAAE,GAAG;IAItB,YAAY,CAAC,GAAG,EAAE,GAAG;IAIrB,WAAW,CAAC,GAAG,KAAA;IA8Bf,WAAW,CAAC,GAAG,KAAA;IA6Bf,eAAe,CAAC,GAAG,KAAA;IAInB,eAAe,CAAC,GAAG,KAAA;CAGpB;AClFD;IACE,UAAU,EAAE,aAAa,CAAC;IAC1B,QAAQ,EAAE,aAAa,CAAC;IACxB,WAAW,EAAE,aAAa,CAAC;IAC3B,gBAAgB,EAAE,qBAAqB,iBAAiB,CAAC,CAAA;CAC1D;AAED,uBAAuB,KAAK,EAAE,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,EAAE,GAAG,CAAC,GAAG,OAAO,CAuDhF;ACpED,kCAAmC,SAAQ,QAAQ;IACjD,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CACtC;AAED;IACE,aAAa,EAAE,aAAa,CAAA;CAC7B;AAED,4BAA4B,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAclE;ACzBD,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 {AriaTagGroupProps, TagGroupAria} from './useTagGroup';\nexport type {TagAria} from './useTag';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"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;ACtDD;IACE,gDAAgD;IAChD,UAAU,EAAE,aAAa,CAAC;IAC1B,sCAAsC;IACtC,QAAQ,EAAE,aAAa,CAAC;IACxB,qCAAqC;IACrC,WAAW,EAAE,aAAa,CAAC;IAC3B,sCAAsC;IACtC,gBAAgB,EAAE,eAAe,CAAA;CAClC;AAED;;;;;GAKG;AACH,uBAAuB,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,gBAAgB,CAAC,GAAG,OAAO,CAiDhH;ACnED;IACE,0CAA0C;IAC1C,aAAa,EAAE,aAAa,CAAC;IAC7B,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 {TagAria} from './useTag';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@react-aria/tag",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.2",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [
@@ -17,14 +22,16 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/grid": "^3.5.2",
-    "@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-types/shared": "^3.16.0",
-    "@react-types/tag": "3.0.0-beta.1",
+    "@react-aria/gridlist": "^3.2.0",
+    "@react-aria/i18n": "^3.7.0",
+    "@react-aria/interactions": "^3.14.0",
+    "@react-aria/label": "^3.5.0",
+    "@react-aria/utils": "^3.15.0",
+    "@react-stately/list": "^3.7.0",
+    "@react-stately/tag": "3.0.0-beta.0",
+    "@react-types/button": "^3.7.1",
+    "@react-types/shared": "^3.17.0",
+    "@react-types/tag": "3.0.0-beta.2",
     "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
@@ -33,5 +40,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5480d76bd815e239366f92852c76b6831ad2a4fd"
+  "gitHead": "a0efee84aa178cb1a202951dfd6d8de02b292307"
 }

package/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,13 @@ 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);
-    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);
+    key = this.collection.getKeyAfter(key);
 
-        return [...item.childNodes][startItem.index].key;
-      }
-
-      // Otherwise, focus the next row
-      if (this.focusMode === 'row') {
-        return key;
-      }
+    if (key != null) {
+      return key;
     } else {
-      return this.getFirstKey();
+      return this.collection.getFirstKey();
     }
   }
 
@@ -73,26 +60,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();
     }
   }
 

package/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, AriaTagGroupProps} from './useTagGroup';
 export type {TagAria} from './useTag';

package/src/useTag.ts

@@ -10,77 +10,82 @@
  * governing permissions and limitations under the License.
  */
 
-import {ButtonHTMLAttributes, KeyboardEvent} from 'react';
-import {DOMAttributes} from '@react-types/shared';
-import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
-import {GridState} from '@react-stately/grid';
+import {AriaButtonProps} from '@react-types/button';
+import {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';
+import {DOMAttributes, FocusableElement} from '@react-types/shared';
 // @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 {useGridCell, useGridRow} from '@react-aria/grid';
+import {useGridListItem} from '@react-aria/gridlist';
 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. */
   tagProps: DOMAttributes,
+  /** Props for the tag row element. */
   tagRowProps: DOMAttributes,
-  clearButtonProps: ButtonHTMLAttributes<HTMLButtonElement>
+  /** Props for the tag clear button. */
+  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`.
+ * @param ref - A ref to a DOM element for the tag.
+ */
+export function useTag<T>(props: TagProps<T>, state: TagGroupState<T>, ref: RefObject<FocusableElement>): TagAria {
+  let {
+    isFocused,
     allowsRemoving,
-    onRemove,
-    item,
-    tagRef,
-    tagRowRef
+    item
   } = 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;
+  }, state, ref);
+
+  // We want the group to handle keyboard navigation between tags.
+  delete rowProps.onKeyDownCapture;
 
-  let {gridCellProps} = useGridCell({
-    node: [...item.childNodes][0],
-    focusMode: 'cell'
-  }, state, tagRef);
+  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']
     })
   };
 }

package/src/useTagGroup.ts

@@ -10,33 +10,68 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes, DOMProps} from '@react-types/shared';
+import {AriaLabelingProps, DOMAttributes, DOMProps, Validation} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {ReactNode, useState} from 'react';
+import {RefObject, useState} from 'react';
+import {TagGroupProps} from '@react-types/tag';
+import type {TagGroupState} from '@react-stately/tag';
+import {TagKeyboardDelegate} from './TagKeyboardDelegate';
+import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
+import {useGridList} from '@react-aria/gridlist';
+import {useLocale} from '@react-aria/i18n';
 
-export interface AriaTagGroupProps extends DOMProps {
-  children: ReactNode,
-  isReadOnly?: boolean, // removes close button
-  validationState?: 'valid' | 'invalid'
+export interface TagGroupAria {
+  /** Props for the tag grouping element. */
+  tagGroupProps: DOMAttributes,
+  /** Props for the tag group's visible label (if any). */
+  labelProps: DOMAttributes,
+  /** Props for the tag group description element, if any. */
+  descriptionProps: DOMAttributes,
+  /** Props for the tag group error message element, if any. */
+  errorMessageProps: DOMAttributes
 }
 
-export interface TagGroupAria {
-  tagGroupProps: DOMAttributes
+export interface AriaTagGroupProps<T> extends TagGroupProps<T>, DOMProps, AriaLabelingProps, Validation {
+  /**
+   * An optional keyboard delegate to handle arrow key navigation,
+   * to override the default.
+   */
+  keyboardDelegate?: TagKeyboardDelegate<T>
 }
 
-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 = 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 [isFocusWithin, setFocusWithin] = useState(false);
   let {focusWithinProps} = useFocusWithin({
     onFocusWithinChange: setFocusWithin
   });
   let domProps = filterDOMProps(props);
   return {
-    tagGroupProps: mergeProps(domProps, {
+    tagGroupProps: mergeProps(gridProps, domProps, {
+      role: state.collection.size ? 'grid' : null,
       'aria-atomic': false,
       'aria-relevant': 'additions',
       'aria-live': isFocusWithin ? 'polite' : 'off',
-      ...focusWithinProps
-    } as DOMAttributes)
+      ...focusWithinProps,
+      ...fieldProps
+    }),
+    labelProps,
+    descriptionProps,
+    errorMessageProps
   };
 }