From 026c6632a564822c5c762415ba03f6deb06f7e91 Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Thu, 4 Sep 2025 02:43:25 +1000
Subject: [PATCH 1/2] fix: tag collapse calculation for removable tags (#8758)

* fix: tag collapse calculation for removable tags

* simplify
---
 packages/@react-spectrum/s2/src/TagGroup.tsx | 80 +++++++++++---------
 1 file changed, 44 insertions(+), 36 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx
index b1616897b39..2beaaa2bcf0 100644
--- a/packages/@react-spectrum/s2/src/TagGroup.tsx
+++ b/packages/@react-spectrum/s2/src/TagGroup.tsx
@@ -323,7 +323,15 @@ 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})}
+                      <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>
                   );
                 })}
@@ -516,41 +524,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 79c8e8f3ca916363cbe4c7a34bb83de118b93aca Mon Sep 17 00:00:00 2001
From: William Hoggarth <mail@whoggarth.org>
Date: Wed, 3 Sep 2025 19:35:36 +0100
Subject: [PATCH 2/2] Fix chromatic check when process undefined (e.g. vite
 projects) (#8494)

Co-authored-by: Robert Snow <rsnow@adobe.com>
---
 packages/@react-spectrum/overlays/src/OpenTransition.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/overlays/src/OpenTransition.tsx b/packages/@react-spectrum/overlays/src/OpenTransition.tsx
index cab6bdcb128..d14c3025d2e 100644
--- a/packages/@react-spectrum/overlays/src/OpenTransition.tsx
+++ b/packages/@react-spectrum/overlays/src/OpenTransition.tsx
@@ -35,7 +35,7 @@ export function OpenTransition(
   props: any
 ): JSX.Element | ReactElement<any, string | JSXElementConstructor<any>>[] {
   // Do not apply any transition if in chromatic.
-  if (process.env.CHROMATIC) {
+  if (typeof process !== 'undefined' && process.env.CHROMATIC) {
     return React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: props.in}));
   }