fix: react 19 type error

.dumi/components/SemanticPreview.tsx

@@ -103,7 +103,7 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
   // ======================== Hover =========================
   const containerRef = React.useRef<HTMLDivElement>(null);
 
-  const timerRef = React.useRef<ReturnType<typeof setTimeout>>();
+  const timerRef = React.useRef<ReturnType<typeof setTimeout>>(null);
 
   const [positionMotion, setPositionMotion] = React.useState<boolean>(false);
   const [hoverSemantic, setHoverSemantic] = React.useState<string | null>(null);

.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx

@@ -306,7 +306,7 @@ const ComponentChangelog: React.FC<Readonly<React.PropsWithChildren>> = (props)
   return (
     <>
       {isValidElement(children) &&
-        cloneElement(children as React.ReactElement, {
+        cloneElement(children as React.ReactElement<any>, {
           onClick: () => setShow(true),
         })}
       <Drawer

.dumi/theme/common/PrevAndNext.tsx

@@ -141,11 +141,11 @@ const PrevAndNext: React.FC<{ rtl?: boolean }> = ({ rtl }) => {
   return (
     <section className={styles.prevNextNav}>
       {prev &&
-        React.cloneElement(prev.label as ReactElement, {
+        React.cloneElement(prev.label as ReactElement<any>, {
           className: classNames(styles.pageNav, styles.prevNav, prev.className),
         })}
       {next &&
-        React.cloneElement(next.label as ReactElement, {
+        React.cloneElement(next.label as ReactElement<any>, {
           className: classNames(styles.pageNav, styles.nextNav, next.className),
         })}
     </section>

.dumi/theme/layouts/DocLayout/index.tsx

@@ -35,7 +35,7 @@ const DocLayout: React.FC = () => {
   const location = useLocation();
   const { pathname, search, hash } = location;
   const [locale, lang] = useLocale(locales);
-  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(null);
   const { direction } = useContext(SiteContext);
   const { loading } = useSiteData();
 
@@ -52,7 +52,11 @@ const DocLayout: React.FC = () => {
     timerRef.current = setTimeout(() => {
       nprogressHiddenStyle?.remove();
     }, 0);
-    return () => clearTimeout(timerRef.current);
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
   }, []);
 
   // handle hash change or visit page hash from Link component, and jump after async chunk loaded

components/attachments/index.tsx

@@ -90,8 +90,7 @@ function Attachments(props: AttachmentsProps, ref: React.Ref<AttachmentsRef>) {
   React.useImperativeHandle(ref, () => ({
     nativeElement: containerRef.current,
     upload: (file) => {
-      const fileInput =
-        uploadRef.current?.nativeElement?.querySelector<HTMLInputElement>('input[type="file"]');
+      const fileInput = uploadRef.current?.nativeElement?.querySelector('input[type="file"]');
 
       // Trigger native change event
       if (fileInput) {

components/sender/index.tsx

@@ -17,12 +17,13 @@ import useStyle from './style';
 import useSpeech, { type AllowSpeech } from './useSpeech';
 
 import type { InputRef as AntdInputRef, ButtonProps, GetProps } from 'antd';
-import type { CustomizeComponent, SubmitType } from './interface';
+
+export type SubmitType = 'enter' | 'shiftEnter' | false;
 
 type TextareaProps = GetProps<typeof Input.TextArea>;
 
 export interface SenderComponents {
-  input?: CustomizeComponent<TextareaProps>;
+  input?: React.ComponentType<TextareaProps>;
 }
 
 export type ActionsRender = (
@@ -80,8 +81,8 @@ export type SenderRef = {
 function getComponent<T>(
   components: SenderComponents | undefined,
   path: string[],
-  defaultComponent: CustomizeComponent<T>,
-): CustomizeComponent<T> {
+  defaultComponent: React.ComponentType<T>,
+): React.ComponentType<T> {
   return getValue(components, path) || defaultComponent;
 }
 

tests/utils.tsx

@@ -32,7 +32,7 @@ export const sleep = async (timeout = 0) => {
 const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>): RenderResult =>
   render(ui, { wrapper: StrictMode, ...options });
 
-export function renderHook<T>(func: () => T): { result: React.RefObject<T> } {
+export function renderHook<T>(func: () => T): { result: React.RefObject<T | null> } {
   const result = createRef<T>();
 
   const Demo: React.FC = () => {