@react-spectrum/tag 3.1.4 → 3.2.1

package/dist/zh-TW.mjs

@@ -0,0 +1,11 @@
+var $18b85da2aafaaf3e$exports = {};
+$18b85da2aafaaf3e$exports = {
+    "actions": `\u{52D5}\u{4F5C}`,
+    "hideButtonLabel": `\u{986F}\u{793A}\u{8F03}\u{5C11}`,
+    "noTags": `\u{7121}`,
+    "showAllButtonLabel": (args, formatter)=>`\u{986F}\u{793A}\u{5168}\u{90E8} (${formatter.number(args.tagCount)})`
+};
+
+
+export {$18b85da2aafaaf3e$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js

@@ -0,0 +1,11 @@
+var $18b85da2aafaaf3e$exports = {};
+$18b85da2aafaaf3e$exports = {
+    "actions": `\u{52D5}\u{4F5C}`,
+    "hideButtonLabel": `\u{986F}\u{793A}\u{8F03}\u{5C11}`,
+    "noTags": `\u{7121}`,
+    "showAllButtonLabel": (args, formatter)=>`\u{986F}\u{793A}\u{5168}\u{90E8} (${formatter.number(args.tagCount)})`
+};
+
+
+export {$18b85da2aafaaf3e$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,gBAAE,CAAC;IACjC,mBAAmB,CAAC,gCAAI,CAAC;IACzB,UAAU,CAAC,QAAC,CAAC;IACb,sBAAsB,CAAC,MAAM,YAAc,CAAC,kCAAM,EAAE,UAAU,MAAM,CAAC,KAAK,QAAQ,EAAE,CAAC,CAAC;AACxF","sources":["packages/@react-spectrum/tag/intl/zh-TW.json"],"sourcesContent":["{\n  \"actions\": \"動作\",\n  \"hideButtonLabel\": \"顯示較少\",\n  \"noTags\": \"無\",\n  \"showAllButtonLabel\": \"顯示全部 ({tagCount, number})\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/tag",
-  "version": "3.1.4",
+  "version": "3.2.1",
   "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.3",
-    "@react-aria/i18n": "^3.8.4",
-    "@react-aria/interactions": "^3.19.1",
-    "@react-aria/selection": "^3.17.1",
-    "@react-aria/tag": "^3.2.1",
-    "@react-aria/utils": "^3.21.1",
-    "@react-spectrum/button": "^3.14.1",
-    "@react-spectrum/form": "^3.6.7",
-    "@react-spectrum/label": "^3.15.1",
-    "@react-spectrum/text": "^3.4.7",
-    "@react-spectrum/utils": "^3.11.1",
-    "@react-stately/collections": "^3.10.2",
-    "@react-stately/list": "^3.10.0",
-    "@react-types/shared": "^3.21.0",
+    "@react-aria/focus": "^3.16.0",
+    "@react-aria/i18n": "^3.10.0",
+    "@react-aria/interactions": "^3.20.1",
+    "@react-aria/selection": "^3.17.3",
+    "@react-aria/tag": "^3.3.1",
+    "@react-aria/utils": "^3.23.0",
+    "@react-spectrum/button": "^3.16.0",
+    "@react-spectrum/form": "^3.7.1",
+    "@react-spectrum/label": "^3.16.1",
+    "@react-spectrum/text": "^3.5.1",
+    "@react-spectrum/utils": "^3.11.3",
+    "@react-stately/collections": "^3.10.4",
+    "@react-stately/list": "^3.10.2",
+    "@react-types/shared": "^3.22.0",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
@@ -63,5 +63,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3ecf62dcceea437cb12df1851636dd491bb6591c"
+  "gitHead": "86b38c87868ce7f262e0df905e5ac4eb2653791d"
 }

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
@@ -21,7 +21,7 @@ import intlMessages from '../intl/*.json';
 import {ListCollection, useListState} from '@react-stately/list';
 import {ListKeyboardDelegate} from '@react-aria/selection';
 import {Provider, useProvider, useProviderProps} from '@react-spectrum/provider';
-import React, {ReactElement, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {JSX, ReactElement, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/tags/vars.css';
 import {Tag} from './Tag';
 import {useFormProps} from '@react-spectrum/form';
@@ -39,7 +39,7 @@ 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. */
@@ -63,17 +63,17 @@ 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);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/tag');
   let [isCollapsed, setIsCollapsed] = useState(maxRows != null);
   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';