ksearch: adjust id generation to add basename from callers (#471)

This PR adjusts our useId function, which generates ids for
html elements, to also take a 'basename' argument from
callers. This is to help reduce the likelihood of an id
made conflicting with an id somewhere else on the page.

J=WAT-4464
TEST=auto

Ran tests. Was having issues getting the test site running

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

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