diff --git a/packages/@react-spectrum/s2/chromatic/CardView.stories.tsx b/packages/@react-spectrum/s2/chromatic/CardView.stories.tsx index c8e89b63397..8637f39ea03 100644 --- a/packages/@react-spectrum/s2/chromatic/CardView.stories.tsx +++ b/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 /> diff --git a/packages/@react-spectrum/s2/src/Image.tsx b/packages/@react-spectrum/s2/src/Image.tsx index 7e8f875099d..246a98106ce 100644 --- a/packages/@react-spectrum/s2/src/Image.tsx +++ b/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} diff --git a/packages/@react-spectrum/s2/src/Skeleton.tsx b/packages/@react-spectrum/s2/src/Skeleton.tsx index c74c9f33ef4..de5673602ec 100644 --- a/packages/@react-spectrum/s2/src/Skeleton.tsx +++ b/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> ); diff --git a/packages/@react-spectrum/s2/stories/CardView.stories.tsx b/packages/@react-spectrum/s2/stories/CardView.stories.tsx index 3cba3a49c72..2ff2d71e5f7 100644 --- a/packages/@react-spectrum/s2/stories/CardView.stories.tsx +++ b/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> diff --git a/packages/react-aria-components/src/Tabs.tsx b/packages/react-aria-components/src/Tabs.tsx index 0f12c0a6140..dea9b90c12c 100644 --- a/packages/react-aria-components/src/Tabs.tsx +++ b/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 } });