Merge main (v2.1.2) into develop

.storybook/wcag/test-runner.ts

@@ -3,6 +3,49 @@ import { Page } from 'playwright-core';
 import { runOnly } from '../wcagConfig';
 import { TestContext, TestRunnerConfig } from '@storybook/test-runner';
 
+const AXE_ALREADY_RUNNING_ERROR = 'Axe is already running';
+const MAX_AXE_RETRIES = 3;
+const AXE_RETRY_DELAY_MS = 250;
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+// Retry if errors from Axe already running to decrease flakiness
+const runA11yCheck = async (page: Page, context: TestContext) => {
+  for (let attempt = 1; attempt <= MAX_AXE_RETRIES; attempt++) {
+    try {
+      await checkA11y(
+        page,
+        {
+          exclude: [
+            '#root .mapboxgl-canvas-container',
+            '.mapboxgl-marker',
+            '.mapboxgl-popup-close-button'
+          ],
+        },
+        {
+          axeOptions: {
+            runOnly,
+            rules: {
+              'color-contrast': { enabled: context.name !== 'Loading' },
+            },
+          },
+          detailedReport: true,
+          detailedReportOptions: {
+            html: true,
+          },
+        }
+      );
+      return;
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      if (!message.includes(AXE_ALREADY_RUNNING_ERROR) || attempt === MAX_AXE_RETRIES) {
+        throw error;
+      }
+      await sleep(AXE_RETRY_DELAY_MS * attempt);
+    }
+  }
+};
+
 /**
  * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
  * to learn more about the test-runner hooks API.
@@ -12,28 +55,7 @@ const renderFunctions: TestRunnerConfig = {
     await injectAxe(page);
   },
   async postVisit(page: Page, context: TestContext) {
-    await checkA11y(
-      page,
-      {
-        exclude: [
-          '#root .mapboxgl-canvas-container',
-          '.mapboxgl-marker',
-          '.mapboxgl-popup-close-button'
-        ],
-      },
-      {
-        axeOptions: {
-          runOnly,
-          rules: {
-            'color-contrast': { enabled: context.name !== 'Loading' },
-          },
-        },
-        detailedReport: true,
-        detailedReportOptions: {
-          html: true,
-        },
-      }
-    );
+    await runA11yCheck(page, context);
   },
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/search-ui-react",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "A library of React Components for powering Yext Search integrations",
   "author": "watson@yext.com",
   "license": "BSD-3-Clause",

src/components/AppliedFiltersDisplay.tsx

@@ -80,9 +80,9 @@ export function AppliedFiltersDisplay(props: AppliedFiltersDisplayProps): React.
       {removableFiltersWithHandlers.map(({ filter, handleRemove }, i) => {
         return (
           <RemovableFilter
+            key={`${filter.displayName ?? 'filter'}-${i}`}
             displayName={filter.displayName}
             handleRemove={handleRemove}
-            index={i}
             cssClasses={cssClasses}
           />
         );
@@ -119,17 +119,15 @@ function getDedupedRemovableFilters(filters: RemovableFilter[]) {
 function RemovableFilter({
   displayName,
   handleRemove,
-  index,
   cssClasses
 }: {
   displayName: string | undefined,
   handleRemove: () => void,
-  index: number,
   cssClasses: AppliedFiltersCssClasses
 }): React.JSX.Element {
   const { t } = useTranslation();
   return (
-    <div className={cssClasses.removableFilter} key={`${displayName}-${index}`}>
+    <div className={cssClasses.removableFilter}>
       <div className={cssClasses.filterLabel}>{displayName}</div>
       <button
         className='w-2 h-2 text-neutral m-1.5'

src/components/SearchI18nextProvider.tsx

@@ -99,13 +99,24 @@ export function SearchI18nextProvider(props: PropsWithChildren<SearchI18nextConf
     translationOverrides && Object.entries(translationOverrides).forEach(([locale, translation]) => {
       i18nInstance.addResourceBundle(locale, 'search-ui-react', translation, true, true);
     });
-    i18nInstance.changeLanguage(searcher.state.meta.locale);
-    searcher.addListener<string | undefined>({
+    const initialLocale = searcher.state.meta.locale ?? 'en';
+    if (i18nInstance.language !== initialLocale) {
+      void i18nInstance.changeLanguage(initialLocale);
+    }
+
+    const unsubscribe = searcher.addListener<string | undefined>({
       valueAccessor: state => state.meta.locale,
       callback: locale => {
-        i18nInstance.changeLanguage(locale);
+        const normalizedLocale = locale ?? 'en';
+        if (i18nInstance.language !== normalizedLocale) {
+          void i18nInstance.changeLanguage(normalizedLocale);
+        }
       }
     });
+
+    return () => {
+      unsubscribe();
+    };
   }, [searcher, translationOverrides]);
 
   return (

tests/__setup__/setup-env.ts

@@ -11,3 +11,31 @@ globalWithMessageChannel.MessageChannel = globalWithMessageChannel.MessageChanne
 beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
+
+const SUPPRESSED_TEST_WARNINGS = [
+  /An update to .* inside a test was not wrapped in act\(\.\.\.\)/,
+  /Error occured executing generative direct answer\./,
+];
+
+const SUPPRESSED_TEST_LOGS = [
+  /react-i18next:: useTranslation: You will need to pass in an i18next instance/
+];
+
+const originalConsoleError = console.error.bind(console);
+const originalConsoleWarn = console.warn.bind(console);
+
+console.error = (...args) => {
+  const firstArg = args[0];
+  if (typeof firstArg === 'string' && SUPPRESSED_TEST_WARNINGS.some(pattern => pattern.test(firstArg))) {
+    return;
+  }
+  originalConsoleError(...args);
+};
+
+console.warn = (...args) => {
+  const firstArg = args[0];
+  if (typeof firstArg === 'string' && SUPPRESSED_TEST_LOGS.some(pattern => pattern.test(firstArg))) {
+    return;
+  }
+  originalConsoleWarn(...args);
+};

tests/ssr/utils.tsx

@@ -1,12 +1,19 @@
 import { render } from '@testing-library/react';
 import { renderToString } from 'react-dom/server';
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { i18nInstance } from '../../src/utils';
 
 const USE_LAYOUT_EFFECT_ERROR = /useLayoutEffect does nothing on the server/;
 const originalConsoleError = console.error.bind(console.error);
 
 export function testSSR(App: ReactElement) {
-  const renderOnServer = () => renderToString(App);
+  const wrappedApp = (
+    <I18nextProvider i18n={i18nInstance}>
+      {App}
+    </I18nextProvider>
+  );
+  const renderOnServer = () => renderToString(wrappedApp);
   const container = document.body.appendChild(document.createElement('div'));
   let unexpectedErrorCount = 0;
   jest.spyOn(global.console, 'error')
@@ -28,6 +35,6 @@ export function testSSR(App: ReactElement) {
   container.innerHTML = renderOnServer();
 
   // hydrate a container whose HTML contents were rendered by ReactDOMServer
-  render(App, { container, hydrate: true });
+  render(wrappedApp, { container, hydrate: true });
   expect(unexpectedErrorCount).toEqual(0);
 }

tsconfig.json

@@ -6,6 +6,7 @@
     "noImplicitAny": false,
     "module": "es2020",
     "moduleResolution": "node",
+    "outDir": "dist",
     "forceConsistentCasingInFileNames": true,
     "declaration": true,
     "declarationMap": true,