fix: React inert prop compatibility (#7519)

* fix: React inert prop compatibility

* chore: lint

* Check using `React.version`

* Fix type

* fix lint

---------

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

Author: chirokas

packages/@react-aria/utils/src/index.ts

@@ -43,6 +43,7 @@ export {useEffectEvent} from './useEffectEvent';
 export {useDeepMemo} from './useDeepMemo';
 export {useFormReset} from './useFormReset';
 export {useLoadMore} from './useLoadMore';
+export {inertValue} from './inertValue';
 export {CLEAR_FOCUS_EVENT, FOCUS_EVENT, UPDATE_ACTIVEDESCENDANT} from './constants';
 export {isCtrlKeyPressed} from './keyboard';
 export {useEnterAnimation, useExitAnimation} from './animation';

packages/@react-aria/utils/src/inertValue.ts

@@ -0,0 +1,11 @@
+import {version} from 'react';
+
+export function inertValue(value?: boolean) {
+  const pieces = version.split('.');
+  const major = parseInt(pieces[0], 10);
+  if (major >= 19) {
+    return value;
+  }
+  // compatibility with React < 19
+  return value ? 'true' : undefined;
+}

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

@@ -31,12 +31,12 @@ import {focusRing, size, style} from '../style' with { type: 'macro' };
 import FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';
 import {forwardRefType} from './types';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {inertValue, useLayoutEffect} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {Menu, MenuItem, MenuTrigger} from './Menu';
 import {Text} from './Content';
 import {useDOMRef, useResizeObserver} from '@react-spectrum/utils';
-import {useLayoutEffect} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -168,7 +168,7 @@ let HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | nu
   return (
     <div
       // @ts-ignore
-      inert="true"
+      inert={inertValue(true)}
       ref={listRef}
       className={style({
         display: '[inherit]',

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

@@ -20,7 +20,7 @@ import {ContentContext, FooterContext, TextContext} from './Content';
 import {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';
 import {DividerContext} from './Divider';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
-import {filterDOMProps} from '@react-aria/utils';
+import {filterDOMProps, inertValue} from '@react-aria/utils';
 import {focusRing, lightDark, space, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IllustrationContext} from './Icon';
@@ -421,7 +421,7 @@ export const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLD
         {...filterDOMProps(otherProps)}
         id={id != null ? String(id) : undefined}
         // @ts-ignore - React < 19 compat
-        inert={isSkeleton ? 'true' : undefined}
+        inert={inertValue(isSkeleton)}
         ref={domRef}
         className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}
         style={UNSAFE_style}>

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

@@ -13,6 +13,7 @@
 import {ContextValue, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, TextContext as RACTextContext, SlotProps, Text as TextAria} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {inertValue} from '@react-aria/utils';
 import {StyleString} from '../style/types';
 import {UnsafeStyles} from './style-utils';
 import {useDOMRef} from '@react-spectrum/utils';
@@ -107,7 +108,7 @@ export const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {
       {...otherProps}
       ref={domRef}
       // @ts-ignore - compatibility with React < 19
-      inert={isSkeleton ? 'true' : undefined}
+      inert={inertValue(isSkeleton)}
       className={UNSAFE_className + styles}
       style={UNSAFE_style}
       slot={slot || undefined}

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

@@ -12,7 +12,7 @@
 
 import {cloneElement, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';
 import {colorToken} from '../style/tokens' with {type: 'macro'};
-import {mergeRefs} from '@react-aria/utils';
+import {inertValue, mergeRefs} from '@react-aria/utils';
 import {mergeStyles} from '../style/runtime';
 import {raw} from '../style/style-macro' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
@@ -103,7 +103,7 @@ export function SkeletonText({children}) {
   return (
     <span
       // @ts-ignore - compatibility with React < 19
-      inert="true"
+      inert={inertValue(true)}
       ref={useLoadingAnimation(true)}
       className={loadingStyle + style({
         color: 'transparent',

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

@@ -40,12 +40,12 @@ import {FormContext, useFormProps} from './Form';
 import {forwardRefType} from './types';
 import {IconContext} from './Icon';
 import {ImageContext} from './Image';
+import {inertValue, useEffectEvent, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {pressScale} from './pressScale';
 import {Text, TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
-import {useEffectEvent, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -319,7 +319,7 @@ function TagGroupInner<T>({
             {maxRows != null && (
               <div
                 // @ts-ignore
-                inert="true"
+                inert={inertValue(true)}
                 ref={hiddenTagsRef}
                 className={style({
                   display: 'inline',

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

@@ -15,7 +15,7 @@ import {AriaTabListProps, AriaTabPanelProps, mergeProps, Orientation, useFocusRi
 import {Collection, CollectionBuilder, createHideableComponent, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, usePersistedKeys} from './Collection';
 import {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
-import {filterDOMProps, useObjectRef} from '@react-aria/utils';
+import {filterDOMProps, inertValue, useObjectRef} from '@react-aria/utils';
 import {Collection as ICollection, Node, TabListState, useTabListState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, JSX, useContext, useMemo} from 'react';
 
@@ -320,7 +320,7 @@ export const TabPanel = /*#__PURE__*/ createHideableComponent(function TabPanel(
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
       // @ts-ignore
-      inert={!isSelected ? 'true' : undefined}
+      inert={inertValue(!isSelected)}
       data-inert={!isSelected ? 'true' : undefined}>
       <Provider
         values={[