chore/deps

.github/workflows/nodejs.yml

@@ -8,25 +8,24 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         name: Install pnpm
         with:
-          version: 8
           run_install: false
 
       - name: Get pnpm store directory
         shell: bash
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ env.STORE_PATH }}
@@ -56,7 +55,7 @@ jobs:
           cd packages/e2e
           npx playwright test
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         name: Upload report
         with:
           name: playwright-report

.github/workflows/release.yml

@@ -9,25 +9,24 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         name: Install pnpm
         with:
-          version: 8
           run_install: false
 
       - name: Get pnpm store directory
         shell: bash
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ env.STORE_PATH }}
@@ -57,7 +56,7 @@ jobs:
           cd packages/e2e
           npx playwright test
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         name: Upload report
         with:
           name: playwright-report
@@ -70,26 +69,25 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
           registry-url: https://registry.npmjs.org/
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         name: Install pnpm
         with:
-          version: 8
           run_install: false
 
       - name: Get pnpm store directory
         shell: bash
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ env.STORE_PATH }}

.husky/commit-msg

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx --no-install commitlint --edit ""
+npx --no -- commitlint --edit $1

package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/marco-streng/styled-off-canvas.git"
   },
   "scripts": {
-    "prepare": "husky install",
+    "prepare": "husky",
     "dev": "pnpm --filter 'styled-off-canvas-demo' run dev",
     "build:demo": "pnpm --filter 'styled-off-canvas' run build && pnpm --filter 'styled-off-canvas-demo' run build"
   },

packages/demo/package.json

@@ -9,23 +9,24 @@
   },
   "dependencies": {
     "@styled-icons/remix-fill": "^10.46.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "styled-components": "^6.1.6",
     "styled-off-canvas": "workspace:*"
   },
   "devDependencies": {
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
+    "@types/node": "^22.12.0",
+    "@types/react": "^19.0.6",
+    "@types/react-dom": "^19.0.4",
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "@typescript-eslint/parser": "^6.17.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitejs/plugin-react-swc": "^4.2.3",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "typescript": "^5.3.3",
-    "vite": "^4.4.5"
+    "vite": "^7.3.1"
   }
 }

packages/e2e/package.json

@@ -8,6 +8,6 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@playwright/test": "^1.40.1"
+    "@playwright/test": "^1.58.2"
   }
 }

packages/lib/package.json

@@ -34,38 +34,35 @@
     "url": "https://github.com/marco-streng/styled-off-canvas/issues"
   },
   "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17",
+    "react": ">=18",
+    "react-dom": ">=18",
     "styled-components": ">=6"
   },
   "homepage": "https://github.com/marco-streng/styled-off-canvas#readme",
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@testing-library/jest-dom": "^6.2.0",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
-    "@types/react-test-renderer": "^18.0.7",
+    "@types/node": "^22.12.0",
+    "@types/react": "^19.0.6",
+    "@types/react-dom": "^19.0.4",
     "@types/semantic-release": "^20.0.6",
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "@typescript-eslint/parser": "^6.17.0",
-    "@vitest/coverage-v8": "^0.34.3",
+    "@vitest/coverage-v8": "^4.0.18",
     "esbuild": "^0.19.11",
     "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.33.2",
     "jsdom": "^23.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "semantic-release": "^20.1.3",
     "styled-components": "^6.1.6",
-    "styled-icons": "^10.47.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3",
-    "vitest": "^0.34.3",
+    "vitest": "^4.0.18",
     "styled-off-canvas-publish": "workspace:*"
   }
 }

packages/lib/src/Menu.ssr.test.tsx

@@ -1,32 +1,32 @@
 // @vitest-environment node
 
 import React from "react";
-import TestRenderer from "react-test-renderer";
-import { SpyInstance } from "vitest";
+import { renderToString } from "react-dom/server";
+import { ServerStyleSheet } from "styled-components";
 import { OffCanvasProvider } from "./Context";
 import { Menu } from "./Menu";
 
 describe("Menu", () => {
-  let useEffectSpy: SpyInstance;
+  test("ssr", () => {
+    const sheet = new ServerStyleSheet();
 
-  beforeEach(() => {
-    // useEffect won't run on server
-    useEffectSpy = vi.spyOn(React, "useEffect");
-    useEffectSpy.mockImplementation(() => vi.fn());
-  });
+    const html = renderToString(
+      sheet.collectStyles(
+        <OffCanvasProvider isOpen>
+          <Menu>
+            <div>content</div>
+          </Menu>
+        </OffCanvasProvider>
+      )
+    );
 
-  afterEach(() => {
-    useEffectSpy.mockRestore();
-  });
+    const styles = sheet.getStyleTags();
+    sheet.seal();
 
-  test("ssr", () => {
-    const tree = TestRenderer.create(
-      <OffCanvasProvider isOpen>
-        <Menu>
-          <div>content</div>
-        </Menu>
-      </OffCanvasProvider>
-    ).toJSON();
-    expect(tree).toMatchSnapshot();
+    // Verify the menu renders with content
+    expect(html).toContain("content");
+    // Verify styled-components generated styles
+    expect(styles).toBeTruthy();
+    expect(html).toMatchSnapshot();
   });
 });

packages/lib/src/Menu.tsx

@@ -65,6 +65,8 @@ export const Menu = ({
 
   // Avoid scrolling on content when the navigation is open
   React.useEffect(() => {
+    if (typeof window === "undefined") return;
+
     const bodyElStyle = window.document.body.style;
 
     if (isOpen) {
@@ -76,19 +78,25 @@ export const Menu = ({
     }
   }, [isOpen]);
 
-  if (closeOnEsc) {
-    React.useEffect(() => {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (event.code.toLowerCase() === "escape") {
-          close();
-        }
-      };
+  React.useEffect(() => {
+    if (!closeOnEsc || typeof window === "undefined") return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.code.toLowerCase() === "escape") {
+        close();
+      }
+    };
+
+    if (isOpen) {
+      window.document.addEventListener("keydown", handleKeyDown);
+    } else {
+      window.document.removeEventListener("keydown", handleKeyDown);
+    }
 
-      isOpen
-        ? window.document.addEventListener("keydown", handleKeyDown)
-        : window.document.removeEventListener("keydown", handleKeyDown);
-    }, [isOpen]);
-  }
+    return () => {
+      window.document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [closeOnEsc, isOpen, close]);
 
   return (
     <Container

packages/lib/src/__snapshots__/Menu.ssr.test.tsx.snap

@@ -1,11 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Menu > ssr 1`] = `
-<div
-  className="sc-bcXGCL hZteQD"
->
-  <div>
-    content
-  </div>
-</div>
-`;
+exports[`Menu > ssr 1`] = `"<div class="sc-bcXGCL hZteQD"><div>content</div></div>"`;

packages/lib/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "types": ["vitest/globals"],
+    "types": ["vitest/globals", "node"],
     "jsx": "react-jsx",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "target": "ESNext",

packages/lib/vite.config.ts → packages/lib/vitest.config.ts

@@ -1,11 +1,8 @@
-/// <reference types="vitest" />
 import { defineConfig } from "vitest/config";
 
-// https://vitejs.dev/config/
 export default defineConfig({
   test: {
     globals: true,
     environment: "jsdom",
-    setupFiles: "./src/test/setup.ts",
   },
 });