Refactor：upgrade react19 ref as props (#25225)

Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>

web/app/components/base/action-button/index.tsx

@@ -32,6 +32,7 @@ export type ActionButtonProps = {
   size?: 'xs' | 's' | 'm' | 'l' | 'xl'
   state?: ActionButtonState
   styleCss?: CSSProperties
+  ref?: React.Ref<HTMLButtonElement>
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof actionButtonVariants>
 
 function getActionButtonState(state: ActionButtonState) {
@@ -49,8 +50,7 @@ function getActionButtonState(state: ActionButtonState) {
   }
 }
 
-const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
+const ActionButton = ({ className, size, state = ActionButtonState.Default, styleCss, children, ref, ...props }: ActionButtonProps) => {
-  ({ className, size, state = ActionButtonState.Default, styleCss, children, ...props }, ref) => {
   return (
     <button
       type='button'
@@ -65,8 +65,7 @@ const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
       {children}
     </button>
   )
-  },
+}
-)
 ActionButton.displayName = 'ActionButton'
 
 export default ActionButton

web/app/components/base/button/index.tsx

@@ -35,10 +35,10 @@ export type ButtonProps = {
   loading?: boolean
   styleCss?: CSSProperties
   spinnerClassName?: string
+  ref?: React.Ref<HTMLButtonElement>
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = ({ className, variant, size, destructive, loading, styleCss, children, spinnerClassName, ref, ...props }: ButtonProps) => {
-  ({ className, variant, size, destructive, loading, styleCss, children, spinnerClassName, ...props }, ref) => {
   return (
     <button
       type='button'
@@ -54,8 +54,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       {loading && <Spinner loading={loading} className={classNames('!ml-1 !h-3 !w-3 !border-2 !text-white', spinnerClassName)} />}
     </button>
   )
-  },
+}
-)
 Button.displayName = 'Button'
 
 export default Button

web/app/components/base/input/index.tsx

@@ -30,9 +30,10 @@ export type InputProps = {
   wrapperClassName?: string
   styleCss?: CSSProperties
   unit?: string
+  ref?: React.Ref<HTMLInputElement>
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & VariantProps<typeof inputVariants>
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(({
+const Input = ({
   size,
   disabled,
   destructive,
@@ -46,8 +47,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   placeholder,
   onChange = noop,
   unit,
+  ref,
   ...props
-}, ref) => {
+}: InputProps) => {
   const { t } = useTranslation()
   return (
     <div className={cn('relative w-full', wrapperClassName)}>
@@ -93,7 +95,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
       }
     </div>
   )
-})
+}
 
 Input.displayName = 'Input'
 

web/app/components/base/mermaid/index.tsx

@@ -107,10 +107,13 @@ const initMermaid = () => {
   return isMermaidInitialized
 }
 
-const Flowchart = React.forwardRef((props: {
+type FlowchartProps = {
   PrimitiveCode: string
   theme?: 'light' | 'dark'
-}, ref) => {
+  ref?: React.Ref<HTMLDivElement>
+}
+
+const Flowchart = (props: FlowchartProps) => {
   const { t } = useTranslation()
   const [svgString, setSvgString] = useState<string | null>(null)
   const [look, setLook] = useState<'classic' | 'handDrawn'>('classic')
@@ -490,7 +493,7 @@ const Flowchart = React.forwardRef((props: {
   }
 
   return (
-    <div ref={ref as React.RefObject<HTMLDivElement>} className={themeClasses.container}>
+    <div ref={props.ref as React.RefObject<HTMLDivElement>} className={themeClasses.container}>
       <div className={themeClasses.segmented}>
         <div className="msh-segmented-group">
           <label className="msh-segmented-item m-2 flex w-[200px] items-center space-x-1">
@@ -572,7 +575,7 @@ const Flowchart = React.forwardRef((props: {
       )}
     </div>
   )
-})
+}
 
 Flowchart.displayName = 'Flowchart'
 

web/app/components/base/textarea/index.tsx

@@ -24,10 +24,10 @@ export type TextareaProps = {
   disabled?: boolean
   destructive?: boolean
   styleCss?: CSSProperties
+  ref?: React.Ref<HTMLTextAreaElement>
 } & React.TextareaHTMLAttributes<HTMLTextAreaElement> & VariantProps<typeof textareaVariants>
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+const Textarea = ({ className, value, onChange, disabled, size, destructive, styleCss, ref, ...props }: TextareaProps) => {
-  ({ className, value, onChange, disabled, size, destructive, styleCss, ...props }, ref) => {
   return (
     <textarea
       ref={ref}
@@ -46,8 +46,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     >
     </textarea>
   )
-  },
+}
-)
 Textarea.displayName = 'Textarea'
 
 export default Textarea

web/app/components/datasets/preview/container.tsx

@@ -1,14 +1,14 @@
 import type { ComponentProps, FC, ReactNode } from 'react'
-import { forwardRef } from 'react'
 import classNames from '@/utils/classnames'
 
 export type PreviewContainerProps = ComponentProps<'div'> & {
   header: ReactNode
   mainClassName?: string
+  ref?: React.Ref<HTMLDivElement>
 }
 
-export const PreviewContainer: FC<PreviewContainerProps> = forwardRef((props, ref) => {
+export const PreviewContainer: FC<PreviewContainerProps> = (props) => {
-  const { children, className, header, mainClassName, ...rest } = props
+  const { children, className, header, mainClassName, ref, ...rest } = props
   return <div className={className}>
     <div
       {...rest}
@@ -25,5 +25,5 @@ export const PreviewContainer: FC<PreviewContainerProps> = forwardRef((props, re
       </main>
     </div>
   </div>
-})
+}
 PreviewContainer.displayName = 'PreviewContainer'

web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx

@@ -1,5 +1,4 @@
 'use client'
-import type { ForwardRefRenderFunction } from 'react'
 import { useImperativeHandle } from 'react'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import type { Dependency, GitHubItemAndMarketPlaceDependency, PackageDependency, Plugin, VersionInfo } from '../../../types'
@@ -21,6 +20,7 @@ type Props = {
   onDeSelectAll: () => void
   onLoadedAllPlugin: (installedInfo: Record<string, VersionInfo>) => void
   isFromMarketPlace?: boolean
+  ref?: React.Ref<ExposeRefs>
 }
 
 export type ExposeRefs = {
@@ -28,7 +28,7 @@ export type ExposeRefs = {
   deSelectAllPlugins: () => void
 }
 
-const InstallByDSLList: ForwardRefRenderFunction<ExposeRefs, Props> = ({
+const InstallByDSLList = ({
   allPlugins,
   selectedPlugins,
   onSelect,
@@ -36,7 +36,8 @@ const InstallByDSLList: ForwardRefRenderFunction<ExposeRefs, Props> = ({
   onDeSelectAll,
   onLoadedAllPlugin,
   isFromMarketPlace,
-}, ref) => {
+  ref,
+}: Props) => {
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
   // DSL has id, to get plugin info to show more info
   const { isLoading: isFetchingMarketplaceDataById, data: infoGetById, error: infoByIdError } = useFetchPluginsInMarketPlaceByInfo(allPlugins.filter(d => d.type === 'marketplace').map((d) => {
@@ -268,4 +269,4 @@ const InstallByDSLList: ForwardRefRenderFunction<ExposeRefs, Props> = ({
     </>
   )
 }
-export default React.forwardRef(InstallByDSLList)
+export default InstallByDSLList

web/app/components/workflow/block-selector/market-place-plugin/list.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
+import React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import useStickyScroll, { ScrollPosition } from '../use-sticky-scroll'
 import Item from './item'
@@ -17,18 +17,20 @@ export type ListProps = {
   tags: string[]
   toolContentClassName?: string
   disableMaxWidth?: boolean
+  ref?: React.Ref<ListRef>
 }
 
 export type ListRef = { handleScroll: () => void }
 
-const List = forwardRef<ListRef, ListProps>(({
+const List = ({
   wrapElemRef,
   searchText,
   tags,
   list,
   toolContentClassName,
   disableMaxWidth = false,
-}, ref) => {
+  ref,
+}: ListProps) => {
   const { t } = useTranslation()
   const hasFilter = !searchText
   const hasRes = list.length > 0
@@ -125,7 +127,7 @@ const List = forwardRef<ListRef, ListProps>(({
       </div>
     </>
   )
-})
+}
 
 List.displayName = 'List'