Merge branch 'refs/heads/main' into florianduros/dropdown

.github/workflows/analysis.yml

@@ -8,8 +8,8 @@ jobs:
     name: "Lint"
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+      - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
         with:
           cache: "yarn"
       - name: Install deps
@@ -22,16 +22,16 @@ jobs:
     name: "Unit test"
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+      - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
         with:
           cache: "yarn"
       - name: Install deps
         run: yarn install --frozen-lockfile
       - name: Test
         run: "yarn run test --coverage"
       - name: Upload Artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4
         with:
           name: coverage
           path: |
@@ -46,18 +46,18 @@ jobs:
     name: "Test end-to-end"
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+      - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
         with:
           cache: "yarn"
       - name: Install deps
         run: yarn install --frozen-lockfile
       - name: Build Storybook
         run: yarn build-storybook
       - name: Get Playwright version
-        run: echo "PLAYWRIGHT_VERSION=$(yarn info @playwright/test -A --json | jq -r .data.version)" >> $GITHUB_ENV
+        run: echo "PLAYWRIGHT_VERSION=$(yarn list --pattern @playwright/test --depth=0 --json --non-interactive --no-progress | jq -r '.data.trees[].name')" >> $GITHUB_ENV
       - name: Cache Playwright binaries
-        uses: actions/cache@v3
+        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4
         id: playwright-cache
         with:
           path: |
@@ -73,7 +73,7 @@ jobs:
           run: yarn playwright test -j 100%
       - name: Upload Playwright report
         if: always()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4
         with:
           name: html-report--attempt-${{ github.run_attempt }}
           path: playwright-report

.github/workflows/npm_release.yml

@@ -18,12 +18,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 🧮 Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
         with:
           token: ${{ secrets.ELEMENT_BOT_TOKEN }}
 
       - name: 🔧 Set up node environment
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
         with:
           cache: "yarn"
 
@@ -41,13 +41,13 @@ jobs:
           git push
       - name: 🚀 Publish to npm
         id: npm-publish
-        uses: JS-DevTools/npm-publish@v1
+        uses: JS-DevTools/npm-publish@19c28f1ef146469e409470805ea4279d47c3d35c # v3
         with:
           token: ${{ secrets.ELEMENT_NPM_TOKEN }}
           access: public
 
       - name: 🧬 Create release
-        uses: actions/create-release@v1
+        uses: actions/create-release@0cb9c9b65d5d1901c1f53e5e66eaf4afd303e70e # v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:

.github/workflows/storybook.yml

@@ -14,7 +14,7 @@ jobs:
     concurrency:
       group: ${{ github.workflow }}-${{ github.ref }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
         with:
           submodules: true
           fetch-depth: 0
@@ -23,7 +23,7 @@ jobs:
         run: yarn && yarn run build-storybook
 
       - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@4f9cc6602d3f66b9c108549d475ec49e8ef4d45e # v4
         # If you're changing the branch from main,
         # also change the `main` in `refs/heads/main`
         # below accordingly.

.node-version

@@ -1 +1 @@
-20.13.1
+20.15.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/compound-web.js",
@@ -53,7 +53,7 @@
     "@fontsource/inter": "^5.0.8",
     "@playwright/test": "^1.41.1",
     "@storybook/addon-a11y": "^8.1.1",
-    "@storybook/addon-designs": "8.0.1",
+    "@storybook/addon-designs": "8.0.3",
     "@storybook/addon-essentials": "^8.1.1",
     "@storybook/addon-interactions": "^8.1.1",
     "@storybook/addon-links": "^8.1.1",
@@ -62,28 +62,29 @@
     "@storybook/react": "^8.1.1",
     "@storybook/react-vite": "^8.1.1",
     "@storybook/test": "^8.1.1",
+    "@testing-library/dom": "^10.3.2",
     "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@tsconfig/node18": "^18.2.2",
     "@tsconfig/vite-react": "^2.0.1",
     "@types/eslint": "^8.44.2",
     "@types/node": "^20.6.2",
     "@types/react": "^18.2.21",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@typescript-eslint/parser": "^6.7.0",
-    "@vector-im/compound-design-tokens": "^1.6.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "@vector-im/compound-design-tokens": "^1.6.1",
     "@vitejs/plugin-react": "^4.0.4",
-    "@vitest/coverage-v8": "^0.34.4",
+    "@vitest/coverage-v8": "^2.0.0",
     "browserslist-to-esbuild": "^1.2.0",
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-matrix-org": "^1.2.1",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.8.0",
     "jsdom": "^22.1.0",
-    "prettier": "3.0.3",
+    "prettier": "3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.3.1",
     "resize-observer-polyfill": "^1.5.1",
@@ -92,19 +93,19 @@
     "storybook": "^8.1.1",
     "stylelint": "^15.10.3",
     "stylelint-config-standard": "^34.0.0",
-    "stylelint-plugin-defensive-css": "^0.9.1",
+    "stylelint-plugin-defensive-css": "^0.10.0",
     "stylelint-use-logical": "^2.1.0",
     "stylelint-value-no-unknown-custom-properties": "^4.0.0",
     "typescript": "^5.2.2",
     "vite": "^5.2.11",
     "vite-plugin-dts": "^3.5.3",
-    "vitest": "^1.6.0"
+    "vitest": "^2.0.0"
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.9",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-form": "^0.0.3",
+    "@radix-ui/react-form": "^0.1.0",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
@@ -117,7 +118,7 @@
     "@fontsource/inconsolata": "^5",
     "@fontsource/inter": "^5",
     "@types/react": "*",
-    "@vector-im/compound-design-tokens": ">=1.0.0 <2.0.0",
+    "@vector-im/compound-design-tokens": ">=1.6.1 <2.0.0",
     "react": "^17 || ^18"
   },
   "peerDependenciesMeta": {
@@ -126,7 +127,7 @@
     }
   },
   "resolutions": {
-    "jackspeak": "2.1.1",
+    "jackspeak": "2.3.6",
     "@radix-ui/react-id": "1.1.0"
   }
 }

playwright/Dockerfile

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.41.1-jammy
+FROM mcr.microsoft.com/playwright:v1.45.2-jammy
 
 # Switch to a non-root user with the same IDs as those of the user on the host
 # system, to avoid needlessly giving the tests root access

renovate.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:base", "group:allNonMajor", "schedule:weekly"],
+  "packageRules": [
+    {
+      "groupName": "GitHub Actions",
+      "matchDepTypes": ["action"],
+      "pinDigests": true,
+      "extends": ["schedule:monthly"]
+    },
+    {
+      "groupName": "Compound design tokens",
+      "matchDepNames": ["@vector-im/compound-design-tokens"],
+      "schedule": "before 5am on Tuesday and Friday"
+    },
+    {
+      "groupName": "Vaul",
+      "matchDepNames": ["vaul"],
+      "extends": ["schedule:monthly"],
+      "prHeader": "Please review menus on mobile for regressions."
+    }
+  ],
+  "semanticCommits": "disabled"
+}

src/@types/modules.d.ts

@@ -0,0 +1,7 @@
+// This file is used to include type declarations from non-@types packages.
+// This is better than setting them in the .compilerOptions.types field of
+// tsconfig.json, because then you would override the default behavior of
+// automatically including declarations from @types packages, and have to set
+// each one up manually.
+
+/// <reference types="vite/client" />

src/components/Form/Controls/Action/Action.test.tsx

@@ -15,11 +15,12 @@ limitations under the License.
 */
 
 import { vi, describe, it, expect } from "vitest";
-import { fireEvent, getByLabelText, render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import React from "react";
 import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
 
 import { ActionInput } from "./Action";
+import userEvent from "@testing-library/user-event";
 
 describe("ActionInput", () => {
   it("renders", () => {
@@ -35,20 +36,19 @@ describe("ActionInput", () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it("trigger the action", () => {
+  it("trigger the action", async () => {
+    const user = userEvent.setup();
     const spy = vi.fn();
 
-    const { container } = render(
+    render(
       <ActionInput
         Icon={ChatIcon}
         actionLabel="Click me!"
         onActionClick={spy}
       />,
     );
 
-    const actionBtn = getByLabelText(container, "Click me!");
-
-    fireEvent.click(actionBtn);
+    await user.click(screen.getByRole("button", { name: "Click me!" }));
 
     expect(spy).toHaveBeenCalledTimes(1);
   });

src/components/Form/Controls/Action/Action.tsx

@@ -64,7 +64,6 @@ export const ActionInput = forwardRef<HTMLInputElement, Props>(
             className={styles.action}
             onClick={onActionClick}
             aria-controls={id}
-            aria-label={actionLabel}
           >
             <Icon aria-hidden />
           </button>

src/components/Form/Controls/Action/__snapshots__/Action.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`ActionInput > renders 1`] = `
     />
     <button
       aria-controls=":r0:"
-      aria-label="Click me!"
+      aria-labelledby=":r1:"
       class="_action_1689d3"
       type="button"
     >