refactor(ui): Simplify DecoratedVSCodeTextField props

Refactors `DecoratedVSCodeTextField` to extend `ComponentProps<typeof VSCodeTextField>`,
removing redundant prop definitions and simplifying its interface. This change
improves maintainability and ensures consistency with the underlying VSCode
text field component. Also adjusts `FormattedTextField` to correctly forward
refs with the updated prop types.

Author: Chris Hasson

webview-ui/src/components/common/DecoratedVSCodeTextField.tsx

@@ -1,44 +1,22 @@
 import { cn } from "@/lib/utils"
 import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
-import { forwardRef, useCallback, useRef, ReactNode, ComponentRef } from "react"
+import { forwardRef, useCallback, useRef, ReactNode, ComponentRef, ComponentProps } from "react"
 
 // Type for web components that have shadow DOM
 interface WebComponentWithShadowRoot extends HTMLElement {
 	shadowRoot: ShadowRoot | null
 }
 
-export interface VSCodeTextFieldWithNodesProps {
-	className?: string
-	placeholder?: string
-	value?: string
-	onInput?: (e: any) => void
-	onBlur?: (e: any) => void
-	onKeyDown?: (e: any) => void
-	style?: React.CSSProperties
-	"data-testid"?: string
+export interface VSCodeTextFieldWithNodesProps extends ComponentProps<typeof VSCodeTextField> {
 	leftNodes?: ReactNode[]
 	rightNodes?: ReactNode[]
-	disabled?: boolean
 }
 
 function VSCodeTextFieldWithNodesInner(
 	props: VSCodeTextFieldWithNodesProps,
 	forwardedRef: React.Ref<HTMLInputElement>,
 ) {
-	const {
-		className,
-		placeholder,
-		value,
-		onInput,
-		onBlur,
-		onKeyDown,
-		style,
-		"data-testid": dataTestId,
-		leftNodes,
-		rightNodes,
-		disabled,
-		...restProps
-	} = props
+	const { className, style, "data-testid": dataTestId, leftNodes, rightNodes, ...restProps } = props
 
 	const inputRef = useRef<HTMLInputElement | null>(null)
 	const vscodeFieldRef = useRef<any>(null)
@@ -92,13 +70,7 @@ function VSCodeTextFieldWithNodesInner(
 			)}
 
 			<VSCodeTextField
-				placeholder={placeholder}
-				value={value}
-				onInput={onInput}
-				onBlur={onBlur}
-				onKeyDown={onKeyDown}
 				data-testid={dataTestId}
-				disabled={disabled}
 				ref={handleVSCodeFieldRef}
 				style={{
 					flex: 1,

webview-ui/src/components/common/FormattedTextField.tsx

@@ -30,7 +30,7 @@ function FormattedTextFieldInner<T>(
 	forwardedRef: React.Ref<HTMLInputElement>,
 ) {
 	const handleInput = useCallback(
-		(e: any) => {
+		(e: React.FormEvent<HTMLInputElement>) => {
 			const input = e.target as HTMLInputElement
 
 			if (formatter.filter) {
@@ -48,7 +48,7 @@ function FormattedTextFieldInner<T>(
 	return <DecoratedVSCodeTextField {...restProps} value={displayValue} onInput={handleInput} ref={forwardedRef} />
 }
 
-export const FormattedTextField = forwardRef(FormattedTextFieldInner) as <T>(
+export const FormattedTextField = forwardRef(FormattedTextFieldInner as any) as <T>(
 	props: FormattedTextFieldProps<T> & { ref?: React.Ref<HTMLInputElement> },
 ) => React.ReactElement