Merge pull request #31132 from element-hq/midhun/module-impl/builtin

Module API Implementation: Builtins

.github/workflows/build.yml

@@ -66,7 +66,7 @@ jobs:
               run: VERSION=$(scripts/get-version-from-git.sh) yarn build
 
             - name: Upload Artifact
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
               with:
                   name: webapp-${{ matrix.image }}
                   path: webapp

.github/workflows/build_debian.yaml

@@ -62,7 +62,7 @@ jobs:
                   dpkg-gencontrol -v"$VERSION" -ldebian/tmp/DEBIAN/changelog
                   dpkg-deb -Zxz --root-owner-group --build debian/tmp element-web.deb
 
-            - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+            - uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
               with:
                   name: element-web.deb
                   path: element-web.deb

.github/workflows/build_develop.yml

@@ -53,7 +53,7 @@ jobs:
 
             - run: mv dist/element-*.tar.gz dist/develop.tar.gz
 
-            - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+            - uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
               with:
                   name: webapp
                   path: dist/develop.tar.gz

.github/workflows/end-to-end-tests-netlify.yaml

@@ -25,7 +25,7 @@ jobs:
             actions: read
         steps:
             - name: Download HTML report
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}

.github/workflows/end-to-end-tests.yaml

@@ -74,7 +74,7 @@ jobs:
               run: VERSION=$(scripts/get-version-from-git.sh) yarn build
 
             - name: Upload Artifact
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
               with:
                   name: webapp
                   path: webapp
@@ -128,7 +128,7 @@ jobs:
                   repository: element-hq/element-web
 
             - name: 📥 Download artifact
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6
               with:
                   name: webapp
                   path: webapp
@@ -172,7 +172,7 @@ jobs:
 
             - name: Upload blob report to GitHub Actions Artifacts
               if: always()
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
               with:
                   name: all-blob-reports-${{ matrix.project }}-${{ matrix.runner }}
                   path: blob-report
@@ -212,7 +212,7 @@ jobs:
 
             - name: Download blob reports from GitHub Actions Artifacts
               if: inputs.skip != true
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6
               with:
                   pattern: all-blob-reports-*
                   path: all-blob-reports
@@ -228,7 +228,7 @@ jobs:
             # Upload the HTML report even if one of our reporters fails, this can happen when stale screenshots are detected
             - name: Upload HTML report
               if: always() && inputs.skip != true
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
               with:
                   name: html-report
                   path: playwright-report

.github/workflows/netlify.yaml

@@ -28,7 +28,7 @@ jobs:
                       Exercise caution. Use test accounts.
 
             - name: 📥 Download artifact
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}

.github/workflows/shared-component-publish.yaml

@@ -21,8 +21,14 @@ jobs:
                   cache: "yarn"
                   node-version-file: ".node-version"
                   registry-url: "https://registry.npmjs.org"
-              env:
-                  NODE_AUTH_TOKEN: ${{ secrets.ELEMENT_NPM_TOKEN }}
+
+            # Ensure npm 11.5.1 or later is installed
+            - name: Update npm
+              run: npm install -g npm@latest
+
+            # Need to setup element web too as it needs the translations
+            - name: 🛠️ Setup EW
+              run: yarn install --pure-lockfile
 
             - name: 🛠️ Setup
               # When running `install` it also calls the `prepare` step which generates
@@ -31,4 +37,4 @@ jobs:
 
             - name: 🚀 Publish to npm
               working-directory: packages/shared-components
-              run: npm publish --access public --provenance
+              run: npm publish --access public --tag test --provenance

.github/workflows/shared-component-visual-tests-netlify.yaml

@@ -27,7 +27,7 @@ jobs:
               run: "sudo apt-get install -y tree"
 
             - name: Download Diffs
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}

.github/workflows/shared-component-visual-tests.yaml

@@ -34,10 +34,6 @@ jobs:
             - name: Install element web dependencies
               run: yarn install --frozen-lockfile
 
-            - name: Build Element Web resources
-              # Needed to prepare language files
-              run: "yarn build:res"
-
             - name: Install dependencies
               working-directory: packages/shared-components
               run: yarn install --frozen-lockfile
@@ -70,7 +66,7 @@ jobs:
 
             - name: Upload received images & diffs
               if: always()
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
               with:
                   name: received-images
                   path: packages/shared-components/playwright/shared-component-received

.github/workflows/static_analysis.yaml

@@ -35,10 +35,6 @@ jobs:
             - name: Typecheck
               run: "yarn run lint:types"
 
-            - name: Build Element Web resources
-              # Needed to prepare language files for shared components
-              run: "yarn build:res"
-
             - name: Install Shared Component Dependencies
               run: "yarn --cwd packages/shared-components install"
 
@@ -91,10 +87,6 @@ jobs:
             - name: Run Linter
               run: "yarn run lint:js"
 
-            - name: Build Element Web resources
-              # Needed to prepare language files for shared components
-              run: "yarn build:res"
-
             - name: Install Shared Component Deps
               run: "yarn --cwd packages/shared-components install --frozen-lockfile"
 

.github/workflows/tests.yml

@@ -29,8 +29,8 @@ env:
 permissions: {}
 
 jobs:
-    jest:
-        name: Jest
+    jest_ew:
+        name: Jest (Element Web)
         runs-on: ubuntu-24.04
         strategy:
             fail-fast: false
@@ -84,7 +84,7 @@ jobs:
 
             - name: Upload Artifact
               if: env.ENABLE_COVERAGE == 'true'
-              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
               with:
                   name: coverage-${{ matrix.runner }}
                   path: |
@@ -93,13 +93,13 @@ jobs:
 
     complete:
         name: jest-tests
-        needs: jest
+        needs: jest_ew
         if: always()
         runs-on: ubuntu-24.04
         permissions:
             statuses: write
         steps:
-            - if: needs.jest.result != 'skipped' && needs.jest.result != 'success'
+            - if: needs.jest_ew.result != 'skipped' && needs.jest_ew.result != 'success'
               run: exit 1
 
             - name: Skip SonarCloud in merge queue
@@ -112,3 +112,56 @@ jobs:
                   context: SonarCloud Code Analysis
                   sha: ${{ github.sha }}
                   target_url: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
+
+    jest_sc:
+        name: Jest (Shared Components)
+        runs-on: ubuntu-24.04
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              with:
+                  repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-web' || github.repository }}
+
+            - name: Yarn cache
+              uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
+              with:
+                  node-version: "lts/*"
+                  cache: "yarn"
+
+            - name: Install EW Deps
+              run: "yarn install"
+
+            - name: Install Shared Component Deps
+              working-directory: "packages/shared-components"
+              run: "yarn install"
+
+            - name: Jest Cache
+              uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
+              with:
+                  path: /tmp/jest_cache
+                  key: ${{ hashFiles('**/yarn.lock') }}
+
+            - name: Get number of CPU cores
+              id: cpu-cores
+              uses: SimenB/github-actions-cpu-cores@97ba232459a8e02ff6121db9362b09661c875ab8 # v2
+
+            - name: Run tests
+              working-directory: "packages/shared-components"
+              run: |
+                  yarn test \
+                      --coverage=${{ env.ENABLE_COVERAGE }} \
+                      --ci \
+                      --max-workers ${{ steps.cpu-cores.outputs.count }} \
+                      --cacheDirectory /tmp/jest_cache
+              env:
+                  # tell jest to use coloured output
+                  FORCE_COLOR: true
+
+            - name: Upload Artifact
+              if: env.ENABLE_COVERAGE == 'true'
+              uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
+              with:
+                  name: coverage-sharedcomponents
+                  path: |
+                      packages/shared-components/coverage
+                      !packages/shared-components/coverage/lcov-report

.gitignore

@@ -36,3 +36,4 @@ storybook-static
 
 /packages/shared-components/node_modules
 /packages/shared-components/dist
+/packages/shared-components/src/i18nKeys.d.ts

.node-version

@@ -1 +1 @@
-22
+24

Dockerfile

@@ -1,7 +1,7 @@
 # syntax=docker.io/docker/dockerfile:1.19-labs@sha256:dce1c693ef318bca08c964ba3122ae6248e45a1b96d65c4563c8dc6fe80349a2
 
 # Builder
-FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:cd951bb228ddf85882951d4bf4acefc5314eb2eb66eee002256f4bb17c2293e3 AS builder
+FROM --platform=$BUILDPLATFORM node:24-bullseye@sha256:c102f42d665c164b4e5e5549813b1547ac8a9f1d343c7d17ddac106905a1c30b AS builder
 
 # Support custom branch of the js-sdk. This also helps us build images of element-web develop.
 ARG USE_CUSTOM_SDKS=false
@@ -19,7 +19,7 @@ RUN /src/scripts/docker-package.sh
 RUN cp /src/config.sample.json /src/webapp/config.json
 
 # App
-FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:304079937327a6490d5c89df47c8951d76f05b346d4c6e3b10cba2e266cd4904
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:65a7f97c299b919190e96e38e2ff8358132732000d3bc5c00c07cc8763fca53f
 
 # Need root user to install packages & manipulate the usr directory
 USER root

jest.config.ts

@@ -17,7 +17,7 @@ const config: Config = {
         // This is needed to be able to load dual CJS/ESM WASM packages e.g. rust crypto & matrix-wywiwyg
         customExportConditions: ["browser", "node"],
     },
-    testMatch: ["<rootDir>/test/**/*-test.[tj]s?(x)", "<rootDir>/packages/*/src/**/*.test.[t]s?(x)"],
+    testMatch: ["<rootDir>/test/**/*-test.[tj]s?(x)"],
     globalSetup: "<rootDir>/test/globalSetup.ts",
     setupFiles: ["jest-canvas-mock", "web-streams-polyfill/polyfill"],
     setupFilesAfterEnv: ["<rootDir>/test/setupTests.ts"],
@@ -40,6 +40,7 @@ const config: Config = {
         "^!!raw-loader!.*": "jest-raw-loader",
         "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
         "^fetch-mock$": "<rootDir>/node_modules/fetch-mock",
+        "counterpart": "<rootDir>/node_modules/counterpart",
     },
     transformIgnorePatterns: [
         "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs)).+$",

package.json

@@ -69,19 +69,21 @@
     },
     "resolutions": {
         "**/pretty-format/react-is": "19.2.0",
-        "@playwright/test": "1.56.0",
+        "@playwright/test": "1.56.1",
         "@types/react": "19.2.2",
-        "@types/react-dom": "19.2.1",
+        "@types/react-dom": "19.2.2",
+        "@types/serve-static": "1.15.10",
         "oidc-client-ts": "3.3.0",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001750",
+        "caniuse-lite": "1.0.30001751",
         "testcontainers": "^11.0.0",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@element-hq/element-web-module-api": "1.4.1",
+        "@element-hq/element-web-module-api": "1.5.0",
+        "@element-hq/web-shared-components": "file:packages/shared-components",
         "@fontsource/inconsolata": "^5",
         "@fontsource/inter": "^5",
         "@formatjs/intl-segmenter": "^11.5.7",
@@ -103,7 +105,6 @@
         "browserslist": "^4.23.2",
         "classnames": "^2.2.6",
         "commonmark": "^0.31.0",
-        "counterpart": "^0.18.6",
         "css-tree": "^3.0.0",
         "diff-dom": "^5.0.0",
         "diff-match-patch": "^1.0.5",
@@ -138,7 +139,7 @@
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.275.1",
+        "posthog-js": "1.280.1",
         "qrcode": "1.5.4",
         "re-resizable": "6.11.2",
         "react": "^19.0.0",
@@ -181,12 +182,11 @@
         "@babel/preset-typescript": "^7.12.7",
         "@babel/runtime": "^7.12.5",
         "@casualbot/jest-sonar-reporter": "2.2.7",
-        "@element-hq/element-call-embedded": "0.16.0",
+        "@element-hq/element-call-embedded": "0.16.1",
         "@element-hq/element-web-playwright-common": "^2.0.0",
         "@peculiar/webcrypto": "^1.4.3",
         "@playwright/test": "^1.50.1",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
-        "@rrweb/types": "^2.0.0-alpha.18",
         "@sentry/webpack-plugin": "^4.0.0",
         "@storybook/react-vite": "^9.1.10",
         "@stylistic/eslint-plugin": "^5.0.0",
@@ -217,7 +217,7 @@
         "@types/qrcode": "^1.3.5",
         "@types/react": "19.2.2",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.2.1",
+        "@types/react-dom": "19.2.2",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.16.0",
         "@types/sdp-transform": "^2.4.10",

packages/shared-components/.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+    root: true,
     plugins: ["matrix-org", "eslint-plugin-react-compiler"],
     extends: [
         "plugin:matrix-org/babel",

packages/shared-components/.prettierignore

@@ -1 +1,2 @@
 dist/
+i18n/i18nKeys.d.ts

packages/shared-components/babel.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+    sourceMaps: true,
+    presets: [
+        [
+            "@babel/preset-env",
+            {
+                include: ["@babel/plugin-transform-class-properties"],
+            },
+        ],
+        ["@babel/preset-typescript", { allowDeclareFields: true }],
+        "@babel/preset-react",
+    ],
+    plugins: [
+        "@babel/plugin-proposal-export-default-from",
+        "@babel/plugin-transform-numeric-separator",
+        "@babel/plugin-transform-object-rest-spread",
+        "@babel/plugin-transform-optional-chaining",
+        "@babel/plugin-transform-nullish-coalescing-operator",
+        "@babel/plugin-transform-runtime",
+    ],
+};

packages/shared-components/jest.config.ts

@@ -0,0 +1,58 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { env } from "process";
+
+import type { Config } from "jest";
+
+const config: Config = {
+    testEnvironment: "jsdom",
+    testEnvironmentOptions: {
+        url: "http://localhost/",
+    },
+    testMatch: ["<rootDir>/src/**/*.test.[tj]s?(x)"],
+    setupFilesAfterEnv: ["<rootDir>/src/test/setupTests.ts"],
+    moduleNameMapper: {
+        // Support CSS module
+        "\\.(module.css)$": "identity-obj-proxy",
+        "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
+        "\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
+        "\\.svg$": "<rootDir>/__mocks__/svg.js",
+        "\\$webapp/i18n/languages.json": "<rootDir>/../../__mocks__/languages.json",
+        "^react$": "<rootDir>/node_modules/react",
+        "^react-dom$": "<rootDir>/node_modules/react-dom",
+        "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
+        "context-filter-polyfill": "<rootDir>/__mocks__/empty.js",
+        "workers/(.+)Factory": "<rootDir>/__mocks__/workerFactoryMock.js",
+    },
+    transformIgnorePatterns: [
+        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs)).+$",
+    ],
+    collectCoverageFrom: [
+        "<rootDir>/src/**/*.{js,ts,tsx}",
+        "<rootDir>/packages/**/*.{js,ts,tsx}",
+        // Coverage chokes on type definition files
+        "!<rootDir>/src/**/*.d.ts",
+    ],
+    coverageReporters: ["text-summary", "lcov"],
+    testResultsProcessor: "@casualbot/jest-sonar-reporter",
+    prettierPath: null,
+    moduleDirectories: ["node_modules", "./src/test/utils"],
+};
+
+// if we're running under GHA, enable the GHA reporter
+if (env["GITHUB_ACTIONS"] !== undefined) {
+    const reporters: Config["reporters"] = [["github-actions", { silent: false }], "summary"];
+
+    // if we're running against the develop branch, also enable the slow test reporter
+    if (env["GITHUB_REF"] == "refs/heads/develop") {
+        reporters.push("<rootDir>/test/slowReporter.cjs");
+    }
+    config.reporters = reporters;
+}
+
+export default config;

packages/shared-components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@element-hq/web-shared-components",
-    "version": "0.0.0-test.6",
+    "version": "0.0.0-test.7",
     "description": "Shared components for Element",
     "author": "New Vector Ltd.",
     "repository": {
@@ -19,6 +19,10 @@
                 "types": "./dist/element-web-shared-components.d.ts",
                 "default": "./dist/element-web-shared-components.mjs"
             }
+        },
+        "./dist/element-web-shared-components.css": {
+            "require": "./dist/element-web-shared-components.css",
+            "import": "./dist/element-web-shared-components.css"
         }
     },
     "types": "dist/element-web-shared-components.d.ts",
@@ -30,8 +34,8 @@
         "package.json"
     ],
     "scripts": {
-        "postinstall": "patch-package",
-        "prepare": "vite build",
+        "test": "jest",
+        "prepare": "patch-package && yarn --cwd ../.. build:res && ts-node scripts/gatherTranslationKeys.ts && vite build",
         "storybook": "storybook dev -p 6007",
         "build-storybook": "storybook build",
         "lint": "yarn lint:types && yarn lint:js",
@@ -42,9 +46,13 @@
         "test:storybook:update": "playwright-screenshots --entrypoint yarn --with-node-modules && playwright-screenshots --entrypoint /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
     },
     "dependencies": {
+        "classnames": "^2.5.1",
+        "counterpart": "^0.18.6",
+        "lodash": "^4.17.21",
         "matrix-web-i18n": "^3.4.0",
         "patch-package": "^8.0.1",
-        "counterpart": "^0.18.6"
+        "react-merge-refs": "^3.0.2",
+        "temporal-polyfill": "^0.3.0"
     },
     "devDependencies": {
         "@storybook/addon-a11y": "^9.1.10",
@@ -53,13 +61,21 @@
         "@storybook/icons": "^1.6.0",
         "@storybook/react-vite": "^9.1.10",
         "@storybook/test-runner": "^0.23.0",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/react": "^16.3.0",
+        "@types/counterpart": "^0.18.4",
+        "@types/lodash": "^4.17.20",
+        "@types/react": "^19.2.2",
         "concurrently": "^9.2.1",
         "eslint": "8",
-        "eslint-plugin-storybook": "^9.1.10",
+        "eslint-plugin-matrix-org": "^3.0.0",
+        "eslint-plugin-storybook": "^10.0.0",
+        "jest": "^30.2.0",
         "jest-image-snapshot": "^6.5.1",
         "patch-package": "^8.0.1",
         "prettier": "^3.6.2",
         "storybook": "^9.1.10",
+        "ts-node": "^10.9.2",
         "typescript": "^5.9.3",
         "vite": "^7.1.9",
         "vite-plugin-dts": "^4.5.4",
@@ -68,5 +84,9 @@
     "engines": {
         "node": ">=20.0.0"
     },
-    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+    "peerDependencies": {
+        "@vector-im/compound-design-tokens": "^6.0.0",
+        "@vector-im/compound-web": "^8.2.5"
+    }
 }

packages/shared-components/scripts/gatherTranslationKeys.ts

@@ -0,0 +1,61 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+// Gathers all the translation keys from element-web's en_EN.json into a TypeScript type definition file
+// that exports a type `TranslationKey` which is a union of all supported translation keys.
+// This prevents having to import the json file and make typescript do the work as this results in vite-dts
+// generating an import to the json file in the .d.ts which doesn't work at runtime: this way, the type
+// gets put into the bundle.
+// XXX: It should *not* be in the 'src' directory, being a generated file, but if it isn't then the type
+// bundler won't bundle the types and will leave the file as a relative import, which will break.
+
+import * as fs from "fs";
+import * as path from "path";
+
+const i18nStringsPath = path.resolve(__dirname, "../../../src/i18n/strings/en_EN.json");
+const outPath = path.resolve(__dirname, "../src/i18nKeys.d.ts");
+
+function gatherKeys(obj: any, prefix: string[] = []): string[] {
+    if (typeof obj !== "object" || obj === null) return [];
+    let keys: string[] = [];
+    for (const key of Object.keys(obj)) {
+        const value = obj[key];
+
+        // add the path (for both leaves and intermediates as then we include plurals)
+        keys.push([...prefix, key].join("|"));
+        if (typeof value === "object" && value !== null) {
+            // If the value is an object, recurse
+            keys = keys.concat(gatherKeys(value, [...prefix, key]));
+        }
+    }
+    return keys;
+}
+
+function main() {
+    const json = JSON.parse(fs.readFileSync(i18nStringsPath, "utf8"));
+    const keys = gatherKeys(json);
+    const typeDef =
+        "/*\n" +
+        " * Copyright 2025 Element Creations Ltd.\n" +
+        " *\n" +
+        " * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial\n" +
+        " * Please see LICENSE files in the repository root for full details.\n" +
+        " */\n" +
+        "\n" +
+        "// This file is auto-generated by gatherTranslationKeys.ts\n" +
+        "// Do not edit manually.\n\n" +
+        "export type TranslationKey =\n" +
+        keys.map((k) => `    | \"${k}\"`).join("\n") +
+        ";\n";
+    fs.mkdirSync(path.dirname(outPath), { recursive: true });
+    fs.writeFileSync(outPath, typeDef, "utf8");
+    console.log(`Wrote ${keys.length} keys to ${outPath}`);
+}
+
+if (require.main === module) {
+    main();
+}

packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.module.css

@@ -6,7 +6,7 @@
  */
 
 .audioPlayer {
-    padding: var(--cpd-space-4x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x);
+    padding: var(--cpd-space-4x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x) !important;
 }
 
 .mediaInfo {

packages/shared-components/src/audio/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AudioPlayerView renders the audio player in default state 1`] = `
 <div>

packages/shared-components/src/audio/Clock/__snapshots__/Clock.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Clock renders the clock 1`] = `
 <div>

packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.module.css

@@ -6,6 +6,6 @@
  */
 
 .button {
-    border-radius: 32px;
-    background-color: var(--cpd-color-bg-subtle-primary);
+    border-radius: 32px !important;
+    background-color: var(--cpd-color-bg-subtle-primary) !important;
 }

packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PlayPauseButton renders the button in default state 1`] = `
 <div>

packages/shared-components/src/audio/SeekBar/__snapshots__/SeekBar.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Seekbar renders the clock 1`] = `
 <div>

packages/shared-components/src/avatar/AvatarWithDetails/__snapshots__/AvatarWithDetails.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AvatarWithDetails renders a textual event 1`] = `
 <div>

packages/shared-components/src/event-tiles/TextualEventView/__snapshots__/TextualEventView.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TextualEventView renders a textual event 1`] = `
 <div>

packages/shared-components/src/event-tiles/TextualEventView/index.ts

@@ -5,4 +5,4 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-export { TextualEventView } from "./TextualEventView";
+export { TextualEventView, type TextualEventViewSnapshot } from "./TextualEventView";

packages/shared-components/src/index.ts

@@ -21,12 +21,17 @@ export * from "./utils/Box";
 export * from "./utils/Flex";
 
 // Utils
-export { setLanguage } from "./utils/i18n";
+export * from "./utils/i18n";
 export * from "./utils/humanize";
 export * from "./utils/DateUtils";
 export * from "./utils/numbers";
+export * from "./utils/FormattingUtils";
 
 // MVVM
 export * from "./viewmodel";
 export * from "./useMockedViewModel";
 export * from "./useViewModel";
+
+// i18n (we must export this directly in order to not confuse the type bundler, it seems,
+// otherwise it will leave it as a relative import rather than bundling it)
+export type * from "./i18nKeys.d.ts";

packages/shared-components/src/message-body/MediaBody/MediaBody.module.css

@@ -7,7 +7,7 @@
 
 .mediaBody {
     background-color: var(--cpd-color-bg-subtle-secondary);
-    border-radius: var(--cpd-space-2x);
+    border-radius: var(--cpd-space-2x) !important;
     max-width: 243px; /* use max-width instead of width so it fits within right panels */
 
     font: var(--cpd-font-body-md-regular);

packages/shared-components/src/message-body/MediaBody/__snapshots__/MediaBody.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`MediaBody renders the media body 1`] = `
 <div>

packages/shared-components/src/pill-input/Pill/__snapshots__/Pill.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Pill renders the pill 1`] = `
 <div>

packages/shared-components/src/pill-input/PillInput/__snapshots__/PillInput.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PillInput renders only the input without children 1`] = `
 <div>

packages/shared-components/src/rich-list/RichItem/__snapshots__/RichItem.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`RichItem renders the item in default state 1`] = `
 <div>

packages/shared-components/src/rich-list/RichList/__snapshots__/RichList.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`RichItem renders the list 1`] = `
 <div>

packages/shared-components/src/test/setupTests.ts

@@ -0,0 +1,22 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import fetchMock from "fetch-mock-jest";
+
+import { setLanguage } from "../../src/utils/i18n";
+import en from "../../../../src/i18n/strings/en_EN.json";
+
+export function setupLanguageMock(): void {
+    fetchMock
+        .get("/i18n/languages.json", {
+            en: "en_EN.json",
+        })
+        .get("end:en_EN.json", en);
+}
+setupLanguageMock();
+
+setLanguage("en");

packages/shared-components/src/test/utils/jest-matrix-react.tsx

@@ -0,0 +1,47 @@
+/*
+Copyright 2025 Element Creations Ltd.
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+// Copied from element-web/test/test-utils because, seemingly, if we
+// set that as the modules directory to use it directly, it fails to
+// actually put the right thing in the context somehow.
+
+import React, { type ReactElement } from "react";
+// eslint-disable-next-line no-restricted-imports
+import { render, type RenderOptions } from "@testing-library/react";
+import { TooltipProvider } from "@vector-im/compound-web";
+
+const wrapWithTooltipProvider = (Wrapper: RenderOptions["wrapper"]) => {
+    return ({ children }: { children: React.ReactNode }) => {
+        if (Wrapper) {
+            return (
+                <Wrapper>
+                    <TooltipProvider>{children}</TooltipProvider>
+                </Wrapper>
+            );
+        } else {
+            return <TooltipProvider>{children}</TooltipProvider>;
+        }
+    };
+};
+
+const customRender = (ui: ReactElement, options: RenderOptions = {}): ReturnType<typeof render> => {
+    return render(ui, {
+        ...options,
+        wrapper: wrapWithTooltipProvider(options?.wrapper) as RenderOptions["wrapper"],
+    }) as ReturnType<typeof render>;
+};
+
+// eslint-disable-next-line no-restricted-imports
+export * from "@testing-library/react";
+
+/**
+ * This custom render function wraps your component with a TooltipProvider.
+ * See https://testing-library.com/docs/react-testing-library/setup/#custom-render
+ */
+export { customRender as render };

packages/shared-components/src/utils/i18n.test.ts

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import counterpart from "counterpart";
+
+import { registerTranslations, setMissingEntryGenerator, getLocale, setLocale } from "./i18n";
+
+describe("i18n utils", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("should wrap registerTranslations", () => {
+        jest.spyOn(counterpart, "registerTranslations");
+
+        registerTranslations("en", { test: "This is a test" });
+        expect(counterpart.registerTranslations).toHaveBeenCalledWith("en", { test: "This is a test" });
+    });
+
+    it("should wrap setMissingEntryGenerator", () => {
+        jest.spyOn(counterpart, "setMissingEntryGenerator");
+
+        const dummyFn = jest.fn();
+
+        setMissingEntryGenerator(dummyFn);
+        expect(counterpart.setMissingEntryGenerator).toHaveBeenCalledWith(dummyFn);
+    });
+
+    it("should wrap getLocale", () => {
+        jest.spyOn(counterpart, "getLocale");
+
+        getLocale();
+        expect(counterpart.getLocale).toHaveBeenCalled();
+    });
+
+    it("should wrap setLocale", () => {
+        jest.spyOn(counterpart, "setLocale");
+
+        setLocale("en");
+        expect(counterpart.setLocale).toHaveBeenCalledWith("en");
+    });
+});

packages/shared-components/src/utils/i18n.tsx

@@ -22,10 +22,10 @@
  * @return a React <span> component if any non-strings were used in substitutions, otherwise a string
  */
 import React from "react";
-import { type TranslationKey as _TranslationKey, KEY_SEPARATOR } from "matrix-web-i18n";
+import { KEY_SEPARATOR } from "matrix-web-i18n";
 import counterpart from "counterpart";
 
-import type Translations from "../../../../src/i18n/strings/en_EN.json";
+import type { TranslationKey } from "../index";
 
 // @ts-ignore - $webapp is a webpack resolve alias pointing to the output directory, see webpack config
 import webpackLangJsonUrl from "$webapp/i18n/languages.json";
@@ -45,16 +45,23 @@ counterpart.setSeparator(KEY_SEPARATOR);
 const FALLBACK_LOCALE = "en";
 counterpart.setFallbackLocale(FALLBACK_LOCALE);
 
-/**
- * A type representing the union of possible keys into the translation file using `|` delimiter to access nested fields.
- * @example `common|error` to access `error` within the `common` sub-object.
- * {
- *     "common": {
- *         "error": "Error"
- *     }
- * }
- */
-export type TranslationKey = _TranslationKey<typeof Translations>;
+// export wrappers around these functions because if we used counterpart directly from
+// element-web, it operates on a different instance of counterpart
+export function registerTranslations(locale: string, data: object): void {
+    counterpart.registerTranslations(locale, data);
+}
+
+export function setMissingEntryGenerator(callback: (value: string) => void): void {
+    counterpart.setMissingEntryGenerator(callback);
+}
+
+export function getLocale(): string {
+    return counterpart.getLocale();
+}
+
+export function setLocale(value: string): string {
+    return counterpart.setLocale(value);
+}
 
 // Function which only purpose is to mark that a string is translatable
 // Does not actually do anything. It's helpful for automatic extraction of translatable strings

packages/shared-components/tsconfig.json

@@ -17,7 +17,7 @@
         "lib": ["es2022", "es2024.promise", "dom", "dom.iterable"],
         "strict": true,
         "paths": {
-            "jest-matrix-react": ["../../test/test-utils/jest-matrix-react"],
+            "jest-matrix-react": ["./src/test/utils/jest-matrix-react"],
             "rollup/parseAst": ["./node_modules/rollup/dist/parseAst"]
         }
     },

packages/shared-components/vite.config.js

@@ -26,7 +26,7 @@ export default defineConfig({
         rollupOptions: {
             // make sure to externalize deps that shouldn't be bundled
             // into your library
-            external: ["react", "react-dom"],
+            external: ["react", "react-dom", "@vector-im/compound-design-tokens", "@vector-im/compound-web"],
             output: {
                 // Provide global variables to use in the UMD build
                 // for externalized deps
@@ -43,5 +43,12 @@ export default defineConfig({
             $webapp: resolve(__dirname, "..", "..", "webapp"),
         },
     },
-    plugins: [dts({ rollupTypes: true, include: ["src/**/*.{ts,tsx}"], copyDtsFiles: true })],
+    plugins: [
+        dts({
+            rollupTypes: true,
+            include: ["src/**/*.{ts,tsx}"],
+            exclude: ["src/**/*.test.{ts,tsx}"],
+            copyDtsFiles: true,
+        }),
+    ],
 });

playwright/e2e/audio-player/audio-player.spec.ts

@@ -92,7 +92,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             css: `
                 /* The timestamp is of inconsistent width depending on the time the test runs at */
                 .mx_MessageTimestamp {
-                    display: none !important;
+                    visibility: hidden;
                 }
                 /* The MAB showing up on hover is not needed for the test */
                 .mx_MessageActionBar {

playwright/e2e/chat-export/html-export.spec.ts

@@ -124,11 +124,12 @@ test.describe("HTML Export", () => {
             const zip = await extractZipFileToPath(zipPath, dirPath);
             await page.goto(`file://${dirPath}/${Object.keys(zip.files)[0]}/messages.html`);
             await expect(page).toMatchScreenshot("html-export.png", {
-                mask: [
-                    // We need to mask the whole thing because the width of the time part changes
-                    page.locator(".mx_TimelineSeparator"),
-                    page.locator(".mx_MessageTimestamp"),
-                ],
+                mask: [page.locator(".mx_TimelineSeparator")],
+                css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
+                `,
             });
         },
     );

playwright/e2e/composer/CIDER.spec.ts

@@ -76,6 +76,57 @@ test.describe("Composer", () => {
             await expect(page.locator(".mx_EventTile_body", { hasText: "😇" })).toBeVisible();
         });
 
+        test.describe("render emoji picker with larger viewport height", async () => {
+            test.use({ viewport: { width: 1280, height: 720 } });
+            test("render emoji picker", { tag: "@screenshot" }, async ({ page, app }) => {
+                await app.getComposer(false).getByRole("button", { name: "Emoji" }).click();
+                await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker.png");
+            });
+        });
+
+        test.describe("render emoji picker with small viewport height", async () => {
+            test.use({ viewport: { width: 1280, height: 360 } });
+            test("render emoji picker", { tag: "@screenshot" }, async ({ page, app }) => {
+                await app.getComposer(false).getByRole("button", { name: "Emoji" }).click();
+                await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker-small.png");
+            });
+        });
+
+        test("should have focus lock in emoji picker", async ({ page, app }) => {
+            const emojiButton = app.getComposer(false).getByRole("button", { name: "Emoji" });
+
+            // Open emoji picker by clicking the button
+            await emojiButton.click();
+
+            // Wait for emoji picker to be visible
+            const emojiPicker = page.getByTestId("mx_EmojiPicker");
+            await expect(emojiPicker).toBeVisible();
+
+            // Get initial focused element (should be search input)
+            const searchInput = emojiPicker.getByRole("textbox", { name: "Search" });
+            await expect(searchInput).toBeFocused();
+
+            // Try to tab multiple times - focus should stay within emoji picker
+            await page.keyboard.press("Tab");
+            await page.keyboard.press("Tab");
+            await page.keyboard.press("Tab");
+            await page.keyboard.press("Tab");
+            await page.keyboard.press("Tab");
+
+            // Verify we're still within the emoji picker (not back to composer)
+            const focusedElement = await page.evaluate(() => document.activeElement?.closest(".mx_EmojiPicker"));
+            expect(focusedElement).not.toBeNull();
+
+            // Close with Escape key
+            await page.keyboard.press("Escape");
+
+            // Verify emoji picker is closed
+            await expect(emojiPicker).not.toBeVisible();
+
+            // Verify focus returns to emoji button
+            await expect(emojiButton).toBeFocused();
+        });
+
         test.describe("when Control+Enter is required to send", () => {
             test.beforeEach(async ({ app }) => {
                 await app.settings.setValue("MessageComposerInput.ctrlEnterToSend", null, SettingLevel.ACCOUNT, true);

playwright/e2e/editing/editing.spec.ts

@@ -138,7 +138,11 @@ test.describe("Editing", () => {
 
             // Take a snapshot of the dialog
             await expect(dialog).toMatchScreenshot("message-edit-history-dialog.png", {
-                mask: [page.locator(".mx_MessageTimestamp")],
+                css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
+                `,
             });
 
             {

playwright/e2e/messages/messages.spec.ts

@@ -59,9 +59,11 @@ async function editMessage(page: Page, message: Locator, newMsg: string): Promis
 }
 
 const screenshotOptions = (page?: Page) => ({
-    mask: page ? [page.locator(".mx_MessageTimestamp")] : undefined,
     // Hide the jump to bottom button in the timeline to avoid flakiness
     css: `
+        .mx_MessageTimestamp {
+            visibility: hidden;
+        }
         .mx_JumpToBottomButton {
             display: none !important;
         }

playwright/e2e/modules/custom-component.spec.ts

@@ -11,10 +11,12 @@ import fs from "node:fs";
 import { test, expect } from "../../element-web-test";
 
 const screenshotOptions = (page: Page) => ({
-    mask: [page.locator(".mx_MessageTimestamp")],
     // Hide the jump to bottom button in the timeline to avoid flakiness
     // Exclude timestamp and read marker from snapshot
     css: `
+        .mx_MessageTimestamp {
+            visibility: hidden;
+        }
         .mx_JumpToBottomButton {
             display: none !important;
         }

playwright/e2e/permalinks/permalinks.spec.ts

@@ -93,10 +93,12 @@ test.describe("permalinks", () => {
         getPill(timeline, danielleId);
 
         await expect(timeline).toMatchScreenshot("permalink-rendering.png", {
-            mask: [
             // Exclude timestamps from the snapshot, for consistency.
-                page.locator(".mx_MessageTimestamp"),
-            ],
+            css: `
+                .mx_MessageTimestamp {
+                    visibility: hidden;
+                }
+            `,
         });
     });
 });

playwright/e2e/polls/polls.spec.ts

@@ -121,7 +121,11 @@ test.describe("Polls", () => {
             .filter({ hasText: pollParams.title })
             .getAttribute("data-scroll-tokens");
         await expect(getPollTile(page, pollId)).toMatchScreenshot("Polls_Timeline_tile_no_votes.png", {
-            mask: [page.locator(".mx_MessageTimestamp")],
+            css: `
+                .mx_MessageTimestamp {
+                    visibility: hidden;
+                }
+            `,
         });
 
         // Bot votes 'Maybe' in the poll
@@ -293,7 +297,11 @@ test.describe("Polls", () => {
             await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
                 "ThreadView_with_a_poll_on_bubble_layout.png",
                 {
-                    mask: [page.locator(".mx_MessageTimestamp")],
+                    css: `
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
+                    `,
                 },
             );
 
@@ -303,7 +311,11 @@ test.describe("Polls", () => {
             await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
                 "ThreadView_with_a_poll_on_group_layout.png",
                 {
-                    mask: [page.locator(".mx_MessageTimestamp")],
+                    css: `
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
+                    `,
                 },
             );
 

playwright/e2e/right-panel/file-panel.spec.ts

@@ -126,7 +126,12 @@ test.describe("FilePanel", () => {
             // Take a snapshot of file tiles list on FilePanel
             await expect(filePanelMessageList).toMatchScreenshot("file-tiles-list.png", {
                 // Exclude timestamps & flaky seek bar from snapshot
-                mask: [page.locator(".mx_MessageTimestamp"), page.getByTestId("audio-player-seek")],
+                mask: [page.getByTestId("audio-player-seek")],
+                css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
+                `,
             });
         });
 

playwright/e2e/settings/preferences-user-settings-tab.spec.ts

@@ -31,8 +31,13 @@ test.describe("Preferences user settings tab", () => {
         // Assert that the top heading is rendered
         await expect(tab.getByRole("heading", { name: "Preferences" })).toBeVisible();
         await expect(tab).toMatchScreenshot("Preferences-user-settings-tab-should-be-rendered-properly-1.png", {
-            // masked due to daylight saving time
+            // masked with fixed-width due to daylight saving time making the text content vary
             mask: [tab.locator("#mx_dropdownUserTimezone_value")],
+            css: `
+                #mx_dropdownUserTimezone_value {
+                    width: 200px;
+                }
+            `,
         });
     });
 

playwright/e2e/sliding-sync/sliding-sync.spec.ts

@@ -361,7 +361,9 @@ test.describe("Sliding Sync", () => {
         await expect(page.locator(".mx_ReplyPreview")).toBeVisible();
 
         // now click on the permalink for Permalink me
-        await page.locator(".mx_EventTile").filter({ hasText: "Permalink me" }).locator("a").dispatchEvent("click");
+        const tile = page.locator(".mx_EventTile").filter({ hasText: "Permalink me" });
+        await tile.hover();
+        await tile.locator("a").dispatchEvent("click");
 
         // make sure it is now selected with the little green |
         await expect(page.locator(".mx_EventTile_selected").filter({ hasText: "Permalink me" })).toBeVisible();

playwright/e2e/threads/threads.spec.ts

@@ -39,7 +39,12 @@ test.describe("Threads", () => {
 
         const ThreadViewGroupSpacingStart = "56px"; // --ThreadView_group_spacing-start
         // Exclude timestamp and read marker from snapshots
-        const mask = [page.locator(".mx_MessageTimestamp"), page.locator(".mx_MessagePanel_myReadMarker")];
+        const mask = [page.locator(".mx_MessagePanel_myReadMarker")];
+        const css = `
+            .mx_MessageTimestamp {
+                visibility: hidden;
+            }
+        `;
 
         const roomViewLocator = page.locator(".mx_RoomView_body");
         // User sends message
@@ -74,13 +79,15 @@ test.describe("Threads", () => {
 
         // Take snapshots in group layout and bubble layout (IRC layout is not available on ThreadView)
         await expect(page.locator(".mx_ThreadView")).toMatchScreenshot("Initial_ThreadView_on_group_layout.png", {
-            mask: mask,
+            mask,
+            css,
         });
         await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
         await expect(page.locator(".mx_ThreadView .mx_EventTile[data-layout='bubble']")).toHaveCount(2);
 
         await expect(page.locator(".mx_ThreadView")).toMatchScreenshot("Initial_ThreadView_on_bubble_layout.png", {
-            mask: mask,
+            mask,
+            css,
         });
 
         // Set the group layout
@@ -154,7 +161,8 @@ test.describe("Threads", () => {
         await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
             "ThreadView_with_reaction_and_a_hidden_event_on_group_layout.png",
             {
-                mask: mask,
+                mask,
+                css,
             },
         );
 
@@ -178,7 +186,8 @@ test.describe("Threads", () => {
         await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
             "ThreadView_with_reaction_and_a_hidden_event_on_bubble_layout.png",
             {
-                mask: mask,
+                mask,
+                css,
             },
         );
 
@@ -214,7 +223,8 @@ test.describe("Threads", () => {
         await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
             "ThreadView_with_redacted_messages_on_group_layout.png",
             {
-                mask: mask,
+                mask,
+                css,
             },
         );
         await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
@@ -222,7 +232,8 @@ test.describe("Threads", () => {
         await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
             "ThreadView_with_redacted_messages_on_bubble_layout.png",
             {
-                mask: mask,
+                mask,
+                css,
             },
         );
 

playwright/e2e/timeline/timeline.spec.ts

@@ -181,8 +181,10 @@ test.describe("Timeline", () => {
                 await expect(gels.getByRole("button", { name: "Collapse" })).toBeVisible();
 
                 await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-irc-layout.png", {
-                    mask: [page.locator(".mx_MessageTimestamp")],
                     css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
                     .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                         display: none !important;
                     }
@@ -215,8 +217,10 @@ test.describe("Timeline", () => {
                 await expect(gels.getByRole("button", { name: "Collapse" })).toBeVisible();
 
                 await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-modern-layout.png", {
-                    mask: [page.locator(".mx_MessageTimestamp")],
                     css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
                     .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                         display: none !important;
                     }
@@ -255,7 +259,11 @@ test.describe("Timeline", () => {
                 // Save snapshot of expanded generic event list summary on bubble layout
                 await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-bubble-layout.png", {
                     // Exclude timestamp from snapshot
-                    mask: [page.locator(".mx_MessageTimestamp")],
+                    css: `
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
+                    `,
                 });
 
                 // Click "collapse" link button on the first hovered info event line
@@ -271,7 +279,11 @@ test.describe("Timeline", () => {
 
                 // Save snapshot of collapsed generic event list summary on bubble layout
                 await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("collapsed-gels-bubble-layout.png", {
-                    mask: [page.locator(".mx_MessageTimestamp")],
+                    css: `
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
+                    `,
                 });
             },
         );
@@ -312,8 +324,10 @@ test.describe("Timeline", () => {
                     "event-line-inline-start-margin-irc-layout.png",
                     {
                         // Exclude timestamp and read marker from snapshot
-                        mask: [page.locator(".mx_MessageTimestamp")],
                         css: `
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
                         .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                             display: none !important;
                         }
@@ -409,7 +423,11 @@ test.describe("Timeline", () => {
                     "collapsed-gels-and-messages-irc-layout.png",
                     {
                         // Exclude timestamp from snapshot of mx_MainSplit
-                        mask: [page.locator(".mx_MessageTimestamp")],
+                        css: `
+                            .mx_MessageTimestamp {
+                                visibility: hidden;
+                            }
+                        `,
                     },
                 );
 
@@ -428,7 +446,11 @@ test.describe("Timeline", () => {
                     "expanded-gels-and-messages-irc-layout.png",
                     {
                         // Exclude timestamp from snapshot of mx_MainSplit
-                        mask: [page.locator(".mx_MessageTimestamp")],
+                        css: `
+                            .mx_MessageTimestamp {
+                                visibility: hidden;
+                            }
+                        `,
                     },
                 );
 
@@ -453,7 +475,11 @@ test.describe("Timeline", () => {
                     "expanded-gels-redaction-placeholder.png",
                     {
                         // Exclude timestamp from snapshot of mx_MainSplit
-                        mask: [page.locator(".mx_MessageTimestamp")],
+                        css: `
+                            .mx_MessageTimestamp {
+                                visibility: hidden;
+                            }
+                        `,
                     },
                 );
 
@@ -481,7 +507,11 @@ test.describe("Timeline", () => {
                 // Record alignment of expanded GELS, placeholder of deleted message, and emote
                 await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-emote-irc-layout.png", {
                     // Exclude timestamp from snapshot of mx_MainSplit
-                    mask: [page.locator(".mx_MessageTimestamp")],
+                    css: `
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
+                    `,
                 });
             },
         );
@@ -492,8 +522,10 @@ test.describe("Timeline", () => {
             async ({ page, app, room }) => {
                 const screenshotOptions = {
                     // Hide because flaky - See https://github.com/vector-im/element-web/issues/24957
-                    mask: [page.locator(".mx_MessageTimestamp")],
                     css: `
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
                         .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                             display: none !important;
                         }
@@ -605,12 +637,10 @@ test.describe("Timeline", () => {
                 await messageEdit(page);
 
                 // Click timestamp to highlight hidden event line
-                const timestamp = page.locator(".mx_RoomView_body .mx_EventTile_info a", {
-                    has: page.locator(".mx_MessageTimestamp"),
-                });
+                const timestamp = page.locator(".mx_RoomView_body .mx_EventTile_info a.mx_MessageTimestamp");
                 // wait for the remote echo otherwise we get an error modal due to a 404 on the /event/ API
                 await expect(timestamp).not.toHaveAttribute("href", /~!/);
-                await timestamp.locator(".mx_MessageTimestamp").click();
+                await timestamp.click();
 
                 // should not add inline start padding to a hidden event line on IRC layout
                 await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
@@ -620,8 +650,10 @@ test.describe("Timeline", () => {
 
                 // Exclude timestamp and read marker from snapshot
                 const screenshotOptions = {
-                    mask: [page.locator(".mx_MessageTimestamp")],
                     css: `
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
                         .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                             display: none !important;
                         }
@@ -654,7 +686,11 @@ test.describe("Timeline", () => {
 
             // Exclude timestamp from snapshot
             const screenshotOptions = {
-                mask: [page.locator(".mx_MessageTimestamp")],
+                css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
+                `,
             };
 
             await sendEvent(app.client, room.roomId);
@@ -795,8 +831,10 @@ test.describe("Timeline", () => {
             await app.timeline.scrollToBottom();
             await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot("url-preview.png", {
                 // Exclude timestamp and read marker from snapshot
-                mask: [page.locator(".mx_MessageTimestamp")],
                 css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
                     .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                         display: none !important;
                     }
@@ -892,7 +930,13 @@ test.describe("Timeline", () => {
 
             const tile = page.locator(".mx_EventTile");
             await expect(tile).toBeVisible();
-            await expect(tile).toMatchScreenshot("code-block.png", { mask: [page.locator(".mx_MessageTimestamp")] });
+            await expect(tile).toMatchScreenshot("code-block.png", {
+                css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
+                `,
+            });
 
             // Edit a code block and assert the edited code block has been correctly rendered
             await tile.hover();
@@ -904,7 +948,11 @@ test.describe("Timeline", () => {
 
             const newTile = page.locator(".mx_EventTile");
             await expect(newTile).toMatchScreenshot("edited-code-block.png", {
-                mask: [page.locator(".mx_MessageTimestamp")],
+                css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
+                `,
             });
         });
 
@@ -1107,8 +1155,10 @@ test.describe("Timeline", () => {
 
             // Exclude timestamp and read marker from snapshot
             const screenshotOptions = {
-                mask: [page.locator(".mx_MessageTimestamp")],
                 css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
                     .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                         display: none !important;
                     }
@@ -1233,8 +1283,10 @@ test.describe("Timeline", () => {
 
                 // Exclude timestamp and read marker from snapshot
                 const screenshotOptions = {
-                    mask: [page.locator(".mx_MessageTimestamp")],
                     css: `
+                        .mx_MessageTimestamp {
+                            visibility: hidden;
+                        }
                         .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                             display: none !important;
                         }
@@ -1297,8 +1349,10 @@ test.describe("Timeline", () => {
 
             // Exclude timestamp and read marker from snapshot
             const screenshotOptions = {
-                mask: [page.locator(".mx_MessageTimestamp")],
                 css: `
+                    .mx_MessageTimestamp {
+                        visibility: hidden;
+                    }
                     .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
                         display: none !important;
                     }