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

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");