@react-spectrum/s2 0.2.1-nightly.4980 → 0.3.0

package/dist/TagGroup.cjs

@@ -1,4 +1,5 @@
 require("./TagGroup.css");
+var $6e265ff388155b91$exports = require("./ActionButton.cjs");
 var $7e7cdbd2b8ae2467$exports = require("../icons/AlertTriangle.cjs");
 var $38071d9ce246d4cf$exports = require("./Avatar.cjs");
 var $e991cbcdf82ced71$exports = require("./CenterBaseline.cjs");
@@ -7,17 +8,28 @@ var $a0b996a550bb0891$exports = require("./Field.cjs");
 var $bfa4962d90c8af48$exports = require("./Form.cjs");
 var $bde97c91243ed164$exports = require("../icons/Icon.cjs");
 var $6367bc87eb7d24ad$exports = require("./Content.cjs");
+var $4526404114e78c80$exports = require("./intlStrings.cjs");
 var $2061c83559b50a66$exports = require("./pressScale.cjs");
+var $ac757a4c2bd72aee$exports = require("./useSpectrumContextProps.cjs");
 var $chbGa$reactjsxruntime = require("react/jsx-runtime");
 var $chbGa$reactariacomponents = require("react-aria-components");
+var $chbGa$reactariacollections = require("@react-aria/collections");
 var $chbGa$react = require("react");
+var $chbGa$reactdom = require("react-dom");
 var $chbGa$reactspectrumutils = require("@react-spectrum/utils");
+var $chbGa$reactariautils = require("@react-aria/utils");
+var $chbGa$reactariai18n = require("@react-aria/i18n");
 
 
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 
+$parcel$export(module.exports, "TagGroupContext", () => $2e3ddd7543f4a901$export$5b07b5dd2cbd96e3);
 $parcel$export(module.exports, "TagGroup", () => $2e3ddd7543f4a901$export$67ea30858aaf75e3);
 $parcel$export(module.exports, "Tag", () => $2e3ddd7543f4a901$export$3288d34c523a1192);
 /*
@@ -43,7 +55,14 @@ $parcel$export(module.exports, "Tag", () => $2e3ddd7543f4a901$export$3288d34c523
 
 
 
-const $2e3ddd7543f4a901$var$TagGroupContext = /*#__PURE__*/ (0, $chbGa$react.createContext)({});
+
+
+
+
+
+
+
+const $2e3ddd7543f4a901$export$5b07b5dd2cbd96e3 = /*#__PURE__*/ (0, $chbGa$react.createContext)(null);
 const $2e3ddd7543f4a901$var$helpTextStyles = function anonymous(props) {
     let rules = " .";
     rules += ' __a-1oa8qr7';
@@ -100,22 +119,147 @@ const $2e3ddd7543f4a901$var$helpTextStyles = function anonymous(props) {
     rules += ' __He';
     return rules;
 };
-function $2e3ddd7543f4a901$var$TagGroup({ label: label, description: description, items: items, labelPosition: labelPosition = 'top', labelAlign: labelAlign = 'start', children: children, renderEmptyState: renderEmptyState, isEmphasized: isEmphasized, isInvalid: isInvalid, errorMessage: errorMessage, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, ...props1 }, ref) {
+const $2e3ddd7543f4a901$var$InternalTagGroupContext = /*#__PURE__*/ (0, $chbGa$react.createContext)({});
+function $2e3ddd7543f4a901$var$TagGroup(props, ref) {
+    [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $2e3ddd7543f4a901$export$5b07b5dd2cbd96e3);
+    props = (0, $bfa4962d90c8af48$exports.useFormProps)(props);
+    let { onRemove: onRemove } = props;
+    return /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)($2e3ddd7543f4a901$var$InternalTagGroupContext.Provider, {
+        value: {
+            onRemove: onRemove
+        },
+        children: /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)((0, $chbGa$reactariacollections.CollectionBuilder), {
+            content: /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)((0, $chbGa$reactariacollections.Collection), {
+                ...props
+            }),
+            children: (collection)=>/*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)($2e3ddd7543f4a901$var$TagGroupInner, {
+                    props: props,
+                    forwardedRef: ref,
+                    collection: collection
+                })
+        })
+    });
+}
+/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */ let $2e3ddd7543f4a901$export$67ea30858aaf75e3 = /*#__PURE__*/ (0, $chbGa$react.forwardRef)($2e3ddd7543f4a901$var$TagGroup);
+function $2e3ddd7543f4a901$var$TagGroupInner({ props: { label: label, description: description, labelPosition: labelPosition = 'top', labelAlign: labelAlign = 'start', isEmphasized: isEmphasized, isInvalid: isInvalid, errorMessage: errorMessage, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, size: size = 'M', ...props1 }, forwardedRef: ref, collection: collection }) {
+    let stringFormatter = (0, $chbGa$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '@react-spectrum/s2');
+    let { maxRows: maxRows, groupActionLabel: groupActionLabel, onGroupAction: onGroupAction, renderEmptyState: renderEmptyState = ()=>stringFormatter.format('tag.noTags'), ...otherProps } = props1;
+    let { direction: direction } = (0, $chbGa$reactariacomponents.useLocale)();
+    let containerRef = (0, $chbGa$react.useRef)(null);
+    let tagsRef = (0, $chbGa$react.useRef)(null);
+    let actionsRef = (0, $chbGa$react.useRef)(null);
+    let hiddenTagsRef = (0, $chbGa$react.useRef)(null);
+    let [tagState, setTagState] = (0, $chbGa$react.useState)({
+        visibleTagCount: collection.size,
+        showCollapseButton: false
+    });
+    let [isCollapsed, setIsCollapsed] = (0, $chbGa$react.useState)(maxRows != null);
+    let { onRemove: onRemove } = (0, $chbGa$react.useContext)($2e3ddd7543f4a901$var$InternalTagGroupContext);
+    let isEmpty = collection.size === 0;
+    let showCollapseToggleButton = tagState.showCollapseButton || tagState.visibleTagCount < collection.size;
     let formContext = (0, $chbGa$react.useContext)((0, $bfa4962d90c8af48$exports.FormContext));
-    props1 = (0, $bfa4962d90c8af48$exports.useFormProps)(props1);
-    let { size: size = 'M' } = props1;
     let domRef = (0, $chbGa$reactspectrumutils.useDOMRef)(ref);
+    let allItems = (0, $chbGa$react.useMemo)(()=>Array.from(collection), [
+        collection
+    ]);
+    let items = (0, $chbGa$react.useMemo)(()=>Array.from(collection).slice(0, !isCollapsed ? collection.size : tagState.visibleTagCount), [
+        collection,
+        tagState.visibleTagCount,
+        isCollapsed
+    ]);
+    let updateVisibleTagCount = (0, $chbGa$reactariautils.useEffectEvent)(()=>{
+        if (maxRows == null) setTagState({
+            visibleTagCount: collection.size,
+            showCollapseButton: false
+        });
+        if (maxRows != null && maxRows > 0) {
+            let computeVisibleTagCount = ()=>{
+                let currContainerRef = hiddenTagsRef.current;
+                let currTagsRef = hiddenTagsRef.current;
+                let currActionsRef = actionsRef.current;
+                if (!currContainerRef || !currTagsRef || collection.size === 0 || currContainerRef.parentElement == null) return {
+                    visibleTagCount: 0,
+                    showCollapseButton: false
+                };
+                // Count rows and show tags until we hit the maxRows.
+                // I think this is still a safe assumption, and we don't need to queryAll for role=tag
+                let tags = [
+                    ...currTagsRef.children
+                ];
+                let currY = -Infinity;
+                let rowCount = 0;
+                let index = 0;
+                let tagWidths = [];
+                for (let tag of tags){
+                    let { width: width, y: y } = tag.getBoundingClientRect();
+                    if (y !== currY) {
+                        currY = y;
+                        rowCount++;
+                    }
+                    if (rowCount > maxRows) break;
+                    tagWidths.push(width);
+                    index++;
+                }
+                // Remove tags until there is space for the collapse button and action button (if present) on the last row.
+                let buttons = currActionsRef ? [
+                    ...currActionsRef.children
+                ] : [];
+                if (buttons.length > 0 && rowCount >= maxRows) {
+                    let buttonsWidth = buttons.reduce((acc, curr)=>acc += curr.getBoundingClientRect().width, 0);
+                    let margins = parseFloat(getComputedStyle(buttons[0]).marginInlineStart);
+                    buttonsWidth += margins * 2;
+                    let end = direction === 'ltr' ? 'right' : 'left';
+                    let containerEnd = currContainerRef.parentElement?.getBoundingClientRect()[end] - margins;
+                    let lastTagEnd = tags[index - 1]?.getBoundingClientRect()[end];
+                    lastTagEnd += margins;
+                    let availableWidth = containerEnd - lastTagEnd;
+                    while(availableWidth <= buttonsWidth && index > 0){
+                        let tagWidth = tagWidths.pop();
+                        if (tagWidth != null) availableWidth += tagWidth;
+                        index--;
+                    }
+                }
+                return {
+                    visibleTagCount: Math.max(index, 1),
+                    showCollapseButton: index < collection.size
+                };
+            };
+            let result = computeVisibleTagCount();
+            (0, $chbGa$reactdom.flushSync)(()=>{
+                setTagState(result);
+            });
+        }
+    });
+    (0, $chbGa$reactariautils.useResizeObserver)({
+        ref: maxRows != null ? containerRef : undefined,
+        onResize: updateVisibleTagCount
+    });
+    (0, $chbGa$reactariautils.useLayoutEffect)(()=>{
+        if (collection.size > 0 && maxRows != null && maxRows > 0) queueMicrotask(updateVisibleTagCount);
+    }, [
+        collection.size,
+        updateVisibleTagCount,
+        maxRows
+    ]);
+    (0, $chbGa$react.useEffect)(()=>{
+        // Recalculate visible tags when fonts are loaded.
+        document.fonts?.ready.then(()=>updateVisibleTagCount());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    let handlePressCollapse = ()=>{
+        setIsCollapsed((prevCollapsed)=>!prevCollapsed);
+    };
     let helpText = null;
     if (!isInvalid && description) helpText = /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)((0, $6367bc87eb7d24ad$exports.Text), {
         slot: "description",
-        className: $2e3ddd7543f4a901$var$helpTextStyles({
-            size: props1.size || 'M'
+        styles: $2e3ddd7543f4a901$var$helpTextStyles({
+            size: size
         }),
         children: description
     });
     else if (isInvalid) helpText = /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsxs)("div", {
         className: $2e3ddd7543f4a901$var$helpTextStyles({
-            size: props1.size || 'M',
+            size: size,
             isInvalid: isInvalid
         }),
         children: [
@@ -128,15 +272,13 @@ function $2e3ddd7543f4a901$var$TagGroup({ label: label, description: description
             })
         ]
     });
-    // TODO collapse behavior, need a custom collection render so we can limit the number of children
-    // but this isn't possible yet
     return /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsxs)((0, $chbGa$reactariacomponents.TagGroup), {
-        ...props1,
+        ...otherProps,
         ref: domRef,
         style: UNSAFE_style,
         className: UNSAFE_className + function anonymous(props, overrides) {
             let rules = " .";
-            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|l|q|r|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W)[^\s]+/g) || [];
+            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
             rules += matches.join('');
             let $__a = false;
             let $__b = false;
@@ -202,7 +344,7 @@ function $2e3ddd7543f4a901$var$TagGroup({ label: label, description: description
             rules += ' __R-yksgrp';
             return rules;
         }({
-            size: props1.size,
+            size: size,
             labelPosition: labelPosition,
             isInForm: !!formContext
         }, props1.styles),
@@ -215,58 +357,89 @@ function $2e3ddd7543f4a901$var$TagGroup({ label: label, description: description
                 children: label
             }),
             /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)("div", {
-                className: " . __a-4cfph1 __b-4cfph1 __c-4cfph1 __d-4cfph1 _Zd _7a q2 ie je",
+                ref: containerRef,
+                className: function anonymous(props) {
+                    let rules = " .";
+                    rules += ' __a-4cfph1';
+                    rules += ' __b-4cfph1';
+                    rules += ' __c-4cfph1';
+                    rules += ' __d-4cfph1';
+                    rules += ' q2';
+                    if (props.isEmpty) rules += ' ya';
+                    else rules += ' yJ';
+                    if (props.isEmpty) rules += ' za';
+                    else rules += ' zb';
+                    rules += ' Uc';
+                    return rules;
+                }({
+                    isEmpty: isEmpty
+                }),
                 children: /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)((0, $bfa4962d90c8af48$exports.FormContext).Provider, {
                     value: {
                         ...formContext,
                         size: size
                     },
-                    children: /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)((0, $chbGa$reactariacomponents.Provider), {
+                    children: /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsxs)((0, $chbGa$reactariacomponents.Provider), {
                         values: [
                             [
                                 (0, $chbGa$reactariacomponents.TextContext),
                                 undefined
                             ],
                             [
-                                $2e3ddd7543f4a901$var$TagGroupContext,
+                                $2e3ddd7543f4a901$export$5b07b5dd2cbd96e3,
                                 {
                                     size: size,
                                     isEmphasized: isEmphasized
                                 }
                             ]
                         ],
-                        children: /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)((0, $chbGa$reactariacomponents.TagList), {
-                            items: items,
-                            renderEmptyState: renderEmptyState,
-                            className: ({ isEmpty: isEmpty })=>(function anonymous(props) {
-                                    let rules = " .";
-                                    if (props.isEmpty) rules += ' ya';
-                                    else rules += ' yJ';
-                                    if (props.isEmpty) rules += ' za';
-                                    else rules += ' zJ';
-                                    rules += ' _Zd';
-                                    rules += ' q2';
-                                    rules += ' _7a';
-                                    rules += ' _c-bc1l9oh';
-                                    rules += ' _c-1uotwbwg';
-                                    rules += ' _c-eo0c6sf';
-                                    rules += ' _c-enzzrge';
-                                    rules += ' _c-enzykdd';
-                                    rules += ' _c-enzwzjc';
-                                    rules += ' _c-enzrfpb';
-                                    rules += ' _ca';
-                                    rules += ' _dbf';
-                                    rules += ' _de';
-                                    rules += ' _eb';
-                                    rules += ' _f-1x99dlob';
-                                    rules += ' _fa';
-                                    rules += ' an';
-                                    return rules;
-                                })({
-                                    isEmpty: isEmpty
-                                }),
-                            children: children
-                        })
+                        children: [
+                            maxRows != null && /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)("div", {
+                                // @ts-ignore
+                                inert: "true",
+                                ref: hiddenTagsRef,
+                                className: " . _Zc _7a _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh Ua Xa Za __Eb __vb __wb _K-3t1x",
+                                children: allItems.map((item)=>{
+                                    // pull off individual props as an allow list, don't want refs or other props getting through
+                                    // possibly should render a tag look alike instead though, so i don't call the hooks either or add id's to elements etc
+                                    return /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)("div", {
+                                        style: item.props.UNSAFE_style,
+                                        className: item.props.className({
+                                            size: size,
+                                            allowsRemoving: Boolean(onRemove)
+                                        }),
+                                        children: item.props.children({
+                                            size: size,
+                                            allowsRemoving: Boolean(onRemove),
+                                            isInCtx: true
+                                        })
+                                    }, item.key);
+                                })
+                            }),
+                            /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)((0, $chbGa$reactariacomponents.TagList), {
+                                ref: tagsRef,
+                                items: items,
+                                renderEmptyState: renderEmptyState,
+                                className: " . _Zc q2 _ca _c-enzrfpb _c-enzwzjc _c-enzykdd _c-enzzrge _c-eo0c6sf _c-1uotwbwg _c-bc1l9oh _de _dbf _eb _fa _f-1x99dlob an",
+                                children: (item)=>/*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)($2e3ddd7543f4a901$export$3288d34c523a1192, {
+                                        ...item.props,
+                                        id: item.key,
+                                        textValue: item.textValue
+                                    })
+                            }),
+                            !isEmpty && (showCollapseToggleButton || groupActionLabel) && /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)($2e3ddd7543f4a901$var$ActionGroup, {
+                                collection: collection,
+                                "aria-label": props1['aria-label'],
+                                "aria-labelledby": props1['aria-labelledby'],
+                                actionsRef: actionsRef,
+                                tagState: tagState,
+                                size: size,
+                                isCollapsed: isCollapsed,
+                                handlePressCollapse: handlePressCollapse,
+                                onGroupAction: onGroupAction,
+                                groupActionLabel: groupActionLabel
+                            })
+                        ]
                     })
                 })
             }),
@@ -274,7 +447,48 @@ function $2e3ddd7543f4a901$var$TagGroup({ label: label, description: description
         ]
     });
 }
-/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */ let $2e3ddd7543f4a901$export$67ea30858aaf75e3 = /*#__PURE__*/ (0, $chbGa$react.forwardRef)($2e3ddd7543f4a901$var$TagGroup);
+function $2e3ddd7543f4a901$var$ActionGroup(props) {
+    let stringFormatter = (0, $chbGa$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '@react-spectrum/s2');
+    let { actionsRef: actionsRef, tagState: tagState, size: size, isCollapsed: isCollapsed, handlePressCollapse: handlePressCollapse, onGroupAction: onGroupAction, groupActionLabel: groupActionLabel, collection: collection, // directly use aria-labelling from the TagGroup because we can't use the id from the TagList
+    // and we can't supply an id to the TagList because it'll cause an issue where all the tag ids flip back
+    // and forth with their prefix in an infinite loop
+    'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    let actionsId = (0, $chbGa$reactariautils.useId)();
+    // might need to localize the aria-label which concatenates with this label
+    let actionGroupLabel = stringFormatter.format('tag.actions');
+    return /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsxs)("div", {
+        role: "group",
+        ref: actionsRef,
+        id: actionsId,
+        "aria-label": ariaLabel ? `${ariaLabel} ${actionGroupLabel}` : actionGroupLabel,
+        "aria-labelledby": ariaLabelledBy ? ariaLabelledBy : undefined,
+        className: " . _Zc",
+        children: [
+            tagState.showCollapseButton && /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)((0, $6e265ff388155b91$exports.ActionButton), {
+                isQuiet: true,
+                size: size,
+                styles: " . Ab Bb yb zb",
+                UNSAFE_style: {
+                    display: 'inline-flex'
+                },
+                onPress: handlePressCollapse,
+                children: isCollapsed ? stringFormatter.format('tag.showAllButtonLabel', {
+                    tagCount: collection.size
+                }) : stringFormatter.format('tag.hideButtonLabel')
+            }),
+            groupActionLabel && onGroupAction && /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)((0, $6e265ff388155b91$exports.ActionButton), {
+                isQuiet: true,
+                size: size,
+                styles: " . Ab Bb yb zb",
+                UNSAFE_style: {
+                    display: 'inline-flex'
+                },
+                onPress: ()=>onGroupAction?.(),
+                children: groupActionLabel
+            })
+        ]
+    });
+}
 const $2e3ddd7543f4a901$var$tagStyles = function anonymous(props) {
     let rules = " .";
     if (props.isFocusVisible) rules += ' _Lb';
@@ -284,6 +498,7 @@ const $2e3ddd7543f4a901$var$tagStyles = function anonymous(props) {
     rules += ' _Nc';
     rules += ' _M-3t1z';
     rules += ' _Ze';
+    rules += ' _kc';
     rules += ' _1c';
     rules += ' _2d';
     rules += ' _c-bc1l9oh';
@@ -386,71 +601,91 @@ const $2e3ddd7543f4a901$var$tagStyles = function anonymous(props) {
     }
     return rules;
 };
-function $2e3ddd7543f4a901$export$3288d34c523a1192({ children: children, ...props }) {
-    let textValue = typeof children === 'string' ? children : undefined;
-    let { size: size = 'M', isEmphasized: isEmphasized } = (0, $chbGa$react.useContext)($2e3ddd7543f4a901$var$TagGroupContext);
-    let ref = (0, $chbGa$react.useRef)(null);
+const $2e3ddd7543f4a901$var$avatarSize = {
+    S: 16,
+    M: 20,
+    L: 24
+};
+function $2e3ddd7543f4a901$var$Tag({ children: children, textValue: textValue, ...props }, ref) {
+    textValue ||= typeof children === 'string' ? children : undefined;
+    let ctx = (0, $chbGa$reactariacomponents.useSlottedContext)($2e3ddd7543f4a901$export$5b07b5dd2cbd96e3);
+    let isInRealDOM = Boolean(ctx?.size);
+    let { size: size, isEmphasized: isEmphasized } = ctx ?? {};
+    let domRef = (0, $chbGa$reactspectrumutils.useDOMRef)(ref);
+    let backupRef = (0, $chbGa$react.useRef)(null);
+    domRef = domRef || backupRef;
     let isLink = props.href != null;
     return /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)((0, $chbGa$reactariacomponents.Tag), {
         textValue: textValue,
         ...props,
-        ref: ref,
-        style: (0, $2061c83559b50a66$exports.pressScale)(ref),
+        ref: domRef,
+        style: (0, $2061c83559b50a66$exports.pressScale)(domRef),
         className: (renderProps)=>$2e3ddd7543f4a901$var$tagStyles({
-                ...renderProps,
                 size: size,
                 isEmphasized: isEmphasized,
-                isLink: isLink
+                isLink: isLink,
+                ...renderProps
             }),
-        children: (0, $chbGa$reactariacomponents.composeRenderProps)(children, (children, { allowsRemoving: allowsRemoving, isDisabled: isDisabled })=>/*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsxs)((0, $chbGa$reactjsxruntime.Fragment), {
-                children: [
-                    /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)("div", {
-                        className: " . _Zd qa qba _1c iF ibG jF jbG _zb ba",
-                        children: /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)((0, $chbGa$reactariacomponents.Provider), {
-                            values: [
-                                [
-                                    (0, $6367bc87eb7d24ad$exports.TextContext),
-                                    {
-                                        className: " . E-1gogtue F-1gogtue __A-3t1y __vb __wb _ma _pb"
-                                    }
-                                ],
-                                [
-                                    (0, $bde97c91243ed164$exports.IconContext),
-                                    {
-                                        render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
-                                            slot: 'icon',
-                                            className: " . __A-3t1x"
-                                        }),
-                                        styles: " . l-1sthc3k k-1sthc3k y-oelgqu _8-3t1x"
-                                    }
-                                ],
-                                [
-                                    (0, $38071d9ce246d4cf$exports.AvatarContext),
-                                    {
-                                        styles: " . l-1sthc3k k-1sthc3k _8-3t1x __A-3t1x"
-                                    }
-                                ],
-                                [
-                                    (0, $6367bc87eb7d24ad$exports.ImageContext),
-                                    {
-                                        className: " . l-1sthc3k k-1sthc3k _8-3t1x __A-3t1x _bb __Na"
-                                    }
-                                ]
-                            ],
-                            children: typeof children === 'string' ? /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)((0, $6367bc87eb7d24ad$exports.Text), {
-                                children: children
-                            }) : children
-                        })
-                    }),
-                    allowsRemoving && /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)((0, $4fb579ecc195bd2b$exports.ClearButton), {
-                        slot: "remove",
-                        size: size,
-                        isDisabled: isDisabled
-                    })
-                ]
+        children: (0, $chbGa$reactariacomponents.composeRenderProps)(children, (children, renderProps)=>/*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)($2e3ddd7543f4a901$var$TagWrapper, {
+                isInRealDOM: isInRealDOM,
+                ...renderProps,
+                children: typeof children === 'string' ? /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)((0, $6367bc87eb7d24ad$exports.Text), {
+                    children: children
+                }) : children
             }))
     });
 }
+/** An individual Tag for TagGroups. */ let $2e3ddd7543f4a901$export$3288d34c523a1192 = /*#__PURE__*/ (0, $chbGa$react.forwardRef)($2e3ddd7543f4a901$var$Tag);
+function $2e3ddd7543f4a901$var$TagWrapper({ children: children, isDisabled: isDisabled, allowsRemoving: allowsRemoving, isInRealDOM: isInRealDOM }) {
+    let { size: size } = (0, $chbGa$reactariacomponents.useSlottedContext)($2e3ddd7543f4a901$export$5b07b5dd2cbd96e3) ?? {};
+    return /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsxs)((0, $chbGa$reactjsxruntime.Fragment), {
+        children: [
+            isInRealDOM && /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)("div", {
+                className: " . _Zd qa qba _1c iF ibG jF jbG _zb ba",
+                children: /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)((0, $chbGa$reactariacomponents.Provider), {
+                    values: [
+                        [
+                            (0, $6367bc87eb7d24ad$exports.TextContext),
+                            {
+                                styles: " . __A-3t1y __vb __wb _ma _pb"
+                            }
+                        ],
+                        [
+                            (0, $bde97c91243ed164$exports.IconContext),
+                            {
+                                render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
+                                    slot: 'icon',
+                                    styles: " . __A-3t1x"
+                                }),
+                                styles: " . l-1sthc3k k-1sthc3k y-oelgqu _8-3t1x"
+                            }
+                        ],
+                        [
+                            (0, $38071d9ce246d4cf$exports.AvatarContext),
+                            {
+                                size: $2e3ddd7543f4a901$var$avatarSize[size],
+                                styles: " . __A-3t1x"
+                            }
+                        ],
+                        [
+                            (0, $6367bc87eb7d24ad$exports.ImageContext),
+                            {
+                                className: " . l-1sthc3k k-1sthc3k _8-3t1x __A-3t1x _bb __Na _vb _wb _xb _yb"
+                            }
+                        ]
+                    ],
+                    children: children
+                })
+            }),
+            !isInRealDOM && children,
+            allowsRemoving && isInRealDOM && /*#__PURE__*/ (0, $chbGa$reactjsxruntime.jsx)((0, $4fb579ecc195bd2b$exports.ClearButton), {
+                slot: "remove",
+                size: size,
+                isDisabled: isDisabled
+            })
+        ]
+    });
+}
 
 
 //# sourceMappingURL=TagGroup.cjs.map