From 3aff08efe1318ca20e115eb56172a3b8a91b6ba1 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 22 Aug 2025 06:09:29 +1000
Subject: [PATCH 1/2] fix: tag collapse calculation for removable tags

---
 packages/@react-spectrum/s2/src/TagGroup.tsx | 110 +++++++++++++------
 1 file changed, 74 insertions(+), 36 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx
index b1616897b39..353e2224bf1 100644
--- a/packages/@react-spectrum/s2/src/TagGroup.tsx
+++ b/packages/@react-spectrum/s2/src/TagGroup.tsx
@@ -323,7 +323,45 @@ function TagGroupInner<T>({
                       style={item.props.UNSAFE_style}
                       key={item.key}
                       className={item.props.className({size, allowsRemoving: Boolean(onRemove)})}>
-                      {item.props.children({size, allowsRemoving: Boolean(onRemove), isInCtx: true})}
+                      <div
+                        className={style({
+                          display: 'flex',
+                          minWidth: 0,
+                          alignItems: 'center',
+                          gap: 'text-to-visual',
+                          forcedColorAdjust: 'none',
+                          backgroundColor: 'transparent'
+                        })}>
+                        <Provider
+                          values={[
+                            [TextContext, {styles: style({order: 1, truncate: true})}],
+                            [IconContext, {
+                              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
+                              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+                            }],
+                            [AvatarContext, {
+                              size: avatarSize[size],
+                              styles: style({order: 0})
+                            }],
+                            [ImageContext, {
+                              styles: style({
+                                size: fontRelative(20),
+                                flexShrink: 0,
+                                order: 0,
+                                aspectRatio: 'square',
+                                objectFit: 'contain',
+                                borderRadius: 'sm'
+                              })
+                            }]
+                          ]}>
+                          {item.props.children({size, allowsRemoving: Boolean(onRemove), isInCtx: true})}
+                        </Provider>
+                      </div>
+                      {Boolean(onRemove) && (
+                        <ClearButton
+                          slot="remove"
+                          size={size} />
+                      )}
                     </div>
                   );
                 })}
@@ -516,41 +554,41 @@ function TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphas
   return (
     <>
       {isInRealDOM && (
-      <div
-        className={style({
-          display: 'flex',
-          minWidth: 0,
-          alignItems: 'center',
-          gap: 'text-to-visual',
-          forcedColorAdjust: 'none',
-          backgroundColor: 'transparent'
-        })}>
-        <Provider
-          values={[
-            [TextContext, {styles: style({order: 1, truncate: true})}],
-            [IconContext, {
-              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
-            }],
-            [AvatarContext, {
-              size: avatarSize[size],
-              styles: style({order: 0})
-            }],
-            [ImageContext, {
-              styles: style({
-                size: fontRelative(20),
-                flexShrink: 0,
-                order: 0,
-                aspectRatio: 'square',
-                objectFit: 'contain',
-                borderRadius: 'sm'
-              })
-            }]
-          ]}>
-          {children}
-        </Provider>
-      </div>
-        )}
+        <div
+          className={style({
+            display: 'flex',
+            minWidth: 0,
+            alignItems: 'center',
+            gap: 'text-to-visual',
+            forcedColorAdjust: 'none',
+            backgroundColor: 'transparent'
+          })}>
+          <Provider
+            values={[
+              [TextContext, {styles: style({order: 1, truncate: true})}],
+              [IconContext, {
+                render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
+                styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+              }],
+              [AvatarContext, {
+                size: avatarSize[size],
+                styles: style({order: 0})
+              }],
+              [ImageContext, {
+                styles: style({
+                  size: fontRelative(20),
+                  flexShrink: 0,
+                  order: 0,
+                  aspectRatio: 'square',
+                  objectFit: 'contain',
+                  borderRadius: 'sm'
+                })
+              }]
+            ]}>
+            {children}
+          </Provider>
+        </div>
+      )}
       {!isInRealDOM && children}
       {allowsRemoving && isInRealDOM && (
         <ClearButton

From 1ac96cdbca5e65f80131112b1aefdfaca675bce0 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Mon, 25 Aug 2025 08:56:05 +1000
Subject: [PATCH 2/2] simplify

---
 packages/@react-spectrum/s2/src/TagGroup.tsx | 48 ++++----------------
 1 file changed, 9 insertions(+), 39 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx
index 353e2224bf1..2beaaa2bcf0 100644
--- a/packages/@react-spectrum/s2/src/TagGroup.tsx
+++ b/packages/@react-spectrum/s2/src/TagGroup.tsx
@@ -323,45 +323,15 @@ function TagGroupInner<T>({
                       style={item.props.UNSAFE_style}
                       key={item.key}
                       className={item.props.className({size, allowsRemoving: Boolean(onRemove)})}>
-                      <div
-                        className={style({
-                          display: 'flex',
-                          minWidth: 0,
-                          alignItems: 'center',
-                          gap: 'text-to-visual',
-                          forcedColorAdjust: 'none',
-                          backgroundColor: 'transparent'
-                        })}>
-                        <Provider
-                          values={[
-                            [TextContext, {styles: style({order: 1, truncate: true})}],
-                            [IconContext, {
-                              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-                              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
-                            }],
-                            [AvatarContext, {
-                              size: avatarSize[size],
-                              styles: style({order: 0})
-                            }],
-                            [ImageContext, {
-                              styles: style({
-                                size: fontRelative(20),
-                                flexShrink: 0,
-                                order: 0,
-                                aspectRatio: 'square',
-                                objectFit: 'contain',
-                                borderRadius: 'sm'
-                              })
-                            }]
-                          ]}>
-                          {item.props.children({size, allowsRemoving: Boolean(onRemove), isInCtx: true})}
-                        </Provider>
-                      </div>
-                      {Boolean(onRemove) && (
-                        <ClearButton
-                          slot="remove"
-                          size={size} />
-                      )}
+                      <TagWrapper
+                        key={item.key}
+                        id={item.key}
+                        textValue={item.textValue}
+                        isInRealDOM
+                        size={size}
+                        allowsRemoving={!!onRemove}
+                        {...item.props}
+                        children={item.props.children({size, allowsRemoving: Boolean(onRemove), isInCtx: true})} />
                     </div>
                   );
                 })}