@react-spectrum/tag 3.1.3 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/tag",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,20 +36,20 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.14.2",
-    "@react-aria/i18n": "^3.8.3",
-    "@react-aria/interactions": "^3.19.0",
-    "@react-aria/selection": "^3.17.0",
-    "@react-aria/tag": "^3.2.0",
-    "@react-aria/utils": "^3.21.0",
-    "@react-spectrum/button": "^3.14.0",
-    "@react-spectrum/form": "^3.6.6",
-    "@react-spectrum/label": "^3.15.0",
-    "@react-spectrum/text": "^3.4.6",
-    "@react-spectrum/utils": "^3.11.0",
-    "@react-stately/collections": "^3.10.2",
-    "@react-stately/list": "^3.10.0",
-    "@react-types/shared": "^3.21.0",
+    "@react-aria/focus": "^3.15.0",
+    "@react-aria/i18n": "^3.9.0",
+    "@react-aria/interactions": "^3.20.0",
+    "@react-aria/selection": "^3.17.2",
+    "@react-aria/tag": "^3.3.0",
+    "@react-aria/utils": "^3.22.0",
+    "@react-spectrum/button": "^3.15.0",
+    "@react-spectrum/form": "^3.7.0",
+    "@react-spectrum/label": "^3.16.0",
+    "@react-spectrum/text": "^3.5.0",
+    "@react-spectrum/utils": "^3.11.2",
+    "@react-stately/collections": "^3.10.3",
+    "@react-stately/list": "^3.10.1",
+    "@react-types/shared": "^3.22.0",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
@@ -63,5 +63,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4122e44d1991c90507d630d35ed297f89db435d3"
+  "gitHead": "9ce2f674eab2cc8912800d3162dcf00a1ce94274"
 }

package/src/Tag.tsx

@@ -36,7 +36,7 @@ export function Tag<T>(props: SpectrumTagProps<T>) {
   let {styleProps} = useStyleProps(otherProps);
   let {hoverProps, isHovered} = useHover({});
   let {isFocused, isFocusVisible, focusProps} = useFocusRing({within: true});
-  let ref = useRef();
+  let ref = useRef(null);
   let {removeButtonProps, gridCellProps, rowProps, allowsRemoving} = useTag({
     ...props,
     item

package/src/TagGroup.tsx

@@ -13,7 +13,7 @@
 import {ActionButton} from '@react-spectrum/button';
 import {AriaTagGroupProps, useTagGroup} from '@react-aria/tag';
 import {classNames, useDOMRef} from '@react-spectrum/utils';
-import {DOMRef, SpectrumLabelableProps, StyleProps, Validation} from '@react-types/shared';
+import {Collection, DOMRef, Node, SpectrumLabelableProps, StyleProps, Validation} from '@react-types/shared';
 import {Field} from '@react-spectrum/label';
 import {FocusRing, FocusScope} from '@react-aria/focus';
 // @ts-ignore
@@ -39,13 +39,13 @@ const TAG_STYLES = {
   }
 };
 
-export interface SpectrumTagGroupProps<T> extends Omit<AriaTagGroupProps<T>, 'selectionMode' | 'disallowEmptySelection' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionBehavior' | 'disabledKeys'>, StyleProps, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, Omit<Validation, 'isRequired'> {
+export interface SpectrumTagGroupProps<T> extends Omit<AriaTagGroupProps<T>, 'selectionMode' | 'disallowEmptySelection' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionBehavior' | 'disabledKeys'>, StyleProps, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, Pick<Validation<any>, 'isInvalid' | 'validationState'> {
   /** The label to display on the action button.  */
   actionLabel?: string,
   /** Handler that is called when the action button is pressed. */
   onAction?: () => void,
   /** Sets what the TagGroup should render when there are no tags to display. */
-  renderEmptyState?: () => JSX.Element,
+  renderEmptyState?: () => React.JSX.Element,
   /** Limit the number of rows initially shown. This will render a button that allows the user to expand to show all tags. */
   maxRows?: number
 }
@@ -63,7 +63,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
   } = props;
   let domRef = useDOMRef(ref);
   let containerRef = useRef(null);
-  let tagsRef = useRef(null);
+  let tagsRef = useRef<HTMLDivElement | null>(null);
   let {direction} = useLocale();
   let {scale} = useProvider();
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
@@ -71,9 +71,9 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
   let state = useListState(props);
   let [tagState, setTagState] = useValueEffect({visibleTagCount: state.collection.size, showCollapseButton: false});
   let keyboardDelegate = useMemo(() => {
-    let collection = isCollapsed
+    let collection = (isCollapsed
       ? new ListCollection([...state.collection].slice(0, tagState.visibleTagCount))
-      : new ListCollection([...state.collection]);
+      : new ListCollection([...state.collection])) as Collection<Node<T>>;
     return new ListKeyboardDelegate({
       collection,
       ref: domRef,
@@ -88,7 +88,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
   let actionsRef = useRef(null);
 
   let updateVisibleTagCount = useCallback(() => {
-    if (maxRows > 0) {
+    if (maxRows && maxRows > 0) {
       let computeVisibleTagCount = () => {
         // Refs can be null at runtime.
         let currContainerRef: HTMLDivElement | null = containerRef.current;
@@ -115,7 +115,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
             rowCount++;
           }
 
-          if (rowCount > maxRows) {
+          if (maxRows && rowCount > maxRows) {
             break;
           }
           tagWidths.push(width);
@@ -124,7 +124,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
 
         // Remove tags until there is space for the collapse button and action button (if present) on the last row.
         let buttons = [...currActionsRef.children];
-        if (buttons.length > 0 && rowCount >= maxRows) {
+        if (maxRows && buttons.length > 0 && rowCount >= maxRows) {
           let buttonsWidth = buttons.reduce((acc, curr) => acc += curr.getBoundingClientRect().width, 0);
           buttonsWidth += TAG_STYLES[scale].margin * 2 * buttons.length;
           let end = direction === 'ltr' ? 'right' : 'left';