@react-spectrum/tag 3.0.0-nightly.2182 → 3.0.0-nightly.2196

package/dist/import.mjs

@@ -6,7 +6,7 @@ import {useDOMRef as $fUaQ2$useDOMRef, classNames as $fUaQ2$classNames, useStyle
 import {Field as $fUaQ2$Field} from "@react-spectrum/label";
 import {FocusScope as $fUaQ2$FocusScope, FocusRing as $fUaQ2$FocusRing, useFocusRing as $fUaQ2$useFocusRing} from "@react-aria/focus";
 import {useListState as $fUaQ2$useListState, ListCollection as $fUaQ2$ListCollection} from "@react-stately/list";
-import {useProviderProps as $fUaQ2$useProviderProps, Provider as $fUaQ2$Provider} from "@react-spectrum/provider";
+import {useProviderProps as $fUaQ2$useProviderProps, useProvider as $fUaQ2$useProvider, Provider as $fUaQ2$Provider} from "@react-spectrum/provider";
 import $fUaQ2$react, {useRef as $fUaQ2$useRef, useState as $fUaQ2$useState, useMemo as $fUaQ2$useMemo, useCallback as $fUaQ2$useCallback, useEffect as $fUaQ2$useEffect} from "react";
 import {useFormProps as $fUaQ2$useFormProps} from "@react-spectrum/form";
 import {useValueEffect as $fUaQ2$useValueEffect, useId as $fUaQ2$useId, useResizeObserver as $fUaQ2$useResizeObserver, useLayoutEffect as $fUaQ2$useLayoutEffect, mergeProps as $fUaQ2$mergeProps} from "@react-aria/utils";
@@ -50,8 +50,8 @@ var $4f97095b36611c9c$exports = {};
 $4f97095b36611c9c$exports = {
     "actions": `الإجراءات`,
     "hideButtonLabel": `إظهار أقل`,
-    "showAllButtonLabel": (args, formatter)=>`عرض الكل (${formatter.number(args.tagCount)})`,
-    "noTags": `None`
+    "noTags": `بدون`,
+    "showAllButtonLabel": (args, formatter)=>`عرض الكل (${formatter.number(args.tagCount)})`
 };
 
 
@@ -59,6 +59,7 @@ var $d1606ced019b0a9e$exports = {};
 $d1606ced019b0a9e$exports = {
     "actions": `Действия`,
     "hideButtonLabel": `Показване на по-малко`,
+    "noTags": `Нито един`,
     "showAllButtonLabel": (args, formatter)=>`Показване на всички (${formatter.number(args.tagCount)})`
 };
 
@@ -67,6 +68,7 @@ var $01e300f7d0078144$exports = {};
 $01e300f7d0078144$exports = {
     "actions": `Akce`,
     "hideButtonLabel": `Zobrazit méně`,
+    "noTags": `Žádný`,
     "showAllButtonLabel": (args, formatter)=>`Zobrazit vše (${formatter.number(args.tagCount)})`
 };
 
@@ -75,6 +77,7 @@ var $f3862a5e5adf53a4$exports = {};
 $f3862a5e5adf53a4$exports = {
     "actions": `Handlinger`,
     "hideButtonLabel": `Vis mindre`,
+    "noTags": `Ingen`,
     "showAllButtonLabel": (args, formatter)=>`Vis alle (${formatter.number(args.tagCount)})`
 };
 
@@ -83,6 +86,7 @@ var $74c0b6e11258b497$exports = {};
 $74c0b6e11258b497$exports = {
     "actions": `Aktionen`,
     "hideButtonLabel": `Weniger zeigen`,
+    "noTags": `Keine`,
     "showAllButtonLabel": (args, formatter)=>`Alle anzeigen (${formatter.number(args.tagCount)})`
 };
 
@@ -91,6 +95,7 @@ var $54fc4e3090259431$exports = {};
 $54fc4e3090259431$exports = {
     "actions": `Ενέργειες`,
     "hideButtonLabel": `Εμφάνιση λιγότερων`,
+    "noTags": `Κανένα`,
     "showAllButtonLabel": (args, formatter)=>`Εμφάνιση όλων (${formatter.number(args.tagCount)})`
 };
 
@@ -108,6 +113,7 @@ var $b15ad3cf4b213b8e$exports = {};
 $b15ad3cf4b213b8e$exports = {
     "actions": `Acciones`,
     "hideButtonLabel": `Mostrar menos`,
+    "noTags": `Ninguno`,
     "showAllButtonLabel": (args, formatter)=>`Mostrar todo (${formatter.number(args.tagCount)})`
 };
 
@@ -116,6 +122,7 @@ var $36cfda096c3db653$exports = {};
 $36cfda096c3db653$exports = {
     "actions": `Toimingud`,
     "hideButtonLabel": `Kuva vähem`,
+    "noTags": `Puudub`,
     "showAllButtonLabel": (args, formatter)=>`Kuva kõik (${formatter.number(args.tagCount)})`
 };
 
@@ -124,6 +131,7 @@ var $1a42e74299cab64d$exports = {};
 $1a42e74299cab64d$exports = {
     "actions": `Toiminnot`,
     "hideButtonLabel": `Näytä vähemmän`,
+    "noTags": `Ei mitään`,
     "showAllButtonLabel": (args, formatter)=>`Näytä kaikki (${formatter.number(args.tagCount)})`
 };
 
@@ -132,6 +140,7 @@ var $dd8d3f41a5bfc373$exports = {};
 $dd8d3f41a5bfc373$exports = {
     "actions": `Actions`,
     "hideButtonLabel": `Afficher moins`,
+    "noTags": `Aucun`,
     "showAllButtonLabel": (args, formatter)=>`Tout afficher (${formatter.number(args.tagCount)})`
 };
 
@@ -140,6 +149,7 @@ var $35d68da324c3ed3e$exports = {};
 $35d68da324c3ed3e$exports = {
     "actions": `פעולות`,
     "hideButtonLabel": `הצג פחות`,
+    "noTags": `ללא`,
     "showAllButtonLabel": (args, formatter)=>`הצג הכל (${formatter.number(args.tagCount)})`
 };
 
@@ -148,6 +158,7 @@ var $92746ce1284cd29f$exports = {};
 $92746ce1284cd29f$exports = {
     "actions": `Radnje`,
     "hideButtonLabel": `Prikaži manje`,
+    "noTags": `Nema`,
     "showAllButtonLabel": (args, formatter)=>`Prikaži sve (${formatter.number(args.tagCount)})`
 };
 
@@ -156,6 +167,7 @@ var $570956f4f59f34b9$exports = {};
 $570956f4f59f34b9$exports = {
     "actions": `Műveletek`,
     "hideButtonLabel": `Mutass kevesebbet`,
+    "noTags": `Egyik sem`,
     "showAllButtonLabel": (args, formatter)=>`Az összes megjelenítése (${formatter.number(args.tagCount)})`
 };
 
@@ -164,6 +176,7 @@ var $f680d16d6f0d92d8$exports = {};
 $f680d16d6f0d92d8$exports = {
     "actions": `Azioni`,
     "hideButtonLabel": `Mostra meno`,
+    "noTags": `Nessuno`,
     "showAllButtonLabel": (args, formatter)=>`Mostra tutto (${formatter.number(args.tagCount)})`
 };
 
@@ -172,6 +185,7 @@ var $d28c56f33dc08452$exports = {};
 $d28c56f33dc08452$exports = {
     "actions": `アクション`,
     "hideButtonLabel": `表示を減らす`,
+    "noTags": `なし`,
     "showAllButtonLabel": (args, formatter)=>`すべての (${formatter.number(args.tagCount)}) を表示`
 };
 
@@ -180,6 +194,7 @@ var $fc6f973338bd2d9c$exports = {};
 $fc6f973338bd2d9c$exports = {
     "actions": `액션`,
     "hideButtonLabel": `간단히 표시`,
+    "noTags": `없음`,
     "showAllButtonLabel": (args, formatter)=>`모두 표시 (${formatter.number(args.tagCount)})`
 };
 
@@ -188,6 +203,7 @@ var $8664f3f6a18cfaa6$exports = {};
 $8664f3f6a18cfaa6$exports = {
     "actions": `Veiksmai`,
     "hideButtonLabel": `Rodyti mažiau`,
+    "noTags": `Nėra`,
     "showAllButtonLabel": (args, formatter)=>`Rodyti viską (${formatter.number(args.tagCount)})`
 };
 
@@ -196,6 +212,7 @@ var $bd6e0fb18b482534$exports = {};
 $bd6e0fb18b482534$exports = {
     "actions": `Darbības`,
     "hideButtonLabel": `Rādīt mazāk`,
+    "noTags": `Nav`,
     "showAllButtonLabel": (args, formatter)=>`Rādīt visu (${formatter.number(args.tagCount)})`
 };
 
@@ -204,6 +221,7 @@ var $3df66303c61fb25b$exports = {};
 $3df66303c61fb25b$exports = {
     "actions": `Handlinger`,
     "hideButtonLabel": `Vis mindre`,
+    "noTags": `Ingen`,
     "showAllButtonLabel": (args, formatter)=>`Vis alle (${formatter.number(args.tagCount)})`
 };
 
@@ -212,6 +230,7 @@ var $0f533b61cdf70176$exports = {};
 $0f533b61cdf70176$exports = {
     "actions": `Acties`,
     "hideButtonLabel": `Minder weergeven`,
+    "noTags": `Geen`,
     "showAllButtonLabel": (args, formatter)=>`Alles tonen (${formatter.number(args.tagCount)})`
 };
 
@@ -220,6 +239,7 @@ var $03a6cd8f61b18787$exports = {};
 $03a6cd8f61b18787$exports = {
     "actions": `Działania`,
     "hideButtonLabel": `Wyświetl mniej`,
+    "noTags": `Brak`,
     "showAllButtonLabel": (args, formatter)=>`Pokaż wszystko (${formatter.number(args.tagCount)})`
 };
 
@@ -228,6 +248,7 @@ var $c726a9d931f60c66$exports = {};
 $c726a9d931f60c66$exports = {
     "actions": `Ações`,
     "hideButtonLabel": `Mostrar menos`,
+    "noTags": `Nenhum`,
     "showAllButtonLabel": (args, formatter)=>`Mostrar tudo (${formatter.number(args.tagCount)})`
 };
 
@@ -236,6 +257,7 @@ var $ae9982f17f7235eb$exports = {};
 $ae9982f17f7235eb$exports = {
     "actions": `Ações`,
     "hideButtonLabel": `Mostrar menos`,
+    "noTags": `Nenhum`,
     "showAllButtonLabel": (args, formatter)=>`Mostrar tudo (${formatter.number(args.tagCount)})`
 };
 
@@ -244,6 +266,7 @@ var $c756723b814c63fa$exports = {};
 $c756723b814c63fa$exports = {
     "actions": `Acțiuni`,
     "hideButtonLabel": `Se afișează mai puțin`,
+    "noTags": `Niciuna`,
     "showAllButtonLabel": (args, formatter)=>`Se afișează tot (${formatter.number(args.tagCount)})`
 };
 
@@ -252,6 +275,7 @@ var $1601284ef6ec0730$exports = {};
 $1601284ef6ec0730$exports = {
     "actions": `Действия`,
     "hideButtonLabel": `Показать меньше`,
+    "noTags": `Нет`,
     "showAllButtonLabel": (args, formatter)=>`Показать все (${formatter.number(args.tagCount)})`
 };
 
@@ -260,6 +284,7 @@ var $0388aac8e3bc5b59$exports = {};
 $0388aac8e3bc5b59$exports = {
     "actions": `Akcie`,
     "hideButtonLabel": `Zobraziť menej`,
+    "noTags": `Žiadne`,
     "showAllButtonLabel": (args, formatter)=>`Zobraziť všetko (${formatter.number(args.tagCount)})`
 };
 
@@ -268,6 +293,7 @@ var $247d9c4a71da6b08$exports = {};
 $247d9c4a71da6b08$exports = {
     "actions": `Dejanja`,
     "hideButtonLabel": `Prikaži manj`,
+    "noTags": `Nič`,
     "showAllButtonLabel": (args, formatter)=>`Prikaž vse (${formatter.number(args.tagCount)})`
 };
 
@@ -276,6 +302,7 @@ var $91424dbafdc02f68$exports = {};
 $91424dbafdc02f68$exports = {
     "actions": `Radnje`,
     "hideButtonLabel": `Prikaži manje`,
+    "noTags": `Ne postoji`,
     "showAllButtonLabel": (args, formatter)=>`Prikaži sve (${formatter.number(args.tagCount)})`
 };
 
@@ -284,6 +311,7 @@ var $23c23096b6c1b0fa$exports = {};
 $23c23096b6c1b0fa$exports = {
     "actions": `Åtgärder`,
     "hideButtonLabel": `Visa mindre`,
+    "noTags": `Ingen`,
     "showAllButtonLabel": (args, formatter)=>`Visa alla (${formatter.number(args.tagCount)})`
 };
 
@@ -292,6 +320,7 @@ var $d82875ae28963e58$exports = {};
 $d82875ae28963e58$exports = {
     "actions": `Eylemler`,
     "hideButtonLabel": `Daha az göster`,
+    "noTags": `Hiçbiri`,
     "showAllButtonLabel": (args, formatter)=>`Tümünü göster (${formatter.number(args.tagCount)})`
 };
 
@@ -300,6 +329,7 @@ var $1dd153688f5574fc$exports = {};
 $1dd153688f5574fc$exports = {
     "actions": `Дії`,
     "hideButtonLabel": `Показувати менше`,
+    "noTags": `Немає`,
     "showAllButtonLabel": (args, formatter)=>`Показати всі (${formatter.number(args.tagCount)})`
 };
 
@@ -308,6 +338,7 @@ var $6427307c9596258c$exports = {};
 $6427307c9596258c$exports = {
     "actions": `操作`,
     "hideButtonLabel": `显示更少`,
+    "noTags": `无`,
     "showAllButtonLabel": (args, formatter)=>`全部显示 (${formatter.number(args.tagCount)})`
 };
 
@@ -316,6 +347,7 @@ var $18b85da2aafaaf3e$exports = {};
 $18b85da2aafaaf3e$exports = {
     "actions": `動作`,
     "hideButtonLabel": `顯示較少`,
+    "noTags": `無`,
     "showAllButtonLabel": (args, formatter)=>`顯示全部 (${formatter.number(args.tagCount)})`
 };
 
@@ -498,6 +530,16 @@ function $b5f5ee35d3b6b95c$var$TagRemoveButton(props) {
 
 
 
+const $880d112c7a588209$var$TAG_STYLES = {
+    medium: {
+        height: 24,
+        margin: 4
+    },
+    large: {
+        height: 30,
+        margin: 5
+    }
+};
 function $880d112c7a588209$var$TagGroup(props, ref) {
     props = (0, $fUaQ2$useProviderProps)(props);
     props = (0, $fUaQ2$useFormProps)(props);
@@ -506,13 +548,13 @@ function $880d112c7a588209$var$TagGroup(props, ref) {
     let containerRef = (0, $fUaQ2$useRef)(null);
     let tagsRef = (0, $fUaQ2$useRef)(null);
     let { direction: direction  } = (0, $fUaQ2$useLocale)();
+    let { scale: scale  } = (0, $fUaQ2$useProvider)();
     let stringFormatter = (0, $fUaQ2$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($70cc9ce0ced2eb4a$exports))));
     let [isCollapsed, setIsCollapsed] = (0, $fUaQ2$useState)(maxRows != null);
     let state = (0, $fUaQ2$useListState)(props);
     let [tagState, setTagState] = (0, $fUaQ2$useValueEffect)({
         visibleTagCount: state.collection.size,
-        showCollapseButton: false,
-        maxHeight: undefined
+        showCollapseButton: false
     });
     let keyboardDelegate = (0, $fUaQ2$useMemo)(()=>isCollapsed ? new (0, $fUaQ2$TagKeyboardDelegate)(new (0, $fUaQ2$ListCollection)([
             ...state.collection
@@ -531,30 +573,26 @@ function $880d112c7a588209$var$TagGroup(props, ref) {
         keyboardDelegate: keyboardDelegate
     }, state, tagsRef);
     let actionsId = (0, $fUaQ2$useId)();
+    let actionsRef = (0, $fUaQ2$useRef)(null);
     let updateVisibleTagCount = (0, $fUaQ2$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")
-                ];
-                if (tags.length === 0 || buttons.length === 0) return {
-                    visibleTagCount: 0,
-                    showCollapseButton: false,
-                    maxHeight: undefined
-                };
                 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) {
@@ -566,31 +604,33 @@ function $880d112c7a588209$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 += $880d112c7a588209$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 += $880d112c7a588209$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();
@@ -600,6 +640,7 @@ function $880d112c7a588209$var$TagGroup(props, ref) {
         maxRows,
         setTagState,
         direction,
+        scale,
         state.collection.size
     ]);
     (0, $fUaQ2$useResizeObserver)({
@@ -616,10 +657,13 @@ function $880d112c7a588209$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, $fUaQ2$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);
@@ -627,6 +671,18 @@ function $880d112c7a588209$var$TagGroup(props, ref) {
     };
     let showActions = tagState.showCollapseButton || actionLabel && onAction;
     let isEmpty = state.collection.size === 0;
+    let containerStyle = (0, $fUaQ2$useMemo)(()=>{
+        if (maxRows == null || !isCollapsed) return undefined;
+        let maxHeight = ($880d112c7a588209$var$TAG_STYLES[scale].height + $880d112c7a588209$var$TAG_STYLES[scale].margin * 2) * maxRows;
+        return {
+            maxHeight: maxHeight,
+            overflow: "hidden"
+        };
+    }, [
+        isCollapsed,
+        maxRows,
+        scale
+    ]);
     return /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$FocusScope), null, /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$Field), {
         ...props,
         labelProps: labelProps,
@@ -639,11 +695,8 @@ function $880d112c7a588209$var$TagGroup(props, ref) {
             "spectrum-Tags-fieldWrapper--positionSide": labelPosition === "side"
         })
     }, /*#__PURE__*/ (0, $fUaQ2$react).createElement("div", {
-        style: maxRows != null && tagState.showCollapseButton && isCollapsed ? {
-            maxHeight: tagState.maxHeight,
-            overflow: "hidden"
-        } : undefined,
         ref: containerRef,
+        style: containerStyle,
         className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tags-container", {
             "spectrum-Tags-container--empty": isEmpty
         })
@@ -666,6 +719,7 @@ function $880d112c7a588209$var$TagGroup(props, ref) {
         isDisabled: false
     }, /*#__PURE__*/ (0, $fUaQ2$react).createElement("div", {
         role: "group",
+        ref: actionsRef,
         id: actionsId,
         "aria-label": stringFormatter.format("actions"),
         "aria-labelledby": `${gridProps.id} ${actionsId}`,