wip: feat: support react 19

packages/icons/src/index.ts

@@ -8,11 +8,13 @@ declare global {
   interface Window {
     PixivIcon: typeof PixivIcon
   }
+}
 
+declare module 'react' {
   // eslint-disable-next-line @typescript-eslint/no-namespace
-  export namespace JSX {
+  namespace JSX {
     interface IntrinsicElements {
-      'pixiv-icon': Props
+      'pixiv-icon': import('./PixivIcon').Props
     }
   }
 }

packages/react-sandbox/src/components/TextEllipsis/helper.ts

@@ -1,12 +1,6 @@
 // https://github.com/fernandopasik/react-children-utilities/blob/971d8a0324e6183734d8d1af9a65dbad18ab3d00/src/lib/onlyText.ts
 
-import {
-  Children,
-  isValidElement,
-  ReactElement,
-  ReactNode,
-  ReactText,
-} from 'react'
+import { Children, isValidElement, ReactElement, ReactNode } from 'react';
 
 const hasChildren = (
   element: ReactNode
@@ -16,7 +10,7 @@ const hasChildren = (
 
 export const childToString = (
   // eslint-disable-next-line @typescript-eslint/ban-types
-  child?: ReactText | boolean | {} | null
+  child?: number | string | boolean | {} | null
 ): string => {
   if (
     typeof child === 'undefined' ||

packages/react-sandbox/src/foundation/hooks.ts

@@ -96,7 +96,7 @@ function measure(ref: Element | null): ElementSize | undefined {
 }
 
 export function useElementSize(
-  ref: React.RefObject<Element>,
+  ref: React.RefObject<Element | null>,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   deps: any[] = []
 ) {
@@ -174,21 +174,21 @@ export function useElementSize(
  */
 export function useDebounceAnimationState<T>(defaultValue: T) {
   const [state, setState] = useState(defaultValue)
-  const timer = useRef<ReturnType<typeof requestAnimationFrame>>()
+  const timer = useRef<ReturnType<typeof requestAnimationFrame> | null>(null)
   // typescript bug? (any when omitting type annotation)
   // eslint-disable-next-line @typescript-eslint/no-inferrable-types
   const setDebounceState = useCallback((value: T, force: boolean = false) => {
     if (force) {
       setState(value)
       return
     }
-    if (timer.current !== undefined) {
+    if (timer.current !== null) {
       return
     }
     timer.current = requestAnimationFrame(() => {
       setState(value)
-      if (timer.current !== undefined) {
-        timer.current = undefined
+      if (timer.current !== null) {
+        timer.current = null
       }
     })
   }, [])

packages/react/src/components/DropdownSelector/ListItem/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { ReactNode, type JSX } from 'react';
 import styled from 'styled-components'
 
 export type CustomJSXElement =

packages/react/src/components/DropdownSelector/MenuList/MenuListContext.ts

@@ -2,7 +2,7 @@ import { RefObject, createContext } from 'react'
 import { DropdownMenuItemProps } from '../DropdownMenuItem'
 
 type MenuListContextType = {
-  root?: RefObject<HTMLUListElement>
+  root?: RefObject<HTMLUListElement | null>
   value?: string
   propsArray?: DropdownMenuItemProps[]
   setValue: (v: string) => void

packages/react/src/components/DropdownSelector/Popover/index.tsx

@@ -9,8 +9,8 @@ export type PopoverProps = {
   isOpen: boolean
   onClose: () => void
   children: ReactNode
-  triggerRef: RefObject<Element>
-  popoverRef?: RefObject<HTMLDivElement>
+  triggerRef: RefObject<Element | null>
+  popoverRef?: RefObject<HTMLDivElement | null>
 }
 
 const _empty = () => null

packages/react/src/components/Modal/useCustomModalOverlay.tsx

@@ -16,7 +16,7 @@ import { usePreventScroll } from '../DropdownSelector/Popover/usePreventScroll'
 export function useCharcoalModalOverlay(
   props: AriaModalOverlayProps,
   state: { isOpen: boolean; onClose: () => void },
-  ref: React.RefObject<HTMLElement>
+  ref: React.RefObject<HTMLElement | null>
 ): ModalOverlayAria {
   const { overlayProps, underlayProps } = useOverlay(
     {

packages/react/src/components/TextField/useFocusWithClick.tsx

@@ -2,8 +2,8 @@ import { useEffect } from 'react'
 import * as React from 'react'
 
 export function useFocusWithClick(
-  containerRef: React.RefObject<HTMLDivElement>,
-  inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement>
+  containerRef: React.RefObject<HTMLDivElement | null>,
+  inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>
 ) {
   useEffect(() => {
     const el = containerRef.current

packages/styled/src/index.test.tsx

@@ -6,6 +6,8 @@ import styled, { ThemeProvider } from 'styled-components'
 import { Example } from './index.story'
 import { MyTheme, myTheme } from './storyHelper'
 
+import type { JSX } from "react";
+
 function render(children: JSX.Element) {
   return renderer
     .create(<ThemeProvider theme={myTheme(light)}>{children}</ThemeProvider>)