From 041dd150d6a85b0e60a3802dc59b00da63aeedd1 Mon Sep 17 00:00:00 2001 From: Ian Sanders Date: Wed, 1 Mar 2023 13:36:55 -0800 Subject: [PATCH] Allow `React.ReactNode` as `Token` content (#2954) * Allow `React.ReactNode` as `Token` content * Create .changeset/strong-doors-begin.md * Update snapshots --- .changeset/strong-doors-begin.md | 5 + docs/package-lock.json | 173 +- examples/nextjs/package-lock.json | 280 ++- src/Token/Token.tsx | 2 + src/Token/TokenBase.tsx | 37 +- src/__tests__/TextInputWithTokens.test.tsx | 2 +- .../TextInputWithTokens.test.tsx.snap | 1995 +++++++++++++---- .../__snapshots__/Token.test.tsx.snap | 356 ++- 8 files changed, 2001 insertions(+), 849 deletions(-) create mode 100644 .changeset/strong-doors-begin.md diff --git a/.changeset/strong-doors-begin.md b/.changeset/strong-doors-begin.md new file mode 100644 index 00000000000..387fe428f72 --- /dev/null +++ b/.changeset/strong-doors-begin.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Allow `React.ReactNode` as `Token` content diff --git a/docs/package-lock.json b/docs/package-lock.json index 8c82fdb649e..cd5c0f2a811 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -4848,36 +4848,6 @@ "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==" }, - "node_modules/babel-eslint": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", - "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", - "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - }, - "engines": { - "node": ">=6" - }, - "peerDependencies": { - "eslint": ">= 4.12.1" - } - }, - "node_modules/babel-eslint/node_modules/eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", - "peer": true, - "engines": { - "node": ">=4" - } - }, "node_modules/babel-jest": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.9.0.tgz", @@ -23962,19 +23932,6 @@ "is-typedarray": "^1.0.0" } }, - "node_modules/typescript": { - "version": "4.9.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", - "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, "node_modules/unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -27489,8 +27446,7 @@ "ws": { "version": "7.4.5", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz", - "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==", - "requires": {} + "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==" } } }, @@ -27909,8 +27865,7 @@ "@mdx-js/react": { "version": "1.6.22", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz", - "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==", - "requires": {} + "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==" }, "@mdx-js/util": { "version": "1.6.22", @@ -28124,8 +28079,7 @@ "@primer/octicons-react": { "version": "17.7.0", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-17.7.0.tgz", - "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q==", - "requires": {} + "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q==" }, "@primer/primitives": { "version": "4.1.0", @@ -28160,8 +28114,7 @@ "@primer/octicons-react": { "version": "16.1.1", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz", - "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==", - "requires": {} + "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==" }, "@primer/primitives": { "version": "7.6.0", @@ -28173,8 +28126,7 @@ "@radix-ui/react-polymorphic": { "version": "0.0.14", "resolved": "https://registry.npmjs.org/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz", - "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==", - "requires": {} + "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==" }, "@react-aria/ssr": { "version": "3.1.0", @@ -29308,8 +29260,7 @@ "acorn-jsx": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz", - "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==", - "requires": {} + "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==" }, "acorn-walk": { "version": "6.2.0", @@ -29344,14 +29295,12 @@ "ajv-errors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", - "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", - "requires": {} + "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==" }, "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "requires": {} + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" }, "alphanum-sort": { "version": "1.0.2", @@ -29707,28 +29656,6 @@ "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==" }, - "babel-eslint": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", - "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", - "peer": true, - "requires": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - }, - "dependencies": { - "eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", - "peer": true - } - } - }, "babel-jest": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.9.0.tgz", @@ -29900,8 +29827,7 @@ "babel-plugin-remove-graphql-queries": { "version": "2.16.1", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.16.1.tgz", - "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==", - "requires": {} + "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==" }, "babel-plugin-styled-components": { "version": "2.0.2", @@ -31834,8 +31760,7 @@ "cssnano-utils": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz", - "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==", - "requires": {} + "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==" }, "csso": { "version": "4.2.0", @@ -32466,8 +32391,7 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", - "requires": {} + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" } } }, @@ -32491,8 +32415,7 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", - "requires": {} + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" } } }, @@ -33214,8 +33137,7 @@ "eslint-plugin-react-hooks": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz", - "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==", - "requires": {} + "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==" }, "eslint-scope": { "version": "5.1.1", @@ -34515,8 +34437,7 @@ "babel-plugin-remove-graphql-queries": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-3.7.1.tgz", - "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==", - "requires": {} + "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==" }, "braces": { "version": "3.0.2", @@ -35889,8 +35810,7 @@ "ws": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz", - "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==", - "requires": {} + "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==" } } }, @@ -36350,14 +36270,12 @@ "graphql-type-json": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz", - "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==", - "requires": {} + "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==" }, "graphql-ws": { "version": "4.9.0", "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-4.9.0.tgz", - "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==", - "requires": {} + "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==" }, "gray-matter": { "version": "4.0.3", @@ -36886,8 +36804,7 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "requires": {} + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" }, "ieee754": { "version": "1.2.1", @@ -37633,8 +37550,7 @@ "isomorphic-ws": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz", - "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==", - "requires": {} + "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==" }, "isstream": { "version": "0.1.2", @@ -38059,8 +37975,7 @@ "jest-pnp-resolver": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", - "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", - "requires": {} + "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==" }, "jest-regex-util": { "version": "24.9.0", @@ -39129,8 +39044,7 @@ "meros": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/meros/-/meros-1.1.4.tgz", - "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==", - "requires": {} + "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==" }, "methods": { "version": "1.1.2", @@ -40434,32 +40348,27 @@ "postcss-discard-comments": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz", - "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==", - "requires": {} + "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==" }, "postcss-discard-duplicates": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz", - "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==", - "requires": {} + "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==" }, "postcss-discard-empty": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz", - "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==", - "requires": {} + "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==" }, "postcss-discard-overridden": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz", - "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==", - "requires": {} + "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==" }, "postcss-flexbugs-fixes": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", - "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==", - "requires": {} + "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==" }, "postcss-loader": { "version": "5.3.0", @@ -40585,8 +40494,7 @@ "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "requires": {} + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -40624,8 +40532,7 @@ "postcss-normalize-charset": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz", - "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==", - "requires": {} + "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==" }, "postcss-normalize-display-values": { "version": "5.0.1", @@ -40996,8 +40903,7 @@ "prism-react-renderer": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.2.1.tgz", - "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==", - "requires": {} + "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==" }, "prismjs": { "version": "1.28.0", @@ -41382,8 +41288,7 @@ "react-docgen-typescript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.0.0.tgz", - "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==", - "requires": {} + "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==" }, "react-dom": { "version": "17.0.1", @@ -41556,14 +41461,12 @@ "react-side-effect": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz", - "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==", - "requires": {} + "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==" }, "react-simple-code-editor": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz", - "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==", - "requires": {} + "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==" }, "react-style-singleton": { "version": "2.1.1", @@ -43745,8 +43648,7 @@ "stylis-rule-sheet": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", - "requires": {} + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" }, "subscriptions-transport-ws": { "version": "0.9.19", @@ -44442,12 +44344,6 @@ "is-typedarray": "^1.0.0" } }, - "typescript": { - "version": "4.9.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", - "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", - "peer": true - }, "unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -44981,8 +44877,7 @@ "use-callback-ref": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz", - "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==", - "requires": {} + "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==" }, "use-sidecar": { "version": "1.0.5", diff --git a/examples/nextjs/package-lock.json b/examples/nextjs/package-lock.json index 022e9a48d6c..425e6fee9bc 100644 --- a/examples/nextjs/package-lock.json +++ b/examples/nextjs/package-lock.json @@ -17,17 +17,17 @@ }, "../..": { "name": "@primer/react", - "version": "35.14.2", + "version": "35.20.0", "license": "MIT", "dependencies": { "@github/combobox-nav": "^2.1.5", "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", - "@github/time-elements": "^3.5.0", - "@lit-labs/react": "1.0.9", - "@primer/behaviors": "1.3.2", + "@github/relative-time-element": "^4.1.2", + "@lit-labs/react": "1.1.1", + "@primer/behaviors": "1.3.3", "@primer/octicons-react": "^17.7.0", - "@primer/primitives": "7.10.0", + "@primer/primitives": "7.11.1", "@react-aria/ssr": "^3.1.0", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", @@ -37,64 +37,71 @@ "@types/styled-system__css": "^5.0.16", "@types/styled-system__theme-get": "^5.0.1", "classnames": "^2.3.1", - "color2k": "^1.2.4", + "color2k": "^2.0.0", "deepmerge": "^4.2.2", "focus-visible": "^5.2.0", "fzy.js": "0.4.1", "history": "^5.0.0", - "react-intersection-observer": "9.4.0", + "react-intersection-observer": "9.4.1", "styled-system": "^5.1.5" }, "devDependencies": { - "@axe-core/playwright": "4.5.0", - "@babel/cli": "7.17.6", - "@babel/core": "7.14.8", - "@babel/eslint-parser": "7.15.7", - "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0", + "@actions/core": "1.10.0", + "@babel/cli": "7.19.3", + "@babel/core": "7.21.0", + "@babel/eslint-parser": "7.19.1", + "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", "@babel/plugin-proposal-optional-chaining": "7.16.7", "@babel/plugin-transform-modules-commonjs": "7.19.6", "@babel/preset-react": "7.18.6", "@babel/preset-typescript": "7.18.6", - "@changesets/changelog-github": "0.4.7", - "@changesets/cli": "2.25.1", - "@github/prettier-config": "0.0.4", - "@playwright/test": "1.27.1", - "@rollup/plugin-babel": "6.0.2", - "@rollup/plugin-commonjs": "23.0.0", - "@rollup/plugin-node-resolve": "14.1.0", - "@rollup/plugin-replace": "5.0.0", - "@rollup/plugin-typescript": "9.0.2", + "@changesets/changelog-github": "0.4.8", + "@changesets/cli": "2.26.0", + "@github/markdownlint-github": "^0.3.0", + "@github/prettier-config": "0.0.6", + "@playwright/test": "1.30.0", + "@rollup/plugin-babel": "6.0.3", + "@rollup/plugin-commonjs": "24.0.1", + "@rollup/plugin-node-resolve": "15.0.1", + "@rollup/plugin-replace": "5.0.2", + "@rollup/plugin-terser": "0.4.0", + "@rollup/plugin-typescript": "11.0.0", + "@rollup/plugin-virtual": "3.0.1", "@size-limit/preset-big-lib": "7.0.3", - "@storybook/addon-a11y": "6.5.12", - "@storybook/addon-actions": "6.5.12", - "@storybook/addon-essentials": "6.5.12", - "@storybook/addon-interactions": "6.5.13", - "@storybook/addon-links": "6.5.12", - "@storybook/addon-storysource": "6.5.12", - "@storybook/builder-webpack5": "6.5.12", + "@storybook/addon-a11y": "6.5.14", + "@storybook/addon-actions": "6.5.16", + "@storybook/addon-essentials": "6.5.16", + "@storybook/addon-interactions": "6.5.14", + "@storybook/addon-links": "6.5.14", + "@storybook/addon-storysource": "6.5.14", + "@storybook/builder-webpack5": "6.5.16", "@storybook/jest": "0.0.10", - "@storybook/manager-webpack5": "6.5.12", - "@storybook/react": "6.5.12", - "@storybook/test-runner": "0.9.0", + "@storybook/manager-webpack5": "6.5.14", + "@storybook/react": "6.5.15", + "@storybook/test-runner": "0.9.1", "@storybook/testing-library": "0.0.13", - "@storybook/theming": "6.5.13", - "@testing-library/dom": "8.13.0", - "@testing-library/jest-dom": "5.16.4", - "@testing-library/react": "12.1.5", + "@storybook/theming": "6.5.16", + "@testing-library/dom": "8.19.1", + "@testing-library/jest-dom": "5.16.5", + "@testing-library/react": "13.4.0", "@testing-library/react-hooks": "7.0.2", "@testing-library/user-event": "^14.3.0", "@types/chroma-js": "2.1.4", - "@types/jest": "27.0.2", + "@types/jest": "29.4.0", "@types/jest-axe": "3.5.3", "@types/lodash.groupby": "4.6.7", "@types/lodash.isempty": "4.4.7", "@types/lodash.isobject": "3.0.7", + "@types/lodash.keyby": "4.6.7", "@types/node": "16.11.11", + "@types/react": "18.0.26", + "@types/react-dom": "18.0.9", "@typescript-eslint/eslint-plugin": "4.33.0", "@typescript-eslint/parser": "4.33.0", - "@whitespace/storybook-addon-html": "5.0.0", + "ajv": "8.12.0", + "axe-core": "4.6.1", "babel-core": "7.0.0-bridge.0", - "babel-loader": "^8.2.2", + "babel-loader": "^9.1.0", "babel-plugin-add-react-displayname": "0.0.5", "babel-plugin-macros": "3.1.0", "babel-plugin-open-source": "1.3.4", @@ -103,51 +110,71 @@ "babel-plugin-transform-commonjs": "1.1.6", "babel-plugin-transform-replace-expressions": "0.2.0", "babel-polyfill": "6.26.0", + "change-case": "4.1.2", "chroma-js": "2.4.2", "chromatic": "6.1.0", - "concurrently": "7.5.0", + "concurrently": "7.6.0", "copyfiles": "2.4.1", "cross-env": "7.0.3", "eslint": "7.32.0", "eslint-plugin-github": "4.1.3", "eslint-plugin-jest": "24.3.6", - "eslint-plugin-jsx-a11y": "6.4.1", + "eslint-plugin-jsx-a11y": "6.6.1", "eslint-plugin-mdx": "1.15.1", "eslint-plugin-prettier": "4.2.1", "eslint-plugin-primer-react": "0.7.4", - "eslint-plugin-react": "7.24.0", - "eslint-plugin-react-hooks": "4.2.0", + "eslint-plugin-react": "7.32.2", + "eslint-plugin-react-hooks": "4.6.0", + "eslint-plugin-storybook": "0.6.10", "fast-glob": "3.2.12", + "filesize": "10.0.6", "front-matter": "4.0.2", - "husky": "7.0.4", - "jest": "29.0.1", + "gzip-size": "6.0.0", + "husky": "8.0.2", + "jest": "29.4.2", "jest-axe": "5.0.1", - "jest-environment-jsdom": "29.2.1", + "jest-environment-jsdom": "29.4.3", + "jest-fail-on-console": "3.0.2", "jest-matchmedia-mock": "1.1.0", "jest-styled-components": "6.3.4", "jest-watch-typeahead": "2.1.1", "jscodeshift": "0.13.0", - "lint-staged": "12.1.2", + "lint-staged": "13.1.0", "lodash.groupby": "4.6.0", "lodash.isempty": "4.4.0", "lodash.isobject": "3.0.2", - "prettier": "2.7.1", - "react": "17.0.2", + "lodash.keyby": "4.6.0", + "markdownlint-cli2": "^0.6.0", + "markdownlint-cli2-formatter-pretty": "0.0.3", + "mdast-util-from-markdown": "1.2.0", + "mdast-util-frontmatter": "1.0.1", + "mdast-util-mdx": "2.0.1", + "mdast-util-to-string": "3.1.0", + "micromark-extension-frontmatter": "1.0.0", + "micromark-extension-mdxjs": "1.0.0", + "prettier": "2.8.1", + "react": "18.2.0", "react-dnd": "14.0.4", "react-dnd-html5-backend": "14.0.2", - "react-dom": "17.0.2", - "react-test-renderer": "17.0.2", - "rimraf": "3.0.2", - "rollup": "2.79.0", - "rollup-plugin-terser": "7.0.2", - "rollup-plugin-visualizer": "5.8.1", - "semver": "7.3.5", + "react-dom": "18.2.0", + "react-test-renderer": "18.2.0", + "recast": "0.22.0", + "rimraf": "4.1.2", + "rollup": "3.12.1", + "rollup-plugin-visualizer": "5.9.0", + "semver": "7.3.8", "size-limit": "7.0.3", "storybook-addon-turbo-build": "1.1.0", "styled-components": "4.4.1", + "terser": "5.16.1", + "ts-node": "10.9.1", "ts-toolbelt": "9.6.0", - "typescript": "4.8.3", - "webpack": "5.74.0" + "typescript": "4.9.5", + "unist-util-find": "1.0.2", + "unist-util-find-before": "3.0.0", + "unist-util-flat-filter": "2.0.0", + "webpack": "5.74.0", + "yaml": "2.2.1" }, "engines": { "node": ">=12", @@ -1323,71 +1350,78 @@ "@primer/react": { "version": "file:../..", "requires": { - "@axe-core/playwright": "4.5.0", - "@babel/cli": "7.17.6", - "@babel/core": "7.14.8", - "@babel/eslint-parser": "7.15.7", - "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0", + "@actions/core": "1.10.0", + "@babel/cli": "7.19.3", + "@babel/core": "7.21.0", + "@babel/eslint-parser": "7.19.1", + "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", "@babel/plugin-proposal-optional-chaining": "7.16.7", "@babel/plugin-transform-modules-commonjs": "7.19.6", "@babel/preset-react": "7.18.6", "@babel/preset-typescript": "7.18.6", - "@changesets/changelog-github": "0.4.7", - "@changesets/cli": "2.25.1", + "@changesets/changelog-github": "0.4.8", + "@changesets/cli": "2.26.0", "@github/combobox-nav": "^2.1.5", "@github/markdown-toolbar-element": "^2.1.0", + "@github/markdownlint-github": "^0.3.0", "@github/paste-markdown": "^1.4.0", - "@github/prettier-config": "0.0.4", - "@github/time-elements": "^3.5.0", - "@lit-labs/react": "1.0.9", - "@playwright/test": "1.27.1", - "@primer/behaviors": "1.3.2", + "@github/prettier-config": "0.0.6", + "@github/relative-time-element": "^4.1.2", + "@lit-labs/react": "1.1.1", + "@playwright/test": "1.30.0", + "@primer/behaviors": "1.3.3", "@primer/octicons-react": "^17.7.0", - "@primer/primitives": "7.10.0", + "@primer/primitives": "7.11.1", "@react-aria/ssr": "^3.1.0", - "@rollup/plugin-babel": "6.0.2", - "@rollup/plugin-commonjs": "23.0.0", - "@rollup/plugin-node-resolve": "14.1.0", - "@rollup/plugin-replace": "5.0.0", - "@rollup/plugin-typescript": "9.0.2", + "@rollup/plugin-babel": "6.0.3", + "@rollup/plugin-commonjs": "24.0.1", + "@rollup/plugin-node-resolve": "15.0.1", + "@rollup/plugin-replace": "5.0.2", + "@rollup/plugin-terser": "0.4.0", + "@rollup/plugin-typescript": "11.0.0", + "@rollup/plugin-virtual": "3.0.1", "@size-limit/preset-big-lib": "7.0.3", - "@storybook/addon-a11y": "6.5.12", - "@storybook/addon-actions": "6.5.12", - "@storybook/addon-essentials": "6.5.12", - "@storybook/addon-interactions": "6.5.13", - "@storybook/addon-links": "6.5.12", - "@storybook/addon-storysource": "6.5.12", - "@storybook/builder-webpack5": "6.5.12", + "@storybook/addon-a11y": "6.5.14", + "@storybook/addon-actions": "6.5.16", + "@storybook/addon-essentials": "6.5.16", + "@storybook/addon-interactions": "6.5.14", + "@storybook/addon-links": "6.5.14", + "@storybook/addon-storysource": "6.5.14", + "@storybook/builder-webpack5": "6.5.16", "@storybook/jest": "0.0.10", - "@storybook/manager-webpack5": "6.5.12", - "@storybook/react": "6.5.12", - "@storybook/test-runner": "0.9.0", + "@storybook/manager-webpack5": "6.5.14", + "@storybook/react": "6.5.15", + "@storybook/test-runner": "0.9.1", "@storybook/testing-library": "0.0.13", - "@storybook/theming": "6.5.13", + "@storybook/theming": "6.5.16", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", "@styled-system/theme-get": "^5.1.2", - "@testing-library/dom": "8.13.0", - "@testing-library/jest-dom": "5.16.4", - "@testing-library/react": "12.1.5", + "@testing-library/dom": "8.19.1", + "@testing-library/jest-dom": "5.16.5", + "@testing-library/react": "13.4.0", "@testing-library/react-hooks": "7.0.2", "@testing-library/user-event": "^14.3.0", "@types/chroma-js": "2.1.4", - "@types/jest": "27.0.2", + "@types/jest": "29.4.0", "@types/jest-axe": "3.5.3", "@types/lodash.groupby": "4.6.7", "@types/lodash.isempty": "4.4.7", "@types/lodash.isobject": "3.0.7", + "@types/lodash.keyby": "4.6.7", "@types/node": "16.11.11", + "@types/react": "18.0.26", + "@types/react-dom": "18.0.9", "@types/styled-components": "^5.1.11", "@types/styled-system": "^5.1.12", "@types/styled-system__css": "^5.0.16", "@types/styled-system__theme-get": "^5.0.1", "@typescript-eslint/eslint-plugin": "4.33.0", "@typescript-eslint/parser": "4.33.0", - "@whitespace/storybook-addon-html": "5.0.0", + "ajv": "8.12.0", + "axe-core": "4.6.1", "babel-core": "7.0.0-bridge.0", - "babel-loader": "^8.2.2", + "babel-loader": "^9.1.0", "babel-plugin-add-react-displayname": "0.0.5", "babel-plugin-macros": "3.1.0", "babel-plugin-open-source": "1.3.4", @@ -1396,59 +1430,79 @@ "babel-plugin-transform-commonjs": "1.1.6", "babel-plugin-transform-replace-expressions": "0.2.0", "babel-polyfill": "6.26.0", + "change-case": "4.1.2", "chroma-js": "2.4.2", "chromatic": "6.1.0", "classnames": "^2.3.1", - "color2k": "^1.2.4", - "concurrently": "7.5.0", + "color2k": "^2.0.0", + "concurrently": "7.6.0", "copyfiles": "2.4.1", "cross-env": "7.0.3", "deepmerge": "^4.2.2", "eslint": "7.32.0", "eslint-plugin-github": "4.1.3", "eslint-plugin-jest": "24.3.6", - "eslint-plugin-jsx-a11y": "6.4.1", + "eslint-plugin-jsx-a11y": "6.6.1", "eslint-plugin-mdx": "1.15.1", "eslint-plugin-prettier": "4.2.1", "eslint-plugin-primer-react": "0.7.4", - "eslint-plugin-react": "7.24.0", - "eslint-plugin-react-hooks": "4.2.0", + "eslint-plugin-react": "7.32.2", + "eslint-plugin-react-hooks": "4.6.0", + "eslint-plugin-storybook": "0.6.10", "fast-glob": "3.2.12", + "filesize": "10.0.6", "focus-visible": "^5.2.0", "front-matter": "4.0.2", "fzy.js": "0.4.1", + "gzip-size": "6.0.0", "history": "^5.0.0", - "husky": "7.0.4", - "jest": "29.0.1", + "husky": "8.0.2", + "jest": "29.4.2", "jest-axe": "5.0.1", - "jest-environment-jsdom": "29.2.1", + "jest-environment-jsdom": "29.4.3", + "jest-fail-on-console": "3.0.2", "jest-matchmedia-mock": "1.1.0", "jest-styled-components": "6.3.4", "jest-watch-typeahead": "2.1.1", "jscodeshift": "0.13.0", - "lint-staged": "12.1.2", + "lint-staged": "13.1.0", "lodash.groupby": "4.6.0", "lodash.isempty": "4.4.0", "lodash.isobject": "3.0.2", - "prettier": "2.7.1", - "react": "17.0.2", + "lodash.keyby": "4.6.0", + "markdownlint-cli2": "^0.6.0", + "markdownlint-cli2-formatter-pretty": "0.0.3", + "mdast-util-from-markdown": "1.2.0", + "mdast-util-frontmatter": "1.0.1", + "mdast-util-mdx": "2.0.1", + "mdast-util-to-string": "3.1.0", + "micromark-extension-frontmatter": "1.0.0", + "micromark-extension-mdxjs": "1.0.0", + "prettier": "2.8.1", + "react": "18.2.0", "react-dnd": "14.0.4", "react-dnd-html5-backend": "14.0.2", - "react-dom": "17.0.2", - "react-intersection-observer": "9.4.0", - "react-test-renderer": "17.0.2", - "rimraf": "3.0.2", - "rollup": "2.79.0", - "rollup-plugin-terser": "7.0.2", - "rollup-plugin-visualizer": "5.8.1", - "semver": "7.3.5", + "react-dom": "18.2.0", + "react-intersection-observer": "9.4.1", + "react-test-renderer": "18.2.0", + "recast": "0.22.0", + "rimraf": "4.1.2", + "rollup": "3.12.1", + "rollup-plugin-visualizer": "5.9.0", + "semver": "7.3.8", "size-limit": "7.0.3", "storybook-addon-turbo-build": "1.1.0", "styled-components": "4.4.1", "styled-system": "^5.1.5", + "terser": "5.16.1", + "ts-node": "10.9.1", "ts-toolbelt": "9.6.0", - "typescript": "4.8.3", - "webpack": "5.74.0" + "typescript": "4.9.5", + "unist-util-find": "1.0.2", + "unist-util-find-before": "3.0.0", + "unist-util-flat-filter": "2.0.0", + "webpack": "5.74.0", + "yaml": "2.2.1" } }, "@swc/helpers": { diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx index d4f4af8fae0..9a9df8ba25d 100644 --- a/src/Token/Token.tsx +++ b/src/Token/Token.tsx @@ -6,6 +6,7 @@ import TokenBase, {defaultTokenSize, isTokenInteractive, TokenBaseProps} from '. import RemoveTokenButton from './_RemoveTokenButton' import TokenTextContainer from './_TokenTextContainer' import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' +import VisuallyHidden from '../_VisuallyHidden' // Omitting onResize and onResizeCapture because seems like React 18 types includes these menthod in the expansion but React 17 doesn't. // TODO: This is a temporary solution until we figure out why these methods are causing type errors. @@ -94,6 +95,7 @@ const Token = forwardRef((props, forwardedRef) => { ) : null} {text} + {onRemove && (press backspace or delete to remove)} {!hideRemoveButton && onRemove ? ( { - return ( - ) => { - onKeyDown && onKeyDown(event) +const TokenBase = React.forwardRef(({onRemove, onKeyDown, id, size = defaultTokenSize, ...rest}, forwardedRef) => { + return ( + ) => { + onKeyDown && onKeyDown(event) - if ((event.key === 'Backspace' || event.key === 'Delete') && onRemove) { - onRemove() - } - }} - aria-label={onRemove ? `${text}, press backspace or delete to remove` : undefined} - id={id?.toString()} - size={size} - {...rest} - ref={forwardedRef} - /> - ) - }, -) as PolymorphicForwardRefComponent<'span' | 'a' | 'button', TokenBaseProps & SxProp> + if ((event.key === 'Backspace' || event.key === 'Delete') && onRemove) { + onRemove() + } + }} + id={id?.toString()} + size={size} + {...rest} + ref={forwardedRef} + /> + ) +}) as PolymorphicForwardRefComponent<'span' | 'a' | 'button', TokenBaseProps & SxProp> export default TokenBase diff --git a/src/__tests__/TextInputWithTokens.test.tsx b/src/__tests__/TextInputWithTokens.test.tsx index e77344986f5..21747c7e394 100644 --- a/src/__tests__/TextInputWithTokens.test.tsx +++ b/src/__tests__/TextInputWithTokens.test.tsx @@ -495,7 +495,7 @@ describe('TextInputWithTokens', () => { jest.runAllTimers() }) - expect(document.activeElement?.textContent).toBe(mockTokens[1].text) + expect(document.activeElement?.textContent).toContain(mockTokens[1].text) jest.useRealTimers() }) diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index 7d484ce9385..7327d3b10c9 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -39,6 +39,19 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` flex-grow: 1; } +.c6 { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + -webkit-clip: rect(0,0,0,0); + clip: rect(0,0,0,0); + white-space: nowrap; + border-width: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -181,7 +194,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` color: #24292f; } -.c6 { +.c7 { background-color: transparent; font-family: inherit; color: currentColor; @@ -221,12 +234,12 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` width: 32px; } -.c6:hover, -.c6:focus { +.c7:hover, +.c7:focus { background-color: rgba(175,184,193,0.2); } -.c6:active { +.c7:active { background-color: rgba(234,238,242,0.5); } @@ -324,7 +337,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` /> + + + + + + + +