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

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

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

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

   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,
   placeholder,
   onChange = noop,
   unit,
+  ref,
   ...props
-}, ref) => {
+}: InputProps) => {
   const { t } = useTranslation()
   return (
     <div className={cn('relative w-full', wrapperClassName)}>
       }
     </div>
   )
-})
+}
 
 Input.displayName = 'Input'
 

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

   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')
   }
 
   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">
       )}
     </div>
   )
-})
+}
 
 Flowchart.displayName = 'Flowchart'
 

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

   disabled?: boolean
   destructive?: boolean
   styleCss?: CSSProperties
+  ref?: React.Ref<HTMLTextAreaElement>
 } & React.TextareaHTMLAttributes<HTMLTextAreaElement> & VariantProps<typeof textareaVariants>
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, value, onChange, disabled, size, destructive, styleCss, ...props }, ref) => {
-    return (
-      <textarea
-        ref={ref}
-        style={styleCss}
-        className={cn(
-          'min-h-20 w-full appearance-none border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs',
-          textareaVariants({ size }),
-          disabled && 'cursor-not-allowed border-transparent bg-components-input-bg-disabled text-components-input-text-filled-disabled hover:border-transparent hover:bg-components-input-bg-disabled',
-          destructive && 'border-components-input-border-destructive bg-components-input-bg-destructive text-components-input-text-filled hover:border-components-input-border-destructive hover:bg-components-input-bg-destructive focus:border-components-input-border-destructive focus:bg-components-input-bg-destructive',
-          className,
-        )}
-        value={value ?? ''}
-        onChange={onChange}
-        disabled={disabled}
-        {...props}
-      >
-      </textarea>
-    )
-  },
-)
+const Textarea = ({ className, value, onChange, disabled, size, destructive, styleCss, ref, ...props }: TextareaProps) => {
+  return (
+    <textarea
+      ref={ref}
+      style={styleCss}
+      className={cn(
+        'min-h-20 w-full appearance-none border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs',
+        textareaVariants({ size }),
+        disabled && 'cursor-not-allowed border-transparent bg-components-input-bg-disabled text-components-input-text-filled-disabled hover:border-transparent hover:bg-components-input-bg-disabled',
+        destructive && 'border-components-input-border-destructive bg-components-input-bg-destructive text-components-input-text-filled hover:border-components-input-border-destructive hover:bg-components-input-bg-destructive focus:border-components-input-border-destructive focus:bg-components-input-bg-destructive',
+        className,
+      )}
+      value={value ?? ''}
+      onChange={onChange}
+      disabled={disabled}
+      {...props}
+    >
+    </textarea>
+  )
+}
 Textarea.displayName = 'Textarea'
 
 export default Textarea

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

 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) => {
-  const { children, className, header, mainClassName, ...rest } = props
+export const PreviewContainer: FC<PreviewContainerProps> = (props) => {
+  const { children, className, header, mainClassName, ref, ...rest } = props
   return <div className={className}>
     <div
       {...rest}
       </main>
     </div>
   </div>
-})
+}
 PreviewContainer.displayName = 'PreviewContainer'

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

 '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'
   onDeSelectAll: () => void
   onLoadedAllPlugin: (installedInfo: Record<string, VersionInfo>) => void
   isFromMarketPlace?: boolean
+  ref?: React.Ref<ExposeRefs>
 }
 
 export type ExposeRefs = {
   deSelectAllPlugins: () => void
 }
 
-const InstallByDSLList: ForwardRefRenderFunction<ExposeRefs, Props> = ({
+const InstallByDSLList = ({
   allPlugins,
   selectedPlugins,
   onSelect,
   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) => {
     </>
   )
 }
-export default React.forwardRef(InstallByDSLList)
+export default InstallByDSLList

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

 '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'
   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
       </div>
     </>
   )
-})
+}
 
 List.displayName = 'List'