fix: inert value in next15

nextui-org · Jan 4, 2025 · e5415f0 · e5415f0
1 parent 44d466e
commit e5415f0
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/packages/components/calendar/src/calendar-month.tsx b/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, getInertValue} from "@nextui-org/shared-utils";
+import {dataAttr, useInertValue} from "@nextui-org/shared-utils";
 
 import {CalendarCell} from "./calendar-cell";
 import {slideVariants} from "./calendar-transitions";
@@ -34,14 +34,16 @@ export function CalendarMonth(props: CalendarMonthProps) {
     state,
   );
 
+  const inertValue = useInertValue(!!isHeaderExpanded);
+
   const bodyContent = [...new Array(weeksInMonth).keys()].map((weekIndex) => (
     <tr
       key={weekIndex}
       className={slots?.gridBodyRow({class: classNames?.gridBodyRow})}
       data-slot="grid-body-row"
       // makes the browser ignore the element and its children when tabbing
       // @ts-ignore
-      inert={getInertValue(!!isHeaderExpanded)}
+      inert={inertValue}
     >
       {state
         .getDatesInWeek(weekIndex, startDate)

diff --git a/packages/components/calendar/src/calendar-picker.tsx b/packages/components/calendar/src/calendar-picker.tsx
@@ -2,7 +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 {useInertValue} from "@nextui-org/shared-utils";
 
 import {CalendarPickerItem} from "./calendar-picker-item";
 import {useCalendarPicker} from "./use-calendar-picker";
@@ -60,6 +60,8 @@ export function CalendarPicker(props: CalendarPickerProps) {
     [EmptyItem],
   );
 
+  const inertValue = useInertValue(!isHeaderExpanded);
+
   return (
     <div
       className={slots?.pickerWrapper({
@@ -68,7 +70,7 @@ export function CalendarPicker(props: CalendarPickerProps) {
       data-slot="picker-wrapper"
       // makes the browser ignore the element and its children when tabbing
       // @ts-ignore
-      inert={getInertValue(!isHeaderExpanded)}
+      inert={inertValue}
     >
       <div
         ref={highlightRef}

diff --git a/packages/components/tabs/src/tab-panel.tsx b/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, getInertValue} from "@nextui-org/shared-utils";
+import {clsx, useInertValue} from "@nextui-org/shared-utils";
 import {mergeProps} from "@react-aria/utils";
 import {useTabPanel} from "@react-aria/tabs";
 import {useFocusRing} from "@react-aria/focus";
@@ -59,6 +59,8 @@ const TabPanel = forwardRef<"div", TabPanelProps>((props, ref) => {
 
   const isSelected = tabKey === selectedItem?.key;
 
+  const inertValue = useInertValue(!isSelected);
+
   if (!content || (!isSelected && destroyInactiveTabPanel)) {
     return null;
   }
@@ -70,7 +72,7 @@ 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
-      inert={getInertValue(!isSelected)}
+      inert={inertValue}
       {...(isSelected && mergeProps(tabPanelProps, focusProps, otherProps))}
       className={slots.panel?.({class: tabPanelStyles})}
       data-slot="panel"

diff --git a/packages/utilities/shared-utils/src/functions.ts b/packages/utilities/shared-utils/src/functions.ts
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 
 type Args<T extends Function> = T extends (...args: infer R) => any ? R : never;
 
@@ -435,3 +435,13 @@ export const isNextJS15 = async () => {
 export const getInertValue = async (v: boolean): Promise<boolean | string | undefined> => {
   return isReact19() || (await isNextJS15()) ? v : v ? "" : undefined;
 };
+
+export const useInertValue = (v: boolean) => {
+  const [inertValue, setInertValue] = useState<boolean | string | undefined>(v);
+
+  useEffect(() => {
+    getInertValue(v).then(setInertValue);
+  }, [v]);
+
+  return inertValue;
+};