diff --git a/.changeset/perf-autocomplete-memo-deps.md b/.changeset/perf-autocomplete-memo-deps.md new file mode 100644 index 00000000000..c503d131710 --- /dev/null +++ b/.changeset/perf-autocomplete-memo-deps.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +perf(Autocomplete): eliminate re-renders on arrow-key navigation by converting highlightedItem to a ref diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-colorblind-linux.png index 8f2b0efd07c..6496243181c 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-dimmed-linux.png index f3fe5c5c7f3..a6ee309be8a 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-high-contrast-linux.png index b583f1b71a2..6094c2173f8 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-linux.png index 8f2b0efd07c..6496243181c 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-tritanopia-linux.png index 8f2b0efd07c..6496243181c 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-colorblind-linux.png index 8ffe3c17d6d..853efe807a2 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-high-contrast-linux.png index f5870d3d762..c675a23b42b 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-linux.png index 8ffe3c17d6d..853efe807a2 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-tritanopia-linux.png index 8ffe3c17d6d..853efe807a2 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-colorblind-linux.png index 89b3bc487d7..30f26404952 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-dimmed-linux.png index 41db5a3e3f1..4d05cc73d1a 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-high-contrast-linux.png index aaee76c08f8..3d872492eb7 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-linux.png index 89b3bc487d7..30f26404952 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-tritanopia-linux.png index 89b3bc487d7..30f26404952 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-colorblind-linux.png index 756be755253..bd9f8dfb2c5 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-high-contrast-linux.png index c426d170020..6c69ef9e51a 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-linux.png index 756be755253..bd9f8dfb2c5 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-tritanopia-linux.png index 756be755253..bd9f8dfb2c5 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-colorblind-linux.png index f77e4fb7ead..affd78bc55a 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-dimmed-linux.png index ecc00bff17b..d5913b577a6 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-high-contrast-linux.png index 711597fd4da..22ed7d38507 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-linux.png index f77e4fb7ead..affd78bc55a 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-tritanopia-linux.png index f77e4fb7ead..affd78bc55a 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-colorblind-linux.png index 5f0b35f900e..bb4ea79a805 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-high-contrast-linux.png index 64b36c1c76b..4e434e56f21 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-linux.png index 5f0b35f900e..bb4ea79a805 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-tritanopia-linux.png index 5f0b35f900e..bb4ea79a805 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-colorblind-linux.png index 5a503afb5bc..3b3eabad40c 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-dimmed-linux.png index d3e120fd409..61ec5904d1a 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-high-contrast-linux.png index c466798d675..3bc0cf674c3 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-linux.png index 5a503afb5bc..3b3eabad40c 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-tritanopia-linux.png index 5a503afb5bc..3b3eabad40c 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-colorblind-linux.png index 0c72c279200..a370ed3944a 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-high-contrast-linux.png index 4f8242e7d21..95c3f8ff9f2 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-linux.png index 0c72c279200..a370ed3944a 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-tritanopia-linux.png index 0c72c279200..a370ed3944a 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-colorblind-linux.png index b6159af469e..566c3e7fad0 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-dimmed-linux.png index 8b6c57bc464..f94c666ce1d 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-high-contrast-linux.png index e4294bfe0be..a4aa30de8bd 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-linux.png index b6159af469e..566c3e7fad0 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-tritanopia-linux.png index b6159af469e..566c3e7fad0 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-colorblind-linux.png index 3a91e610d2c..84fba8a6262 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-high-contrast-linux.png index 5f8fb2040c0..b6b79aa62fb 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-linux.png index 3a91e610d2c..84fba8a6262 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-tritanopia-linux.png index 3a91e610d2c..84fba8a6262 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-colorblind-linux.png index a2d92809dcb..419545bcb35 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-dimmed-linux.png index 09b18cdaa2c..2367bb19e9f 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-high-contrast-linux.png index a5d214d4cb6..29c8ae019bb 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-linux.png index ece5062ee2f..419545bcb35 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-tritanopia-linux.png index ece5062ee2f..419545bcb35 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-colorblind-linux.png index 3a966daebb3..d7eb52bf88e 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-high-contrast-linux.png index ff8eeeff8c2..1d7fbf0ccfc 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-linux.png index 3a966daebb3..d7eb52bf88e 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-tritanopia-linux.png index 3a966daebb3..d7eb52bf88e 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-colorblind-linux.png index 2abd788c295..2ce087b5dae 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-dimmed-linux.png index 0117ed4c6fb..23de4e3446c 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-high-contrast-linux.png index 00d2607c126..8eff3b1d700 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-linux.png index 2abd788c295..2ce087b5dae 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-tritanopia-linux.png index 2abd788c295..2ce087b5dae 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-colorblind-linux.png index 011f5c085bc..9ed2521a016 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-high-contrast-linux.png index 42c1c944b38..309288fd536 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-linux.png index 011f5c085bc..9ed2521a016 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-tritanopia-linux.png index 011f5c085bc..9ed2521a016 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-colorblind-linux.png index ab1b107ecf6..515a6cf9761 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-dimmed-linux.png index a919c5e23ac..0a5cfbd733e 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-high-contrast-linux.png index 375ac5f4441..ac13331ae3a 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-linux.png index ab1b107ecf6..515a6cf9761 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-tritanopia-linux.png index ab1b107ecf6..515a6cf9761 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-colorblind-linux.png index 35e829b6dda..df5a63fe6bc 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-high-contrast-linux.png index 874df777029..1d87bb0388e 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-linux.png index 35e829b6dda..df5a63fe6bc 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-tritanopia-linux.png index 35e829b6dda..df5a63fe6bc 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-colorblind-linux.png index ec6f3d89c01..01f3f40cede 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-dimmed-linux.png index 34a12300bf0..635d2324557 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-high-contrast-linux.png index d1d8f6a6483..c9dd1d91cb6 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-linux.png index ec6f3d89c01..01f3f40cede 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-tritanopia-linux.png index ec6f3d89c01..01f3f40cede 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-colorblind-linux.png index b7f2fccc50e..613d6e811c7 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-high-contrast-linux.png index 32e82fb20a4..b026dcd40a1 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-linux.png index b7f2fccc50e..613d6e811c7 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-tritanopia-linux.png index b7f2fccc50e..613d6e811c7 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-tritanopia-linux.png differ diff --git a/packages/react/src/Autocomplete/AutocompleteMenu.tsx b/packages/react/src/Autocomplete/AutocompleteMenu.tsx index 1e53386750b..6757b8cfd11 100644 --- a/packages/react/src/Autocomplete/AutocompleteMenu.tsx +++ b/packages/react/src/Autocomplete/AutocompleteMenu.tsx @@ -47,6 +47,46 @@ function getdefaultCheckedSelectionChange( const isItemSelected = (itemId: string, selectedItemIds: Array) => selectedItemIds.includes(itemId) +/** + * Memoized wrapper around ActionList.Item that skips re-rendering when props + * haven't changed. Combined with the `highlightedItem` ref (instead of state), + * arrow-key navigation no longer triggers re-renders of the item list. + */ +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const MemoizedAutocompleteItem = React.memo(function MemoizedAutocompleteItem>({ + item, +}: { + item: T +}) { + const { + id, + onAction, + children, + text, + leadingVisual: LeadingVisual, + trailingVisual: TrailingVisual, + role, + ...itemProps + } = item + // Remove key from itemProps so it doesn't spread onto the DOM + delete itemProps.key + return ( + onAction(item)} {...itemProps} id={id} data-id={id} role={role as AriaRole}> + {LeadingVisual && ( + + {isElement(LeadingVisual) ? LeadingVisual : } + + )} + {(children ?? text) as React.ReactNode} + {TrailingVisual && ( + + {isElement(TrailingVisual) ? TrailingVisual : } + + )} + + ) +}) + function getItemById(itemId: string, items: T[]) { return items.find(item => item.id === itemId) } @@ -167,7 +207,22 @@ function AutocompleteMenu(props: AutocompleteMe } = props const listContainerRef = useRef(null) const allItemsToRenderRef = useRef([]) - const [highlightedItem, setHighlightedItem] = useState() + // Using a ref instead of state to avoid triggering a re-render of all items + // on every arrow-key press. The active styling was already handled via DOM by + // useFocusZone (data-is-active-descendant) before this change, but the + // previous useState caused React to re-render the entire item list anyway. + const highlightedItemRef = useRef() + const deferredInputValueRef = useRef(deferredInputValue) + const selectedItemIdsRef = useRef(selectedItemIds) + + useEffect(() => { + deferredInputValueRef.current = deferredInputValue + }, [deferredInputValue]) + + useEffect(() => { + selectedItemIdsRef.current = selectedItemIds + }, [selectedItemIds]) + const [sortedItemIds, setSortedItemIds] = useState>(items.map(({id: itemId}) => itemId)) const generatedUniqueId = useId(id) @@ -178,7 +233,6 @@ function AutocompleteMenu(props: AutocompleteMe ...selectableItem, role: 'option', id: selectableItem.id, - active: highlightedItem?.id === selectableItem.id, selected: selectionVariant === 'multiple' ? selectedItemIds.includes(selectableItem.id) : undefined, onAction: (item: T) => { const otherSelectedItemIds = selectedItemIds.filter(selectedItemId => selectedItemId !== item.id) @@ -204,7 +258,6 @@ function AutocompleteMenu(props: AutocompleteMe } }), [ - highlightedItem, items, selectedItemIds, inputRef, @@ -246,7 +299,6 @@ function AutocompleteMenu(props: AutocompleteMe ...addNewItem, role: 'option', key: addNewItem.id, - active: highlightedItem?.id === addNewItem.id, selected: selectionVariant === 'multiple' ? selectedItemIds.includes(addNewItem.id) : undefined, leadingVisual: () => , onAction: (item: T) => { @@ -269,7 +321,6 @@ function AutocompleteMenu(props: AutocompleteMe selectionVariant, setInputValue, generatedUniqueId, - highlightedItem, selectedItemIds, ], ) @@ -294,13 +345,31 @@ function AutocompleteMenu(props: AutocompleteMe activeDescendantFocus: inputRef, onActiveDescendantChanged: (current, _previous, directlyActivated) => { activeDescendantRef.current = current || null + + // Active styling was already handled via DOM before this change: + // useFocusZone sets `data-is-active-descendant` on the active element, + // and ActionList styles that attribute in CSS. The key change is that + // we no longer call setHighlightedItem (state), avoiding re-renders. + if (current) { + const currentLi = current.closest('li') const selectedItem = allItemsToRenderRef.current.find(item => { - return item.id === current.closest('li')?.getAttribute('data-id') + return item.id === currentLi?.getAttribute('data-id') }) - setHighlightedItem(selectedItem) + highlightedItemRef.current = selectedItem setIsMenuDirectlyActivated(directlyActivated) + + // Update autocomplete suggestion inline (moved from the useEffect + // that previously depended on highlightedItem state) + if ( + selectedItem?.text?.startsWith(deferredInputValueRef.current) && + !selectedItemIdsRef.current.includes(selectedItem.id) + ) { + setAutocompleteSuggestion(selectedItem.text) + } else { + setAutocompleteSuggestion('') + } } if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) { @@ -314,14 +383,15 @@ function AutocompleteMenu(props: AutocompleteMe ) useEffect(() => { - // Use deferredInputValue to avoid running this effect on every keystroke - // The Input component guards against stale suggestions - if (highlightedItem?.text?.startsWith(deferredInputValue) && !selectedItemIds.includes(highlightedItem.id)) { - setAutocompleteSuggestion(highlightedItem.text) + // When the input value changes, update the autocomplete suggestion based + // on the currently highlighted item (tracked via ref, not state). + const highlighted = highlightedItemRef.current + if (highlighted?.text?.startsWith(deferredInputValue) && !selectedItemIds.includes(highlighted.id)) { + setAutocompleteSuggestion(highlighted.text) } else { setAutocompleteSuggestion('') } - }, [highlightedItem, deferredInputValue, selectedItemIds, setAutocompleteSuggestion]) + }, [deferredInputValue, selectedItemIds, setAutocompleteSuggestion]) useEffect(() => { const itemIdSortResult = [...sortedItemIds].sort( @@ -364,41 +434,9 @@ function AutocompleteMenu(props: AutocompleteMe id={`${id}-listbox`} aria-labelledby={ariaLabelledBy} > - {allItemsToRender.map(item => { - const { - id, - onAction, - children, - text, - leadingVisual: LeadingVisual, - trailingVisual: TrailingVisual, - key, - role, - ...itemProps - } = item - return ( - onAction(item)} - {...itemProps} - id={id} - data-id={id} - role={role as AriaRole} - > - {LeadingVisual && ( - - {isElement(LeadingVisual) ? LeadingVisual : } - - )} - {(children ?? text) as React.ReactNode} - {TrailingVisual && ( - - {isElement(TrailingVisual) ? TrailingVisual : } - - )} - - ) - })} + {allItemsToRender.map(item => ( + + ))} ) : emptyStateText !== false && emptyStateText !== null ? (
{emptyStateText}