Merge branch 'master' into FE-7531

Author: tomdavies73

.github/workflows/chromatic.yml

@@ -49,4 +49,4 @@ jobs:
         run: npm ci
 
       - name: Run chromatic on branch
-        run: npx chromatic@latest --project-token ${{ secrets.CHROMATIC_PROJECT_TOKEN }} --exit-once-uploaded --branch-name="${{ needs.check.outputs.branch_name }}" --only-changed true
+        run: npx chromatic --project-token ${{ secrets.CHROMATIC_PROJECT_TOKEN }} --exit-once-uploaded --branch-name="${{ needs.check.outputs.branch_name }}" --only-changed true

.github/workflows/ci.yml

@@ -83,8 +83,8 @@ jobs:
           node-version: ${{ matrix.node }}
           cache: npm
 
-      - name: Install nyc
-        run: npm install [email protected] --save-dev
+      - name: Install dependencies
+        run: npm ci
 
       - name: Download shard coverage reports
         uses: actions/download-artifact@v4

.github/workflows/semantic-release.yml

@@ -31,6 +31,8 @@ jobs:
           passphrase: ${{ secrets.GPG_PASSPHRASE }}
           git-user-signingkey: true
           git-commit-gpgsign: true
+      - name: Run build
+        run: npm run build
       - run: npx semantic-release
         env:
           # A personal access token is required to publish from protected branches

.npmrc

@@ -0,0 +1 @@
+ignore-scripts=true

CHANGELOG.md

@@ -1,3 +1,25 @@
+## [158.14.2](https://github.com/Sage/carbon/compare/v158.14.1...v158.14.2) (2025-12-08)
+
+### Bug Fixes
+
+* **flat-table:** optimise component to reduce re-renders ([74e39d3](https://github.com/Sage/carbon/commit/74e39d3cc1892be5197d2d7d4348a6bf3f81e936)), closes [#7657](https://github.com/Sage/carbon/issues/7657)
+
+## [158.14.1](https://github.com/Sage/carbon/compare/v158.14.0...v158.14.1) (2025-12-05)
+
+### Bug Fixes
+
+* **submenu:** ensure correct focus styling is applied to menu-item ([21b1519](https://github.com/Sage/carbon/commit/21b1519594f8320f80d3c9ee22cc131f0a103390))
+
+## [158.14.0](https://github.com/Sage/carbon/compare/v158.13.2...v158.14.0) (2025-12-04)
+
+### Features
+
+* **link:** add support for the download attribute ([789f94f](https://github.com/Sage/carbon/commit/789f94f7901f3848aa73f482ef86797525041ead))
+
+### Bug Fixes
+
+* **file-input:** add download attribute to completed state link ([6971449](https://github.com/Sage/carbon/commit/6971449b682830e9a02bcb04b89405965fb58c54)), closes [#7633](https://github.com/Sage/carbon/issues/7633)
+
 ## [158.13.2](https://github.com/Sage/carbon/compare/v158.13.1...v158.13.2) (2025-12-02)
 
 ### Bug Fixes

contributing/dev-environment-setup.md

@@ -2,51 +2,31 @@
 
 This guide will provide you with the information you need to be able to get started on your development journey.
 
-## Contents
-
-- [Text Editor](#text-editor)
-- [Useful VSCode Extensions to Install](#useful-vscode-extensions-to-install)
-- [Installing Node.js, NPM, and Git](#installing-nodejs-npm-and-git)
-
-## Text Editor
-
-[VSCode](https://code.visualstudio.com/) is our preferred text editor. We advise that you follow the installation instructions provided by Microsoft. Installation instructions can be found [here](https://code.visualstudio.com/docs/setup/mac) for Mac users and [here](https://code.visualstudio.com/docs/setup/windows) for Windows users.
-
-## Useful VSCode Extensions to Install
-
-You can browse and install extensions from within VS Code. Simply bring up the Extensions view by clicking on the [Extensions icon](https://code.visualstudio.com/assets/docs/editor/extension-gallery/extensions-view-icon.png) in the Activity Bar on the side of VS Code or the `View: Extensions command` (⇧+⌘+X) on Mac or (shift+alt+x) on Windows.
-
-Below are some useful extensions that we recommend using with Carbon:
-
-- [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) - automatically adds the closing tags for HTML and XML.
-- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) - automatically renames HTML and XML tags.
-- [CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap) - lets you take screenshots of your code and save them to a clipboard.
-- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - basic spelling checker that works well with many file types. There is an [additional extension for getting the British English dictionary](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker-british-english).
-- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - a code quality tool that checks your code for syntax errors and can automatically fix the syntax errors.
-- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) - provides a list of complementary features for use with git repositories, such as in-editor file annotations identifying who changed a line of code last.
-- [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint) - linter and style checker for markdown files.
-- [MDX](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx) - official extension for supporting MDX files.
-- [Package Json Upgrade](https://marketplace.visualstudio.com/items?itemName=codeandstuff.package-json-upgrade) - adds in-editor file annotations to `package.json` stating if an installed package has a newly available version.
-- [Playwright Test for VSCode](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) - for running Playwright tests directly within VSCode.
-- [Total TypeScript](https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator) - provides human-readable hints for TypeScript errors that are difficult to decipher.
-- [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components) - this extension helps with the readability of the code for styled-components. The tool highlights syntax and reports any syntax errors in the code.
-
-## Installing Node.js, NPM, and Git
+- [Getting Your Dev Environment Started](#getting-your-dev-environment-started)
+  - [Prerequisites](#prerequisites)
+    - [Node.js \& NPM](#nodejs--npm)
+    - [Git](#git)
+      - [New to Git?](#new-to-git)
+      - [Git Alias](#git-alias)
+    - [Signing commits](#signing-commits)
+  - [First time setup](#first-time-setup)
+  - [Optional supplementary tools](#optional-supplementary-tools)
+
+## Prerequisites
 
 ### Node.js & NPM
 
-**NOTE: Carbon requires all contributors be on Node version 20 ("iron").**
-
-The recommended way to install Node and npm is using [Node Version Manager (`nvm`)](https://github.com/nvm-sh/nvm).
-Once you have installed nvm, you should run:
+Carbon is developed against a specific version of Node.js specified in the `.nvmrc` file. We recommend using [nvm](https://github.com/nvm-sh/nvm) for installing the correct version of Node.js and npm, this will allow you to install the correct version by running the following command:
 
 ```sh
-nvm install lts/iron
-```
+# Check node version you're currently using:
+node --version
 
-which will install the correct version of Node and npm. You can verify the installed versions using `node --version` and `npm --v`.
+# Switch to version required for Carbon:
+nvm use
+```
 
-> If you are already a `nvm` user, you can also do `nvm use` which will automatically switch to the correct Node and npm versions.
+If you are a Windows user, you'll need to [enable the Windows Subsystem for Linux (WSL)](https://learn.microsoft.com/en-us/windows/wsl/install) to allow you to execute our scripts.
 
 ### Git
 
@@ -73,11 +53,11 @@ You need to add the following to `~/.gitconfig`:
 
 This allows you to review PRs very easily. For example, if you are reviewing [https://github.com/Sage/carbon/pull/2408/](https://github.com/Sage/carbon/pull/2408/), you can use `git pr 2408` which will check out a new branch named pr/2408. This gives you the ability to review, change branches, merge and make experimental changes. The second command `git pr-clean` removes all branches that start with pr/. This is a useful for housekeeping of branches.
 
-#### GPG Verification
+### Signing commits
 
-We strongly encourage our contributors to verify their commits with a GPG key. To set this up, please follow these instructions from GitHub [to enable GPG commit signing](https://docs.github.com/en/authentication/managing-commit-signature-verification).
+Carbon requires all git commits to be signed with a GPG key for verification. To set this up, please follow these instructions [to create a GPG key](https://docs.github.com/en/authentication/managing-commit-signature-verification/about-commit-signature-verification#gpg-commit-signature-verification) and associate it with Git and your GitHub account.
 
-Then add this to your profile (i.e`~/.zshrc` or `~/.bashrc`) so `gpg-agent` can prompt for your passphrase:
+Then add this to your shell profile (i.e`~/.zshrc` or `~/.bashrc`), so `gpg-agent` can prompt for your passphrase:
 
 `export GPG_TTY=$(tty)`
 
@@ -88,3 +68,30 @@ Then execute this command to sign all of your commits by default:
 Restart of gpg-agent may be required. Use the command below to kill it (it will start next time its needed):
 
 `$ gpgconf --kill gpg-agent`
+
+## First time setup
+
+Run the following command once to set-up your local environment:
+
+```sh
+npm run setup
+```
+
+Now you're ready to contribute!
+
+## Optional supplementary tools
+
+If you use VSCode, we suggest using the following extensions as useful aids:
+
+- [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) - automatically adds the closing tags for HTML and XML.
+- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) - automatically renames HTML and XML tags.
+- [CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap) - lets you take screenshots of your code and save them to a clipboard.
+- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - basic spelling checker that works well with many file types. There is an [additional extension for getting the British English dictionary](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker-british-english).
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - a code quality tool that checks your code for syntax errors and can automatically fix the syntax errors.
+- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) - provides a list of complementary features for use with git repositories, such as in-editor file annotations identifying who changed a line of code last.
+- [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint) - linter and style checker for markdown files.
+- [MDX](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx) - official extension for supporting MDX files.
+- [Package Json Upgrade](https://marketplace.visualstudio.com/items?itemName=codeandstuff.package-json-upgrade) - adds in-editor file annotations to `package.json` stating if an installed package has a newly available version.
+- [Playwright Test for VSCode](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) - for running Playwright tests directly within VSCode.
+- [Total TypeScript](https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator) - provides human-readable hints for TypeScript errors that are difficult to decipher.
+- [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components) - this extension helps with the readability of the code for styled-components. The tool highlights syntax and reports any syntax errors in the code.

package-lock.json

@@ -1,21 +1,20 @@
 {
   "name": "carbon-react",
-  "version": "158.13.2",
+  "version": "158.14.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
     "esm"
   ],
   "scripts": {
+    "setup": "npm ci && npm run prepare",
     "start": "npm run generate-tokens:dev && node ./scripts/check_node_version.mjs && dotenvx run -- storybook dev -p 9001 -c .storybook",
     "start:strict-mode": "npm run generate-tokens:dev && node ./scripts/check_node_version.mjs && dotenvx run --env ENABLE_REACT_STRICT_MODE=true -- storybook dev -p 9001 -c .storybook",
     "test": "npm run generate-tokens:dev && jest --config=./jest.config.ts",
     "test-update": "jest --config=./jest.config.ts --updateSnapshot",
     "test-storybook": "test-storybook --url http://127.0.0.1:9001",
     "format": "prettier --write './{src,playwright}/**/*.{js,jsx,ts,tsx}'",
     "lint": "npm run generate-tokens:dev && eslint ./src ./playwright --max-warnings=636 --report-unused-disable-directives",
-    "precompile": "npm run generate-tokens && npm run type-check && npm run build",
-    "prepublishOnly": "npm run precompile",
     "build-storybook": "npm run generate-tokens:dev && dotenvx run -- storybook build -c .storybook",
     "build-storybook:prod": "npm run generate-tokens && dotenvx run -f .env.production -- storybook build -c .storybook",
     "start:static": "npx http-server -p 9001 ./storybook-static",
@@ -33,7 +32,7 @@
     "clear-playwright-coverage-json": "rimraf ./playwright/coverage/*.json",
     "test:ct:coverage": "npm run generate-tokens:dev && npm run clear-playwright-cache && npm run clear-playwright-coverage-json && rimraf ./playwright/coverage && playwright test -c playwright-ct.config.ts",
     "pw:coverage:report": "nyc report --reporter=html --report-dir=./playwright/coverage --temp-dir=./playwright/coverage",
-    "build": "npm run clean-lib && rollup -c \"./rollup.config.mjs\" && npm run build:generate-package-json-files && npm run build:move-svg && npm run build:types",
+    "build": "npm run clean-lib && npm run generate-tokens && npm run type-check && rollup -c \"./rollup.config.mjs\" && npm run build:generate-package-json-files && npm run build:move-svg && npm run build:types",
     "build:generate-package-json-files": "node ./scripts/generate_package_json_files/index.js",
     "build:move-svg": "node ./scripts/copy_svg/index.js",
     "generate-tokens": "rimraf ./src/components/tokens-wrapper/static-tokens && node ./scripts/generate_tokens/generate_tokens.mjs",
@@ -51,7 +50,7 @@
   "homepage": "https://carbon.sage.com",
   "peerDependencies": {
     "@sage/design-tokens": "^4.17.0",
-    "@sage/design-tokens-fusion": "npm:@sage/design-tokens@^17.1.1",
+    "@sage/design-tokens-fusion": "npm:@sage/design-tokens@^17.4.0",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0",
     "styled-components": "^5.3.11"
@@ -79,7 +78,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-url": "^8.0.2",
     "@sage/design-tokens": "^4.17.0",
-    "@sage/design-tokens-fusion": "npm:@sage/design-tokens@^17.1.1",
+    "@sage/design-tokens-fusion": "npm:@sage/design-tokens@^17.4.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
@@ -128,7 +127,7 @@
     "babel-jest": "^29.7.0",
     "babel-plugin-dev-expression": "^0.2.3",
     "browserslist": "^4.26.3",
-    "chromatic": "^6.17.4",
+    "chromatic": "13.3.3",
     "conventional-changelog-conventionalcommits": "^8.0.0",
     "core-js": "^3.45.1",
     "css-loader": "^6.8.1",