React 19 support

package.json

@@ -60,7 +60,7 @@
     "set-harmonic-interval": "^1.0.1",
     "throttle-debounce": "^3.0.1",
     "ts-easing": "^0.2.0",
-    "tslib": "^2.1.0"
+    "tslib": "^2.8.1"
   },
   "peerDependencies": {
     "react": "*",
@@ -81,10 +81,11 @@
     "@storybook/addon-notes": "5.3.21",
     "@storybook/addon-options": "5.3.21",
     "@storybook/react": "6.4.9",
-    "@testing-library/react": "12.1.2",
-    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/react": "16.1.0",
+    "@testing-library/react-hooks": "8.0.1",
     "@types/jest": "27.5.2",
-    "@types/react": "17.0.0",
+    "@types/react": "19.0.1",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
     "babel-core": "6.26.3",
@@ -110,8 +111,8 @@
     "markdown-loader": "6.0.0",
     "prettier": "2.3.0",
     "raf-stub": "3.0.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-frame-component": "5.2.7",
     "react-spring": "9.7.4",
     "react-test-renderer": "17.0.2",
@@ -124,7 +125,7 @@
     "ts-jest": "26.5.6",
     "ts-loader": "8.4.0",
     "ts-node": "10.9.2",
-    "typescript": "4.1.5"
+    "typescript": "5.7.2"
   },
   "config": {
     "commitizen": {

src/useLongPress.ts

@@ -22,8 +22,8 @@ const useLongPress = (
   callback: (e: TouchEvent | MouseEvent) => void,
   { isPreventDefault = true, delay = 300 }: Options = {}
 ) => {
-  const timeout = useRef<ReturnType<typeof setTimeout>>();
-  const target = useRef<EventTarget>();
+  const timeout = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const target = useRef<EventTarget>(undefined);
 
   const start = useCallback(
     (event: TouchEvent | MouseEvent) => {

src/useMethods.ts

@@ -24,7 +24,7 @@ const useMethods = <M, T>(
     [createMethods]
   );
 
-  const [state, dispatch] = useReducer<Reducer<T, Action>>(reducer, initialState);
+  const [state, dispatch] = useReducer(reducer, initialState);
 
   const wrappedMethods: WrappedMethods<M> = useMemo(() => {
     const actionTypes = Object.keys(createMethods(initialState));

src/useMouse.ts

@@ -14,7 +14,7 @@ export interface State {
   elW: number;
 }
 
-const useMouse = (ref: RefObject<Element>): State => {
+const useMouse = (ref: RefObject<Element | null>): State => {
   if (process.env.NODE_ENV === 'development') {
     if (typeof ref !== 'object' || typeof ref.current === 'undefined') {
       console.error('useMouse expects a single ref argument.');

src/useMouseWheel.ts

@@ -4,7 +4,7 @@ import { off, on } from './misc/util';
 export default () => {
   const [mouseWheelScrolled, setMouseWheelScrolled] = useState(0);
   useEffect(() => {
-    const updateScroll = (e: MouseWheelEvent) => {
+    const updateScroll = (e: WheelEvent) => {
       setMouseWheelScrolled(e.deltaY + mouseWheelScrolled);
     };
     on(window, 'wheel', updateScroll, false);

src/usePrevious.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 export default function usePrevious<T>(state: T): T | undefined {
-  const ref = useRef<T>();
+  const ref = useRef<T>(undefined);
 
   useEffect(() => {
     ref.current = state;

src/usePreviousDistinct.ts

@@ -9,7 +9,7 @@ export default function usePreviousDistinct<T>(
   value: T,
   compare: Predicate<T> = strictEquals
 ): T | undefined {
-  const prevRef = useRef<T>();
+  const prevRef = useRef<T>(undefined);
   const curRef = useRef<T>(value);
   const isFirstMount = useFirstMountState();
 

src/useThrottle.ts

@@ -3,7 +3,7 @@ import useUnmount from './useUnmount';
 
 const useThrottle = <T>(value: T, ms: number = 200) => {
   const [state, setState] = useState<T>(value);
-  const timeout = useRef<ReturnType<typeof setTimeout>>();
+  const timeout = useRef<ReturnType<typeof setTimeout>>(undefined);
   const nextValue = useRef(null) as any;
   const hasNextValue = useRef(0) as any;
 

src/useThrottleFn.ts

@@ -3,8 +3,8 @@ import useUnmount from './useUnmount';
 
 const useThrottleFn = <T, U extends any[]>(fn: (...args: U) => T, ms: number = 200, args: U) => {
   const [state, setState] = useState<T | null>(null);
-  const timeout = useRef<ReturnType<typeof setTimeout>>();
-  const nextArgs = useRef<U>();
+  const timeout = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const nextArgs = useRef<U>(undefined);
 
   useEffect(() => {
     if (!timeout.current) {

src/useTimeoutFn.ts

@@ -4,7 +4,7 @@ export type UseTimeoutFnReturn = [() => boolean | null, () => void, () => void];
 
 export default function useTimeoutFn(fn: Function, ms: number = 0): UseTimeoutFnReturn {
   const ready = useRef<boolean | null>(false);
-  const timeout = useRef<ReturnType<typeof setTimeout>>();
+  const timeout = useRef<ReturnType<typeof setTimeout>>(undefined);
   const callback = useRef(fn);
 
   const isReady = useCallback(() => ready.current, []);

src/useToggle.ts

@@ -1,10 +1,10 @@
-import { Reducer, useReducer } from 'react';
+import { useReducer, ActionDispatch } from 'react';
 
-const toggleReducer = (state: boolean, nextValue?: any) =>
+const toggleReducer = (state: any, nextValue?: any) =>
   typeof nextValue === 'boolean' ? nextValue : !state;
 
-const useToggle = (initialValue: boolean): [boolean, (nextValue?: any) => void] => {
-  return useReducer<Reducer<boolean, any>>(toggleReducer, initialValue);
+const useToggle = (initialValue: boolean): [boolean, ActionDispatch<any>] => {
+  return useReducer(toggleReducer, initialValue);
 };
 
 export default useToggle;

tests/createBreakpoint.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import createBreakpoint from '../src/factory/createBreakpoint';
 
 const useBreakpointA = createBreakpoint();

tests/createGlobalState.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import createGlobalState from '../src/factory/createGlobalState';
 
 describe('useGlobalState', () => {

tests/createMemo.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import createMemo from '../src/factory/createMemo';
 
 const getDouble = jest.fn((n: number): number => n * 2);

tests/createReducer.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import logger from 'redux-logger';
 import thunk from 'redux-thunk';
 import createReducer from '../src/factory/createReducer';

tests/createReducerContext.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import createReducerContext from '../src/factory/createReducerContext';
 
 type Action = 'increment' | 'decrement';

tests/createStateContext.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import createStateContext from '../src/factory/createStateContext';
 
 it('should create a hook and a provider', () => {

tests/useAsync.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useCallback } from 'react';
 import useAsync from '../src/useAsync';
 

tests/useAsyncFn.test.tsx

@@ -5,7 +5,7 @@
 // does not automatically invoke the function
 // and it can take arguments.
 
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import useAsyncFn, { AsyncState } from '../src/useAsyncFn';
 
 type AdderFn = (a?: number, b?: number) => Promise<number>;

tests/useAudio.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import useAudio from '../src/useAudio';
 const setUp = (
   src: string = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',

tests/useCookie.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import Cookies from 'js-cookie';
 import { useCookie } from '../src';
 

tests/useCopyToClipboard.test.ts

@@ -1,5 +1,5 @@
 import writeText from 'copy-to-clipboard';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import { useCopyToClipboard } from '../src';
 
 const valueToRaiseMockException = 'fake input causing exception in copy to clipboard';

tests/useCounter.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import useCounter from '../src/useCounter';
 
 const setUp = (initialValue?: number, max: number | null = null, min: number | null = null) =>

tests/useCustomCompareEffect.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useCustomCompareEffect } from '../src';
 import { useEffect } from 'react';
 import isDeepEqual from '../src/misc/isDeepEqual';

tests/useDebounce.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook, RenderHookResult } from '@testing-library/react-hooks';
+import { act, renderHook, RenderHookResult } from '@testing-library/react';
 import { DependencyList } from 'react';
 import { UseDebounceReturn } from '../src/useDebounce';
 import { useDebounce } from '../src';

tests/useDeepCompareEffect.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useDeepCompareEffect } from '../src';
 import { useEffect } from 'react';
 

tests/useDefault.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import useDefault from '../src/useDefault';
 
 const setUp = (defaultValue: any, initialValue: any) =>

tests/useEffectOnce.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useEffectOnce } from '../src';
 
 const mockEffectCleanup = jest.fn();

tests/useEnsuredForwardedRef.test.tsx

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import ReactDOM from 'react-dom';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import TestUtils from 'react-dom/test-utils';
 import { ensuredForwardRef, useEnsuredForwardedRef } from '../src';
 

tests/useError.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { useError } from '../src';
 
 const setup = () => renderHook(() => useError());

tests/useEvent.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import useEvent, { ListenerType1, ListenerType2 } from '../src/useEvent';
 
 interface Props {

tests/useFavicon.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import useFavicon from '../src/useFavicon';
 
 afterEach(() => {

tests/useFirstMountState.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useFirstMountState } from '../src';
 
 describe('useFirstMountState', () => {

tests/useGetSet.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import useGetSet from '../src/useGetSet';
 
 const setUp = (initialValue: any) => renderHook(() => useGetSet(initialValue));

tests/useGetSetState.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import useGetSetState from '../src/useGetSetState';
 
 const originalConsoleError = console.error;

tests/useHash.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { useHash } from '../src/useHash';
 
 (global as any).window = Object.create(window);

tests/useIntersection.test.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import TestUtils from 'react-dom/test-utils';
 import TestRenderer from 'react-test-renderer';
 import { intersectionObserver } from '@shopify/jest-dom-mocks';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useIntersection } from '../src';
 
 beforeEach(() => {

tests/useInterval.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useInterval } from '../src';
 
 let callback;

tests/useLatest.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import useLatest from '../src/useLatest';
 
 const setUp = () => renderHook(({ state }) => useLatest(state), { initialProps: { state: 0 } });

tests/useList.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import { useRef } from 'react';
 import useList, { ListActions } from '../src/useList';
 

tests/useLocalStorage.test.ts

@@ -1,6 +1,6 @@
 import useLocalStorage from '../src/useLocalStorage';
 import 'jest-localstorage-mock';
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 
 describe(useLocalStorage, () => {
   afterEach(() => {

tests/useLogger.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import useLogger from '../src/useLogger';
 
 const logSpy = jest.spyOn(global.console, 'log').mockImplementation(() => {});

tests/useLongPress.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import useLongPress from '../src/useLongPress';
 
 const callback = jest.fn();

tests/useMap.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import useMap from '../src/useMap';
 
 const setUp = <T extends object>(initialMap?: T) => renderHook(() => useMap(initialMap));

tests/useMeasure.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import useMeasure, { UseMeasureRef } from '../src/useMeasure';
 
 it('by default, state defaults every value to -1', () => {

tests/useMedia.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { renderHook as renderHookSSR } from '@testing-library/react-hooks/server';
 import { useMedia } from '../src';
 

tests/useMediatedState.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook, RenderHookResult } from '@testing-library/react-hooks';
+import { act, renderHook, RenderHookResult } from '@testing-library/react';
 import { Dispatch, SetStateAction } from 'react';
 import { useMediatedState } from '../src';
 import { StateMediator, UseMediatedStateReturn } from '../src/useMediatedState';

tests/useMethods.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { useMethods } from '../src';
 
 it('should have initialState value as the returned state value', () => {

tests/useMount.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useMount } from '../src';
 
 const mockCallback = jest.fn();

tests/useMountedState.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import useMountedState from '../src/useMountedState';
 
 describe('useMountedState', () => {

tests/useMultiStateValidator.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook, RenderHookResult } from '@testing-library/react-hooks';
+import { act, renderHook, RenderHookResult } from '@testing-library/react';
 import { useState } from 'react';
 import { MultiStateValidator, useMultiStateValidator } from '../src/useMultiStateValidator';
 import { UseStateValidatorReturn, ValidityState } from '../src/useStateValidator';