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/README.md

@@ -1,4 +1,4 @@
-# @nextui-org/system
+# @nextui-org/shared-utils
 
 A Quick description of the component
 
@@ -7,9 +7,9 @@ A Quick description of the component
 ## Installation
 
 ```sh
-yarn add @nextui-org/system
+yarn add @nextui-org/shared-utils
 # or
-npm i @nextui-org/system
+npm i @nextui-org/shared-utils
 ```
 
 ## Contribution
@@ -18,7 +18,17 @@ Yes please! See the
 [contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
 for details.
 
+## File structure
+
+```
+src/
+├── common/ # Common utilities for all React versions
+└── demi/ # Demi utilities for different React versions
+   ├── react18/
+   └── react19/
+```
+
 ## License
 
 This project is licensed under the terms of the
-[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).

packages/utilities/shared-utils/package.json

@@ -11,7 +11,8 @@
   "main": "src/index.ts",
   "sideEffects": false,
   "files": [
-    "dist"
+    "dist",
+    "scripts"
   ],
   "publishConfig": {
     "access": "public"
@@ -25,13 +26,15 @@
     "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",
     "typecheck": "tsc --noEmit",
     "build:fast": "tsup src",
     "prepack": "clean-package",
-    "postpack": "clean-package restore"
+    "postpack": "clean-package restore",
+    "postbuild": "npm run postinstall"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -43,6 +46,8 @@
     "format": [
       "cjs",
       "esm"
-    ]
+    ],
+    "splitting": false,
+    "entry": ["src/demi/react18", "src/demi/react19"]
   }
-}
+}

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

@@ -0,0 +1,41 @@
+const path = require('path')
+const fs = require('fs')
+
+function tryRequirePkg(pkg) {
+  try {
+    return require(pkg);
+  } catch (e) {
+    return null;
+  }
+}
+
+function copyDemiDir(dir) {
+  const src = path.join(__dirname, '..', 'dist', 'demi', dir)
+  const dest = path.join(__dirname, '..', 'dist')
+
+  fs.cpSync(src, dest, { recursive: true })
+}
+
+function modifyDts(path) {
+  const dts = fs.readFileSync(path, 'utf8')
+  const modifiedDts = dts.replace(/\.\.\/\.\.\/common/g, './common')
+
+  fs.writeFileSync(path, modifiedDts, 'utf8')
+}
+
+function postinstall() {
+  const nextjs = tryRequirePkg('next/package.json')
+  const react = tryRequirePkg('react/package.json')
+  const nextjsVersion = Number((nextjs?.version || '').split('.')[0])
+  const reactVersion = Number((react?.version || '').split('.')[0])
+
+  if (reactVersion === 18 && nextjsVersion < 15) {
+    copyDemiDir('react18')
+  } else {
+    copyDemiDir('react19')
+  }
+
+  modifyDts(path.join(__dirname, '..', 'dist', 'index.d.ts'))
+}
+
+postinstall();

packages/utilities/shared-utils/src/functions.ts → packages/utilities/shared-utils/src/common/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/common/index.ts

@@ -0,0 +1,11 @@
+export * from "./assertion";
+export * from "./clsx";
+export * from "./object";
+export * from "./text";
+export * from "./dimensions";
+export * from "./functions";
+export * from "./numbers";
+export * from "./console";
+export * from "./types";
+export * from "./dates";
+export * from "./regex";

packages/utilities/shared-utils/src/demi/react18/getInertValue.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 getInertValue = (v: boolean): boolean | string | undefined => {
+  return v ? "" : undefined;
+};

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

@@ -0,0 +1,3 @@
+export * from "./getInertValue";
+
+export * from "../../common";

packages/utilities/shared-utils/src/demi/react19/getInertValue.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 getInertValue = (v: boolean): boolean | string | undefined => {
+  return v;
+};

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

@@ -0,0 +1,3 @@
+export * from "./getInertValue";
+
+export * from "../../common";

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

@@ -1,11 +1,5 @@
-export * from "./assertion";
-export * from "./clsx";
-export * from "./object";
-export * from "./text";
-export * from "./dimensions";
-export * from "./functions";
-export * from "./numbers";
-export * from "./console";
-export * from "./types";
-export * from "./dates";
-export * from "./regex";
+/**
+ * For Development
+ */
+export * from "./common";
+export * from "./demi/react18";