Improve invite dialog ui - Part 2 (#30836)

* feat: add `Pill` component

* chore: add `react-merge-refs` lib

* feat: add `PillInput` component

* feat: use new pills component in invite dialog

* test: update invite dialog selector

* test(e2e): update test locators

* test(e2e): update screenshot

Author: florianduros

jest.config.ts

@@ -41,7 +41,9 @@ const config: Config = {
         "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
         "^fetch-mock$": "<rootDir>/node_modules/fetch-mock",
     },
-    transformIgnorePatterns: ["/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error)).+$"],
+    transformIgnorePatterns: [
+        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs)).+$",
+    ],
     collectCoverageFrom: [
         "<rootDir>/src/**/*.{js,ts,tsx}",
         // getSessionLock is piped into a different JS context via stringification, and the coverage functionality is

package.json

@@ -150,6 +150,7 @@
         "react-blurhash": "^0.3.0",
         "react-dom": "^19.0.0",
         "react-focus-lock": "^2.5.1",
+        "react-merge-refs": "^3.0.2",
         "react-string-replace": "^1.1.1",
         "react-transition-group": "^4.4.1",
         "react-virtuoso": "^4.14.0",

playwright/e2e/crypto/crypto.spec.ts

@@ -25,9 +25,7 @@ const startDMWithBob = async (page: Page, bob: Bot) => {
     await page.getByRole("menuitem", { name: "Start chat" }).click();
     await page.getByTestId("invite-dialog-input").fill(bob.credentials.userId);
     await page.getByRole("option", { name: bob.credentials.displayName }).click();
-    await expect(
-        page.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText("Bob"),
-    ).toBeVisible();
+    await expect(page.getByTestId("invite-dialog-input-wrapper").getByText("Bob")).toBeVisible();
     await page.getByRole("button", { name: "Go" }).click();
 };
 

playwright/e2e/invite/invite-dialog.spec.ts

@@ -54,9 +54,7 @@ test.describe("Invite dialog", function () {
 
         await other.getByRole("option", { name: botName }).click();
 
-        await expect(
-            other.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText(botName),
-        ).toBeVisible();
+        await expect(other.getByTestId("invite-dialog-input-wrapper").getByText(botName)).toBeVisible();
 
         // Take a snapshot of the invite dialog with a user pill
         await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-room-with-user-pill.png");
@@ -95,9 +93,7 @@ test.describe("Invite dialog", function () {
             await expect(other.getByRole("option", { name: botName }).getByText(bot.credentials.userId)).toBeVisible();
             await other.getByRole("option", { name: botName }).click();
 
-            await expect(
-                other.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText(botName),
-            ).toBeVisible();
+            await expect(other.getByTestId("invite-dialog-input-wrapper").getByText(botName)).toBeVisible();
 
             // Take a snapshot of the invite dialog with a user pill
             await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-dm-with-user-pill.png");