fix(useElementIds): prevent Webpack static analysis issue with useId (#1676)

* fix(useElementIds): prevent Webpack static analysis issue with useId

* improve tests

Author: silviuaavram

src/hooks/__tests__/utils.test.js

@@ -1,64 +1,9 @@
 import {renderHook} from '@testing-library/react'
-import {
-  useMouseAndTouchTracker,
-  isDropdownsStateEqual,
-  useElementIds,
-} from '../utils'
+import {useMouseAndTouchTracker, isDropdownsStateEqual} from '../utils'
 import {getInitialValue, getDefaultValue, getItemAndIndex} from '../utils-ts'
 import {dropdownDefaultProps} from '../utils.dropdown'
 
 describe('utils', () => {
-  describe('useElementIds', () => {
-    test('returns the same reference on re-renders when the props do not change', () => {
-      const getTestItemId = () => 'test-item-id'
-      const {result, rerender} = renderHook(useElementIds, {
-        initialProps: {
-          id: 'test-id',
-          labelId: 'test-label-id',
-          menuId: 'test-menu-id',
-          getItemId: getTestItemId,
-          toggleButtonId: 'test-toggle-button-id',
-          inputId: 'test-input-id',
-        },
-      })
-      const renderOneResult = result.current
-      rerender({
-        id: 'test-id',
-        labelId: 'test-label-id',
-        menuId: 'test-menu-id',
-        getItemId: getTestItemId,
-        toggleButtonId: 'test-toggle-button-id',
-        inputId: 'test-input-id',
-      })
-      const renderTwoResult = result.current
-      expect(renderOneResult).toBe(renderTwoResult)
-    })
-
-    test('returns a new reference on re-renders when the props change', () => {
-      const {result, rerender} = renderHook(useElementIds, {
-        initialProps: {
-          id: 'test-id',
-          labelId: 'test-label-id',
-          menuId: 'test-menu-id',
-          getItemId: () => 'test-item-id',
-          toggleButtonId: 'test-toggle-button-id',
-          inputId: 'test-input-id',
-        },
-      })
-      const renderOneResult = result.current
-      rerender({
-        id: 'test-id',
-        labelId: 'test-label-id',
-        menuId: 'test-menu-id',
-        getItemId: () => 'test-item-id',
-        toggleButtonId: 'test-toggle-button-id',
-        inputId: 'test-input-id',
-      })
-      const renderTwoResult = result.current
-      expect(renderOneResult).not.toBe(renderTwoResult)
-    })
-  })
-
   describe('itemToString', () => {
     test('returns empty string if item is falsy', () => {
       const emptyString = dropdownDefaultProps.itemToString(null)

src/hooks/__tests__/utils.use-element-ids.r18.test.js

@@ -7,7 +7,6 @@ import {
   useGetterPropsCalledChecker,
   useScrollIntoView,
   useControlPropsValidator,
-  useElementIds,
   isDropdownsStateEqual,
 } from '../utils'
 import {
@@ -25,6 +24,7 @@ import {
 } from './utils'
 import downshiftUseComboboxReducer from './reducer'
 import * as stateChangeTypes from './stateChangeTypes'
+import {useElementIds} from '../utils.dropdown/useElementIds'
 
 useCombobox.stateChangeTypes = stateChangeTypes
 
@@ -114,7 +114,7 @@ function useCombobox(userProps = {}) {
   const mouseAndTouchTrackers = useMouseAndTouchTracker(
     environment,
     handleBlurInTracker,
-    downshiftRefs
+    downshiftRefs,
   )
   const setGetterPropCallInfo = useGetterPropsCalledChecker(
     'getInputProps',

src/hooks/__tests__/utils.use-element-ids.test.js

@@ -12,7 +12,6 @@ import {
   useGetterPropsCalledChecker,
   useScrollIntoView,
   useControlPropsValidator,
-  useElementIds,
   useMouseAndTouchTracker,
   isDropdownsStateEqual,
 } from '../utils'
@@ -27,6 +26,7 @@ import {isReactNative, isReactNativeWeb} from '../../is.macro'
 import downshiftSelectReducer from './reducer'
 import {defaultProps, propTypes} from './utils'
 import * as stateChangeTypes from './stateChangeTypes'
+import { useElementIds } from '../utils.dropdown/useElementIds'
 
 useSelect.stateChangeTypes = stateChangeTypes
 

src/hooks/useCombobox/index.js

@@ -0,0 +1,88 @@
+import {renderHook} from '@testing-library/react'
+import {useElementIds} from '..'
+
+jest.mock('react', () => {
+  const {useId, ...react} = jest.requireActual('react')
+  return react
+})
+
+describe('useElementIds for React < 18', () => {
+  test('uses generateId()', () => {
+    const {result} = renderHook(() => useElementIds({}))
+
+    expect(result.current).toEqual({
+      getTagId: expect.any(Function),
+      tagGroupId: 'downshift-0-tag-group',
+    })
+    expect(result.current.getTagId(12)).toEqual('downshift-0-tag-12')
+  })
+
+  test('returns the same reference on re-renders when the props do not change', () => {
+      const getTestTagId = () => 'test-tag-id'
+      const {result, rerender} = renderHook(useElementIds, {
+        initialProps: {
+          id: 'test-id',
+          tagGroupId: 'test-tag-group-id',
+          getTagId: getTestTagId,
+        },
+      })
+      const renderOneResult = result.current
+      rerender({
+        id: 'test-id',
+        tagGroupId: 'test-tag-group-id',
+        getTagId: getTestTagId,
+      })
+      const renderTwoResult = result.current
+      expect(renderOneResult).toBe(renderTwoResult)
+    })
+  
+    test('returns a new reference on re-renders when the props change', () => {
+      const {result, rerender} = renderHook(useElementIds, {
+        initialProps: {
+          id: 'test-id',
+          tagGroupId: 'test-tag-group-id',
+          getTagId: () => 'test-tag-id',
+        },
+      })
+      const renderOneResult = result.current
+      rerender({
+        id: 'test-id',
+        tagGroupId: 'test-tag-group-id',
+        getTagId: () => 'test-tag-id',
+      })
+      const renderTwoResult = result.current
+      expect(renderOneResult).not.toBe(renderTwoResult)
+    })
+
+  test('generates stable IDs across re-renders', () => {
+    const {result, rerender} = renderHook(() => useElementIds({}))
+
+    const firstTagGroupId = result.current.tagGroupId
+    const firstTagId = result.current.getTagId(0)
+
+    rerender()
+
+    expect(result.current.tagGroupId).toBe(firstTagGroupId)
+    expect(result.current.getTagId(0)).toBe(firstTagId)
+  })
+
+  test('uses provided id prop', () => {
+    const {result} = renderHook(() => useElementIds({id: 'custom-id'}))
+
+    expect(result.current.tagGroupId).toBe('custom-id-tag-group')
+    expect(result.current.getTagId(7)).toBe('custom-id-tag-7')
+  })
+
+  test('uses custom tagGroupId and getTagId when provided', () => {
+    const customGetTagId = (index: number) => `my-tag-${index}`
+    const {result} = renderHook(() =>
+      useElementIds({
+        tagGroupId: 'my-tag-group',
+        getTagId: customGetTagId,
+      }),
+    )
+
+    expect(result.current.tagGroupId).toBe('my-tag-group')
+    expect(result.current.getTagId(4)).toBe('my-tag-4')
+  })
+})

src/hooks/useSelect/index.js

@@ -0,0 +1,92 @@
+import {renderHook} from '@testing-library/react'
+import {useElementIds} from '..'
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    useId() {
+      return 'mocked-id'
+    },
+  }
+})
+
+describe('useElementIds for React >= 18', () => {
+  test('uses React.useId', () => {
+    const {result} = renderHook(() => useElementIds({}))
+
+    expect(result.current).toEqual({
+      getTagId: expect.any(Function),
+      tagGroupId: 'downshift-mocked-id-tag-group',
+    })
+    expect(result.current.getTagId(10)).toEqual("downshift-mocked-id-tag-10")
+  })
+
+  test('returns the same reference on re-renders when the props do not change', () => {
+      const getTestTagId = () => 'test-tag-id'
+      const {result, rerender} = renderHook(useElementIds, {
+        initialProps: {
+          id: 'test-id',
+          tagGroupId: 'test-tag-group-id',
+          getTagId: getTestTagId,
+        },
+      })
+      const renderOneResult = result.current
+      rerender({
+        id: 'test-id',
+        tagGroupId: 'test-tag-group-id',
+        getTagId: getTestTagId,
+      })
+      const renderTwoResult = result.current
+      expect(renderOneResult).toBe(renderTwoResult)
+    })
+  
+    test('returns a new reference on re-renders when the props change', () => {
+      const {result, rerender} = renderHook(useElementIds, {
+        initialProps: {
+          id: 'test-id',
+          tagGroupId: 'test-tag-group-id',
+          getTagId: () => 'test-tag-id',
+        },
+      })
+      const renderOneResult = result.current
+      rerender({
+        id: 'test-id',
+        tagGroupId: 'test-tag-group-id',
+        getTagId: () => 'test-tag-id',
+      })
+      const renderTwoResult = result.current
+      expect(renderOneResult).not.toBe(renderTwoResult)
+    })
+
+  test('generates stable IDs across re-renders', () => {
+    const {result, rerender} = renderHook(() => useElementIds({}))
+
+    const firstTagGroupId = result.current.tagGroupId
+    const firstTagId = result.current.getTagId(0)
+
+    rerender()
+
+    expect(result.current.tagGroupId).toBe(firstTagGroupId)
+    expect(result.current.getTagId(0)).toBe(firstTagId)
+  })
+
+  test('uses provided id prop', () => {
+    const {result} = renderHook(() => useElementIds({id: 'custom-id'}))
+
+    expect(result.current.tagGroupId).toBe('custom-id-tag-group')
+    expect(result.current.getTagId(5)).toBe('custom-id-tag-5')
+  })
+
+  test('uses custom tagGroupId and getTagId when provided', () => {
+    const customGetTagId = (index: number) => `my-tag-${index}`
+    const {result} = renderHook(() =>
+      useElementIds({
+        tagGroupId: 'my-tag-group',
+        getTagId: customGetTagId,
+      }),
+    )
+
+    expect(result.current.tagGroupId).toBe('my-tag-group')
+    expect(result.current.getTagId(3)).toBe('my-tag-3')
+  })
+})