fix: inert value in next15

.changeset/smart-eagles-hope.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/shared-utils": patch
+---
+
+Tabs with prop destroyInactiveTabPanel error in nextjs15(#4344)

packages/utilities/shared-utils/package.json

@@ -25,6 +25,7 @@
     "url": "https://github.com/nextui-org/nextui/issues"
   },
   "scripts": {
+    "postinstall": "node -e \"try{require('./scripts/postinstall.js')}catch(e){}\"",
     "build": "tsup src --dts",
     "dev": "pnpm build:fast --watch",
     "clean": "rimraf dist .turbo",
@@ -43,6 +44,7 @@
     "format": [
       "cjs",
       "esm"
-    ]
+    ],
+    "splitting": false
   }
 }

packages/utilities/shared-utils/scripts/postinstall.js

@@ -0,0 +1,19 @@
+const { switchVersion, loadModule } = require('./utils')
+
+const Vue = loadModule('vue')
+
+if (!Vue || typeof Vue.version !== 'string') {
+  console.warn('[vue-demi] Vue is not found. Please run "npm install vue" to install.')
+}
+else if (Vue.version.startsWith('2.7.')) {
+  switchVersion(2.7)
+}
+else if (Vue.version.startsWith('2.')) {
+  switchVersion(2)
+}
+else if (Vue.version.startsWith('3.')) {
+  switchVersion(3)
+}
+else {
+  console.warn(`[vue-demi] Vue version v${Vue.version} is not supported.`)
+}

packages/utilities/shared-utils/src/demi/demi.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 declare function getInertValue(v: boolean): boolean | string | undefined;

packages/utilities/shared-utils/src/demi/index.ts

@@ -0,0 +1,2 @@
+export * from "./react19";
+export * from "./react18";

packages/utilities/shared-utils/src/demi/react18/index.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 getInertValueReact18 = (v: boolean): boolean | string | undefined => {
+  return v ? "" : undefined;
+};

packages/utilities/shared-utils/src/demi/react19/index.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 getInertValueReact19 = (v: boolean): boolean | string | undefined => {
+  return v;
+};

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

@@ -1,5 +1,3 @@
-import React from "react";
-
 type Args<T extends Function> = T extends (...args: infer R) => any ? R : never;
 
 type AnyFunction<T = any> = (...args: T[]) => any;
@@ -391,30 +389,3 @@ 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;
-};

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

@@ -9,3 +9,5 @@ export * from "./console";
 export * from "./types";
 export * from "./dates";
 export * from "./regex";
+
+export type {getInertValue} from "./demi/demi";