From 324f41f6817d58e5a9fbe2420a2e7c3b64e80131 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 9 Sep 2025 08:42:48 +0000 Subject: [PATCH 1/9] Initial plan From a7933bca28406a26eeaedc841078a093106e386b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 9 Sep 2025 09:17:35 +0000 Subject: [PATCH 2/9] feat: upgrade React to v19.1.1 and ReactDOM to v19.1.1 --- module/package-lock.json | 314 +++++++++--------- module/package.json | 12 +- .../components/button/button.component.tsx | 10 +- .../characterLimit.component.tsx | 2 +- .../checkbox/checkbox.component.tsx | 8 +- .../checkboxList/checkboxList.component.tsx | 4 +- .../codeInput/codeInput.component.tsx | 2 +- .../src/components/config/config.context.tsx | 16 +- .../dateTimeInput/dateTimeInput.component.tsx | 21 -- .../components/dialog/dialog.component.tsx | 4 +- module/src/components/dialog/dialog.hooks.ts | 2 +- .../expandable/expandable.component.tsx | 3 - .../radioGroup/radioGroup.component.tsx | 7 +- .../rangeInput/rangeInput.component.tsx | 4 +- .../components/rating/rating.component.tsx | 9 +- .../components/rating/rating.utils.spec.ts | 2 +- module/src/components/rating/rating.utils.ts | 6 +- .../components/select/select.component.tsx | 16 +- .../components/spinner/spinner.component.tsx | 5 +- .../components/status/status.component.tsx | 4 +- .../statusWrapper/statusWrapper.component.tsx | 2 +- .../src/components/toast/toast.component.tsx | 2 +- module/src/components/toast/toast.context.tsx | 2 +- .../components/tooltip/tooltip.component.tsx | 3 - module/src/form/types.ts | 8 +- module/src/hooks/useDebounce.ts | 2 +- module/src/hooks/usePreviousValue.ts | 2 +- module/src/hooks/useResizeObserver.ts | 2 +- module/src/types/reactExtensions.ts | 2 +- storybook/package-lock.json | 244 ++++++++------ storybook/package.json | 8 +- 31 files changed, 355 insertions(+), 373 deletions(-) diff --git a/module/package-lock.json b/module/package-lock.json index 1495dbf6..99df6e7f 100644 --- a/module/package-lock.json +++ b/module/package-lock.json @@ -42,9 +42,9 @@ "@types/glob": "8.1.0", "@types/jest": "29.5.3", "@types/lodash": "4.14.195", - "@types/react": "18.3.1", + "@types/react": "^19.1.12", "@types/react-datepicker": "4.11.2", - "@types/react-dom": "18.3.1", + "@types/react-dom": "^19.1.9", "chokidar": "3.5.3", "concurrently": "8.2.0", "http-server": "14.1.1", @@ -53,8 +53,8 @@ "jest-config": "29.6.1", "jest-environment-jsdom": "29.6.1", "jest-junit": "16.0.0", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "^19.1.1", + "react-dom": "^19.1.1", "sass": "1.63.6", "scss-concat": "0.3.9", "semantic-release": "21.0.7", @@ -72,8 +72,8 @@ }, "peerDependencies": { "date-fns": "2.x", - "react": "18.x", - "react-dom": "18.x", + "react": "19.x", + "react-dom": "19.x", "zod": "3.*" } }, @@ -6660,6 +6660,43 @@ "react": ">=16" } }, + "node_modules/@storybook/addon-docs/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==", + "dev": true, + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@storybook/addon-docs/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==", + "dev": true, + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" + }, + "peerDependencies": { + "react": "^18.3.1" + } + }, + "node_modules/@storybook/addon-docs/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/@storybook/blocks": { "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.4.7.tgz", @@ -7036,6 +7073,16 @@ "node": ">=14" } }, + "node_modules/@testing-library/react/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==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "@types/react": "^18.0.0" + } + }, "node_modules/@testing-library/react/node_modules/aria-query": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", @@ -7302,17 +7349,12 @@ "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==" }, - "node_modules/@types/prop-types": { - "version": "15.7.14", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", - "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==" - }, "node_modules/@types/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz", - "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==", + "version": "19.1.12", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz", + "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==", + "license": "MIT", "dependencies": { - "@types/prop-types": "*", "csstype": "^3.0.2" } }, @@ -7329,12 +7371,13 @@ } }, "node_modules/@types/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", - "devOptional": true, - "dependencies": { - "@types/react": "*" + "version": "19.1.9", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz", + "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "@types/react": "^19.0.0" } }, "node_modules/@types/react-transition-group": { @@ -19569,12 +19612,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==", - "dependencies": { - "loose-envify": "^1.1.0" - }, + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz", + "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", + "dev": true, + "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -19597,15 +19639,16 @@ } }, "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.1.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz", + "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==", + "dev": true, + "license": "MIT", "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" + "scheduler": "^0.26.0" }, "peerDependencies": { - "react": "^18.3.1" + "react": "^19.1.1" } }, "node_modules/react-fast-compare": { @@ -20305,12 +20348,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==", - "dependencies": { - "loose-envify": "^1.1.0" - } + "version": "0.26.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz", + "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==", + "dev": true, + "license": "MIT" }, "node_modules/scss-concat": { "version": "0.3.9", @@ -22645,22 +22687,6 @@ } } }, - "node_modules/vite-plugin-sdk/node_modules/rollup": { - "version": "2.79.2", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz", - "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==", - "dev": true, - "peer": true, - "bin": { - "rollup": "dist/bin/rollup" - }, - "engines": { - "node": ">=10.0.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, "node_modules/vite-plugin-sdk/node_modules/rollup-plugin-rename-node-modules": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/rollup-plugin-rename-node-modules/-/rollup-plugin-rename-node-modules-1.3.1.tgz", @@ -23926,8 +23952,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz", "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==", - "dev": true, - "requires": {} + "dev": true }, "@emotion/babel-plugin": { "version": "11.13.5", @@ -23999,8 +24024,7 @@ "@emotion/use-insertion-effect-with-fallbacks": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz", - "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==", - "requires": {} + "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==" } } }, @@ -24844,8 +24868,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/ajv-draft-04/-/ajv-draft-04-1.0.0.tgz", "integrity": "sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==", - "dev": true, - "requires": {} + "dev": true }, "fs-extra": { "version": "7.0.1", @@ -24963,8 +24986,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/ajv-draft-04/-/ajv-draft-04-1.0.0.tgz", "integrity": "sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==", - "dev": true, - "requires": {} + "dev": true }, "fs-extra": { "version": "7.0.1", @@ -27140,8 +27162,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/ajv-draft-04/-/ajv-draft-04-1.0.0.tgz", "integrity": "sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==", - "dev": true, - "requires": {} + "dev": true }, "fs-extra": { "version": "7.0.1", @@ -27585,6 +27606,34 @@ "requires": { "@types/mdx": "^2.0.0" } + }, + "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==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0" + } + }, + "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==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" + } + }, + "scheduler": { + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0" + } } } }, @@ -27603,8 +27652,7 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.3.0.tgz", "integrity": "sha512-Nz/UzeYQdUZUhacrPyfkiiysSjydyjgg/p0P9HxB4p/WaJUUjMAcaoaLgy3EXx61zZJ3iD36WPuDkZs5QYrA0A==", - "dev": true, - "requires": {} + "dev": true } } }, @@ -27612,8 +27660,7 @@ "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.4.7.tgz", "integrity": "sha512-uyJIcoyeMWKAvjrG9tJBUCKxr2WZk+PomgrgrUwejkIfXMO76i6jw9BwLa0NZjYdlthDv30r9FfbYZyeNPmF0g==", - "dev": true, - "requires": {} + "dev": true }, "@storybook/core": { "version": "8.4.7", @@ -27672,15 +27719,13 @@ "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.4.7.tgz", "integrity": "sha512-ELqemTviCxAsZ5tqUz39sDmQkvhVAvAgiplYy9Uf15kO0SP2+HKsCMzlrm2ue2FfkUNyqbDayCPPCB0Cdn/mpQ==", - "dev": true, - "requires": {} + "dev": true }, "@storybook/preview-api": { "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.4.7.tgz", "integrity": "sha512-0QVQwHw+OyZGHAJEXo6Knx+6/4er7n2rTDE5RYJ9F2E2Lg42E19pfdLlq2Jhoods2Xrclo3wj6GWR//Ahi39Eg==", - "dev": true, - "requires": {} + "dev": true }, "@storybook/react": { "version": "8.4.7", @@ -27700,8 +27745,7 @@ "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.4.7.tgz", "integrity": "sha512-6bkG2jvKTmWrmVzCgwpTxwIugd7Lu+2btsLAqhQSzDyIj2/uhMNp8xIMr/NBDtLgq3nomt9gefNa9xxLwk/OMg==", - "dev": true, - "requires": {} + "dev": true }, "@storybook/test": { "version": "8.4.7", @@ -27756,8 +27800,7 @@ "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.4.7.tgz", "integrity": "sha512-99rgLEjf7iwfSEmdqlHkSG3AyLcK0sfExcr0jnc6rLiAkBhzuIsvcHjjUwkR210SOCgXqBPW0ZA6uhnuyppHLw==", - "dev": true, - "requires": {} + "dev": true }, "@testing-library/dom": { "version": "10.4.0", @@ -27831,6 +27874,12 @@ "pretty-format": "^27.0.2" } }, + "@types/react-dom": { + "version": "18.3.7", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz", + "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==", + "dev": true + }, "aria-query": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", @@ -27846,8 +27895,7 @@ "version": "14.5.2", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==", - "dev": true, - "requires": {} + "dev": true }, "@tootallnate/once": { "version": "2.0.0", @@ -28083,17 +28131,11 @@ "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==" }, - "@types/prop-types": { - "version": "15.7.14", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", - "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==" - }, "@types/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz", - "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==", + "version": "19.1.12", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz", + "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==", "requires": { - "@types/prop-types": "*", "csstype": "^3.0.2" } }, @@ -28110,13 +28152,10 @@ } }, "@types/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", - "devOptional": true, - "requires": { - "@types/react": "*" - } + "version": "19.1.9", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz", + "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==", + "dev": true }, "@types/react-transition-group": { "version": "4.4.11", @@ -28661,8 +28700,7 @@ "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true, - "requires": {} + "dev": true }, "acorn-walk": { "version": "8.3.4", @@ -29851,8 +29889,7 @@ "version": "1.5.3", "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.3.tgz", "integrity": "sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==", - "dev": true, - "requires": {} + "dev": true }, "deep-eql": { "version": "5.0.2", @@ -30504,8 +30541,7 @@ "version": "8.5.0", "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz", "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==", - "dev": true, - "requires": {} + "dev": true }, "eslint-import-resolver-node": { "version": "0.3.9", @@ -30681,8 +30717,7 @@ "version": "0.11.2", "resolved": "https://registry.npmjs.org/eslint-plugin-playwright/-/eslint-plugin-playwright-0.11.2.tgz", "integrity": "sha512-uRLRLk7uTzc8NE6t4wBU8dijQwHvC66R/h7xwdM779jsJjMUtSmeaB8ayRkkpfwi+UU5BEfwvDANwmE+ccMVDw==", - "dev": true, - "requires": {} + "dev": true }, "eslint-plugin-prettier": { "version": "4.2.1", @@ -30748,15 +30783,13 @@ "version": "4.6.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz", "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==", - "dev": true, - "requires": {} + "dev": true }, "eslint-plugin-simple-import-sort": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-8.0.0.tgz", "integrity": "sha512-bXgJQ+lqhtQBCuWY/FUWdB27j4+lqcvXv5rUARkzbeWLwea+S5eBZEQrhnO+WgX3ZoJHVj0cn943iyXwByHHQw==", - "dev": true, - "requires": {} + "dev": true }, "eslint-plugin-storybook": { "version": "0.6.8", @@ -32750,8 +32783,7 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz", "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==", - "dev": true, - "requires": {} + "dev": true }, "jest-regex-util": { "version": "29.6.3", @@ -36647,15 +36679,13 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz", "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==", - "dev": true, - "requires": {} + "dev": true }, "postcss-scss": { "version": "4.0.9", "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz", "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==", - "dev": true, - "requires": {} + "dev": true }, "postcss-selector-parser": { "version": "6.1.2", @@ -36827,12 +36857,10 @@ } }, "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==", - "requires": { - "loose-envify": "^1.1.0" - } + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz", + "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", + "dev": true }, "react-datepicker": { "version": "4.16.0", @@ -36848,12 +36876,12 @@ } }, "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.1.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz", + "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==", + "dev": true, "requires": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" + "scheduler": "^0.26.0" } }, "react-fast-compare": { @@ -36864,8 +36892,7 @@ "react-icons": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz", - "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==", - "requires": {} + "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==" }, "react-is": { "version": "17.0.2", @@ -36876,8 +36903,7 @@ "react-onclickoutside": { "version": "6.13.1", "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz", - "integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==", - "requires": {} + "integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==" }, "react-popper": { "version": "2.3.0", @@ -37347,12 +37373,10 @@ } }, "scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "requires": { - "loose-envify": "^1.1.0" - } + "version": "0.26.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz", + "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==", + "dev": true }, "scss-concat": { "version": "0.3.9", @@ -38272,15 +38296,13 @@ "version": "9.0.4", "resolved": "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-9.0.4.tgz", "integrity": "sha512-38nIGTGpFOiK5LjJ8Ma1yUgpKENxoKSOhbDNSemY7Ep0VsJoXIW9Iq/2hSt699oB9tReynfWicTAoIHiq8Rvbg==", - "dev": true, - "requires": {} + "dev": true }, "stylelint-config-recommended": { "version": "9.0.0", "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-9.0.0.tgz", "integrity": "sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ==", - "dev": true, - "requires": {} + "dev": true }, "stylelint-config-recommended-scss": { "version": "8.0.0", @@ -38827,8 +38849,7 @@ "use-isomorphic-layout-effect": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.0.tgz", - "integrity": "sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==", - "requires": {} + "integrity": "sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==" }, "util": { "version": "0.12.5", @@ -39179,16 +39200,6 @@ "resolve": "^1.22.1" } }, - "rollup": { - "version": "2.79.2", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz", - "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==", - "dev": true, - "peer": true, - "requires": { - "fsevents": "~2.3.2" - } - }, "rollup-plugin-rename-node-modules": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/rollup-plugin-rename-node-modules/-/rollup-plugin-rename-node-modules-1.3.1.tgz", @@ -39436,8 +39447,7 @@ "version": "8.18.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", - "dev": true, - "requires": {} + "dev": true }, "xml": { "version": "1.0.1", diff --git a/module/package.json b/module/package.json index 4cce1c29..6c1d59ef 100644 --- a/module/package.json +++ b/module/package.json @@ -19,8 +19,8 @@ }, "peerDependencies": { "date-fns": "2.x", - "react": "18.x", - "react-dom": "18.x", + "react": "19.x", + "react-dom": "19.x", "zod": "3.*" }, "files": [ @@ -74,9 +74,9 @@ "@types/glob": "8.1.0", "@types/jest": "29.5.3", "@types/lodash": "4.14.195", - "@types/react": "18.3.1", + "@types/react": "^19.1.12", "@types/react-datepicker": "4.11.2", - "@types/react-dom": "18.3.1", + "@types/react-dom": "^19.1.9", "chokidar": "3.5.3", "concurrently": "8.2.0", "http-server": "14.1.1", @@ -85,8 +85,8 @@ "jest-config": "29.6.1", "jest-environment-jsdom": "29.6.1", "jest-junit": "16.0.0", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "^19.1.1", + "react-dom": "^19.1.1", "sass": "1.63.6", "scss-concat": "0.3.9", "semantic-release": "21.0.7", diff --git a/module/src/components/button/button.component.tsx b/module/src/components/button/button.component.tsx index cdb3876c..ffb00762 100644 --- a/module/src/components/button/button.component.tsx +++ b/module/src/components/button/button.component.tsx @@ -41,10 +41,10 @@ export interface IButtonProps extends ButtonHTMLProps { displayStatus?: ButtonDisplayStatus; /** icon definition for left icon, optionally uses custom JSX */ - leftOverlay?: JSX.Element; + leftOverlay?: React.ReactElement; /** icon definition for right icon, optionally uses custom JSX */ - rightOverlay?: JSX.Element; + rightOverlay?: React.ReactElement; } /** Renders an HTML button element with some useful additions */ @@ -56,7 +56,7 @@ export const Button = React.forwardRef> className?: string; /** the icon to use for the validation errors */ - validationErrorIcon?: JSX.Element; + validationErrorIcon?: React.ReactElement; /** (Optional) Class name for the validation errors */ validationErrorsClassName?: string; diff --git a/module/src/components/checkbox/checkbox.component.tsx b/module/src/components/checkbox/checkbox.component.tsx index 6e630932..bc3c2104 100644 --- a/module/src/components/checkbox/checkbox.component.tsx +++ b/module/src/components/checkbox/checkbox.component.tsx @@ -25,11 +25,11 @@ export interface ICheckboxProps /** (Optional) A TData value representing the initial checked state of the checkbox. This can be true, false, or 'indeterminate'. */ checked?: TData; - /** (Optional) A custom JSX.Element for the indeterminate state indicator. */ - customIndeterminateIndicator?: JSX.Element; + /** (Optional) A custom React.ReactElement for the indeterminate state indicator. */ + customIndeterminateIndicator?: React.ReactElement; - /** (Optional) A custom JSX.Element for the checked indicator. */ - customIndicator?: JSX.Element; + /** (Optional) A custom React.ReactElement for the checked indicator. */ + customIndicator?: React.ReactElement; /** (Optional) A boolean flag to disable the checkbox input. */ disabled?: boolean; diff --git a/module/src/components/checkboxList/checkboxList.component.tsx b/module/src/components/checkboxList/checkboxList.component.tsx index 616a3f31..06357c1f 100644 --- a/module/src/components/checkboxList/checkboxList.component.tsx +++ b/module/src/components/checkboxList/checkboxList.component.tsx @@ -61,8 +61,8 @@ export interface ICheckboxListProps /** show an error state icon on the component (will be true automatically if validationErrorMessages are passed in or errors are in the binder) */ error?: boolean; - /** (Optional) A custom JSX.Element for the checked indicator. */ - customIndicator?: JSX.Element; + /** (Optional) A custom React.ReactElement for the checked indicator. */ + customIndicator?: React.ReactElement; /** which size variant to use */ displaySize?: DisplaySize; diff --git a/module/src/components/codeInput/codeInput.component.tsx b/module/src/components/codeInput/codeInput.component.tsx index 42bf70b4..21a0f70d 100644 --- a/module/src/components/codeInput/codeInput.component.tsx +++ b/module/src/components/codeInput/codeInput.component.tsx @@ -15,7 +15,7 @@ import { getLengthFromPart } from './codeInput.utils'; import './codeInput.theme.css'; -export interface ICodeInputPartProps> extends ITextInputProps { +export interface ICodeInputPartProps> extends Omit, 'part'> { /** The given length of this part. If this is a string, the string will be rendered. */ part: CodeInputPartDefinition; } diff --git a/module/src/components/config/config.context.tsx b/module/src/components/config/config.context.tsx index 7bdef613..5ed98646 100644 --- a/module/src/components/config/config.context.tsx +++ b/module/src/components/config/config.context.tsx @@ -46,16 +46,16 @@ export interface IArmstrongConfig { requiredIndicator?: React.ReactNode; /** the icon to use for the validation errors */ - validationErrorIcon?: JSX.Element; + validationErrorIcon?: React.ReactElement; /** the icon to use for the spinner */ - spinnerIcon?: JSX.Element; + spinnerIcon?: React.ReactElement; /** the element to portal global overlays to (like toast and modal), defaults to the body element */ globalPortalTo?: Element; /** the icon to use for the dialog close button */ - dialogCloseButtonIcon?: JSX.Element | false; + dialogCloseButtonIcon?: React.ReactElement | false; /** how long ot show toast messages for in ms, defaults to 5000 */ toastDuration?: number; @@ -64,7 +64,7 @@ export interface IArmstrongConfig { toastPosition?: ToastPosition; /** the icon to use for the dialog close button */ - toastCloseButtonIcon?: JSX.Element | false; + toastCloseButtonIcon?: React.ReactElement | false; /** whether to add toasts to a stack or display one at a time */ toastDisplayMode?: ToastDisplayMode; @@ -72,11 +72,11 @@ export interface IArmstrongConfig { /** ignore toasts if an existing toast matches this predicate */ toastIgnorePredicate?: (existingToasts: IToast[], incomingToast: IToast) => boolean; - /** A custom JSX.Element for the checked indicator. (Optional) */ - checkboxCustomIndicator?: JSX.Element; + /** A custom React.ReactElement for the checked indicator. (Optional) */ + checkboxCustomIndicator?: React.ReactElement; - /** A custom JSX.Element for the indeterminate state indicator. (Optional) */ - checkboxCustomIndeterminateIndicator?: JSX.Element; + /** A custom React.ReactElement for the indeterminate state indicator. (Optional) */ + checkboxCustomIndeterminateIndicator?: React.ReactElement; /** How long in ms to wait after hover before displaying the tooltip, defaults to 700 */ tooltipDelay?: number; diff --git a/module/src/components/dateTimeInput/dateTimeInput.component.tsx b/module/src/components/dateTimeInput/dateTimeInput.component.tsx index 11be4715..1d41e439 100644 --- a/module/src/components/dateTimeInput/dateTimeInput.component.tsx +++ b/module/src/components/dateTimeInput/dateTimeInput.component.tsx @@ -422,10 +422,6 @@ export const SingleDateTimeInput = React.forwardRef>( ( @@ -552,12 +548,6 @@ export const RangeDateTimeInput = React.forwardRef, - format: defaultDateFormat, - locale: defaultLocale, - showCalendarOnLeftOverlayClick: true, -}; const NativeDateTimeInput = React.forwardRef>( ({ mode, selectsRange, native, ...props }, ref) => { @@ -744,12 +734,6 @@ export const SingleDateAndTimeInput = React.forwardRef>( @@ -774,8 +758,3 @@ export const DateTimeInput = React.forwardRef /** Optional description to show in the body of the dialog in a P tag */ description?: React.ReactNode; /** Icon to use as the close button. Send `false` to hide the close button entirely */ - closeButtonIcon?: JSX.Element | false; + closeButtonIcon?: React.ReactElement | false; /** Bool denoting whether the dialog is open or closed - for state controlled dialogs */ open?: boolean; /** Function called when the dialog is opened/closed - for state controlled dialogs */ @@ -106,7 +106,7 @@ export const Dialog = React.forwardRef( /** Stores a reference to the promise resolver function */ const resolverRef = - React.useRef<(value: IDialogOpenResponse | PromiseLike>) => void>(); + React.useRef<((value: IDialogOpenResponse | PromiseLike>) => void) | undefined>(undefined); /** Used to create prop comparisons to use as effect triggers */ const finishActionChanged = useCompareValues(finishAction); diff --git a/module/src/components/dialog/dialog.hooks.ts b/module/src/components/dialog/dialog.hooks.ts index 7d3adb1d..a016e585 100644 --- a/module/src/components/dialog/dialog.hooks.ts +++ b/module/src/components/dialog/dialog.hooks.ts @@ -20,7 +20,7 @@ export type UseDialogReturn = [React.RefObject>, Dia */ export const useDialog = ( forwardRef?: React.ForwardedRef> -): [React.RefObject>, Omit, 'addOpenChangeListener'>] => { +): [React.RefObject | null>, Omit, 'addOpenChangeListener'>] => { const dialogRef = React.useRef>(null); const [isOpen, setIsOpen] = React.useState(false); React.useImperativeHandle(forwardRef, () => dialogRef.current as DialogElement); diff --git a/module/src/components/expandable/expandable.component.tsx b/module/src/components/expandable/expandable.component.tsx index 51b5bca5..e0d885bc 100644 --- a/module/src/components/expandable/expandable.component.tsx +++ b/module/src/components/expandable/expandable.component.tsx @@ -43,6 +43,3 @@ export const Expandable = React.forwardRef /** show an error state icon on the component (will be true automatically if validationErrorMessages are passed in or errors are in the binder) */ error?: boolean; - /** (Optional) A custom JSX.Element for the checked indicator. */ - customIndicator?: JSX.Element; + /** (Optional) A custom React.ReactElement for the checked indicator. */ + customIndicator?: React.ReactElement; /** which size variant to use */ displaySize?: DisplaySize; @@ -215,8 +215,5 @@ export const RadioGroup = React.forwardRef(props: ArmstrongVFCProps, HTMLDivElement>) => ArmstrongFCReturn) & ArmstrongFCExtensions>; -RadioGroup.defaultProps = { - displayMode: 'radio', -}; RadioGroup.displayName = 'RadioGroup'; diff --git a/module/src/components/rangeInput/rangeInput.component.tsx b/module/src/components/rangeInput/rangeInput.component.tsx index 57901723..d2796e27 100644 --- a/module/src/components/rangeInput/rangeInput.component.tsx +++ b/module/src/components/rangeInput/rangeInput.component.tsx @@ -22,8 +22,8 @@ export interface IRangeInputProps> /** (Optional) A TData value representing the value of the input. */ value?: TData; - /** (Optional) A custom JSX.Element for the thumb of the slider. */ - customThumb?: JSX.Element; + /** (Optional) A custom React.ReactElement for the thumb of the slider. */ + customThumb?: React.ReactElement; /** (Optional) A boolean flag to disable the checkbox input. */ disabled?: boolean; diff --git a/module/src/components/rating/rating.component.tsx b/module/src/components/rating/rating.component.tsx index 43c47e02..64159db9 100644 --- a/module/src/components/rating/rating.component.tsx +++ b/module/src/components/rating/rating.component.tsx @@ -114,7 +114,7 @@ const RatingPart = React.forwardRef( RatingPart.displayName = 'RatingPart'; -export type RatingIconDefinition = JSX.Element | ((index: number) => JSX.Element); +export type RatingIconDefinition = React.ReactElement | ((index: number) => React.ReactElement); export interface IRatingProps> extends Omit, HTMLDivElement>, 'onChange'>, @@ -319,12 +319,5 @@ export const Rating = React.forwardRef ArmstrongFCReturn) & ArmstrongFCExtensions>>; -Rating.defaultProps = { - maximum: 5, - filledIcon: , - emptyIcon: , - step: 1, - mode: 'buttons', -}; Rating.displayName = 'Rating'; diff --git a/module/src/components/rating/rating.utils.spec.ts b/module/src/components/rating/rating.utils.spec.ts index 20cf9fc2..c0d8ae1d 100644 --- a/module/src/components/rating/rating.utils.spec.ts +++ b/module/src/components/rating/rating.utils.spec.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { iconJsxFromDefinition } from './rating.utils'; -const iconFn1 = (index: number): JSX.Element => React.createElement('span', { key: index }, 'Icon 1'); +const iconFn1 = (index: number): React.ReactElement => React.createElement('span', { key: index }, 'Icon 1'); describe('iconJsxFromDefinition', () => { it('should convert a function icon definition to JSX element', () => { diff --git a/module/src/components/rating/rating.utils.ts b/module/src/components/rating/rating.utils.ts index f24976ad..5887bf4d 100644 --- a/module/src/components/rating/rating.utils.ts +++ b/module/src/components/rating/rating.utils.ts @@ -1,13 +1,13 @@ import type { RatingIconDefinition } from './rating.component'; /** - * Converts a RatingIconDefinition to a JSX.Element. + * Converts a RatingIconDefinition to a React.ReactElement. * * @param {RatingIconDefinition} icon - The icon definition to convert. * @param {number} index - The index of the item in the rating array. - * @returns {JSX.Element} The JSX element representing the icon. + * @returns {React.ReactElement} The JSX element representing the icon. */ -export const iconJsxFromDefinition = (icon: RatingIconDefinition, index: number): JSX.Element => { +export const iconJsxFromDefinition = (icon: RatingIconDefinition, index: number): React.ReactElement => { if (typeof icon === 'function') { return icon(index); } diff --git a/module/src/components/select/select.component.tsx b/module/src/components/select/select.component.tsx index f80c91b4..2d260858 100644 --- a/module/src/components/select/select.component.tsx +++ b/module/src/components/select/select.component.tsx @@ -129,13 +129,13 @@ export interface ISingleSelectProps position?: 'auto' | 'bottom' | 'top'; /** overrides the dropdown icon in the input */ - dropdownIcon?: JSX.Element; + dropdownIcon?: React.ReactElement; /** overrides the loading icon in the input */ - loadingIcon?: JSX.Element; + loadingIcon?: React.ReactElement; /** overrides the selected icon in the input */ - selectedIcon?: JSX.Element; + selectedIcon?: React.ReactElement; /** close the select menu when the user selects an option. Set to true as default */ closeMenuOnSelect?: boolean; @@ -578,13 +578,6 @@ const ReactSelectComponent = React.forwardRef< ReactSelectComponent.displayName = 'ReactSelect'; -ReactSelectComponent.defaultProps = { - clearable: true, - searchable: true, - selectedIcon: , - dropdownIcon: , - createText: 'Create:', -}; /** * Native select export @@ -755,9 +748,6 @@ export const NativeSelect = React.forwardRef, -}; /** * Single select export diff --git a/module/src/components/spinner/spinner.component.tsx b/module/src/components/spinner/spinner.component.tsx index ffbfb75f..8a6fa362 100644 --- a/module/src/components/spinner/spinner.component.tsx +++ b/module/src/components/spinner/spinner.component.tsx @@ -7,7 +7,7 @@ import './spinner.theme.css'; export interface ISpinnerProps extends Omit, 'label'> { /** icon definition for icon to spin in middle of div, can be overridden using children */ - icon?: JSX.Element; + icon?: React.ReactElement; /** should the spinner wrapper fill the container, meaning the icon is centred */ fillContainer?: boolean; @@ -43,6 +43,3 @@ export const Spinner = React.forwardRef void; diff --git a/module/src/components/toast/toast.context.tsx b/module/src/components/toast/toast.context.tsx index 7efbab1f..4754a865 100644 --- a/module/src/components/toast/toast.context.tsx +++ b/module/src/components/toast/toast.context.tsx @@ -74,7 +74,7 @@ interface IToastProviderProps { position?: ToastPosition; /** the icon to use for the dialog close button */ - closeButtonIcon?: JSX.Element | false; + closeButtonIcon?: React.ReactElement | false; /** whether to add toasts to a stack or display one at a time */ displayMode?: ToastDisplayMode; diff --git a/module/src/components/tooltip/tooltip.component.tsx b/module/src/components/tooltip/tooltip.component.tsx index 57e0c445..acbab1dd 100644 --- a/module/src/components/tooltip/tooltip.component.tsx +++ b/module/src/components/tooltip/tooltip.component.tsx @@ -79,6 +79,3 @@ export const Tooltip = React.forwardRef = (action: FormAction) => TDat * The validation message * Can be a string or an element */ -export type ValidationMessage = string | JSX.Element; +export type ValidationMessage = string | React.ReactElement; /** * An individual validation error. @@ -603,7 +603,7 @@ export interface IFormConfig { * An optional icon to use for validation errors in place of the default. * @default warning */ - validationErrorIcon?: JSX.Element; + validationErrorIcon?: React.ReactElement; /** should the input validate automatically against the provided schema? Default: `true` */ autoValidate?: boolean; @@ -768,7 +768,7 @@ interface IUseBindingStateReturnUtils { validationMode?: FormValidationMode; /** The current validation mode for the form */ - validationErrorIcon?: JSX.Element; + validationErrorIcon?: React.ReactElement; /** Derived from the validation mode */ shouldShowValidationErrorIcon?: boolean; @@ -808,7 +808,7 @@ export interface IUseBindingStateOverrides { validationMode?: FormValidationMode; /** The current validation mode for the form */ - validationErrorIcon?: JSX.Element; + validationErrorIcon?: React.ReactElement; /** should the input validate automatically against the provided schema? Default: `true` */ autoValidate?: boolean; diff --git a/module/src/hooks/useDebounce.ts b/module/src/hooks/useDebounce.ts index 2dc33487..601792c3 100644 --- a/module/src/hooks/useDebounce.ts +++ b/module/src/hooks/useDebounce.ts @@ -52,7 +52,7 @@ export function useDebounceEffect unknow ms: number, deps: React.DependencyList ) { - const throttleRef = React.useRef(); + const throttleRef = React.useRef(undefined); useDidUpdateEffect(() => { if (throttleRef.current) { diff --git a/module/src/hooks/usePreviousValue.ts b/module/src/hooks/usePreviousValue.ts index 2606c776..c172cb62 100644 --- a/module/src/hooks/usePreviousValue.ts +++ b/module/src/hooks/usePreviousValue.ts @@ -6,7 +6,7 @@ import * as React from 'react'; * @returns The previous value before the effect cycle. */ export const usePreviousValue = (value: TValue): TValue | undefined => { - const ref = React.useRef(); + const ref = React.useRef(undefined); React.useEffect(() => { ref.current = value; }, [value]); diff --git a/module/src/hooks/useResizeObserver.ts b/module/src/hooks/useResizeObserver.ts index 5018e2bc..ded1dc78 100644 --- a/module/src/hooks/useResizeObserver.ts +++ b/module/src/hooks/useResizeObserver.ts @@ -16,7 +16,7 @@ export function useResizeObserver( optionsInput?: ResizeObserverOptions, ref?: React.MutableRefObject ) { - const observer = React.useRef(); + const observer = React.useRef(undefined); const options = useContentMemo(optionsInput); const observe = React.useCallback( diff --git a/module/src/types/reactExtensions.ts b/module/src/types/reactExtensions.ts index d6d9dbec..55383663 100644 --- a/module/src/types/reactExtensions.ts +++ b/module/src/types/reactExtensions.ts @@ -7,5 +7,5 @@ export type ArmstrongVFCProps = React.PropsWithoutRef & Re export type ArmstrongFCReturn = ReturnType; export type ArmstrongFCExtensions = Pick< React.FC, - 'contextTypes' | 'defaultProps' | 'displayName' | 'propTypes' + 'displayName' | 'propTypes' >; diff --git a/storybook/package-lock.json b/storybook/package-lock.json index 4c6b916d..8d7bf4d6 100644 --- a/storybook/package-lock.json +++ b/storybook/package-lock.json @@ -8,8 +8,8 @@ "name": "storybook", "version": "0.0.0", "dependencies": { - "react": "18.3.1", - "react-dom": "18.3.1" + "react": "^19.1.1", + "react-dom": "^19.1.1" }, "devDependencies": { "@chromatic-com/storybook": "3.2.2", @@ -24,8 +24,8 @@ "@storybook/test": "8.4.7", "@storybook/test-runner": "0.20.1", "@storybook/theming": "8.4.7", - "@types/react": "18.3.12", - "@types/react-dom": "18.3.1", + "@types/react": "^19.1.12", + "@types/react-dom": "^19.1.9", "@vitejs/plugin-react": "4.3.4", "concurrently": "9.1.0", "eslint": "9.15.0", @@ -2132,6 +2132,43 @@ "react": ">=16" } }, + "node_modules/@storybook/addon-docs/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==", + "dev": true, + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@storybook/addon-docs/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==", + "dev": true, + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" + }, + "peerDependencies": { + "react": "^18.3.1" + } + }, + "node_modules/@storybook/addon-docs/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/@storybook/addon-essentials": { "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.4.7.tgz", @@ -3069,29 +3106,24 @@ "undici-types": "~6.20.0" } }, - "node_modules/@types/prop-types": { - "version": "15.7.14", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", - "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", - "dev": true - }, "node_modules/@types/react": { - "version": "18.3.12", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz", - "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==", + "version": "19.1.12", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz", + "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==", "dev": true, + "license": "MIT", "dependencies": { - "@types/prop-types": "*", "csstype": "^3.0.2" } }, "node_modules/@types/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", + "version": "19.1.9", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz", + "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==", "dev": true, - "dependencies": { - "@types/react": "*" + "license": "MIT", + "peerDependencies": { + "@types/react": "^19.0.0" } }, "node_modules/@types/resolve": { @@ -7059,7 +7091,8 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true }, "node_modules/js-yaml": { "version": "4.1.0", @@ -7231,6 +7264,8 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dev": true, + "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -8244,12 +8279,10 @@ ] }, "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==", - "dependencies": { - "loose-envify": "^1.1.0" - }, + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz", + "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", + "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -8291,15 +8324,15 @@ } }, "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.1.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz", + "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==", + "license": "MIT", "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" + "scheduler": "^0.26.0" }, "peerDependencies": { - "react": "^18.3.1" + "react": "^19.1.1" } }, "node_modules/react-is": { @@ -8591,12 +8624,10 @@ ] }, "node_modules/scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "dependencies": { - "loose-envify": "^1.1.0" - } + "version": "0.26.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz", + "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==", + "license": "MIT" }, "node_modules/semver": { "version": "6.3.1", @@ -11303,6 +11334,34 @@ "requires": { "@types/mdx": "^2.0.0" } + }, + "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==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0" + } + }, + "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==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" + } + }, + "scheduler": { + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0" + } } } }, @@ -11379,8 +11438,7 @@ "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.4.7.tgz", "integrity": "sha512-OSfdv5UZs+NdGB+nZmbafGUWimiweJ/56gShlw8Neo/4jOJl1R3rnRqqY7MYx8E4GwoX+i3GF5C3iWFNQqlDcw==", - "dev": true, - "requires": {} + "dev": true }, "@storybook/addon-viewport": { "version": "8.4.7", @@ -11406,8 +11464,7 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.3.0.tgz", "integrity": "sha512-Nz/UzeYQdUZUhacrPyfkiiysSjydyjgg/p0P9HxB4p/WaJUUjMAcaoaLgy3EXx61zZJ3iD36WPuDkZs5QYrA0A==", - "dev": true, - "requires": {} + "dev": true } } }, @@ -11415,8 +11472,7 @@ "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.4.7.tgz", "integrity": "sha512-uyJIcoyeMWKAvjrG9tJBUCKxr2WZk+PomgrgrUwejkIfXMO76i6jw9BwLa0NZjYdlthDv30r9FfbYZyeNPmF0g==", - "dev": true, - "requires": {} + "dev": true }, "@storybook/core": { "version": "8.4.7", @@ -11483,15 +11539,13 @@ "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.4.7.tgz", "integrity": "sha512-ELqemTviCxAsZ5tqUz39sDmQkvhVAvAgiplYy9Uf15kO0SP2+HKsCMzlrm2ue2FfkUNyqbDayCPPCB0Cdn/mpQ==", - "dev": true, - "requires": {} + "dev": true }, "@storybook/preview-api": { "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.4.7.tgz", "integrity": "sha512-0QVQwHw+OyZGHAJEXo6Knx+6/4er7n2rTDE5RYJ9F2E2Lg42E19pfdLlq2Jhoods2Xrclo3wj6GWR//Ahi39Eg==", - "dev": true, - "requires": {} + "dev": true }, "@storybook/react": { "version": "8.4.7", @@ -11511,8 +11565,7 @@ "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.4.7.tgz", "integrity": "sha512-6bkG2jvKTmWrmVzCgwpTxwIugd7Lu+2btsLAqhQSzDyIj2/uhMNp8xIMr/NBDtLgq3nomt9gefNa9xxLwk/OMg==", - "dev": true, - "requires": {} + "dev": true }, "@storybook/react-vite": { "version": "8.4.7", @@ -11567,8 +11620,7 @@ "version": "2.2.2", "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz", "integrity": "sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==", - "dev": true, - "requires": {} + "dev": true } } }, @@ -11619,8 +11671,7 @@ "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.4.7.tgz", "integrity": "sha512-99rgLEjf7iwfSEmdqlHkSG3AyLcK0sfExcr0jnc6rLiAkBhzuIsvcHjjUwkR210SOCgXqBPW0ZA6uhnuyppHLw==", - "dev": true, - "requires": {} + "dev": true }, "@swc/core": { "version": "1.10.1", @@ -11791,8 +11842,7 @@ "version": "14.5.2", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==", - "dev": true, - "requires": {} + "dev": true }, "@types/aria-query": { "version": "5.0.4", @@ -11907,30 +11957,20 @@ "undici-types": "~6.20.0" } }, - "@types/prop-types": { - "version": "15.7.14", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", - "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", - "dev": true - }, "@types/react": { - "version": "18.3.12", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz", - "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==", + "version": "19.1.12", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz", + "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==", "dev": true, "requires": { - "@types/prop-types": "*", "csstype": "^3.0.2" } }, "@types/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", - "dev": true, - "requires": { - "@types/react": "*" - } + "version": "19.1.9", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz", + "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==", + "dev": true }, "@types/resolve": { "version": "1.20.6", @@ -12034,8 +12074,7 @@ "version": "1.4.3", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz", "integrity": "sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==", - "dev": true, - "requires": {} + "dev": true } } }, @@ -12145,8 +12184,7 @@ "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true, - "requires": {} + "dev": true }, "aggregate-error": { "version": "3.1.0", @@ -12560,8 +12598,7 @@ "version": "11.20.0", "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.20.0.tgz", "integrity": "sha512-Btdli1qoAI01UKmk3Iqe6vKhAhePRXqNI/2uKKy2R16q7SN/5kLTqhd1JI20LFOZSnH3xSJaUXeJ2xZOJB//3A==", - "dev": true, - "requires": {} + "dev": true }, "ci-info": { "version": "3.9.0", @@ -12811,8 +12848,7 @@ "version": "1.5.3", "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.3.tgz", "integrity": "sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==", - "dev": true, - "requires": {} + "dev": true }, "deep-eql": { "version": "5.0.2", @@ -13135,15 +13171,13 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0.tgz", "integrity": "sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==", - "dev": true, - "requires": {} + "dev": true }, "eslint-plugin-react-refresh": { "version": "0.4.14", "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.14.tgz", "integrity": "sha512-aXvzCTK7ZBv1e7fahFuR3Z/fyQQSIQ711yPgYRj+Oj64tyTgO4iQIDmYXDBqvSWQ/FA4OSCsXOStlF+noU0/NA==", - "dev": true, - "requires": {} + "dev": true }, "eslint-plugin-storybook": { "version": "0.11.1", @@ -14473,8 +14507,7 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz", "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==", - "dev": true, - "requires": {} + "dev": true }, "jest-process-manager": { "version": "0.4.0", @@ -14827,7 +14860,8 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true }, "js-yaml": { "version": "4.1.0", @@ -14964,6 +14998,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dev": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -15687,12 +15722,9 @@ "dev": true }, "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==", - "requires": { - "loose-envify": "^1.1.0" - } + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz", + "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==" }, "react-confetti": { "version": "6.1.0", @@ -15722,12 +15754,11 @@ } }, "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.1.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz", + "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==", "requires": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" + "scheduler": "^0.26.0" } }, "react-is": { @@ -15933,12 +15964,9 @@ "dev": true }, "scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "requires": { - "loose-envify": "^1.1.0" - } + "version": "0.26.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz", + "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==" }, "semver": { "version": "6.3.1", @@ -16490,8 +16518,7 @@ "version": "1.4.3", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz", "integrity": "sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==", - "dev": true, - "requires": {} + "dev": true } } }, @@ -16763,8 +16790,7 @@ "version": "8.18.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", - "dev": true, - "requires": {} + "dev": true }, "xml": { "version": "1.0.1", diff --git a/storybook/package.json b/storybook/package.json index 81884b4e..961b1e0f 100644 --- a/storybook/package.json +++ b/storybook/package.json @@ -14,8 +14,8 @@ "test-storybook-ci": "npx concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'npx http-server storybook-static --port 6006 --silent' 'npx wait-on tcp:127.0.0.1:6006 && npm run test-storybook'" }, "dependencies": { - "react": "18.3.1", - "react-dom": "18.3.1" + "react": "^19.1.1", + "react-dom": "^19.1.1" }, "devDependencies": { "@chromatic-com/storybook": "3.2.2", @@ -30,8 +30,8 @@ "@storybook/test": "8.4.7", "@storybook/test-runner": "0.20.1", "@storybook/theming": "8.4.7", - "@types/react": "18.3.12", - "@types/react-dom": "18.3.1", + "@types/react": "^19.1.12", + "@types/react-dom": "^19.1.9", "@vitejs/plugin-react": "4.3.4", "concurrently": "9.1.0", "eslint": "9.15.0", From 19cf1934b220479a0a6fb4fb84ed2dc76eb2245f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 9 Sep 2025 09:41:19 +0000 Subject: [PATCH 3/9] feat: update Button component to use React 19 ref as prop pattern Co-authored-by: BottlecapDave <14993950+BottlecapDave@users.noreply.github.com> --- module/src/components/button/button.component.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/module/src/components/button/button.component.tsx b/module/src/components/button/button.component.tsx index ffb00762..1418e716 100644 --- a/module/src/components/button/button.component.tsx +++ b/module/src/components/button/button.component.tsx @@ -7,10 +7,7 @@ import { Spinner } from '../spinner/spinner.component'; import './button.theme.css'; -type ButtonHTMLProps = Omit< - React.DetailedHTMLProps, HTMLButtonElement>, - 'ref' ->; +type ButtonHTMLProps = React.DetailedHTMLProps, HTMLButtonElement>; export type ButtonDisplayStyle = 'primary' | 'secondary' | 'outline' | 'blank' | CustomString; export type ButtonDisplayStatus = 'normal' | 'positive' | 'negative' | 'warning' | 'info' | CustomString; @@ -48,7 +45,7 @@ export interface IButtonProps extends ButtonHTMLProps { } /** Renders an HTML button element with some useful additions */ -export const Button = React.forwardRef>((props, ref) => { +export const Button = (props: React.PropsWithChildren) => { const { className, disabled, @@ -61,6 +58,7 @@ export const Button = React.forwardRef ); -}); +}; Button.displayName = 'Button'; From 5fa426dfae9573eb2071e085796068c0ef180b7f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 9 Sep 2025 10:08:40 +0000 Subject: [PATCH 4/9] feat: convert multiple components from forwardRef to React 19 ref as prop pattern Co-authored-by: adamiprinciples <1008185+adamiprinciples@users.noreply.github.com> --- .../characterLimit.component.tsx | 43 ++++--- .../checkbox/checkbox.component.tsx | 65 +++++----- .../src/components/input/input.component.tsx | 113 ++++++++---------- .../src/components/label/label.component.tsx | 37 +++--- .../progressBar/progressBar.component.tsx | 23 ++-- .../components/spinner/spinner.component.tsx | 45 ++++--- .../components/status/status.component.tsx | 49 ++++---- 7 files changed, 180 insertions(+), 195 deletions(-) diff --git a/module/src/components/characterLimit/characterLimit.component.tsx b/module/src/components/characterLimit/characterLimit.component.tsx index c8772ddb..ee4d4521 100644 --- a/module/src/components/characterLimit/characterLimit.component.tsx +++ b/module/src/components/characterLimit/characterLimit.component.tsx @@ -38,22 +38,20 @@ export interface ICharacterLimitProps> } /** Render a character limit from a bound value, showing as an error if the user */ -export const CharacterLimit = React.forwardRef>>( - ( - { - bind, - limit, - shouldEnforce, - value, - className, - validationErrorIcon, - validationErrorsClassName, - validationErrorsTitle, - validationMode, - ...nativeProps - }, - ref - ) => { +export const CharacterLimit = (props: React.PropsWithChildren> & { ref?: React.Ref }>) => { + const { + bind, + limit, + shouldEnforce, + value, + className, + validationErrorIcon, + validationErrorsClassName, + validationErrorsTitle, + validationMode, + ref, + ...nativeProps + } = props; const globals = useArmstrongConfig({ validationErrorIcon, validationMode, @@ -84,12 +82,11 @@ export const CharacterLimit = React.forwardRef ); - } - // type assertion to ensure generic works with RefForwarded component - // DO NOT CHANGE TYPE WITHOUT CHANGING THIS, FIND TYPE BY INSPECTING React.forwardRef -) as (>( - props: ArmstrongFCProps, HTMLDivElement> -) => ArmstrongFCReturn) & - ArmstrongFCExtensions>>; +}; + +// Type assertion for generic support - updated for React 19 ref as prop pattern +(CharacterLimit as any) = (CharacterLimit as (>( + props: React.PropsWithChildren & { ref?: React.Ref }> +) => React.ReactElement) & ArmstrongFCExtensions>>); CharacterLimit.displayName = 'CharacterLimit'; diff --git a/module/src/components/checkbox/checkbox.component.tsx b/module/src/components/checkbox/checkbox.component.tsx index bc3c2104..9b54b920 100644 --- a/module/src/components/checkbox/checkbox.component.tsx +++ b/module/src/components/checkbox/checkbox.component.tsx @@ -68,34 +68,32 @@ export interface ICheckboxProps autoValidate?: boolean; } -export const Checkbox = React.forwardRef>( - ( - { - bind, - checked, - customIndicator, - className, - customIndeterminateIndicator, - disabled, - onCheckedChange, - label, - labelClassName, - labelId, - scrollValidationErrorsIntoView, - statusClassName, - testId, - validationErrorsClassName, - validationErrorMessages, - validationMode, - displaySize, - required, - requiredIndicator, - statusPosition, - autoValidate, - ...nativeProps - }, - ref - ) => { +export const Checkbox = (props: React.PropsWithChildren & { ref?: React.Ref }>) => { + const { + bind, + checked, + customIndicator, + className, + customIndeterminateIndicator, + disabled, + onCheckedChange, + label, + labelClassName, + labelId, + scrollValidationErrorsIntoView, + statusClassName, + testId, + validationErrorsClassName, + validationErrorMessages, + validationMode, + displaySize, + required, + requiredIndicator, + statusPosition, + autoValidate, + ref, + ...nativeProps + } = props; const reactId = React.useId(); const id = nativeProps.id ?? reactId; @@ -189,10 +187,11 @@ export const Checkbox = React.forwardRef ); - } -) as (>( - props: ArmstrongFCProps, HTMLInputElement> -) => ArmstrongFCReturn) & - ArmstrongFCExtensions>>; +}; + +// Type assertion for generic support - updated for React 19 ref as prop pattern +(Checkbox as any) = (Checkbox as (>( + props: React.PropsWithChildren & { ref?: React.Ref }> +) => React.ReactElement) & ArmstrongFCExtensions>>); Checkbox.displayName = 'Checkbox'; diff --git a/module/src/components/input/input.component.tsx b/module/src/components/input/input.component.tsx index 6b2105db..f4f6d592 100644 --- a/module/src/components/input/input.component.tsx +++ b/module/src/components/input/input.component.tsx @@ -29,21 +29,20 @@ interface IDelayedInputBaseProps extends NativeInputProps { value?: TValue; } -const DebounceInputBase = React.forwardRef>( - ({ milliseconds, value, onValueChange, onChange, ...nativeProps }, ref) => { - const [actualValue, setActualValue] = useDebounce(milliseconds, value, onValueChange); - - const onChangeEvent = React.useCallback( - (e: React.ChangeEvent) => { - setActualValue(e.currentTarget.value); - onChange?.(e); - }, - [setActualValue, onChange] - ); +const DebounceInputBase = (props: React.PropsWithChildren & { ref?: React.Ref }>) => { + const { milliseconds, value, onValueChange, onChange, ref, ...nativeProps } = props; + const [actualValue, setActualValue] = useDebounce(milliseconds, value, onValueChange); + + const onChangeEvent = React.useCallback( + (e: React.ChangeEvent) => { + setActualValue(e.currentTarget.value); + onChange?.(e); + }, + [setActualValue, onChange] + ); - return ; - } -); + return ; +}; DebounceInputBase.displayName = 'DebounceInput'; @@ -101,45 +100,40 @@ export interface INumberInputProps> exten } /** A component which wraps up a native input element with some binding logic and some repeated elements (icons and stuff) for components which only contain a single input element. */ -export const Input = React.forwardRef< - HTMLInputElement, - IInputProps & { type?: HTMLInputTypeAttribute } ->( - ( - { - bind, - onChange, - value, - className, - leftOverlay, - rightOverlay, - validationErrorMessages, - validationMode, - errorIcon: validationErrorIcon, - pending, - disabled, - disableOnPending, - statusPosition, - hideIconOnStatus, - onValueChange, - scrollValidationErrorsIntoView, - delay, - validationErrorsClassName, - statusClassName, - inputClassName, - label, - required, - requiredIndicator, - displaySize, - labelClassName, - labelId, - wrapperTestId, - error, - autoValidate, - ...nativeProps - }, - ref - ) => { +export const Input = (props: React.PropsWithChildren & { type?: HTMLInputTypeAttribute; ref?: React.Ref }>) => { + const { + bind, + onChange, + value, + className, + leftOverlay, + rightOverlay, + validationErrorMessages, + validationMode, + errorIcon: validationErrorIcon, + pending, + disabled, + disableOnPending, + statusPosition, + hideIconOnStatus, + onValueChange, + scrollValidationErrorsIntoView, + delay, + validationErrorsClassName, + statusClassName, + inputClassName, + label, + required, + requiredIndicator, + displaySize, + labelClassName, + labelId, + wrapperTestId, + error, + autoValidate, + ref, + ...nativeProps + } = props; const reactId = React.useId(); const id = nativeProps.id ?? reactId; @@ -300,12 +294,11 @@ export const Input = React.forwardRef< )} ); - } - // type assertion to ensure generic works with RefForwarded component - // DO NOT CHANGE TYPE WITHOUT CHANGING THIS, FIND TYPE BY INSPECTING React.forwardRef -) as (, TNumberValue extends NullOrUndefined>( - props: ArmstrongFCProps | INumberInputProps, HTMLInputElement> -) => ArmstrongFCReturn) & - ArmstrongFCExtensions | INumberInputProps>; +}; + +// Type assertion for generic support - updated for React 19 ref as prop pattern +(Input as any) = (Input as (, TNumberValue extends NullOrUndefined>( + props: React.PropsWithChildren<(ITextInputProps | INumberInputProps) & { ref?: React.Ref }> +) => React.ReactElement) & ArmstrongFCExtensions | INumberInputProps>); Input.displayName = 'Input'; diff --git a/module/src/components/label/label.component.tsx b/module/src/components/label/label.component.tsx index e677220d..c51c09ef 100644 --- a/module/src/components/label/label.component.tsx +++ b/module/src/components/label/label.component.tsx @@ -20,24 +20,23 @@ export interface ILabelProps extends Omit, } /** Render a status icon which can either be pending or errored */ -export const Label = React.forwardRef( - ({ required, className, requiredIndicator, children, displaySize, ...nativeProps }, ref) => { - const globals = useArmstrongConfig({ - inputDisplaySize: displaySize, - requiredIndicator, - }); - return ( - - {children} - {required &&  {globals.requiredIndicator}} - - ); - } -); +export const Label = (props: React.PropsWithChildren }>) => { + const { required, className, requiredIndicator, children, displaySize, ref, ...nativeProps } = props; + const globals = useArmstrongConfig({ + inputDisplaySize: displaySize, + requiredIndicator, + }); + return ( + + {children} + {required &&  {globals.requiredIndicator}} + + ); +}; Label.displayName = 'Label'; diff --git a/module/src/components/progressBar/progressBar.component.tsx b/module/src/components/progressBar/progressBar.component.tsx index a6771ff4..c0622e6f 100644 --- a/module/src/components/progressBar/progressBar.component.tsx +++ b/module/src/components/progressBar/progressBar.component.tsx @@ -13,18 +13,17 @@ export interface IProgressBarProps extends React.HTMLAttributes indicatorClassName?: string; } -export const ProgressBar = React.forwardRef( - ({ progress, className, indicatorClassName, ...props }, ref) => { - const style = { - '--arm-progress-bar-value': `${clamp(progress ?? 0, 0, 100)}%`, - } as React.CSSProperties; +export const ProgressBar = (props: IProgressBarProps & { ref?: React.Ref }) => { + const { progress, className, indicatorClassName, ref, ...restProps } = props; + const style = { + '--arm-progress-bar-value': `${clamp(progress ?? 0, 0, 100)}%`, + } as React.CSSProperties; - return ( - - - - ); - } -); + return ( + + + + ); +}; ProgressBar.displayName = 'ProgressBar'; diff --git a/module/src/components/spinner/spinner.component.tsx b/module/src/components/spinner/spinner.component.tsx index 8a6fa362..ad3d1531 100644 --- a/module/src/components/spinner/spinner.component.tsx +++ b/module/src/components/spinner/spinner.component.tsx @@ -17,29 +17,28 @@ export interface ISpinnerProps extends Omit, 'la } /** Renders a spinner centred in the div that's being wrapped */ -export const Spinner = React.forwardRef>( - ({ children, className, icon, fillContainer, label, ...HTMLProps }, ref) => { - const { spinnerIcon } = useArmstrongConfig({ spinnerIcon: icon }); - return ( -
-
{children || spinnerIcon}
- {label && ( -
- {label} -
- )} -
- ); - } -); +export const Spinner = (props: React.PropsWithChildren }>) => { + const { children, className, icon, fillContainer, label, ref, ...HTMLProps } = props; + const { spinnerIcon } = useArmstrongConfig({ spinnerIcon: icon }); + return ( +
+
{children || spinnerIcon}
+ {label && ( +
+ {label} +
+ )} +
+ ); +}; Spinner.displayName = 'Spinner'; diff --git a/module/src/components/status/status.component.tsx b/module/src/components/status/status.component.tsx index 7fb10db0..9ef16c49 100644 --- a/module/src/components/status/status.component.tsx +++ b/module/src/components/status/status.component.tsx @@ -24,31 +24,30 @@ export interface IStatusProps { } /** Render a status icon which can either be pending or errored */ -export const Status = React.forwardRef( - ({ pending, error, errorIcon, spinnerIcon, className, ...rest }, ref) => { - const globals = useArmstrongConfig({ - validationErrorIcon: errorIcon, - spinnerIcon, - }); - - if (!error && !pending) { - return null; - } - return ( -
- {error && !pending && globals.validationErrorIcon} - {pending && } -
- ); +export const Status = (props: IStatusProps & { ref?: React.Ref }) => { + const { pending, error, errorIcon, spinnerIcon, className, ref, ...rest } = props; + const globals = useArmstrongConfig({ + validationErrorIcon: errorIcon, + spinnerIcon, + }); + + if (!error && !pending) { + return null; } -); + return ( +
+ {error && !pending && globals.validationErrorIcon} + {pending && } +
+ ); +}; Status.displayName = 'Status'; From 4650d9d9897f91ebe460e414cc69faa8c818a7d4 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 9 Sep 2025 10:13:29 +0000 Subject: [PATCH 5/9] feat: convert TextArea, Switch, ValidationErrors, and Expandable components to React 19 ref pattern Co-authored-by: adamiprinciples <1008185+adamiprinciples@users.noreply.github.com> --- .../expandable/expandable.component.tsx | 49 ++++---- .../components/switch/switch.component.tsx | 59 +++++----- .../textArea/textArea.component.tsx | 108 +++++++++--------- .../validationErrors.component.tsx | 8 +- 4 files changed, 107 insertions(+), 117 deletions(-) diff --git a/module/src/components/expandable/expandable.component.tsx b/module/src/components/expandable/expandable.component.tsx index e0d885bc..d26c03ab 100644 --- a/module/src/components/expandable/expandable.component.tsx +++ b/module/src/components/expandable/expandable.component.tsx @@ -14,32 +14,31 @@ export interface IExpandableProps extends React.DetailedHTMLProps>( - ({ className, children, style, animate, isOpen, ...nativeProps }, ref) => { - const contentRef = React.useRef(null); - const [{ height }] = useBoundingClientRect(contentRef); - - return ( -
-
- {children} -
+export const Expandable = (props: React.PropsWithChildren }>) => { + const { className, children, style, animate, isOpen, ref, ...nativeProps } = props; + const contentRef = React.useRef(null); + const [{ height }] = useBoundingClientRect(contentRef); + + return ( +
+
+ {children}
- ); - } -); +
+ ); +}; Expandable.displayName = 'Expandable'; diff --git a/module/src/components/switch/switch.component.tsx b/module/src/components/switch/switch.component.tsx index fc8ae19e..c1ec6af4 100644 --- a/module/src/components/switch/switch.component.tsx +++ b/module/src/components/switch/switch.component.tsx @@ -60,30 +60,28 @@ export interface ISwitchProps> autoValidate?: boolean; } -export const Switch = React.forwardRef>>( - ( - { - bind, - checked, - onCheckedChange, - defaultChecked, - disabled, - className, - labelClassName, - label, - validationErrorMessages, - validationErrorsClassName, - scrollValidationErrorsIntoView, - validationMode, - displaySize, - labelId, - required, - requiredIndicator, - autoValidate, - ...nativeProps - }, - ref - ) => { +export const Switch = (props: React.PropsWithChildren> & { ref?: React.Ref }>) => { + const { + bind, + checked, + onCheckedChange, + defaultChecked, + disabled, + className, + labelClassName, + label, + validationErrorMessages, + validationErrorsClassName, + scrollValidationErrorsIntoView, + validationMode, + displaySize, + labelId, + required, + requiredIndicator, + autoValidate, + ref, + ...nativeProps + } = props; const generatedId = React.useId(); const id = nativeProps.id ?? generatedId; @@ -157,12 +155,11 @@ export const Switch = React.forwardRef ); - } - // type assertion to ensure generic works with RefForwarded component - // DO NOT CHANGE TYPE WITHOUT CHANGING THIS, FIND TYPE BY INSPECTING React.forwardRef -) as (>( - props: ArmstrongFCProps, HTMLInputElement> -) => ArmstrongFCReturn) & - ArmstrongFCExtensions>>; +}; + +// Type assertion for generic support - updated for React 19 ref as prop pattern +(Switch as any) = (Switch as (>( + props: React.PropsWithChildren & { ref?: React.Ref }> +) => React.ReactElement) & ArmstrongFCExtensions>>); Switch.displayName = 'Switch'; diff --git a/module/src/components/textArea/textArea.component.tsx b/module/src/components/textArea/textArea.component.tsx index 4350d997..fee8828d 100644 --- a/module/src/components/textArea/textArea.component.tsx +++ b/module/src/components/textArea/textArea.component.tsx @@ -27,21 +27,20 @@ interface IDelayedTextAreaBaseProps extends NativeTextAreaProps { value?: TValue; } -const DebounceTextAreaBase = React.forwardRef>( - ({ milliseconds, value, onValueChange, onChange, ...nativeProps }, ref) => { - const [actualValue, setActualValue] = useDebounce(milliseconds, value, onValueChange); - - const onChangeEvent = React.useCallback( - (e: React.ChangeEvent) => { - setActualValue(e.currentTarget.value); - onChange?.(e); - }, - [setActualValue, onChange] - ); +const DebounceTextAreaBase = (props: React.PropsWithChildren & { ref?: React.Ref }>) => { + const { milliseconds, value, onValueChange, onChange, ref, ...nativeProps } = props; + const [actualValue, setActualValue] = useDebounce(milliseconds, value, onValueChange); + + const onChangeEvent = React.useCallback( + (e: React.ChangeEvent) => { + setActualValue(e.currentTarget.value); + onChange?.(e); + }, + [setActualValue, onChange] + ); - return