@digigov/form 2.0.0-e7d30530 → 2.0.0-eaf330f5

package/cjs/inputs/DateInput/index.js

@@ -34,13 +34,14 @@ module.exports = __toCommonJS(DateInput_exports);
 var import_react = __toESM(require("react"));
 var import_dayjs = __toESM(require("dayjs"));
 var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat"));
-var import_FormContext = require("@digigov/form/FormContext");
+var import_FormBuilder = require("@digigov/form/FormBuilder");
 var import_DateInputContainer = require("@digigov/ui/form/DateInputContainer");
 var import_i18n = require("@digigov/ui/i18n");
 import_dayjs.default.extend(import_customParseFormat.default);
 function useDate(name, value, form) {
   const [year, month, day] = (0, import_react.useMemo)(() => {
     if (!value || value.length === 0) {
+      update("");
       return ["", "", ""];
     }
     const [day2, month2, year2] = value.split("/");
@@ -103,32 +104,21 @@ const DatePart = ({ label, ...props }) => {
 };
 const DateInput = ({ name, ...props }) => {
   const { t } = (0, import_i18n.useTranslation)();
-  const form = (0, import_FormContext.useFormContext)();
-  (0, import_react.useEffect)(() => {
-    const initialValue = form.getValues(name);
-    if (initialValue === void 0 && props.defaultValue) {
-      form.setValue(name, makeDate(props.defaultValue), {
-        shouldValidate: false
-      });
-    } else {
-      form.setValue(name, makeDate(initialValue), {
-        shouldValidate: false
-      });
+  const [initial] = (0, import_react.useState)(props.value);
+  const value = (0, import_react.useMemo)(() => {
+    if (initial === props.value) {
+      return makeDate(props.value);
     }
-  }, []);
-  const value = form.getValues(name);
-  const date = useDate(name, value, form);
+    return props.value;
+  }, [props.value, initial]);
+  const form = (0, import_FormBuilder.useFormContext)();
+  const date = useDate(name, value || makeDate(props.defaultValue), form);
   return /* @__PURE__ */ import_react.default.createElement(import_DateInputContainer.DateInputContainer, null, /* @__PURE__ */ import_react.default.createElement(
     DatePart,
     {
       label: t("form.label.day"),
       onChange: date.setDay,
-      onBlur: (e) => {
-        if (date.day && date.day.length === 1) {
-          date.setDay(e, true);
-        }
-        date.trigger();
-      },
+      onBlur: date.trigger,
       value: date.day,
       width: 2,
       name: `${name}-day`,
@@ -143,12 +133,7 @@ const DateInput = ({ name, ...props }) => {
     {
       label: t("form.label.month"),
       onChange: date.setMonth,
-      onBlur: (e) => {
-        if (date.month && date.month.length === 1) {
-          date.setMonth(e, true);
-        }
-        date.trigger();
-      },
+      onBlur: date.trigger,
       value: date.month,
       width: 2,
       name: `${name}-month`,

package/cjs/inputs/DateInput/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/inputs/DateInput/index.tsx"],
-  "sourcesContent": ["import React, { useMemo, useEffect } from 'react';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { useFormContext } from '@digigov/form/FormContext';\nimport {\n  DateInputContainer,\n  DateInputItem,\n} from '@digigov/ui/form/DateInputContainer';\nimport { useTranslation } from '@digigov/ui/i18n';\ndayjs.extend(customParseFormat);\n\nexport interface DateInputProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    max?: string;\n    min?: string;\n  };\n}\n\nfunction useDate(name, value, form) {\n  const [year, month, day] = useMemo(() => {\n    if (!value || value.length === 0) {\n      return ['', '', ''];\n    }\n    const [day, month, year] = value.split('/');\n    return [year, month, day];\n  }, [value]);\n\n  function update(value) {\n    form.setValue(name, value, { shouldValidate: false });\n  }\n\n  function set(year, month, day) {\n    const value = `${day || ''}/${month || ''}/${year || ''}`;\n    if (!year && !month && !day) {\n      update('');\n    } else {\n      update(value);\n    }\n  }\n\n  function setYear(evt) {\n    const val = evt.target.value.trim();\n    set(val, month, day);\n  }\n\n  function setMonth(evt, cast) {\n    let val = evt.target.value.trim();\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, val, day);\n  }\n\n  function setDay(evt, cast) {\n    let val = evt.target.value.trim();\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, month, val);\n  }\n\n  function trigger() {\n    if (form.formState.isSubmitted) {\n      form.trigger(name);\n    }\n  }\n\n  return {\n    day,\n    month,\n    year,\n    setYear,\n    setMonth,\n    setDay,\n    trigger,\n  };\n}\n\nconst VALID_FORMATS = ['DD/MM/YYYY'];\n\nconst makeDate = (val) => {\n  const date = dayjs(val, VALID_FORMATS, true);\n  if (date.isValid()) {\n    return date.format('DD/MM/YYYY');\n  }\n  return '';\n};\n\nconst DatePart = ({ label, ...props }) => {\n  return <DateInputItem {...props}>{label}</DateInputItem>;\n};\n\nexport const DateInput = ({ name, ...props }) => {\n  const { t } = useTranslation();\n  const form = useFormContext();\n\n  useEffect(() => {\n    const initialValue = form.getValues(name);\n    // checks if the initial value is undefined and if the default value is valid  date\n    if (initialValue === undefined && props.defaultValue) {\n      form.setValue(name, makeDate(props.defaultValue), {\n        shouldValidate: false,\n      });\n    } else {\n      // checks if the initial value is a valid date\n      form.setValue(name, makeDate(initialValue), {\n        shouldValidate: false,\n      });\n    }\n  }, []);\n\n  const value = form.getValues(name);\n  const date = useDate(name, value, form);\n\n  return (\n    <DateInputContainer>\n      <DatePart\n        label={t('form.label.day')}\n        onChange={date.setDay}\n        onBlur={(e) => {\n          if (date.day && date.day.length === 1) {\n            date.setDay(e, true);\n          }\n          date.trigger();\n        }}\n        value={date.day}\n        width={2}\n        name={`${name}-day`}\n        id={`${name}-day`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!date.day ? props.error : false}\n      />\n      <DatePart\n        label={t('form.label.month')}\n        onChange={date.setMonth}\n        onBlur={(e) => {\n          if (date.month && date.month.length === 1) {\n            date.setMonth(e, true);\n          }\n          date.trigger();\n        }}\n        value={date.month}\n        width={2}\n        name={`${name}-month`}\n        id={`${name}-month`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!date.month ? props.error : false}\n      />\n      <DatePart\n        label={t('form.label.year')}\n        onChange={date.setYear}\n        onBlur={date.trigger}\n        value={date.year}\n        width={4}\n        name={`${name}-year`}\n        id={`${name}-year`}\n        maxLength=\"4\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!date.year ? props.error : false}\n      />\n    </DateInputContainer>\n  );\n};\n\nexport default DateInput;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useMemo, useState } from 'react';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { useFormContext } from '@digigov/form/FormBuilder';\nimport {\n  DateInputContainer,\n  DateInputItem,\n} from '@digigov/ui/form/DateInputContainer';\nimport { useTranslation } from '@digigov/ui/i18n';\ndayjs.extend(customParseFormat);\n\nexport interface DateInputProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    max?: string;\n    min?: string;\n  };\n}\n\nfunction useDate(name, value, form) {\n  const [year, month, day] = useMemo(() => {\n    if (!value || value.length === 0) {\n      update('');\n      return ['', '', ''];\n    }\n    const [day, month, year] = value.split('/');\n    return [year, month, day];\n  }, [value]);\n\n  function update(value) {\n    form.setValue(name, value, { shouldValidate: false });\n  }\n\n  function set(year, month, day) {\n    const value = `${day || ''}/${month || ''}/${year || ''}`;\n    if (!year && !month && !day) {\n      update('');\n    } else {\n      update(value);\n    }\n  }\n\n  function setYear(evt) {\n    const val = evt.target.value.trim();\n    set(val, month, day);\n  }\n\n  function setMonth(evt, cast) {\n    let val = evt.target.value.trim();\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, val, day);\n  }\n\n  function setDay(evt, cast) {\n    let val = evt.target.value.trim();\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, month, val);\n  }\n\n  function trigger() {\n    if (form.formState.isSubmitted) {\n      form.trigger(name);\n    }\n  }\n\n  return {\n    day,\n    month,\n    year,\n    setYear,\n    setMonth,\n    setDay,\n    trigger,\n  };\n}\n\nconst VALID_FORMATS = ['DD/MM/YYYY'];\n\nconst makeDate = (val) => {\n  const date = dayjs(val, VALID_FORMATS, true);\n  if (date.isValid()) {\n    return date.format('DD/MM/YYYY');\n  }\n  return '';\n};\n\nconst DatePart = ({ label, ...props }) => {\n  return <DateInputItem {...props}>{label}</DateInputItem>;\n};\n\nexport const DateInput = ({ name, ...props }) => {\n  const { t } = useTranslation();\n  const [initial] = useState(props.value);\n  const value = useMemo(() => {\n    if (initial === props.value) {\n      return makeDate(props.value);\n    }\n    return props.value;\n  }, [props.value, initial]);\n\n  const form = useFormContext();\n  const date = useDate(name, value || makeDate(props.defaultValue), form);\n\n  return (\n    <DateInputContainer>\n      <DatePart\n        label={t('form.label.day')}\n        onChange={date.setDay}\n        onBlur={date.trigger}\n        value={date.day}\n        width={2}\n        name={`${name}-day`}\n        id={`${name}-day`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!date.day ? props.error : false}\n      />\n      <DatePart\n        label={t('form.label.month')}\n        onChange={date.setMonth}\n        onBlur={date.trigger}\n        value={date.month}\n        width={2}\n        name={`${name}-month`}\n        id={`${name}-month`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!date.month ? props.error : false}\n      />\n      <DatePart\n        label={t('form.label.year')}\n        onChange={date.setYear}\n        onBlur={date.trigger}\n        value={date.year}\n        width={4}\n        name={`${name}-year`}\n        id={`${name}-year`}\n        maxLength=\"4\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!date.year ? props.error : false}\n      />\n    </DateInputContainer>\n  );\n};\n\nexport default DateInput;\n"],
+  "mappings": "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",
   "names": ["dayjs", "customParseFormat", "day", "month", "year", "value", "React"]
 }

package/cjs/inputs/DateTimeInput/index.js

@@ -34,13 +34,14 @@ module.exports = __toCommonJS(DateTimeInput_exports);
 var import_react = __toESM(require("react"));
 var import_dayjs = __toESM(require("dayjs"));
 var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat"));
-var import_FormContext = require("@digigov/form/FormContext");
+var import_FormBuilder = require("@digigov/form/FormBuilder");
 var import_DateInputContainer = require("@digigov/ui/form/DateInputContainer");
 var import_i18n = require("@digigov/ui/i18n");
 import_dayjs.default.extend(import_customParseFormat.default);
 function useDateTime(name, value, form) {
   const [year, month, day, hours, minutes] = (0, import_react.useMemo)(() => {
     if (!value || value.length === 0) {
+      update("");
       return ["", "", "", "", ""];
     }
     const [datePart, timePart] = value.split(" ");
@@ -125,115 +126,93 @@ const DateTimePart = ({ label, ...props }) => {
 };
 const DateTimeInput = ({ name, ...props }) => {
   const { t } = (0, import_i18n.useTranslation)();
-  const form = (0, import_FormContext.useFormContext)();
-  (0, import_react.useEffect)(() => {
-    const initialValue = form.getValues(name);
-    if (initialValue === void 0 && props.defaultValue) {
-      form.setValue(name, makeDateTime(props.defaultValue), {
-        shouldValidate: false
-      });
-    } else {
-      form.setValue(name, makeDateTime(initialValue), {
-        shouldValidate: false
-      });
+  const [initial] = (0, import_react.useState)(props.value);
+  const value = (0, import_react.useMemo)(() => {
+    if (initial === props.value) {
+      return makeDateTime(props.value);
     }
-  }, []);
-  const value = form.getValues(name);
-  const dateTime = useDateTime(name, value, form);
+    return props.value;
+  }, [props.value, initial]);
+  const form = (0, import_FormBuilder.useFormContext)();
+  const datetime = useDateTime(
+    name,
+    value || makeDateTime(props.defaultValue),
+    form
+  );
   return /* @__PURE__ */ import_react.default.createElement(import_DateInputContainer.DateInputContainer, null, /* @__PURE__ */ import_react.default.createElement(
     DateTimePart,
     {
       label: t("form.label.day"),
-      onChange: dateTime.setDay,
-      onBlur: (e) => {
-        if (dateTime.day && dateTime.day.length === 1) {
-          dateTime.setDay(e, true);
-        }
-        dateTime.trigger();
-      },
-      value: dateTime.day,
+      onChange: datetime.setDay,
+      onBlur: datetime.trigger,
+      value: datetime.day,
       width: 2,
       name: `${name}-day`,
       maxLength: "2",
       disabled: props.disabled,
       "aria-required": props["aria-required"],
-      error: !dateTime.day ? props.error : false,
+      error: !datetime.day ? props.error : false,
       id: `${name}-day`
     }
   ), /* @__PURE__ */ import_react.default.createElement(
     DateTimePart,
     {
       label: t("form.label.month"),
-      onChange: dateTime.setMonth,
-      onBlur: (e) => {
-        if (dateTime.month && dateTime.month.length === 1) {
-          dateTime.setMonth(e, true);
-        }
-        dateTime.trigger();
-      },
-      value: dateTime.month,
+      onChange: datetime.setMonth,
+      onBlur: 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 ? props.error : false
+      error: !datetime.month ? props.error : false
     }
   ), /* @__PURE__ */ import_react.default.createElement(
     DateTimePart,
     {
       label: t("form.label.year"),
-      onChange: dateTime.setYear,
-      onBlur: dateTime.trigger,
-      value: dateTime.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 ? props.error : false
+      error: !datetime.year ? props.error : false
     }
   ), /* @__PURE__ */ import_react.default.createElement(
     DateTimePart,
     {
       label: t("form.label.hours"),
-      onChange: dateTime.setHours,
-      onBlur: (e) => {
-        if (dateTime.hours && dateTime.hours.length === 1) {
-          dateTime.setHours(e, true);
-        }
-        dateTime.trigger();
-      },
-      value: dateTime.hours,
+      onChange: datetime.setHours,
+      onBlur: 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 ? props.error : false
+      error: !datetime.hours ? props.error : false
     }
   ), /* @__PURE__ */ import_react.default.createElement(
     DateTimePart,
     {
       label: t("form.label.minutes"),
-      onChange: dateTime.setMinutes,
-      onBlur: (e) => {
-        if (dateTime.minutes && dateTime.minutes.length === 1) {
-          dateTime.setMinutes(e, true);
-        }
-        dateTime.trigger();
-      },
-      value: dateTime.minutes,
+      onChange: datetime.setMinutes,
+      onBlur: 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 ? props.error : false
+      error: !datetime.minutes ? props.error : false
     }
   ));
 };

package/cjs/inputs/DateTimeInput/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/inputs/DateTimeInput/index.tsx"],
-  "sourcesContent": ["import React, { useMemo, useEffect } from 'react';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { useFormContext } from '@digigov/form/FormContext';\nimport {\n  DateInputContainer,\n  DateInputItem,\n} from '@digigov/ui/form/DateInputContainer';\nimport { useTranslation } from '@digigov/ui/i18n';\ndayjs.extend(customParseFormat);\n\nexport interface DateTimeInputProps\n  extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    max?: string;\n    min?: string;\n  };\n}\n\nfunction useDateTime(name, value, form) {\n  const [year, month, day, hours, minutes] = useMemo(() => {\n    if (!value || value.length === 0) {\n      return ['', '', '', '', ''];\n    }\n    const [datePart, timePart] = value.split(' ');\n    const [day, month, year] = datePart.split('/');\n    const [hours, minutes] = timePart ? timePart.split(':') : ['', ''];\n    return [year, month, day, hours, minutes];\n  }, [value]);\n\n  function update(value) {\n    form.setValue(name, value, { shouldValidate: false });\n  }\n\n  function set(year, month, day, hours, minutes) {\n    const datePart = `${day || ''}/${month || ''}/${year || ''}`;\n    const timePart = hours || minutes ? `${hours || ''}:${minutes || ''}` : '';\n    const value = timePart ? `${datePart} ${timePart}` : datePart;\n\n    if (!year && !month && !day && !hours && !minutes) {\n      update('');\n    } else {\n      update(value);\n    }\n  }\n\n  function setYear(evt) {\n    const val = evt.target.value;\n    set(val, month, day, hours, minutes);\n  }\n\n  function setMonth(evt, cast) {\n    let val = evt.target.value;\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, val, day, hours, minutes);\n  }\n\n  function setDay(evt, cast) {\n    let val = evt.target.value;\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, month, val, hours, minutes);\n  }\n\n  function setHours(evt, cast) {\n    let val = evt.target.value;\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, month, day, val, minutes);\n  }\n\n  function setMinutes(evt, cast) {\n    let val = evt.target.value;\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, month, day, hours, val);\n  }\n\n  function trigger() {\n    if (form.formState.isSubmitted) {\n      form.trigger(name);\n    }\n  }\n\n  return {\n    day,\n    month,\n    year,\n    hours,\n    minutes,\n    setYear,\n    setMonth,\n    setDay,\n    setHours,\n    setMinutes,\n    trigger,\n  };\n}\n\nconst VALID_FORMATS = ['DD/MM/YYYY HH:mm', 'DD/MM/YYYY'];\n\nconst makeDateTime = (val) => {\n  const date = dayjs(val, VALID_FORMATS, true);\n  if (date.isValid()) {\n    return date.format('DD/MM/YYYY HH:mm');\n  }\n  return '';\n};\n\nconst DateTimePart = ({ label, ...props }) => {\n  return <DateInputItem {...props}>{label}</DateInputItem>;\n};\n\nexport const DateTimeInput = ({ name, ...props }) => {\n  const { t } = useTranslation();\n  const form = useFormContext();\n\n  useEffect(() => {\n    const initialValue = form.getValues(name);\n    // checks if the initial value is undefined and if the default value is valid  date\n    if (initialValue === undefined && props.defaultValue) {\n      form.setValue(name, makeDateTime(props.defaultValue), {\n        shouldValidate: false,\n      });\n    } else {\n      // checks if the initial value is a valid date\n      form.setValue(name, makeDateTime(initialValue), {\n        shouldValidate: false,\n      });\n    }\n  }, []);\n\n  const value = form.getValues(name);\n  const dateTime = useDateTime(name, value, form);\n\n  return (\n    <DateInputContainer>\n      <DateTimePart\n        label={t('form.label.day')}\n        onChange={dateTime.setDay}\n        onBlur={(e) => {\n          if (dateTime.day && dateTime.day.length === 1) {\n            dateTime.setDay(e, true);\n          }\n          dateTime.trigger();\n        }}\n        value={dateTime.day}\n        width={2}\n        name={`${name}-day`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!dateTime.day ? props.error : false}\n        id={`${name}-day`}\n      />\n      <DateTimePart\n        label={t('form.label.month')}\n        onChange={dateTime.setMonth}\n        onBlur={(e) => {\n          if (dateTime.month && dateTime.month.length === 1) {\n            dateTime.setMonth(e, true);\n          }\n          dateTime.trigger();\n        }}\n        value={dateTime.month}\n        width={2}\n        name={`${name}-month`}\n        id={`${name}-month`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!dateTime.month ? props.error : false}\n      />\n      <DateTimePart\n        label={t('form.label.year')}\n        onChange={dateTime.setYear}\n        onBlur={dateTime.trigger}\n        value={dateTime.year}\n        width={4}\n        name={`${name}-year`}\n        id={`${name}-year`}\n        maxLength=\"4\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!dateTime.year ? props.error : false}\n      />\n      <DateTimePart\n        label={t('form.label.hours')}\n        onChange={dateTime.setHours}\n        onBlur={(e) => {\n          if (dateTime.hours && dateTime.hours.length === 1) {\n            dateTime.setHours(e, true);\n          }\n          dateTime.trigger();\n        }}\n        value={dateTime.hours}\n        width={2}\n        name={`${name}-hours`}\n        id={`${name}-hours`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!dateTime.hours ? props.error : false}\n      />\n      <DateTimePart\n        label={t('form.label.minutes')}\n        onChange={dateTime.setMinutes}\n        onBlur={(e) => {\n          if (dateTime.minutes && dateTime.minutes.length === 1) {\n            dateTime.setMinutes(e, true);\n          }\n          dateTime.trigger();\n        }}\n        value={dateTime.minutes}\n        width={2}\n        name={`${name}-minutes`}\n        id={`${name}-minutes`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!dateTime.minutes ? props.error : false}\n      />\n    </DateInputContainer>\n  );\n};\n\nexport default DateTimeInput;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useMemo, useState } from 'react';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { useFormContext } from '@digigov/form/FormBuilder';\nimport {\n  DateInputContainer,\n  DateInputItem,\n} from '@digigov/ui/form/DateInputContainer';\nimport { useTranslation } from '@digigov/ui/i18n';\ndayjs.extend(customParseFormat);\n\nexport interface DateTimeInputProps\n  extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    max?: string;\n    min?: string;\n  };\n}\n\nfunction useDateTime(name, value, form) {\n  const [year, month, day, hours, minutes] = useMemo(() => {\n    if (!value || value.length === 0) {\n      update('');\n      return ['', '', '', '', ''];\n    }\n    const [datePart, timePart] = value.split(' ');\n    const [day, month, year] = datePart.split('/');\n    const [hours, minutes] = timePart ? timePart.split(':') : ['', ''];\n    return [year, month, day, hours, minutes];\n  }, [value]);\n\n  function update(value) {\n    form.setValue(name, value, { shouldValidate: false });\n  }\n\n  function set(year, month, day, hours, minutes) {\n    const datePart = `${day || ''}/${month || ''}/${year || ''}`;\n    const timePart = hours || minutes ? `${hours || ''}:${minutes || ''}` : '';\n    const value = timePart ? `${datePart} ${timePart}` : datePart;\n\n    if (!year && !month && !day && !hours && !minutes) {\n      update('');\n    } else {\n      update(value);\n    }\n  }\n\n  function setYear(evt) {\n    const val = evt.target.value;\n    set(val, month, day, hours, minutes);\n  }\n\n  function setMonth(evt, cast) {\n    let val = evt.target.value;\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, val, day, hours, minutes);\n  }\n\n  function setDay(evt, cast) {\n    let val = evt.target.value;\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, month, val, hours, minutes);\n  }\n\n  function setHours(evt, cast) {\n    let val = evt.target.value;\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, month, day, val, minutes);\n  }\n\n  function setMinutes(evt, cast) {\n    let val = evt.target.value;\n    if (cast && val && val.length === 1) {\n      val = '0' + val;\n    }\n    set(year, month, day, hours, val);\n  }\n\n  function trigger() {\n    if (form.formState.isSubmitted) {\n      form.trigger(name);\n    }\n  }\n\n  return {\n    day,\n    month,\n    year,\n    hours,\n    minutes,\n    setYear,\n    setMonth,\n    setDay,\n    setHours,\n    setMinutes,\n    trigger,\n  };\n}\n\nconst VALID_FORMATS = ['DD/MM/YYYY HH:mm', 'DD/MM/YYYY'];\n\nconst makeDateTime = (val) => {\n  const date = dayjs(val, VALID_FORMATS, true);\n  if (date.isValid()) {\n    return date.format('DD/MM/YYYY HH:mm');\n  }\n  return '';\n};\n\nconst DateTimePart = ({ label, ...props }) => {\n  return <DateInputItem {...props}>{label}</DateInputItem>;\n};\n\nexport const DateTimeInput = ({ name, ...props }) => {\n  const { t } = useTranslation();\n  const [initial] = useState(props.value);\n  const value = useMemo(() => {\n    if (initial === props.value) {\n      return makeDateTime(props.value);\n    }\n    return props.value;\n  }, [props.value, initial]);\n\n  const form = useFormContext();\n  const datetime = useDateTime(\n    name,\n    value || makeDateTime(props.defaultValue),\n    form\n  );\n\n  return (\n    <DateInputContainer>\n      <DateTimePart\n        label={t('form.label.day')}\n        onChange={datetime.setDay}\n        onBlur={datetime.trigger}\n        value={datetime.day}\n        width={2}\n        name={`${name}-day`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!datetime.day ? props.error : false}\n        id={`${name}-day`}\n      />\n      <DateTimePart\n        label={t('form.label.month')}\n        onChange={datetime.setMonth}\n        onBlur={datetime.trigger}\n        value={datetime.month}\n        width={2}\n        name={`${name}-month`}\n        id={`${name}-month`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!datetime.month ? props.error : false}\n      />\n      <DateTimePart\n        label={t('form.label.year')}\n        onChange={datetime.setYear}\n        onBlur={datetime.trigger}\n        value={datetime.year}\n        width={4}\n        name={`${name}-year`}\n        id={`${name}-year`}\n        maxLength=\"4\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!datetime.year ? props.error : false}\n      />\n      <DateTimePart\n        label={t('form.label.hours')}\n        onChange={datetime.setHours}\n        onBlur={datetime.trigger}\n        value={datetime.hours}\n        width={2}\n        name={`${name}-hours`}\n        id={`${name}-hours`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!datetime.hours ? props.error : false}\n      />\n      <DateTimePart\n        label={t('form.label.minutes')}\n        onChange={datetime.setMinutes}\n        onBlur={datetime.trigger}\n        value={datetime.minutes}\n        width={2}\n        name={`${name}-minutes`}\n        id={`${name}-minutes`}\n        maxLength=\"2\"\n        disabled={props.disabled}\n        aria-required={props['aria-required']}\n        error={!datetime.minutes ? props.error : false}\n      />\n    </DateInputContainer>\n  );\n};\n\nexport default DateTimeInput;\n"],
+  "mappings": "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",
   "names": ["dayjs", "customParseFormat", "day", "month", "year", "hours", "minutes", "value", "React"]
 }

package/cjs/inputs/FileInput/index.js

@@ -32,78 +32,59 @@ __export(FileInput_exports, {
 });
 module.exports = __toCommonJS(FileInput_exports);
 var import_react = __toESM(require("react"));
-var import_react_hook_form = require("react-hook-form");
 var import_Button = require("@digigov/ui/form/Button");
 var import_FileUpload = require("@digigov/ui/form/FileUpload");
 var import_i18n = require("@digigov/ui/i18n");
 var import_Hint = require("@digigov/ui/typography/Hint");
 var import_Paragraph = require("@digigov/ui/typography/Paragraph");
-const FileInput = import_react.default.forwardRef(function FileInput2({
-  name,
-  disabled,
-  resetField,
-  extra,
-  control,
-  onChange,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  Field,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  reset,
-  ...props
-}, ref) {
+const FileInput = import_react.default.forwardRef(function FileInput2({ name, disabled, resetField, extra, onChange, value, ...props }, ref) {
+  delete props.Field;
   const { t } = (0, import_i18n.useTranslation)();
-  const value = (0, import_react_hook_form.useWatch)({ control, name });
-  const [filenames, setFilenames] = (0, import_react.useState)(
-    Object.values(value || {}).map(({ name: name2 }) => name2) || []
+  const [files, setFiles] = (0, import_react.useState)(
+    Object.values(value || {})?.map?.(({ name: name2 }) => name2) || []
   );
   (0, import_react.useEffect)(() => {
-    setFilenames(Object.values(value || {}).map(({ name: name2 }) => name2));
+    setFiles(Object.values(value || {})?.map?.(({ name: name2 }) => name2));
   }, [value]);
-  const handleChange = (0, import_react.useCallback)(
-    (event) => {
-      event.preventDefault();
-      const target = event.target;
-      if (target.files && target.files.length > 0) {
-        setFilenames(Object.values(target.files).map(({ name: name2 }) => name2));
-      }
-      onChange(event);
-    },
-    [onChange]
-  );
-  const handleReset = (0, import_react.useCallback)(
-    (event) => {
-      event.preventDefault();
-      resetField(name);
-      setFilenames(void 0);
-    },
-    [name, resetField]
-  );
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
     import_FileUpload.FileUploadContainer,
     {
       variant: extra?.containerProps?.variant || "default",
-      hasFiles: filenames && filenames.length > 0
+      hasFiles: files && files.length > 0
     },
-    filenames?.length ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Paragraph.Paragraph, null, /* @__PURE__ */ import_react.default.createElement("b", null, t("upload.file"), ":"), " ", `${filenames.join(", ")}`)) : /* @__PURE__ */ import_react.default.createElement(import_Hint.Hint, null, /* @__PURE__ */ import_react.default.createElement("b", null, t("upload.file"), ": "), t("upload.no_file")),
+    files?.length ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Paragraph.Paragraph, null, /* @__PURE__ */ import_react.default.createElement("b", null, t("upload.file"), ":"), " ", `${files.join(", ")}`)) : /* @__PURE__ */ import_react.default.createElement(import_Hint.Hint, null, /* @__PURE__ */ import_react.default.createElement("b", null, t("upload.file"), ": "), t("upload.no_file")),
     /* @__PURE__ */ import_react.default.createElement(
       import_FileUpload.FileUpload,
       {
         ref,
-        hasFiles: !!filenames?.length,
+        hasFiles: !!files?.length,
         name,
         variant: extra?.uploadButtonProps?.variant,
         disabled,
         id: name,
-        onChange: handleChange,
-        ...{ ...props, required: void 0 }
+        value: value?.filename,
+        onChange: (event) => {
+          if (event?.target?.files && event?.target?.files.length > 0) {
+            onChange(event.target.files);
+          }
+        },
+        ...{
+          ...props,
+          required: void 0,
+          error: void 0
+        }
       },
-      filenames?.length ? t("upload.change_file") : t("upload.choose_file")
+      files?.length ? t("upload.change_file") : t("upload.choose_file")
     ),
-    filenames !== void 0 && filenames?.length > 0 && !extra?.noResetButton && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    files !== void 0 && files?.length > 0 && !extra?.noResetButton && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
       import_Button.Button,
       {
         variant: extra?.resetButtonProps?.variant || "link",
-        onClick: handleReset,
+        onClick: (event) => {
+          event.preventDefault();
+          resetField(name);
+          setFiles(void 0);
+        },
         color: extra?.resetButtonProps?.color || "secondary"
       },
       t("upload.reset_file")

package/cjs/inputs/FileInput/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/inputs/FileInput/index.tsx"],
-  "sourcesContent": ["import React, { ComponentRef, useCallback, useEffect, useState } from 'react';\nimport { UseFormReturn, useWatch } from 'react-hook-form';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { Button, ButtonProps } from '@digigov/ui/form/Button';\nimport {\n  FileUpload,\n  FileUploadContainer,\n  FileUploadContainerProps,\n  FileUploadProps,\n} from '@digigov/ui/form/FileUpload';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport { Hint } from '@digigov/ui/typography/Hint';\nimport { Paragraph } from '@digigov/ui/typography/Paragraph';\n\nexport interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    className?: string;\n    multiple?: boolean;\n    accept?: string;\n    limit: {\n      maxSize?: number;\n    };\n    containerProps?: FileUploadContainerProps;\n    uploadButtonProps?: FileUploadProps;\n    noResetButton?: boolean;\n    resetButtonProps?: ButtonProps;\n    locales?: {\n      file?: string;\n      chooseFile?: string;\n      changeFile?: string;\n      resetFile?: string;\n    };\n  };\n  reset: (values?: FileList) => void;\n  resetField: UseFormReturn['resetField'];\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const FileInput = React.forwardRef<\n  ComponentRef<typeof FileUpload>,\n  FileInputProps\n>(function FileInput(\n  {\n    name,\n    disabled,\n    resetField,\n    extra,\n    control,\n    onChange,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    Field,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    reset,\n    ...props\n  },\n  ref\n) {\n  const { t } = useTranslation();\n  const value: FileList = useWatch({ control, name });\n\n  const [filenames, setFilenames] = useState<string[] | undefined>(\n    Object.values(value || {}).map(({ name }) => name) || []\n  );\n\n  useEffect(() => {\n    setFilenames(Object.values(value || {}).map(({ name }) => name));\n  }, [value]);\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      event.preventDefault();\n      const target = event.target;\n      if (target.files && target.files.length > 0) {\n        setFilenames(Object.values(target.files).map(({ name }) => name));\n      }\n      onChange(event);\n    },\n    [onChange]\n  );\n\n  const handleReset = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      resetField(name);\n      setFilenames(undefined);\n    },\n    [name, resetField]\n  );\n\n  return (\n    <>\n      <FileUploadContainer\n        variant={extra?.containerProps?.variant || 'default'}\n        hasFiles={filenames && filenames.length > 0}\n      >\n        {filenames?.length ? (\n          <>\n            <Paragraph>\n              <b>{t('upload.file')}:</b> {`${filenames.join(', ')}`}\n            </Paragraph>\n          </>\n        ) : (\n          <Hint>\n            <b>\n              {t('upload.file')}\n              {': '}\n            </b>\n            {t('upload.no_file')}\n          </Hint>\n        )}\n        <FileUpload\n          ref={ref}\n          hasFiles={!!filenames?.length}\n          name={name}\n          variant={extra?.uploadButtonProps?.variant}\n          disabled={disabled}\n          id={name}\n          onChange={handleChange}\n          {...{ ...props, required: undefined }}\n        >\n          {filenames?.length\n            ? t('upload.change_file')\n            : t('upload.choose_file')}\n        </FileUpload>\n        {filenames !== undefined &&\n          filenames?.length > 0 &&\n          !extra?.noResetButton && (\n            <>\n              <Button\n                variant={extra?.resetButtonProps?.variant || 'link'}\n                onClick={handleReset}\n                color={extra?.resetButtonProps?.color || 'secondary'}\n              >\n                {t('upload.reset_file')}\n              </Button>\n            </>\n          )}\n      </FileUploadContainer>\n    </>\n  );\n});\n\nexport default FileInput;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsE;AACtE,6BAAwC;AAExC,oBAAoC;AACpC,wBAKO;AACP,kBAA+B;AAC/B,kBAAqB;AACrB,uBAA0B;AA0BnB,MAAM,YAAY,aAAAA,QAAM,WAG7B,SAASC,WACT;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,EAAE,EAAE,QAAI,4BAAe;AAC7B,QAAM,YAAkB,iCAAS,EAAE,SAAS,KAAK,CAAC;AAElD,QAAM,CAAC,WAAW,YAAY,QAAI;AAAA,IAChC,OAAO,OAAO,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,MAAAC,MAAK,MAAMA,KAAI,KAAK,CAAC;AAAA,EACzD;AAEA,8BAAU,MAAM;AACd,iBAAa,OAAO,OAAO,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,MAAAA,MAAK,MAAMA,KAAI,CAAC;AAAA,EACjE,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,mBAAe;AAAA,IACnB,CAAC,UAA+C;AAC9C,YAAM,eAAe;AACrB,YAAM,SAAS,MAAM;AACrB,UAAI,OAAO,SAAS,OAAO,MAAM,SAAS,GAAG;AAC3C,qBAAa,OAAO,OAAO,OAAO,KAAK,EAAE,IAAI,CAAC,EAAE,MAAAA,MAAK,MAAMA,KAAI,CAAC;AAAA,MAClE;AACA,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,kBAAc;AAAA,IAClB,CAAC,UAA+C;AAC9C,YAAM,eAAe;AACrB,iBAAW,IAAI;AACf,mBAAa,MAAS;AAAA,IACxB;AAAA,IACA,CAAC,MAAM,UAAU;AAAA,EACnB;AAEA,SACE,6BAAAF,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,OAAO,gBAAgB,WAAW;AAAA,MAC3C,UAAU,aAAa,UAAU,SAAS;AAAA;AAAA,IAEzC,WAAW,SACV,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,kCACC,6BAAAA,QAAA,cAAC,WAAG,EAAE,aAAa,GAAE,GAAC,GAAI,KAAE,GAAG,UAAU,KAAK,IAAI,CAAC,EACrD,CACF,IAEA,6BAAAA,QAAA,cAAC,wBACC,6BAAAA,QAAA,cAAC,WACE,EAAE,aAAa,GACf,IACH,GACC,EAAE,gBAAgB,CACrB;AAAA,IAEF,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU,CAAC,CAAC,WAAW;AAAA,QACvB;AAAA,QACA,SAAS,OAAO,mBAAmB;AAAA,QACnC;AAAA,QACA,IAAI;AAAA,QACJ,UAAU;AAAA,QACT,GAAG,EAAE,GAAG,OAAO,UAAU,OAAU;AAAA;AAAA,MAEnC,WAAW,SACR,EAAE,oBAAoB,IACtB,EAAE,oBAAoB;AAAA,IAC5B;AAAA,IACC,cAAc,UACb,WAAW,SAAS,KACpB,CAAC,OAAO,iBACN,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,OAAO,kBAAkB,WAAW;AAAA,QAC7C,SAAS;AAAA,QACT,OAAO,OAAO,kBAAkB,SAAS;AAAA;AAAA,MAExC,EAAE,mBAAmB;AAAA,IACxB,CACF;AAAA,EAEN,CACF;AAEJ,CAAC;AAED,IAAO,oBAAQ;",
+  "sourcesContent": ["import React, { useEffect, useState } from 'react';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { Button, ButtonProps } from '@digigov/ui/form/Button';\nimport {\n  FileUpload,\n  FileUploadContainer,\n  FileUploadContainerProps,\n  FileUploadProps,\n} from '@digigov/ui/form/FileUpload';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport { Hint } from '@digigov/ui/typography/Hint';\nimport { Paragraph } from '@digigov/ui/typography/Paragraph';\nexport interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    className?: string;\n    multiple?: boolean;\n    accept?: string;\n    limit: {\n      maxSize?: number;\n    };\n    containerProps?: FileUploadContainerProps;\n    uploadButtonProps?: FileUploadProps;\n    noResetButton?: boolean;\n    resetButtonProps?: ButtonProps;\n    locales?: {\n      file?: string;\n      chooseFile?: string;\n      changeFile?: string;\n      resetFile?: string;\n    };\n  };\n}\n\nexport const FileInput: React.FC<any> = React.forwardRef(function FileInput(\n  { name, disabled, resetField, extra, onChange, value, ...props },\n  ref: any\n) {\n  delete props.Field;\n  const { t } = useTranslation();\n\n  const [files, setFiles] = useState<string[] | undefined>(\n    Object.values(value || {})?.map?.(({ name }) => name) || []\n  );\n  useEffect(() => {\n    setFiles(Object.values(value || {})?.map?.(({ name }) => name));\n  }, [value]);\n\n  return (\n    <>\n      <FileUploadContainer\n        variant={extra?.containerProps?.variant || 'default'}\n        hasFiles={files && files.length > 0}\n      >\n        {files?.length ? (\n          <>\n            <Paragraph>\n              <b>{t('upload.file')}:</b> {`${files.join(', ')}`}\n            </Paragraph>\n          </>\n        ) : (\n          <Hint>\n            <b>\n              {t('upload.file')}\n              {': '}\n            </b>\n            {t('upload.no_file')}\n          </Hint>\n        )}\n        <FileUpload\n          ref={ref}\n          hasFiles={!!files?.length}\n          name={name}\n          variant={extra?.uploadButtonProps?.variant}\n          disabled={disabled}\n          id={name}\n          value={value?.filename}\n          onChange={(event) => {\n            if (event?.target?.files && event?.target?.files.length > 0) {\n              onChange(event.target.files);\n            }\n          }}\n          {...{\n            ...props,\n            required: undefined,\n            error: undefined,\n          }}\n        >\n          {files?.length ? t('upload.change_file') : t('upload.choose_file')}\n        </FileUpload>\n        {files !== undefined && files?.length > 0 && !extra?.noResetButton && (\n          <>\n            <Button\n              variant={extra?.resetButtonProps?.variant || 'link'}\n              onClick={(event) => {\n                event.preventDefault();\n                resetField(name);\n                setFiles(undefined);\n              }}\n              color={extra?.resetButtonProps?.color || 'secondary'}\n            >\n              {t('upload.reset_file')}\n            </Button>\n          </>\n        )}\n      </FileUploadContainer>\n    </>\n  );\n});\n\nexport default FileInput;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAE3C,oBAAoC;AACpC,wBAKO;AACP,kBAA+B;AAC/B,kBAAqB;AACrB,uBAA0B;AAsBnB,MAAM,YAA2B,aAAAA,QAAM,WAAW,SAASC,WAChE,EAAE,MAAM,UAAU,YAAY,OAAO,UAAU,OAAO,GAAG,MAAM,GAC/D,KACA;AACA,SAAO,MAAM;AACb,QAAM,EAAE,EAAE,QAAI,4BAAe;AAE7B,QAAM,CAAC,OAAO,QAAQ,QAAI;AAAA,IACxB,OAAO,OAAO,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,MAAAC,MAAK,MAAMA,KAAI,KAAK,CAAC;AAAA,EAC5D;AACA,8BAAU,MAAM;AACd,aAAS,OAAO,OAAO,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,MAAAA,MAAK,MAAMA,KAAI,CAAC;AAAA,EAChE,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,6BAAAF,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,OAAO,gBAAgB,WAAW;AAAA,MAC3C,UAAU,SAAS,MAAM,SAAS;AAAA;AAAA,IAEjC,OAAO,SACN,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,kCACC,6BAAAA,QAAA,cAAC,WAAG,EAAE,aAAa,GAAE,GAAC,GAAI,KAAE,GAAG,MAAM,KAAK,IAAI,CAAC,EACjD,CACF,IAEA,6BAAAA,QAAA,cAAC,wBACC,6BAAAA,QAAA,cAAC,WACE,EAAE,aAAa,GACf,IACH,GACC,EAAE,gBAAgB,CACrB;AAAA,IAEF,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU,CAAC,CAAC,OAAO;AAAA,QACnB;AAAA,QACA,SAAS,OAAO,mBAAmB;AAAA,QACnC;AAAA,QACA,IAAI;AAAA,QACJ,OAAO,OAAO;AAAA,QACd,UAAU,CAAC,UAAU;AACnB,cAAI,OAAO,QAAQ,SAAS,OAAO,QAAQ,MAAM,SAAS,GAAG;AAC3D,qBAAS,MAAM,OAAO,KAAK;AAAA,UAC7B;AAAA,QACF;AAAA,QACC,GAAG;AAAA,UACF,GAAG;AAAA,UACH,UAAU;AAAA,UACV,OAAO;AAAA,QACT;AAAA;AAAA,MAEC,OAAO,SAAS,EAAE,oBAAoB,IAAI,EAAE,oBAAoB;AAAA,IACnE;AAAA,IACC,UAAU,UAAa,OAAO,SAAS,KAAK,CAAC,OAAO,iBACnD,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,OAAO,kBAAkB,WAAW;AAAA,QAC7C,SAAS,CAAC,UAAU;AAClB,gBAAM,eAAe;AACrB,qBAAW,IAAI;AACf,mBAAS,MAAS;AAAA,QACpB;AAAA,QACA,OAAO,OAAO,kBAAkB,SAAS;AAAA;AAAA,MAExC,EAAE,mBAAmB;AAAA,IACxB,CACF;AAAA,EAEJ,CACF;AAEJ,CAAC;AAED,IAAO,oBAAQ;",
   "names": ["React", "FileInput", "name"]
 }

package/cjs/inputs/ImageInput/index.js

@@ -42,21 +42,11 @@ var import_Base = require("@digigov/ui/utils/Base");
 const Image = import_react.default.memo(function Image2({ src }) {
   return /* @__PURE__ */ import_react.default.createElement(import_Base.Base, { as: "img", src, className: "ds-image--ratio" });
 });
-const blobToFileList = (blob, fileName) => {
-  const file = new File([blob], fileName, { type: "image/jpeg" });
-  const dataTransfer = new DataTransfer();
-  dataTransfer.items.add(file);
-  return dataTransfer.files;
-};
 const ImageInput = import_react.default.forwardRef(
-  function ImageInput2({ name, disabled, onChange, resetField, defaultValue, value, ...props }, ref) {
-    const imageRef = (0, import_react.useRef)(ref?.current);
+  function ImageInput2({ name, disabled, onChange, reset, ...props }, ref) {
     const { t } = (0, import_i18n.useTranslation)();
-    const currentValue = defaultValue || value || null;
-    const [selectedImage, setSelectedImage] = (0, import_react.useState)(currentValue);
-    const [imageUrl, setImageUrl] = (0, import_react.useState)(
-      currentValue?.src || null
-    );
+    const [selectedImage, setSelectedImage] = (0, import_react.useState)(null);
+    const [imageUrl, setImageUrl] = (0, import_react.useState)(null);
     const handleImageChange = (0, import_react.useCallback)(
       (e) => {
         e.preventDefault();
@@ -66,36 +56,23 @@ const ImageInput = import_react.default.forwardRef(
           setSelectedImage(selectedFile);
           setImageUrl(URL.createObjectURL(selectedFile));
         }
-        onChange(
-          target.files
-        );
+        onChange(e);
       },
       [selectedImage]
     );
     const handleDeleteImage = (0, import_react.useCallback)(
       (event) => {
         event.preventDefault();
-        resetField(name);
+        reset({ [name]: "" });
         setSelectedImage(null);
-        setImageUrl(null);
+        setImageUrl("");
       },
       [selectedImage]
     );
-    (0, import_react.useEffect)(() => {
-      if (defaultValue?.src && imageRef.current) {
-        fetch(defaultValue?.src).then((response) => response.blob()).then((blob) => {
-          const fileList = blobToFileList(blob, defaultValue.filename);
-          imageRef.current.files = fileList;
-          const fileChangeEvent = new Event("change", { bubbles: true });
-          imageRef.current.dispatchEvent(fileChangeEvent);
-          return;
-        }).catch((error) => console.error("Error fetching image:", error));
-      }
-    }, [defaultValue, imageRef]);
-    return /* @__PURE__ */ import_react.default.createElement(import_FileUpload.FileUploadContainer, null, selectedImage !== null ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Paragraph.Paragraph, null, /* @__PURE__ */ import_react.default.createElement(import_Base.Base, { as: "b" }, t("upload.image"), ":"), " ", /* @__PURE__ */ import_react.default.createElement("em", null, `${selectedImage?.name || selectedImage?.filename}`))) : /* @__PURE__ */ import_react.default.createElement(import_Hint.Hint, { className: "ds-dashed--border" }, t("upload.no_image")), imageUrl !== null && selectedImage !== null && /* @__PURE__ */ import_react.default.createElement(Image, { src: imageUrl }), !disabled && /* @__PURE__ */ import_react.default.createElement(import_Button.ButtonGroup, { marginTop: 2 }, /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_FileUpload.FileUploadContainer, null, selectedImage !== null ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Paragraph.Paragraph, null, /* @__PURE__ */ import_react.default.createElement(import_Base.Base, { as: "b" }, t("upload.image"), ":"), " ", `${selectedImage?.name}`)) : /* @__PURE__ */ import_react.default.createElement(import_Hint.Hint, { className: "ds-dashed--border" }, t("upload.no_image")), /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, selectedImage !== null && /* @__PURE__ */ import_react.default.createElement(Image, { src: imageUrl }), /* @__PURE__ */ import_react.default.createElement(import_Button.ButtonGroup, { marginTop: 2 }, selectedImage !== null && /* @__PURE__ */ import_react.default.createElement(import_Button.Button, { variant: "link", onClick: handleDeleteImage }, t("upload.reset_file")), /* @__PURE__ */ import_react.default.createElement(
       import_FileUpload.FileUpload,
       {
-        ref: imageRef,
+        ref,
         hasFiles: selectedImage !== null,
         name,
         id: name,
@@ -109,16 +86,8 @@ const ImageInput = import_react.default.forwardRef(
           type: "file"
         }
       },
-      selectedImage ? t("upload.change_image") : t("upload.choose_image")
-    ), selectedImage !== null && /* @__PURE__ */ import_react.default.createElement(
-      import_Button.Button,
-      {
-        color: "warning",
-        variant: "link",
-        onClick: handleDeleteImage
-      },
-      t("upload.reset_file")
-    )));
+      t("upload.choose_image")
+    )))));
   }
 );
 var ImageInput_default = ImageInput;