From eb9e962c1577d36d2447cf5fab1b3a9f9d07f1f5 Mon Sep 17 00:00:00 2001 From: Nikos Douvlis Date: Wed, 3 Apr 2024 12:29:22 +0300 Subject: [PATCH] fix(clerk-js): Support older iOS 13.3 and 13.4 devices --- .changeset/tender-numbers-push.md | 5 + package-lock.json | 291 ++++++++++-------- packages/clerk-js/package.json | 3 +- .../UserProfile/__tests__/MfaPage.test.tsx | 4 +- .../__tests__/RemoveMfaPhoneCodePage.test.tsx | 2 +- .../clerk-js/src/ui/elements/FormControl.tsx | 5 +- .../src/ui/hooks/usePrefersReducedMotion.ts | 23 +- packages/clerk-js/src/ui/primitives/Flex.tsx | 19 +- .../src/ui/primitives/gapPropertyCompat.ts | 13 + packages/clerk-js/tsconfig.json | 2 +- packages/clerk-js/webpack.config.js | 18 ++ 11 files changed, 236 insertions(+), 149 deletions(-) create mode 100644 .changeset/tender-numbers-push.md create mode 100644 packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts diff --git a/.changeset/tender-numbers-push.md b/.changeset/tender-numbers-push.md new file mode 100644 index 00000000000..c3131d68790 --- /dev/null +++ b/.changeset/tender-numbers-push.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Support older iOS 13.3 and 13.4 mobile devices diff --git a/package-lock.json b/package-lock.json index a3b7409d621..c2c700cf10b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7223,17 +7223,14 @@ "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { - "version": "0.3.18", - "license": "MIT", + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", + "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", "dependencies": { - "@jridgewell/resolve-uri": "3.1.0", - "@jridgewell/sourcemap-codec": "1.4.14" + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" } }, - "node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": { - "version": "1.4.14", - "license": "MIT" - }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.4", "dev": true, @@ -9995,9 +9992,10 @@ } }, "node_modules/@types/estree": { - "version": "1.0.1", - "dev": true, - "license": "MIT" + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "dev": true }, "node_modules/@types/express": { "version": "4.17.14", @@ -11191,9 +11189,10 @@ "license": "(Apache-2.0 AND MIT)" }, "node_modules/@webassemblyjs/ast": { - "version": "1.11.6", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz", + "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==", "dev": true, - "license": "MIT", "dependencies": { "@webassemblyjs/helper-numbers": "1.11.6", "@webassemblyjs/helper-wasm-bytecode": "1.11.6" @@ -11201,23 +11200,27 @@ }, "node_modules/@webassemblyjs/floating-point-hex-parser": { "version": "1.11.6", - "dev": true, - "license": "MIT" + "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz", + "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==", + "dev": true }, "node_modules/@webassemblyjs/helper-api-error": { "version": "1.11.6", - "dev": true, - "license": "MIT" + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz", + "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==", + "dev": true }, "node_modules/@webassemblyjs/helper-buffer": { - "version": "1.11.6", - "dev": true, - "license": "MIT" + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz", + "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==", + "dev": true }, "node_modules/@webassemblyjs/helper-numbers": { "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz", + "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==", "dev": true, - "license": "MIT", "dependencies": { "@webassemblyjs/floating-point-hex-parser": "1.11.6", "@webassemblyjs/helper-api-error": "1.11.6", @@ -11226,62 +11229,69 @@ }, "node_modules/@webassemblyjs/helper-wasm-bytecode": { "version": "1.11.6", - "dev": true, - "license": "MIT" + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz", + "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==", + "dev": true }, "node_modules/@webassemblyjs/helper-wasm-section": { - "version": "1.11.6", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz", + "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==", "dev": true, - "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.11.6", - "@webassemblyjs/helper-buffer": "1.11.6", + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/wasm-gen": "1.11.6" + "@webassemblyjs/wasm-gen": "1.12.1" } }, "node_modules/@webassemblyjs/ieee754": { "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz", + "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==", "dev": true, - "license": "MIT", "dependencies": { "@xtuc/ieee754": "^1.2.0" } }, "node_modules/@webassemblyjs/leb128": { "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz", + "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==", "dev": true, - "license": "Apache-2.0", "dependencies": { "@xtuc/long": "4.2.2" } }, "node_modules/@webassemblyjs/utf8": { "version": "1.11.6", - "dev": true, - "license": "MIT" + "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz", + "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==", + "dev": true }, "node_modules/@webassemblyjs/wasm-edit": { - "version": "1.11.6", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz", + "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==", "dev": true, - "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.11.6", - "@webassemblyjs/helper-buffer": "1.11.6", + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/helper-wasm-section": "1.11.6", - "@webassemblyjs/wasm-gen": "1.11.6", - "@webassemblyjs/wasm-opt": "1.11.6", - "@webassemblyjs/wasm-parser": "1.11.6", - "@webassemblyjs/wast-printer": "1.11.6" + "@webassemblyjs/helper-wasm-section": "1.12.1", + "@webassemblyjs/wasm-gen": "1.12.1", + "@webassemblyjs/wasm-opt": "1.12.1", + "@webassemblyjs/wasm-parser": "1.12.1", + "@webassemblyjs/wast-printer": "1.12.1" } }, "node_modules/@webassemblyjs/wasm-gen": { - "version": "1.11.6", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz", + "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==", "dev": true, - "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/ast": "1.12.1", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", "@webassemblyjs/ieee754": "1.11.6", "@webassemblyjs/leb128": "1.11.6", @@ -11289,22 +11299,24 @@ } }, "node_modules/@webassemblyjs/wasm-opt": { - "version": "1.11.6", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz", + "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==", "dev": true, - "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.11.6", - "@webassemblyjs/helper-buffer": "1.11.6", - "@webassemblyjs/wasm-gen": "1.11.6", - "@webassemblyjs/wasm-parser": "1.11.6" + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", + "@webassemblyjs/wasm-gen": "1.12.1", + "@webassemblyjs/wasm-parser": "1.12.1" } }, "node_modules/@webassemblyjs/wasm-parser": { - "version": "1.11.6", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz", + "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==", "dev": true, - "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/ast": "1.12.1", "@webassemblyjs/helper-api-error": "1.11.6", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", "@webassemblyjs/ieee754": "1.11.6", @@ -11313,11 +11325,12 @@ } }, "node_modules/@webassemblyjs/wast-printer": { - "version": "1.11.6", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz", + "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==", "dev": true, - "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/ast": "1.12.1", "@xtuc/long": "4.2.2" } }, @@ -11371,13 +11384,15 @@ }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", - "dev": true, - "license": "BSD-3-Clause" + "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", + "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==", + "dev": true }, "node_modules/@xtuc/long": { "version": "4.2.2", - "dev": true, - "license": "Apache-2.0" + "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz", + "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", + "dev": true }, "node_modules/@zxcvbn-ts/core": { "version": "3.0.4", @@ -16361,9 +16376,10 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.15.0", + "version": "5.16.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz", + "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==", "dev": true, - "license": "MIT", "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" @@ -33504,9 +33520,10 @@ } }, "node_modules/terser": { - "version": "5.17.7", + "version": "5.30.2", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.30.2.tgz", + "integrity": "sha512-vTDjRKYKip4dOFL5VizdoxHTYDfEXPdz5t+FbxCC5Rp2s+KbEO8w5wqMDPgj7CtFKZuzq7PXv28fZoXfqqBVuw==", "dev": true, - "license": "BSD-2-Clause", "dependencies": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.8.2", @@ -33521,15 +33538,16 @@ } }, "node_modules/terser-webpack-plugin": { - "version": "5.3.9", + "version": "5.3.10", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz", + "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==", "dev": true, - "license": "MIT", "dependencies": { - "@jridgewell/trace-mapping": "^0.3.17", + "@jridgewell/trace-mapping": "^0.3.20", "jest-worker": "^27.4.5", "schema-utils": "^3.1.1", "serialize-javascript": "^6.0.1", - "terser": "^5.16.8" + "terser": "^5.26.0" }, "engines": { "node": ">= 10.13.0" @@ -35386,33 +35404,34 @@ } }, "node_modules/webpack": { - "version": "5.88.2", + "version": "5.91.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz", + "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==", "dev": true, - "license": "MIT", "dependencies": { "@types/eslint-scope": "^3.7.3", - "@types/estree": "^1.0.0", - "@webassemblyjs/ast": "^1.11.5", - "@webassemblyjs/wasm-edit": "^1.11.5", - "@webassemblyjs/wasm-parser": "^1.11.5", + "@types/estree": "^1.0.5", + "@webassemblyjs/ast": "^1.12.1", + "@webassemblyjs/wasm-edit": "^1.12.1", + "@webassemblyjs/wasm-parser": "^1.12.1", "acorn": "^8.7.1", "acorn-import-assertions": "^1.9.0", - "browserslist": "^4.14.5", + "browserslist": "^4.21.10", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.15.0", + "enhanced-resolve": "^5.16.0", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", "glob-to-regexp": "^0.4.1", - "graceful-fs": "^4.2.9", + "graceful-fs": "^4.2.11", "json-parse-even-better-errors": "^2.3.1", "loader-runner": "^4.2.0", "mime-types": "^2.1.27", "neo-async": "^2.6.2", "schema-utils": "^3.2.0", "tapable": "^2.1.1", - "terser-webpack-plugin": "^5.3.7", - "watchpack": "^2.4.0", + "terser-webpack-plugin": "^5.3.10", + "watchpack": "^2.4.1", "webpack-sources": "^3.2.3" }, "bin": { @@ -35866,6 +35885,19 @@ "node": ">=4.0" } }, + "node_modules/webpack/node_modules/watchpack": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz", + "integrity": "sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==", + "dev": true, + "dependencies": { + "glob-to-regexp": "^0.4.1", + "graceful-fs": "^4.1.2" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/webpack/node_modules/webpack-sources": { "version": "3.2.3", "dev": true, @@ -36646,11 +36678,11 @@ }, "packages/backend": { "name": "@clerk/backend", - "version": "0.38.3", + "version": "0.38.4", "license": "MIT", "dependencies": { - "@clerk/shared": "1.3.3", - "@clerk/types": "3.62.1", + "@clerk/shared": "1.4.0", + "@clerk/types": "3.63.0", "@peculiar/webcrypto": "1.4.1", "@types/node": "16.18.6", "cookie": "0.5.0", @@ -36691,11 +36723,11 @@ }, "packages/chrome-extension": { "name": "@clerk/chrome-extension", - "version": "0.6.16", + "version": "0.6.17", "license": "MIT", "dependencies": { - "@clerk/clerk-js": "4.70.6", - "@clerk/clerk-react": "4.30.7" + "@clerk/clerk-js": "4.71.0", + "@clerk/clerk-react": "4.30.8" }, "devDependencies": { "@types/chrome": "*", @@ -36711,12 +36743,12 @@ }, "packages/clerk-js": { "name": "@clerk/clerk-js", - "version": "4.70.6", + "version": "4.71.0", "license": "MIT", "dependencies": { - "@clerk/localizations": "1.26.16", - "@clerk/shared": "1.3.3", - "@clerk/types": "3.62.1", + "@clerk/localizations": "1.27.0", + "@clerk/shared": "1.4.0", + "@clerk/types": "3.63.0", "@emotion/cache": "11.11.0", "@emotion/react": "11.11.1", "@floating-ui/react": "0.25.4", @@ -36751,9 +36783,10 @@ "react-refresh": "^0.14.0", "react-refresh-typescript": "^2.0.5", "semver": "^7.5.2", + "terser-webpack-plugin": "^5.3.10", "ts-loader": "^9.3.0", "typescript": "*", - "webpack": "^5.85.0", + "webpack": "^5.91.0", "webpack-bundle-analyzer": "^4.9.0", "webpack-cli": "^5.1.3", "webpack-dev-server": "^4.15.0", @@ -37050,17 +37083,17 @@ }, "packages/expo": { "name": "@clerk/clerk-expo", - "version": "0.20.11", + "version": "0.20.12", "license": "MIT", "dependencies": { - "@clerk/clerk-js": "4.70.6", - "@clerk/clerk-react": "4.30.7", - "@clerk/shared": "1.3.3", + "@clerk/clerk-js": "4.71.0", + "@clerk/clerk-react": "4.30.8", + "@clerk/shared": "1.4.0", "base-64": "1.0.0", "react-native-url-polyfill": "2.0.0" }, "devDependencies": { - "@clerk/types": "^3.62.1", + "@clerk/types": "^3.63.0", "@types/base-64": "^1.0.0", "@types/node": "^16.11.55", "@types/react": "*", @@ -37083,12 +37116,12 @@ }, "packages/fastify": { "name": "@clerk/fastify", - "version": "0.6.36", + "version": "0.6.37", "license": "MIT", "dependencies": { - "@clerk/backend": "0.38.3", - "@clerk/shared": "1.3.3", - "@clerk/types": "3.62.1", + "@clerk/backend": "0.38.4", + "@clerk/shared": "1.4.0", + "@clerk/types": "3.63.0", "cookies": "0.8.0" }, "devDependencies": { @@ -37104,13 +37137,13 @@ } }, "packages/gatsby-plugin-clerk": { - "version": "4.4.38", + "version": "4.4.39", "license": "MIT", "dependencies": { - "@clerk/backend": "0.38.3", - "@clerk/clerk-react": "4.30.7", - "@clerk/clerk-sdk-node": "4.13.11", - "@clerk/types": "3.62.1", + "@clerk/backend": "0.38.4", + "@clerk/clerk-react": "4.30.8", + "@clerk/clerk-sdk-node": "4.13.12", + "@clerk/types": "3.63.0", "cookie": "0.5.0", "tslib": "2.4.1" }, @@ -37133,10 +37166,10 @@ }, "packages/localizations": { "name": "@clerk/localizations", - "version": "1.26.16", + "version": "1.27.0", "license": "MIT", "dependencies": { - "@clerk/types": "3.62.1" + "@clerk/types": "3.63.0" }, "devDependencies": { "tsup": "*", @@ -37151,14 +37184,14 @@ }, "packages/nextjs": { "name": "@clerk/nextjs", - "version": "4.29.9", + "version": "4.29.10", "license": "MIT", "dependencies": { - "@clerk/backend": "0.38.3", - "@clerk/clerk-react": "4.30.7", - "@clerk/clerk-sdk-node": "4.13.11", - "@clerk/shared": "1.3.3", - "@clerk/types": "3.62.1", + "@clerk/backend": "0.38.4", + "@clerk/clerk-react": "4.30.8", + "@clerk/clerk-sdk-node": "4.13.12", + "@clerk/shared": "1.4.0", + "@clerk/types": "3.63.0", "path-to-regexp": "6.2.1", "tslib": "2.4.1" }, @@ -37190,11 +37223,11 @@ }, "packages/react": { "name": "@clerk/clerk-react", - "version": "4.30.7", + "version": "4.30.8", "license": "MIT", "dependencies": { - "@clerk/shared": "1.3.3", - "@clerk/types": "3.62.1", + "@clerk/shared": "1.4.0", + "@clerk/types": "3.63.0", "tslib": "2.4.1" }, "devDependencies": { @@ -37216,13 +37249,13 @@ }, "packages/remix": { "name": "@clerk/remix", - "version": "3.2.0", + "version": "3.2.1", "license": "MIT", "dependencies": { - "@clerk/backend": "0.38.3", - "@clerk/clerk-react": "4.30.7", - "@clerk/shared": "1.3.3", - "@clerk/types": "3.62.1", + "@clerk/backend": "0.38.4", + "@clerk/clerk-react": "4.30.8", + "@clerk/shared": "1.4.0", + "@clerk/types": "3.63.0", "cookie": "0.5.0", "tslib": "2.4.1" }, @@ -37251,12 +37284,12 @@ }, "packages/sdk-node": { "name": "@clerk/clerk-sdk-node", - "version": "4.13.11", + "version": "4.13.12", "license": "MIT", "dependencies": { - "@clerk/backend": "0.38.3", - "@clerk/shared": "1.3.3", - "@clerk/types": "3.62.1", + "@clerk/backend": "0.38.4", + "@clerk/shared": "1.4.0", + "@clerk/types": "3.63.0", "@types/cookies": "0.7.7", "@types/express": "4.17.14", "@types/node-fetch": "2.6.2", @@ -37292,7 +37325,7 @@ }, "packages/shared": { "name": "@clerk/shared", - "version": "1.3.3", + "version": "1.4.0", "license": "MIT", "dependencies": { "glob-to-regexp": "0.4.1", @@ -37300,7 +37333,7 @@ "swr": "2.2.0" }, "devDependencies": { - "@clerk/types": "3.62.1", + "@clerk/types": "3.63.0", "@types/glob-to-regexp": "0.4.1", "@types/js-cookie": "3.0.2", "tsup": "*", @@ -37317,10 +37350,10 @@ }, "packages/themes": { "name": "@clerk/themes", - "version": "1.7.10", + "version": "1.7.11", "license": "MIT", "dependencies": { - "@clerk/types": "3.62.1", + "@clerk/types": "3.63.0", "tslib": "2.4.1" }, "devDependencies": { @@ -37340,7 +37373,7 @@ }, "packages/types": { "name": "@clerk/types", - "version": "3.62.1", + "version": "3.63.0", "license": "MIT", "dependencies": { "csstype": "3.1.1" diff --git a/packages/clerk-js/package.json b/packages/clerk-js/package.json index 57fa1c8741d..d0b1dd78822 100644 --- a/packages/clerk-js/package.json +++ b/packages/clerk-js/package.json @@ -87,9 +87,10 @@ "react-refresh": "^0.14.0", "react-refresh-typescript": "^2.0.5", "semver": "^7.5.2", + "terser-webpack-plugin": "^5.3.10", "ts-loader": "^9.3.0", "typescript": "*", - "webpack": "^5.85.0", + "webpack": "^5.91.0", "webpack-bundle-analyzer": "^4.9.0", "webpack-cli": "^5.1.3", "webpack-dev-server": "^4.15.0", diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx index a64442b1e15..0d4c2849e0a 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx @@ -67,8 +67,8 @@ describe('MfaPage', () => { it('renders the "enabled" page upon clicking the button', async () => { const { wrapper, fixtures } = await createFixtures(initConfig); - //@ts-expect-error - fixtures.clerk.user?.phoneNumbers[0].setReservedForSecondFactor = jest + // @ts-ignore + fixtures.clerk.user!.phoneNumbers[0].setReservedForSecondFactor = jest .fn() .mockResolvedValue({} as PhoneNumberResource); const { userEvent } = render(, { wrapper }); diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveMfaPhoneCodePage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveMfaPhoneCodePage.test.tsx index 966691eccae..03a19fa9b45 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveMfaPhoneCodePage.test.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/RemoveMfaPhoneCodePage.test.tsx @@ -44,7 +44,7 @@ describe('RemoveMfaPhoneCodePage', () => { fixtures.router.params.id = 'id'; //@ts-expect-error - fixtures.clerk.user?.phoneNumbers[0].setReservedForSecondFactor = jest.fn().mockResolvedValue({}); + fixtures.clerk.user!.phoneNumbers[0].setReservedForSecondFactor = jest.fn().mockResolvedValue({}); const { userEvent } = render(, { wrapper }); await userEvent.click(screen.getByRole('button', { name: /continue/i })); diff --git a/packages/clerk-js/src/ui/elements/FormControl.tsx b/packages/clerk-js/src/ui/elements/FormControl.tsx index 2c4546a4a90..0eaec891a4f 100644 --- a/packages/clerk-js/src/ui/elements/FormControl.tsx +++ b/packages/clerk-js/src/ui/elements/FormControl.tsx @@ -213,10 +213,7 @@ export const FormFeedback = (props: FormFeedbackProps) => { }; }; - const FormInfoComponent: Record< - FeedbackType, - typeof FormErrorText | typeof FormInfoText | typeof FormSuccessText | typeof FormWarningText - > = { + const FormInfoComponent: Record = { error: FormErrorText, info: FormInfoText, success: FormSuccessText, diff --git a/packages/clerk-js/src/ui/hooks/usePrefersReducedMotion.ts b/packages/clerk-js/src/ui/hooks/usePrefersReducedMotion.ts index 9d39777c583..23fa361d2fc 100644 --- a/packages/clerk-js/src/ui/hooks/usePrefersReducedMotion.ts +++ b/packages/clerk-js/src/ui/hooks/usePrefersReducedMotion.ts @@ -13,9 +13,28 @@ export function usePrefersReducedMotion() { setPrefersReducedMotion(!event.matches); }; - mediaQueryList.addEventListener('change', listener); + const addListenerCompat = (event: any, handler: any) => { + if ('addEventListener' in mediaQueryList) { + return mediaQueryList.addEventListener(event, handler); + } else { + // @ts-expect-error This is a fix for Safari iOS 13.4 + // This version only supports the deprecated addListener method + // addListener accepts a single argument, which is the handler + return mediaQueryList.addListener(handler); + } + }; + + const removeListenerCompat = (event: any, handler: any) => { + if ('addEventListener' in mediaQueryList) { + return mediaQueryList.removeEventListener(event, handler); + } else { + // @ts-ignore same as above + return mediaQueryList.removeListener(handler); + } + }; - return () => mediaQueryList.removeEventListener('change', listener); + addListenerCompat('change', listener); + return () => removeListenerCompat('change', listener); }, []); return prefersReducedMotion; diff --git a/packages/clerk-js/src/ui/primitives/Flex.tsx b/packages/clerk-js/src/ui/primitives/Flex.tsx index aea983ee5e9..39ba9d37c69 100644 --- a/packages/clerk-js/src/ui/primitives/Flex.tsx +++ b/packages/clerk-js/src/ui/primitives/Flex.tsx @@ -4,6 +4,7 @@ import type { StateProps, StyleVariants } from '../styledSystem'; import { createVariants } from '../styledSystem'; import type { BoxProps } from './Box'; import { Box } from './Box'; +import { createFlexGapPropertyIosCompat } from './gapPropertyCompat'; const { applyVariants, filterProps } = createVariants(theme => ({ base: { @@ -35,15 +36,15 @@ const { applyVariants, filterProps } = createVariants(theme => ({ wrapReverse: { flexWrap: 'wrap-reverse' }, }, gap: { - 1: { gap: theme.space.$1 }, - 2: { gap: theme.space.$2 }, - 3: { gap: theme.space.$3 }, - 4: { gap: theme.space.$4 }, - 5: { gap: theme.space.$5 }, - 6: { gap: theme.space.$6 }, - 7: { gap: theme.space.$7 }, - 8: { gap: theme.space.$8 }, - 9: { gap: theme.space.$9 }, + 1: createFlexGapPropertyIosCompat(theme.space.$1), + 2: createFlexGapPropertyIosCompat(theme.space.$2), + 3: createFlexGapPropertyIosCompat(theme.space.$3), + 4: createFlexGapPropertyIosCompat(theme.space.$4), + 5: createFlexGapPropertyIosCompat(theme.space.$5), + 6: createFlexGapPropertyIosCompat(theme.space.$6), + 7: createFlexGapPropertyIosCompat(theme.space.$7), + 8: createFlexGapPropertyIosCompat(theme.space.$8), + 9: createFlexGapPropertyIosCompat(theme.space.$9), }, center: { true: { justifyContent: 'center', alignItems: 'center' }, diff --git a/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts b/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts new file mode 100644 index 00000000000..fc6bc00d233 --- /dev/null +++ b/packages/clerk-js/src/ui/primitives/gapPropertyCompat.ts @@ -0,0 +1,13 @@ +export const createFlexGapPropertyIosCompat = (val: string) => { + // Resolve gap property compatibility issue on iOS 13 + // This is not needed for css grid, only for flex + // TODO: Test whether we need to make the check more generic + if (navigator?.userAgent?.match(/(iphone|ipad).+os.+13.+safari/i)) { + return { + '& > * + *': { + marginTop: val, + }, + }; + } + return { gap: val }; +}; diff --git a/packages/clerk-js/tsconfig.json b/packages/clerk-js/tsconfig.json index feaf6864757..9228d4c506d 100644 --- a/packages/clerk-js/tsconfig.json +++ b/packages/clerk-js/tsconfig.json @@ -16,7 +16,7 @@ "resolveJsonModule": true, "sourceMap": false, "strict": true, - "target": "ES2019", + "target": "ES2020", "useUnknownInCatchVariables": false, "declaration": false, "jsx": "react-jsx", diff --git a/packages/clerk-js/webpack.config.js b/packages/clerk-js/webpack.config.js index 54ad82f7dc8..c2e5c03dd75 100644 --- a/packages/clerk-js/webpack.config.js +++ b/packages/clerk-js/webpack.config.js @@ -6,6 +6,7 @@ const { merge } = require('webpack-merge'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); const ReactRefreshTypeScript = require('react-refresh-typescript'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; +const TerserPlugin = require('terser-webpack-plugin'); const isProduction = mode => mode === 'production'; const isDevelopment = mode => !isProduction(mode); @@ -152,6 +153,23 @@ const commonForProd = () => { libraryTarget: 'umd', globalObject: 'globalThis', }, + optimization: { + minimize: true, + minimizer: [ + compiler => { + new TerserPlugin({ + terserOptions: { + compress: { + passes: 2, + }, + mangle: { + safari10: true, + }, + }, + }).apply(compiler); + }, + ], + }, plugins: [ // new webpack.optimize.LimitChunkCountPlugin({ // maxChunks: 5,