upgrade to react18 file updates

J=BACK-2923
TEST=auto

.github/workflows/run-tests.yml

@@ -6,17 +6,27 @@ name: Run Tests
 on: [push, pull_request]
 
 jobs:
+  call_run_tests-react-18:
+    uses: yext/slapshot-reusable-workflows/.github/workflows/run_tests.yml@v1
+    with:
+      node_matrix: '["16.x", "18.x"]'
+    secrets:
+      MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
   call_run_tests-react-17:
     uses: yext/slapshot-reusable-workflows/.github/workflows/run_tests.yml@v1
     with:
+      build_script: |
+        npm i @testing-library/react-hooks
+        npm i -D react@17 react-dom@17
+        npm run build
       node_matrix: '["16.x", "18.x"]'
     secrets:
       MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
-
   call_run_tests-react-16:
     uses: yext/slapshot-reusable-workflows/.github/workflows/run_tests.yml@v1
     with:
       build_script: |
+        npm i @testing-library/react-hooks
         npm i -D [email protected] [email protected]
         npm run build
       node_matrix: '["16.x", "18.x"]'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/search-ui-react",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "A library of React Components for powering Yext Search integrations",
   "author": "[email protected]",
   "license": "BSD-3-Clause",
@@ -72,12 +72,11 @@
     "@storybook/addon-links": "^7.4.5",
     "@storybook/react": "^7.4.5",
     "@storybook/react-webpack5": "^7.4.5",
-    "@storybook/test-runner": "^0.15.2",
+    "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.1",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.3",
-    "@testing-library/react-hooks": "^8.0.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/classnames": "^2.3.1",
     "@types/jest": "^29.1.0",
     "@types/jest-image-snapshot": "^6.2.3",
@@ -99,18 +98,18 @@
     "jest-environment-jsdom": "^29.1.1",
     "jest-image-snapshot": "^6.2.0",
     "msw": "^0.36.8",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "storybook": "^7.4.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.6.13",
     "tailwindcss": "^3.0.23",
     "ts-jest": "^29.1.1",
     "tsup": "^8.0.1",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "@yext/search-headless-react": "^2.4.0",
-    "react": "^16.14 || ^17",
-    "react-dom": "^16.14 || ^17"
+    "react": "^16.14 || ^17 || ^18",
+    "react-dom": "^16.14 || ^17 || ^18"
   },
   "jest": {
     "bail": 0,
@@ -153,19 +152,21 @@
     "restoreMocks": true
   },
   "dependencies": {
-    "@reach/auto-id": "^0.18.0",
     "@restart/ui": "^1.0.1",
     "@tailwindcss/forms": "^0.5.0",
+    "@types/react": "^18.2.48",
     "@yext/analytics": "^0.6.5",
     "classnames": "^2.3.1",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "mapbox-gl": "^2.9.2",
     "prop-types": "^15.8.1",
-    "react-collapsed": "3.6.0",
+    "react-collapsed": "^4.1.2",
+    "react-id-generator": "^3.0.2",
     "recent-searches": "^1.0.5",
     "tailwind-merge": "^1.3.0",
-    "use-isomorphic-layout-effect": "^1.1.2"
+    "use-isomorphic-layout-effect": "^1.1.2",
+    "util": "^0.12.5"
   },
   "repository": {
     "type": "git",

src/components/Dropdown/Dropdown.tsx

@@ -7,8 +7,8 @@ import React, {
   useEffect,
   useMemo,
   useRef,
-  useState
-} from 'react';
+  useState, 
+} from 'react'
 import { DropdownContext, DropdownContextType } from './DropdownContext';
 import { InputContext, InputContextType } from './InputContext';
 import useRootClosePkg from '@restart/ui/useRootClose';
@@ -17,7 +17,10 @@ import { ScreenReader } from '../ScreenReader';
 import { recursivelyMapChildren } from '../utils/recursivelyMapChildren';
 import { DropdownItem, DropdownItemProps, DropdownItemWithIndex } from './DropdownItem';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
-import { useId } from '@reach/auto-id';
+import { TextEncoder} from 'util';
+import { useId } from "react-id-generator";
+
+global.TextEncoder = TextEncoder;
 
 const useRootClose = typeof useRootClosePkg === 'function' ? useRootClosePkg : useRootClosePkg['default'];
 const useLayoutEffect = typeof useIsomorphicLayoutEffect === 'function'
@@ -67,7 +70,7 @@ export function Dropdown(props: PropsWithChildren<DropdownProps>): JSX.Element {
   } = props;
 
   const containerRef = useRef<HTMLDivElement>(null);
-  const screenReaderUUID = useId();
+  const [screenReaderUUID] = useId();
   const [screenReaderKey, setScreenReaderKey] = useState<number>(0);
   const [hasTyped, setHasTyped] = useState<boolean>(false);
   const [childrenWithDropdownItemsTransformed, items] = useMemo(() => {

src/components/Filters/CheckboxOption.tsx

@@ -5,7 +5,8 @@ import { useFilterGroupContext } from './FilterGroupContext';
 import { useComposedCssClasses } from '../../hooks';
 import { findSelectableFieldValueFilter } from '../../utils/filterutils';
 import classNames from 'classnames';
-import { useId } from '@reach/auto-id';
+import { useId } from "react-id-generator";
+
 /**
  * The configuration data for a field value filter option.
  *
@@ -78,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();
   const { selectFilter, filters, applyFilters } = useFiltersContext();
 
   const handleClick = useCallback((checked: boolean) => {
@@ -137,7 +138,7 @@ export function CheckboxOption(props: CheckboxOptionProps): JSX.Element | null {
           onChange={handleChange}
           disabled={isOptionsDisabled}
         />
-        <label className={labelClasses} htmlFor={optionId}>{labelText}</label>
+        <label className={labelClasses} htmlFor={optionId}>{String(labelText)}</label>
       </div>
       {isOptionsDisabled &&
         <div className={cssClasses.tooltipContainer}>

src/components/Filters/FilterGroupContext.ts

@@ -1,5 +1,36 @@
-import { createContext, useContext } from 'react';
-import { UseCollapseOutput } from 'react-collapsed/dist/types';
+import { createContext, useContext, CSSProperties, ReactNode, TransitionEvent, MouseEvent } from 'react';
+
+
+declare type AriaBoolean = boolean | 'true' | 'false';
+
+export interface GetTogglePropsOutput {
+  disabled?: boolean | undefined;
+  type?: 'button' | undefined;
+  role?: string | undefined;
+  id: string;
+  'aria-controls': string;
+  onClick: (e: MouseEvent) => void;
+}
+
+export interface GetTogglePropsInput {
+  [key: string]: unknown;
+  disabled?: boolean;
+  onClick?: (e: MouseEvent) => void;
+}
+
+export interface GetCollapsePropsOutput {
+  id: string;
+  style: CSSProperties;
+  'aria-hidden': AriaBoolean;
+}
+
+export interface GetCollapsePropsInput {
+  [key: string]: unknown;
+  style?: CSSProperties;
+  onTransitionEnd?: (e: TransitionEvent) => void;
+  refKey?: string;
+  ref?: (node: ReactNode) => void | null | undefined;
+}
 
 /**
  * FilterGroupContext is responsible for searchable filters and collapsible filter groups.
@@ -14,9 +45,9 @@ export interface FilterGroupContextType {
   /** Sets the searchValue which is used to filter the FilterGroup. */
   setSearchValue: (value: string) => void,
   /** Returns the attributes used to collapse the filter group. */
-  getCollapseProps: UseCollapseOutput['getCollapseProps'],
+  getCollapseProps: (config?: GetCollapsePropsInput) => GetCollapsePropsOutput,
   /** Returns the attributes used to toggle the filter group. */
-  getToggleProps: UseCollapseOutput['getToggleProps'],
+  getToggleProps: (config?: GetTogglePropsInput) => GetTogglePropsOutput;
   /** Indicates whether or not the filter group is expanded. */
   isExpanded: boolean,
   /** Whether or not the filter options should be disabled. */

src/components/Filters/FilterGroupProvider.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useMemo, useState } from 'react';
-import useCollapse from 'react-collapsed';
+import { useCollapse } from 'react-collapsed'
 import { FilterGroupContext } from './FilterGroupContext';
 
 /**