dev: update dependencies and pipeline node versions

.github/workflows/validate.yml

@@ -16,7 +16,7 @@ jobs:
     if: ${{ !contains(github.head_ref, 'all-contributors') }}
     strategy:
       matrix:
-        node: [18, 20]
+        node: [20, 22, 24]
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs
@@ -68,7 +68,7 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v1
         with:
-          node-version: 16
+          node-version: 24
 
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1

package.json

@@ -80,59 +80,60 @@
     "react": ">=16.12.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
-    "compute-scroll-into-view": "^3.1.0",
+    "@babel/runtime": "^7.28.4",
+    "compute-scroll-into-view": "^3.1.1",
     "prop-types": "^15.8.1",
-    "react-is": "18.2.0",
-    "tslib": "^2.6.2"
+    "react-is": "19.2.1",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@babel/helpers": "^7.24.5",
+    "@babel/helpers": "^7.28.4",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@cypress/webpack-preprocessor": "^6.0.1",
-    "@docusaurus/core": "3.3.2",
-    "@docusaurus/module-type-aliases": "3.3.2",
-    "@docusaurus/preset-classic": "3.3.2",
-    "@mdx-js/react": "^3.0.1",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@testing-library/cypress": "^10.0.1",
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/preact": "^2.0.1",
-    "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
-    "@types/react": "^18.3.2",
-    "@typescript-eslint/eslint-plugin": "^7.9.0",
-    "@typescript-eslint/parser": "^7.9.0",
+    "@cypress/webpack-preprocessor": "^7.0.2",
+    "@docusaurus/core": "3.9.2",
+    "@docusaurus/module-type-aliases": "3.9.2",
+    "@docusaurus/preset-classic": "3.9.2",
+    "@mdx-js/react": "^3.1.1",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@testing-library/cypress": "^10.1.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/preact": "^3.2.4",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/prop-types": "^15.7.15",
+    "@types/react": "^19.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-no-side-effect-class-properties": "0.0.7",
     "babel-preset-react-native": "^4.0.1",
     "buble": "^0.20.0",
-    "cpy-cli": "^5.0.0",
-    "cross-env": "^7.0.3",
-    "cypress": "13.9.0",
-    "eslint": "^8.56.0",
-    "eslint-plugin-cypress": "^3.2.0",
-    "eslint-plugin-react": "7.34.1",
-    "flow-bin": "^0.236.0",
+    "cpy-cli": "^6.0.0",
+    "cross-env": "^10.1.0",
+    "cypress": "15.7.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-cypress": "^3.6.0",
+    "eslint-plugin-react": "7.37.5",
+    "flow-bin": "^0.293.0",
     "flow-coverage-report": "^0.8.0",
     "get-pkg-repo": "5.0.0",
-    "kcd-scripts": "^15.0.1",
-    "node-polyfill-webpack-plugin": "^3.0.0",
+    "kcd-scripts": "^16.0.0",
+    "node-polyfill-webpack-plugin": "^4.1.0",
     "npm-run-all": "^4.1.5",
-    "preact": "^10.22.0",
-    "prism-react-renderer": "^2.3.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "^0.74.1",
-    "react-test-renderer": "18.2.0",
-    "serve": "^14.2.3",
-    "start-server-and-test": "^2.0.3",
-    "typescript": "^5.4.5"
+    "preact": "^10.28.0",
+    "prism-react-renderer": "^2.4.1",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
+    "react-native": "^0.82.1",
+    "react-test-renderer": "19.2.1",
+    "serve": "^14.2.5",
+    "start-server-and-test": "^2.1.3",
+    "typescript": "^5.9.3"
   },
   "eslintConfig": {
     "parserOptions": {

rollup.config.js

@@ -3,6 +3,9 @@ const {babel} = require('@rollup/plugin-babel')
 const typescript = require('@rollup/plugin-typescript')
 const config = require('kcd-scripts/dist/config/rollup.config')
 
+const isPreact = process.env.BUILD_PREACT === 'true'
+const tsconfig = isPreact ? 'tsconfig.preact.json' : 'tsconfig.json'
+
 const babelPluginIndex = config.plugins.findIndex(
   plugin => plugin.name === 'babel',
 )
@@ -21,10 +24,10 @@ config.plugins[cjsPluginIndex] = commonjs({
 })
 
 if (typescriptPluginIndex === -1) {
-  config.plugins.push(typescript({tsconfig: 'tsconfig.json'}))
+  config.plugins.push(typescript({tsconfig}))
 } else {
   config.plugins[typescriptPluginIndex] = typescript({
-    tsconfig: 'tsconfig.json',
+    tsconfig,
   })
 }
 

src/__tests__/__snapshots__/downshift.get-menu-props.js.snap

@@ -1,5 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`not applying the ref prop results in an error 1`] = `downshift: The ref prop "ref" from getMenuProps was not applied correctly on your menu element.`;
-
-exports[`using a composite component and calling getMenuProps without a refKey results in an error 1`] = `downshift: The ref prop "ref" from getMenuProps was not applied correctly on your menu element.`;

src/__tests__/downshift.get-button-props.js

@@ -74,11 +74,7 @@ test('getToggleButtonProps returns all given props', () => {
   const Button = jest.fn(props => <button {...props} />)
   setup({buttonProps, Button})
   expect(Button).toHaveBeenCalledTimes(1)
-  const context = expect.any(Object)
-  expect(Button).toHaveBeenCalledWith(
-    expect.objectContaining(buttonProps),
-    context,
-  )
+  expect(Button).toHaveBeenCalledWith(expect.objectContaining(buttonProps), undefined)
 })
 
 // normally this test would be like the others where we render and then simulate a click on the

src/__tests__/downshift.get-menu-props.js

@@ -8,7 +8,7 @@ afterEach(() => console.error.mockRestore())
 const Menu = ({innerRef, ...rest}) => <div ref={innerRef} {...rest} />
 const RefMenu = React.forwardRef((props, ref) => <div ref={ref} {...props} />)
 
-test('using a composite component and calling getMenuProps without a refKey results in an error', () => {
+test('using a composite component and calling getMenuProps without a refKey does not result in error anymore', () => {
   const MyComponent = () => (
     <Downshift
       children={({getMenuProps}) => (
@@ -19,7 +19,7 @@ test('using a composite component and calling getMenuProps without a refKey resu
     />
   )
   render(<MyComponent />)
-  expect(console.error.mock.calls[1][0]).toMatchSnapshot()
+  expect(console.error).not.toHaveBeenCalled()
 })
 
 test('not applying the ref prop results in an error', () => {

src/__tests__/downshift.misc.js

@@ -2,7 +2,7 @@
 // but we still want to have tested.
 
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import * as ReactDOM from 'react-dom/client'
 import {act, render} from '@testing-library/react'
 import Downshift from '../'
 
@@ -68,21 +68,38 @@ test('toggleMenu can take no arguments at all', () => {
   )
 })
 
-test('clearItems clears the all items', () => {
+test('clearItems clears all items', () => {
   const item = 'Chess'
+
   const children = ({getItemProps}) => (
     <div>
       <div key={item} {...getItemProps({item})}>
         {item}
       </div>
     </div>
   )
-  // IMPLEMENTATION DETAIL TEST :-(
-  // eslint-disable-next-line react/no-render-return-value
-  const downshiftInstance = ReactDOM.render(
-    <Downshift>{children}</Downshift>,
-    document.createElement('div'),
-  )
+
+  // Wrap Downshift to expose its instance methods through a ref
+  const DownshiftWrapper = React.forwardRef((_props, ref) => {
+    const innerRef = React.useRef(null)
+
+    React.useImperativeHandle(ref, () => innerRef.current)
+
+    return <Downshift ref={innerRef}>{children}</Downshift>
+  })
+
+  const container = document.createElement('div')
+  const root = ReactDOM.createRoot(container)
+
+  const dsRef = React.createRef()
+
+  // eslint-disable-next-line testing-library/no-unnecessary-act
+  act(() => {
+    root.render(<DownshiftWrapper ref={dsRef} />)
+  })
+
+  const downshiftInstance = dsRef.current
+
   expect(downshiftInstance.items).toEqual([item])
   downshiftInstance.clearItems()
   expect(downshiftInstance.items).toEqual([])

src/hooks/__tests__/utils.test.js

@@ -78,7 +78,7 @@ describe('utils', () => {
 
       expect(() =>
         getItemAndIndex(undefined, undefined, [1, 2, 3], errorMessage),
-      ).toThrowError(errorMessage)
+      ).toThrow(errorMessage)
     })
 
     test('returns index if item is passed', () => {
@@ -137,7 +137,7 @@ describe('utils', () => {
     test('renders without error', () => {
       expect(() => {
         renderHook(() => useMouseAndTouchTracker(undefined, jest.fn(), []))
-      }).not.toThrowError()
+      }).not.toThrow()
     })
 
     test('adds and removes listeners to environment', () => {

src/hooks/useCombobox/__tests__/getItemProps.test.js

@@ -17,7 +17,7 @@ describe('getItemProps', () => {
   test('throws error if no index or item has been passed', () => {
     const {result} = renderUseCombobox()
 
-    expect(result.current.getItemProps).toThrowError(
+    expect(result.current.getItemProps).toThrow(
       'Pass either item or index to getItemProps!',
     )
   })

src/hooks/useCombobox/__tests__/utils.test.js

@@ -4,6 +4,6 @@ describe('utils', () => {
   test('reducer throws error if called without proper action type', () => {
     expect(() => {
       reducer({}, {type: 'super-bogus'})
-    }).toThrowError('Reducer called without proper action type.')
+    }).toThrow('Reducer called without proper action type.')
   })
 })

src/hooks/useMultipleSelection/__tests__/getSelectedItemProps.test.js

@@ -17,7 +17,7 @@ describe('getSelectedItemProps', () => {
   test('throws error if no index or item has been passed', () => {
     const {result} = renderUseMultipleSelection()
 
-    expect(result.current.getSelectedItemProps).toThrowError(
+    expect(result.current.getSelectedItemProps).toThrow(
       'Pass either item or index to getSelectedItemProps!',
     )
   })

src/hooks/useMultipleSelection/__tests__/utils.test.js

@@ -4,6 +4,6 @@ describe('utils', () => {
   test('reducer throws error if called without proper action type', () => {
     expect(() => {
       reducer({}, {type: 'super-bogus'})
-    }).toThrowError('Reducer called without proper action type.')
+    }).toThrow('Reducer called without proper action type.')
   })
 })

src/hooks/useSelect/__tests__/getItemProps.test.js

@@ -18,7 +18,7 @@ describe('getItemProps', () => {
   test('throws error if no index or item has been passed', () => {
     const {result} = renderUseSelect()
 
-    expect(result.current.getItemProps).toThrowError(
+    expect(result.current.getItemProps).toThrow(
       'Pass either item or index to getItemProps!',
     )
   })

src/hooks/useSelect/__tests__/utils.test.ts

@@ -60,5 +60,5 @@ describe('getItemIndexByCharacterKey', () => {
 test('reducer throws error if called without proper action type', () => {
   expect(() => {
     reducer({}, {type: 'super-bogus'})
-  }).toThrowError('Reducer called without proper action type.')
+  }).toThrow('Reducer called without proper action type.')
 })

tsconfig.json

@@ -12,7 +12,7 @@
     "module": "ESNext",
     "typeRoots": ["./typings", "./node_modules/@types"],
     "strictNullChecks": true,
-    "outDir": "dist",
+    "outDir": "dist"
   },
   "include": [
     "typings/**/*.d.ts",

tsconfig.preact.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "preact/dist"
+  }
+}