inert

iTwin · Dec 24, 2024 · 48045c6 · 48045c6
1 parent 099468e
commit 48045c6
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/packages/itwinui-react/src/core/Carousel/CarouselSlide.tsx b/packages/itwinui-react/src/core/Carousel/CarouselSlide.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import {
   Box,
+  getReactVersionSafeInertProp,
   mergeEventHandlers,
   useIntersection,
   useMergedRefs,
@@ -59,7 +60,7 @@ export const CarouselSlide = React.forwardRef((props, ref) => {
       aria-roledescription='slide'
       tabIndex={index === currentIndex ? 0 : undefined}
       ref={refs}
-      {...{ inert: index !== currentIndex ? '' : undefined }}
+      {...getReactVersionSafeInertProp(index !== currentIndex)}
       {...rest}
       onKeyDown={mergeEventHandlers(props.onKeyDown, (event) => {
         // prevent default browser scrolling on arrow keys because focus will get lost when slide switches

diff --git a/packages/itwinui-react/src/core/Overlay/Overlay.tsx b/packages/itwinui-react/src/core/Overlay/Overlay.tsx
@@ -3,7 +3,11 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Box, polymorphic } from '../../utils/index.js';
+import {
+  Box,
+  getReactVersionSafeInertProp,
+  polymorphic,
+} from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 
 type OverlayComponentProps = {
@@ -40,7 +44,7 @@ if (process.env.NODE_ENV === 'development') {
 const OverlayHiddenContent = React.forwardRef((props, ref) => {
   const { children, ...rest } = props;
   return (
-    <Box {...{ inert: '' }} ref={ref} {...rest}>
+    <Box {...getReactVersionSafeInertProp()} ref={ref} {...rest}>
       {children}
     </Box>
   );

diff --git a/packages/itwinui-react/src/core/Panels/Panels.tsx b/packages/itwinui-react/src/core/Panels/Panels.tsx
@@ -16,6 +16,7 @@ import {
   useWarningLogger,
   useLayoutEffect,
   useLatestRef,
+  getReactVersionSafeInertProp,
 } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
@@ -221,7 +222,7 @@ const Panel = React.forwardRef((props, forwardedRef) => {
           className={cx('iui-panel', className)}
           aria-labelledby={`${id}-header-title`}
           role='group'
-          {...{ inert: isInert ? '' : undefined }}
+          {...getReactVersionSafeInertProp(isInert)}
           data-iui-transitioning={isTransitioning ? 'true' : undefined}
           {...rest}
         >

diff --git a/packages/itwinui-react/src/utils/functions/react.ts b/packages/itwinui-react/src/utils/functions/react.ts
@@ -43,3 +43,14 @@ export const cloneElementWithRef = (
     ref,
   });
 };
+
+/**
+ * Returns an object with `inert` if the `inert` argument is `true`.
+ *
+ * The value of the `inert` prop is adjusted to work with all React versions, including React 19+.
+ */
+export const getReactVersionSafeInertProp = (inert = true) => {
+  const inertValue =
+    Number(React.version.split('.')[0]) >= 19 ? true : undefined;
+  return inert ? { inert: inertValue } : {};
+};