fix: support inert value with boolean type for react 19 (#4039)

Author: wingkwong

.changeset/moody-rabbits-shop.md

@@ -0,0 +1,7 @@
+---
+"@nextui-org/calendar": patch
+"@nextui-org/tabs": patch
+"@nextui-org/shared-utils": patch
+---
+
+support inert value with boolean type for react 19 (#4038)

packages/components/calendar/src/calendar-month.tsx

@@ -4,7 +4,7 @@ import {HTMLNextUIProps} from "@nextui-org/system";
 import {useLocale} from "@react-aria/i18n";
 import {useCalendarGrid} from "@react-aria/calendar";
 import {m} from "framer-motion";
-import {dataAttr} from "@nextui-org/shared-utils";
+import {dataAttr, getInertValue} from "@nextui-org/shared-utils";
 
 import {CalendarCell} from "./calendar-cell";
 import {slideVariants} from "./calendar-transitions";
@@ -40,9 +40,8 @@ export function CalendarMonth(props: CalendarMonthProps) {
       className={slots?.gridBodyRow({class: classNames?.gridBodyRow})}
       data-slot="grid-body-row"
       // makes the browser ignore the element and its children when tabbing
-      // TODO: invert inert when switching to React 19 (ref: https://github.com/facebook/react/issues/17157)
       // @ts-ignore
-      inert={isHeaderExpanded ? "" : undefined}
+      inert={getInertValue(!!isHeaderExpanded)}
     >
       {state
         .getDatesInWeek(weekIndex, startDate)

packages/components/calendar/src/calendar-picker.tsx

@@ -2,6 +2,7 @@ import type {CalendarPickerProps} from "./use-calendar-picker";
 
 import {HTMLNextUIProps} from "@nextui-org/system";
 import {useCallback} from "react";
+import {getInertValue} from "@nextui-org/shared-utils";
 
 import {CalendarPickerItem} from "./calendar-picker-item";
 import {useCalendarPicker} from "./use-calendar-picker";
@@ -66,9 +67,8 @@ export function CalendarPicker(props: CalendarPickerProps) {
       })}
       data-slot="picker-wrapper"
       // makes the browser ignore the element and its children when tabbing
-      // TODO: invert inert when switching to React 19 (ref: https://github.com/facebook/react/issues/17157)
       // @ts-ignore
-      inert={isHeaderExpanded ? undefined : ""}
+      inert={getInertValue(!isHeaderExpanded)}
     >
       <div
         ref={highlightRef}

packages/components/tabs/src/tab-panel.tsx

@@ -3,7 +3,7 @@ import type {AriaTabPanelProps} from "@react-aria/tabs";
 import {Key} from "@react-types/shared";
 import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
-import {clsx} from "@nextui-org/shared-utils";
+import {clsx, getInertValue} from "@nextui-org/shared-utils";
 import {mergeProps} from "@react-aria/utils";
 import {useTabPanel} from "@react-aria/tabs";
 import {useFocusRing} from "@react-aria/focus";
@@ -70,9 +70,8 @@ const TabPanel = forwardRef<"div", TabPanelProps>((props, ref) => {
       data-focus-visible={isFocusVisible}
       data-inert={!isSelected ? "true" : undefined}
       // makes the browser ignore the element and its children when tabbing
-      // TODO: invert inert when switching to React 19 (ref: https://github.com/facebook/react/issues/17157)
       // @ts-ignore
-      inert={!isSelected ? "" : undefined}
+      inert={getInertValue(!isSelected)}
       {...(isSelected && mergeProps(tabPanelProps, focusProps, otherProps))}
       className={slots.panel?.({class: tabPanelStyles})}
       data-slot="panel"

packages/utilities/shared-utils/src/functions.ts

@@ -1,3 +1,5 @@
+import React from "react";
+
 type Args<T extends Function> = T extends (...args: infer R) => any ? R : never;
 
 type AnyFunction<T = any> = (...args: T[]) => any;
@@ -389,3 +391,30 @@ export const intersectionBy = <T>(...args: [...arrays: T[][], iteratee: Iteratee
 
   return res;
 };
+
+/**
+ * Checks if the current React version is 19.x.x
+ *
+ * @returns {boolean} - Returns `true` if the React major version is 19, otherwise returns `false`.
+ */
+export const isReact19 = (): boolean => {
+  return React.version.split(".")[0] === "19";
+};
+
+/**
+ * Returns an appropriate value for the `inert` attribute based on the React version.
+ *
+ * In React 19, the attribute `inert` is a boolean. In versions prior to 19, the attribute
+ * behaves differently: setting `inert=""` will make it `true`, and `inert=undefined` will make it `false`.
+ *
+ * @param {boolean} v - The desired boolean state for the `inert` attribute.
+ * @returns {boolean | string | undefined} - Depending on the React version:
+ * - Returns `boolean` if React version is 19 (the input value `v` directly).
+ * - Returns `string` (empty string) if `v` is `true` in older React versions.
+ * - Returns `undefined` if `v` is `false` in older React versions.
+ *
+ * @see {@link https://github.com/facebook/react/issues/17157} for more details on the behavior in older React versions.
+ */
+export const getInertValue = (v: boolean): boolean | string | undefined => {
+  return isReact19() ? v : v ? "" : undefined;
+};