Add 'use client' directives to support React Server Components (#1516)

Author: szhsin

dist/cjs/index.cjs

@@ -1,3 +1,5 @@
+
+'use client';
 'use strict';
 
 var MenuButton = require('./components/MenuButton.cjs');

dist/esm/index.mjs

@@ -1,3 +1,5 @@
+
+'use client';
 export { MenuButton } from './components/MenuButton.mjs';
 export { Menu } from './components/Menu.mjs';
 export { ControlledMenu } from './components/ControlledMenu.mjs';

example/package-lock.json

@@ -6,13 +6,13 @@
   "dependencies": {
     "@szhsin/react-menu": "file:..",
     "highlight.js": "^11.11.1",
-    "next": "^15.1.5",
+    "next": "^15.3.0",
     "react": "file:../node_modules/react",
     "react-dom": "file:../node_modules/react-dom",
     "reactish-state": "0.11.1"
   },
   "devDependencies": {
-    "eslint-config-next": "^15.1.5"
+    "eslint-config-next": "^15.3.0"
   },
   "scripts": {
     "dev": "next dev",

example/package.json

@@ -1,8 +1,8 @@
 import { useEffect, useLayoutEffect } from 'react';
 import { useTheme } from '../store';
 
-export const version = '4.3.1';
-export const build = '140';
+export const version = '4.4.0';
+export const build = '141';
 
 export const bem = (block, element, modifiers = {}) => {
   let blockElement = element ? `${block}__${element}` : block;

example/src/utils/index.js

@@ -1,6 +1,6 @@
 {
   "name": "@szhsin/react-menu",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "description": "React component for building accessible menu, dropdown, submenu, context menu and more.",
   "author": "Zheng Song",
   "license": "MIT",
@@ -71,6 +71,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rollup": "^4.40.0",
+    "rollup-plugin-add-directive": "^1.0.0",
     "sass": "^1.86.3",
     "typescript": "^5.8.3"
   },

package-lock.json

@@ -1,12 +1,14 @@
+// @ts-check
+
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import { babel } from '@rollup/plugin-babel';
+import { addDirective } from 'rollup-plugin-add-directive';
 
 /**
  * @type {import('rollup').RollupOptions}
  */
 const sharedConfig = {
   external: ['react', 'react-dom', 'react/jsx-runtime', 'react-transition-state'],
-  plugins: [nodeResolve(), babel({ babelHelpers: 'bundled' })],
   treeshake: {
     moduleSideEffects: false,
     propertyReadSideEffects: false
@@ -19,6 +21,11 @@ const sharedConfig = {
 export default [
   {
     ...sharedConfig,
+    plugins: [
+      nodeResolve(),
+      babel({ babelHelpers: 'bundled' }),
+      addDirective({ pattern: 'index' })
+    ],
     input: 'src/index.js',
     output: [
       {
@@ -38,6 +45,7 @@ export default [
   },
   {
     ...sharedConfig,
+    plugins: [nodeResolve(), babel({ babelHelpers: 'bundled' })],
     input: 'src/style-utils/index.js',
     output: [
       {