diff --git a/packages/@react-aria/utils/src/index.ts b/packages/@react-aria/utils/src/index.ts index 49d6cb9caf1..fa157349680 100644 --- a/packages/@react-aria/utils/src/index.ts +++ b/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'; diff --git a/packages/@react-aria/utils/src/inertValue.ts b/packages/@react-aria/utils/src/inertValue.ts new file mode 100644 index 00000000000..1dce213b3b5 --- /dev/null +++ b/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; +} diff --git a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx index 265238e2b07..293d35ce63f 100644 --- a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx +++ b/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 diff --git a/packages/@react-spectrum/s2/src/Content.tsx b/packages/@react-spectrum/s2/src/Content.tsx index 5b0276e4ea6..5f15f593b95 100644 --- a/packages/@react-spectrum/s2/src/Content.tsx +++ b/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} diff --git a/packages/@react-spectrum/s2/src/Skeleton.tsx b/packages/@react-spectrum/s2/src/Skeleton.tsx index 3b70e100912..2aa90c23a6b 100644 --- a/packages/@react-spectrum/s2/src/Skeleton.tsx +++ b/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 ( ({ {maxRows != null && (