✨ add support for react 19 (#34)

leonardodino · Jan 9, 2025 · 91a5b3c · 91a5b3c
1 parent 677c6ed
commit 91a5b3c
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 7 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -17,8 +17,23 @@ jobs:
       - name: Run build
         run: pnpm run build
 
+      - name: List installed versions
+        run: pnpm --recursive list react react-dom @types/react @types/react-dom
+
+      - name: Typecheck (react@18)
+        run: pnpm run typecheck
+
       - name: Lint
         run: pnpm run format -l
 
       - name: Check Git Status
         run: git status --porcelain
+
+      - name: Update to latest react
+        run: pnpm --recursive update --latest react react-dom @types/react @types/react-dom
+
+      - name: List installed versions
+        run: pnpm --recursive list react react-dom @types/react @types/react-dom
+
+      - name: Typecheck (react@latest)
+        run: pnpm run typecheck
diff --git a/packages/rci/src/components/CodeInput.tsx b/packages/rci/src/components/CodeInput.tsx
@@ -4,7 +4,7 @@ import type { RenderSegmentFn } from '../types/RenderSegmentFn'
 import * as RCI from './RCI'
 
 export type CodeInputProps = RCI.InputProps & {
-  inputRef: React.RefObject<HTMLInputElement>
+  inputRef: React.RefObject<HTMLInputElement | null>
   renderSegment: RenderSegmentFn
 
   length?: number

diff --git a/packages/rci/src/components/RCI.tsx b/packages/rci/src/components/RCI.tsx
@@ -47,7 +47,7 @@ export type InputProps = Omit<
   React.ComponentPropsWithRef<'input'>,
   'maxLength' | 'children' | 'value'
 >
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+export const Input = React.forwardRef<HTMLInputElement | null, InputProps>(
   (props, ref) => {
     const length = useLengthContext()
     return (

diff --git a/packages/use-code-input/src/index.ts b/packages/use-code-input/src/index.ts
@@ -48,7 +48,7 @@ const useCodeInputHandler = ({
   previousRef,
   setSelection,
 }: {
-  inputRef: React.RefObject<HTMLInputElement>
+  inputRef: React.RefObject<HTMLInputElement | null>
   previousRef: React.MutableRefObject<SelectionState | undefined>
   setSelection: React.Dispatch<React.SetStateAction<SelectionState>>
 }) => {
@@ -86,7 +86,7 @@ const useCodeInputEffect = ({
   previousRef,
   handler,
 }: {
-  inputRef: React.RefObject<HTMLInputElement>
+  inputRef: React.RefObject<HTMLInputElement | null>
   previousRef: React.MutableRefObject<SelectionState | undefined>
   handler: (event: Event) => void
 }): void => {
@@ -107,9 +107,11 @@ const useCodeInputEffect = ({
   }, [inputRef, handler, previousRef])
 }
 
-export const useCodeInput = (inputRef: React.RefObject<HTMLInputElement>) => {
+export const useCodeInput = (
+  inputRef: React.RefObject<HTMLInputElement | null>,
+) => {
   const [selection, setSelection] = useState<SelectionState>(ZERO)
-  const previousRef = useRef<SelectionState>()
+  const previousRef = useRef<SelectionState | undefined>(undefined)
   const handler = useCodeInputHandler({ inputRef, previousRef, setSelection })
 
   useCodeInputEffect({ inputRef, previousRef, handler })

diff --git a/packages/use-is-focused/src/index.ts b/packages/use-is-focused/src/index.ts
@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react'
 
-export const useIsFocused = (inputRef: React.RefObject<HTMLInputElement>) => {
+export const useIsFocused = (
+  inputRef: React.RefObject<HTMLInputElement | null>,
+) => {
   const [isFocused, setIsFocused] = useState<boolean | undefined>(undefined)
   const isFocusedRef = useRef<boolean | undefined>(isFocused)