From 02e3fc9809f42ead4cbfed9c2e0d0a569a608112 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20M=C3=A9ndez?= Date: Tue, 24 Feb 2026 15:10:38 -0700 Subject: [PATCH] refactor: convert Collapsible and TransitionReplace components to TypeScript --- package-lock.json | 323 +++++------------- ...lapsible.test.jsx => Collapsible.test.tsx} | 51 +-- src/Collapsible/CollapsibleAdvanced.jsx | 125 ------- src/Collapsible/CollapsibleAdvanced.tsx | 114 +++++++ ...ollapsibleBody.jsx => CollapsibleBody.tsx} | 32 +- src/Collapsible/CollapsibleTrigger.jsx | 77 ----- src/Collapsible/CollapsibleTrigger.tsx | 64 ++++ src/Collapsible/CollapsibleVisible.jsx | 36 -- src/Collapsible/CollapsibleVisible.tsx | 27 ++ ...est.jsx.snap => Collapsible.test.tsx.snap} | 2 +- src/Collapsible/index.jsx | 99 ------ src/Collapsible/index.tsx | 88 +++++ ...ce.test.jsx => TransitionReplace.test.tsx} | 22 +- src/TransitionReplace/index.jsx | 188 ---------- src/TransitionReplace/index.tsx | 144 ++++++++ 15 files changed, 568 insertions(+), 824 deletions(-) rename src/Collapsible/{Collapsible.test.jsx => Collapsible.test.tsx} (85%) delete mode 100644 src/Collapsible/CollapsibleAdvanced.jsx create mode 100644 src/Collapsible/CollapsibleAdvanced.tsx rename src/Collapsible/{CollapsibleBody.jsx => CollapsibleBody.tsx} (50%) delete mode 100644 src/Collapsible/CollapsibleTrigger.jsx create mode 100644 src/Collapsible/CollapsibleTrigger.tsx delete mode 100644 src/Collapsible/CollapsibleVisible.jsx create mode 100644 src/Collapsible/CollapsibleVisible.tsx rename src/Collapsible/__snapshots__/{Collapsible.test.jsx.snap => Collapsible.test.tsx.snap} (99%) delete mode 100644 src/Collapsible/index.jsx create mode 100644 src/Collapsible/index.tsx rename src/TransitionReplace/{TransitionReplace.test.jsx => TransitionReplace.test.tsx} (82%) delete mode 100644 src/TransitionReplace/index.jsx create mode 100644 src/TransitionReplace/index.tsx diff --git a/package-lock.json b/package-lock.json index 89ee0f0f8e..bb7e2d703a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -266,6 +266,7 @@ "example/node_modules/@babel/core": { "version": "7.22.5", "license": "MIT", + "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.22.5", @@ -535,6 +536,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.0.0", @@ -752,7 +754,6 @@ "example/node_modules/@jest/console": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", @@ -768,7 +769,6 @@ "example/node_modules/@jest/console/node_modules/@jest/types": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -784,7 +784,6 @@ "example/node_modules/@jest/console/node_modules/@types/yargs": { "version": "17.0.33", "license": "MIT", - "peer": true, "dependencies": { "@types/yargs-parser": "*" } @@ -792,7 +791,6 @@ "example/node_modules/@jest/console/node_modules/jest-util": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", @@ -808,7 +806,6 @@ "example/node_modules/@jest/console/node_modules/slash": { "version": "3.0.0", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -816,7 +813,6 @@ "example/node_modules/@jest/globals": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/environment": "^29.7.0", "@jest/expect": "^29.7.0", @@ -830,7 +826,6 @@ "example/node_modules/@jest/globals/node_modules/@jest/types": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -846,7 +841,6 @@ "example/node_modules/@jest/globals/node_modules/@types/yargs": { "version": "17.0.33", "license": "MIT", - "peer": true, "dependencies": { "@types/yargs-parser": "*" } @@ -854,7 +848,6 @@ "example/node_modules/@jest/reporters": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@bcoe/v8-coverage": "^0.2.3", "@jest/console": "^29.7.0", @@ -896,7 +889,6 @@ "example/node_modules/@jest/reporters/node_modules/@jest/test-result": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/console": "^29.7.0", "@jest/types": "^29.6.3", @@ -910,7 +902,6 @@ "example/node_modules/@jest/reporters/node_modules/@jest/transform": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "^7.11.6", "@jest/types": "^29.6.3", @@ -935,7 +926,6 @@ "example/node_modules/@jest/reporters/node_modules/@jest/types": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -951,20 +941,17 @@ "example/node_modules/@jest/reporters/node_modules/@types/yargs": { "version": "17.0.33", "license": "MIT", - "peer": true, "dependencies": { "@types/yargs-parser": "*" } }, "example/node_modules/@jest/reporters/node_modules/convert-source-map": { "version": "2.0.0", - "license": "MIT", - "peer": true + "license": "MIT" }, "example/node_modules/@jest/reporters/node_modules/glob": { "version": "7.2.3", "license": "ISC", - "peer": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -983,7 +970,6 @@ "example/node_modules/@jest/reporters/node_modules/jest-haste-map": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/graceful-fs": "^4.1.3", @@ -1007,7 +993,6 @@ "example/node_modules/@jest/reporters/node_modules/jest-regex-util": { "version": "29.6.3", "license": "MIT", - "peer": true, "engines": { "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } @@ -1015,7 +1000,6 @@ "example/node_modules/@jest/reporters/node_modules/jest-util": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", @@ -1031,7 +1015,6 @@ "example/node_modules/@jest/reporters/node_modules/slash": { "version": "3.0.0", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -1039,7 +1022,6 @@ "example/node_modules/@jest/reporters/node_modules/write-file-atomic": { "version": "4.0.2", "license": "ISC", - "peer": true, "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^3.0.7" @@ -1051,7 +1033,6 @@ "example/node_modules/@jest/source-map": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@jridgewell/trace-mapping": "^0.3.18", "callsites": "^3.0.0", @@ -1064,7 +1045,6 @@ "example/node_modules/@jest/test-sequencer": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/test-result": "^29.7.0", "graceful-fs": "^4.2.9", @@ -1078,7 +1058,6 @@ "example/node_modules/@jest/test-sequencer/node_modules/@jest/test-result": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/console": "^29.7.0", "@jest/types": "^29.6.3", @@ -1092,7 +1071,6 @@ "example/node_modules/@jest/test-sequencer/node_modules/@jest/types": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -1108,7 +1086,6 @@ "example/node_modules/@jest/test-sequencer/node_modules/@types/yargs": { "version": "17.0.33", "license": "MIT", - "peer": true, "dependencies": { "@types/yargs-parser": "*" } @@ -1116,7 +1093,6 @@ "example/node_modules/@jest/test-sequencer/node_modules/jest-haste-map": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/graceful-fs": "^4.1.3", @@ -1140,7 +1116,6 @@ "example/node_modules/@jest/test-sequencer/node_modules/jest-regex-util": { "version": "29.6.3", "license": "MIT", - "peer": true, "engines": { "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } @@ -1148,7 +1123,6 @@ "example/node_modules/@jest/test-sequencer/node_modules/jest-util": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", @@ -1164,7 +1138,6 @@ "example/node_modules/@jest/test-sequencer/node_modules/slash": { "version": "3.0.0", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -1217,7 +1190,6 @@ "example/node_modules/@openedx/frontend-build": { "version": "14.2.2", "license": "AGPL-3.0", - "peer": true, "dependencies": { "@babel/cli": "7.24.8", "@babel/core": "7.24.9", @@ -1298,7 +1270,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/@babel/cli": { "version": "7.24.8", "license": "MIT", - "peer": true, "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "commander": "^6.2.0", @@ -1355,7 +1326,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/@babel/preset-env": { "version": "7.24.8", "license": "MIT", - "peer": true, "dependencies": { "@babel/compat-data": "^7.24.8", "@babel/helper-compilation-targets": "^7.24.8", @@ -1449,7 +1419,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/@babel/preset-modules": { "version": "0.1.6-no-external-plugins", "license": "MIT", - "peer": true, "dependencies": { "@babel/helper-plugin-utils": "^7.0.0", "@babel/types": "^7.4.4", @@ -1462,7 +1431,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/@babel/preset-react": { "version": "7.24.7", "license": "MIT", - "peer": true, "dependencies": { "@babel/helper-plugin-utils": "^7.24.7", "@babel/helper-validator-option": "^7.24.7", @@ -1481,7 +1449,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/@edx/eslint-config": { "version": "4.3.0", "license": "MIT", - "peer": true, "peerDependencies": { "@typescript-eslint/eslint-plugin": "^5.62.0", "@typescript-eslint/parser": "^5.62.0", @@ -1497,7 +1464,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/@jest/core": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/console": "^29.7.0", "@jest/reporters": "^29.7.0", @@ -1543,7 +1509,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/@jest/core/node_modules/babel-jest": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/transform": "^29.7.0", "@types/babel__core": "^7.1.14", @@ -1563,7 +1528,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/@jest/core/node_modules/jest-config": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "^7.11.6", "@jest/test-sequencer": "^29.7.0", @@ -1607,7 +1571,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/@jest/core/node_modules/slash": { "version": "3.0.0", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -1615,7 +1578,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/@jest/test-result": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/console": "^29.7.0", "@jest/types": "^29.6.3", @@ -1629,7 +1591,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/@jest/transform": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "^7.11.6", "@jest/types": "^29.6.3", @@ -1654,7 +1615,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/@jest/transform/node_modules/slash": { "version": "3.0.0", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -1662,7 +1622,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/@jest/types": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -1678,7 +1637,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/@pmmmwh/react-refresh-webpack-plugin": { "version": "0.5.15", "license": "MIT", - "peer": true, "dependencies": { "ansi-html": "^0.0.9", "core-js-pure": "^3.23.3", @@ -1725,7 +1683,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/@types/yargs": { "version": "17.0.33", "license": "MIT", - "peer": true, "dependencies": { "@types/yargs-parser": "*" } @@ -1747,7 +1704,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "browserslist": "^4.23.3", "caniuse-lite": "^1.0.30001646", @@ -1769,7 +1725,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/babel-jest": { "version": "29.6.1", "license": "MIT", - "peer": true, "dependencies": { "@jest/transform": "^29.6.1", "@types/babel__core": "^7.1.14", @@ -1789,7 +1744,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/babel-jest/node_modules/slash": { "version": "3.0.0", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -1797,7 +1751,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/babel-plugin-polyfill-corejs3": { "version": "0.10.6", "license": "MIT", - "peer": true, "dependencies": { "@babel/helper-define-polyfill-provider": "^0.6.2", "core-js-compat": "^3.38.0" @@ -1809,7 +1762,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/babel-plugin-polyfill-regenerator": { "version": "0.6.3", "license": "MIT", - "peer": true, "dependencies": { "@babel/helper-define-polyfill-provider": "^0.6.3" }, @@ -1820,7 +1772,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/babel-preset-jest": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "babel-plugin-jest-hoist": "^29.6.3", "babel-preset-current-node-syntax": "^1.0.0" @@ -1835,20 +1786,17 @@ "example/node_modules/@openedx/frontend-build/node_modules/commander": { "version": "6.2.1", "license": "MIT", - "peer": true, "engines": { "node": ">= 6" } }, "example/node_modules/@openedx/frontend-build/node_modules/convert-source-map": { "version": "2.0.0", - "license": "MIT", - "peer": true + "license": "MIT" }, "example/node_modules/@openedx/frontend-build/node_modules/cssnano": { "version": "6.0.3", "license": "MIT", - "peer": true, "dependencies": { "cssnano-preset-default": "^6.0.3", "lilconfig": "^3.0.0" @@ -1867,7 +1815,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/debug": { "version": "4.4.0", "license": "MIT", - "peer": true, "dependencies": { "ms": "^2.1.3" }, @@ -1883,7 +1830,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/glob": { "version": "7.2.3", "license": "ISC", - "peer": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -1902,7 +1848,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/html-webpack-plugin": { "version": "5.6.3", "license": "MIT", - "peer": true, "dependencies": { "@types/html-minifier-terser": "^6.0.0", "html-minifier-terser": "^6.0.2", @@ -1958,7 +1903,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/jest-cli": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/core": "^29.7.0", "@jest/test-result": "^29.7.0", @@ -1990,7 +1934,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/jest-cli/node_modules/babel-jest": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/transform": "^29.7.0", "@types/babel__core": "^7.1.14", @@ -2010,7 +1953,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/jest-cli/node_modules/jest-config": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "^7.11.6", "@jest/test-sequencer": "^29.7.0", @@ -2054,7 +1996,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/jest-cli/node_modules/slash": { "version": "3.0.0", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -2062,7 +2003,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/jest-haste-map": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/graceful-fs": "^4.1.3", @@ -2086,7 +2026,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/jest-regex-util": { "version": "29.6.3", "license": "MIT", - "peer": true, "engines": { "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } @@ -2094,7 +2033,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/jest-util": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", @@ -2110,7 +2048,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/jest-validate": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "camelcase": "^6.2.0", @@ -2126,7 +2063,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/postcss-loader": { "version": "7.3.4", "license": "MIT", - "peer": true, "dependencies": { "cosmiconfig": "^8.3.5", "jiti": "^1.20.0", @@ -2147,7 +2083,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/postcss-loader/node_modules/semver": { "version": "7.6.3", "license": "ISC", - "peer": true, "bin": { "semver": "bin/semver.js" }, @@ -2166,7 +2101,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/sass-loader": { "version": "13.3.3", "license": "MIT", - "peer": true, "dependencies": { "neo-async": "^2.6.2" }, @@ -2202,7 +2136,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/source-map": { "version": "0.7.4", "license": "BSD-3-Clause", - "peer": true, "engines": { "node": ">= 8" } @@ -2210,7 +2143,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/source-map-loader": { "version": "4.0.2", "license": "MIT", - "peer": true, "dependencies": { "iconv-lite": "^0.6.3", "source-map-js": "^1.0.2" @@ -2229,7 +2161,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/style-loader": { "version": "3.3.4", "license": "MIT", - "peer": true, "engines": { "node": ">= 12.13.0" }, @@ -2244,7 +2175,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/ts-jest": { "version": "29.1.4", "license": "MIT", - "peer": true, "dependencies": { "bs-logger": "0.x", "fast-json-stable-stringify": "2.x", @@ -2290,7 +2220,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/ts-jest/node_modules/semver": { "version": "7.6.3", "license": "ISC", - "peer": true, "bin": { "semver": "bin/semver.js" }, @@ -2301,7 +2230,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/webpack-merge": { "version": "5.10.0", "license": "MIT", - "peer": true, "dependencies": { "clone-deep": "^4.0.1", "flat": "^5.0.2", @@ -2314,7 +2242,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/write-file-atomic": { "version": "4.0.2", "license": "ISC", - "peer": true, "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^3.0.7" @@ -2326,7 +2253,6 @@ "example/node_modules/@openedx/frontend-build/node_modules/yargs": { "version": "17.7.2", "license": "MIT", - "peer": true, "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", @@ -2394,7 +2320,6 @@ "example/node_modules/@types/jest": { "version": "29.5.12", "license": "MIT", - "peer": true, "dependencies": { "expect": "^29.0.0", "pretty-format": "^29.0.0" @@ -2403,7 +2328,6 @@ "example/node_modules/ansi-styles": { "version": "5.2.0", "license": "MIT", - "peer": true, "engines": { "node": ">=10" }, @@ -2414,6 +2338,7 @@ "example/node_modules/axios": { "version": "1.6.7", "license": "MIT", + "peer": true, "dependencies": { "follow-redirects": "^1.15.4", "form-data": "^4.0.0", @@ -2483,7 +2408,6 @@ "example/node_modules/babel-plugin-jest-hoist": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@babel/template": "^7.3.3", "@babel/types": "^7.3.3", @@ -2537,20 +2461,17 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=8" } }, "example/node_modules/cjs-module-lexer": { "version": "1.4.1", - "license": "MIT", - "peer": true + "license": "MIT" }, "example/node_modules/cliui": { "version": "8.0.1", "license": "ISC", - "peer": true, "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", @@ -2584,7 +2505,6 @@ "example/node_modules/emittery": { "version": "0.13.1", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -2595,6 +2515,7 @@ "example/node_modules/eslint": { "version": "8.44.0", "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.4.0", @@ -2651,6 +2572,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz", "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==", "license": "MIT", + "peer": true, "dependencies": { "array-includes": "^3.1.6", "array.prototype.flat": "^1.3.1", @@ -2680,6 +2602,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz", "integrity": "sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.20.7", "aria-query": "^5.1.3", @@ -2708,6 +2631,7 @@ "example/node_modules/eslint-plugin-react": { "version": "7.32.2", "license": "MIT", + "peer": true, "dependencies": { "array-includes": "^3.1.6", "array.prototype.flatmap": "^1.3.1", @@ -2735,6 +2659,7 @@ "example/node_modules/eslint-plugin-react-hooks": { "version": "4.6.0", "license": "MIT", + "peer": true, "engines": { "node": ">=10" }, @@ -2797,7 +2722,6 @@ "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz", "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==", "license": "MIT", - "peer": true, "dependencies": { "tslib": "^2.4.0" }, @@ -2829,7 +2753,6 @@ "example/node_modules/iconv-lite": { "version": "0.6.3", "license": "MIT", - "peer": true, "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" }, @@ -2840,7 +2763,6 @@ "example/node_modules/istanbul-lib-instrument": { "version": "6.0.3", "license": "BSD-3-Clause", - "peer": true, "dependencies": { "@babel/core": "^7.23.9", "@babel/parser": "^7.23.9", @@ -2855,7 +2777,6 @@ "example/node_modules/istanbul-lib-instrument/node_modules/@babel/core": { "version": "7.26.0", "license": "MIT", - "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.0", @@ -2884,20 +2805,17 @@ "example/node_modules/istanbul-lib-instrument/node_modules/@babel/core/node_modules/semver": { "version": "6.3.1", "license": "ISC", - "peer": true, "bin": { "semver": "bin/semver.js" } }, "example/node_modules/istanbul-lib-instrument/node_modules/convert-source-map": { "version": "2.0.0", - "license": "MIT", - "peer": true + "license": "MIT" }, "example/node_modules/istanbul-lib-instrument/node_modules/debug": { "version": "4.4.0", "license": "MIT", - "peer": true, "dependencies": { "ms": "^2.1.3" }, @@ -2913,7 +2831,6 @@ "example/node_modules/istanbul-lib-instrument/node_modules/semver": { "version": "7.6.3", "license": "ISC", - "peer": true, "bin": { "semver": "bin/semver.js" }, @@ -2939,7 +2856,6 @@ "example/node_modules/jest-changed-files": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "execa": "^5.0.0", "jest-util": "^29.7.0", @@ -2952,7 +2868,6 @@ "example/node_modules/jest-changed-files/node_modules/@jest/types": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -2968,7 +2883,6 @@ "example/node_modules/jest-changed-files/node_modules/@types/yargs": { "version": "17.0.33", "license": "MIT", - "peer": true, "dependencies": { "@types/yargs-parser": "*" } @@ -2976,7 +2890,6 @@ "example/node_modules/jest-changed-files/node_modules/jest-util": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", @@ -3017,7 +2930,6 @@ "example/node_modules/jest-docblock": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "detect-newline": "^3.0.0" }, @@ -3028,7 +2940,6 @@ "example/node_modules/jest-environment-jsdom": { "version": "29.6.1", "license": "MIT", - "peer": true, "dependencies": { "@jest/environment": "^29.6.1", "@jest/fake-timers": "^29.6.1", @@ -3054,7 +2965,6 @@ "example/node_modules/jest-environment-jsdom/node_modules/@jest/types": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -3070,7 +2980,6 @@ "example/node_modules/jest-environment-jsdom/node_modules/@types/yargs": { "version": "17.0.33", "license": "MIT", - "peer": true, "dependencies": { "@types/yargs-parser": "*" } @@ -3078,7 +2987,6 @@ "example/node_modules/jest-environment-jsdom/node_modules/jest-util": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", @@ -3094,7 +3002,6 @@ "example/node_modules/jest-environment-node": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/environment": "^29.7.0", "@jest/fake-timers": "^29.7.0", @@ -3110,7 +3017,6 @@ "example/node_modules/jest-environment-node/node_modules/@jest/types": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -3126,7 +3032,6 @@ "example/node_modules/jest-environment-node/node_modules/@types/yargs": { "version": "17.0.33", "license": "MIT", - "peer": true, "dependencies": { "@types/yargs-parser": "*" } @@ -3134,7 +3039,6 @@ "example/node_modules/jest-environment-node/node_modules/jest-util": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", @@ -3150,7 +3054,6 @@ "example/node_modules/jest-leak-detector": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "jest-get-type": "^29.6.3", "pretty-format": "^29.7.0" @@ -3162,7 +3065,6 @@ "example/node_modules/jest-message-util": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.12.13", "@jest/types": "^29.6.3", @@ -3181,7 +3083,6 @@ "example/node_modules/jest-message-util/node_modules/@jest/types": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -3197,7 +3098,6 @@ "example/node_modules/jest-message-util/node_modules/@types/yargs": { "version": "17.0.33", "license": "MIT", - "peer": true, "dependencies": { "@types/yargs-parser": "*" } @@ -3205,7 +3105,6 @@ "example/node_modules/jest-message-util/node_modules/slash": { "version": "3.0.0", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -3213,7 +3112,6 @@ "example/node_modules/jest-resolve": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "chalk": "^4.0.0", "graceful-fs": "^4.2.9", @@ -3232,7 +3130,6 @@ "example/node_modules/jest-resolve-dependencies": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "jest-regex-util": "^29.6.3", "jest-snapshot": "^29.7.0" @@ -3244,7 +3141,6 @@ "example/node_modules/jest-resolve-dependencies/node_modules/jest-regex-util": { "version": "29.6.3", "license": "MIT", - "peer": true, "engines": { "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } @@ -3252,7 +3148,6 @@ "example/node_modules/jest-resolve/node_modules/@jest/types": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -3268,7 +3163,6 @@ "example/node_modules/jest-resolve/node_modules/@types/yargs": { "version": "17.0.33", "license": "MIT", - "peer": true, "dependencies": { "@types/yargs-parser": "*" } @@ -3276,7 +3170,6 @@ "example/node_modules/jest-resolve/node_modules/jest-haste-map": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/graceful-fs": "^4.1.3", @@ -3300,7 +3193,6 @@ "example/node_modules/jest-resolve/node_modules/jest-regex-util": { "version": "29.6.3", "license": "MIT", - "peer": true, "engines": { "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } @@ -3308,7 +3200,6 @@ "example/node_modules/jest-resolve/node_modules/jest-util": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", @@ -3324,7 +3215,6 @@ "example/node_modules/jest-resolve/node_modules/jest-validate": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "camelcase": "^6.2.0", @@ -3340,7 +3230,6 @@ "example/node_modules/jest-resolve/node_modules/slash": { "version": "3.0.0", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -3348,7 +3237,6 @@ "example/node_modules/jest-runner": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/console": "^29.7.0", "@jest/environment": "^29.7.0", @@ -3379,7 +3267,6 @@ "example/node_modules/jest-runner/node_modules/@jest/test-result": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/console": "^29.7.0", "@jest/types": "^29.6.3", @@ -3393,7 +3280,6 @@ "example/node_modules/jest-runner/node_modules/@jest/transform": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "^7.11.6", "@jest/types": "^29.6.3", @@ -3418,7 +3304,6 @@ "example/node_modules/jest-runner/node_modules/@jest/types": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -3434,20 +3319,17 @@ "example/node_modules/jest-runner/node_modules/@types/yargs": { "version": "17.0.33", "license": "MIT", - "peer": true, "dependencies": { "@types/yargs-parser": "*" } }, "example/node_modules/jest-runner/node_modules/convert-source-map": { "version": "2.0.0", - "license": "MIT", - "peer": true + "license": "MIT" }, "example/node_modules/jest-runner/node_modules/jest-haste-map": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/graceful-fs": "^4.1.3", @@ -3471,7 +3353,6 @@ "example/node_modules/jest-runner/node_modules/jest-regex-util": { "version": "29.6.3", "license": "MIT", - "peer": true, "engines": { "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } @@ -3479,7 +3360,6 @@ "example/node_modules/jest-runner/node_modules/jest-util": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", @@ -3495,7 +3375,6 @@ "example/node_modules/jest-runner/node_modules/slash": { "version": "3.0.0", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -3503,7 +3382,6 @@ "example/node_modules/jest-runner/node_modules/write-file-atomic": { "version": "4.0.2", "license": "ISC", - "peer": true, "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^3.0.7" @@ -3515,7 +3393,6 @@ "example/node_modules/jest-runtime": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/environment": "^29.7.0", "@jest/fake-timers": "^29.7.0", @@ -3547,7 +3424,6 @@ "example/node_modules/jest-runtime/node_modules/@jest/test-result": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/console": "^29.7.0", "@jest/types": "^29.6.3", @@ -3561,7 +3437,6 @@ "example/node_modules/jest-runtime/node_modules/@jest/transform": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "^7.11.6", "@jest/types": "^29.6.3", @@ -3586,7 +3461,6 @@ "example/node_modules/jest-runtime/node_modules/@jest/types": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -3602,20 +3476,17 @@ "example/node_modules/jest-runtime/node_modules/@types/yargs": { "version": "17.0.33", "license": "MIT", - "peer": true, "dependencies": { "@types/yargs-parser": "*" } }, "example/node_modules/jest-runtime/node_modules/convert-source-map": { "version": "2.0.0", - "license": "MIT", - "peer": true + "license": "MIT" }, "example/node_modules/jest-runtime/node_modules/glob": { "version": "7.2.3", "license": "ISC", - "peer": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -3634,7 +3505,6 @@ "example/node_modules/jest-runtime/node_modules/jest-haste-map": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/graceful-fs": "^4.1.3", @@ -3658,7 +3528,6 @@ "example/node_modules/jest-runtime/node_modules/jest-regex-util": { "version": "29.6.3", "license": "MIT", - "peer": true, "engines": { "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } @@ -3666,7 +3535,6 @@ "example/node_modules/jest-runtime/node_modules/jest-util": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", @@ -3682,7 +3550,6 @@ "example/node_modules/jest-runtime/node_modules/slash": { "version": "3.0.0", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -3690,7 +3557,6 @@ "example/node_modules/jest-runtime/node_modules/write-file-atomic": { "version": "4.0.2", "license": "ISC", - "peer": true, "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^3.0.7" @@ -3702,7 +3568,6 @@ "example/node_modules/jest-snapshot": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "^7.11.6", "@babel/generator": "^7.7.2", @@ -3732,7 +3597,6 @@ "example/node_modules/jest-snapshot/node_modules/@jest/transform": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "^7.11.6", "@jest/types": "^29.6.3", @@ -3757,7 +3621,6 @@ "example/node_modules/jest-snapshot/node_modules/@jest/types": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -3773,20 +3636,17 @@ "example/node_modules/jest-snapshot/node_modules/@types/yargs": { "version": "17.0.33", "license": "MIT", - "peer": true, "dependencies": { "@types/yargs-parser": "*" } }, "example/node_modules/jest-snapshot/node_modules/convert-source-map": { "version": "2.0.0", - "license": "MIT", - "peer": true + "license": "MIT" }, "example/node_modules/jest-snapshot/node_modules/jest-haste-map": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/graceful-fs": "^4.1.3", @@ -3810,7 +3670,6 @@ "example/node_modules/jest-snapshot/node_modules/jest-regex-util": { "version": "29.6.3", "license": "MIT", - "peer": true, "engines": { "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } @@ -3818,7 +3677,6 @@ "example/node_modules/jest-snapshot/node_modules/jest-util": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", @@ -3834,7 +3692,6 @@ "example/node_modules/jest-snapshot/node_modules/semver": { "version": "7.6.3", "license": "ISC", - "peer": true, "bin": { "semver": "bin/semver.js" }, @@ -3845,7 +3702,6 @@ "example/node_modules/jest-snapshot/node_modules/slash": { "version": "3.0.0", "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -3853,7 +3709,6 @@ "example/node_modules/jest-snapshot/node_modules/write-file-atomic": { "version": "4.0.2", "license": "ISC", - "peer": true, "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^3.0.7" @@ -3865,7 +3720,6 @@ "example/node_modules/jest-watcher": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/test-result": "^29.7.0", "@jest/types": "^29.6.3", @@ -3883,7 +3737,6 @@ "example/node_modules/jest-watcher/node_modules/@jest/test-result": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/console": "^29.7.0", "@jest/types": "^29.6.3", @@ -3897,7 +3750,6 @@ "example/node_modules/jest-watcher/node_modules/@jest/types": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -3913,7 +3765,6 @@ "example/node_modules/jest-watcher/node_modules/@types/yargs": { "version": "17.0.33", "license": "MIT", - "peer": true, "dependencies": { "@types/yargs-parser": "*" } @@ -3921,7 +3772,6 @@ "example/node_modules/jest-watcher/node_modules/jest-util": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", @@ -3937,7 +3787,6 @@ "example/node_modules/jest-worker": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@types/node": "*", "jest-util": "^29.7.0", @@ -3951,7 +3800,6 @@ "example/node_modules/jest-worker/node_modules/@jest/types": { "version": "29.6.3", "license": "MIT", - "peer": true, "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -3967,7 +3815,6 @@ "example/node_modules/jest-worker/node_modules/@types/yargs": { "version": "17.0.33", "license": "MIT", - "peer": true, "dependencies": { "@types/yargs-parser": "*" } @@ -3975,7 +3822,6 @@ "example/node_modules/jest-worker/node_modules/jest-util": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", @@ -3991,7 +3837,6 @@ "example/node_modules/lilconfig": { "version": "3.1.3", "license": "MIT", - "peer": true, "engines": { "node": ">=14" }, @@ -4002,7 +3847,6 @@ "example/node_modules/parse5": { "version": "7.1.2", "license": "MIT", - "peer": true, "dependencies": { "entities": "^4.4.0" }, @@ -4025,7 +3869,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "@csstools/cascade-layer-name-parser": "^1.0.13", "@csstools/css-parser-algorithms": "^2.7.1", @@ -4050,7 +3893,6 @@ "example/node_modules/pretty-format": { "version": "29.7.0", "license": "MIT", - "peer": true, "dependencies": { "@jest/schemas": "^29.6.3", "ansi-styles": "^5.0.0", @@ -4063,6 +3905,7 @@ "example/node_modules/react": { "version": "17.0.2", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -4074,6 +3917,7 @@ "example/node_modules/react-dom": { "version": "17.0.2", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -4085,15 +3929,13 @@ }, "example/node_modules/react-is": { "version": "18.3.1", - "license": "MIT", - "peer": true + "license": "MIT" }, "example/node_modules/react-responsive": { "version": "8.2.0", "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz", "integrity": "sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==", "license": "MIT", - "peer": true, "dependencies": { "hyphenate-style-name": "^1.0.0", "matchmediaquery": "^0.3.0", @@ -4172,7 +4014,6 @@ "example/node_modules/source-map-support": { "version": "0.5.13", "license": "MIT", - "peer": true, "dependencies": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" @@ -4181,7 +4022,6 @@ "example/node_modules/supports-color": { "version": "8.1.1", "license": "MIT", - "peer": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -4195,7 +4035,6 @@ "example/node_modules/v8-to-istanbul": { "version": "9.3.0", "license": "ISC", - "peer": true, "dependencies": { "@jridgewell/trace-mapping": "^0.3.12", "@types/istanbul-lib-coverage": "^2.0.1", @@ -4207,12 +4046,12 @@ }, "example/node_modules/v8-to-istanbul/node_modules/convert-source-map": { "version": "2.0.0", - "license": "MIT", - "peer": true + "license": "MIT" }, "example/node_modules/webpack": { "version": "5.89.0", "license": "MIT", + "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.3", "@types/estree": "^1.0.0", @@ -4292,7 +4131,6 @@ "example/node_modules/y18n": { "version": "5.0.8", "license": "ISC", - "peer": true, "engines": { "node": ">=10" } @@ -4300,7 +4138,6 @@ "example/node_modules/yargs-parser": { "version": "21.1.1", "license": "ISC", - "peer": true, "engines": { "node": ">=12" } @@ -4453,6 +4290,7 @@ "node_modules/@algolia/client-search": { "version": "5.17.0", "license": "MIT", + "peer": true, "dependencies": { "@algolia/client-common": "5.17.0", "@algolia/requester-browser-xhr": "5.17.0", @@ -4717,6 +4555,7 @@ "node_modules/@babel/core": { "version": "7.26.0", "license": "MIT", + "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.0", @@ -6906,6 +6745,7 @@ } ], "license": "MIT", + "peer": true, "engines": { "node": "^14 || ^16 || >=18" }, @@ -6926,6 +6766,7 @@ } ], "license": "MIT", + "peer": true, "engines": { "node": "^14 || ^16 || >=18" } @@ -7819,7 +7660,6 @@ "node_modules/@fortawesome/react-fontawesome": { "version": "0.1.19", "license": "MIT", - "peer": true, "dependencies": { "prop-types": "^15.8.1" }, @@ -7855,6 +7695,7 @@ "node_modules/@gatsbyjs/reach-router": { "version": "2.0.1", "license": "MIT", + "peer": true, "dependencies": { "invariant": "^2.2.4", "prop-types": "^15.8.1" @@ -9644,6 +9485,7 @@ "node_modules/@mdx-js/react": { "version": "2.3.0", "license": "MIT", + "peer": true, "dependencies": { "@types/mdx": "^2.0.0", "@types/react": ">=16" @@ -9795,6 +9637,7 @@ "version": "4.2.4", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@octokit/auth-token": "^3.0.0", "@octokit/graphql": "^5.0.0", @@ -10037,6 +9880,7 @@ "node_modules/@parcel/core": { "version": "2.8.3", "license": "MIT", + "peer": true, "dependencies": { "@mischnic/json-sourcemap": "^0.1.0", "@parcel/cache": "2.8.3", @@ -10950,6 +10794,7 @@ "node_modules/@popperjs/core": { "version": "2.11.8", "license": "MIT", + "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -10958,7 +10803,6 @@ "node_modules/@remix-run/router": { "version": "1.21.0", "license": "MIT", - "peer": true, "engines": { "node": ">=14.0.0" } @@ -11668,6 +11512,7 @@ "version": "6.5.1", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/core": "^7.19.6", "@svgr/babel-preset": "^6.5.1", @@ -11805,6 +11650,7 @@ "node_modules/@svgr/core": { "version": "8.1.0", "license": "MIT", + "peer": true, "dependencies": { "@babel/core": "^7.21.3", "@svgr/babel-preset": "8.1.0", @@ -12091,8 +11937,7 @@ "node_modules/@types/aria-query": { "version": "5.0.4", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@types/babel__core": { "version": "7.20.5", @@ -12490,8 +12335,7 @@ }, "node_modules/@types/picomatch": { "version": "2.3.4", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@types/prettier": { "version": "2.7.3", @@ -12519,6 +12363,7 @@ "node_modules/@types/react": { "version": "18.3.16", "license": "MIT", + "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -12543,7 +12388,6 @@ "node_modules/@types/react-redux": { "version": "7.1.34", "license": "MIT", - "peer": true, "dependencies": { "@types/hoist-non-react-statics": "^3.3.0", "@types/react": "*", @@ -12697,6 +12541,7 @@ "node_modules/@typescript-eslint/eslint-plugin": { "version": "5.62.0", "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/regexpp": "^4.4.0", "@typescript-eslint/scope-manager": "5.62.0", @@ -12754,6 +12599,7 @@ "node_modules/@typescript-eslint/parser": { "version": "5.62.0", "license": "BSD-2-Clause", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "5.62.0", "@typescript-eslint/types": "5.62.0", @@ -13004,6 +12850,7 @@ "integrity": "sha512-m3g9nQDWPtL+sTFdtCGRMI1Vrp86Ay4PBYq1Bo7Bnchj5ElNtAJpOqD+zg+apthVA4fB7oVpMWNjwpa6ElDWFQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@emotion/hash": "^0.9.0", "@vanilla-extract/private": "^1.0.9", @@ -13315,6 +13162,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -13422,6 +13270,7 @@ "node_modules/ajv": { "version": "6.12.6", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -13476,6 +13325,7 @@ "node_modules/algoliasearch": { "version": "5.17.0", "license": "MIT", + "peer": true, "dependencies": { "@algolia/client-abtesting": "5.17.0", "@algolia/client-analytics": "5.17.0", @@ -13564,7 +13414,6 @@ "node >= 0.8.0" ], "license": "Apache-2.0", - "peer": true, "bin": { "ansi-html": "bin/ansi-html" } @@ -13607,7 +13456,6 @@ "node_modules/ansis": { "version": "1.5.2", "license": "ISC", - "peer": true, "engines": { "node": ">=12.13" }, @@ -14197,6 +14045,7 @@ "resolved": "https://registry.npmjs.org/axios/-/axios-0.30.2.tgz", "integrity": "sha512-0pE4RQ4UQi1jKY6p7u6i1Tkzqmu+d+/tHS7Q7rKunWLB9WyilBTpHHpXzPNMDj5hTbK0B0PTLSz07yqMBiF6xg==", "license": "MIT", + "peer": true, "dependencies": { "follow-redirects": "^1.15.4", "form-data": "^4.0.4", @@ -14238,7 +14087,6 @@ "node_modules/babel-eslint": { "version": "10.1.0", "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.0.0", "@babel/parser": "^7.7.0", @@ -14257,7 +14105,6 @@ "node_modules/babel-eslint/node_modules/eslint-visitor-keys": { "version": "1.3.0", "license": "Apache-2.0", - "peer": true, "engines": { "node": ">=4" } @@ -15120,6 +14967,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001669", "electron-to-chromium": "^1.5.41", @@ -16731,6 +16579,7 @@ "version": "3.39.0", "hasInstallScript": true, "license": "MIT", + "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/core-js" @@ -18856,8 +18705,7 @@ "node_modules/dom-accessibility-api": { "version": "0.5.16", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/dom-converter": { "version": "0.2.0", @@ -20095,6 +19943,7 @@ "node_modules/eslint-config-airbnb": { "version": "19.0.4", "license": "MIT", + "peer": true, "dependencies": { "eslint-config-airbnb-base": "^15.0.0", "object.assign": "^4.1.2", @@ -20131,6 +19980,7 @@ "node_modules/eslint-config-airbnb-typescript": { "version": "17.1.0", "license": "MIT", + "peer": true, "dependencies": { "eslint-config-airbnb-base": "^15.0.0" }, @@ -20260,7 +20110,6 @@ "node_modules/eslint-plugin-formatjs": { "version": "4.13.3", "license": "MIT", - "peer": true, "dependencies": { "@formatjs/icu-messageformat-parser": "2.7.8", "@formatjs/ts-transformer": "3.13.14", @@ -20281,7 +20130,6 @@ "node_modules/eslint-plugin-formatjs/node_modules/@formatjs/ecma402-abstract": { "version": "2.0.0", "license": "MIT", - "peer": true, "dependencies": { "@formatjs/intl-localematcher": "0.5.4", "tslib": "^2.4.0" @@ -20290,7 +20138,6 @@ "node_modules/eslint-plugin-formatjs/node_modules/@formatjs/icu-messageformat-parser": { "version": "2.7.8", "license": "MIT", - "peer": true, "dependencies": { "@formatjs/ecma402-abstract": "2.0.0", "@formatjs/icu-skeleton-parser": "1.8.2", @@ -20300,7 +20147,6 @@ "node_modules/eslint-plugin-formatjs/node_modules/@formatjs/icu-skeleton-parser": { "version": "1.8.2", "license": "MIT", - "peer": true, "dependencies": { "@formatjs/ecma402-abstract": "2.0.0", "tslib": "^2.4.0" @@ -20309,7 +20155,6 @@ "node_modules/eslint-plugin-formatjs/node_modules/@formatjs/intl-localematcher": { "version": "0.5.4", "license": "MIT", - "peer": true, "dependencies": { "tslib": "^2.4.0" } @@ -20317,7 +20162,6 @@ "node_modules/eslint-plugin-formatjs/node_modules/@formatjs/ts-transformer": { "version": "3.13.14", "license": "MIT", - "peer": true, "dependencies": { "@formatjs/icu-messageformat-parser": "2.7.8", "@types/json-stable-stringify": "^1.0.32", @@ -20339,7 +20183,6 @@ "node_modules/eslint-plugin-formatjs/node_modules/@types/eslint": { "version": "8.56.12", "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "*", "@types/json-schema": "*" @@ -20347,13 +20190,11 @@ }, "node_modules/eslint-plugin-formatjs/node_modules/@types/node": { "version": "17.0.45", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/eslint-plugin-formatjs/node_modules/@typescript-eslint/scope-manager": { "version": "6.21.0", "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/types": "6.21.0", "@typescript-eslint/visitor-keys": "6.21.0" @@ -20369,7 +20210,6 @@ "node_modules/eslint-plugin-formatjs/node_modules/@typescript-eslint/types": { "version": "6.21.0", "license": "MIT", - "peer": true, "engines": { "node": "^16.0.0 || >=18.0.0" }, @@ -20381,7 +20221,6 @@ "node_modules/eslint-plugin-formatjs/node_modules/@typescript-eslint/typescript-estree": { "version": "6.21.0", "license": "BSD-2-Clause", - "peer": true, "dependencies": { "@typescript-eslint/types": "6.21.0", "@typescript-eslint/visitor-keys": "6.21.0", @@ -20408,7 +20247,6 @@ "node_modules/eslint-plugin-formatjs/node_modules/@typescript-eslint/utils": { "version": "6.21.0", "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@types/json-schema": "^7.0.12", @@ -20432,7 +20270,6 @@ "node_modules/eslint-plugin-formatjs/node_modules/@typescript-eslint/visitor-keys": { "version": "6.21.0", "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/types": "6.21.0", "eslint-visitor-keys": "^3.4.1" @@ -20448,7 +20285,6 @@ "node_modules/eslint-plugin-formatjs/node_modules/brace-expansion": { "version": "2.0.1", "license": "MIT", - "peer": true, "dependencies": { "balanced-match": "^1.0.0" } @@ -20456,7 +20292,6 @@ "node_modules/eslint-plugin-formatjs/node_modules/debug": { "version": "4.4.0", "license": "MIT", - "peer": true, "dependencies": { "ms": "^2.1.3" }, @@ -20471,13 +20306,11 @@ }, "node_modules/eslint-plugin-formatjs/node_modules/emoji-regex": { "version": "10.4.0", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/eslint-plugin-formatjs/node_modules/eslint-visitor-keys": { "version": "3.4.3", "license": "Apache-2.0", - "peer": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, @@ -20488,7 +20321,6 @@ "node_modules/eslint-plugin-formatjs/node_modules/magic-string": { "version": "0.30.17", "license": "MIT", - "peer": true, "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } @@ -20496,7 +20328,6 @@ "node_modules/eslint-plugin-formatjs/node_modules/minimatch": { "version": "9.0.3", "license": "ISC", - "peer": true, "dependencies": { "brace-expansion": "^2.0.1" }, @@ -20510,7 +20341,6 @@ "node_modules/eslint-plugin-formatjs/node_modules/semver": { "version": "7.6.3", "license": "ISC", - "peer": true, "bin": { "semver": "bin/semver.js" }, @@ -20520,13 +20350,11 @@ }, "node_modules/eslint-plugin-formatjs/node_modules/tslib": { "version": "2.6.2", - "license": "0BSD", - "peer": true + "license": "0BSD" }, "node_modules/eslint-plugin-formatjs/node_modules/typescript": { "version": "5.7.3", "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -21764,7 +21592,6 @@ "node_modules/flat": { "version": "5.0.2", "license": "BSD-3-Clause", - "peer": true, "bin": { "flat": "cli.js" } @@ -21816,7 +21643,6 @@ "node_modules/font-awesome": { "version": "4.7.0", "license": "(OFL-1.1 AND MIT)", - "peer": true, "engines": { "node": ">=0.10.3" } @@ -22180,6 +22006,7 @@ "version": "5.14.0", "hasInstallScript": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.18.6", "@babel/core": "^7.20.12", @@ -23049,6 +22876,7 @@ "node_modules/gatsby-source-filesystem": { "version": "5.14.0", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.20.13", "chokidar": "^3.5.3", @@ -23297,6 +23125,7 @@ "node_modules/gatsby/node_modules/eslint": { "version": "7.32.0", "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "7.12.11", "@eslint/eslintrc": "^0.4.3", @@ -23383,6 +23212,7 @@ "node_modules/gatsby/node_modules/eslint-plugin-flowtype": { "version": "5.10.0", "license": "BSD-3-Clause", + "peer": true, "dependencies": { "lodash": "^4.17.15", "string-natural-compare": "^3.0.1" @@ -24076,6 +23906,7 @@ "node_modules/graphql": { "version": "16.9.0", "license": "MIT", + "peer": true, "engines": { "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0" } @@ -31363,6 +31194,7 @@ "integrity": "sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "acorn": "^8.5.0", "eslint-visitor-keys": "^3.0.0", @@ -32485,7 +32317,6 @@ "node_modules/matchmediaquery": { "version": "0.3.1", "license": "MIT", - "peer": true, "dependencies": { "css-mediaquery": "^0.1.2" } @@ -39034,6 +38865,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.1.1", @@ -39642,7 +39474,6 @@ "node_modules/postcss-rtlcss": { "version": "5.1.2", "license": "Apache-2.0", - "peer": true, "dependencies": { "rtlcss": "4.1.1" }, @@ -39696,6 +39527,7 @@ "node_modules/postcss-selector-parser": { "version": "6.1.2", "license": "MIT", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -39845,7 +39677,6 @@ "version": "27.5.1", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", @@ -39859,7 +39690,6 @@ "version": "5.2.0", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=10" }, @@ -39870,8 +39700,7 @@ "node_modules/pretty-format/node_modules/react-is": { "version": "17.0.2", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/prism-react-renderer": { "version": "1.3.5", @@ -39929,6 +39758,7 @@ "node_modules/prop-types": { "version": "15.8.1", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -40200,6 +40030,7 @@ "node_modules/react": { "version": "18.3.1", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -40392,6 +40223,7 @@ "node_modules/react-dom": { "version": "18.3.1", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -40501,6 +40333,7 @@ "node_modules/react-helmet": { "version": "6.1.0", "license": "MIT", + "peer": true, "dependencies": { "object-assign": "^4.1.1", "prop-types": "^15.7.2", @@ -40543,6 +40376,7 @@ "node_modules/react-intl": { "version": "6.8.9", "license": "BSD-3-Clause", + "peer": true, "dependencies": { "@formatjs/ecma402-abstract": "2.2.4", "@formatjs/icu-messageformat-parser": "2.9.4", @@ -41379,7 +41213,6 @@ "node_modules/react-redux": { "version": "7.2.9", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.15.4", "@types/react-redux": "^7.1.20", @@ -41402,12 +41235,12 @@ }, "node_modules/react-redux/node_modules/react-is": { "version": "17.0.2", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/react-refresh": { "version": "0.14.0", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -41491,7 +41324,6 @@ "node_modules/react-router": { "version": "6.28.1", "license": "MIT", - "peer": true, "dependencies": { "@remix-run/router": "1.21.0" }, @@ -41917,6 +41749,7 @@ "node_modules/redux": { "version": "4.2.1", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.9.2" } @@ -43941,6 +43774,7 @@ "node_modules/sass": { "version": "1.82.0", "license": "MIT", + "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -44034,6 +43868,7 @@ "node_modules/schema-utils/node_modules/ajv": { "version": "8.17.1", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -44099,6 +43934,7 @@ "version": "20.1.3", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@semantic-release/commit-analyzer": "^9.0.2", "@semantic-release/error": "^3.0.0", @@ -44357,6 +44193,7 @@ "version": "4.3.0", "dev": true, "license": "MIT", + "peer": true, "bin": { "marked": "bin/marked.js" }, @@ -44926,8 +44763,7 @@ }, "node_modules/shallow-equal": { "version": "1.2.1", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/sharp": { "version": "0.32.6", @@ -46252,6 +46088,7 @@ "integrity": "sha512-+xU0IA1StzqAqFs/QtXkK+XJa7wpS4X5H+JQccRKsRCElgeLGocFU1U/UMvMUylKFw6vwGV+Y/a2wb2pm5rFFQ==", "hasInstallScript": true, "license": "Apache-2.0", + "peer": true, "dependencies": { "@bundled-es-modules/deepmerge": "^4.3.1", "@bundled-es-modules/glob": "^10.4.2", @@ -46390,6 +46227,7 @@ "version": "15.11.0", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@csstools/css-parser-algorithms": "^2.3.1", "@csstools/css-tokenizer": "^2.2.0", @@ -47549,6 +47387,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -47774,7 +47613,6 @@ "node_modules/ts-api-utils": { "version": "1.4.3", "license": "MIT", - "peer": true, "engines": { "node": ">=16" }, @@ -47793,6 +47631,7 @@ "version": "29.2.5", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "bs-logger": "^0.2.6", "ejs": "^3.1.10", @@ -47914,7 +47753,8 @@ }, "node_modules/tslib": { "version": "2.8.1", - "license": "0BSD" + "license": "0BSD", + "peer": true }, "node_modules/tsutils": { "version": "3.21.0", @@ -47967,6 +47807,7 @@ "node_modules/type-fest": { "version": "0.21.3", "license": "(MIT OR CC0-1.0)", + "peer": true, "engines": { "node": ">=10" }, @@ -48075,6 +47916,7 @@ "node_modules/typescript": { "version": "4.9.5", "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -48323,15 +48165,13 @@ "node_modules/unicode-emoji-utils": { "version": "1.2.0", "license": "MIT", - "peer": true, "dependencies": { "emoji-regex": "10.3.0" } }, "node_modules/unicode-emoji-utils/node_modules/emoji-regex": { "version": "10.3.0", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/unicode-match-property-ecmascript": { "version": "2.0.0", @@ -49040,6 +48880,7 @@ "node_modules/webpack": { "version": "5.97.1", "license": "MIT", + "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.6", @@ -49135,6 +48976,7 @@ "node_modules/webpack-cli": { "version": "5.1.4", "license": "MIT", + "peer": true, "dependencies": { "@discoveryjs/json-ext": "^0.5.0", "@webpack-cli/configtest": "^2.1.1", @@ -49360,7 +49202,6 @@ "node_modules/webpack-remove-empty-scripts": { "version": "1.0.4", "license": "ISC", - "peer": true, "dependencies": { "ansis": "1.5.2" }, diff --git a/src/Collapsible/Collapsible.test.jsx b/src/Collapsible/Collapsible.test.tsx similarity index 85% rename from src/Collapsible/Collapsible.test.jsx rename to src/Collapsible/Collapsible.test.tsx index d64d9103d2..c3dd64b73d 100644 --- a/src/Collapsible/Collapsible.test.jsx +++ b/src/Collapsible/Collapsible.test.tsx @@ -4,6 +4,7 @@ import renderer from 'react-test-renderer'; import userEvent from '@testing-library/user-event'; import Collapsible from '.'; +import CollapsibleAdvanced from './CollapsibleAdvanced'; const EXAMPLE_CONTENT = 'Example content'; @@ -69,26 +70,26 @@ describe('', () => { }); describe('Imperative Methods', () => { - const ref = React.createRef(); + const ref = React.createRef(); beforeEach(() => { render( - {collapsibleContent}, + {collapsibleContent}, ); }); it('opens on .open()', async () => { expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument(); - ref.current.open(); + ref.current?.open(); await waitFor(() => { expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument(); }); }); it('closes on .close()', async () => { - ref.current.open(); + ref.current?.open(); await waitFor(() => { expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument(); }); - ref.current.close(); + ref.current?.close(); await waitFor(() => { expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument(); }); @@ -101,26 +102,26 @@ describe('', () => { return

Hello world

; } render( - + , ); - ref.current.open(); + ref.current?.open(); expect(i).toEqual(1); - ref.current.close(); - ref.current.open(); + ref.current?.close(); + ref.current?.open(); expect(i).toEqual(1); }); }); describe('Mouse Interactions', () => { - let collapsible; - const ref = React.createRef(); + let collapsible: CollapsibleAdvanced | null; + const ref = React.createRef(); beforeEach(() => { render( - {collapsibleContent}, + {collapsibleContent}, ); collapsible = ref.current; }); @@ -132,7 +133,7 @@ describe('', () => { }); it('closes on trigger click', async () => { - collapsible.open(); + collapsible?.open(); await waitFor(() => { expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument(); }); @@ -141,36 +142,36 @@ describe('', () => { }); it('does not open on close only trigger click', async () => { - collapsible.close(); + collapsible?.close(); await userEvent.click(screen.getByTestId('close-only')); // No-op expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument(); }); it('closes on close only trigger click', async () => { - collapsible.open(); + collapsible?.open(); await userEvent.click(screen.getByTestId('close-only')); // Close expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument(); }); it('does not close on open only trigger click', async () => { - collapsible.open(); + collapsible?.open(); await userEvent.click(screen.getByTestId('open-only')); // No-op expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument(); }); it('opens on open only trigger click', async () => { - collapsible.close(); + collapsible?.close(); await userEvent.click(screen.getByTestId('open-only')); // Open expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument(); }); }); describe('Keyboard Interactions', () => { - let collapsible; - const ref = React.createRef(); + let collapsible: CollapsibleAdvanced | null; + const ref = React.createRef(); beforeEach(() => { render( - {collapsibleContent}, + {collapsibleContent}, ); collapsible = ref.current; }); @@ -182,35 +183,35 @@ describe('', () => { }); it('closes on trigger enter keydown', async () => { - collapsible.open(); + collapsible?.open(); screen.getAllByRole('button')[0].focus(); await userEvent.keyboard('{enter}'); // Close expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument(); }); it('does not open on close only trigger enter keydown', async () => { - collapsible.close(); + collapsible?.close(); screen.getByTestId('close-only').focus(); await userEvent.keyboard('{enter}'); // No-op expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument(); }); it('closes on close only trigger enter keydown', async () => { - collapsible.open(); + collapsible?.open(); screen.getByTestId('close-only').focus(); await userEvent.keyboard('{enter}'); // Close expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument(); }); it('does not close on open only trigger enter keydown', async () => { - collapsible.open(); + collapsible?.open(); screen.getByTestId('open-only').focus(); await userEvent.keyboard('{enter}'); // No-op expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument(); }); it('opens on open only trigger enter keydown', async () => { - collapsible.close(); + collapsible?.close(); screen.getByTestId('open-only').focus(); await userEvent.keyboard('{enter}'); // Open expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument(); diff --git a/src/Collapsible/CollapsibleAdvanced.jsx b/src/Collapsible/CollapsibleAdvanced.jsx deleted file mode 100644 index 8e11cf3a1b..0000000000 --- a/src/Collapsible/CollapsibleAdvanced.jsx +++ /dev/null @@ -1,125 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import PropTypes from 'prop-types'; - -export const CollapsibleContext = React.createContext(); - -class CollapsibleAdvanced extends React.Component { - static getDerivedStateFromProps(props) { - if (props.open !== undefined) { - return { - // Since this method fires on both props and state changes, local updates - // to the controlled value will be ignored, because the props version - // always overrides it. In this case, this is exactly what we want. - isOpen: props.open, - }; - } - return null; - } - - constructor(props) { - super(props); - - this.state = { - isOpen: props.open !== undefined ? props.open : props.defaultOpen, - }; - } - - open = () => { - this.setState({ isOpen: true }); - - if (this.props.onOpen) { - this.props.onOpen(); - } - if (this.props.onToggle) { - this.props.onToggle(true); - } - }; - - close = () => { - this.setState({ isOpen: false }); - - if (this.props.onClose) { - this.props.onClose(); - } - if (this.props.onToggle) { - this.props.onToggle(false); - } - }; - - toggle = () => { - if (this.state.isOpen) { - this.close(); - } else { - this.open(); - } - }; - - render() { - const { - children, - className, - unmountOnExit, - ...props - } = this.props; - - // Unneeded for passthrough props - delete props.defaultOpen; - delete props.onToggle; - delete props.onOpen; - delete props.onClose; - - return ( -
- - {children} - -
- ); - } -} - -CollapsibleAdvanced.propTypes = { - /** Specifies contents of the component. */ - children: PropTypes.node, - /** Specifies classname to append to the base element. */ - className: PropTypes.string, - /** Specifies whether `Collapsible` should be initially open. */ - defaultOpen: PropTypes.bool, - /** Specifies whether `Collapsible` is open. */ - open: PropTypes.bool, - /** Callback fired when `Collapsible's` state is toggled. */ - onToggle: PropTypes.func, - /** Callback fired when `Collapsible` opens. */ - onOpen: PropTypes.func, - /** Callback fired when `Collapsible` closes. */ - onClose: PropTypes.func, - /** Unmount the component (remove it from the DOM) when it is collapsed. */ - unmountOnExit: PropTypes.bool, -}; - -CollapsibleAdvanced.defaultProps = { - children: undefined, - className: undefined, - defaultOpen: false, - open: undefined, - onToggle: undefined, - onOpen: undefined, - onClose: undefined, - unmountOnExit: true, -}; - -export default CollapsibleAdvanced; diff --git a/src/Collapsible/CollapsibleAdvanced.tsx b/src/Collapsible/CollapsibleAdvanced.tsx new file mode 100644 index 0000000000..4acd58a3e1 --- /dev/null +++ b/src/Collapsible/CollapsibleAdvanced.tsx @@ -0,0 +1,114 @@ +import React from 'react'; +import classNames from 'classnames'; + +export interface CollapsibleContextValue { + isOpen: boolean; + open: () => void; + close: () => void; + toggle: () => void; + unmountOnExit: boolean; +} + +export const CollapsibleContext = React.createContext(undefined); + +export interface CollapsibleAdvancedProps extends React.ComponentPropsWithRef<'div'> { + children?: React.ReactNode; + className?: string; + defaultOpen?: boolean; + open?: boolean; + onToggle?: (isOpen: boolean) => void; + onOpen?: () => void; + onClose?: () => void; + unmountOnExit?: boolean; +} + +interface CollapsibleAdvancedState { + isOpen: boolean; +} + +class CollapsibleAdvanced extends React.Component { + static getDerivedStateFromProps(props: CollapsibleAdvancedProps) { + if (props.open !== undefined) { + return { + isOpen: props.open, + }; + } + return null; + } + + constructor(props: CollapsibleAdvancedProps) { + super(props); + + this.state = { + isOpen: props.open !== undefined ? props.open : props.defaultOpen ?? false, + }; + } + + open = () => { + this.setState({ isOpen: true }); + + if (this.props.onOpen) { + this.props.onOpen(); + } + if (this.props.onToggle) { + this.props.onToggle(true); + } + }; + + close = () => { + this.setState({ isOpen: false }); + + if (this.props.onClose) { + this.props.onClose(); + } + if (this.props.onToggle) { + this.props.onToggle(false); + } + }; + + toggle = () => { + if (this.state.isOpen) { + this.close(); + } else { + this.open(); + } + }; + + render() { + const { + children, + className, + unmountOnExit = true, + onToggle, + onOpen, + onClose, + open, + ref, + ...props + } = this.props; + + return ( +
+ + {children} + +
+ ); + } +} + +export default CollapsibleAdvanced; diff --git a/src/Collapsible/CollapsibleBody.jsx b/src/Collapsible/CollapsibleBody.tsx similarity index 50% rename from src/Collapsible/CollapsibleBody.jsx rename to src/Collapsible/CollapsibleBody.tsx index b711eb25ec..a8f4a65612 100644 --- a/src/Collapsible/CollapsibleBody.jsx +++ b/src/Collapsible/CollapsibleBody.tsx @@ -1,18 +1,21 @@ import React, { useContext } from 'react'; -import PropTypes from 'prop-types'; import Collapse from '../Collapse'; import { CollapsibleContext } from './CollapsibleAdvanced'; import TransitionReplace from '../TransitionReplace'; +export interface CollapsibleBodyProps extends React.ComponentPropsWithoutRef<'div'> { + children?: React.ReactNode; + tag?: string; + transitionWrapper?: React.ReactElement; +} + function CollapsibleBody({ - children, transitionWrapper, tag, ...props -}) { - const { isOpen, unmountOnExit } = useContext(CollapsibleContext); + children, transitionWrapper, tag = 'div', ...props +}: CollapsibleBodyProps) { + const context = useContext(CollapsibleContext); + const { isOpen, unmountOnExit } = context || { isOpen: false, unmountOnExit: true }; - // Keys are added to these elements so that TransitionReplace - // will recognize them as unique components and perform the - // transition properly. const content = React.createElement(tag, { key: 'body', ...props }, children); const transitionBody = isOpen ? content :
; @@ -25,19 +28,4 @@ function CollapsibleBody({ : {content}; } -CollapsibleBody.propTypes = { - /** Specifies contents of the component. */ - children: PropTypes.node, - /** Specifies content's base element. */ - tag: PropTypes.string, - /** Specifies transition element. */ - transitionWrapper: PropTypes.element, -}; - -CollapsibleBody.defaultProps = { - children: undefined, - tag: 'div', - transitionWrapper: undefined, -}; - export default CollapsibleBody; diff --git a/src/Collapsible/CollapsibleTrigger.jsx b/src/Collapsible/CollapsibleTrigger.jsx deleted file mode 100644 index 9cf321466d..0000000000 --- a/src/Collapsible/CollapsibleTrigger.jsx +++ /dev/null @@ -1,77 +0,0 @@ -import React, { useContext, useCallback } from 'react'; -import PropTypes from 'prop-types'; - -import { CollapsibleContext } from './CollapsibleAdvanced'; - -function CollapsibleTrigger({ - tag, children, openOnly, closeOnly, onClick, onKeyDown, ...props -}) { - const { - isOpen, open, close, toggle, - } = useContext(CollapsibleContext); - - const handleToggle = useCallback((e) => { - if (openOnly) { - open(e); - } else if (closeOnly) { - close(e); - } else { - toggle(e); - } - }, [openOnly, open, closeOnly, close, toggle]); - - const handleClick = useCallback((e) => { - if (onClick) { - onClick(e); - } - handleToggle(e); - }, [onClick, handleToggle]); - - const handleKeyDown = useCallback((e) => { - if (onKeyDown) { - onKeyDown(e); - } - if (e.key === 'Enter') { - handleToggle(e); - } - }, [onKeyDown, handleToggle]); - - return React.createElement( - tag, - { - ...props, - onClick: handleClick, - onKeyDown: handleKeyDown, - role: 'button', - tabIndex: 0, - 'aria-expanded': isOpen, - }, - children, - ); -} - -CollapsibleTrigger.propTypes = { - /** Specifies contents of the component. */ - children: PropTypes.node, - /** Specifies base element. */ - tag: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]), - /** Specifies whether toggling `Collapsible's` state will always trigger only open action. */ - openOnly: PropTypes.bool, - /** Specifies whether toggling `Collapsible's` state will always trigger only close action. */ - closeOnly: PropTypes.bool, - /** Callback fired when element gets clicked. */ - onClick: PropTypes.func, - /** Callback fired when a key is pressed. */ - onKeyDown: PropTypes.func, -}; - -CollapsibleTrigger.defaultProps = { - children: undefined, - tag: 'div', - openOnly: false, - closeOnly: false, - onClick: undefined, - onKeyDown: undefined, -}; - -export default CollapsibleTrigger; diff --git a/src/Collapsible/CollapsibleTrigger.tsx b/src/Collapsible/CollapsibleTrigger.tsx new file mode 100644 index 0000000000..bd8ed6758b --- /dev/null +++ b/src/Collapsible/CollapsibleTrigger.tsx @@ -0,0 +1,64 @@ +import React, { useContext, useCallback } from 'react'; + +import { CollapsibleContext } from './CollapsibleAdvanced'; + +export interface CollapsibleTriggerProps extends React.ComponentPropsWithoutRef<'div'> { + children?: React.ReactNode; + tag?: string | React.ElementType; + openOnly?: boolean; + closeOnly?: boolean; + onClick?: (e: React.MouseEvent) => void; + onKeyDown?: (e: React.KeyboardEvent) => void; +} + +function CollapsibleTrigger({ + tag = 'div', children, openOnly = false, closeOnly = false, onClick, onKeyDown, ...props +}: CollapsibleTriggerProps) { + const context = useContext(CollapsibleContext); + const { + isOpen, open, close, toggle, + } = context || { + isOpen: false, open: () => {}, close: () => {}, toggle: () => {}, + }; + + const handleToggle = useCallback(() => { + if (openOnly) { + open(); + } else if (closeOnly) { + close(); + } else { + toggle(); + } + }, [openOnly, open, closeOnly, close, toggle]); + + const handleClick = useCallback((e: React.MouseEvent) => { + if (onClick) { + onClick(e); + } + handleToggle(); + }, [onClick, handleToggle]); + + const handleKeyDown = useCallback((e: React.KeyboardEvent) => { + if (onKeyDown) { + onKeyDown(e); + } + if (e.key === 'Enter') { + handleToggle(); + } + }, [onKeyDown, handleToggle]); + + return React.createElement( + tag, + { + ...props, + onClick: handleClick, + onKeyDown: handleKeyDown, + role: 'button', + tabIndex: 0, + 'aria-expanded': isOpen, + }, + children, + ); +} + +export default CollapsibleTrigger; diff --git a/src/Collapsible/CollapsibleVisible.jsx b/src/Collapsible/CollapsibleVisible.jsx deleted file mode 100644 index 482287e1ef..0000000000 --- a/src/Collapsible/CollapsibleVisible.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { useContext } from 'react'; -import PropTypes from 'prop-types'; - -import { CollapsibleContext } from './CollapsibleAdvanced'; - -function CollapsibleVisible({ - children, - whenOpen: visibleWhenOpen, - whenClosed: visibleWhenClosed, -}) { - const { isOpen } = useContext(CollapsibleContext); - const isVisible = (isOpen && visibleWhenOpen) || (!isOpen && visibleWhenClosed); - - if (isVisible) { - // eslint-disable-next-line react/jsx-no-useless-fragment - return <>{children}; - } - return null; -} - -CollapsibleVisible.propTypes = { - /** Specifies contents of the component. */ - children: PropTypes.node, - /** Specifies whether the content should be visible when `Collapsible` is open. */ - whenOpen: PropTypes.bool, - /** Specifies whether the content should be visible when `Collapsible` is closed. */ - whenClosed: PropTypes.bool, -}; - -CollapsibleVisible.defaultProps = { - children: undefined, - whenOpen: false, - whenClosed: false, -}; - -export default CollapsibleVisible; diff --git a/src/Collapsible/CollapsibleVisible.tsx b/src/Collapsible/CollapsibleVisible.tsx new file mode 100644 index 0000000000..60a34b8600 --- /dev/null +++ b/src/Collapsible/CollapsibleVisible.tsx @@ -0,0 +1,27 @@ +import React, { useContext } from 'react'; + +import { CollapsibleContext } from './CollapsibleAdvanced'; + +export interface CollapsibleVisibleProps { + children?: React.ReactNode; + whenOpen?: boolean; + whenClosed?: boolean; +} + +function CollapsibleVisible({ + children, + whenOpen: visibleWhenOpen = false, + whenClosed: visibleWhenClosed = false, +}: CollapsibleVisibleProps) { + const context = useContext(CollapsibleContext); + const { isOpen } = context || { isOpen: false }; + const isVisible = (isOpen && visibleWhenOpen) || (!isOpen && visibleWhenClosed); + + if (isVisible) { + // eslint-disable-next-line react/jsx-no-useless-fragment + return <>{children}; + } + return null; +} + +export default CollapsibleVisible; diff --git a/src/Collapsible/__snapshots__/Collapsible.test.jsx.snap b/src/Collapsible/__snapshots__/Collapsible.test.tsx.snap similarity index 99% rename from src/Collapsible/__snapshots__/Collapsible.test.jsx.snap rename to src/Collapsible/__snapshots__/Collapsible.test.tsx.snap index f0a0b8044e..ec3d7e6c21 100644 --- a/src/Collapsible/__snapshots__/Collapsible.test.jsx.snap +++ b/src/Collapsible/__snapshots__/Collapsible.test.tsx.snap @@ -3,7 +3,6 @@ exports[` Controlled Rendering renders closed by default 1`] = `
Uncontrolled Rendering renders closed by default 1`] = exports[` Uncontrolled Rendering renders open by default 1`] = `
, - iconWhenOpen: , - }, - // card and card-lg use the defaults specified in defaultProps -}; - -const Collapsible = React.forwardRef((props, ref) => { - const { - children, - className, - title, - styling, - iconWhenClosed, - iconWhenOpen, - ...other - } = props; - - const icons = { iconWhenClosed, iconWhenOpen, ...styleIcons[styling] }; - const titleElement = React.isValidElement(title) ? title : {title}; - - return ( - - - {titleElement} - - {icons.iconWhenClosed} - {icons.iconWhenOpen} - - - - {children} - - ); -}); - -Collapsible.propTypes = { - /** Specifies contents of the component. */ - children: PropTypes.node.isRequired, - /** Specifies class name to append to the base element. */ - className: PropTypes.string, - /** Specifies whether the `Collapsible` should be initially open. */ - defaultOpen: PropTypes.bool, - /** Specifies icon to show when `Collapsible` is closed. */ - iconWhenClosed: PropTypes.element, - /** Specifies icon to show when `Collapsible` is open. */ - iconWhenOpen: PropTypes.element, - /** Callback fired when `Collapsible` closes. */ - onClose: PropTypes.func, - /** Callback fired when `Collapsible` opens. */ - onOpen: PropTypes.func, - /** Callback fired when `Collapsible's` state is toggled. */ - onToggle: PropTypes.func, - /** Specifies whether `Collapsible` is open. */ - open: PropTypes.bool, - /** Specifies style variant. */ - styling: PropTypes.oneOf(['basic', 'card', 'card-lg']), - /** Specifies title. */ - title: PropTypes.node.isRequired, - /** Unmount the component (remove it from the DOM) when it is collapsed */ - unmountOnExit: PropTypes.bool, -}; - -Collapsible.defaultProps = { - className: undefined, - defaultOpen: false, - iconWhenClosed: , - iconWhenOpen: , - onClose: undefined, - onOpen: undefined, - onToggle: undefined, - open: undefined, - styling: 'card', - unmountOnExit: true, -}; - -Collapsible.Advanced = CollapsibleAdvanced; -Collapsible.Body = CollapsibleBody; -Collapsible.Trigger = CollapsibleTrigger; -Collapsible.Visible = CollapsibleVisible; -Collapsible.Context = CollapsibleContext; - -export default Collapsible; diff --git a/src/Collapsible/index.tsx b/src/Collapsible/index.tsx new file mode 100644 index 0000000000..b2923d4ee3 --- /dev/null +++ b/src/Collapsible/index.tsx @@ -0,0 +1,88 @@ +import React from 'react'; +import classNames from 'classnames'; + +import { ExpandLess, ExpandMore } from '../../icons'; +import CollapsibleAdvanced, { CollapsibleContext } from './CollapsibleAdvanced'; +import CollapsibleBody from './CollapsibleBody'; +import CollapsibleTrigger from './CollapsibleTrigger'; +import CollapsibleVisible from './CollapsibleVisible'; +import Icon from '../Icon'; + +interface StyleIcons { + iconWhenClosed: React.ReactElement; + iconWhenOpen: React.ReactElement; +} + +const styleIcons: Record = { + basic: { + iconWhenClosed: , + iconWhenOpen: , + }, +}; + +export interface CollapsibleProps extends Omit, 'title'> { + children: React.ReactNode; + className?: string; + defaultOpen?: boolean; + iconWhenClosed?: React.ReactElement; + iconWhenOpen?: React.ReactElement; + onClose?: () => void; + onOpen?: () => void; + onToggle?: (isOpen: boolean) => void; + open?: boolean; + styling?: 'basic' | 'card' | 'card-lg'; + title: React.ReactNode; + unmountOnExit?: boolean; +} + +const Collapsible = React.forwardRef((props, ref) => { + const { + children, + className, + title, + styling = 'card', + iconWhenClosed = , + iconWhenOpen = , + ...other + } = props; + + const icons = { ...(styleIcons[styling] || {}), iconWhenClosed, iconWhenOpen }; + const titleElement = React.isValidElement(title) ? title : {title}; + + return ( + + + {titleElement} + + {icons.iconWhenClosed} + {icons.iconWhenOpen} + + + + {children} + + ); +}) as CollapsibleComponent; + +interface CollapsibleComponent extends React.ForwardRefExoticComponent< +CollapsibleProps & React.RefAttributes +> { + Advanced: typeof CollapsibleAdvanced; + Body: typeof CollapsibleBody; + Trigger: typeof CollapsibleTrigger; + Visible: typeof CollapsibleVisible; + Context: typeof CollapsibleContext; +} + +Collapsible.Advanced = CollapsibleAdvanced; +Collapsible.Body = CollapsibleBody; +Collapsible.Trigger = CollapsibleTrigger; +Collapsible.Visible = CollapsibleVisible; +Collapsible.Context = CollapsibleContext; + +export default Collapsible; diff --git a/src/TransitionReplace/TransitionReplace.test.jsx b/src/TransitionReplace/TransitionReplace.test.tsx similarity index 82% rename from src/TransitionReplace/TransitionReplace.test.jsx rename to src/TransitionReplace/TransitionReplace.test.tsx index f66df4fca4..7a5fede220 100644 --- a/src/TransitionReplace/TransitionReplace.test.jsx +++ b/src/TransitionReplace/TransitionReplace.test.tsx @@ -1,10 +1,12 @@ -import React from 'react'; import { render } from '@testing-library/react'; -import TransitionReplace from '.'; +import TransitionReplace, { TransitionReplaceProps } from '.'; -/* eslint-disable-next-line react/prop-types */ -function TestReplacement({ showContentA, ...props }) { +interface TestReplacementProps extends Omit { + showContentA: boolean; +} + +function TestReplacement({ showContentA, ...props }: TestReplacementProps) { return ( {showContentA ? ( @@ -19,17 +21,17 @@ function TestReplacement({ showContentA, ...props }) { describe('TransitionReplace', () => { it('should add entering class names for each part of the transition', (done) => { let count = 0; - const onChildEnter = (node) => { + const onChildEnter = (node: HTMLElement) => { count++; expect(count).toEqual(1); expect(node.classList.contains('test-enter')).toEqual(true); }; - const onChildEntering = (node) => { + const onChildEntering = (node: HTMLElement) => { count++; expect(count).toEqual(2); expect(node.classList.contains('test-enter-active')).toEqual(true); }; - const onChildEntered = (node) => { + const onChildEntered = (node: HTMLElement) => { count++; expect(count).toEqual(3); expect(node.classList.contains('test-enter-done')).toEqual(true); @@ -63,17 +65,17 @@ describe('TransitionReplace', () => { it('should add exiting class names for each part of the transition', (done) => { let count = 0; - const onChildExit = (node) => { + const onChildExit = (node: HTMLElement) => { count++; expect(count).toEqual(1); expect(node.classList.contains('test-exit')).toEqual(true); }; - const onChildExiting = (node) => { + const onChildExiting = (node: HTMLElement) => { count++; expect(count).toEqual(2); expect(node.classList.contains('test-exit-active')).toEqual(true); }; - const onChildExited = (node) => { + const onChildExited = (node: HTMLElement) => { count++; expect(count).toEqual(3); expect(node.classList.contains('test-exit-done')).toEqual(true); diff --git a/src/TransitionReplace/index.jsx b/src/TransitionReplace/index.jsx deleted file mode 100644 index f39bcd48e0..0000000000 --- a/src/TransitionReplace/index.jsx +++ /dev/null @@ -1,188 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { CSSTransition, TransitionGroup } from 'react-transition-group'; -import classNames from 'classnames'; - -class TransitionReplace extends React.Component { - constructor(props) { - super(props); - - this.state = { height: null }; - - this.onChildEnter = this.onChildEnter.bind(this); - this.onChildEntering = this.onChildEntering.bind(this); - this.onChildEntered = this.onChildEntered.bind(this); - this.onChildExit = this.onChildExit.bind(this); - this.onChildExiting = this.onChildExiting.bind(this); - this.onChildExited = this.onChildExited.bind(this); - } - - // Transition events are fired in this order: - // - // onEnter > onEntering > onEntered - // onExit > onExiting > onExited - // - // Keep in mind that we always have two transitions happening - // both the entering and leaving children - // - // We set the container height (for animation) in this order: - // - // 1. onChildExit (explicitly set the height to match the current current) - // 2. onChildEntering (set the height to match the new content) - // 3. onChildExited (reset the height to null) - - onChildEnter(htmlNode) { - if (this.props.onChildEnter) { this.props.onChildEnter(htmlNode); } - } - - onChildEntering(htmlNode) { - this.setState({ height: htmlNode.offsetHeight }); - if (this.props.onChildEntering) { this.props.onChildEntering(htmlNode); } - } - - onChildEntered(htmlNode) { - this.setState({ height: null }); - if (this.props.onChildEntered) { this.props.onChildEntered(htmlNode); } - } - - onChildExit(htmlNode) { - this.setState({ height: htmlNode.offsetHeight }); - if (this.props.onChildExit) { this.props.onChildExit(htmlNode); } - } - - onChildExiting(htmlNode) { - if (this.props.onChildExiting) { this.props.onChildExiting(htmlNode); } - } - - onChildExited(htmlNode) { - this.setState({ height: null }); - if (this.props.onChildExited) { this.props.onChildExited(htmlNode); } - } - - renderChildTransition(child) { - if (!child.key && process.env.NODE_ENV === 'development') { - // eslint-disable-next-line no-console - console.warn("TransitionReplace: A child is missing a 'key' prop. Keys are required for any child of this component."); - } - // Makes the exiting and entering children occupy the same space - // SCSS handles the crossfade so it can be easily overridden - const commonChildStyles = { - // Prevent margin-collapsing which throws off height calculations - padding: '.1px 0', - }; - - const transitionStyles = { - entering: {}, - entered: {}, - exiting: { - position: 'absolute', - top: 0, - left: 0, - right: 0, - pointerEvents: 'none', - }, - exited: {}, - }; - - return ( - - {state => ( -
- {child} -
- )} - - ); - } - - render() { - return ( - - {React.Children.map(this.props.children, this.renderChildTransition, this)} - - ); - } -} - -TransitionReplace.propTypes = { - /** Specifies an additional class for the base element */ - children: PropTypes.element, - /** Duration of the element appearance transition. */ - enterDuration: PropTypes.number, - /** Duration of the element dismiss transition. */ - exitDuration: PropTypes.number, - /** Specifies class name to append to the base element. */ - className: PropTypes.string, - /** A `Transition` callback fired immediately after the `enter` or `appear` class is applied. */ - onChildEnter: PropTypes.func, - /** A `Transition` callback fired immediately after the `enter-active` or `appear-active` class is applied. */ - onChildEntering: PropTypes.func, - /** - * A `Transition` callback fired immediately after the `enter` or - * `appear` classes are removed and the done class is added to the DOM node. - */ - onChildEntered: PropTypes.func, - /** A `Transition` callback fired immediately after the `exit` class is applied. */ - onChildExit: PropTypes.func, - /** A `Transition` callback fired immediately after the `exit-active` is applied. */ - onChildExiting: PropTypes.func, - /** - * A `Transition` callback fired immediately after the `exit` classes - * are removed and the exit-done class is added to the DOM node. - */ - onChildExited: PropTypes.func, - /** An object that specifies transition styles. */ - transitionStyles: PropTypes.shape({ - entering: PropTypes.shape({}), - entered: PropTypes.shape({}), - exiting: PropTypes.shape({}), - exited: PropTypes.shape({}), - }), - /** Specifies class name to append to the `Transition`. */ - transitionClassNames: PropTypes.string, -}; - -TransitionReplace.defaultProps = { - children: undefined, - enterDuration: 300, - exitDuration: 300, - className: undefined, - onChildEnter: undefined, - onChildEntering: undefined, - onChildEntered: undefined, - onChildExit: undefined, - onChildExiting: undefined, - onChildExited: undefined, - transitionStyles: {}, - transitionClassNames: 'pgn__transition-replace', -}; - -export default TransitionReplace; diff --git a/src/TransitionReplace/index.tsx b/src/TransitionReplace/index.tsx new file mode 100644 index 0000000000..2c92b56c14 --- /dev/null +++ b/src/TransitionReplace/index.tsx @@ -0,0 +1,144 @@ +import React from 'react'; +import { CSSTransition, TransitionGroup } from 'react-transition-group'; +import classNames from 'classnames'; + +interface TransitionStyles { + entering?: React.CSSProperties; + entered?: React.CSSProperties; + exiting?: React.CSSProperties; + exited?: React.CSSProperties; +} + +export interface TransitionReplaceProps { + children?: React.ReactElement; + enterDuration?: number; + exitDuration?: number; + className?: string; + onChildEnter?: (node: HTMLElement) => void; + onChildEntering?: (node: HTMLElement) => void; + onChildEntered?: (node: HTMLElement) => void; + onChildExit?: (node: HTMLElement) => void; + onChildExiting?: (node: HTMLElement) => void; + onChildExited?: (node: HTMLElement) => void; + transitionStyles?: TransitionStyles; + transitionClassNames?: string; +} + +interface TransitionReplaceState { + height: number | null; +} + +class TransitionReplace extends React.Component { + constructor(props: TransitionReplaceProps) { + super(props); + + this.state = { height: null }; + + this.onChildEnter = this.onChildEnter.bind(this); + this.onChildEntering = this.onChildEntering.bind(this); + this.onChildEntered = this.onChildEntered.bind(this); + this.onChildExit = this.onChildExit.bind(this); + this.onChildExiting = this.onChildExiting.bind(this); + this.onChildExited = this.onChildExited.bind(this); + } + + onChildEnter(htmlNode: HTMLElement) { + if (this.props.onChildEnter) { this.props.onChildEnter(htmlNode); } + } + + onChildEntering(htmlNode: HTMLElement) { + this.setState({ height: htmlNode.offsetHeight }); + if (this.props.onChildEntering) { this.props.onChildEntering(htmlNode); } + } + + onChildEntered(htmlNode: HTMLElement) { + this.setState({ height: null }); + if (this.props.onChildEntered) { this.props.onChildEntered(htmlNode); } + } + + onChildExit(htmlNode: HTMLElement) { + this.setState({ height: htmlNode.offsetHeight }); + if (this.props.onChildExit) { this.props.onChildExit(htmlNode); } + } + + onChildExiting(htmlNode: HTMLElement) { + if (this.props.onChildExiting) { this.props.onChildExiting(htmlNode); } + } + + onChildExited(htmlNode: HTMLElement) { + this.setState({ height: null }); + if (this.props.onChildExited) { this.props.onChildExited(htmlNode); } + } + + renderChildTransition = (child: React.ReactElement) => { + if (!child.key && process.env.NODE_ENV === 'development') { + // eslint-disable-next-line no-console + console.warn("TransitionReplace: A child is missing a 'key' prop. Keys are required for any child of this component."); + } + + const commonChildStyles: React.CSSProperties = { + padding: '.1px 0', + }; + + const transitionStyles: Record = { + entering: {}, + entered: {}, + exiting: { + position: 'absolute', + top: 0, + left: 0, + right: 0, + pointerEvents: 'none', + }, + exited: {}, + }; + + return ( + + {state => ( +
+ {child} +
+ )} + + ); + }; + + render() { + return ( + + {React.Children.map(this.props.children, this.renderChildTransition)} + + ); + } +} + +export default TransitionReplace;