From d074928f651f7b911e3b227dc4ec62446d5d2792 Mon Sep 17 00:00:00 2001 From: Laurent AR Claes Date: Thu, 19 Mar 2026 12:40:26 +0200 Subject: [PATCH 1/3] BREAKING CHANGE: Migrate to React 19 - Upgrade react/react-dom from ^18.2.0 to ^19.0.0 - Upgrade @types/react/@types/react-dom to ^19.0.0 - Replace react-test-renderer with @testing-library/react (17 test files) - Remove forwardRef wrappers (Input, TextArea, Modal, react-map-gl mock) - Remove propTypes assignments (Collapsible, Toggle, Dropdown, Input) - Remove Deprecated validator from utils/prop-types - Fix useRef() calls to pass explicit initial values (5 files) - Migrate emotion v10 to @emotion/css v11 in CSS pipeline - Replace Context.Provider with Context (React 19 syntax) - Replace useContext with use() hook (React 19 API) - Fix ReactElement type casts for React 19 stricter typing - Fix styleguide webpack chunk filename conflict and router aliases - Remove deprecated TabNavigation page from styleguide - Regenerate all 64 test snapshots - Update peer dependency ranges to support React 19 (<21) Co-Authored-By: Claude Opus 4.6 (1M context) --- package-lock.json | 486 ++++++------------ package.json | 14 +- .../__tests__/example/components/a.js | 4 +- packages/extract-emotion/package.json | 4 +- packages/react-drylus/package-lock.json | 212 +++++--- packages/react-drylus/package.json | 13 +- .../src/__mocks__/react-map-gl.js | 6 +- .../react-drylus/src/base/ThemeProvider.tsx | 8 +- .../src/components/AlertsProvider.tsx | 8 +- .../src/components/Collapsible.tsx | 5 +- .../react-drylus/src/components/Dropdown.tsx | 6 +- .../react-drylus/src/components/Modal.tsx | 62 ++- .../react-drylus/src/components/Table.tsx | 12 +- .../react-drylus/src/components/Toggle.tsx | 5 +- .../__tests__/AttachmentBox.test.tsx | 20 +- .../src/components/__tests__/Button.test.tsx | 14 +- .../components/__tests__/Collapsible.test.tsx | 21 +- .../__tests__/LoadingPlaceholder.test.tsx | 6 +- .../components/__tests__/Paragraph.test.tsx | 8 +- .../components/__tests__/ProgressBar.test.tsx | 8 +- .../__tests__/SplashScreen.test.tsx | 6 +- .../__tests__/SteppedProgressBar.test.tsx | 16 +- .../src/components/__tests__/Text.test.tsx | 27 +- .../src/components/__tests__/Tile.test.tsx | 8 +- .../src/components/__tests__/Title.test.tsx | 20 +- .../__snapshots__/AttachmentBox.test.tsx.snap | 403 ++++----------- .../__snapshots__/Button.test.tsx.snap | 20 +- .../__snapshots__/Collapsible.test.tsx.snap | 57 +- .../LoadingPlaceholder.test.tsx.snap | 18 +- .../__snapshots__/Paragraph.test.tsx.snap | 6 +- .../__snapshots__/ProgressBar.test.tsx.snap | 30 +- .../__snapshots__/SplashScreen.test.tsx.snap | 149 +++++- .../SteppedProgressBar.test.tsx.snap | 192 +++---- .../__snapshots__/Text.test.tsx.snap | 14 +- .../__snapshots__/Tile.test.tsx.snap | 8 +- .../__snapshots__/Title.test.tsx.snap | 22 +- .../react-drylus/src/forms/InlineEdit.tsx | 4 +- packages/react-drylus/src/forms/Input.tsx | 24 +- packages/react-drylus/src/forms/TextArea.tsx | 6 +- .../src/forms/__tests__/Checkbox.test.tsx | 25 +- .../src/forms/__tests__/RadioGroup.test.tsx | 26 +- .../src/forms/__tests__/RangeInput.test.tsx | 14 +- .../__snapshots__/Checkbox.test.tsx.snap | 137 +++-- .../__snapshots__/RadioGroup.test.tsx.snap | 166 +++--- .../src/layout/__tests__/ListTile.test.tsx | 17 +- .../src/layout/__tests__/Margin.test.tsx | 14 +- .../src/layout/__tests__/Padding.test.tsx | 14 +- .../__snapshots__/ListTile.test.tsx.snap | 52 +- .../__snapshots__/Margin.test.tsx.snap | 8 +- .../__snapshots__/Padding.test.tsx.snap | 8 +- packages/react-drylus/src/utils/prop-types.ts | 11 - .../app/components/Playground/Playground.jsx | 4 +- .../pages/component-kit/components/index.js | 2 - packages/styleguide/package.json | 2 +- packages/styleguide/webpack.config.js | 6 +- packages/vanilla-drylus/package.json | 1 - .../src/styles/react-components.js | 2 +- packages/vanilla-drylus/webpack.config.js | 5 +- 58 files changed, 1083 insertions(+), 1383 deletions(-) diff --git a/package-lock.json b/package-lock.json index a3c402ee6..f51da66dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42,9 +42,10 @@ "@emotion/jest": "^11.14.0", "@mdx-js/loader": "^1.6.21", "@mdx-js/react": "^1.6.21", - "@types/react": "^18.2.0", - "@types/react-dom": "^18.2.0", - "@types/react-test-renderer": "^18.0.0", + "@testing-library/dom": "^10.4.1", + "@testing-library/react": "^16.0.0", + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", "@typescript-eslint/eslint-plugin": "^8.0.0", "@typescript-eslint/parser": "^8.0.0", "ajv": "^8.18.0", @@ -77,15 +78,14 @@ "mapbox-gl": "^3.19.0", "prettier": "^3.0.0", "prism-react-renderer": "^2.4.1", - "react": "^18.2.0", + "react": "^19.0.0", "react-calendar": "^6.0.0", "react-compound-slider": "^3.4.0", "react-docgen": "^5.4.3", - "react-dom": "^18.2.0", + "react-dom": "^19.0.0", "react-element-to-jsx-string": "^17.0.1", "react-map-gl": "^8.0.0", "react-select": "^5.10.2", - "react-test-renderer": "^18.2.0", "rimraf": "^6.0.0", "spark-md5": "^3.0.2", "style-loader": "^4.0.0", @@ -4138,13 +4138,6 @@ "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==", "license": "MIT" }, - "node_modules/@emotion/stylis": { - "version": "0.8.5", - "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==", - "dev": true, - "license": "MIT" - }, "node_modules/@emotion/unitless": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz", @@ -10232,6 +10225,89 @@ "dev": true, "license": "0BSD" }, + "node_modules/@testing-library/dom": { + "version": "10.4.1", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz", + "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "picocolors": "1.1.1", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@testing-library/dom/node_modules/ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/pretty-format": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", + "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1", + "ansi-styles": "^5.0.0", + "react-is": "^17.0.1" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + } + }, + "node_modules/@testing-library/dom/node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "dev": true, + "license": "MIT" + }, + "node_modules/@testing-library/react": { + "version": "16.3.2", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz", + "integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@testing-library/dom": "^10.0.0", + "@types/react": "^18.0.0 || ^19.0.0", + "@types/react-dom": "^18.0.0 || ^19.0.0", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@tokenizer/token": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz", @@ -10308,6 +10384,13 @@ "dev": true, "license": "0BSD" }, + "node_modules/@types/aria-query": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", + "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -10666,13 +10749,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@types/prop-types": { - "version": "15.7.15", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz", - "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==", - "dev": true, - "license": "MIT" - }, "node_modules/@types/qs": { "version": "6.15.0", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.15.0.tgz", @@ -10688,34 +10764,23 @@ "license": "MIT" }, "node_modules/@types/react": { - "version": "18.3.28", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz", - "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==", + "version": "19.2.14", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", + "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", "dev": true, "license": "MIT", "dependencies": { - "@types/prop-types": "*", "csstype": "^3.2.2" } }, "node_modules/@types/react-dom": { - "version": "18.3.7", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz", - "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==", + "version": "19.2.3", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz", + "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", "dev": true, "license": "MIT", "peerDependencies": { - "@types/react": "^18.0.0" - } - }, - "node_modules/@types/react-test-renderer": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.3.1.tgz", - "integrity": "sha512-vAhnk0tG2eGa37lkU9+s5SoroCsRI08xnsWFiAXOuPH2jqzMbcXvKExXViPi1P5fIklDeCvXqyrdmipFaSkZrA==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/react": "^18" + "@types/react": "^19.2.0" } }, "node_modules/@types/react-transition-group": { @@ -12043,6 +12108,16 @@ "sprintf-js": "~1.0.2" } }, + "node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "dequal": "^2.0.3" + } + }, "node_modules/arr-union": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz", @@ -12497,120 +12572,6 @@ "npm": ">=6" } }, - "node_modules/babel-plugin-emotion": { - "version": "10.2.2", - "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz", - "integrity": "sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/helper-module-imports": "^7.0.0", - "@emotion/hash": "0.8.0", - "@emotion/memoize": "0.7.4", - "@emotion/serialize": "^0.11.16", - "babel-plugin-macros": "^2.0.0", - "babel-plugin-syntax-jsx": "^6.18.0", - "convert-source-map": "^1.5.0", - "escape-string-regexp": "^1.0.5", - "find-root": "^1.1.0", - "source-map": "^0.5.7" - } - }, - "node_modules/babel-plugin-emotion/node_modules/@emotion/hash": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", - "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==", - "dev": true, - "license": "MIT" - }, - "node_modules/babel-plugin-emotion/node_modules/@emotion/memoize": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", - "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", - "dev": true, - "license": "MIT" - }, - "node_modules/babel-plugin-emotion/node_modules/@emotion/serialize": { - "version": "0.11.16", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", - "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@emotion/hash": "0.8.0", - "@emotion/memoize": "0.7.4", - "@emotion/unitless": "0.7.5", - "@emotion/utils": "0.11.3", - "csstype": "^2.5.7" - } - }, - "node_modules/babel-plugin-emotion/node_modules/@emotion/unitless": { - "version": "0.7.5", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", - "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==", - "dev": true, - "license": "MIT" - }, - "node_modules/babel-plugin-emotion/node_modules/@emotion/utils": { - "version": "0.11.3", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", - "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==", - "dev": true, - "license": "MIT" - }, - "node_modules/babel-plugin-emotion/node_modules/babel-plugin-macros": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz", - "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.7.2", - "cosmiconfig": "^6.0.0", - "resolve": "^1.12.0" - } - }, - "node_modules/babel-plugin-emotion/node_modules/convert-source-map": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", - "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", - "dev": true, - "license": "MIT" - }, - "node_modules/babel-plugin-emotion/node_modules/cosmiconfig": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", - "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/parse-json": "^4.0.0", - "import-fresh": "^3.1.0", - "parse-json": "^5.0.0", - "path-type": "^4.0.0", - "yaml": "^1.7.2" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/babel-plugin-emotion/node_modules/csstype": { - "version": "2.6.21", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz", - "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==", - "dev": true, - "license": "MIT" - }, - "node_modules/babel-plugin-emotion/node_modules/escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/babel-plugin-extract-import-names": { "version": "1.6.22", "resolved": "https://registry.npmjs.org/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.6.22.tgz", @@ -12832,13 +12793,6 @@ "node": ">=0.10.0" } }, - "node_modules/babel-plugin-syntax-jsx": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", - "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==", - "dev": true, - "license": "MIT" - }, "node_modules/babel-preset-current-node-syntax": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.2.0.tgz", @@ -14902,95 +14856,6 @@ "dev": true, "license": "GPL-3.0" }, - "node_modules/create-emotion": { - "version": "10.0.27", - "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-10.0.27.tgz", - "integrity": "sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@emotion/cache": "^10.0.27", - "@emotion/serialize": "^0.11.15", - "@emotion/sheet": "0.9.4", - "@emotion/utils": "0.11.3" - } - }, - "node_modules/create-emotion/node_modules/@emotion/cache": { - "version": "10.0.29", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", - "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@emotion/sheet": "0.9.4", - "@emotion/stylis": "0.8.5", - "@emotion/utils": "0.11.3", - "@emotion/weak-memoize": "0.2.5" - } - }, - "node_modules/create-emotion/node_modules/@emotion/hash": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", - "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==", - "dev": true, - "license": "MIT" - }, - "node_modules/create-emotion/node_modules/@emotion/memoize": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", - "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", - "dev": true, - "license": "MIT" - }, - "node_modules/create-emotion/node_modules/@emotion/serialize": { - "version": "0.11.16", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", - "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@emotion/hash": "0.8.0", - "@emotion/memoize": "0.7.4", - "@emotion/unitless": "0.7.5", - "@emotion/utils": "0.11.3", - "csstype": "^2.5.7" - } - }, - "node_modules/create-emotion/node_modules/@emotion/sheet": { - "version": "0.9.4", - "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", - "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==", - "dev": true, - "license": "MIT" - }, - "node_modules/create-emotion/node_modules/@emotion/unitless": { - "version": "0.7.5", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", - "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==", - "dev": true, - "license": "MIT" - }, - "node_modules/create-emotion/node_modules/@emotion/utils": { - "version": "0.11.3", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", - "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==", - "dev": true, - "license": "MIT" - }, - "node_modules/create-emotion/node_modules/@emotion/weak-memoize": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", - "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==", - "dev": true, - "license": "MIT" - }, - "node_modules/create-emotion/node_modules/csstype": { - "version": "2.6.21", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz", - "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==", - "dev": true, - "license": "MIT" - }, "node_modules/create-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", @@ -15437,6 +15302,16 @@ "dev": true, "license": "ISC" }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -15541,6 +15416,13 @@ "node": ">=0.10.0" } }, + "node_modules/dom-accessibility-api": { + "version": "0.5.16", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", + "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", + "dev": true, + "license": "MIT" + }, "node_modules/dom-converter": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", @@ -15784,17 +15666,6 @@ "node": ">= 4" } }, - "node_modules/emotion": { - "version": "10.0.27", - "resolved": "https://registry.npmjs.org/emotion/-/emotion-10.0.27.tgz", - "integrity": "sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==", - "dev": true, - "license": "MIT", - "dependencies": { - "babel-plugin-emotion": "^10.0.27", - "create-emotion": "^10.0.27" - } - }, "node_modules/encodeurl": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz", @@ -22665,6 +22536,16 @@ "dev": true, "license": "MIT" }, + "node_modules/lz-string": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", + "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", + "dev": true, + "license": "MIT", + "bin": { + "lz-string": "bin/bin.js" + } + }, "node_modules/make-dir": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", @@ -26347,14 +26228,11 @@ } }, "node_modules/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", - "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", + "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "dev": true, "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0" - }, "engines": { "node": ">=0.10.0" } @@ -26446,19 +26324,25 @@ } }, "node_modules/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", + "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "dev": true, "license": "MIT", "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" + "scheduler": "^0.27.0" }, "peerDependencies": { - "react": "^18.3.1" + "react": "^19.2.4" } }, + "node_modules/react-dom/node_modules/scheduler": { + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "dev": true, + "license": "MIT" + }, "node_modules/react-element-to-jsx-string": { "version": "17.0.1", "resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-17.0.1.tgz", @@ -26573,35 +26457,6 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, - "node_modules/react-shallow-renderer": { - "version": "16.15.0", - "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz", - "integrity": "sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==", - "dev": true, - "license": "MIT", - "dependencies": { - "object-assign": "^4.1.1", - "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependencies": { - "react": "^16.0.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/react-test-renderer": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.3.1.tgz", - "integrity": "sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA==", - "dev": true, - "license": "MIT", - "dependencies": { - "react-is": "^18.3.1", - "react-shallow-renderer": "^16.15.0", - "scheduler": "^0.23.2" - }, - "peerDependencies": { - "react": "^18.3.1" - } - }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -27674,16 +27529,6 @@ "node": ">=v12.22.7" } }, - "node_modules/scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0" - } - }, "node_modules/schema-utils": { "version": "4.3.3", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.3.tgz", @@ -32368,8 +32213,8 @@ "node": ">= 6.11.5" }, "peerDependencies": { - "emotion": "^10", - "react": ">=16.8.0 <20" + "@emotion/css": "^11.0.0", + "react": ">=16.8.0 <21" } }, "packages/extract-emotion/node_modules/agent-base": { @@ -32525,11 +32370,10 @@ "@babel/preset-typescript": "^7.27.0", "@types/jest": "^30.0.0", "@types/node": "^25.0.0", - "@types/react": "^18.2.0", - "@types/react-dom": "^18.2.0", - "@types/react-test-renderer": "^18.0.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", + "react": "^19.0.0", + "react-dom": "^19.0.0", "rimraf": "^6.0.1", "typedoc": "^0.28.17", "typescript": "^5.0.0" @@ -32543,10 +32387,10 @@ "countries-list": "^3.2.2", "country-state-city": "^3.2.1", "mapbox-gl": "^3.19.0", - "react": ">=16.8.0 <20", + "react": ">=16.8.0 <21", "react-calendar": "^6.0.0", "react-compound-slider": "^3.4.0", - "react-dom": ">=16.8.0 <20", + "react-dom": ">=16.8.0 <21", "react-map-gl": "^8.0.0", "react-select": "^5.10.2", "spark-md5": "^3.0.2" @@ -32629,9 +32473,7 @@ "dependencies": { "@drawbotics/react-drylus": "file:../react-drylus" }, - "devDependencies": { - "emotion": "10.0.27" - } + "devDependencies": {} } } } diff --git a/package.json b/package.json index 17c706e71..8c7feefef 100644 --- a/package.json +++ b/package.json @@ -68,9 +68,10 @@ "@emotion/jest": "^11.14.0", "@mdx-js/loader": "^1.6.21", "@mdx-js/react": "^1.6.21", - "@types/react": "^18.2.0", - "@types/react-dom": "^18.2.0", - "@types/react-test-renderer": "^18.0.0", + "@testing-library/dom": "^10.4.1", + "@testing-library/react": "^16.0.0", + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", "@typescript-eslint/eslint-plugin": "^8.0.0", "@typescript-eslint/parser": "^8.0.0", "ajv": "^8.18.0", @@ -103,15 +104,14 @@ "mapbox-gl": "^3.19.0", "prettier": "^3.0.0", "prism-react-renderer": "^2.4.1", - "react": "^18.2.0", + "react": "^19.0.0", "react-calendar": "^6.0.0", "react-compound-slider": "^3.4.0", "react-docgen": "^5.4.3", - "react-dom": "^18.2.0", + "react-dom": "^19.0.0", "react-element-to-jsx-string": "^17.0.1", "react-map-gl": "^8.0.0", "react-select": "^5.10.2", - "react-test-renderer": "^18.2.0", "rimraf": "^6.0.0", "spark-md5": "^3.0.2", "style-loader": "^4.0.0", @@ -133,8 +133,6 @@ "@drawbotics/vanilla-drylus": "file:packages/vanilla-drylus" }, "overrides": { - "emotion": "10.0.27", - "create-emotion": "10.0.27", "xml2js": ">=0.5.0", "tough-cookie": ">=4.1.3", "@octokit/request": ">=9.0.0", diff --git a/packages/extract-emotion/__tests__/example/components/a.js b/packages/extract-emotion/__tests__/example/components/a.js index d5b98deca..548827063 100644 --- a/packages/extract-emotion/__tests__/example/components/a.js +++ b/packages/extract-emotion/__tests__/example/components/a.js @@ -1,5 +1,5 @@ -import { cx as _cx } from "emotion"; -import { css as _css } from "emotion"; +import { cx as _cx } from "@emotion/css"; +import { css as _css } from "@emotion/css"; import React from 'react'; diff --git a/packages/extract-emotion/package.json b/packages/extract-emotion/package.json index c04f1988b..272c06d59 100644 --- a/packages/extract-emotion/package.json +++ b/packages/extract-emotion/package.json @@ -25,8 +25,8 @@ "memfs": "^4.0.0" }, "peerDependencies": { - "emotion": "^10", - "react": ">=16.8.0 <20" + "@emotion/css": "^11.0.0", + "react": ">=16.8.0 <21" }, "repository": { "type": "git", diff --git a/packages/react-drylus/package-lock.json b/packages/react-drylus/package-lock.json index 4d2c1d628..2cb18f250 100644 --- a/packages/react-drylus/package-lock.json +++ b/packages/react-drylus/package-lock.json @@ -22,13 +22,13 @@ "@babel/preset-env": "^7.26.9", "@babel/preset-react": "^7.26.3", "@babel/preset-typescript": "^7.27.0", + "@testing-library/dom": "^10.4.1", "@types/jest": "^30.0.0", "@types/node": "^25.0.0", - "@types/react": "^18.2.0", - "@types/react-dom": "^18.2.0", - "@types/react-test-renderer": "^18.0.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", + "react": "^19.0.0", + "react-dom": "^19.0.0", "rimraf": "^6.0.1", "typedoc": "^0.28.17", "typescript": "^5.0.0" @@ -42,10 +42,10 @@ "countries-list": "^3.2.2", "country-state-city": "^3.2.1", "mapbox-gl": "^3.19.0", - "react": ">=16.8.0 <20", + "react": ">=16.8.0 <21", "react-calendar": "^6.0.0", "react-compound-slider": "^3.4.0", - "react-dom": ">=16.8.0 <20", + "react-dom": ">=16.8.0 <21", "react-map-gl": "^8.0.0", "react-select": "^5.10.2", "spark-md5": "^3.0.2" @@ -94,7 +94,7 @@ }, "../drylus-style-vars": { "name": "@drawbotics/drylus-style-vars", - "version": "8.7.32", + "version": "8.7.37", "license": "UNLICENSED", "dependencies": { "tinycolor2": "^1.4.1" @@ -106,7 +106,7 @@ }, "../icons": { "name": "@drawbotics/icons", - "version": "8.7.32", + "version": "8.7.37", "license": "ISC", "devDependencies": { "@aws-sdk/client-cloudfront": "^3.0.0", @@ -1828,16 +1828,6 @@ "resolved": "../icons", "link": true }, - "node_modules/@drawbotics/use-screen-size": { - "version": "3.1.1", - "resolved": "https://npm.pkg.github.com/download/@Drawbotics/use-screen-size/3.1.1/19e861f61189a0b29795bca7b1fd08623ac78788", - "integrity": "sha512-hKoS7DgCsviQR8lGHZygZhRd0QChyMn4eFF8T/nI7yJYj2Lx5Yf/3wyF1RmEyAeHngmVM7G+CTKY5tvMBklpgQ==", - "license": "UNLICENSED", - "peerDependencies": { - "@drawbotics/drylus-style-vars": ">=8.0.0", - "react": ">=16.8.0" - } - }, "node_modules/@emotion/babel-plugin": { "version": "11.13.5", "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz", @@ -2174,6 +2164,68 @@ "dev": true, "license": "MIT" }, + "node_modules/@testing-library/dom": { + "version": "10.4.1", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz", + "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "picocolors": "1.1.1", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@testing-library/dom/node_modules/ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/pretty-format": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", + "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1", + "ansi-styles": "^5.0.0", + "react-is": "^17.0.1" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + } + }, + "node_modules/@testing-library/dom/node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/aria-query": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", + "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/hast": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", @@ -2238,42 +2290,24 @@ "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", "license": "MIT" }, - "node_modules/@types/prop-types": { - "version": "15.7.15", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz", - "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==", - "dev": true, - "license": "MIT" - }, "node_modules/@types/react": { - "version": "18.3.28", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz", - "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==", + "version": "19.2.14", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", + "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", "dev": true, "license": "MIT", "dependencies": { - "@types/prop-types": "*", "csstype": "^3.2.2" } }, "node_modules/@types/react-dom": { - "version": "18.3.7", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz", - "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==", + "version": "19.2.3", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz", + "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", "dev": true, "license": "MIT", "peerDependencies": { - "@types/react": "^18.0.0" - } - }, - "node_modules/@types/react-test-renderer": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.3.1.tgz", - "integrity": "sha512-vAhnk0tG2eGa37lkU9+s5SoroCsRI08xnsWFiAXOuPH2jqzMbcXvKExXViPi1P5fIklDeCvXqyrdmipFaSkZrA==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/react": "^18" + "@types/react": "^19.2.0" } }, "node_modules/@types/stack-utils": { @@ -2307,6 +2341,16 @@ "dev": true, "license": "MIT" }, + "node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -2345,6 +2389,16 @@ "dev": true, "license": "Python-2.0" }, + "node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "dequal": "^2.0.3" + } + }, "node_modules/babel-plugin-macros": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", @@ -2687,6 +2741,23 @@ } } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/dom-accessibility-api": { + "version": "0.5.16", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", + "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", + "dev": true, + "license": "MIT" + }, "node_modules/electron-to-chromium": { "version": "1.5.313", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.313.tgz", @@ -3233,18 +3304,6 @@ "dev": true, "license": "MIT" }, - "node_modules/loose-envify": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", - "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "license": "MIT", - "dependencies": { - "js-tokens": "^3.0.0 || ^4.0.0" - }, - "bin": { - "loose-envify": "cli.js" - } - }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -3262,6 +3321,16 @@ "dev": true, "license": "MIT" }, + "node_modules/lz-string": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", + "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", + "dev": true, + "license": "MIT", + "bin": { + "lz-string": "bin/bin.js" + } + }, "node_modules/make-dir": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", @@ -3548,29 +3617,25 @@ } }, "node_modules/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", - "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", + "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0" - }, "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", + "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "devOptional": true, "license": "MIT", "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" + "scheduler": "^0.27.0" }, "peerDependencies": { - "react": "^18.3.1" + "react": "^19.2.4" } }, "node_modules/react-is": { @@ -3758,14 +3823,11 @@ } }, "node_modules/scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", "devOptional": true, - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0" - } + "license": "MIT" }, "node_modules/semver": { "version": "6.3.1", diff --git a/packages/react-drylus/package.json b/packages/react-drylus/package.json index f44ad26ba..5df765125 100644 --- a/packages/react-drylus/package.json +++ b/packages/react-drylus/package.json @@ -85,10 +85,10 @@ "countries-list": "^3.2.2", "country-state-city": "^3.2.1", "mapbox-gl": "^3.19.0", - "react": ">=16.8.0 <20", + "react": ">=16.8.0 <21", "react-calendar": "^6.0.0", "react-compound-slider": "^3.4.0", - "react-dom": ">=16.8.0 <20", + "react-dom": ">=16.8.0 <21", "react-map-gl": "^8.0.0", "react-select": "^5.10.2", "spark-md5": "^3.0.2" @@ -152,11 +152,10 @@ "@babel/preset-typescript": "^7.27.0", "@types/jest": "^30.0.0", "@types/node": "^25.0.0", - "@types/react": "^18.2.0", - "@types/react-dom": "^18.2.0", - "@types/react-test-renderer": "^18.0.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", + "react": "^19.0.0", + "react-dom": "^19.0.0", "rimraf": "^6.0.1", "typedoc": "^0.28.17", "typescript": "^5.0.0" diff --git a/packages/react-drylus/src/__mocks__/react-map-gl.js b/packages/react-drylus/src/__mocks__/react-map-gl.js index be8307c45..cc65ab0a8 100644 --- a/packages/react-drylus/src/__mocks__/react-map-gl.js +++ b/packages/react-drylus/src/__mocks__/react-map-gl.js @@ -1,8 +1,8 @@ import React from 'react'; -const MapGL = React.forwardRef(function MapGL(props, ref) { - return React.createElement('div', { 'data-testid': 'map', ref }, props.children); -}); +function MapGL(props) { + return React.createElement('div', { 'data-testid': 'map', ref: props.ref }, props.children); +} export function Marker(props) { return React.createElement('div', { 'data-testid': 'marker' }, props.children); diff --git a/packages/react-drylus/src/base/ThemeProvider.tsx b/packages/react-drylus/src/base/ThemeProvider.tsx index 12aea68ad..e58c073ee 100644 --- a/packages/react-drylus/src/base/ThemeProvider.tsx +++ b/packages/react-drylus/src/base/ThemeProvider.tsx @@ -1,7 +1,7 @@ import { Global, css as globalCSS } from '@emotion/react'; import { css, cx } from '@emotion/css'; import { LazyMotion, domAnimation } from 'framer-motion'; -import React from 'react'; +import React, { use } from 'react'; import { Color } from '../enums'; import { Style } from '../types'; @@ -69,7 +69,7 @@ export const ThemeProvider = ({ ); return ( - +
- + ); }; export function useThemeColor(): Color { - return React.useContext(Context).themeColor; + return use(Context).themeColor; } diff --git a/packages/react-drylus/src/components/AlertsProvider.tsx b/packages/react-drylus/src/components/AlertsProvider.tsx index d5957283d..6cf2947c8 100644 --- a/packages/react-drylus/src/components/AlertsProvider.tsx +++ b/packages/react-drylus/src/components/AlertsProvider.tsx @@ -1,7 +1,7 @@ import sv from '@drawbotics/drylus-style-vars'; import { css, cx } from '@emotion/css'; import { AnimatePresence, m } from 'framer-motion'; -import React, { useEffect, useReducer, useState } from 'react'; +import React, { use, useEffect, useReducer, useState } from 'react'; import ReactDOM from 'react-dom'; import { ThemeProvider } from '../base/ThemeProvider'; @@ -214,7 +214,7 @@ export const AlertsProvider = ({ children }: AlertsProviderProps) => { if (!outletElement) return null; return ( - + {children} {ReactDOM.createPortal( @@ -237,10 +237,10 @@ export const AlertsProvider = ({ children }: AlertsProviderProps) => { , document.getElementById('alerts-outlet') as Element, )} - + ); }; export function useAlert() { - return React.useContext(Context); + return use(Context); } diff --git a/packages/react-drylus/src/components/Collapsible.tsx b/packages/react-drylus/src/components/Collapsible.tsx index 7fd090e2e..6a89fbe8f 100644 --- a/packages/react-drylus/src/components/Collapsible.tsx +++ b/packages/react-drylus/src/components/Collapsible.tsx @@ -5,7 +5,7 @@ import React, { ReactNode } from 'react'; import { Shade } from '../enums'; import { ListTile } from '../layout'; import { OnClickCallback, Style } from '../types'; -import { Deprecated, checkComponentProps } from '../utils'; +import { checkComponentProps } from '../utils'; import { Icon, IconType } from './Icon'; import { Label } from './Label'; import { Toggle } from './Toggle'; @@ -113,6 +113,3 @@ export const Collapsible = ({ ); }; -Collapsible.propTypes = { - icon: Deprecated, -}; diff --git a/packages/react-drylus/src/components/Dropdown.tsx b/packages/react-drylus/src/components/Dropdown.tsx index e9a4ec21f..9f0cb2d10 100644 --- a/packages/react-drylus/src/components/Dropdown.tsx +++ b/packages/react-drylus/src/components/Dropdown.tsx @@ -5,7 +5,7 @@ import React, { ReactNode, useEffect, useRef, useState } from 'react'; import { Category, Position, Shade, Size } from '../enums'; import { Padding } from '../layout'; import { Responsive, Style } from '../types'; -import { Deprecated, getEnumAsClass, useResponsiveProps } from '../utils'; +import { getEnumAsClass, useResponsiveProps } from '../utils'; import { Icon, IconType } from './Icon'; const styles = { @@ -211,10 +211,6 @@ export const DropdownOption = React.memo(({ responsive, ...rest }: DropdownOptio }); DropdownOption.displayName = 'DropdownOption'; -(DropdownOption as any).propTypes = { - icon: Deprecated, -}; - export interface DropdownLinkProps extends DropdownOptionProps { /** * The component used as link, defaults to the native 'a' diff --git a/packages/react-drylus/src/components/Modal.tsx b/packages/react-drylus/src/components/Modal.tsx index aabcce4fe..1dba1c5bf 100644 --- a/packages/react-drylus/src/components/Modal.tsx +++ b/packages/react-drylus/src/components/Modal.tsx @@ -145,33 +145,39 @@ export interface BaseModalProps { style?: Style; } -export const BaseModal = React.forwardRef( - ({ children, onClickClose, footer, size = Size.DEFAULT, title, style }: BaseModalProps, ref) => ( -
- {onClickClose != null ? ( -
-
- ) : null} - {title != null ? ( -
- - {title} - -
- ) : null} -
{children}
- {footer != null ?
{footer}
: null} -
- ), +export const BaseModal = ({ + children, + onClickClose, + footer, + size = Size.DEFAULT, + title, + style, + ref, +}: BaseModalProps & { ref?: React.Ref }) => ( +
+ {onClickClose != null ? ( +
+
+ ) : null} + {title != null ? ( +
+ + {title} + +
+ ) : null} +
{children}
+ {footer != null ?
{footer}
: null} +
); BaseModal.displayName = 'BaseModal'; @@ -232,7 +238,7 @@ export const Modal = ({ responsive, ...rest }: ModalProps): React.ReactPortal | const [outletElement, setOutletElement] = useState(); const [overflowing, setOverflowing] = useState(false); - const previousTouchYRef = useRef(); + const previousTouchYRef = useRef(undefined); const { screenSize, ScreenSizes } = useScreenSize(); const modalElement = useRef(null); const containerElement = useRef(null); diff --git a/packages/react-drylus/src/components/Table.tsx b/packages/react-drylus/src/components/Table.tsx index 587390372..2a4841760 100644 --- a/packages/react-drylus/src/components/Table.tsx +++ b/packages/react-drylus/src/components/Table.tsx @@ -7,8 +7,8 @@ import React, { Fragment, ReactNode, createContext, + use, useCallback, - useContext, useEffect, useMemo, useRef, @@ -511,7 +511,7 @@ export const TRow = ({ animated, responsive = true, }: TRowProps) => { - const [rowsStates, handleSetRowState] = useContext(RowsContext); + const [rowsStates, handleSetRowState] = use(RowsContext); const collapsed = nested && !rowsStates[nested]; const animationProps = animated && !collapsed @@ -1085,8 +1085,8 @@ export const Table = ({ checkComponentProps({ children }, { children: [TBody, THead] }); } - const scrollRafRef = useRef(); - const resizeRafRef = useRef(); + const scrollRafRef = useRef(undefined); + const resizeRafRef = useRef(undefined); const updateScrollAmount = useCallback(() => { if (scrollableRef.current != null && tableRef.current != null) { @@ -1276,7 +1276,7 @@ export const Table = ({ }, className, )}> - + {run(() => { if (header && isLoading) { return ; @@ -1286,7 +1286,7 @@ export const Table = ({ return transformedChildren; } })} - + ); diff --git a/packages/react-drylus/src/components/Toggle.tsx b/packages/react-drylus/src/components/Toggle.tsx index f334cd36d..23f87ca6e 100644 --- a/packages/react-drylus/src/components/Toggle.tsx +++ b/packages/react-drylus/src/components/Toggle.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { Size } from '../enums'; import { Responsive, Style } from '../types'; -import { Deprecated, getIconContent, isFunction, useResponsiveProps } from '../utils'; +import { getIconContent, isFunction, useResponsiveProps } from '../utils'; const TRIGGER_DIMENSIONS = '18px'; const TOGGLE_PADDING = '3px'; @@ -113,6 +113,3 @@ export const Toggle = ({ responsive, ...rest }: ToggleProps ); }; -Toggle.propTypes = { - size: Deprecated, -}; diff --git a/packages/react-drylus/src/components/__tests__/AttachmentBox.test.tsx b/packages/react-drylus/src/components/__tests__/AttachmentBox.test.tsx index ba716d820..a108a0081 100644 --- a/packages/react-drylus/src/components/__tests__/AttachmentBox.test.tsx +++ b/packages/react-drylus/src/components/__tests__/AttachmentBox.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { create } from 'react-test-renderer'; +import { render } from '@testing-library/react'; import { AttachmentBox } from '../AttachmentBox'; @@ -23,41 +23,41 @@ const completedAttachment = { describe('AttachmentBox', () => { describe('matches snapshot when', () => { it('is given the simplest attachment', () => { - const tree = create().toJSON(); + const tree = render().container.firstChild; expect(tree).toMatchSnapshot(); }); it('is given attachment with progress', () => { - const tree = create( + const tree = render( , - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); it('is given a completed attachment', () => { - const tree = create( + const tree = render( , - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); it('can download attachment', () => { - const tree = create( + const tree = render( {}} />, - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); it('can remove attachment', () => { - const tree = create( + const tree = render( {}} />, - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); }); diff --git a/packages/react-drylus/src/components/__tests__/Button.test.tsx b/packages/react-drylus/src/components/__tests__/Button.test.tsx index d7c39e18e..f06ee7b2a 100644 --- a/packages/react-drylus/src/components/__tests__/Button.test.tsx +++ b/packages/react-drylus/src/components/__tests__/Button.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { create } from 'react-test-renderer'; +import { render } from '@testing-library/react'; import { Category, Size, Tier } from '../../enums'; import { Button } from '../Button'; @@ -8,32 +8,32 @@ import { Icon } from '../Icon'; describe('Button', () => { describe('matches snapshot when', () => { it('is basic', () => { - const tree = create().toJSON(); + const tree = render().container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a category', () => { - const tree = create().toJSON(); + const tree = render().container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a tier', () => { - const tree = create().toJSON(); + const tree = render().container.firstChild; expect(tree).toMatchSnapshot(); }); it('is small', () => { - const tree = create().toJSON(); + const tree = render().container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a leading component', () => { - const tree = create().toJSON(); + const tree = render().container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a trailing component', () => { - const tree = create().toJSON(); + const tree = render().container.firstChild; expect(tree).toMatchSnapshot(); }); }); diff --git a/packages/react-drylus/src/components/__tests__/Collapsible.test.tsx b/packages/react-drylus/src/components/__tests__/Collapsible.test.tsx index 6001ef3fd..c38c39356 100644 --- a/packages/react-drylus/src/components/__tests__/Collapsible.test.tsx +++ b/packages/react-drylus/src/components/__tests__/Collapsible.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { create } from 'react-test-renderer'; +import { render } from '@testing-library/react'; import { Collapsible } from '../Collapsible'; import { Text } from '../Text'; @@ -7,29 +7,29 @@ import { Text } from '../Text'; describe('Collapsible', () => { describe('matches snapshot when', () => { it('is not open', () => { - const tree = create( + const tree = render( Collapsible content , - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); it('is open', () => { - const tree = create( + const tree = render( Collapsible content , - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); it('the title is a node', () => { - const tree = create( + const tree = render( The title} isOpen={true}> Collapsible content , - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); }); @@ -40,13 +40,14 @@ describe('Collapsible', () => { expect(open).toBeFalsy(); - const component = create( - (open = true)}> + const onClick = jest.fn(() => { open = true; }); + render( + Collapsible content , ); - component.root.props.onClick(); + onClick(); expect(open).toBeTruthy(); }); diff --git a/packages/react-drylus/src/components/__tests__/LoadingPlaceholder.test.tsx b/packages/react-drylus/src/components/__tests__/LoadingPlaceholder.test.tsx index 0aeab8a35..97651ad89 100644 --- a/packages/react-drylus/src/components/__tests__/LoadingPlaceholder.test.tsx +++ b/packages/react-drylus/src/components/__tests__/LoadingPlaceholder.test.tsx @@ -1,17 +1,17 @@ import React from 'react'; -import { create } from 'react-test-renderer'; +import { render } from '@testing-library/react'; import { LoadingPlaceholder } from '../LoadingPlaceholder'; describe('LoadingPlaceholder', () => { describe('matches snapshot when', () => { it('has no specified sizes', () => { - const tree = create().toJSON(); + const tree = render().container.firstChild; expect(tree).toMatchSnapshot(); }); it('has custom sizes', () => { - const tree = create().toJSON(); + const tree = render().container.firstChild; expect(tree).toMatchSnapshot(); }); }); diff --git a/packages/react-drylus/src/components/__tests__/Paragraph.test.tsx b/packages/react-drylus/src/components/__tests__/Paragraph.test.tsx index 0fe86b5f0..b5b9ea882 100644 --- a/packages/react-drylus/src/components/__tests__/Paragraph.test.tsx +++ b/packages/react-drylus/src/components/__tests__/Paragraph.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { create } from 'react-test-renderer'; +import { render } from '@testing-library/react'; import { Align } from '../../enums'; import { Paragraph } from '../Paragraph'; @@ -7,17 +7,17 @@ import { Paragraph } from '../Paragraph'; describe('Paragraph', () => { describe('matches snapshot when', () => { it('is aligned to the left', () => { - const tree = create(Some content).toJSON(); + const tree = render(Some content).container.firstChild; expect(tree).toMatchSnapshot(); }); it('is aligned to the right', () => { - const tree = create(Some content).toJSON(); + const tree = render(Some content).container.firstChild; expect(tree).toMatchSnapshot(); }); it('is center aligned', () => { - const tree = create(Some content).toJSON(); + const tree = render(Some content).container.firstChild; expect(tree).toMatchSnapshot(); }); }); diff --git a/packages/react-drylus/src/components/__tests__/ProgressBar.test.tsx b/packages/react-drylus/src/components/__tests__/ProgressBar.test.tsx index 8dfd76296..99c24489d 100644 --- a/packages/react-drylus/src/components/__tests__/ProgressBar.test.tsx +++ b/packages/react-drylus/src/components/__tests__/ProgressBar.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { create } from 'react-test-renderer'; +import { render } from '@testing-library/react'; import { Color, Size } from '../../enums'; import { ProgressBar } from '../ProgressBar'; @@ -7,17 +7,17 @@ import { ProgressBar } from '../ProgressBar'; describe('ProgressBar', () => { describe('matches snapshot when', () => { it('has a value', () => { - const tree = create().toJSON(); + const tree = render().container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a color', () => { - const tree = create().toJSON(); + const tree = render().container.firstChild; expect(tree).toMatchSnapshot(); }); it('is small', () => { - const tree = create().toJSON(); + const tree = render().container.firstChild; expect(tree).toMatchSnapshot(); }); }); diff --git a/packages/react-drylus/src/components/__tests__/SplashScreen.test.tsx b/packages/react-drylus/src/components/__tests__/SplashScreen.test.tsx index 8a26f06c4..3ede54cce 100644 --- a/packages/react-drylus/src/components/__tests__/SplashScreen.test.tsx +++ b/packages/react-drylus/src/components/__tests__/SplashScreen.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { create } from 'react-test-renderer'; +import { render } from '@testing-library/react'; import { SplashScreen } from '../SplashScreen'; @@ -17,14 +17,14 @@ describe('SplashScreen', () => { describe('matches snapshot when', () => { it('is visible without text', () => { - const tree = create().toJSON(); + const tree = render().container.firstChild; expect(tree).toMatchSnapshot(); }); // TODO put back when this is fixed https://github.com/framer/motion/issues/410 // eslint-disable-next-line jest/no-commented-out-tests // it('is visible with some text', () => { - // const tree = create().toJSON(); + // const tree = render().container.firstChild; // expect(tree).toMatchSnapshot(); // }); }); diff --git a/packages/react-drylus/src/components/__tests__/SteppedProgressBar.test.tsx b/packages/react-drylus/src/components/__tests__/SteppedProgressBar.test.tsx index 45a33db79..6684dade2 100644 --- a/packages/react-drylus/src/components/__tests__/SteppedProgressBar.test.tsx +++ b/packages/react-drylus/src/components/__tests__/SteppedProgressBar.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { create } from 'react-test-renderer'; +import { render } from '@testing-library/react'; import { Color, Size } from '../../enums'; import { SteppedProgressBar } from '../SteppedProgressBar'; @@ -7,28 +7,28 @@ import { SteppedProgressBar } from '../SteppedProgressBar'; describe('SteppedProgressBar', () => { describe('matches snapshot when', () => { it('has 4 steps', () => { - const tree = create().toJSON(); + const tree = render().container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a color', () => { - const tree = create( + const tree = render( , - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); it('is small', () => { - const tree = create( + const tree = render( , - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a percentage', () => { - const tree = create( + const tree = render( , - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); }); diff --git a/packages/react-drylus/src/components/__tests__/Text.test.tsx b/packages/react-drylus/src/components/__tests__/Text.test.tsx index 531f3e6f3..876b0ab9e 100644 --- a/packages/react-drylus/src/components/__tests__/Text.test.tsx +++ b/packages/react-drylus/src/components/__tests__/Text.test.tsx @@ -1,6 +1,5 @@ -import { get } from '../../utils/helpers'; import React from 'react'; -import { create } from 'react-test-renderer'; +import { render } from '@testing-library/react'; import { Category, Size } from '../../enums'; import { Text } from '../Text'; @@ -10,39 +9,39 @@ import { TextLink } from '../TextLink'; describe('Text', () => { describe('matches snapshot when it', () => { it('has children', () => { - const tree = create(Text content).toJSON(); + const tree = render(Text content).container.firstChild; expect(tree).toMatchSnapshot(); }); it('is bold', () => { - const tree = create(Text content).toJSON(); + const tree = render(Text content).container.firstChild; expect(tree).toMatchSnapshot(); }); it('is light and inversed', () => { - const tree = create( + const tree = render( Text content , - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a size and category', () => { - const tree = create( + const tree = render( Text content , - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); it('has Text and TextLink as children', () => { - const tree = create( + const tree = render( Text content nested with a link , - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); }); @@ -50,8 +49,8 @@ describe('Text', () => { it('contains a date', () => { const date = new Date('2020-06-04 18:00'); - const tree = create({date}).toJSON(); - const children = get(tree, 'children[0]', ''); + const { container } = render({date}); + const children = container.textContent; expect(children).toEqual('Thu 4 Jun, 6:00 PM'); }); @@ -59,8 +58,8 @@ describe('Text', () => { it('contains a price', () => { const price = { value: 10000, currency: 'GBP' }; - const tree = create({price}).toJSON(); - const children = get(tree, 'children[0]', ''); + const { container } = render({price}); + const children = container.textContent; expect(children).toEqual('£10,000'); }); diff --git a/packages/react-drylus/src/components/__tests__/Tile.test.tsx b/packages/react-drylus/src/components/__tests__/Tile.test.tsx index 29019d9eb..739a10edb 100644 --- a/packages/react-drylus/src/components/__tests__/Tile.test.tsx +++ b/packages/react-drylus/src/components/__tests__/Tile.test.tsx @@ -1,22 +1,22 @@ import React from 'react'; -import { create } from 'react-test-renderer'; +import { render } from '@testing-library/react'; import { Tile } from '../Tile'; describe('Tile', () => { describe('matches snapshot when', () => { it('has a title', () => { - const tree = create(Tile content).toJSON(); + const tree = render(Tile content).container.firstChild; expect(tree).toMatchSnapshot(); }); it('does not have a title', () => { - const tree = create(Tile content).toJSON(); + const tree = render(Tile content).container.firstChild; expect(tree).toMatchSnapshot(); }); it('does not have any padding', () => { - const tree = create(Tile content).toJSON(); + const tree = render(Tile content).container.firstChild; expect(tree).toMatchSnapshot(); }); }); diff --git a/packages/react-drylus/src/components/__tests__/Title.test.tsx b/packages/react-drylus/src/components/__tests__/Title.test.tsx index 5c8ad0358..73af93c67 100644 --- a/packages/react-drylus/src/components/__tests__/Title.test.tsx +++ b/packages/react-drylus/src/components/__tests__/Title.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { create } from 'react-test-renderer'; +import { render } from '@testing-library/react'; import { Align } from '../../enums'; import { Title } from '../Title'; @@ -7,46 +7,46 @@ import { Title } from '../Title'; describe('Title', () => { describe('matches snapshot when', () => { it('has a h1 size', () => { - const tree = create(Title content).toJSON(); + const tree = render(Title content).container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a h2 size', () => { - const tree = create(Title content).toJSON(); + const tree = render(Title content).container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a h3 size', () => { - const tree = create(Title content).toJSON(); + const tree = render(Title content).container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a h4 size', () => { - const tree = create(Title content).toJSON(); + const tree = render(Title content).container.firstChild; expect(tree).toMatchSnapshot(); }); it('does not have margins', () => { - const tree = create(Title content).toJSON(); + const tree = render(Title content).container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a node as children', () => { - const tree = create( + const tree = render( <span style={{ fontWeight: 500 }}>Some </span> content , - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); it('is aligned to the right', () => { - const tree = create(Some content).toJSON(); + const tree = render(Some content).container.firstChild; expect(tree).toMatchSnapshot(); }); it('is center aligned', () => { - const tree = create(Some content).toJSON(); + const tree = render(Some content).container.firstChild; expect(tree).toMatchSnapshot(); }); }); diff --git a/packages/react-drylus/src/components/__tests__/__snapshots__/AttachmentBox.test.tsx.snap b/packages/react-drylus/src/components/__tests__/__snapshots__/AttachmentBox.test.tsx.snap index ecd30a6d8..661b592f6 100644 --- a/packages/react-drylus/src/components/__tests__/__snapshots__/AttachmentBox.test.tsx.snap +++ b/packages/react-drylus/src/components/__tests__/__snapshots__/AttachmentBox.test.tsx.snap @@ -245,126 +245,82 @@ exports[`AttachmentBox matches snapshot when can download attachment 1`] = ` }
CompleteFile.jpg
@@ -549,73 +505,45 @@ exports[`AttachmentBox matches snapshot when can remove attachment 1`] = ` }
FirstFile.jpg @@ -624,24 +552,18 @@ exports[`AttachmentBox matches snapshot when can remove attachment 1`] = `
@@ -861,105 +783,67 @@ exports[`AttachmentBox matches snapshot when is given a completed attachment 1`] }
CompleteFile.jpg
@@ -1179,105 +1063,67 @@ exports[`AttachmentBox matches snapshot when is given attachment with progress 1 }
ProgressFile.jpg
@@ -1454,73 +1300,45 @@ exports[`AttachmentBox matches snapshot when is given the simplest attachment 1` }
FirstFile.jpg @@ -1529,11 +1347,10 @@ exports[`AttachmentBox matches snapshot when is given the simplest attachment 1`
diff --git a/packages/react-drylus/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react-drylus/src/components/__tests__/__snapshots__/Button.test.tsx.snap index 7daf4898c..36f87dbb3 100644 --- a/packages/react-drylus/src/components/__tests__/__snapshots__/Button.test.tsx.snap +++ b/packages/react-drylus/src/components/__tests__/__snapshots__/Button.test.tsx.snap @@ -56,7 +56,7 @@ exports[`Button matches snapshot when has a category 1`] = ` } @@ -336,7 +336,7 @@ exports[`Button matches snapshot when is basic 1`] = ` } } />).toJSON(); + const tree = render(Button} />).container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a trailing and leading component', () => { - const tree = create( + const tree = render( Trailing} leading={} />, - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); }); @@ -39,9 +39,10 @@ describe('ListTile', () => { expect(triggered).toBeFalsy(); - const component = create( (triggered = true)} />); + const onClick = jest.fn(() => { triggered = true; }); + render(); - component.root.props.onClick(); + onClick(); expect(triggered).toBeTruthy(); }); diff --git a/packages/react-drylus/src/layout/__tests__/Margin.test.tsx b/packages/react-drylus/src/layout/__tests__/Margin.test.tsx index 1001cbd33..1e523076d 100644 --- a/packages/react-drylus/src/layout/__tests__/Margin.test.tsx +++ b/packages/react-drylus/src/layout/__tests__/Margin.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { create } from 'react-test-renderer'; +import { render } from '@testing-library/react'; import { Size } from '../../enums'; import { Margin } from '../Margin'; @@ -7,17 +7,17 @@ import { Margin } from '../Margin'; describe('Margin', () => { describe('matches snapshot when', () => { it('has a uniform size', () => { - const tree = create(Content).toJSON(); + const tree = render(Content).container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a size only on 1 side', () => { - const tree = create(Content).toJSON(); + const tree = render(Content).container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a different size on each side', () => { - const tree = create( + const tree = render( { }}> Content , - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); it('has vertical and horizontal sizes', () => { - const tree = create( + const tree = render( { }}> Content , - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); }); diff --git a/packages/react-drylus/src/layout/__tests__/Padding.test.tsx b/packages/react-drylus/src/layout/__tests__/Padding.test.tsx index 088216eab..eb79b8b1f 100644 --- a/packages/react-drylus/src/layout/__tests__/Padding.test.tsx +++ b/packages/react-drylus/src/layout/__tests__/Padding.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { create } from 'react-test-renderer'; +import { render } from '@testing-library/react'; import { Size } from '../../enums'; import { Padding } from '../Padding'; @@ -7,17 +7,17 @@ import { Padding } from '../Padding'; describe('Padding', () => { describe('matches snapshot when', () => { it('has a uniform size', () => { - const tree = create(Content).toJSON(); + const tree = render(Content).container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a size only on 1 side', () => { - const tree = create(Content).toJSON(); + const tree = render(Content).container.firstChild; expect(tree).toMatchSnapshot(); }); it('has a different size on each side', () => { - const tree = create( + const tree = render( { }}> Content , - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); it('has vertical and horizontal sizes', () => { - const tree = create( + const tree = render( { }}> Content , - ).toJSON(); + ).container.firstChild; expect(tree).toMatchSnapshot(); }); }); diff --git a/packages/react-drylus/src/layout/__tests__/__snapshots__/ListTile.test.tsx.snap b/packages/react-drylus/src/layout/__tests__/__snapshots__/ListTile.test.tsx.snap index 8d571cd79..39dd95639 100644 --- a/packages/react-drylus/src/layout/__tests__/__snapshots__/ListTile.test.tsx.snap +++ b/packages/react-drylus/src/layout/__tests__/__snapshots__/ListTile.test.tsx.snap @@ -70,17 +70,16 @@ exports[`ListTile matches snapshot when has a custom title 1`] = ` }
Title