@react-spectrum/tag 3.0.0-rc.0 → 3.0.0

package/dist/main.js

@@ -6,12 +6,12 @@ var $dTV3V$reactspectrumutils = require("@react-spectrum/utils");
 var $dTV3V$reactspectrumlabel = require("@react-spectrum/label");
 var $dTV3V$reactariafocus = require("@react-aria/focus");
 var $dTV3V$reactstatelylist = require("@react-stately/list");
+var $dTV3V$reactariaselection = require("@react-aria/selection");
 var $dTV3V$reactspectrumprovider = require("@react-spectrum/provider");
 var $dTV3V$react = require("react");
 var $dTV3V$reactspectrumform = require("@react-spectrum/form");
 var $dTV3V$reactariautils = require("@react-aria/utils");
 var $dTV3V$reactariai18n = require("@react-aria/i18n");
-var $dTV3V$reactstatelytag = require("@react-stately/tag");
 var $dTV3V$reactspectrumtext = require("@react-spectrum/text");
 var $dTV3V$reactariainteractions = require("@react-aria/interactions");
 
@@ -54,6 +54,7 @@ var $e4833c69a6a8a469$exports = {};
 $e4833c69a6a8a469$exports = {
     "actions": `الإجراءات`,
     "hideButtonLabel": `إظهار أقل`,
+    "noTags": `بدون`,
     "showAllButtonLabel": (args, formatter)=>`عرض الكل (${formatter.number(args.tagCount)})`
 };
 
@@ -62,6 +63,7 @@ var $9b536cac3e0b637e$exports = {};
 $9b536cac3e0b637e$exports = {
     "actions": `Действия`,
     "hideButtonLabel": `Показване на по-малко`,
+    "noTags": `Нито един`,
     "showAllButtonLabel": (args, formatter)=>`Показване на всички (${formatter.number(args.tagCount)})`
 };
 
@@ -70,6 +72,7 @@ var $06ebf46bd7a639dd$exports = {};
 $06ebf46bd7a639dd$exports = {
     "actions": `Akce`,
     "hideButtonLabel": `Zobrazit méně`,
+    "noTags": `Žádný`,
     "showAllButtonLabel": (args, formatter)=>`Zobrazit vše (${formatter.number(args.tagCount)})`
 };
 
@@ -78,6 +81,7 @@ var $d0c8889aa143e531$exports = {};
 $d0c8889aa143e531$exports = {
     "actions": `Handlinger`,
     "hideButtonLabel": `Vis mindre`,
+    "noTags": `Ingen`,
     "showAllButtonLabel": (args, formatter)=>`Vis alle (${formatter.number(args.tagCount)})`
 };
 
@@ -86,6 +90,7 @@ var $09f15015489dc476$exports = {};
 $09f15015489dc476$exports = {
     "actions": `Aktionen`,
     "hideButtonLabel": `Weniger zeigen`,
+    "noTags": `Keine`,
     "showAllButtonLabel": (args, formatter)=>`Alle anzeigen (${formatter.number(args.tagCount)})`
 };
 
@@ -94,6 +99,7 @@ var $ec81f332ee1bb67a$exports = {};
 $ec81f332ee1bb67a$exports = {
     "actions": `Ενέργειες`,
     "hideButtonLabel": `Εμφάνιση λιγότερων`,
+    "noTags": `Κανένα`,
     "showAllButtonLabel": (args, formatter)=>`Εμφάνιση όλων (${formatter.number(args.tagCount)})`
 };
 
@@ -102,7 +108,8 @@ var $a5d4273001869f16$exports = {};
 $a5d4273001869f16$exports = {
     "showAllButtonLabel": (args, formatter)=>`Show all (${formatter.number(args.tagCount)})`,
     "hideButtonLabel": `Show less`,
-    "actions": `Actions`
+    "actions": `Actions`,
+    "noTags": `None`
 };
 
 
@@ -110,6 +117,7 @@ var $355c19ee0d058106$exports = {};
 $355c19ee0d058106$exports = {
     "actions": `Acciones`,
     "hideButtonLabel": `Mostrar menos`,
+    "noTags": `Ninguno`,
     "showAllButtonLabel": (args, formatter)=>`Mostrar todo (${formatter.number(args.tagCount)})`
 };
 
@@ -118,6 +126,7 @@ var $94d247b24eb969ef$exports = {};
 $94d247b24eb969ef$exports = {
     "actions": `Toimingud`,
     "hideButtonLabel": `Kuva vähem`,
+    "noTags": `Puudub`,
     "showAllButtonLabel": (args, formatter)=>`Kuva kõik (${formatter.number(args.tagCount)})`
 };
 
@@ -126,6 +135,7 @@ var $fe04eda9b3e92668$exports = {};
 $fe04eda9b3e92668$exports = {
     "actions": `Toiminnot`,
     "hideButtonLabel": `Näytä vähemmän`,
+    "noTags": `Ei mitään`,
     "showAllButtonLabel": (args, formatter)=>`Näytä kaikki (${formatter.number(args.tagCount)})`
 };
 
@@ -134,6 +144,7 @@ var $8c0ca11f9a10e544$exports = {};
 $8c0ca11f9a10e544$exports = {
     "actions": `Actions`,
     "hideButtonLabel": `Afficher moins`,
+    "noTags": `Aucun`,
     "showAllButtonLabel": (args, formatter)=>`Tout afficher (${formatter.number(args.tagCount)})`
 };
 
@@ -142,6 +153,7 @@ var $5cf885b76293f7ea$exports = {};
 $5cf885b76293f7ea$exports = {
     "actions": `פעולות`,
     "hideButtonLabel": `הצג פחות`,
+    "noTags": `ללא`,
     "showAllButtonLabel": (args, formatter)=>`הצג הכל (${formatter.number(args.tagCount)})`
 };
 
@@ -150,6 +162,7 @@ var $26efb27e85fe3886$exports = {};
 $26efb27e85fe3886$exports = {
     "actions": `Radnje`,
     "hideButtonLabel": `Prikaži manje`,
+    "noTags": `Nema`,
     "showAllButtonLabel": (args, formatter)=>`Prikaži sve (${formatter.number(args.tagCount)})`
 };
 
@@ -158,6 +171,7 @@ var $5afbffe322be4f78$exports = {};
 $5afbffe322be4f78$exports = {
     "actions": `Műveletek`,
     "hideButtonLabel": `Mutass kevesebbet`,
+    "noTags": `Egyik sem`,
     "showAllButtonLabel": (args, formatter)=>`Az összes megjelenítése (${formatter.number(args.tagCount)})`
 };
 
@@ -166,6 +180,7 @@ var $e2e8477c50691c5a$exports = {};
 $e2e8477c50691c5a$exports = {
     "actions": `Azioni`,
     "hideButtonLabel": `Mostra meno`,
+    "noTags": `Nessuno`,
     "showAllButtonLabel": (args, formatter)=>`Mostra tutto (${formatter.number(args.tagCount)})`
 };
 
@@ -174,6 +189,7 @@ var $aa322e153c7fc6cf$exports = {};
 $aa322e153c7fc6cf$exports = {
     "actions": `アクション`,
     "hideButtonLabel": `表示を減らす`,
+    "noTags": `なし`,
     "showAllButtonLabel": (args, formatter)=>`すべての (${formatter.number(args.tagCount)}) を表示`
 };
 
@@ -182,6 +198,7 @@ var $ef5171b4e7fef8b6$exports = {};
 $ef5171b4e7fef8b6$exports = {
     "actions": `액션`,
     "hideButtonLabel": `간단히 표시`,
+    "noTags": `없음`,
     "showAllButtonLabel": (args, formatter)=>`모두 표시 (${formatter.number(args.tagCount)})`
 };
 
@@ -190,6 +207,7 @@ var $11cf3f21588c59d5$exports = {};
 $11cf3f21588c59d5$exports = {
     "actions": `Veiksmai`,
     "hideButtonLabel": `Rodyti mažiau`,
+    "noTags": `Nėra`,
     "showAllButtonLabel": (args, formatter)=>`Rodyti viską (${formatter.number(args.tagCount)})`
 };
 
@@ -198,6 +216,7 @@ var $7798af2d0360d513$exports = {};
 $7798af2d0360d513$exports = {
     "actions": `Darbības`,
     "hideButtonLabel": `Rādīt mazāk`,
+    "noTags": `Nav`,
     "showAllButtonLabel": (args, formatter)=>`Rādīt visu (${formatter.number(args.tagCount)})`
 };
 
@@ -206,6 +225,7 @@ var $36fbb928ae891fff$exports = {};
 $36fbb928ae891fff$exports = {
     "actions": `Handlinger`,
     "hideButtonLabel": `Vis mindre`,
+    "noTags": `Ingen`,
     "showAllButtonLabel": (args, formatter)=>`Vis alle (${formatter.number(args.tagCount)})`
 };
 
@@ -214,6 +234,7 @@ var $64f658e8416b1edc$exports = {};
 $64f658e8416b1edc$exports = {
     "actions": `Acties`,
     "hideButtonLabel": `Minder weergeven`,
+    "noTags": `Geen`,
     "showAllButtonLabel": (args, formatter)=>`Alles tonen (${formatter.number(args.tagCount)})`
 };
 
@@ -222,6 +243,7 @@ var $d83dc3596c86b9b1$exports = {};
 $d83dc3596c86b9b1$exports = {
     "actions": `Działania`,
     "hideButtonLabel": `Wyświetl mniej`,
+    "noTags": `Brak`,
     "showAllButtonLabel": (args, formatter)=>`Pokaż wszystko (${formatter.number(args.tagCount)})`
 };
 
@@ -230,6 +252,7 @@ var $f05393b8526809a5$exports = {};
 $f05393b8526809a5$exports = {
     "actions": `Ações`,
     "hideButtonLabel": `Mostrar menos`,
+    "noTags": `Nenhum`,
     "showAllButtonLabel": (args, formatter)=>`Mostrar tudo (${formatter.number(args.tagCount)})`
 };
 
@@ -238,6 +261,7 @@ var $d7b3c6e34da453ec$exports = {};
 $d7b3c6e34da453ec$exports = {
     "actions": `Ações`,
     "hideButtonLabel": `Mostrar menos`,
+    "noTags": `Nenhum`,
     "showAllButtonLabel": (args, formatter)=>`Mostrar tudo (${formatter.number(args.tagCount)})`
 };
 
@@ -246,6 +270,7 @@ var $671c8a587799a566$exports = {};
 $671c8a587799a566$exports = {
     "actions": `Acțiuni`,
     "hideButtonLabel": `Se afișează mai puțin`,
+    "noTags": `Niciuna`,
     "showAllButtonLabel": (args, formatter)=>`Se afișează tot (${formatter.number(args.tagCount)})`
 };
 
@@ -254,6 +279,7 @@ var $f7d5f2f6333669ae$exports = {};
 $f7d5f2f6333669ae$exports = {
     "actions": `Действия`,
     "hideButtonLabel": `Показать меньше`,
+    "noTags": `Нет`,
     "showAllButtonLabel": (args, formatter)=>`Показать все (${formatter.number(args.tagCount)})`
 };
 
@@ -262,6 +288,7 @@ var $6872c5a06d3d5bd6$exports = {};
 $6872c5a06d3d5bd6$exports = {
     "actions": `Akcie`,
     "hideButtonLabel": `Zobraziť menej`,
+    "noTags": `Žiadne`,
     "showAllButtonLabel": (args, formatter)=>`Zobraziť všetko (${formatter.number(args.tagCount)})`
 };
 
@@ -270,6 +297,7 @@ var $8d44aaec5d910562$exports = {};
 $8d44aaec5d910562$exports = {
     "actions": `Dejanja`,
     "hideButtonLabel": `Prikaži manj`,
+    "noTags": `Nič`,
     "showAllButtonLabel": (args, formatter)=>`Prikaž vse (${formatter.number(args.tagCount)})`
 };
 
@@ -278,6 +306,7 @@ var $48a1f90aac47b13f$exports = {};
 $48a1f90aac47b13f$exports = {
     "actions": `Radnje`,
     "hideButtonLabel": `Prikaži manje`,
+    "noTags": `Ne postoji`,
     "showAllButtonLabel": (args, formatter)=>`Prikaži sve (${formatter.number(args.tagCount)})`
 };
 
@@ -286,6 +315,7 @@ var $e67f8d08ca5a16ce$exports = {};
 $e67f8d08ca5a16ce$exports = {
     "actions": `Åtgärder`,
     "hideButtonLabel": `Visa mindre`,
+    "noTags": `Ingen`,
     "showAllButtonLabel": (args, formatter)=>`Visa alla (${formatter.number(args.tagCount)})`
 };
 
@@ -294,6 +324,7 @@ var $dfe98dff52c184ea$exports = {};
 $dfe98dff52c184ea$exports = {
     "actions": `Eylemler`,
     "hideButtonLabel": `Daha az göster`,
+    "noTags": `Hiçbiri`,
     "showAllButtonLabel": (args, formatter)=>`Tümünü göster (${formatter.number(args.tagCount)})`
 };
 
@@ -302,6 +333,7 @@ var $ba516e0f6c423a4a$exports = {};
 $ba516e0f6c423a4a$exports = {
     "actions": `Дії`,
     "hideButtonLabel": `Показувати менше`,
+    "noTags": `Немає`,
     "showAllButtonLabel": (args, formatter)=>`Показати всі (${formatter.number(args.tagCount)})`
 };
 
@@ -310,6 +342,7 @@ var $7c2f3cb525451680$exports = {};
 $7c2f3cb525451680$exports = {
     "actions": `操作`,
     "hideButtonLabel": `显示更少`,
+    "noTags": `无`,
     "showAllButtonLabel": (args, formatter)=>`全部显示 (${formatter.number(args.tagCount)})`
 };
 
@@ -318,6 +351,7 @@ var $00b7e0167640331e$exports = {};
 $00b7e0167640331e$exports = {
     "actions": `動作`,
     "hideButtonLabel": `顯示較少`,
+    "noTags": `無`,
     "showAllButtonLabel": (args, formatter)=>`顯示全部 (${formatter.number(args.tagCount)})`
 };
 
@@ -363,12 +397,14 @@ $d97f7dfcca827852$exports = {
 
 
 
+
 var $ed889f8f1f091fc8$exports = {};
 
 $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tag", () => $ed889f8f1f091fc8$export$6174bd1d20b4c022, (v) => $ed889f8f1f091fc8$export$6174bd1d20b4c022 = v);
 $parcel$export($ed889f8f1f091fc8$exports, "focus-ring", () => $ed889f8f1f091fc8$export$f39a09f249340e2a, (v) => $ed889f8f1f091fc8$export$f39a09f249340e2a = v);
 $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tags", () => $ed889f8f1f091fc8$export$eb7e80013a1212da, (v) => $ed889f8f1f091fc8$export$eb7e80013a1212da = v);
 $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tags-container", () => $ed889f8f1f091fc8$export$3300169c5d27fe96, (v) => $ed889f8f1f091fc8$export$3300169c5d27fe96 = v);
+$parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tags-container--empty", () => $ed889f8f1f091fc8$export$a5e59d283417e02b, (v) => $ed889f8f1f091fc8$export$a5e59d283417e02b = v);
 $parcel$export($ed889f8f1f091fc8$exports, "is-disabled", () => $ed889f8f1f091fc8$export$d35bc1e505d1ebbf, (v) => $ed889f8f1f091fc8$export$d35bc1e505d1ebbf = v);
 $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tag-removeButton", () => $ed889f8f1f091fc8$export$23a76b996f0a6c1, (v) => $ed889f8f1f091fc8$export$23a76b996f0a6c1 = v);
 $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tag-cell", () => $ed889f8f1f091fc8$export$9c4fd4d7faada408, (v) => $ed889f8f1f091fc8$export$9c4fd4d7faada408 = v);
@@ -380,12 +416,14 @@ $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tags-actions", () => $ed889f
 $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tags-actionButton", () => $ed889f8f1f091fc8$export$e6882f8db018e3bd, (v) => $ed889f8f1f091fc8$export$e6882f8db018e3bd = v);
 $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tags-fieldWrapper", () => $ed889f8f1f091fc8$export$c9b7ca327d69b2b5, (v) => $ed889f8f1f091fc8$export$c9b7ca327d69b2b5 = v);
 $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tags-fieldWrapper--positionSide", () => $ed889f8f1f091fc8$export$a7c11d4acc244e09, (v) => $ed889f8f1f091fc8$export$a7c11d4acc244e09 = v);
+$parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tags-empty-state", () => $ed889f8f1f091fc8$export$cd48f925394bb16, (v) => $ed889f8f1f091fc8$export$cd48f925394bb16 = v);
 $parcel$export($ed889f8f1f091fc8$exports, "is-hovered", () => $ed889f8f1f091fc8$export$b8813cd5d7824ce7, (v) => $ed889f8f1f091fc8$export$b8813cd5d7824ce7 = v);
 $parcel$export($ed889f8f1f091fc8$exports, "is-focused", () => $ed889f8f1f091fc8$export$e7dc768d35940237, (v) => $ed889f8f1f091fc8$export$e7dc768d35940237 = v);
 var $ed889f8f1f091fc8$export$6174bd1d20b4c022;
 var $ed889f8f1f091fc8$export$f39a09f249340e2a;
 var $ed889f8f1f091fc8$export$eb7e80013a1212da;
 var $ed889f8f1f091fc8$export$3300169c5d27fe96;
+var $ed889f8f1f091fc8$export$a5e59d283417e02b;
 var $ed889f8f1f091fc8$export$d35bc1e505d1ebbf;
 var $ed889f8f1f091fc8$export$23a76b996f0a6c1;
 var $ed889f8f1f091fc8$export$9c4fd4d7faada408;
@@ -397,12 +435,14 @@ var $ed889f8f1f091fc8$export$8afaa02110915bbb;
 var $ed889f8f1f091fc8$export$e6882f8db018e3bd;
 var $ed889f8f1f091fc8$export$c9b7ca327d69b2b5;
 var $ed889f8f1f091fc8$export$a7c11d4acc244e09;
+var $ed889f8f1f091fc8$export$cd48f925394bb16;
 var $ed889f8f1f091fc8$export$b8813cd5d7824ce7;
 var $ed889f8f1f091fc8$export$e7dc768d35940237;
 $ed889f8f1f091fc8$export$6174bd1d20b4c022 = "spectrum-Tag_8407eb";
 $ed889f8f1f091fc8$export$f39a09f249340e2a = "focus-ring_8407eb";
 $ed889f8f1f091fc8$export$eb7e80013a1212da = "spectrum-Tags_8407eb";
 $ed889f8f1f091fc8$export$3300169c5d27fe96 = "spectrum-Tags-container_8407eb";
+$ed889f8f1f091fc8$export$a5e59d283417e02b = "spectrum-Tags-container--empty_8407eb";
 $ed889f8f1f091fc8$export$d35bc1e505d1ebbf = "is-disabled_8407eb";
 $ed889f8f1f091fc8$export$23a76b996f0a6c1 = "spectrum-Tag-removeButton_8407eb";
 $ed889f8f1f091fc8$export$9c4fd4d7faada408 = "spectrum-Tag-cell_8407eb";
@@ -414,6 +454,7 @@ $ed889f8f1f091fc8$export$8afaa02110915bbb = "spectrum-Tags-actions_8407eb";
 $ed889f8f1f091fc8$export$e6882f8db018e3bd = "spectrum-Tags-actionButton_8407eb";
 $ed889f8f1f091fc8$export$c9b7ca327d69b2b5 = "spectrum-Tags-fieldWrapper_8407eb";
 $ed889f8f1f091fc8$export$a7c11d4acc244e09 = "spectrum-Tags-fieldWrapper--positionSide_8407eb";
+$ed889f8f1f091fc8$export$cd48f925394bb16 = "spectrum-Tags-empty-state_8407eb";
 $ed889f8f1f091fc8$export$b8813cd5d7824ce7 = "is-hovered_8407eb";
 $ed889f8f1f091fc8$export$e7dc768d35940237 = "is-focused_8407eb";
 
@@ -438,7 +479,7 @@ $ed889f8f1f091fc8$export$e7dc768d35940237 = "is-focused_8407eb";
 
 
 function $dd2c5d00108c1840$export$3288d34c523a1192(props) {
-    const { allowsRemoving: allowsRemoving , item: item , state: state , onRemove: onRemove , ...otherProps } = props;
+    const { item: item , state: state , ...otherProps } = props;
     // @ts-ignore
     let { styleProps: styleProps  } = (0, $dTV3V$reactspectrumutils.useStyleProps)(otherProps);
     let { hoverProps: hoverProps , isHovered: isHovered  } = (0, $dTV3V$reactariainteractions.useHover)({});
@@ -446,11 +487,9 @@ function $dd2c5d00108c1840$export$3288d34c523a1192(props) {
         within: true
     });
     let ref = (0, $dTV3V$react.useRef)();
-    let { removeButtonProps: removeButtonProps , labelProps: labelProps , gridCellProps: gridCellProps , rowProps: rowProps  } = (0, $dTV3V$reactariatag.useTag)({
+    let { removeButtonProps: removeButtonProps , gridCellProps: gridCellProps , rowProps: rowProps , allowsRemoving: allowsRemoving  } = (0, $dTV3V$reactariatag.useTag)({
         ...props,
-        allowsRemoving: allowsRemoving,
-        item: item,
-        onRemove: onRemove
+        item: item
     }, state, ref);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement("div", {
         ...(0, $dTV3V$reactariautils.mergeProps)(rowProps, hoverProps, focusProps),
@@ -471,8 +510,7 @@ function $dd2c5d00108c1840$export$3288d34c523a1192(props) {
                 size: "XS"
             },
             text: {
-                UNSAFE_className: (0, $dTV3V$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports))), "spectrum-Tag-content"),
-                ...labelProps
+                UNSAFE_className: (0, $dTV3V$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports))), "spectrum-Tag-content")
             },
             avatar: {
                 UNSAFE_className: (0, $dTV3V$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports))), "spectrum-Tag-avatar"),
@@ -494,32 +532,50 @@ function $dd2c5d00108c1840$var$TagRemoveButton(props) {
 
 
 
-
+const $e7b72d8874e98cd4$var$TAG_STYLES = {
+    medium: {
+        height: 24,
+        margin: 4
+    },
+    large: {
+        height: 30,
+        margin: 5
+    }
+};
 function $e7b72d8874e98cd4$var$TagGroup(props, ref) {
     props = (0, $dTV3V$reactspectrumprovider.useProviderProps)(props);
     props = (0, $dTV3V$reactspectrumform.useFormProps)(props);
-    let { allowsRemoving: allowsRemoving , onRemove: onRemove , maxRows: maxRows , children: children , actionLabel: actionLabel , onAction: onAction , labelPosition: labelPosition  } = props;
+    let { maxRows: maxRows , children: children , actionLabel: actionLabel , onAction: onAction , labelPosition: labelPosition , renderEmptyState: renderEmptyState = ()=>stringFormatter.format("noTags")  } = props;
     let domRef = (0, $dTV3V$reactspectrumutils.useDOMRef)(ref);
     let containerRef = (0, $dTV3V$react.useRef)(null);
     let tagsRef = (0, $dTV3V$react.useRef)(null);
     let { direction: direction  } = (0, $dTV3V$reactariai18n.useLocale)();
+    let { scale: scale  } = (0, $dTV3V$reactspectrumprovider.useProvider)();
     let stringFormatter = (0, $dTV3V$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($d97f7dfcca827852$exports))));
     let [isCollapsed, setIsCollapsed] = (0, $dTV3V$react.useState)(maxRows != null);
-    let state = (0, $dTV3V$reactstatelytag.useTagGroupState)(props);
+    let state = (0, $dTV3V$reactstatelylist.useListState)(props);
     let [tagState, setTagState] = (0, $dTV3V$reactariautils.useValueEffect)({
         visibleTagCount: state.collection.size,
-        showCollapseButton: false,
-        maxHeight: undefined
+        showCollapseButton: false
     });
-    let keyboardDelegate = (0, $dTV3V$react.useMemo)(()=>isCollapsed ? new (0, $dTV3V$reactariatag.TagKeyboardDelegate)(new (0, $dTV3V$reactstatelylist.ListCollection)([
+    let keyboardDelegate = (0, $dTV3V$react.useMemo)(()=>{
+        let collection = isCollapsed ? new (0, $dTV3V$reactstatelylist.ListCollection)([
             ...state.collection
-        ].slice(0, tagState.visibleTagCount)), direction) : new (0, $dTV3V$reactariatag.TagKeyboardDelegate)(new (0, $dTV3V$reactstatelylist.ListCollection)([
+        ].slice(0, tagState.visibleTagCount)) : new (0, $dTV3V$reactstatelylist.ListCollection)([
             ...state.collection
-        ]), direction), [
+        ]);
+        return new (0, $dTV3V$reactariaselection.ListKeyboardDelegate)({
+            collection: collection,
+            ref: domRef,
+            direction: direction,
+            orientation: "horizontal"
+        });
+    }, [
         direction,
         isCollapsed,
         state.collection,
-        tagState.visibleTagCount
+        tagState.visibleTagCount,
+        domRef
     ]);
     // Remove onAction from props so it doesn't make it into useGridList.
     delete props.onAction;
@@ -528,25 +584,26 @@ function $e7b72d8874e98cd4$var$TagGroup(props, ref) {
         keyboardDelegate: keyboardDelegate
     }, state, tagsRef);
     let actionsId = (0, $dTV3V$reactariautils.useId)();
+    let actionsRef = (0, $dTV3V$react.useRef)(null);
     let updateVisibleTagCount = (0, $dTV3V$react.useCallback)(()=>{
         if (maxRows > 0) {
             let computeVisibleTagCount = ()=>{
-                var _tags_;
                 // Refs can be null at runtime.
                 let currContainerRef = containerRef.current;
                 let currTagsRef = tagsRef.current;
-                if (!currContainerRef || !currTagsRef) return;
+                let currActionsRef = actionsRef.current;
+                if (!currContainerRef || !currTagsRef || state.collection.size === 0) return {
+                    visibleTagCount: 0,
+                    showCollapseButton: false
+                };
+                // Count rows and show tags until we hit the maxRows.
                 let tags = [
                     ...currTagsRef.children
                 ];
-                let buttons = [
-                    ...currContainerRef.parentElement.querySelectorAll("button")
-                ];
                 let currY = -Infinity;
                 let rowCount = 0;
                 let index = 0;
                 let tagWidths = [];
-                // Count rows and show tags until we hit the maxRows.
                 for (let tag of tags){
                     let { width: width , y: y  } = tag.getBoundingClientRect();
                     if (y !== currY) {
@@ -558,31 +615,33 @@ function $e7b72d8874e98cd4$var$TagGroup(props, ref) {
                     index++;
                 }
                 // Remove tags until there is space for the collapse button and action button (if present) on the last row.
-                let buttonsWidth = buttons.reduce((acc, curr)=>acc += curr.getBoundingClientRect().width, 0);
-                buttonsWidth += parseInt(window.getComputedStyle(buttons[buttons.length - 1]).marginRight, 10) * 2;
-                let end = direction === "ltr" ? "right" : "left";
-                let containerEnd = currContainerRef.parentElement.getBoundingClientRect()[end];
-                let lastTagEnd = (_tags_ = tags[index - 1]) === null || _tags_ === void 0 ? void 0 : _tags_.getBoundingClientRect()[end];
-                lastTagEnd += parseInt(window.getComputedStyle(tags[index - 1]).marginRight, 10);
-                let availableWidth = containerEnd - lastTagEnd;
-                while(availableWidth < buttonsWidth && index < state.collection.size && index > 0){
-                    availableWidth += tagWidths.pop();
-                    index--;
+                let buttons = [
+                    ...currActionsRef.children
+                ];
+                if (buttons.length > 0 && rowCount >= maxRows) {
+                    var _tags_;
+                    let buttonsWidth = buttons.reduce((acc, curr)=>acc += curr.getBoundingClientRect().width, 0);
+                    buttonsWidth += $e7b72d8874e98cd4$var$TAG_STYLES[scale].margin * 2 * buttons.length;
+                    let end = direction === "ltr" ? "right" : "left";
+                    let containerEnd = currContainerRef.parentElement.getBoundingClientRect()[end];
+                    let lastTagEnd = (_tags_ = tags[index - 1]) === null || _tags_ === void 0 ? void 0 : _tags_.getBoundingClientRect()[end];
+                    lastTagEnd += $e7b72d8874e98cd4$var$TAG_STYLES[scale].margin;
+                    let availableWidth = containerEnd - lastTagEnd;
+                    while(availableWidth < buttonsWidth && index > 0){
+                        availableWidth += tagWidths.pop();
+                        index--;
+                    }
                 }
-                let tagStyle = window.getComputedStyle(tags[0]);
-                let maxHeight = (parseInt(tagStyle.height, 10) + parseInt(tagStyle.marginTop, 10) * 2) * maxRows;
                 return {
-                    visibleTagCount: index,
-                    showCollapseButton: index < state.collection.size,
-                    maxHeight: maxHeight
+                    visibleTagCount: Math.max(index, 1),
+                    showCollapseButton: index < state.collection.size
                 };
             };
             setTagState(function*() {
                 // Update to show all items.
                 yield {
                     visibleTagCount: state.collection.size,
-                    showCollapseButton: true,
-                    maxHeight: undefined
+                    showCollapseButton: true
                 };
                 // Measure, and update to show the items until maxRows is reached.
                 yield computeVisibleTagCount();
@@ -592,6 +651,7 @@ function $e7b72d8874e98cd4$var$TagGroup(props, ref) {
         maxRows,
         setTagState,
         direction,
+        scale,
         state.collection.size
     ]);
     (0, $dTV3V$reactariautils.useResizeObserver)({
@@ -608,16 +668,33 @@ function $e7b72d8874e98cd4$var$TagGroup(props, ref) {
         (_document_fonts = document.fonts) === null || _document_fonts === void 0 ? void 0 : _document_fonts.ready.then(()=>updateVisibleTagCount());
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    let visibleTags = [
-        ...state.collection
-    ];
-    if (maxRows != null && isCollapsed) visibleTags = visibleTags.slice(0, tagState.visibleTagCount);
+    let visibleTags = (0, $dTV3V$react.useMemo)(()=>[
+            ...state.collection
+        ].slice(0, isCollapsed ? tagState.visibleTagCount : state.collection.size), [
+        isCollapsed,
+        state.collection,
+        tagState.visibleTagCount
+    ]);
     let handlePressCollapse = ()=>{
         // Prevents button from losing focus if focusedKey got collapsed.
         state.selectionManager.setFocusedKey(null);
         setIsCollapsed((prevCollapsed)=>!prevCollapsed);
     };
     let showActions = tagState.showCollapseButton || actionLabel && onAction;
+    let isEmpty = state.collection.size === 0;
+    let containerStyle = (0, $dTV3V$react.useMemo)(()=>{
+        if (maxRows == null || !isCollapsed || isEmpty) return undefined;
+        let maxHeight = ($e7b72d8874e98cd4$var$TAG_STYLES[scale].height + $e7b72d8874e98cd4$var$TAG_STYLES[scale].margin * 2) * maxRows;
+        return {
+            maxHeight: maxHeight,
+            overflow: "hidden"
+        };
+    }, [
+        isCollapsed,
+        maxRows,
+        isEmpty,
+        scale
+    ]);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement((0, $dTV3V$reactariafocus.FocusScope), null, /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement((0, $dTV3V$reactspectrumlabel.Field), {
         ...props,
         labelProps: labelProps,
@@ -626,16 +703,17 @@ function $e7b72d8874e98cd4$var$TagGroup(props, ref) {
         showErrorIcon: true,
         ref: domRef,
         elementType: "span",
-        UNSAFE_className: (0, $dTV3V$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports))), "spectrum-Tags-fieldWrapper", {
+        wrapperClassName: (0, $dTV3V$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports))), "spectrum-Tags-fieldWrapper", {
             "spectrum-Tags-fieldWrapper--positionSide": labelPosition === "side"
         })
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement("div", {
-        style: maxRows != null && tagState.showCollapseButton && isCollapsed ? {
-            maxHeight: tagState.maxHeight,
-            overflow: "hidden"
-        } : undefined,
         ref: containerRef,
-        className: (0, $dTV3V$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports))), "spectrum-Tags-container")
+        style: containerStyle,
+        className: (0, $dTV3V$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports))), "spectrum-Tags-container", {
+            "spectrum-Tags-container--empty": isEmpty
+        })
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement((0, $dTV3V$reactariafocus.FocusRing), {
+        focusRingClass: (0, $dTV3V$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports))), "focus-ring")
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement("div", {
         ref: tagsRef,
         ...gridProps,
@@ -644,13 +722,14 @@ function $e7b72d8874e98cd4$var$TagGroup(props, ref) {
             ...item.props,
             key: item.key,
             item: item,
-            state: state,
-            allowsRemoving: allowsRemoving,
-            onRemove: onRemove
-        }, item.rendered))), showActions && /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement((0, $dTV3V$reactspectrumprovider.Provider), {
+            state: state
+        }, item.rendered)), isEmpty && /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement("div", {
+        className: (0, $dTV3V$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports))), "spectrum-Tags-empty-state")
+    }, renderEmptyState()))), showActions && !isEmpty && /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement((0, $dTV3V$reactspectrumprovider.Provider), {
         isDisabled: false
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement("div", {
         role: "group",
+        ref: actionsRef,
         id: actionsId,
         "aria-label": stringFormatter.format("actions"),
         "aria-labelledby": `${gridProps.id} ${actionsId}`,