chore: raise minimum node version to 20+ (#2707)

* chore: raise minimum node version to 20+

* fix: Intl RangeError exception

* chore: update @types/node

* chore: add changeset

.changeset/heavy-chairs-repeat.md

@@ -0,0 +1,13 @@
+---
+"@sumup-oss/stylelint-plugin-circuit-ui": major
+"@sumup-oss/eslint-plugin-circuit-ui": major
+"next-app": major
+"@sumup-oss/design-tokens": major
+"@sumup-oss/circuit-ui": major
+"@sumup-oss/cna-template": major
+"@sumup-oss/astro-template-circuit-ui": major
+"@sumup-oss/remix-template-circuit-ui": major
+"@sumup-oss/icons": major
+---
+
+Raised the minimum Node.js version to 20+.

.github/workflows/chromatic.yml

@@ -16,10 +16,10 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Setup Node.js v18
+      - name: Setup Node.js v20
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: 'npm'
 
       - name: Install dependencies

.github/workflows/ci.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [18, 20]
+        node: [20, 22]
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4

.github/workflows/templates.yml

@@ -11,7 +11,7 @@ jobs:
     strategy:
       # https://docs.github.com/en/actions/using-jobs/using-a-matrix-for-your-jobs
       matrix:
-        node: [18, 20]
+        node: [20, 22]
         template: [astro, nextjs, remix]
         include:
           - template: astro

.nvmrc

@@ -1 +1 @@
-lts/hydrogen
+lts/iron

CONTRIBUTING.md

@@ -32,7 +32,7 @@ We appreciate pull requests (PRs) for smaller changes and bug fixes. For larger
 
 ### Prerequisites
 
-- [Node.js v18](https://nodejs.org/)
+- [Node.js v20](https://nodejs.org/)
 
 ### Installation
 

package.json

@@ -61,7 +61,7 @@
     "@sumup-oss/foundry": "^8.2.0",
     "@sumup-oss/eslint-plugin-circuit-ui": "^4.0.0",
     "@sumup-oss/stylelint-plugin-circuit-ui": "^2.0.0",
-    "@types/node": "^18.19.39",
+    "@types/node": "^22.7.4",
     "@vitest/coverage-v8": "^2.0.5",
     "audit-ci": "^7.1.0",
     "chromatic": "^11.7.1",

packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInputService.ts

@@ -46,7 +46,7 @@ export function mapCountryCodeOptions(
   const displayName = new Intl.DisplayNames(locale, { type: 'region' });
   return countryCodeOptions
     .map(({ code, country }) => {
-      const countryName = displayName.of(country);
+      const countryName = country ? displayName.of(country) : country;
       return {
         label: countryName ? `${countryName} (${code})` : code,
         value: code,

packages/circuit-ui/package.json

@@ -71,7 +71,7 @@
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^18.19.39",
+    "@types/node": "^22.7.4",
     "@types/react": "^18.3.3",
     "@types/react-dates": "^21.8.6",
     "@types/react-dom": "^18.3.0",
@@ -102,6 +102,6 @@
     "react-dates": ">=21.8"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   }
 }

packages/design-tokens/package.json

@@ -36,7 +36,7 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@types/node": "^18.19.39",
+    "@types/node": "^22.7.4",
     "@types/prop-types": "^15.7.12",
     "tsx": "^4.16.5",
     "typescript": "^5.5.4"

packages/icons/package.json

@@ -48,6 +48,6 @@
     "react": ">=16.0.0 <19.0.0"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   }
 }

templates/nextjs/README.md

@@ -10,7 +10,7 @@ A [create-next-app template](https://nextjs.org/docs/api-reference/create-next-a
 
 ## 💻 Prerequisites
 
-- You should have **Node.js** installed at a version equal to or above **`v18.0.0`**.
+- You should have **Node.js** installed at a version equal to or above **`v20.0.0`**.
 
 ## ✨ Setting up a new Circuit UI + Next.js project
 

templates/nextjs/template/.nvmrc

@@ -1 +1 @@
-lts/hydrogen
+lts/iron

templates/nextjs/template/package.json

@@ -31,7 +31,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^18.19.39",
+    "@types/node": "^22.7.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "eslint-config-next": "^14.2.5",