Fix inputType prop warning in field widgets

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

packages/fields/src/widgets/BooleanField.tsx

@@ -15,15 +15,18 @@ export function BooleanField({ value, onChange, field, readonly, ...props }: Fie
     return <span className="text-sm">{value ? 'Yes' : 'No'}</span>;
   }
 
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
+
   if (widget === 'checkbox') {
      return (
         <div className="flex items-center space-x-2">
             <Checkbox 
-                {...props}
+                {...domProps}
                 id={id}
                 checked={!!value}
                 onCheckedChange={(checked) => onChange(!!checked)}
-                disabled={readonly || props.disabled}
+                disabled={readonly || domProps.disabled}
             />
             <Label htmlFor={id}>{label}</Label>
         </div>
@@ -33,11 +36,11 @@ export function BooleanField({ value, onChange, field, readonly, ...props }: Fie
   return (
     <div className="flex items-center space-x-2">
         <Switch 
-            {...props}
+            {...domProps}
             id={id} 
             checked={!!value} 
             onCheckedChange={onChange}
-            disabled={readonly || props.disabled}
+            disabled={readonly || domProps.disabled}
         />
         <Label htmlFor={id}>{label}</Label>
     </div>

packages/fields/src/widgets/DateField.tsx

@@ -7,13 +7,16 @@ export function DateField({ value, onChange, field, readonly, ...props }: FieldW
     return <span className="text-sm">{value ? new Date(value).toLocaleDateString() : '-'}</span>;
   }
 
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
+
   return (
     <Input
-      {...props}
+      {...domProps}
       type="date"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
-      disabled={readonly || props.disabled}
+      disabled={readonly || domProps.disabled}
     />
   );
 }

packages/fields/src/widgets/DateTimeField.tsx

@@ -13,13 +13,16 @@ export function DateTimeField({ value, onChange, field, readonly, ...props }: Fi
     );
   }
 
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
+
   return (
     <Input
-      {...props}
+      {...domProps}
       type="datetime-local"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
-      disabled={readonly || props.disabled}
+      disabled={readonly || domProps.disabled}
     />
   );
 }

packages/fields/src/widgets/EmailField.tsx

@@ -16,14 +16,17 @@ export function EmailField({ value, onChange, field, readonly, errorMessage, ...
     );
   }
 
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
+
   return (
     <Input
-      {...props}
+      {...domProps}
       type="email"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || 'email@example.com'}
-      disabled={readonly || props.disabled}
+      disabled={readonly || domProps.disabled}
       aria-invalid={!!errorMessage}
     />
   );

packages/fields/src/widgets/NumberField.tsx

@@ -11,17 +11,20 @@ export function NumberField({ value, onChange, field, readonly, ...props }: Fiel
   const numberField = (field || (props as any).schema) as NumberFieldMetadata;
   const precision = numberField?.precision;
 
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
+
   return (
     <Input
-      {...props}
+      {...domProps}
       type="number"
       value={value ?? ''}
       onChange={(e) => {
         const val = e.target.value;
         onChange(val === '' ? (null as any) : Number(val));
       }}
       placeholder={numberField?.placeholder}
-      disabled={readonly || props.disabled}
+      disabled={readonly || domProps.disabled}
       step={precision ? Math.pow(10, -precision) : 'any'}
     />
   );

packages/fields/src/widgets/PasswordField.tsx

@@ -12,15 +12,18 @@ export function PasswordField({ value, onChange, field, readonly, className, ...
     return <span className="text-sm">••••••••</span>;
   }
 
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
+
   return (
     <div className="relative">
       <Input
-        {...props}
+        {...domProps}
         type={showPassword ? 'text' : 'password'}
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         placeholder={config?.placeholder}
-        disabled={readonly || props.disabled}
+        disabled={readonly || domProps.disabled}
         className={`pr-10 ${className || ''}`}
       />
       <Button

packages/fields/src/widgets/PhoneField.tsx

@@ -16,14 +16,17 @@ export function PhoneField({ value, onChange, field, readonly, errorMessage, ...
     );
   }
 
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
+
   return (
     <Input
-      {...props}
+      {...domProps}
       type="tel"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || '(555) 123-4567'}
-      disabled={readonly || props.disabled}
+      disabled={readonly || domProps.disabled}
       aria-invalid={!!errorMessage}
     />
   );

packages/fields/src/widgets/TextAreaField.tsx

@@ -15,14 +15,17 @@ export function TextAreaField({ value, onChange, field, readonly, errorMessage,
   const rows = textareaField?.rows || 4;
   const maxLength = textareaField?.max_length;
 
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
+
   return (
     <div className="relative">
       <Textarea
-        {...props}
+        {...domProps}
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         placeholder={textareaField?.placeholder}
-        disabled={readonly || props.disabled}
+        disabled={readonly || domProps.disabled}
         rows={rows}
         maxLength={maxLength}
         aria-invalid={!!errorMessage}

packages/fields/src/widgets/TextField.tsx

@@ -13,26 +13,29 @@ export function TextField({ value, onChange, field, readonly, ...props }: FieldW
   // Cast for rows property
   const rows = (fieldData as unknown as TextareaFieldMetadata)?.rows;
 
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
+
   if (rows && rows > 1) {
     return (
       <Textarea
-        {...props}
+        {...domProps}
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         placeholder={fieldData?.placeholder}
-        disabled={readonly || props.disabled}
+        disabled={readonly || domProps.disabled}
       />
     );
   }
 
   return (
     <Input
-      {...props}
+      {...domProps}
       type={fieldData?.type === 'password' ? 'password' : 'text'}
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder={fieldData?.placeholder}
-      disabled={readonly || props.disabled}
+      disabled={readonly || domProps.disabled}
     />
   );
 }

packages/fields/src/widgets/TimeField.tsx

@@ -7,13 +7,16 @@ export function TimeField({ value, onChange, field, readonly, ...props }: FieldW
     return <span className="text-sm">{value || '-'}</span>;
   }
 
+  // Filter out non-DOM props
+  const { inputType, ...domProps } = props as any;
+
   return (
     <Input
-      {...props}
+      {...domProps}
       type="time"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
-      disabled={readonly || props.disabled}
+      disabled={readonly || domProps.disabled}
     />
   );
 }