Merge main (v1.6.5) into develop

THIRD-PARTY-NOTICES

@@ -939,7 +939,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 The following NPM package may be included in this product:
 
- - @yext/[email protected].0
+ - @yext/[email protected].4
 
 This package contains the following license and notice below:
 
@@ -983,7 +983,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 The following NPM package may be included in this product:
 
- - @yext/[email protected].0
+ - @yext/[email protected].1
 
 This package contains the following license and notice below:
 
@@ -1027,7 +1027,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 The following NPM package may be included in this product:
 
- - @yext/[email protected].1
+ - @yext/[email protected].2
 
 This package contains the following license and notice below:
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/search-ui-react",
-  "version": "1.6.2",
+  "version": "1.6.5",
   "description": "A library of React Components for powering Yext Search integrations",
   "author": "[email protected]",
   "license": "BSD-3-Clause",
@@ -85,7 +85,7 @@
     "@typescript-eslint/eslint-plugin": "^5.16.0",
     "@typescript-eslint/parser": "^5.16.0",
     "@yext/eslint-config-slapshot": "^0.5.0",
-    "@yext/search-headless-react": "^2.4.0",
+    "@yext/search-headless-react": "^2.4.1",
     "axe-core": "^4.8.2",
     "axe-playwright": "^1.2.3",
     "babel-jest": "^29.7.0",
@@ -108,7 +108,7 @@
     "util": "^0.12.5"
   },
   "peerDependencies": {
-    "@yext/search-headless-react": "^2.4.0",
+    "@yext/search-headless-react": "^2.4.1",
     "react": "^16.14 || ^17 || ^18",
     "react-dom": "^16.14 || ^17 || ^18"
   },

src/components/Dropdown/Dropdown.tsx

@@ -64,7 +64,7 @@ export function Dropdown(props: PropsWithChildren<DropdownProps>): JSX.Element {
   } = props;
 
   const containerRef = useRef<HTMLDivElement>(null);
-  const screenReaderUUID = useId();
+  const screenReaderUUID = useId('dropdown');
   const [screenReaderKey, setScreenReaderKey] = useState<number>(0);
   const [hasTyped, setHasTyped] = useState<boolean>(false);
   const [childrenWithDropdownItemsTransformed, items] = useMemo(() => {
@@ -295,4 +295,4 @@ function getTransformedChildrenAndItemData(children: ReactNode): [ReactNode, Dro
     return createElement(DropdownItemWithIndex, { ...props, index: items.length - 1 });
   }));
   return [childrenWithDropdownItemsTransformed, items];
-}
+}

src/components/Filters/CheckboxOption.tsx

@@ -79,7 +79,7 @@ export function CheckboxOption(props: CheckboxOptionProps): JSX.Element | null {
     resultsCount
   } = props;
   const cssClasses = useComposedCssClasses(builtInCssClasses, props.customCssClasses);
-  const optionId = useId();
+  const optionId = useId('facet');
   const { selectFilter, filters, applyFilters } = useFiltersContext();
 
   const handleClick = useCallback((checked: boolean) => {

src/hooks/useId.ts

@@ -6,9 +6,9 @@ import { useLayoutEffect } from "./useLayoutEffect";
 
 let serverHandoffComplete = false;
 let id = 0;
-function genId(): string {
+function genId(baseName: string): string {
   ++id;
-  return id.toString();
+  return baseName + '-' + id.toString();
 }
 
 // Workaround for https://github.com/webpack/webpack/issues/14814
@@ -28,14 +28,14 @@ const maybeReactUseId: undefined | (() => string) = (React as any)[
  * @see Docs https://reach.tech/auto-id
  */
 
-export function useId(): string {
+export function useId(baseName: string): string {
   if (maybeReactUseId !== undefined) {
     return maybeReactUseId();
   }
 
   // If this instance isn't part of the initial render, we don't have to do the
   // double render/patch-up dance. We can just generate the ID and return it.
-  const initialId = (serverHandoffComplete ? genId() : '');
+  const initialId = (serverHandoffComplete ? genId(baseName) : '');
   const [id, setId] = useState(initialId);
 
   useLayoutEffect(() => {
@@ -44,7 +44,7 @@ export function useId(): string {
       // rendering flicker, though it'll make the first render slower (unlikely
       // to matter, but you're welcome to measure your app and let us know if
       // it's a problem).
-      setId(genId());
+      setId(genId(baseName));
     }
   }, [id]);
 

test-site/src/config.ts

@@ -1,4 +1,4 @@
-import { CloudRegion, Environment } from '@yext/search-headless-react';
+import { CloudRegion, CloudChoice, Environment } from '@yext/search-headless-react';
 
 export const config = {
   apiKey: process.env.REACT_APP_LIVE_API_KEY || 'REPLACE_ME',
@@ -7,5 +7,6 @@ export const config = {
   experienceVersion: 'STAGING',
   businessId: 123123,
   cloudRegion: CloudRegion.US,
+  cloudChoice: CloudChoice.GLOBAL_MULTI,
   environment: Environment.PROD,
 };