fix(S2): inert value and img empty src string in React 19 (#8359)

* fix viewMode error in CardView stories

* fix inert values for react 19

* fix empty src string error

* Revert "fix viewMode error in CardView stories"

This reverts commit 05f0459.

* remove use of viewMode

---------

Co-authored-by: Robert Snow <[email protected]>

Author: reidbarber

packages/@react-spectrum/s2/chromatic/CardView.stories.tsx

@@ -27,26 +27,17 @@ const meta: Meta<typeof CardView> = {
 export default meta;
 
 const cardViewStyles = style({
-  width: {
-    default: 'screen',
-    viewMode: {
-      docs: 'full'
-    }
-  },
-  height: {
-    default: 'screen',
-    viewMode: {
-      docs: 600
-    }
-  }
+  width: 'screen',
+  maxWidth: 'full',
+  height: 600
 });
 
-export const Empty = (args: CardViewProps<any>, {viewMode}) => {
+export const Empty = (args: CardViewProps<any>) => {
   return (
     <CardView
       aria-label="Assets"
       {...args}
-      styles={cardViewStyles({viewMode})}
+      styles={cardViewStyles}
       renderEmptyState={() => (
         <IllustratedMessage size="L">
           <EmptyIcon />

packages/@react-spectrum/s2/src/Image.tsx

@@ -228,7 +228,7 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
       {!errorState && (
         <img
           {...getFetchPriorityProp(fetchPriority)}
-          src={src}
+          src={src || undefined}
           alt={alt}
           crossOrigin={crossOrigin}
           decoding={decoding}

packages/@react-spectrum/s2/src/Skeleton.tsx

@@ -126,7 +126,8 @@ export function SkeletonWrapper({children}: {children: SkeletonElement}): ReactN
       {isLoading ? cloneElement(children, {
         ref: mergeRefs(childRef, animation),
         className: (children.props.className || '') + ' ' + loadingStyle,
-        inert: 'true'
+        // @ts-ignore - compatibility with React < 19
+        inert: inertValue(true)
       }) : children}
     </SkeletonContext.Provider>
   );

packages/@react-spectrum/s2/stories/CardView.stories.tsx

@@ -29,18 +29,9 @@ const meta: Meta<typeof CardView> = {
 export default meta;
 
 const cardViewStyles = style({
-  width: {
-    default: 'screen',
-    viewMode: {
-      docs: 'full'
-    }
-  },
-  height: {
-    default: 'screen',
-    viewMode: {
-      docs: 600
-    }
-  }
+  width: 'screen',
+  maxWidth: 'full',
+  height: 600
 });
 
 type Item = {
@@ -101,7 +92,7 @@ function PhotoCard({item, layout}: {item: Item, layout: string}) {
   );
 }
 
-export const Example = (args: CardViewProps<any>, {viewMode}) => {
+export const Example = (args: CardViewProps<any>) => {
   let list = useAsyncList<Item, number | null>({
     async load({signal, cursor, items}) {
       let page = cursor || 1;
@@ -126,7 +117,7 @@ export const Example = (args: CardViewProps<any>, {viewMode}) => {
       {...args}
       loadingState={loadingState}
       onLoadMore={args.loadingState === 'idle' ? list.loadMore : undefined}
-      styles={cardViewStyles({viewMode})}>
+      styles={cardViewStyles}>
       <Collection items={items} dependencies={[args.layout]}>
         {item => <PhotoCard item={item} layout={args.layout || 'grid'} />}
       </Collection>
@@ -157,12 +148,12 @@ Example.args = {
   selectionMode: 'multiple'
 };
 
-export const Empty = (args: CardViewProps<any>, {viewMode}) => {
+export const Empty = (args: CardViewProps<any>) => {
   return (
     <CardView
       aria-label="Assets"
       {...args}
-      styles={cardViewStyles({viewMode})}
+      styles={cardViewStyles}
       renderEmptyState={() => (
         <IllustratedMessage size="L">
           <EmptyIcon />
@@ -202,7 +193,7 @@ function TopicCard({topic}: {topic: Topic}) {
   );
 }
 
-export const CollectionCards = (args: CardViewProps<any>, {viewMode}) => {
+export const CollectionCards = (args: CardViewProps<any>) => {
   let list = useAsyncList<Topic, number | null>({
     async load({signal, cursor}) {
       let page = cursor || 1;
@@ -224,7 +215,7 @@ export const CollectionCards = (args: CardViewProps<any>, {viewMode}) => {
       {...args}
       loadingState={loadingState}
       onLoadMore={args.loadingState === 'idle' ? list.loadMore : undefined}
-      styles={cardViewStyles({viewMode})}>
+      styles={cardViewStyles}>
       <Collection items={items}>
         {topic => <TopicCard topic={topic} />}
       </Collection>

packages/react-aria-components/src/Tabs.tsx

@@ -300,7 +300,8 @@ export const TabPanel = /*#__PURE__*/ createHideableComponent(function TabPanel(
     values: {
       isFocused,
       isFocusVisible,
-      isInert: !isSelected,
+      // @ts-ignore - compatibility with React < 19
+      isInert: inertValue(!isSelected),
       state
     }
   });