From 9fa978520f9dbf7bcb74ee81419b3536ae99704e Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 6 Jan 2025 11:47:43 -0500 Subject: [PATCH 01/19] chore(deps-dev): bump storybook from 8.3.0 to 8.4.7 (#5474) Bumps [storybook](https://github.com/storybookjs/storybook/tree/HEAD/code/lib/cli) from 8.3.0 to 8.4.7. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.4.7/code/lib/cli) --- updated-dependencies: - dependency-name: storybook dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 79 +++++++++++++++++++++++++++++++++---- packages/react/package.json | 2 +- 2 files changed, 73 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9473b6b7744..e693aaeef4e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7391,16 +7391,18 @@ } }, "node_modules/@storybook/core": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.4.7.tgz", + "integrity": "sha512-7Z8Z0A+1YnhrrSXoKKwFFI4gnsLbWzr8fnDCU6+6HlDukFYh8GHRcZ9zKfqmy6U3hw2h8H5DrHsxWfyaYUUOoA==", "dev": true, "license": "MIT", "dependencies": { "@storybook/csf": "^0.1.11", - "@types/express": "^4.17.21", + "better-opn": "^3.0.2", "browser-assert": "^1.2.1", - "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0", + "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0", "esbuild-register": "^3.5.0", - "express": "^4.19.2", + "jsdoc-type-pratt-parser": "^4.0.0", "process": "^0.11.10", "recast": "^0.23.5", "semver": "^7.6.2", @@ -7410,6 +7412,14 @@ "funding": { "type": "opencollective", "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "prettier": "^2 || ^3" + }, + "peerDependenciesMeta": { + "prettier": { + "optional": true + } } }, "node_modules/@storybook/core-events": { @@ -10622,6 +10632,37 @@ "node": ">=10.0.0" } }, + "node_modules/better-opn": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz", + "integrity": "sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "open": "^8.0.4" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/better-opn/node_modules/open": { + "version": "8.4.2", + "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz", + "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "define-lazy-prop": "^2.0.0", + "is-docker": "^2.1.1", + "is-wsl": "^2.2.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/better-path-resolve": { "version": "1.0.0", "dev": true, @@ -13202,6 +13243,8 @@ }, "node_modules/esbuild-register": { "version": "3.6.0", + "resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.6.0.tgz", + "integrity": "sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==", "dev": true, "license": "MIT", "dependencies": { @@ -19385,6 +19428,16 @@ "signal-exit": "^3.0.2" } }, + "node_modules/jsdoc-type-pratt-parser": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz", + "integrity": "sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/jsdom": { "version": "20.0.3", "dev": true, @@ -24298,6 +24351,8 @@ }, "node_modules/process": { "version": "0.11.10", + "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", + "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==", "dev": true, "license": "MIT", "engines": { @@ -26928,11 +26983,13 @@ } }, "node_modules/storybook": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.4.7.tgz", + "integrity": "sha512-RP/nMJxiWyFc8EVMH5gp20ID032Wvk+Yr3lmKidoegto5Iy+2dVQnUoElZb2zpbVXNHWakGuAkfI0dY1Hfp/vw==", "dev": true, "license": "MIT", "dependencies": { - "@storybook/core": "8.3.0" + "@storybook/core": "8.4.7" }, "bin": { "getstorybook": "bin/index.cjs", @@ -26942,6 +26999,14 @@ "funding": { "type": "opencollective", "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "prettier": "^2 || ^3" + }, + "peerDependenciesMeta": { + "prettier": { + "optional": true + } } }, "node_modules/stream-transform": { @@ -30561,7 +30626,7 @@ "rollup-plugin-postcss": "4.0.2", "rollup-plugin-visualizer": "5.9.2", "semver": "7.6.2", - "storybook": "^8.3.0", + "storybook": "^8.4.7", "styled-components": "5.3.11", "terser": "5.36.0", "ts-toolbelt": "9.6.0", diff --git a/packages/react/package.json b/packages/react/package.json index de44eb2a6df..8e949205336 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -196,7 +196,7 @@ "rollup-plugin-postcss": "4.0.2", "rollup-plugin-visualizer": "5.9.2", "semver": "7.6.2", - "storybook": "^8.3.0", + "storybook": "^8.4.7", "styled-components": "5.3.11", "terser": "5.36.0", "ts-toolbelt": "9.6.0", From bf5825e87218ef5bd7dba44e5932c2301ee7060a Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 6 Jan 2025 11:48:06 -0500 Subject: [PATCH 02/19] chore(deps-dev): bump @storybook/addon-actions from 8.3.0 to 8.4.7 (#5473) Bumps [@storybook/addon-actions](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/actions) from 8.3.0 to 8.4.7. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.4.7/code/addons/actions) --- updated-dependencies: - dependency-name: "@storybook/addon-actions" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 43 ++++++++++++++++++++++++++++++++++--- packages/react/package.json | 2 +- 2 files changed, 41 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index e693aaeef4e..fa912552947 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6899,7 +6899,9 @@ } }, "node_modules/@storybook/addon-actions": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.4.7.tgz", + "integrity": "sha512-mjtD5JxcPuW74T6h7nqMxWTvDneFtokg88p6kQ5OnC1M259iAXb//yiSZgu/quunMHPCXSiqn4FNOSgASTSbsA==", "dev": true, "license": "MIT", "dependencies": { @@ -6914,7 +6916,7 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.0" + "storybook": "^8.4.7" } }, "node_modules/@storybook/addon-actions/node_modules/uuid": { @@ -7062,6 +7064,41 @@ "storybook": "^8.3.0" } }, + "node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-actions": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.3.0.tgz", + "integrity": "sha512-HvAc3fW979JVw8CSKXZMouvgrJ2BNLNWaUB8jNokQb3Us00P6igVKLwg/pBV8GBgDr5Ng4pHYqi/ZH+xzEYFFw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/global": "^5.0.0", + "@types/uuid": "^9.0.1", + "dequal": "^2.0.2", + "polished": "^4.2.2", + "uuid": "^9.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.3.0" + } + }, + "node_modules/@storybook/addon-essentials/node_modules/uuid": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "dev": true, + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "license": "MIT", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/@storybook/addon-highlight": { "version": "8.3.0", "dev": true, @@ -30555,7 +30592,7 @@ "@rollup/plugin-typescript": "11.1.5", "@rollup/plugin-virtual": "3.0.2", "@storybook/addon-a11y": "^8.3.0", - "@storybook/addon-actions": "^8.3.0", + "@storybook/addon-actions": "^8.4.7", "@storybook/addon-essentials": "^8.3.0", "@storybook/addon-interactions": "^8.3.0", "@storybook/addon-links": "^8.3.0", diff --git a/packages/react/package.json b/packages/react/package.json index 8e949205336..f30d4573ca8 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -125,7 +125,7 @@ "@rollup/plugin-typescript": "11.1.5", "@rollup/plugin-virtual": "3.0.2", "@storybook/addon-a11y": "^8.3.0", - "@storybook/addon-actions": "^8.3.0", + "@storybook/addon-actions": "^8.4.7", "@storybook/addon-essentials": "^8.3.0", "@storybook/addon-interactions": "^8.3.0", "@storybook/addon-links": "^8.3.0", From e978743359b620ccad604d7cd22376f5942d23bd Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 6 Jan 2025 11:48:30 -0500 Subject: [PATCH 03/19] chore(deps-dev): bump eslint-plugin-storybook from 0.8.0 to 0.11.2 (#5491) Bumps [eslint-plugin-storybook](https://github.com/storybookjs/eslint-plugin-storybook) from 0.8.0 to 0.11.2. - [Release notes](https://github.com/storybookjs/eslint-plugin-storybook/releases) - [Changelog](https://github.com/storybookjs/eslint-plugin-storybook/blob/main/CHANGELOG.md) - [Commits](https://github.com/storybookjs/eslint-plugin-storybook/compare/v0.8.0...v0.11.2) --- updated-dependencies: - dependency-name: eslint-plugin-storybook dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 159 +++++++++++++++++++++++++++++++++++++++++----- package.json | 2 +- 2 files changed, 143 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index fa912552947..f2fa4b776f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,7 +38,7 @@ "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-ssr-friendly": "1.3.0", - "eslint-plugin-storybook": "0.8.0", + "eslint-plugin-storybook": "0.11.2", "eslint-plugin-testing-library": "6.0.2", "jest": "29.7.0", "jest-watch-typeahead": "2.2.2", @@ -14331,28 +14331,161 @@ } }, "node_modules/eslint-plugin-storybook": { - "version": "0.8.0", + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.11.2.tgz", + "integrity": "sha512-0Z4DUklJrC+GHjCRXa7PYfPzWC15DaVnwaOYenpgXiCEijXPZkLKCms+rHhtoRcWccP7Z8DpOOaP1gc3P9oOwg==", "dev": true, "license": "MIT", "dependencies": { - "@storybook/csf": "^0.0.1", - "@typescript-eslint/utils": "^5.62.0", - "requireindex": "^1.2.0", + "@storybook/csf": "^0.1.11", + "@typescript-eslint/utils": "^8.8.1", "ts-dedent": "^2.2.0" }, "engines": { "node": ">= 18" }, "peerDependencies": { - "eslint": ">=6" + "eslint": ">=8" } }, - "node_modules/eslint-plugin-storybook/node_modules/@storybook/csf": { - "version": "0.0.1", + "node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/scope-manager": { + "version": "8.19.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.19.0.tgz", + "integrity": "sha512-hkoJiKQS3GQ13TSMEiuNmSCvhz7ujyqD1x3ShbaETATHrck+9RaDdUbt+osXaUuns9OFwrDTTrjtwsU8gJyyRA==", "dev": true, "license": "MIT", "dependencies": { - "lodash": "^4.17.15" + "@typescript-eslint/types": "8.19.0", + "@typescript-eslint/visitor-keys": "8.19.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/types": { + "version": "8.19.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.19.0.tgz", + "integrity": "sha512-8XQ4Ss7G9WX8oaYvD4OOLCjIQYgRQxO+qCiR2V2s2GxI9AUpo7riNwo6jDhKtTcaJjT8PY54j2Yb33kWtSJsmA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/typescript-estree": { + "version": "8.19.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.19.0.tgz", + "integrity": "sha512-WW9PpDaLIFW9LCbucMSdYUuGeFUz1OkWYS/5fwZwTA+l2RwlWFdJvReQqMUMBw4yJWJOfqd7An9uwut2Oj8sLw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@typescript-eslint/types": "8.19.0", + "@typescript-eslint/visitor-keys": "8.19.0", + "debug": "^4.3.4", + "fast-glob": "^3.3.2", + "is-glob": "^4.0.3", + "minimatch": "^9.0.4", + "semver": "^7.6.0", + "ts-api-utils": "^1.3.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "typescript": ">=4.8.4 <5.8.0" + } + }, + "node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/utils": { + "version": "8.19.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.19.0.tgz", + "integrity": "sha512-PTBG+0oEMPH9jCZlfg07LCB2nYI0I317yyvXGfxnvGvw4SHIOuRnQ3kadyyXY6tGdChusIHIbM5zfIbp4M6tCg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@eslint-community/eslint-utils": "^4.4.0", + "@typescript-eslint/scope-manager": "8.19.0", + "@typescript-eslint/types": "8.19.0", + "@typescript-eslint/typescript-estree": "8.19.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^8.57.0 || ^9.0.0", + "typescript": ">=4.8.4 <5.8.0" + } + }, + "node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/visitor-keys": { + "version": "8.19.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.19.0.tgz", + "integrity": "sha512-mCFtBbFBJDCNCWUl5y6sZSCHXw1DEFEk3c/M3nRK2a4XUB8StGFtmcEMizdjKuBzB6e/smJAAWYug3VrdLMr1w==", + "dev": true, + "license": "MIT", + "dependencies": { + "@typescript-eslint/types": "8.19.0", + "eslint-visitor-keys": "^4.2.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/eslint-plugin-storybook/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/eslint-plugin-storybook/node_modules/eslint-visitor-keys": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz", + "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-plugin-storybook/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" } }, "node_modules/eslint-plugin-testing-library": { @@ -25407,14 +25540,6 @@ "dev": true, "license": "ISC" }, - "node_modules/requireindex": { - "version": "1.2.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.5" - } - }, "node_modules/requires-port": { "version": "1.0.0", "dev": true, diff --git a/package.json b/package.json index 4bcbdca6fcb..f692fa9ec01 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-ssr-friendly": "1.3.0", - "eslint-plugin-storybook": "0.8.0", + "eslint-plugin-storybook": "0.11.2", "eslint-plugin-testing-library": "6.0.2", "jest": "29.7.0", "jest-watch-typeahead": "2.2.2", From 43afd36a282742e7c630e3301b35f780a834dfe9 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Mon, 6 Jan 2025 12:14:10 -0500 Subject: [PATCH 04/19] =?UTF-8?q?Revert=20"refactor(FormControl):=20update?= =?UTF-8?q?=20FormControl=20to=20use=20CSS=20Modules=20behind=20f=E2=80=A6?= =?UTF-8?q?"=20(#5494)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 4776d13951bf72c2dfad427dcd07fadcce2c40b3. --- .changeset/gentle-stingrays-search.md | 5 - .../src/FormControl/FormControl.module.css | 57 ------ .../react/src/FormControl/FormControl.tsx | 186 +++++------------- .../FormControl/FormControlCaption.module.css | 9 - .../src/FormControl/FormControlCaption.tsx | 50 ++--- .../useFormControlForwardedProps.test.tsx | 53 ----- .../react/src/FormControl/feature-flags.ts | 1 - .../__tests__/FormControl.test.tsx | 54 ++++- .../internal/components/InputLabel.module.css | 32 --- .../src/internal/components/InputLabel.tsx | 28 +-- .../components/InputValidation.module.css | 32 --- .../internal/components/InputValidation.tsx | 37 +--- 12 files changed, 140 insertions(+), 404 deletions(-) delete mode 100644 .changeset/gentle-stingrays-search.md delete mode 100644 packages/react/src/FormControl/FormControl.module.css delete mode 100644 packages/react/src/FormControl/FormControlCaption.module.css delete mode 100644 packages/react/src/FormControl/__tests__/useFormControlForwardedProps.test.tsx delete mode 100644 packages/react/src/FormControl/feature-flags.ts rename packages/react/src/{FormControl => }/__tests__/FormControl.test.tsx (88%) delete mode 100644 packages/react/src/internal/components/InputLabel.module.css delete mode 100644 packages/react/src/internal/components/InputValidation.module.css diff --git a/.changeset/gentle-stingrays-search.md b/.changeset/gentle-stingrays-search.md deleted file mode 100644 index 6ff383c37e5..00000000000 --- a/.changeset/gentle-stingrays-search.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": minor ---- - -Update FormControl to use CSS Modules behind feature flag diff --git a/packages/react/src/FormControl/FormControl.module.css b/packages/react/src/FormControl/FormControl.module.css deleted file mode 100644 index 911f04bbde7..00000000000 --- a/packages/react/src/FormControl/FormControl.module.css +++ /dev/null @@ -1,57 +0,0 @@ -.ControlHorizontalLayout { - display: flex; - - &:where([data-has-leading-visual]) { - align-items: center; - } -} - -.ControlVerticalLayout { - display: flex; - flex-direction: column; - align-items: flex-start; - - & > *:not(label) + * { - margin-top: var(--base-size-4); - } - - &[data-has-label] > * + * { - margin-top: var(--base-size-4); - } -} - -.ControlChoiceInputs > input { - margin-right: 0; - margin-left: 0; -} - -.LabelContainer { - > * { - /* stylelint-disable-next-line primer/spacing */ - padding-left: var(--stack-gap-condensed); - } - - > label { - font-weight: var(--base-text-weight-normal); - } -} - -.LeadingVisual { - margin-left: var(--base-size-8); - color: var(--fgColor-muted); - - &:where([data-disabled]) { - color: var(--control-fgColor-disabled); - } - - > * { - min-width: var(--text-body-size-large); - min-height: var(--text-body-size-large); - fill: currentColor; - } - - > *:where([data-has-caption]) { - min-width: var(--base-size-24); - min-height: var(--base-size-24); - } -} diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx index 8315f7be97a..69d4b9bf871 100644 --- a/packages/react/src/FormControl/FormControl.tsx +++ b/packages/react/src/FormControl/FormControl.tsx @@ -1,6 +1,6 @@ -import {clsx} from 'clsx' import React, {useContext} from 'react' import Autocomplete from '../Autocomplete' +import Box from '../Box' import Checkbox from '../Checkbox' import Radio from '../Radio' import Select from '../Select/Select' @@ -10,6 +10,7 @@ import TextInputWithTokens from '../TextInputWithTokens' import Textarea from '../Textarea' import {CheckboxOrRadioGroupContext} from '../internal/components/CheckboxOrRadioGroup' import ValidationAnimationContainer from '../internal/components/ValidationAnimationContainer' +import {get} from '../constants' import {useSlots} from '../hooks/useSlots' import type {SxProp} from '../sx' import {useId} from '../hooks/useId' @@ -19,12 +20,6 @@ import FormControlLeadingVisual from './FormControlLeadingVisual' import FormControlValidation from './_FormControlValidation' import {FormControlContextProvider} from './_FormControlContext' import {warning} from '../utils/warning' -import styled from 'styled-components' -import sx from '../sx' -import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' -import {cssModulesFlag} from './feature-flags' -import {useFeatureFlag} from '../FeatureFlags' -import classes from './FormControl.module.css' export type FormControlProps = { children?: React.ReactNode @@ -50,7 +45,6 @@ export type FormControlProps = { const FormControl = React.forwardRef( ({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, sx, className}, ref) => { - const enabled = useFeatureFlag(cssModulesFlag) const [slots, childrenWithoutSlots] = useSlots(children, { caption: FormControlCaption, label: FormControlLabel, @@ -133,62 +127,69 @@ const FormControl = React.forwardRef( }} > {isChoiceInput || layout === 'horizontal' ? ( - - - {React.isValidElement(InputComponent) - ? React.cloneElement( - InputComponent as React.ReactElement<{ - id: string - disabled: boolean - required: boolean - ['aria-describedby']: string - }>, - { - id, - disabled, - // allow checkboxes to be required - required: required && !isRadioInput, - ['aria-describedby']: captionId as string, - }, - ) - : null} + input': {marginLeft: 0, marginRight: 0}}}> + {React.isValidElement(InputComponent) && + React.cloneElement( + InputComponent as React.ReactElement<{ + id: string + disabled: boolean + required: boolean + ['aria-describedby']: string + }>, + { + id, + disabled, + // allow checkboxes to be required + required: required && !isRadioInput, + ['aria-describedby']: captionId as string, + }, + )} {childrenWithoutSlots.filter( child => React.isValidElement(child) && ![Checkbox, Radio].some(inputComponent => child.type === inputComponent), )} - - {slots.leadingVisual ? ( - + {slots.leadingVisual && ( + *': { + minWidth: slots.caption ? get('fontSizes.4') : get('fontSizes.2'), + minHeight: slots.caption ? get('fontSizes.4') : get('fontSizes.2'), + fill: 'currentColor', + }, + }} + ml={2} > {slots.leadingVisual} - - ) : null} - + + )} + *': {paddingLeft: 'var(--stack-gap-condensed)'}, + '> label': {fontWeight: 'var(--base-text-weight-normal)'}, + }} + > {slots.label} {slots.caption} - - + + ) : ( - *:not(label) + *': {marginTop: 1}} : {'> * + *': {marginTop: 1}}), ...sx}} + className={className} > {slots.label} {React.isValidElement(InputComponent) && @@ -214,96 +215,13 @@ const FormControl = React.forwardRef( {slots.validation} ) : null} {slots.caption} - + )} ) }, ) -const StyledHorizontalLayout = toggleStyledComponent( - cssModulesFlag, - 'div', - styled.div` - display: flex; - - &:where([data-has-leading-visual]) { - align-items: center; - } - - ${sx} - `, -) - -const StyledChoiceInputs = toggleStyledComponent( - cssModulesFlag, - 'div', - styled.div` - > input { - margin-left: 0; - margin-right: 0; - } - `, -) - -const StyledLabelContainer = toggleStyledComponent( - cssModulesFlag, - 'div', - styled.div` - > * { - padding-left: var(--stack-gap-condensed); - } - - > label { - font-weight: var(--base-text-weight-normal); - } - `, -) - -const StyledVerticalLayout = toggleStyledComponent( - cssModulesFlag, - 'div', - styled.div` - display: flex; - flex-direction: column; - align-items: flex-start; - - & > *:not(label) + * { - margin-top: var(--base-size-4); - } - - &:where([data-has-label]) > * + * { - margin-top: var(--base-size-4); - } - - ${sx} - `, -) - -const StyledLeadingVisual = toggleStyledComponent( - cssModulesFlag, - 'div', - styled.div` - color: var(--fgColor-default); - margin-left: var(--base-size-8); - - &:where([data-disabled]) { - color: var(--fgColor-muted); - } - - > * { - fill: currentColor; - min-width: var(--text-body-size-large); - min-height: var(--text-body-size-large); - } - - > *:where([data-has-caption]) { - min-width: var(--base-size-24); - min-height: var(--base-size-24); - } - `, -) - export default Object.assign(FormControl, { Caption: FormControlCaption, Label: FormControlLabel, diff --git a/packages/react/src/FormControl/FormControlCaption.module.css b/packages/react/src/FormControl/FormControlCaption.module.css deleted file mode 100644 index b51b54b53ca..00000000000 --- a/packages/react/src/FormControl/FormControlCaption.module.css +++ /dev/null @@ -1,9 +0,0 @@ -.Caption { - display: block; - font-size: var(--text-body-size-small); - color: var(--fgColor-muted); - - &:where([data-control-disabled]) { - color: var(--control-fgColor-disabled); - } -} diff --git a/packages/react/src/FormControl/FormControlCaption.tsx b/packages/react/src/FormControl/FormControlCaption.tsx index 0b9ee2f5c64..dc05e1a3bad 100644 --- a/packages/react/src/FormControl/FormControlCaption.tsx +++ b/packages/react/src/FormControl/FormControlCaption.tsx @@ -1,14 +1,22 @@ -import {clsx} from 'clsx' import React from 'react' -import styled from 'styled-components' -import {cssModulesFlag} from './feature-flags' -import {useFeatureFlag} from '../FeatureFlags' -import Text from '../Text' -import sx from '../sx' import type {SxProp} from '../sx' -import classes from './FormControlCaption.module.css' import {useFormControlContext} from './_FormControlContext' -import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import Text from '../Text' +import styled from 'styled-components' +import {get} from '../constants' +import sx from '../sx' + +const StyledCaption = styled(Text)` + color: var(--fgColor-muted); + display: block; + font-size: ${get('fontSizes.0')}; + + &:where([data-control-disabled]) { + color: var(--control-fgColor-disabled); + } + + ${sx} +` type FormControlCaptionProps = React.PropsWithChildren< { @@ -17,36 +25,12 @@ type FormControlCaptionProps = React.PropsWithChildren< > function FormControlCaption({id, children, sx}: FormControlCaptionProps) { - const enabled = useFeatureFlag(cssModulesFlag) const {captionId, disabled} = useFormControlContext() return ( - + {children} ) } -const StyledCaption = toggleStyledComponent( - cssModulesFlag, - Text, - styled(Text)` - color: var(--fgColor-muted); - display: block; - font-size: var(--text-body-size-small); - - &:where([data-control-disabled]) { - color: var(--control-fgColor-disabled); - } - - ${sx} - `, -) - export {FormControlCaption} diff --git a/packages/react/src/FormControl/__tests__/useFormControlForwardedProps.test.tsx b/packages/react/src/FormControl/__tests__/useFormControlForwardedProps.test.tsx deleted file mode 100644 index b71ad163989..00000000000 --- a/packages/react/src/FormControl/__tests__/useFormControlForwardedProps.test.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react' -import {renderHook} from '@testing-library/react-hooks' -import FormControl, {useFormControlForwardedProps} from '../../FormControl' - -describe('useFormControlForwardedProps', () => { - describe('when used outside FormControl', () => { - test('returns empty object when no props object passed', () => { - const result = renderHook(() => useFormControlForwardedProps({})) - expect(result.result.current).toEqual({}) - }) - - test('returns passed props object instance when passed', () => { - const props = {id: 'test-id'} - const result = renderHook(() => useFormControlForwardedProps(props)) - expect(result.result.current).toBe(props) - }) - }) - - test('provides context value when no props object is passed', () => { - const id = 'test-id' - - const {result} = renderHook(() => useFormControlForwardedProps({}), { - wrapper: ({children}: {children: React.ReactNode}) => ( - - Label - {children} - - ), - }) - - expect(result.current.disabled).toBe(true) - expect(result.current.id).toBe(id) - expect(result.current.required).toBe(true) - }) - - test('merges with props object, overriding to prioritize props when conflicting', () => { - const props = {id: 'override-id', xyz: 'someValue'} - - const {result} = renderHook(() => useFormControlForwardedProps(props), { - wrapper: ({children}: {children: React.ReactNode}) => ( - - Label - {children} - - ), - }) - - expect(result.current.disabled).toBe(true) - expect(result.current.id).toBe(props.id) - expect(result.current.required).toBeFalsy() - expect(result.current.xyz).toBe(props.xyz) - }) -}) diff --git a/packages/react/src/FormControl/feature-flags.ts b/packages/react/src/FormControl/feature-flags.ts deleted file mode 100644 index 0ea24433c23..00000000000 --- a/packages/react/src/FormControl/feature-flags.ts +++ /dev/null @@ -1 +0,0 @@ -export const cssModulesFlag = 'primer_react_css_modules_team' diff --git a/packages/react/src/FormControl/__tests__/FormControl.test.tsx b/packages/react/src/__tests__/FormControl.test.tsx similarity index 88% rename from packages/react/src/FormControl/__tests__/FormControl.test.tsx rename to packages/react/src/__tests__/FormControl.test.tsx index ba820dd28f7..203f40d12c7 100644 --- a/packages/react/src/FormControl/__tests__/FormControl.test.tsx +++ b/packages/react/src/__tests__/FormControl.test.tsx @@ -1,5 +1,6 @@ import React from 'react' import {render} from '@testing-library/react' +import {renderHook} from '@testing-library/react-hooks' import axe from 'axe-core' import { Autocomplete, @@ -11,7 +12,8 @@ import { Textarea, TextInput, TextInputWithTokens, -} from '../..' + useFormControlForwardedProps, +} from '..' import {MarkGithubIcon} from '@primer/octicons-react' const LABEL_TEXT = 'Form control' @@ -452,3 +454,53 @@ describe('FormControl', () => { }) }) }) + +describe('useFormControlForwardedProps', () => { + describe('when used outside FormControl', () => { + test('returns empty object when no props object passed', () => { + const result = renderHook(() => useFormControlForwardedProps({})) + expect(result.result.current).toEqual({}) + }) + + test('returns passed props object instance when passed', () => { + const props = {id: 'test-id'} + const result = renderHook(() => useFormControlForwardedProps(props)) + expect(result.result.current).toBe(props) + }) + }) + + test('provides context value when no props object is passed', () => { + const id = 'test-id' + + const {result} = renderHook(() => useFormControlForwardedProps({}), { + wrapper: ({children}: {children: React.ReactNode}) => ( + + Label + {children} + + ), + }) + + expect(result.current.disabled).toBe(true) + expect(result.current.id).toBe(id) + expect(result.current.required).toBe(true) + }) + + test('merges with props object, overriding to prioritize props when conflicting', () => { + const props = {id: 'override-id', xyz: 'someValue'} + + const {result} = renderHook(() => useFormControlForwardedProps(props), { + wrapper: ({children}: {children: React.ReactNode}) => ( + + Label + {children} + + ), + }) + + expect(result.current.disabled).toBe(true) + expect(result.current.id).toBe(props.id) + expect(result.current.required).toBeFalsy() + expect(result.current.xyz).toBe(props.xyz) + }) +}) diff --git a/packages/react/src/internal/components/InputLabel.module.css b/packages/react/src/internal/components/InputLabel.module.css deleted file mode 100644 index 25b655a8b82..00000000000 --- a/packages/react/src/internal/components/InputLabel.module.css +++ /dev/null @@ -1,32 +0,0 @@ -.Label { - display: block; - font-size: var(--text-body-size-medium); - font-weight: var(--base-text-weight-semibold); - color: var(--fgColor-default); - cursor: pointer; - align-self: flex-start; - - &:where([data-control-disabled]) { - color: var(--control-fgColor-disabled); - cursor: not-allowed; - } - - &:where([data-visually-hidden]) { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - /* stylelint-disable-next-line primer/spacing */ - margin: -1px; - overflow: hidden; - clip: rect(0 0 0 0); - white-space: nowrap; - border: 0; - clip-path: inset(50%); - } -} - -.RequiredText { - display: flex; - column-gap: var(--base-size-4); -} diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx index b14f5366bfa..9126d192086 100644 --- a/packages/react/src/internal/components/InputLabel.tsx +++ b/packages/react/src/internal/components/InputLabel.tsx @@ -1,10 +1,7 @@ -import {clsx} from 'clsx' import React from 'react' import styled from 'styled-components' +import {get} from '../../constants' import sx, {type SxProp} from '../../sx' -import {cssModulesFlag} from '../../FormControl/feature-flags' -import {useFeatureFlag} from '../../FeatureFlags' -import classes from './InputLabel.module.css' type BaseProps = SxProp & { disabled?: boolean @@ -42,7 +39,6 @@ function InputLabel({ className, ...props }: Props) { - const enabled = useFeatureFlag(cssModulesFlag) return ( {required || requiredText ? ( - + {children} {requiredText ?? '*'} @@ -72,13 +62,18 @@ function InputLabel({ ) } +const StyledRequiredText = styled.span` + display: flex; + column-gap: ${get('space.1')}; +` + const StyledLabel = styled.label` align-self: flex-start; display: block; color: var(--fgColor-default); cursor: pointer; font-weight: 600; - font-size: var(--text-body-size-medium); + font-size: ${get('fontSizes.1')}; &:where([data-control-disabled]) { color: var(--fgColor-muted); @@ -101,9 +96,4 @@ const StyledLabel = styled.label` ${sx} ` -const StyledRequiredText = styled.span` - display: flex; - column-gap: var(--base-size-4); -` - export {InputLabel} diff --git a/packages/react/src/internal/components/InputValidation.module.css b/packages/react/src/internal/components/InputValidation.module.css deleted file mode 100644 index 97428fbb395..00000000000 --- a/packages/react/src/internal/components/InputValidation.module.css +++ /dev/null @@ -1,32 +0,0 @@ -.InputValidation { - display: flex; - font-size: var(--text-body-size-small); - font-weight: var(--base-text-weight-semibold); - /* stylelint-disable-next-line primer/colors */ - color: var(--inputValidation-fgColor); - - & :where(a) { - color: currentColor; - text-decoration: underline; - } - - &:where([data-validation-status='success']) { - --inputValidation-fgColor: var(--fgColor-success); - } - - &:where([data-validation-status='error']) { - --inputValidation-fgColor: var(--fgColor-danger); - } -} - -.ValidationIcon { - align-items: center; - display: flex; - margin-inline-end: var(--base-size-4); - min-height: var(--inputValidation-iconSize); -} - -.ValidationText { - /* stylelint-disable-next-line primer/typography */ - line-height: var(--inputValidation-lineHeight); -} diff --git a/packages/react/src/internal/components/InputValidation.tsx b/packages/react/src/internal/components/InputValidation.tsx index d7224c429fa..d23fe867cb5 100644 --- a/packages/react/src/internal/components/InputValidation.tsx +++ b/packages/react/src/internal/components/InputValidation.tsx @@ -1,15 +1,12 @@ import type {IconProps} from '@primer/octicons-react' import {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react' -import {clsx} from 'clsx' import React from 'react' -import styled from 'styled-components' import Text from '../../Text' -import sx from '../../sx' import type {SxProp} from '../../sx' -import {cssModulesFlag} from '../../FormControl/feature-flags' import type {FormValidationStatus} from '../../utils/types/FormValidationStatus' -import {useFeatureFlag} from '../../FeatureFlags' -import classes from './InputValidation.module.css' +import styled from 'styled-components' +import {get} from '../../constants' +import sx from '../../sx' type Props = { id: string @@ -25,7 +22,6 @@ const validationIconMap: Record< } const InputValidation: React.FC> = ({children, id, validationStatus, sx}) => { - const enabled = useFeatureFlag(cssModulesFlag) const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined // TODO: use `text-caption-lineHeight` token as a custom property when it's available @@ -35,19 +31,10 @@ const InputValidation: React.FC> = ({children, id const iconBoxMinHeight = iconSize * captionLineHeight return ( - + {IconComponent ? ( ) : null} - + {children} @@ -73,7 +54,7 @@ const InputValidation: React.FC> = ({children, id const StyledInputValidation = styled(Text)` color: var(--inputValidation-fgColor); display: flex; - font-size: var(--text-body-size-small); + font-size: ${get('fontSizes.0')}; font-weight: 600; & :where(a) { @@ -82,11 +63,11 @@ const StyledInputValidation = styled(Text)` } &:where([data-validation-status='success']) { - --inputValidation-fgColor: var(--fgColor-success); + --inputValidation-fgColor: ${get('colors.success.fg')}; } &:where([data-validation-status='error']) { - --inputValidation-fgColor: var(--fgColor-danger); + --inputValidation-fgColor: ${get('colors.danger.fg')}; } ${sx} @@ -95,7 +76,7 @@ const StyledInputValidation = styled(Text)` const StyledValidationIcon = styled.span` align-items: center; display: flex; - margin-inline-end: var(--base-size-4); + margin-inline-end: ${get('space.1')}; min-height: var(--inputValidation-iconSize); ` From 23d77f8e6777ca4438b25b48f1fd4a060c7e8438 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Mon, 6 Jan 2025 12:17:26 -0500 Subject: [PATCH 05/19] =?UTF-8?q?Revert=20"chore(Skeleton):=20Remove=20the?= =?UTF-8?q?=20CSS=20module=20feature=20flag=20from=20Skeleton=20(#5?= =?UTF-8?q?=E2=80=A6"=20(#5496)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 9bd2f79070a2cd30fa99c0641e7acc0ed34c166b. --- .changeset/thirty-wasps-sleep.md | 5 -- .../src/experimental/Skeleton/FeatureFlag.tsx | 1 + .../experimental/Skeleton/SkeletonAvatar.tsx | 50 +++++++++-- .../src/experimental/Skeleton/SkeletonBox.tsx | 90 ++++++++++++------- .../experimental/Skeleton/SkeletonText.tsx | 88 ++++++++++++++++-- 5 files changed, 184 insertions(+), 50 deletions(-) delete mode 100644 .changeset/thirty-wasps-sleep.md create mode 100644 packages/react/src/experimental/Skeleton/FeatureFlag.tsx diff --git a/.changeset/thirty-wasps-sleep.md b/.changeset/thirty-wasps-sleep.md deleted file mode 100644 index 582d351b8f8..00000000000 --- a/.changeset/thirty-wasps-sleep.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": minor ---- - -Remove the CSS module feature flag from Skeleton diff --git a/packages/react/src/experimental/Skeleton/FeatureFlag.tsx b/packages/react/src/experimental/Skeleton/FeatureFlag.tsx new file mode 100644 index 00000000000..267b7ef5906 --- /dev/null +++ b/packages/react/src/experimental/Skeleton/FeatureFlag.tsx @@ -0,0 +1 @@ +export const CSS_MODULE_FLAG = 'primer_react_css_modules_ga' diff --git a/packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx b/packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx index 635b5e4bf39..5221154a39c 100644 --- a/packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx +++ b/packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx @@ -1,17 +1,36 @@ import React, {type CSSProperties} from 'react' +import {getBreakpointDeclarations} from '../../utils/getBreakpointDeclarations' +import {get} from '../../constants' import {isResponsiveValue} from '../../hooks/useResponsiveValue' import type {AvatarProps} from '../../Avatar' import {DEFAULT_AVATAR_SIZE} from '../../Avatar/Avatar' import {SkeletonBox} from './SkeletonBox' import classes from './SkeletonAvatar.module.css' import {clsx} from 'clsx' +import {useFeatureFlag} from '../../FeatureFlags' import {merge} from '../../sx' +import {CSS_MODULE_FLAG} from './FeatureFlag' export type SkeletonAvatarProps = Pick & { /** Class name for custom styling */ className?: string } & Omit, 'size'> +const avatarSkeletonStyles = { + '&[data-component="SkeletonAvatar"]': { + borderRadius: '50%', + boxShadow: `0 0 0 1px ${get('colors.avatar.border')}`, + display: 'inline-block', + lineHeight: get('lineHeights.condensedUltra'), + height: 'var(--avatar-size)', + width: 'var(--avatar-size)', + }, + + '&[data-square]': { + borderRadius: 'clamp(4px, var(--avatar-size) - 24px, 6px)', + }, +} + export const SkeletonAvatar: React.FC = ({ size = DEFAULT_AVATAR_SIZE, square, @@ -21,23 +40,40 @@ export const SkeletonAvatar: React.FC = ({ }) => { const responsive = isResponsiveValue(size) const cssSizeVars = {} as Record + const enabled = useFeatureFlag(CSS_MODULE_FLAG) + const avatarSx = responsive + ? { + ...getBreakpointDeclarations( + size, + '--avatar-size' as keyof React.CSSProperties, + value => `${value || DEFAULT_AVATAR_SIZE}px`, + ), + ...avatarSkeletonStyles, + } + : { + '--avatar-size': `${size}px`, + ...avatarSkeletonStyles, + } - if (responsive) { - for (const [key, value] of Object.entries(size)) { - cssSizeVars[`--avatarSize-${key}`] = `${value}px` + if (enabled) { + if (responsive) { + for (const [key, value] of Object.entries(size)) { + cssSizeVars[`--avatarSize-${key}`] = `${value}px` + } + } else { + cssSizeVars['--avatarSize-regular'] = `${size}px` } - } else { - cssSizeVars['--avatarSize-regular'] = `${size}px` } return ( ) } diff --git a/packages/react/src/experimental/Skeleton/SkeletonBox.tsx b/packages/react/src/experimental/Skeleton/SkeletonBox.tsx index 861dd5d56e3..8a8bcaea7b1 100644 --- a/packages/react/src/experimental/Skeleton/SkeletonBox.tsx +++ b/packages/react/src/experimental/Skeleton/SkeletonBox.tsx @@ -1,10 +1,13 @@ import React from 'react' -import {merge, type SxProp} from '../../sx' -import {type CSSProperties} from 'react' +import styled, {keyframes} from 'styled-components' +import sx, {merge, type SxProp} from '../../sx' +import {get} from '../../constants' +import {type CSSProperties, type HTMLProps} from 'react' +import {toggleStyledComponent} from '../../internal/utils/toggleStyledComponent' import {clsx} from 'clsx' import classes from './SkeletonBox.module.css' -import {defaultSxProp} from '../../utils/defaultSxProp' -import Box from '../../Box' +import {useFeatureFlag} from '../../FeatureFlags' +import {CSS_MODULE_FLAG} from './FeatureFlag' type SkeletonBoxProps = { /** Height of the skeleton "box". Accepts any valid CSS `height` value. */ @@ -14,39 +17,62 @@ type SkeletonBoxProps = { /** The className of the skeleton box */ className?: string } & SxProp & - React.ComponentPropsWithoutRef<'div'> + HTMLProps + +const shimmer = keyframes` + from { mask-position: 200%; } + to { mask-position: 0%; } +` + +const StyledSkeletonBox = toggleStyledComponent( + CSS_MODULE_FLAG, + 'div', + styled.div` + animation: ${shimmer}; + display: block; + background-color: var(--bgColor-muted, ${get('colors.canvas.subtle')}); + border-radius: 3px; + height: ${props => props.height || '1rem'}; + width: ${props => props.width}; + + @media (prefers-reduced-motion: no-preference) { + mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%); + mask-size: 200%; + animation: ${shimmer}; + animation-duration: 1s; + animation-iteration-count: infinite; + } + + @media (forced-colors: active) { + outline: 1px solid transparent; + outline-offset: -1px; + } + + ${sx}; + `, +) export const SkeletonBox = React.forwardRef(function SkeletonBox( - {height, width, className, sx: sxProp = defaultSxProp, style, ...props}, + {height, width, className, style, ...props}, ref, ) { - if (sxProp !== defaultSxProp) { - return ( - - ) - } - + const enabled = useFeatureFlag(CSS_MODULE_FLAG) return ( -
diff --git a/packages/react/src/experimental/Skeleton/SkeletonText.tsx b/packages/react/src/experimental/Skeleton/SkeletonText.tsx index 5babb759611..08c2680363f 100644 --- a/packages/react/src/experimental/Skeleton/SkeletonText.tsx +++ b/packages/react/src/experimental/Skeleton/SkeletonText.tsx @@ -1,8 +1,11 @@ import React, {type CSSProperties, type HTMLProps} from 'react' +import Box from '../../Box' import {SkeletonBox} from './SkeletonBox' import classes from './SkeletonText.module.css' +import {useFeatureFlag} from '../../FeatureFlags' import {clsx} from 'clsx' import {merge} from '../../sx' +import {CSS_MODULE_FLAG} from './FeatureFlag' type SkeletonTextProps = { /** Size of the text that the skeleton is replacing. */ @@ -15,6 +18,61 @@ type SkeletonTextProps = { className?: string } & Omit, 'size'> +const skeletonTextStyles = { + '&[data-component="SkeletonText"]': { + '--font-size': 'var(--text-body-size-medium, 0.875rem)', + '--line-height': 'var(--text-body-lineHeight-medium, 1.4285)', + '--leading': 'calc(var(--font-size) * var(--line-height) - var(--font-size))', + borderRadius: 'var(--borderRadius-small, 0.1875rem)', + height: 'var(--font-size)', + marginBlock: 'calc(var(--leading) / 2)', + }, + '&[data-in-multiline="true"]': { + marginBlockEnd: 'calc(var(--leading) * 2)', + }, + '&[data-in-multiline="true"]:last-child': { + maxWidth: '65%', + minWidth: '50px', + marginBottom: 0, + }, + '@supports (margin-block: mod(1px, 1px))': { + '&[data-component="SkeletonText"]': { + '--leading': 'mod(var(--font-size) * var(--line-height), var(--font-size))', + }, + }, + '&[data-text-skeleton-size="display"], &[data-text-skeleton-size="titleLarge"]': { + borderRadius: 'var(--borderRadius-medium, 0.375rem)', + }, + '&[data-text-skeleton-size="display"]': { + '--font-size': 'var(--text-display-size, 2.5rem)', + '--line-height': 'var(--text-display-lineHeight, 1.4)', + }, + '&[data-text-skeleton-size="titleLarge"]': { + '--font-size': 'var(--text-title-size-large, 2.5rem)', + '--line-height': 'var(--text-title-lineHeight-large, 1.5)', + }, + '&[data-text-skeleton-size="titleMedium"]': { + '--font-size': 'var(--text-title-size-medium, 1.25rem)', + '--line-height': 'var(--text-title-lineHeight-medium, 1.6)', + }, + '&[data-text-skeleton-size="titleSmall"]': { + '--font-size': 'var(--text-title-size-small, 1rem)', + '--line-height': 'var(--text-title-lineHeight-small, 1.5)', + }, + '&[data-text-skeleton-size="subtitle"]': { + '--font-size': 'var(--text-subtitle-size, 1.25rem)', + '--line-height': 'var(--text-subtitle-lineHeight, 1.6)', + }, + '&[data-text-skeleton-size="bodyLarge"]': { + '--font-size': 'var(--text-body-size-large, 1rem)', + '--line-height': 'var(--text-body-lineHeight-large, 1.5)', + }, + '&[data-text-skeleton-size="bodySmall"]': { + '--font-size': 'var(--text-body-size-small, 0.75rem)', + '--line-height': 'var(--text-body-lineHeight-small, 1.6666)', + }, +} + export const SkeletonText: React.FC = ({ lines = 1, maxWidth, @@ -23,22 +81,39 @@ export const SkeletonText: React.FC = ({ style, ...rest }) => { + const enabled = useFeatureFlag(CSS_MODULE_FLAG) + if (lines < 2) { return ( ) } else { return ( -
{Array.from({length: lines}, (_, index) => ( = ({ data-component="SkeletonText" data-in-multiline="true" data-text-skeleton-size={size} - className={clsx(className, classes.SkeletonText)} + sx={enabled ? {} : skeletonTextStyles} + className={clsx(className, {[classes.SkeletonText]: enabled})} {...rest} /> ))} -
+ ) } } From 586083a229ef3f7e2e57a43f04033429777a7131 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Mon, 6 Jan 2025 12:32:20 -0500 Subject: [PATCH 06/19] Revert "chore(Select): Remove CSS modules feature flag from Select (#5464)" (#5497) This reverts commit d43f27f7f7b63ec6dfe8b6efe62c3d9fd6e7386b. --- .changeset/violet-tables-eat.md | 5 -- packages/react/src/Select/Select.tsx | 125 ++++++++++++++++++++++++--- 2 files changed, 113 insertions(+), 17 deletions(-) delete mode 100644 .changeset/violet-tables-eat.md diff --git a/.changeset/violet-tables-eat.md b/.changeset/violet-tables-eat.md deleted file mode 100644 index ac644ed6b67..00000000000 --- a/.changeset/violet-tables-eat.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": minor ---- - -Remove CSS modules feature flag from Select diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx index 75d49c79be2..98faa357844 100644 --- a/packages/react/src/Select/Select.tsx +++ b/packages/react/src/Select/Select.tsx @@ -1,18 +1,69 @@ import React from 'react' +import styled from 'styled-components' import {clsx} from 'clsx' import type {StyledWrapperProps} from '../internal/components/TextInputWrapper' import TextInputWrapper from '../internal/components/TextInputWrapper' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import {useFeatureFlag} from '../FeatureFlags' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import classes from './Select.module.css' export type SelectProps = Omit< - Omit, 'size'> & Omit, + Omit, 'size'> & Omit, 'multiple' | 'hasLeadingVisual' | 'hasTrailingVisual' | 'as' > & { placeholder?: string } +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga' + +const arrowRightOffset = '4px' + +const StyledSelect = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'select', + styled.select` + appearance: none; + border-radius: inherit; + border: 0; + color: currentColor; + font-size: inherit; + outline: none; + width: 100%; + + /* Firefox hacks: */ + /* 1. Makes Firefox's native dropdown menu's background match the theme. + + background-color should be 'transparent', but Firefox uses the background-color on + so the background color doesn't hide the focus outline created with an inset box-shadow. + */ + background-color: inherit; + margin-top: 1px; + margin-left: 1px; + margin-bottom: 1px; + + /* 2. Prevents visible overlap of partially transparent background colors. + + 'colors.input.disabledBg' happens to be partially transparent in light mode, so we use a + transparent background-color on a disabled 's background color white when setting 'background-color: transparent;' */ + @media screen and (forced-colors: active) { + &:disabled { + background-color: -moz-combobox; + } + } + `, +) + const ArrowIndicatorSVG: React.FC> = ({className}) => { return ( > ) } +const StyledArrowIndicatorSVG = styled(ArrowIndicatorSVG)` + pointer-events: none; + position: absolute; + right: ${arrowRightOffset}; + top: 50%; + transform: translateY(-50%); +` + const ArrowIndicator: React.FC<{className?: string}> = ({className}) => { - return + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + if (enabled) { + return + } + + return } const Select = React.forwardRef( - ( - {block, children, contrast, disabled, placeholder, size, required, validationStatus, sx, ...rest}: SelectProps, - ref, - ) => { + ({block, children, contrast, disabled, placeholder, size, required, validationStatus, ...rest}: SelectProps, ref) => { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + if (enabled) { + return ( + + + {placeholder && ( + + )} + {children} + + + + ) + } + return ( - - + + ) }, From d43c6c93226e9f35e68ef160566def2fac376326 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Mon, 6 Jan 2025 12:38:03 -0500 Subject: [PATCH 07/19] Revert "chore(Header): Remove CSS modules feature flag from Header (#5460)" (#5495) This reverts commit 6d70d1bed593c73cb92c1185dd9709ae5da5d602. --- .changeset/shaggy-comics-whisper.md | 5 - packages/react/src/Header/Header.tsx | 150 +++++++++++++------ packages/react/src/__tests__/Header.test.tsx | 2 +- 3 files changed, 105 insertions(+), 52 deletions(-) delete mode 100644 .changeset/shaggy-comics-whisper.md diff --git a/.changeset/shaggy-comics-whisper.md b/.changeset/shaggy-comics-whisper.md deleted file mode 100644 index a665f985634..00000000000 --- a/.changeset/shaggy-comics-whisper.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": minor ---- - -Remove CSS modules feature flag from Header diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx index 0d5c2c6efc8..33c7a6b7b0d 100644 --- a/packages/react/src/Header/Header.tsx +++ b/packages/react/src/Header/Header.tsx @@ -1,81 +1,139 @@ import type {Location, Pathname} from 'history' +import styled, {css} from 'styled-components' +import {get} from '../constants' import type {SxProp} from '../sx' +import sx from '../sx' +import type {ComponentProps} from '../utils/types' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import {useFeatureFlag} from '../FeatureFlags' import React from 'react' import {clsx} from 'clsx' import classes from './Header.module.css' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' -import {defaultSxProp} from '../utils/defaultSxProp' -import Box from '../Box' -export type HeaderProps = React.ComponentProps<'header'> & SxProp & {as?: React.ElementType} -export type HeaderItemProps = React.ComponentProps<'div'> & SxProp & {full?: boolean} -export type HeaderLinkProps = React.ComponentProps<'a'> & SxProp & {to?: Location | Pathname; as?: React.ElementType} +type StyledHeaderProps = React.ComponentProps<'header'> & SxProp +type StyledHeaderItemProps = React.ComponentProps<'div'> & SxProp & {full?: boolean} +type StyledHeaderLinkProps = React.ComponentProps<'a'> & SxProp & {to?: Location | Pathname} -const Header = React.forwardRef(function Header( - {children, className, sx: sxProp = defaultSxProp, as = 'header', ...rest}, +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga' + +const StyledHeader = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'header', + styled.header` + z-index: 32; + display: flex; + padding: ${get('space.3')}; + font-size: ${get('fontSizes.1')}; + line-height: ${get('lineHeights.default')}; + color: ${get('colors.header.text')}; + background-color: ${get('colors.header.bg')}; + align-items: center; + flex-wrap: nowrap; + overflow: auto; + + ${sx}; + `, +) + +const Header = React.forwardRef(function Header( + {children, className, ...rest}, forwardRef, ) { - if (sxProp !== defaultSxProp || as !== 'header') { - return ( - - {children} - - ) - } + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) return ( -
+ {children} -
+ ) -}) as PolymorphicForwardRefComponent<'header', HeaderProps> +}) as PolymorphicForwardRefComponent<'header', StyledHeaderProps> Header.displayName = 'Header' -const HeaderItem = React.forwardRef(function HeaderItem( - {children, className, sx: sxProp = defaultSxProp, full, ...rest}, +const StyledHeaderItem = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'div', + styled.div` + display: flex; + margin-right: ${get('space.3')}; + align-self: stretch; + align-items: center; + flex-wrap: nowrap; + + ${({full}) => + full && + css` + flex: auto; + `}; + + ${sx}; + `, +) + +const HeaderItem = React.forwardRef(function HeaderItem( + {children, className, ...rest}, forwardRef, ) { - if (sxProp !== defaultSxProp) { - return ( - - {children} - - ) - } + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) return ( -
+ {children} -
+ ) }) HeaderItem.displayName = 'Header.Item' -const HeaderLink = React.forwardRef(function HeaderLink( - {children, className, sx: sxProp = defaultSxProp, as = 'a', ...rest}, +const StyledHeaderLink = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'a', + styled.a.attrs(({to}) => { + const isReactRouter = typeof to === 'string' + if (isReactRouter) { + // according to their docs, NavLink supports aria-current: + // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string + return {'aria-current': 'page'} + } else { + return {} + } + })` + font-weight: ${get('fontWeights.bold')}; + color: ${get('colors.header.logo')}; + white-space: nowrap; + cursor: pointer; + text-decoration: none; + display: flex; + align-items: center; + + &:hover, + &:focus { + color: ${get('colors.header.text')}; + } + + ${sx}; + `, +) + +const HeaderLink = React.forwardRef(function HeaderLink( + {children, className, ...rest}, forwardRef, ) { - if (sxProp !== defaultSxProp || as !== 'a') { - return ( - - {children} - - ) - } + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) return ( - + {children} - + ) }) HeaderLink.displayName = 'Header.Link' +export type HeaderProps = ComponentProps +export type HeaderLinkProps = ComponentProps +export type HeaderItemProps = ComponentProps export default Object.assign(Header, {Link: HeaderLink, Item: HeaderItem}) diff --git a/packages/react/src/__tests__/Header.test.tsx b/packages/react/src/__tests__/Header.test.tsx index 02673ed76da..e084cc9e8c6 100644 --- a/packages/react/src/__tests__/Header.test.tsx +++ b/packages/react/src/__tests__/Header.test.tsx @@ -13,7 +13,7 @@ describe('Header', () => { }) describe('Header.Item', () => { - behavesAsComponent({Component: Header.Item, options: {skipAs: true}}) + behavesAsComponent({Component: Header.Item}) it('accepts and applies className', () => { expect(render().props.className).toContain('primer') From ee16256db2b36752e68be97210d0ab0defcd8440 Mon Sep 17 00:00:00 2001 From: "primer[bot]" <119360173+primer[bot]@users.noreply.github.com> Date: Mon, 6 Jan 2025 23:18:41 -0500 Subject: [PATCH 08/19] Version Packages (#5439) Co-authored-by: github-actions[bot] --- .changeset/brave-penguins-clap.md | 5 ---- .changeset/clean-camels-train.md | 5 ---- .changeset/dirty-nails-applaud.md | 5 ---- .changeset/eight-donuts-enjoy.md | 5 ---- .changeset/eight-guests-punch.md | 5 ---- .changeset/few-coins-kick.md | 5 ---- .changeset/forty-doors-visit.md | 5 ---- .changeset/hungry-mugs-stare.md | 5 ---- .changeset/kind-phones-drop.md | 5 ---- .changeset/many-pans-tickle.md | 5 ---- .changeset/plenty-tools-count.md | 5 ---- .changeset/polite-books-sneeze.md | 5 ---- .changeset/proud-phones-repeat.md | 5 ---- .changeset/purple-pants-sit.md | 5 ---- .changeset/selfish-flowers-approve.md | 5 ---- .changeset/shaggy-geese-smile.md | 5 ---- .changeset/shiny-horses-promise.md | 5 ---- .changeset/thirty-apples-wave.md | 5 ---- examples/app-router/package.json | 2 +- examples/codesandbox/package.json | 2 +- examples/theming/package.json | 2 +- packages/react/CHANGELOG.md | 42 +++++++++++++++++++++++++++ packages/react/package.json | 2 +- 23 files changed, 46 insertions(+), 94 deletions(-) delete mode 100644 .changeset/brave-penguins-clap.md delete mode 100644 .changeset/clean-camels-train.md delete mode 100644 .changeset/dirty-nails-applaud.md delete mode 100644 .changeset/eight-donuts-enjoy.md delete mode 100644 .changeset/eight-guests-punch.md delete mode 100644 .changeset/few-coins-kick.md delete mode 100644 .changeset/forty-doors-visit.md delete mode 100644 .changeset/hungry-mugs-stare.md delete mode 100644 .changeset/kind-phones-drop.md delete mode 100644 .changeset/many-pans-tickle.md delete mode 100644 .changeset/plenty-tools-count.md delete mode 100644 .changeset/polite-books-sneeze.md delete mode 100644 .changeset/proud-phones-repeat.md delete mode 100644 .changeset/purple-pants-sit.md delete mode 100644 .changeset/selfish-flowers-approve.md delete mode 100644 .changeset/shaggy-geese-smile.md delete mode 100644 .changeset/shiny-horses-promise.md delete mode 100644 .changeset/thirty-apples-wave.md diff --git a/.changeset/brave-penguins-clap.md b/.changeset/brave-penguins-clap.md deleted file mode 100644 index 5b111e9c7e8..00000000000 --- a/.changeset/brave-penguins-clap.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": minor ---- - -Corrects horizontal padding of ` + + + +) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx index e3cc3e0632a..0869e1e1b92 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx @@ -1,109 +1,25 @@ -import styled from 'styled-components' -import React from 'react' -import sx from '../sx' -import type {ComponentProps} from '../utils/types' +import React, {type PropsWithChildren} from 'react' +import {type SxProp} from '../sx' import classes from './ButtonGroup.module.css' -import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' import {clsx} from 'clsx' -import {useFeatureFlag} from '../FeatureFlags' import {FocusKeys, useFocusZone} from '../hooks/useFocusZone' import {useProvidedRefOrCreate} from '../hooks' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' +import Box from '../Box' +import {defaultSxProp} from '../utils/defaultSxProp' -const StyledButtonGroup = toggleStyledComponent( - 'primer_react_css_modules_ga', - 'div', - styled.div` - display: inline-flex; - vertical-align: middle; - isolation: isolate; - - & > *:not([data-loading-wrapper]) { - /* stylelint-disable-next-line primer/spacing */ - margin-inline-end: -1px; - position: relative; - - /* reset border-radius */ - button, - a { - border-radius: 0; - } - - &:first-child { - button, - a { - border-top-left-radius: var(--borderRadius-medium); - border-bottom-left-radius: var(--borderRadius-medium); - } - } - - &:last-child { - button, - a { - border-top-right-radius: var(--borderRadius-medium); - border-bottom-right-radius: var(--borderRadius-medium); - } - } - - &:focus, - &:active, - &:hover { - z-index: 1; - } - } - - /* this is a workaround until portal based tooltips are fully removed from dotcom */ - &:has(div:last-child:empty) { - button, - a { - border-radius: var(--borderRadius-medium); - } - } - - /* if child is loading button */ - & > *[data-loading-wrapper] { - /* stylelint-disable-next-line primer/spacing */ - margin-inline-end: -1px; - position: relative; - /* reset border-radius */ - button, - a { - border-radius: 0; - } - - &:focus, - &:active, - &:hover { - z-index: 1; - } - &:first-child { - button, - a { - border-top-left-radius: var(--borderRadius-medium); - border-bottom-left-radius: var(--borderRadius-medium); - } - } - - &:last-child { - button, - a { - border-top-right-radius: var(--borderRadius-medium); - border-bottom-right-radius: var(--borderRadius-medium); - } - } - } - - ${sx}; - `, -) - -export type ButtonGroupProps = ComponentProps +export type ButtonGroupProps = { + /** The role of the group */ + role?: string + /** className passed in for styling */ + className?: string +} & PropsWithChildren & + SxProp const ButtonGroup = React.forwardRef(function ButtonGroup( - {children, className, role, ...rest}, + {children, className, role, sx, ...rest}, forwardRef, ) { - const enabled = useFeatureFlag('primer_react_css_modules_ga') const buttons = React.Children.map(children, (child, index) =>
{child}
) const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject) @@ -114,17 +30,18 @@ const ButtonGroup = React.forwardRef(function But focusOutBehavior: 'wrap', }) + if (sx !== defaultSxProp) { + return ( + + {buttons} + + ) + } + return ( - +
{buttons} - +
) }) as PolymorphicForwardRefComponent<'div', ButtonGroupProps> From b55025cf2bf7f349cecb856449508bf822507c6d Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 8 Jan 2025 15:32:03 -0800 Subject: [PATCH 16/19] chore(Radio): Remove CSS modules feature flag from Radio (#5463) * Remove CSS modules feature flag from Radio * Skip As test * Create two-apples-juggle.md --- .changeset/two-apples-juggle.md | 5 ++ packages/react/src/Radio/Radio.tsx | 80 ++++++++------------- packages/react/src/__tests__/Radio.test.tsx | 2 +- 3 files changed, 35 insertions(+), 52 deletions(-) create mode 100644 .changeset/two-apples-juggle.md diff --git a/.changeset/two-apples-juggle.md b/.changeset/two-apples-juggle.md new file mode 100644 index 00000000000..dfa6dca0054 --- /dev/null +++ b/.changeset/two-apples-juggle.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Remove CSS modules feature flag from Radio diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx index 33edae3fd17..be740965bc7 100644 --- a/packages/react/src/Radio/Radio.tsx +++ b/packages/react/src/Radio/Radio.tsx @@ -1,18 +1,13 @@ -import styled from 'styled-components' import type {ChangeEventHandler, InputHTMLAttributes, ReactElement} from 'react' import React, {useContext} from 'react' import type {SxProp} from '../sx' -import sx from '../sx' import type {FormValidationStatus} from '../utils/types/FormValidationStatus' import {RadioGroupContext} from '../RadioGroup/RadioGroup' -import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles' -import {get} from '../constants' -import {sharedCheckboxAndRadioStyles} from '../internal/utils/sharedCheckboxAndRadioStyles' -import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' -import {useFeatureFlag} from '../FeatureFlags' import {clsx} from 'clsx' import classes from './Radio.module.css' import sharedClasses from '../Checkbox/shared.module.css' +import {defaultSxProp} from '../utils/defaultSxProp' +import Box from '../Box' export type RadioProps = { /** @@ -47,42 +42,6 @@ export type RadioProps = { } & InputHTMLAttributes & SxProp -const StyledRadio = toggleStyledComponent( - 'primer_react_css_modules_ga', - 'input', - styled.input` - ${sharedCheckboxAndRadioStyles}; - border-radius: var(--borderRadius-full, 100vh); - transition: - background-color, - border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */ - - &:checked { - border-width: var(--base-size-4, 4px); - border-color: var( - --control-checked-bgColor-rest, - ${get('colors.accent.fg')} - ); /* using bgColor here to avoid a border change in dark high contrast */ - background-color: var(--control-checked-fgColor-rest, ${get('colors.fg.onEmphasis')}); - - &:disabled { - cursor: not-allowed; - border-color: ${get('colors.fg.muted')}; - background-color: ${get('colors.fg.muted')}; - } - } - - ${getGlobalFocusStyles()}; - - @media (forced-colors: active) { - background-color: canvastext; - border-color: canvastext; - } - - ${sx} - `, -) - /** * An accessible, native radio component for selecting one option from a list. */ @@ -93,7 +52,7 @@ const Radio = React.forwardRef( disabled, name: nameProp, onChange, - sx: sxProp, + sx: sxProp = defaultSxProp, required, validationStatus, value, @@ -103,7 +62,6 @@ const Radio = React.forwardRef( ref, ): ReactElement => { const radioGroupContext = useContext(RadioGroupContext) - const enabled = useFeatureFlag('primer_react_css_modules_ga') const handleOnChange: ChangeEventHandler = e => { radioGroupContext?.onChange && radioGroupContext.onChange(e) onChange && onChange(e) @@ -117,8 +75,32 @@ const Radio = React.forwardRef( ) } + if (sxProp !== defaultSxProp) { + return ( + // eslint-disable-next-line github/a11y-role-supports-aria-props + + ) + } + return ( - ( required={required} aria-required={required ? 'true' : 'false'} aria-invalid={validationStatus === 'error' ? 'true' : 'false'} - sx={sxProp} onChange={handleOnChange} - className={clsx(className, { - [sharedClasses.Input]: enabled, - [classes.Radio]: enabled, - })} + className={clsx(className, sharedClasses.Input, classes.Radio)} {...rest} /> ) diff --git a/packages/react/src/__tests__/Radio.test.tsx b/packages/react/src/__tests__/Radio.test.tsx index 7fdad2d5e83..310329b71b8 100644 --- a/packages/react/src/__tests__/Radio.test.tsx +++ b/packages/react/src/__tests__/Radio.test.tsx @@ -14,7 +14,7 @@ describe('Radio', () => { jest.resetAllMocks() }) - behavesAsComponent({Component: Radio, toRender: () => }) + behavesAsComponent({options: {skipAs: true}, Component: Radio, toRender: () => }) checkExports('Radio', { default: Radio, From e1aeb1effbd19e87f44951ce7459bc2031b4a267 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 9 Jan 2025 10:23:55 -0600 Subject: [PATCH 17/19] chore(deps): update storybook dependencies together (#5507) * chore(deps): update storybook dependencies together * chore(dependabot): add storybook update group --- .github/dependabot.yml | 14 +- package-lock.json | 1526 +++++++---------------------------- packages/react/package.json | 20 +- 3 files changed, 305 insertions(+), 1255 deletions(-) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 97e16d1b9f5..82776e83a3d 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -13,7 +13,19 @@ updates: labels: - 'dependencies' - 'skip changeset' - + - package-ecosystem: 'npm' + directory: '/' + schedule: + interval: 'weekly' + versioning-strategy: increase + labels: + - 'dependencies' + - 'skip changeset' + groups: + storybook: + patterns: + - '@storybook/*' + - 'storybook' - package-ecosystem: 'github-actions' directory: '/' schedule: diff --git a/package-lock.json b/package-lock.json index f2fa4b776f7..b4d8f582483 100644 --- a/package-lock.json +++ b/package-lock.json @@ -62,7 +62,7 @@ "name": "example-app-router", "version": "0.0.0", "dependencies": { - "@primer/react": "37.8.0", + "@primer/react": "37.9.0", "next": "^14.2.15", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -81,7 +81,7 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@primer/react": "37.8.0", + "@primer/react": "37.9.0", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^7.11.0", @@ -100,7 +100,7 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "^19.9.0", - "@primer/react": "37.8.0", + "@primer/react": "37.9.0", "clsx": "^1.2.1", "next": "^14.2.15", "react": "^18.3.1", @@ -2283,11 +2283,6 @@ "node": ">=6.9.0" } }, - "node_modules/@base2/pretty-print-object": { - "version": "1.0.1", - "dev": true, - "license": "BSD-2-Clause" - }, "node_modules/@bcoe/v8-coverage": { "version": "0.2.3", "dev": true, @@ -5201,18 +5196,18 @@ } }, "node_modules/@joshwooding/vite-plugin-react-docgen-typescript": { - "version": "0.3.1", + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/@joshwooding/vite-plugin-react-docgen-typescript/-/vite-plugin-react-docgen-typescript-0.4.2.tgz", + "integrity": "sha512-feQ+ntr+8hbVudnsTUapiMN9q8T90XA1d5jn9QzY09sNoj4iD9wi0PY1vsBFTda4ZjEaxRK9S81oarR2nj7TFQ==", "dev": true, "license": "MIT", "dependencies": { - "glob": "^7.2.0", - "glob-promise": "^4.2.0", "magic-string": "^0.27.0", "react-docgen-typescript": "^2.2.2" }, "peerDependencies": { "typescript": ">= 4.3.x", - "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" }, "peerDependenciesMeta": { "typescript": { @@ -5222,6 +5217,8 @@ }, "node_modules/@joshwooding/vite-plugin-react-docgen-typescript/node_modules/magic-string": { "version": "0.27.0", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz", + "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==", "dev": true, "license": "MIT", "dependencies": { @@ -6883,11 +6880,13 @@ } }, "node_modules/@storybook/addon-a11y": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-8.4.7.tgz", + "integrity": "sha512-GpUvXp6n25U1ZSv+hmDC+05BEqxWdlWjQTb/GaboRXZQeMBlze6zckpVb66spjmmtQAIISo0eZxX1+mGcVR7lA==", "dev": true, "license": "MIT", "dependencies": { - "@storybook/addon-highlight": "8.3.0", + "@storybook/addon-highlight": "8.4.7", "axe-core": "^4.2.0" }, "funding": { @@ -6895,7 +6894,7 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.0" + "storybook": "^8.4.7" } }, "node_modules/@storybook/addon-actions": { @@ -6932,7 +6931,9 @@ } }, "node_modules/@storybook/addon-backgrounds": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.4.7.tgz", + "integrity": "sha512-I4/aErqtFiazcoWyKafOAm3bLpxTj6eQuH/woSbk1Yx+EzN+Dbrgx1Updy8//bsNtKkcrXETITreqHC+a57DHQ==", "dev": true, "license": "MIT", "dependencies": { @@ -6945,17 +6946,18 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.0" + "storybook": "^8.4.7" } }, "node_modules/@storybook/addon-controls": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.4.7.tgz", + "integrity": "sha512-377uo5IsJgXLnQLJixa47+11V+7Wn9KcDEw+96aGCBCfLbWNH8S08tJHHnSu+jXg9zoqCAC23MetntVp6LetHA==", "dev": true, "license": "MIT", "dependencies": { "@storybook/global": "^5.0.0", "dequal": "^2.0.2", - "lodash": "^4.17.21", "ts-dedent": "^2.0.0" }, "funding": { @@ -6963,25 +6965,22 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.0" + "storybook": "^8.4.7" } }, "node_modules/@storybook/addon-docs": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.4.7.tgz", + "integrity": "sha512-NwWaiTDT5puCBSUOVuf6ME7Zsbwz7Y79WF5tMZBx/sLQ60vpmJVQsap6NSjvK1Ravhc21EsIXqemAcBjAWu80w==", "dev": true, "license": "MIT", "dependencies": { "@mdx-js/react": "^3.0.0", - "@storybook/blocks": "8.3.0", - "@storybook/csf-plugin": "8.3.0", - "@storybook/global": "^5.0.0", - "@storybook/react-dom-shim": "8.3.0", - "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "fs-extra": "^11.1.0", + "@storybook/blocks": "8.4.7", + "@storybook/csf-plugin": "8.4.7", + "@storybook/react-dom-shim": "8.4.7", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "rehype-external-links": "^3.0.0", - "rehype-slug": "^6.0.0", "ts-dedent": "^2.0.0" }, "funding": { @@ -6989,11 +6988,13 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.0" + "storybook": "^8.4.7" } }, "node_modules/@storybook/addon-docs/node_modules/@mdx-js/react": { - "version": "3.0.1", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz", + "integrity": "sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==", "dev": true, "license": "MIT", "dependencies": { @@ -7008,52 +7009,22 @@ "react": ">=16" } }, - "node_modules/@storybook/addon-docs/node_modules/fs-extra": { - "version": "11.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "graceful-fs": "^4.2.0", - "jsonfile": "^6.0.1", - "universalify": "^2.0.0" - }, - "engines": { - "node": ">=14.14" - } - }, - "node_modules/@storybook/addon-docs/node_modules/jsonfile": { - "version": "6.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "universalify": "^2.0.0" - }, - "optionalDependencies": { - "graceful-fs": "^4.1.6" - } - }, - "node_modules/@storybook/addon-docs/node_modules/universalify": { - "version": "2.0.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 10.0.0" - } - }, "node_modules/@storybook/addon-essentials": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.4.7.tgz", + "integrity": "sha512-+BtZHCBrYtQKILtejKxh0CDRGIgTl9PumfBOKRaihYb4FX1IjSAxoV/oo/IfEjlkF5f87vouShWsRa8EUauFDw==", "dev": true, "license": "MIT", "dependencies": { - "@storybook/addon-actions": "8.3.0", - "@storybook/addon-backgrounds": "8.3.0", - "@storybook/addon-controls": "8.3.0", - "@storybook/addon-docs": "8.3.0", - "@storybook/addon-highlight": "8.3.0", - "@storybook/addon-measure": "8.3.0", - "@storybook/addon-outline": "8.3.0", - "@storybook/addon-toolbars": "8.3.0", - "@storybook/addon-viewport": "8.3.0", + "@storybook/addon-actions": "8.4.7", + "@storybook/addon-backgrounds": "8.4.7", + "@storybook/addon-controls": "8.4.7", + "@storybook/addon-docs": "8.4.7", + "@storybook/addon-highlight": "8.4.7", + "@storybook/addon-measure": "8.4.7", + "@storybook/addon-outline": "8.4.7", + "@storybook/addon-toolbars": "8.4.7", + "@storybook/addon-viewport": "8.4.7", "ts-dedent": "^2.0.0" }, "funding": { @@ -7061,46 +7032,13 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.0" - } - }, - "node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-actions": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.3.0.tgz", - "integrity": "sha512-HvAc3fW979JVw8CSKXZMouvgrJ2BNLNWaUB8jNokQb3Us00P6igVKLwg/pBV8GBgDr5Ng4pHYqi/ZH+xzEYFFw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@storybook/global": "^5.0.0", - "@types/uuid": "^9.0.1", - "dequal": "^2.0.2", - "polished": "^4.2.2", - "uuid": "^9.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "storybook": "^8.3.0" - } - }, - "node_modules/@storybook/addon-essentials/node_modules/uuid": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", - "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", - "dev": true, - "funding": [ - "https://github.com/sponsors/broofa", - "https://github.com/sponsors/ctavan" - ], - "license": "MIT", - "bin": { - "uuid": "dist/bin/uuid" + "storybook": "^8.4.7" } }, "node_modules/@storybook/addon-highlight": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.4.7.tgz", + "integrity": "sha512-whQIDBd3PfVwcUCrRXvCUHWClXe9mQ7XkTPCdPo4B/tZ6Z9c6zD8JUHT76ddyHivixFLowMnA8PxMU6kCMAiNw==", "dev": true, "license": "MIT", "dependencies": { @@ -7111,17 +7049,19 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.0" + "storybook": "^8.4.7" } }, "node_modules/@storybook/addon-interactions": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-8.4.7.tgz", + "integrity": "sha512-fnufT3ym8ht3HHUIRVXAH47iOJW/QOb0VSM+j269gDuvyDcY03D1civCu1v+eZLGaXPKJ8vtjr0L8zKQ/4P0JQ==", "dev": true, "license": "MIT", "dependencies": { "@storybook/global": "^5.0.0", - "@storybook/instrumenter": "8.3.0", - "@storybook/test": "8.3.0", + "@storybook/instrumenter": "8.4.7", + "@storybook/test": "8.4.7", "polished": "^4.2.2", "ts-dedent": "^2.2.0" }, @@ -7130,11 +7070,13 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.0" + "storybook": "^8.4.7" } }, "node_modules/@storybook/addon-links": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.4.7.tgz", + "integrity": "sha512-L/1h4dMeMKF+MM0DanN24v5p3faNYbbtOApMgg7SlcBT/tgo3+cAjkgmNpYA8XtKnDezm+T2mTDhB8mmIRZpIQ==", "dev": true, "license": "MIT", "dependencies": { @@ -7148,7 +7090,7 @@ }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", - "storybook": "^8.3.0" + "storybook": "^8.4.7" }, "peerDependenciesMeta": { "react": { @@ -7157,7 +7099,9 @@ } }, "node_modules/@storybook/addon-measure": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.4.7.tgz", + "integrity": "sha512-QfvqYWDSI5F68mKvafEmZic3SMiK7zZM8VA0kTXx55hF/+vx61Mm0HccApUT96xCXIgmwQwDvn9gS4TkX81Dmw==", "dev": true, "license": "MIT", "dependencies": { @@ -7169,11 +7113,13 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.0" + "storybook": "^8.4.7" } }, "node_modules/@storybook/addon-outline": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.4.7.tgz", + "integrity": "sha512-6LYRqUZxSodmAIl8icr585Oi8pmzbZ90aloZJIpve+dBAzo7ydYrSQxxoQEVltXbKf3VeVcrs64ouAYqjisMYA==", "dev": true, "license": "MIT", "dependencies": { @@ -7185,15 +7131,17 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.0" + "storybook": "^8.4.7" } }, "node_modules/@storybook/addon-storysource": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-storysource/-/addon-storysource-8.4.7.tgz", + "integrity": "sha512-ckMSiVf+8V3IVN3lTdzCdToXVoGhZ57pwMv0OpkdVIEn6sqHFHwHrOYiXpF3SXTicwayjylcL1JXTGoBFFDVOQ==", "dev": true, "license": "MIT", "dependencies": { - "@storybook/source-loader": "8.3.0", + "@storybook/source-loader": "8.4.7", "estraverse": "^5.2.0", "tiny-invariant": "^1.3.1" }, @@ -7202,29 +7150,13 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.0" - } - }, - "node_modules/@storybook/addon-storysource/node_modules/@storybook/source-loader": { - "version": "8.3.0", - "dev": true, - "license": "MIT", - "dependencies": { - "@storybook/csf": "^0.1.11", - "estraverse": "^5.2.0", - "lodash": "^4.17.21", - "prettier": "^3.1.1" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "storybook": "^8.3.0" + "storybook": "^8.4.7" } }, "node_modules/@storybook/addon-storysource/node_modules/estraverse": { "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", "dev": true, "license": "BSD-2-Clause", "engines": { @@ -7232,7 +7164,9 @@ } }, "node_modules/@storybook/addon-toolbars": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.4.7.tgz", + "integrity": "sha512-OSfdv5UZs+NdGB+nZmbafGUWimiweJ/56gShlw8Neo/4jOJl1R3rnRqqY7MYx8E4GwoX+i3GF5C3iWFNQqlDcw==", "dev": true, "license": "MIT", "funding": { @@ -7240,11 +7174,13 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.0" + "storybook": "^8.4.7" } }, "node_modules/@storybook/addon-viewport": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.4.7.tgz", + "integrity": "sha512-hvczh/jjuXXcOogih09a663sRDDSATXwbE866al1DXgbDFraYD/LxX/QDb38W9hdjU9+Qhx8VFIcNWoMQns5HQ==", "dev": true, "license": "MIT", "dependencies": { @@ -7255,28 +7191,19 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.0" + "storybook": "^8.4.7" } }, "node_modules/@storybook/blocks": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.4.7.tgz", + "integrity": "sha512-+QH7+JwXXXIyP3fRCxz/7E2VZepAanXJM7G8nbR3wWsqWgrRp4Wra6MvybxAYCxU7aNfJX5c+RW84SNikFpcIA==", "dev": true, "license": "MIT", "dependencies": { "@storybook/csf": "^0.1.11", - "@storybook/global": "^5.0.0", - "@storybook/icons": "^1.2.10", - "@types/lodash": "^4.14.167", - "color-convert": "^2.0.1", - "dequal": "^2.0.2", - "lodash": "^4.17.21", - "markdown-to-jsx": "^7.4.5", - "memoizerific": "^1.11.3", - "polished": "^4.2.2", - "react-colorful": "^5.1.2", - "telejson": "^7.2.0", - "ts-dedent": "^2.0.0", - "util-deprecate": "^1.0.2" + "@storybook/icons": "^1.2.12", + "ts-dedent": "^2.0.0" }, "funding": { "type": "opencollective", @@ -7285,7 +7212,7 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", - "storybook": "^8.3.0" + "storybook": "^8.4.7" }, "peerDependenciesMeta": { "react": { @@ -7296,35 +7223,15 @@ } } }, - "node_modules/@storybook/blocks/node_modules/color-convert": { - "version": "2.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/@storybook/blocks/node_modules/color-name": { - "version": "1.1.4", - "dev": true, - "license": "MIT" - }, "node_modules/@storybook/builder-vite": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.4.7.tgz", + "integrity": "sha512-LovyXG5VM0w7CovI/k56ZZyWCveQFVDl0m7WwetpmMh2mmFJ+uPQ35BBsgTvTfc8RHi+9Q3F58qP1MQSByXi9g==", "dev": true, "license": "MIT", "dependencies": { - "@storybook/csf-plugin": "8.3.0", - "@types/find-cache-dir": "^3.2.1", + "@storybook/csf-plugin": "8.4.7", "browser-assert": "^1.2.1", - "es-module-lexer": "^1.5.0", - "express": "^4.19.2", - "find-cache-dir": "^3.0.0", - "fs-extra": "^11.1.0", - "magic-string": "^0.30.0", "ts-dedent": "^2.0.0" }, "funding": { @@ -7332,54 +7239,8 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "@preact/preset-vite": "*", - "storybook": "^8.3.0", - "typescript": ">= 4.3.x", - "vite": "^4.0.0 || ^5.0.0", - "vite-plugin-glimmerx": "*" - }, - "peerDependenciesMeta": { - "@preact/preset-vite": { - "optional": true - }, - "typescript": { - "optional": true - }, - "vite-plugin-glimmerx": { - "optional": true - } - } - }, - "node_modules/@storybook/builder-vite/node_modules/fs-extra": { - "version": "11.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "graceful-fs": "^4.2.0", - "jsonfile": "^6.0.1", - "universalify": "^2.0.0" - }, - "engines": { - "node": ">=14.14" - } - }, - "node_modules/@storybook/builder-vite/node_modules/jsonfile": { - "version": "6.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "universalify": "^2.0.0" - }, - "optionalDependencies": { - "graceful-fs": "^4.1.6" - } - }, - "node_modules/@storybook/builder-vite/node_modules/universalify": { - "version": "2.0.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 10.0.0" + "storybook": "^8.4.7", + "vite": "^4.0.0 || ^5.0.0 || ^6.0.0" } }, "node_modules/@storybook/channels": { @@ -7416,7 +7277,9 @@ } }, "node_modules/@storybook/components": { - "version": "8.3.2", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.4.7.tgz", + "integrity": "sha512-uyJIcoyeMWKAvjrG9tJBUCKxr2WZk+PomgrgrUwejkIfXMO76i6jw9BwLa0NZjYdlthDv30r9FfbYZyeNPmF0g==", "dev": true, "license": "MIT", "funding": { @@ -7424,7 +7287,7 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.2" + "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0" } }, "node_modules/@storybook/core": { @@ -7482,7 +7345,9 @@ } }, "node_modules/@storybook/csf-plugin": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.4.7.tgz", + "integrity": "sha512-Fgogplu4HImgC+AYDcdGm1rmL6OR1rVdNX1Be9C/NEXwOCpbbBwi0BxTf/2ZxHRk9fCeaPEcOdP5S8QHfltc1g==", "dev": true, "license": "MIT", "dependencies": { @@ -7493,7 +7358,7 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.0" + "storybook": "^8.4.7" } }, "node_modules/@storybook/csf-tools": { @@ -7573,36 +7438,41 @@ "license": "MIT" }, "node_modules/@storybook/icons": { - "version": "1.2.10", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.3.0.tgz", + "integrity": "sha512-Nz/UzeYQdUZUhacrPyfkiiysSjydyjgg/p0P9HxB4p/WaJUUjMAcaoaLgy3EXx61zZJ3iD36WPuDkZs5QYrA0A==", "dev": true, "license": "MIT", "engines": { "node": ">=14.0.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta" } }, "node_modules/@storybook/instrumenter": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.4.7.tgz", + "integrity": "sha512-k6NSD3jaRCCHAFtqXZ7tw8jAzD/yTEWXGya+REgZqq5RCkmJ+9S4Ytp/6OhQMPtPFX23gAuJJzTQVLcCr+gjRg==", "dev": true, "license": "MIT", "dependencies": { "@storybook/global": "^5.0.0", - "@vitest/utils": "^2.0.5", - "util": "^0.12.4" + "@vitest/utils": "^2.1.1" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.0" + "storybook": "^8.4.7" } }, "node_modules/@storybook/manager-api": { - "version": "8.3.2", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.4.7.tgz", + "integrity": "sha512-ELqemTviCxAsZ5tqUz39sDmQkvhVAvAgiplYy9Uf15kO0SP2+HKsCMzlrm2ue2FfkUNyqbDayCPPCB0Cdn/mpQ==", "dev": true, "license": "MIT", "funding": { @@ -7610,11 +7480,13 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.2" + "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0" } }, "node_modules/@storybook/preview-api": { - "version": "8.3.2", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.4.7.tgz", + "integrity": "sha512-0QVQwHw+OyZGHAJEXo6Knx+6/4er7n2rTDE5RYJ9F2E2Lg42E19pfdLlq2Jhoods2Xrclo3wj6GWR//Ahi39Eg==", "dev": true, "license": "MIT", "funding": { @@ -7622,34 +7494,22 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.2" + "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0" } }, "node_modules/@storybook/react": { - "version": "8.3.2", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/react/-/react-8.4.7.tgz", + "integrity": "sha512-nQ0/7i2DkaCb7dy0NaT95llRVNYWQiPIVuhNfjr1mVhEP7XD090p0g7eqUmsx8vfdHh2BzWEo6CoBFRd3+EXxw==", "dev": true, "license": "MIT", "dependencies": { - "@storybook/components": "^8.3.2", + "@storybook/components": "8.4.7", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "^8.3.2", - "@storybook/preview-api": "^8.3.2", - "@storybook/react-dom-shim": "8.3.2", - "@storybook/theming": "^8.3.2", - "@types/escodegen": "^0.0.6", - "@types/estree": "^0.0.51", - "@types/node": "^22.0.0", - "acorn": "^7.4.1", - "acorn-jsx": "^5.3.1", - "acorn-walk": "^7.2.0", - "escodegen": "^2.1.0", - "html-tags": "^3.1.0", - "prop-types": "^15.7.2", - "react-element-to-jsx-string": "^15.0.0", - "semver": "^7.3.7", - "ts-dedent": "^2.0.0", - "type-fest": "~2.19", - "util-deprecate": "^1.0.2" + "@storybook/manager-api": "8.4.7", + "@storybook/preview-api": "8.4.7", + "@storybook/react-dom-shim": "8.4.7", + "@storybook/theming": "8.4.7" }, "engines": { "node": ">=18.0.0" @@ -7659,10 +7519,10 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "@storybook/test": "8.3.2", + "@storybook/test": "8.4.7", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", - "storybook": "^8.3.2", + "storybook": "^8.4.7", "typescript": ">= 4.2.x" }, "peerDependenciesMeta": { @@ -7675,7 +7535,9 @@ } }, "node_modules/@storybook/react-dom-shim": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.4.7.tgz", + "integrity": "sha512-6bkG2jvKTmWrmVzCgwpTxwIugd7Lu+2btsLAqhQSzDyIj2/uhMNp8xIMr/NBDtLgq3nomt9gefNa9xxLwk/OMg==", "dev": true, "license": "MIT", "funding": { @@ -7685,18 +7547,20 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", - "storybook": "^8.3.0" + "storybook": "^8.4.7" } }, "node_modules/@storybook/react-vite": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-8.4.7.tgz", + "integrity": "sha512-iiY9iLdMXhDnilCEVxU6vQsN72pW3miaf0WSenOZRyZv3HdbpgOxI0qapOS0KCyRUnX9vTlmrSPTMchY4cAeOg==", "dev": true, "license": "MIT", "dependencies": { - "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.1", + "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.2", "@rollup/pluginutils": "^5.0.2", - "@storybook/builder-vite": "8.3.0", - "@storybook/react": "8.3.0", + "@storybook/builder-vite": "8.4.7", + "@storybook/react": "8.4.7", "find-up": "^5.0.0", "magic-string": "^0.30.0", "react-docgen": "^7.0.0", @@ -7713,100 +7577,31 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", - "storybook": "^8.3.0", - "vite": "^4.0.0 || ^5.0.0" + "storybook": "^8.4.7", + "vite": "^4.0.0 || ^5.0.0 || ^6.0.0" } }, - "node_modules/@storybook/react-vite/node_modules/@storybook/react": { - "version": "8.3.0", + "node_modules/@storybook/react-vite/node_modules/find-up": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", + "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", "dev": true, "license": "MIT", "dependencies": { - "@storybook/components": "^8.3.0", - "@storybook/global": "^5.0.0", - "@storybook/manager-api": "^8.3.0", - "@storybook/preview-api": "^8.3.0", - "@storybook/react-dom-shim": "8.3.0", - "@storybook/theming": "^8.3.0", - "@types/escodegen": "^0.0.6", - "@types/estree": "^0.0.51", - "@types/node": "^22.0.0", - "acorn": "^7.4.1", - "acorn-jsx": "^5.3.1", - "acorn-walk": "^7.2.0", - "escodegen": "^2.1.0", - "html-tags": "^3.1.0", - "prop-types": "^15.7.2", - "react-element-to-jsx-string": "^15.0.0", - "semver": "^7.3.7", - "ts-dedent": "^2.0.0", - "type-fest": "~2.19", - "util-deprecate": "^1.0.2" + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" }, "engines": { - "node": ">=18.0.0" + "node": ">=10" }, "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "@storybook/test": "8.3.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", - "storybook": "^8.3.0", - "typescript": ">= 4.2.x" - }, - "peerDependenciesMeta": { - "@storybook/test": { - "optional": true - }, - "typescript": { - "optional": true - } + "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/@storybook/react-vite/node_modules/@types/estree": { - "version": "0.0.51", - "dev": true, - "license": "MIT" - }, - "node_modules/@storybook/react-vite/node_modules/@types/node": { - "version": "22.5.5", - "dev": true, - "license": "MIT", - "dependencies": { - "undici-types": "~6.19.2" - } - }, - "node_modules/@storybook/react-vite/node_modules/acorn": { - "version": "7.4.1", - "dev": true, - "license": "MIT", - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/@storybook/react-vite/node_modules/find-up": { - "version": "5.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "locate-path": "^6.0.0", - "path-exists": "^4.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/@storybook/react-vite/node_modules/locate-path": { - "version": "6.0.0", + "node_modules/@storybook/react-vite/node_modules/locate-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", "dev": true, "license": "MIT", "dependencies": { @@ -7821,6 +7616,8 @@ }, "node_modules/@storybook/react-vite/node_modules/p-limit": { "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", "dev": true, "license": "MIT", "dependencies": { @@ -7835,6 +7632,8 @@ }, "node_modules/@storybook/react-vite/node_modules/p-locate": { "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", "dev": true, "license": "MIT", "dependencies": { @@ -7849,6 +7648,8 @@ }, "node_modules/@storybook/react-vite/node_modules/tsconfig-paths": { "version": "4.2.0", + "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz", + "integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==", "dev": true, "license": "MIT", "dependencies": { @@ -7860,84 +7661,16 @@ "node": ">=6" } }, - "node_modules/@storybook/react-vite/node_modules/type-fest": { - "version": "2.19.0", - "dev": true, - "license": "(MIT OR CC0-1.0)", - "engines": { - "node": ">=12.20" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/@storybook/react-vite/node_modules/undici-types": { - "version": "6.19.8", - "dev": true, - "license": "MIT" - }, - "node_modules/@storybook/react/node_modules/@storybook/react-dom-shim": { - "version": "8.3.2", - "dev": true, - "license": "MIT", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", - "storybook": "^8.3.2" - } - }, - "node_modules/@storybook/react/node_modules/@types/estree": { - "version": "0.0.51", - "dev": true, - "license": "MIT" - }, - "node_modules/@storybook/react/node_modules/@types/node": { - "version": "22.5.4", - "dev": true, - "license": "MIT", - "dependencies": { - "undici-types": "~6.19.2" - } - }, - "node_modules/@storybook/react/node_modules/acorn": { - "version": "7.4.1", - "dev": true, - "license": "MIT", - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/@storybook/react/node_modules/type-fest": { - "version": "2.19.0", - "dev": true, - "license": "(MIT OR CC0-1.0)", - "engines": { - "node": ">=12.20" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/@storybook/react/node_modules/undici-types": { - "version": "6.19.8", - "dev": true, - "license": "MIT" - }, "node_modules/@storybook/source-loader": { - "version": "8.3.5", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-8.4.7.tgz", + "integrity": "sha512-DrsYGGfNbbqlMzkhbLoNyNqrPa4QIkZ6O7FJ8Z/8jWb0cerQH2N6JW6k12ZnXgs8dO2Z33+iSEDIV8odh0E0PA==", "dev": true, "license": "MIT", "dependencies": { "@storybook/csf": "^0.1.11", + "es-toolkit": "^1.22.0", "estraverse": "^5.2.0", - "lodash": "^4.17.21", "prettier": "^3.1.1" }, "funding": { @@ -7945,11 +7678,13 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.5" + "storybook": "^8.4.7" } }, "node_modules/@storybook/source-loader/node_modules/estraverse": { "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", "dev": true, "license": "BSD-2-Clause", "engines": { @@ -7957,30 +7692,33 @@ } }, "node_modules/@storybook/test": { - "version": "8.3.0", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.4.7.tgz", + "integrity": "sha512-AhvJsu5zl3uG40itSQVuSy5WByp3UVhS6xAnme4FWRwgSxhvZjATJ3AZkkHWOYjnnk+P2/sbz/XuPli1FVCWoQ==", "dev": true, "license": "MIT", "dependencies": { "@storybook/csf": "^0.1.11", "@storybook/global": "^5.0.0", - "@storybook/instrumenter": "8.3.0", + "@storybook/instrumenter": "8.4.7", "@testing-library/dom": "10.4.0", "@testing-library/jest-dom": "6.5.0", "@testing-library/user-event": "14.5.2", "@vitest/expect": "2.0.5", - "@vitest/spy": "2.0.5", - "util": "^0.12.4" + "@vitest/spy": "2.0.5" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.0" + "storybook": "^8.4.7" } }, "node_modules/@storybook/theming": { - "version": "8.3.2", + "version": "8.4.7", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.4.7.tgz", + "integrity": "sha512-99rgLEjf7iwfSEmdqlHkSG3AyLcK0sfExcr0jnc6rLiAkBhzuIsvcHjjUwkR210SOCgXqBPW0ZA6uhnuyppHLw==", "dev": true, "license": "MIT", "funding": { @@ -7988,7 +7726,7 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.3.2" + "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0" } }, "node_modules/@storybook/types": { @@ -8526,11 +8264,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@types/escodegen": { - "version": "0.0.6", - "dev": true, - "license": "MIT" - }, "node_modules/@types/eslint": { "version": "9.6.1", "dev": true, @@ -8584,20 +8317,6 @@ "@types/send": "*" } }, - "node_modules/@types/find-cache-dir": { - "version": "3.2.1", - "dev": true, - "license": "MIT" - }, - "node_modules/@types/glob": { - "version": "7.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/minimatch": "*", - "@types/node": "*" - } - }, "node_modules/@types/graceful-fs": { "version": "4.1.5", "dev": true, @@ -8746,6 +8465,8 @@ }, "node_modules/@types/mdx": { "version": "2.0.13", + "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz", + "integrity": "sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==", "dev": true, "license": "MIT" }, @@ -8754,11 +8475,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@types/minimatch": { - "version": "5.1.2", - "dev": true, - "license": "MIT" - }, "node_modules/@types/minimist": { "version": "1.2.2", "dev": true, @@ -9609,6 +9325,8 @@ }, "node_modules/@vitest/expect": { "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.5.tgz", + "integrity": "sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==", "dev": true, "license": "MIT", "dependencies": { @@ -9621,8 +9339,10 @@ "url": "https://opencollective.com/vitest" } }, - "node_modules/@vitest/pretty-format": { + "node_modules/@vitest/expect/node_modules/@vitest/pretty-format": { "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.5.tgz", + "integrity": "sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==", "dev": true, "license": "MIT", "dependencies": { @@ -9632,37 +9352,71 @@ "url": "https://opencollective.com/vitest" } }, - "node_modules/@vitest/spy": { + "node_modules/@vitest/expect/node_modules/@vitest/utils": { "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.5.tgz", + "integrity": "sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==", "dev": true, "license": "MIT", "dependencies": { - "tinyspy": "^3.0.0" + "@vitest/pretty-format": "2.0.5", + "estree-walker": "^3.0.3", + "loupe": "^3.1.1", + "tinyrainbow": "^1.2.0" }, "funding": { "url": "https://opencollective.com/vitest" } }, - "node_modules/@vitest/utils": { - "version": "2.0.5", + "node_modules/@vitest/expect/node_modules/estree-walker": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", + "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "^1.0.0" + } + }, + "node_modules/@vitest/pretty-format": { + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.8.tgz", + "integrity": "sha512-9HiSZ9zpqNLKlbIDRWOnAWqgcA7xu+8YxXSekhr0Ykab7PAYFkhkwoqVArPOtJhPmYeE2YHgKZlj3CP36z2AJQ==", "dev": true, "license": "MIT", "dependencies": { - "@vitest/pretty-format": "2.0.5", - "estree-walker": "^3.0.3", - "loupe": "^3.1.1", "tinyrainbow": "^1.2.0" }, "funding": { "url": "https://opencollective.com/vitest" } }, - "node_modules/@vitest/utils/node_modules/estree-walker": { - "version": "3.0.3", + "node_modules/@vitest/spy": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.5.tgz", + "integrity": "sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==", "dev": true, "license": "MIT", "dependencies": { - "@types/estree": "^1.0.0" + "tinyspy": "^3.0.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/utils": { + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.8.tgz", + "integrity": "sha512-dwSoui6djdwbfFmIgbIjX2ZhIoG7Ex/+xpxyiEgIGzjliY8xGkcpITKTlp6B4MgtGkF2ilvm97cPM96XZaAgcA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/pretty-format": "2.1.8", + "loupe": "^3.1.2", + "tinyrainbow": "^1.2.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" } }, "node_modules/@webassemblyjs/ast": { @@ -9819,18 +9573,6 @@ "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, - "node_modules/accepts": { - "version": "1.3.8", - "dev": true, - "license": "MIT", - "dependencies": { - "mime-types": "~2.1.34", - "negotiator": "0.6.3" - }, - "engines": { - "node": ">= 0.6" - } - }, "node_modules/acorn": { "version": "8.14.0", "dev": true, @@ -9870,14 +9612,6 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, - "node_modules/acorn-walk": { - "version": "7.2.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.4.0" - } - }, "node_modules/agent-base": { "version": "6.0.2", "dev": true, @@ -10016,11 +9750,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/array-flatten": { - "version": "1.1.1", - "dev": true, - "license": "MIT" - }, "node_modules/array-includes": { "version": "3.1.6", "dev": true, @@ -10142,6 +9871,8 @@ }, "node_modules/assertion-error": { "version": "2.0.1", + "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz", + "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==", "dev": true, "license": "MIT", "engines": { @@ -10754,56 +10485,6 @@ "node": ">= 6" } }, - "node_modules/body-parser": { - "version": "1.20.2", - "dev": true, - "license": "MIT", - "dependencies": { - "bytes": "3.1.2", - "content-type": "~1.0.5", - "debug": "2.6.9", - "depd": "2.0.0", - "destroy": "1.2.0", - "http-errors": "2.0.0", - "iconv-lite": "0.4.24", - "on-finished": "2.4.1", - "qs": "6.11.0", - "raw-body": "2.5.2", - "type-is": "~1.6.18", - "unpipe": "1.0.0" - }, - "engines": { - "node": ">= 0.8", - "npm": "1.2.8000 || >= 1.4.16" - } - }, - "node_modules/body-parser/node_modules/debug": { - "version": "2.6.9", - "dev": true, - "license": "MIT", - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/body-parser/node_modules/ms": { - "version": "2.0.0", - "dev": true, - "license": "MIT" - }, - "node_modules/body-parser/node_modules/qs": { - "version": "6.11.0", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "side-channel": "^1.0.4" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/boolbase": { "version": "1.0.0", "dev": true, @@ -11081,14 +10762,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/bytes": { - "version": "3.1.2", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8" - } - }, "node_modules/bytes-iec": { "version": "3.1.1", "dev": true, @@ -11212,7 +10885,9 @@ } }, "node_modules/chai": { - "version": "5.1.1", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.2.tgz", + "integrity": "sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==", "dev": true, "license": "MIT", "dependencies": { @@ -11295,6 +10970,8 @@ }, "node_modules/check-error": { "version": "2.1.1", + "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz", + "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==", "dev": true, "license": "MIT", "engines": { @@ -11737,62 +11414,11 @@ "node": ">=12" } }, - "node_modules/content-disposition": { - "version": "0.5.4", - "dev": true, - "license": "MIT", - "dependencies": { - "safe-buffer": "5.2.1" - }, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/content-disposition/node_modules/safe-buffer": { - "version": "5.2.1", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "license": "MIT" - }, - "node_modules/content-type": { - "version": "1.0.5", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.6" - } - }, "node_modules/convert-source-map": { "version": "1.9.0", "dev": true, "license": "MIT" }, - "node_modules/cookie": { - "version": "0.6.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/cookie-signature": { - "version": "1.0.6", - "dev": true, - "license": "MIT" - }, "node_modules/copy-anything": { "version": "2.0.6", "dev": true, @@ -12617,6 +12243,8 @@ }, "node_modules/deep-eql": { "version": "5.0.2", + "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz", + "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==", "dev": true, "license": "MIT", "engines": { @@ -12782,14 +12410,6 @@ "node": ">=0.4.0" } }, - "node_modules/depd": { - "version": "2.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8" - } - }, "node_modules/dequal": { "version": "2.0.3", "dev": true, @@ -12798,15 +12418,6 @@ "node": ">=6" } }, - "node_modules/destroy": { - "version": "1.2.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8", - "npm": "1.2.8000 || >= 1.4.16" - } - }, "node_modules/detect-indent": { "version": "6.1.0", "dev": true, @@ -12980,11 +12591,6 @@ "version": "0.2.0", "license": "MIT" }, - "node_modules/ee-first": { - "version": "1.1.1", - "dev": true, - "license": "MIT" - }, "node_modules/electron-to-chromium": { "version": "1.5.58", "license": "ISC" @@ -13004,14 +12610,6 @@ "version": "8.0.0", "license": "MIT" }, - "node_modules/encodeurl": { - "version": "1.0.2", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8" - } - }, "node_modules/end-of-stream": { "version": "1.4.4", "dev": true, @@ -13241,6 +12839,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/es-toolkit": { + "version": "1.31.0", + "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.31.0.tgz", + "integrity": "sha512-vwS0lv/tzjM2/t4aZZRAgN9I9TP0MSkWuvt6By+hEXfG/uLs8yg2S1/ayRXH/x3pinbLgVJYT+eppueg3cM6tg==", + "dev": true, + "license": "MIT", + "workspaces": [ + "docs", + "benchmarks" + ] + }, "node_modules/esbuild": { "version": "0.21.5", "dev": true, @@ -13298,11 +12907,6 @@ "node": ">=6" } }, - "node_modules/escape-html": { - "version": "1.0.3", - "dev": true, - "license": "MIT" - }, "node_modules/escape-string-regexp": { "version": "1.0.5", "dev": true, @@ -14979,14 +14583,6 @@ "node": ">=0.10.0" } }, - "node_modules/etag": { - "version": "1.8.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.6" - } - }, "node_modules/eventemitter3": { "version": "4.0.7", "dev": true, @@ -15178,93 +14774,6 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, - "node_modules/express": { - "version": "4.19.2", - "dev": true, - "license": "MIT", - "dependencies": { - "accepts": "~1.3.8", - "array-flatten": "1.1.1", - "body-parser": "1.20.2", - "content-disposition": "0.5.4", - "content-type": "~1.0.4", - "cookie": "0.6.0", - "cookie-signature": "1.0.6", - "debug": "2.6.9", - "depd": "2.0.0", - "encodeurl": "~1.0.2", - "escape-html": "~1.0.3", - "etag": "~1.8.1", - "finalhandler": "1.2.0", - "fresh": "0.5.2", - "http-errors": "2.0.0", - "merge-descriptors": "1.0.1", - "methods": "~1.1.2", - "on-finished": "2.4.1", - "parseurl": "~1.3.3", - "path-to-regexp": "0.1.7", - "proxy-addr": "~2.0.7", - "qs": "6.11.0", - "range-parser": "~1.2.1", - "safe-buffer": "5.2.1", - "send": "0.18.0", - "serve-static": "1.15.0", - "setprototypeof": "1.2.0", - "statuses": "2.0.1", - "type-is": "~1.6.18", - "utils-merge": "1.0.1", - "vary": "~1.1.2" - }, - "engines": { - "node": ">= 0.10.0" - } - }, - "node_modules/express/node_modules/debug": { - "version": "2.6.9", - "dev": true, - "license": "MIT", - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/express/node_modules/ms": { - "version": "2.0.0", - "dev": true, - "license": "MIT" - }, - "node_modules/express/node_modules/qs": { - "version": "6.11.0", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "side-channel": "^1.0.4" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/express/node_modules/safe-buffer": { - "version": "5.2.1", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "license": "MIT" - }, "node_modules/extend": { "version": "3.0.2", "dev": true, @@ -15507,36 +15016,6 @@ "node": ">=8" } }, - "node_modules/finalhandler": { - "version": "1.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "debug": "2.6.9", - "encodeurl": "~1.0.2", - "escape-html": "~1.0.3", - "on-finished": "2.4.1", - "parseurl": "~1.3.3", - "statuses": "2.0.1", - "unpipe": "~1.0.0" - }, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/finalhandler/node_modules/debug": { - "version": "2.6.9", - "dev": true, - "license": "MIT", - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/finalhandler/node_modules/ms": { - "version": "2.0.0", - "dev": true, - "license": "MIT" - }, "node_modules/find-cache-dir": { "version": "3.3.2", "dev": true, @@ -15750,14 +15229,6 @@ "node": ">=0.4.x" } }, - "node_modules/forwarded": { - "version": "0.2.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.6" - } - }, "node_modules/fraction.js": { "version": "4.3.7", "license": "MIT", @@ -15769,14 +15240,6 @@ "url": "https://github.com/sponsors/rawify" } }, - "node_modules/fresh": { - "version": "0.5.2", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.6" - } - }, "node_modules/front-matter": { "version": "4.0.2", "dev": true, @@ -15885,14 +15348,6 @@ "node": "6.* || 8.* || >= 10.*" } }, - "node_modules/get-func-name": { - "version": "2.0.2", - "dev": true, - "license": "MIT", - "engines": { - "node": "*" - } - }, "node_modules/get-intrinsic": { "version": "1.2.4", "dev": true, @@ -16025,11 +15480,6 @@ "ini": "^1.3.2" } }, - "node_modules/github-slugger": { - "version": "2.0.0", - "dev": true, - "license": "ISC" - }, "node_modules/glob": { "version": "7.2.3", "dev": true, @@ -16060,24 +15510,6 @@ "node": ">= 6" } }, - "node_modules/glob-promise": { - "version": "4.2.2", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/glob": "^7.1.3" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "type": "individual", - "url": "https://github.com/sponsors/ahmadnassri" - }, - "peerDependencies": { - "glob": "^7.1.6" - } - }, "node_modules/glob-to-regexp": { "version": "0.4.1", "dev": true, @@ -16307,66 +15739,6 @@ "node": ">= 0.4" } }, - "node_modules/hast-util-heading-rank": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/hast": "^3.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "node_modules/hast-util-heading-rank/node_modules/@types/hast": { - "version": "3.0.4", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/unist": "*" - } - }, - "node_modules/hast-util-is-element": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/hast": "^3.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "node_modules/hast-util-is-element/node_modules/@types/hast": { - "version": "3.0.4", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/unist": "*" - } - }, - "node_modules/hast-util-to-string": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/hast": "^3.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "node_modules/hast-util-to-string/node_modules/@types/hast": { - "version": "3.0.4", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/unist": "*" - } - }, "node_modules/history": { "version": "5.3.0", "license": "MIT", @@ -16415,25 +15787,10 @@ "dev": true, "license": "MIT", "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/http-errors": { - "version": "2.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "depd": "2.0.0", - "inherits": "2.0.4", - "setprototypeof": "1.2.0", - "statuses": "2.0.1", - "toidentifier": "1.0.1" - }, - "engines": { - "node": ">= 0.8" + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/http-proxy-agent": { @@ -16693,25 +16050,6 @@ "dev": true, "license": "BSD-3-Clause" }, - "node_modules/ipaddr.js": { - "version": "1.9.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.10" - } - }, - "node_modules/is-absolute-url": { - "version": "4.0.1", - "dev": true, - "license": "MIT", - "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/is-alphabetical": { "version": "1.0.4", "dev": true, @@ -20062,12 +19400,11 @@ } }, "node_modules/loupe": { - "version": "3.1.1", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.2.tgz", + "integrity": "sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==", "dev": true, - "license": "MIT", - "dependencies": { - "get-func-name": "^2.0.1" - } + "license": "MIT" }, "node_modules/lru-cache": { "version": "4.1.5", @@ -20166,17 +19503,6 @@ "dev": true, "license": "Python-2.0" }, - "node_modules/markdown-to-jsx": { - "version": "7.5.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 10" - }, - "peerDependencies": { - "react": ">= 0.14.0" - } - }, "node_modules/markdownlint": { "version": "0.32.1", "dev": true, @@ -20849,14 +20175,6 @@ "dev": true, "license": "MIT" }, - "node_modules/media-typer": { - "version": "0.3.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.6" - } - }, "node_modules/memoizerific": { "version": "1.11.3", "dev": true, @@ -20889,11 +20207,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/merge-descriptors": { - "version": "1.0.1", - "dev": true, - "license": "MIT" - }, "node_modules/merge-stream": { "version": "2.0.0", "dev": true, @@ -20907,14 +20220,6 @@ "node": ">= 8" } }, - "node_modules/methods": { - "version": "1.1.2", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.6" - } - }, "node_modules/micromark": { "version": "4.0.0", "dev": true, @@ -21827,6 +21132,7 @@ "version": "1.6.0", "dev": true, "license": "MIT", + "optional": true, "bin": { "mime": "cli.js" }, @@ -22001,14 +21307,6 @@ "node": ">=0.10.0" } }, - "node_modules/negotiator": { - "version": "0.6.3", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.6" - } - }, "node_modules/neo-async": { "version": "2.6.2", "dev": true, @@ -22441,17 +21739,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/on-finished": { - "version": "2.4.1", - "dev": true, - "license": "MIT", - "dependencies": { - "ee-first": "1.1.1" - }, - "engines": { - "node": ">= 0.8" - } - }, "node_modules/once": { "version": "1.4.0", "dev": true, @@ -22868,14 +22155,6 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, - "node_modules/parseurl": { - "version": "1.3.3", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8" - } - }, "node_modules/path-browserify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", @@ -22931,11 +22210,6 @@ "dev": true, "license": "ISC" }, - "node_modules/path-to-regexp": { - "version": "0.1.7", - "dev": true, - "license": "MIT" - }, "node_modules/path-type": { "version": "4.0.0", "dev": true, @@ -22946,6 +22220,8 @@ }, "node_modules/pathval": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz", + "integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==", "dev": true, "license": "MIT", "engines": { @@ -24594,18 +23870,6 @@ "dev": true, "license": "MIT" }, - "node_modules/proxy-addr": { - "version": "2.0.7", - "dev": true, - "license": "MIT", - "dependencies": { - "forwarded": "0.2.0", - "ipaddr.js": "1.9.1" - }, - "engines": { - "node": ">= 0.10" - } - }, "node_modules/proxy-agent": { "version": "6.4.0", "dev": true, @@ -24968,28 +24232,6 @@ "safe-buffer": "^5.1.0" } }, - "node_modules/range-parser": { - "version": "1.2.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/raw-body": { - "version": "2.5.2", - "dev": true, - "license": "MIT", - "dependencies": { - "bytes": "3.1.2", - "http-errors": "2.0.0", - "iconv-lite": "0.4.24", - "unpipe": "1.0.0" - }, - "engines": { - "node": ">= 0.8" - } - }, "node_modules/react": { "version": "18.3.1", "license": "MIT", @@ -25000,15 +24242,6 @@ "node": ">=0.10.0" } }, - "node_modules/react-colorful": { - "version": "5.6.1", - "dev": true, - "license": "MIT", - "peerDependencies": { - "react": ">=16.8.0", - "react-dom": ">=16.8.0" - } - }, "node_modules/react-dnd": { "version": "14.0.4", "dev": true, @@ -25068,6 +24301,8 @@ }, "node_modules/react-docgen-typescript": { "version": "2.2.2", + "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz", + "integrity": "sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==", "dev": true, "license": "MIT", "peerDependencies": { @@ -25099,33 +24334,6 @@ "react": "^18.3.1" } }, - "node_modules/react-element-to-jsx-string": { - "version": "15.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "@base2/pretty-print-object": "1.0.1", - "is-plain-object": "5.0.0", - "react-is": "18.1.0" - }, - "peerDependencies": { - "react": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0", - "react-dom": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0" - } - }, - "node_modules/react-element-to-jsx-string/node_modules/is-plain-object": { - "version": "5.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/react-element-to-jsx-string/node_modules/react-is": { - "version": "18.1.0", - "dev": true, - "license": "MIT" - }, "node_modules/react-error-boundary": { "version": "3.1.4", "dev": true, @@ -25412,55 +24620,6 @@ "jsesc": "bin/jsesc" } }, - "node_modules/rehype-external-links": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/hast": "^3.0.0", - "@ungap/structured-clone": "^1.0.0", - "hast-util-is-element": "^3.0.0", - "is-absolute-url": "^4.0.0", - "space-separated-tokens": "^2.0.0", - "unist-util-visit": "^5.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "node_modules/rehype-external-links/node_modules/@types/hast": { - "version": "3.0.4", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/unist": "*" - } - }, - "node_modules/rehype-slug": { - "version": "6.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/hast": "^3.0.0", - "github-slugger": "^2.0.0", - "hast-util-heading-rank": "^3.0.0", - "hast-util-to-string": "^3.0.0", - "unist-util-visit": "^5.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "node_modules/rehype-slug/node_modules/@types/hast": { - "version": "3.0.4", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/unist": "*" - } - }, "node_modules/remark-mdx": { "version": "3.0.1", "dev": true, @@ -26751,47 +25910,6 @@ "node": ">=10" } }, - "node_modules/send": { - "version": "0.18.0", - "dev": true, - "license": "MIT", - "dependencies": { - "debug": "2.6.9", - "depd": "2.0.0", - "destroy": "1.2.0", - "encodeurl": "~1.0.2", - "escape-html": "~1.0.3", - "etag": "~1.8.1", - "fresh": "0.5.2", - "http-errors": "2.0.0", - "mime": "1.6.0", - "ms": "2.1.3", - "on-finished": "2.4.1", - "range-parser": "~1.2.1", - "statuses": "2.0.1" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/send/node_modules/debug": { - "version": "2.6.9", - "dev": true, - "license": "MIT", - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/send/node_modules/debug/node_modules/ms": { - "version": "2.0.0", - "dev": true, - "license": "MIT" - }, - "node_modules/send/node_modules/ms": { - "version": "2.1.3", - "dev": true, - "license": "MIT" - }, "node_modules/serialize-javascript": { "version": "6.0.2", "dev": true, @@ -26800,20 +25918,6 @@ "randombytes": "^2.1.0" } }, - "node_modules/serve-static": { - "version": "1.15.0", - "dev": true, - "license": "MIT", - "dependencies": { - "encodeurl": "~1.0.2", - "escape-html": "~1.0.3", - "parseurl": "~1.3.3", - "send": "0.18.0" - }, - "engines": { - "node": ">= 0.8.0" - } - }, "node_modules/set-blocking": { "version": "2.0.0", "dev": true, @@ -26849,11 +25953,6 @@ "node": ">= 0.4" } }, - "node_modules/setprototypeof": { - "version": "1.2.0", - "dev": true, - "license": "ISC" - }, "node_modules/shallow-clone": { "version": "3.0.1", "dev": true, @@ -27056,15 +26155,6 @@ "source-map": "^0.6.0" } }, - "node_modules/space-separated-tokens": { - "version": "2.0.2", - "dev": true, - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/spawn-command": { "version": "0.0.2-1", "dev": true, @@ -27136,14 +26226,6 @@ "node": ">=8" } }, - "node_modules/statuses": { - "version": "2.0.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8" - } - }, "node_modules/storybook": { "version": "8.4.7", "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.4.7.tgz", @@ -28444,6 +27526,8 @@ }, "node_modules/tinyrainbow": { "version": "1.2.0", + "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-1.2.0.tgz", + "integrity": "sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==", "dev": true, "license": "MIT", "engines": { @@ -28452,6 +27536,8 @@ }, "node_modules/tinyspy": { "version": "3.0.2", + "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz", + "integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==", "dev": true, "license": "MIT", "engines": { @@ -28496,14 +27582,6 @@ "node": ">=8.0" } }, - "node_modules/toidentifier": { - "version": "1.0.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.6" - } - }, "node_modules/tough-cookie": { "version": "4.1.4", "dev": true, @@ -28921,18 +27999,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/type-is": { - "version": "1.6.18", - "dev": true, - "license": "MIT", - "dependencies": { - "media-typer": "0.3.0", - "mime-types": "~2.1.24" - }, - "engines": { - "node": ">= 0.6" - } - }, "node_modules/typed-array-buffer": { "version": "1.0.2", "dev": true, @@ -29538,32 +28604,18 @@ "node": ">= 4.0.0" } }, - "node_modules/unpipe": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8" - } - }, "node_modules/unplugin": { - "version": "1.14.1", + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.16.1.tgz", + "integrity": "sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==", "dev": true, "license": "MIT", "dependencies": { - "acorn": "^8.12.1", + "acorn": "^8.14.0", "webpack-virtual-modules": "^0.6.2" }, "engines": { "node": ">=14.0.0" - }, - "peerDependencies": { - "webpack-sources": "^3" - }, - "peerDependenciesMeta": { - "webpack-sources": { - "optional": true - } } }, "node_modules/untildify": { @@ -29640,14 +28692,6 @@ "version": "1.0.2", "license": "MIT" }, - "node_modules/utils-merge": { - "version": "1.0.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.4.0" - } - }, "node_modules/uuid": { "version": "8.3.2", "dev": true, @@ -29711,14 +28755,6 @@ "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, - "node_modules/vary": { - "version": "1.1.2", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8" - } - }, "node_modules/vfile": { "version": "6.0.3", "dev": true, @@ -30111,6 +29147,8 @@ }, "node_modules/webpack-virtual-modules": { "version": "0.6.2", + "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz", + "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==", "dev": true, "license": "MIT" }, @@ -30667,7 +29705,7 @@ }, "packages/react": { "name": "@primer/react", - "version": "37.8.0", + "version": "37.9.0", "license": "MIT", "dependencies": { "@github/relative-time-element": "^4.4.3", @@ -30716,17 +29754,17 @@ "@rollup/plugin-terser": "0.4.4", "@rollup/plugin-typescript": "11.1.5", "@rollup/plugin-virtual": "3.0.2", - "@storybook/addon-a11y": "^8.3.0", + "@storybook/addon-a11y": "^8.4.7", "@storybook/addon-actions": "^8.4.7", - "@storybook/addon-essentials": "^8.3.0", - "@storybook/addon-interactions": "^8.3.0", - "@storybook/addon-links": "^8.3.0", - "@storybook/addon-storysource": "^8.3.0", - "@storybook/preview-api": "^8.3.0", - "@storybook/react": "^8.3.2", - "@storybook/react-vite": "^8.3.0", - "@storybook/source-loader": "^8.3.5", - "@storybook/theming": "^8.3.0", + "@storybook/addon-essentials": "^8.4.7", + "@storybook/addon-interactions": "^8.4.7", + "@storybook/addon-links": "^8.4.7", + "@storybook/addon-storysource": "^8.4.7", + "@storybook/preview-api": "^8.4.7", + "@storybook/react": "^8.4.7", + "@storybook/react-vite": "^8.4.7", + "@storybook/source-loader": "^8.4.7", + "@storybook/theming": "^8.4.7", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.4.5", "@testing-library/react": "^16.0.1", diff --git a/packages/react/package.json b/packages/react/package.json index c97c61ce13a..addcb6fa2bc 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -124,17 +124,17 @@ "@rollup/plugin-terser": "0.4.4", "@rollup/plugin-typescript": "11.1.5", "@rollup/plugin-virtual": "3.0.2", - "@storybook/addon-a11y": "^8.3.0", + "@storybook/addon-a11y": "^8.4.7", "@storybook/addon-actions": "^8.4.7", - "@storybook/addon-essentials": "^8.3.0", - "@storybook/addon-interactions": "^8.3.0", - "@storybook/addon-links": "^8.3.0", - "@storybook/addon-storysource": "^8.3.0", - "@storybook/preview-api": "^8.3.0", - "@storybook/react": "^8.3.2", - "@storybook/react-vite": "^8.3.0", - "@storybook/source-loader": "^8.3.5", - "@storybook/theming": "^8.3.0", + "@storybook/addon-essentials": "^8.4.7", + "@storybook/addon-interactions": "^8.4.7", + "@storybook/addon-links": "^8.4.7", + "@storybook/addon-storysource": "^8.4.7", + "@storybook/preview-api": "^8.4.7", + "@storybook/react": "^8.4.7", + "@storybook/react-vite": "^8.4.7", + "@storybook/source-loader": "^8.4.7", + "@storybook/theming": "^8.4.7", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.4.5", "@testing-library/react": "^16.0.1", From c828e03304120632028ae438d924cd3a5e629e21 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Thu, 9 Jan 2025 12:14:25 -0500 Subject: [PATCH 18/19] fix: ActionList.LinkItem duplicate classes (#5517) * remove className from menuItemProps * Create little-shrimps-hug.md --- .changeset/little-shrimps-hug.md | 5 +++++ packages/react/src/ActionList/Item.tsx | 1 - 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 .changeset/little-shrimps-hug.md diff --git a/.changeset/little-shrimps-hug.md b/.changeset/little-shrimps-hug.md new file mode 100644 index 00000000000..6c2290cf5d7 --- /dev/null +++ b/.changeset/little-shrimps-hug.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +fix(ActionList): remove className from menuItemProps to prevent duplicate className bug diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index d90b40a1ce8..e4453a3482a 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -335,7 +335,6 @@ export const Item = React.forwardRef( ...(includeSelectionAttribute && {[itemSelectionAttribute]: selected}), role: itemRole, id: itemId, - className, } const containerProps = _PrivateItemWrapper From d243865334ec9e428f488af3066b50e379f4f594 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 9 Jan 2025 11:17:08 -0600 Subject: [PATCH 19/19] Update dependabot.yml (#5518) --- .github/dependabot.yml | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 82776e83a3d..2e5da3589aa 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -5,14 +5,6 @@ version: 2 updates: - - package-ecosystem: 'npm' - directory: '/' - schedule: - interval: 'weekly' - versioning-strategy: increase - labels: - - 'dependencies' - - 'skip changeset' - package-ecosystem: 'npm' directory: '/' schedule: @@ -26,6 +18,7 @@ updates: patterns: - '@storybook/*' - 'storybook' + - package-ecosystem: 'github-actions' directory: '/' schedule: