@digigov/form 2.0.0-rc.8 → 2.0.2

package/inputs/DateInput/index.js

@@ -1,131 +1,134 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["label"],
-  _excluded2 = ["name", "type"];
-import React, { useMemo, useState } from 'react';
-import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import DateInputContainer from '@digigov/react-core/DateInputContainer';
-import CoreDateInputItem from '@digigov/react-core/DateInputItem';
-import { useTranslation } from '@digigov/ui/i18n';
+import react, { useEffect, useMemo } from "react";
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat.js";
+import { useFormContext } from "../../FormContext.js";
+import { DateInputContainer, DateInputItem } from "@digigov/ui/form/DateInputContainer/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
 dayjs.extend(customParseFormat);
-function useDate(value, onChange) {
-  var _useMemo = useMemo(function () {
-      if (!value || value.length === 0) {
-        onChange('');
-        return ['', '', ''];
-      }
-      var _value$split = value.split('/'),
-        _value$split2 = _slicedToArray(_value$split, 3),
-        day = _value$split2[0],
-        month = _value$split2[1],
-        year = _value$split2[2];
-      return [year, month, day];
-    }, [value]),
-    _useMemo2 = _slicedToArray(_useMemo, 3),
-    year = _useMemo2[0],
-    month = _useMemo2[1],
-    day = _useMemo2[2];
-  function set(year, month, day) {
-    var value = "".concat(day || '', "/").concat(month || '', "/").concat(year || '');
-    if (!year && !month && !day) {
-      onChange(null);
-    } else {
-      onChange(value);
+function useDate(name, value, form) {
+    const [year, month, day] = useMemo(()=>{
+        if (!value || 0 === value.length) return [
+            '',
+            '',
+            ''
+        ];
+        const [day, month, year] = value.split('/');
+        return [
+            year,
+            month,
+            day
+        ];
+    }, [
+        value
+    ]);
+    function update(value) {
+        form.setValue(name, value, {
+            shouldValidate: false
+        });
     }
-  }
-  function setYear(evt) {
-    var val = evt.target.value;
-    set(val, month, day);
-  }
-  function setMonth(evt, cast) {
-    var val = evt.target.value;
-    if (cast && val && val.length === 1) {
-      val = '0' + val;
+    function set(year, month, day) {
+        const value = `${day || ''}/${month || ''}/${year || ''}`;
+        year || month || day ? update(value) : update('');
     }
-    set(year, val, day);
-  }
-  function setDay(evt, cast) {
-    var val = evt.target.value;
-    if (cast && val && val.length === 1) {
-      val = '0' + val;
+    function setYear(evt) {
+        const val = evt.target.value.trim();
+        set(val, month, day);
     }
-    set(year, month, val);
-  }
-  return {
-    day: day,
-    month: month,
-    year: year,
-    setYear: setYear,
-    setMonth: setMonth,
-    setDay: setDay
-  };
-}
-var VALID_FORMATS = ['DD/MM/YYYY'];
-var makeDate = function makeDate(val) {
-  var date = dayjs(val, VALID_FORMATS, true);
-  if (date.isValid()) {
-    return date.format('DD/MM/YYYY');
-  }
-  return '';
-};
-var DatePart = function DatePart(_ref) {
-  var label = _ref.label,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(CoreDateInputItem, props, label);
-};
-export var DateInput = function DateInput(_ref2) {
-  var name = _ref2.name,
-    type = _ref2.type,
-    props = _objectWithoutProperties(_ref2, _excluded2);
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useState = useState(props.value),
-    _useState2 = _slicedToArray(_useState, 1),
-    initial = _useState2[0];
-  var value = useMemo(function () {
-    if (initial === props.value) {
-      return makeDate(props.value);
+    function setMonth(evt, cast) {
+        let val = evt.target.value.trim();
+        if (cast && val && 1 === val.length) val = '0' + val;
+        set(year, val, day);
     }
-    return props.value;
-  }, [props.value, initial]);
-  var date = useDate(value || makeDate(props.defaultValue), props.onChange);
-  return /*#__PURE__*/React.createElement(DateInputContainer, null, /*#__PURE__*/React.createElement(DatePart, {
-    label: t('form.label.day'),
-    onChange: date.setDay,
-    onBlur: function onBlur(e) {
-      return date.setDay(e, true);
-    },
-    value: date.day,
-    width: 2,
-    name: "".concat(name, "-day"),
-    maxLength: "2",
-    disabled: props.disabled,
-    "aria-required": props['aria-required'],
-    error: !date.day ? props.error : false
-  }), /*#__PURE__*/React.createElement(DatePart, {
-    label: t('form.label.month'),
-    onChange: date.setMonth,
-    onBlur: function onBlur(e) {
-      return date.setMonth(e, true);
-    },
-    value: date.month,
-    width: 2,
-    name: "".concat(props.name, "-month"),
-    maxLength: "2",
-    disabled: props.disabled,
-    "aria-required": props['aria-required'],
-    error: !date.month ? props.error : false
-  }), /*#__PURE__*/React.createElement(DatePart, {
-    label: t('form.label.year'),
-    onChange: date.setYear,
-    value: date.year,
-    width: 4,
-    name: "".concat(props.name, "-year"),
-    maxLength: "4",
-    disabled: props.disabled,
-    "aria-required": props['aria-required'],
-    error: !date.year ? props.error : false
-  }));
+    function setDay(evt, cast) {
+        let val = evt.target.value.trim();
+        if (cast && val && 1 === val.length) val = '0' + val;
+        set(year, month, val);
+    }
+    function trigger() {
+        if (form.formState.isSubmitted) form.trigger(name);
+    }
+    return {
+        day,
+        month,
+        year,
+        setYear,
+        setMonth,
+        setDay,
+        trigger
+    };
+}
+const VALID_FORMATS = [
+    'DD/MM/YYYY'
+];
+const makeDate = (val)=>{
+    const date = dayjs(val, VALID_FORMATS, true);
+    if (date.isValid()) return date.format('DD/MM/YYYY');
+    return '';
 };
-export default DateInput;
+const DatePart = /*#__PURE__*/ react.forwardRef(({ label, ...props }, ref)=>/*#__PURE__*/ react.createElement(DateInputItem, {
+        ...props,
+        ref: ref
+    }, label));
+DatePart.displayName = 'DatePart';
+const DateInput_DateInput = /*#__PURE__*/ react.forwardRef(({ name, ...props }, ref)=>{
+    const { t } = useTranslation();
+    const form = useFormContext();
+    useEffect(()=>{
+        const initialValue = form.getValues(name);
+        if (void 0 === initialValue && props.defaultValue) form.setValue(name, makeDate(props.defaultValue), {
+            shouldValidate: false
+        });
+        else form.setValue(name, makeDate(initialValue), {
+            shouldValidate: false
+        });
+    }, []);
+    const value = form.getValues(name);
+    const date = useDate(name, value, form);
+    return /*#__PURE__*/ react.createElement(DateInputContainer, null, /*#__PURE__*/ react.createElement(DatePart, {
+        ref: ref,
+        label: t('form.label.day'),
+        onChange: date.setDay,
+        onBlur: (e)=>{
+            if (date.day && 1 === date.day.length) date.setDay(e, true);
+            date.trigger();
+        },
+        value: date.day,
+        width: 2,
+        name: `${name}-day`,
+        id: `${name}-day`,
+        maxLength: "2",
+        disabled: props.disabled,
+        "aria-required": props['aria-required'],
+        error: date.day ? false : props.error
+    }), /*#__PURE__*/ react.createElement(DatePart, {
+        label: t('form.label.month'),
+        onChange: date.setMonth,
+        onBlur: (e)=>{
+            if (date.month && 1 === date.month.length) date.setMonth(e, true);
+            date.trigger();
+        },
+        value: date.month,
+        width: 2,
+        name: `${name}-month`,
+        id: `${name}-month`,
+        maxLength: "2",
+        disabled: props.disabled,
+        "aria-required": props['aria-required'],
+        error: date.month ? false : props.error
+    }), /*#__PURE__*/ react.createElement(DatePart, {
+        label: t('form.label.year'),
+        onChange: date.setYear,
+        onBlur: date.trigger,
+        value: date.year,
+        width: 4,
+        name: `${name}-year`,
+        id: `${name}-year`,
+        maxLength: "4",
+        disabled: props.disabled,
+        "aria-required": props['aria-required'],
+        error: date.year ? false : props.error
+    }));
+});
+DateInput_DateInput.displayName = 'DateInput';
+const DateInput = DateInput_DateInput;
+export { DateInput_DateInput as DateInput, DateInput as default };

package/inputs/DateTimeInput/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { UncontrolledFieldProps } from '../../Field/types.js';
+export interface DateTimeInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
+    extra?: {
+        max?: string;
+        min?: string;
+    };
+}
+export declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<Record<string, any>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default DateTimeInput;

package/inputs/DateTimeInput/index.js

@@ -0,0 +1,190 @@
+import react, { useEffect, useMemo } from "react";
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat.js";
+import { useFormContext } from "../../FormContext.js";
+import { DateInputContainer, DateInputItem } from "@digigov/ui/form/DateInputContainer/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+dayjs.extend(customParseFormat);
+function useDateTime(name, value, form) {
+    const [year, month, day, hours, minutes] = useMemo(()=>{
+        if (!value || 0 === value.length) return [
+            '',
+            '',
+            '',
+            '',
+            ''
+        ];
+        const [datePart, timePart] = value.split(' ');
+        const [day, month, year] = datePart.split('/');
+        const [hours, minutes] = timePart ? timePart.split(':') : [
+            '',
+            ''
+        ];
+        return [
+            year,
+            month,
+            day,
+            hours,
+            minutes
+        ];
+    }, [
+        value
+    ]);
+    function update(value) {
+        form.setValue(name, value, {
+            shouldValidate: false
+        });
+    }
+    function set(year, month, day, hours, minutes) {
+        const datePart = `${day || ''}/${month || ''}/${year || ''}`;
+        const timePart = hours || minutes ? `${hours || ''}:${minutes || ''}` : '';
+        const value = timePart ? `${datePart} ${timePart}` : datePart;
+        year || month || day || hours || minutes ? update(value) : update('');
+    }
+    function setYear(evt) {
+        const val = evt.target.value;
+        set(val, month, day, hours, minutes);
+    }
+    function setMonth(evt, cast) {
+        let val = evt.target.value;
+        if (cast && val && 1 === val.length) val = '0' + val;
+        set(year, val, day, hours, minutes);
+    }
+    function setDay(evt, cast) {
+        let val = evt.target.value;
+        if (cast && val && 1 === val.length) val = '0' + val;
+        set(year, month, val, hours, minutes);
+    }
+    function setHours(evt, cast) {
+        let val = evt.target.value;
+        if (cast && val && 1 === val.length) val = '0' + val;
+        set(year, month, day, val, minutes);
+    }
+    function setMinutes(evt, cast) {
+        let val = evt.target.value;
+        if (cast && val && 1 === val.length) val = '0' + val;
+        set(year, month, day, hours, val);
+    }
+    function trigger() {
+        if (form.formState.isSubmitted) form.trigger(name);
+    }
+    return {
+        day,
+        month,
+        year,
+        hours,
+        minutes,
+        setYear,
+        setMonth,
+        setDay,
+        setHours,
+        setMinutes,
+        trigger
+    };
+}
+const VALID_FORMATS = [
+    'DD/MM/YYYY HH:mm',
+    'DD/MM/YYYY'
+];
+const makeDateTime = (val)=>{
+    const date = dayjs(val, VALID_FORMATS, true);
+    if (date.isValid()) return date.format('DD/MM/YYYY HH:mm');
+    return '';
+};
+const DateTimePart = /*#__PURE__*/ react.forwardRef(({ label, ...props }, ref)=>/*#__PURE__*/ react.createElement(DateInputItem, {
+        ...props,
+        ref: ref
+    }, label));
+DateTimePart.displayName = 'DateTimePart';
+const DateTimeInput_DateTimeInput = /*#__PURE__*/ react.forwardRef(({ name, ...props }, ref)=>{
+    const { t } = useTranslation();
+    const form = useFormContext();
+    useEffect(()=>{
+        const initialValue = form.getValues(name);
+        if (void 0 === initialValue && props.defaultValue) form.setValue(name, makeDateTime(props.defaultValue), {
+            shouldValidate: false
+        });
+        else form.setValue(name, makeDateTime(initialValue), {
+            shouldValidate: false
+        });
+    }, []);
+    const value = form.getValues(name);
+    const dateTime = useDateTime(name, value, form);
+    return /*#__PURE__*/ react.createElement(DateInputContainer, null, /*#__PURE__*/ react.createElement(DateTimePart, {
+        ref: ref,
+        label: t('form.label.day'),
+        onChange: dateTime.setDay,
+        onBlur: (e)=>{
+            if (dateTime.day && 1 === dateTime.day.length) dateTime.setDay(e, true);
+            dateTime.trigger();
+        },
+        value: dateTime.day,
+        width: 2,
+        name: `${name}-day`,
+        maxLength: "2",
+        disabled: props.disabled,
+        "aria-required": props['aria-required'],
+        error: dateTime.day ? false : props.error,
+        id: `${name}-day`
+    }), /*#__PURE__*/ react.createElement(DateTimePart, {
+        label: t('form.label.month'),
+        onChange: dateTime.setMonth,
+        onBlur: (e)=>{
+            if (dateTime.month && 1 === dateTime.month.length) dateTime.setMonth(e, true);
+            dateTime.trigger();
+        },
+        value: dateTime.month,
+        width: 2,
+        name: `${name}-month`,
+        id: `${name}-month`,
+        maxLength: "2",
+        disabled: props.disabled,
+        "aria-required": props['aria-required'],
+        error: dateTime.month ? false : props.error
+    }), /*#__PURE__*/ react.createElement(DateTimePart, {
+        label: t('form.label.year'),
+        onChange: dateTime.setYear,
+        onBlur: dateTime.trigger,
+        value: dateTime.year,
+        width: 4,
+        name: `${name}-year`,
+        id: `${name}-year`,
+        maxLength: "4",
+        disabled: props.disabled,
+        "aria-required": props['aria-required'],
+        error: dateTime.year ? false : props.error
+    }), /*#__PURE__*/ react.createElement(DateTimePart, {
+        label: t('form.label.hours'),
+        onChange: dateTime.setHours,
+        onBlur: (e)=>{
+            if (dateTime.hours && 1 === dateTime.hours.length) dateTime.setHours(e, true);
+            dateTime.trigger();
+        },
+        value: dateTime.hours,
+        width: 2,
+        name: `${name}-hours`,
+        id: `${name}-hours`,
+        maxLength: "2",
+        disabled: props.disabled,
+        "aria-required": props['aria-required'],
+        error: dateTime.hours ? false : props.error
+    }), /*#__PURE__*/ react.createElement(DateTimePart, {
+        label: t('form.label.minutes'),
+        onChange: dateTime.setMinutes,
+        onBlur: (e)=>{
+            if (dateTime.minutes && 1 === dateTime.minutes.length) dateTime.setMinutes(e, true);
+            dateTime.trigger();
+        },
+        value: dateTime.minutes,
+        width: 2,
+        name: `${name}-minutes`,
+        id: `${name}-minutes`,
+        maxLength: "2",
+        disabled: props.disabled,
+        "aria-required": props['aria-required'],
+        error: dateTime.minutes ? false : props.error
+    }));
+});
+DateTimeInput_DateTimeInput.displayName = 'DateTimeInput';
+const DateTimeInput = DateTimeInput_DateTimeInput;
+export { DateTimeInput_DateTimeInput as DateTimeInput, DateTimeInput as default };

package/inputs/FileInput/index.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import type { UseFormReturn } from 'react-hook-form';
+import type { UncontrolledFieldProps } from '../../Field/types.js';
+import type { ButtonProps } from '@digigov/ui/form/Button';
+import type { FileUploadContainerProps, FileUploadProps } from '@digigov/ui/form/FileUpload';
 export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
     extra?: {
         className?: string;
@@ -8,7 +11,20 @@ export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
         limit: {
             maxSize?: number;
         };
+        containerProps?: FileUploadContainerProps;
+        uploadButtonProps?: FileUploadProps;
+        noResetButton?: boolean;
+        resetButtonProps?: ButtonProps;
+        locales?: {
+            file?: string;
+            chooseFile?: string;
+            changeFile?: string;
+            resetFile?: string;
+        };
     };
+    reset: (values?: FileList) => void;
+    resetField: UseFormReturn['resetField'];
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const FileInput: React.FC<any>;
+export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
 export default FileInput;

package/inputs/FileInput/index.js

@@ -1,58 +1,61 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "extra", "disabled", "reset", "onChange"];
-import React, { useState } from 'react';
-import FileUpload from '@digigov/react-core/FileUpload';
-import FileUploadContainer from '@digigov/react-core/FileUploadContainer';
-import CoreHint from '@digigov/react-core/Hint';
-import Button from '@digigov/ui/form/Button';
-import { useTranslation } from '@digigov/ui/i18n';
-import Paragraph from '@digigov/ui/typography/Paragraph';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export var FileInput = /*#__PURE__*/React.forwardRef(function FileInput(_ref, ref) {
-  var name = _ref.name,
-    _ref$extra = _ref.extra,
-    extra = _ref$extra === void 0 ? {} : _ref$extra,
-    disabled = _ref.disabled,
-    reset = _ref.reset,
-    onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    files = _useState2[0],
-    setFiles = _useState2[1];
-  var handleChange = function handleChange(e) {
-    var target = e.target;
-    var selectedFiles = Array.from(target.files).map(function (_ref2) {
-      var name = _ref2.name;
-      return name;
+import react, { useCallback, useEffect, useState } from "react";
+import { useWatch } from "react-hook-form";
+import { omit } from "../../utils.js";
+import { Button } from "@digigov/ui/form/Button/index.js";
+import { FileUpload, FileUploadContainer } from "@digigov/ui/form/FileUpload/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
+import { Paragraph } from "@digigov/ui/typography/Paragraph/index.js";
+const FileInput_FileInput = /*#__PURE__*/ react.forwardRef(function({ name, disabled, extra, control, onChange, resetField, ...props }, ref) {
+    const { t } = useTranslation();
+    const value = useWatch({
+        control,
+        name
     });
-    setFiles(selectedFiles);
-    // proceed calling the onChange provided
-    // by react-hook-form
-    onChange(e);
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FileUploadContainer, {
-    hasFiles: files && files.length > 0
-  }, files !== null && files !== void 0 && files.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Paragraph, null, /*#__PURE__*/React.createElement("b", null, t('upload.file'), ":"), " ", "".concat(files.join(', ')))) : /*#__PURE__*/React.createElement(CoreHint, null, t('upload.no_file')), /*#__PURE__*/React.createElement(FileUpload, _extends({
-    ref: ref,
-    hasFiles: !!(files !== null && files !== void 0 && files.length),
-    name: name,
-    disabled: disabled,
-    onChange: handleChange
-  }, _extends({}, props, {
-    required: undefined
-  })), files !== null && files !== void 0 && files.length ? t('upload.change_file') : t('upload.choose_file')), files !== undefined && files.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    variant: "link",
-    onClick: function onClick(event) {
-      event.preventDefault();
-      reset(_defineProperty({}, name, ''));
-      setFiles(undefined);
-    }
-  }, t('upload.reset_file')))));
+    const [filenames, setFilenames] = useState(Object.values(value || {}).map(({ name })=>name) || []);
+    useEffect(()=>{
+        setFilenames(Object.values(value || {}).map(({ name })=>name));
+    }, [
+        value
+    ]);
+    const handleChange = useCallback((event)=>{
+        event.preventDefault();
+        const target = event.target;
+        if (target.files && target.files.length > 0) setFilenames(Object.values(target.files).map(({ name })=>name));
+        onChange(event);
+    }, [
+        onChange
+    ]);
+    const handleReset = useCallback((event)=>{
+        event.preventDefault();
+        resetField(name);
+        setFilenames(void 0);
+    }, [
+        name,
+        resetField
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FileUploadContainer, {
+        variant: extra?.containerProps?.variant || 'default',
+        hasFiles: filenames && filenames.length > 0
+    }, filenames?.length ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Paragraph, null, /*#__PURE__*/ react.createElement("b", null, t('upload.file'), ":"), " ", `${filenames.join(', ')}`)) : /*#__PURE__*/ react.createElement(Hint, null, /*#__PURE__*/ react.createElement("b", null, t('upload.file'), ': '), t('upload.no_file')), /*#__PURE__*/ react.createElement(FileUpload, {
+        ref: ref,
+        hasFiles: !!filenames?.length,
+        name: name,
+        variant: extra?.uploadButtonProps?.variant,
+        disabled: disabled,
+        id: name,
+        onChange: handleChange,
+        ...omit(props, [
+            'Field',
+            'reset',
+            'error'
+        ]),
+        required: void 0
+    }, filenames?.length ? t('upload.change_file') : t('upload.choose_file')), void 0 !== filenames && filenames?.length > 0 && !extra?.noResetButton && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Button, {
+        variant: extra?.resetButtonProps?.variant || 'link',
+        onClick: handleReset,
+        color: extra?.resetButtonProps?.color || 'secondary'
+    }, t('upload.reset_file')))));
 });
-export default FileInput;
+const inputs_FileInput = FileInput_FileInput;
+export { FileInput_FileInput as FileInput, inputs_FileInput as default };

package/inputs/ImageInput/index.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import type { UseFormReturn } from 'react-hook-form';
+import type { UncontrolledFieldProps } from '../../Field/types.js';
 export interface ImageProps {
-    src?: any;
+    src: string;
 }
 export interface Limit {
     maxSize?: number;
@@ -11,6 +12,10 @@ export interface Limit {
     minHeight?: number;
 }
 export declare const Image: React.FC<ImageProps>;
+interface ImageInputDefaultValue {
+    filename: string;
+    src: string;
+}
 export interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
     extra?: {
         className?: string;
@@ -19,7 +24,10 @@ export interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
         limit?: Limit;
     };
     reset: (values?: any) => void;
+    resetField: UseFormReturn['resetField'];
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    defaultValue?: ImageInputDefaultValue | null;
+    value: any;
 }
 export declare const ImageInput: React.FC<ImageInputProps>;
 export default ImageInput;