@digigov/form 2.0.0-a32ad9b2 → 2.0.0-abd768eb

package/inputs/DateInput/index.js

@@ -1,27 +1,30 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useEffect } from "react";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
+import { useFormContext } from "@digigov/form/FormContext";
 import {
   DateInputContainer,
   DateInputItem
 } from "@digigov/ui/form/DateInputContainer";
 import { useTranslation } from "@digigov/ui/i18n";
 dayjs.extend(customParseFormat);
-function useDate(value, onChange) {
+function useDate(name, value, form) {
   const [year, month, day] = useMemo(() => {
     if (!value || value.length === 0) {
-      onChange("");
       return ["", "", ""];
     }
     const [day2, month2, year2] = value.split("/");
     return [year2, month2, day2];
   }, [value]);
+  function update(value2) {
+    form.setValue(name, value2, { shouldValidate: false });
+  }
   function set(year2, month2, day2) {
     const value2 = `${day2 || ""}/${month2 || ""}/${year2 || ""}`;
     if (!year2 && !month2 && !day2) {
-      onChange(null);
+      update("");
     } else {
-      onChange(value2);
+      update(value2);
     }
   }
   function setYear(evt) {
@@ -42,13 +45,19 @@ function useDate(value, onChange) {
     }
     set(year, month, val);
   }
+  function trigger() {
+    if (form.formState.isSubmitted) {
+      form.trigger(name);
+    }
+  }
   return {
     day,
     month,
     year,
     setYear,
     setMonth,
-    setDay
+    setDay,
+    trigger
   };
 }
 const VALID_FORMATS = ["DD/MM/YYYY"];
@@ -64,20 +73,32 @@ const DatePart = ({ label, ...props }) => {
 };
 const DateInput = ({ name, ...props }) => {
   const { t } = useTranslation();
-  const [initial] = useState(props.value);
-  const value = useMemo(() => {
-    if (initial === props.value) {
-      return makeDate(props.value);
+  const form = useFormContext();
+  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
+      });
     }
-    return props.value;
-  }, [props.value, initial]);
-  const date = useDate(value || makeDate(props.defaultValue), props.onChange);
+  }, []);
+  const value = form.getValues(name);
+  const date = useDate(name, value, form);
   return /* @__PURE__ */ React.createElement(DateInputContainer, null, /* @__PURE__ */ React.createElement(
     DatePart,
     {
       label: t("form.label.day"),
       onChange: date.setDay,
-      onBlur: (e) => date.setDay(e, true),
+      onBlur: (e) => {
+        if (date.day && date.day.length === 1) {
+          date.setDay(e, true);
+        }
+        date.trigger();
+      },
       value: date.day,
       width: 2,
       name: `${name}-day`,
@@ -92,7 +113,12 @@ const DateInput = ({ name, ...props }) => {
     {
       label: t("form.label.month"),
       onChange: date.setMonth,
-      onBlur: (e) => date.setMonth(e, true),
+      onBlur: (e) => {
+        if (date.month && date.month.length === 1) {
+          date.setMonth(e, true);
+        }
+        date.trigger();
+      },
       value: date.month,
       width: 2,
       name: `${name}-month`,
@@ -107,6 +133,7 @@ const DateInput = ({ name, ...props }) => {
     {
       label: t("form.label.year"),
       onChange: date.setYear,
+      onBlur: date.trigger,
       value: date.year,
       width: 4,
       name: `${name}-year`,

package/inputs/DateInput/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/DateInput/index.tsx"],
-  "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 {\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(value, onChange) {\n  const [year, month, day] = useMemo(() => {\n    if (!value || value.length === 0) {\n      onChange('');\n      return ['', '', ''];\n    }\n    const [day, month, year] = value.split('/');\n    return [year, month, day];\n  }, [value]);\n\n  function set(year, month, day) {\n    const value = `${day || ''}/${month || ''}/${year || ''}`;\n    if (!year && !month && !day) {\n      onChange(null);\n    } else {\n      onChange(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  return {\n    day,\n    month,\n    year,\n    setYear,\n    setMonth,\n    setDay,\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 date = useDate(value || makeDate(props.defaultValue), props.onChange);\n\n  return (\n    <DateInputContainer>\n      <DatePart\n        label={t('form.label.day')}\n        onChange={date.setDay}\n        onBlur={(e) => date.setDay(e, true)}\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) => date.setMonth(e, true)}\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        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, 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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",
   "names": ["day", "month", "year", "value"]
 }

package/inputs/DateTimeInput/DateTimeInput.stories.d.ts

@@ -1,7 +1,14 @@
 declare namespace _default {
     export let title: string;
-    export { Default as component };
+    export { DateTimeInput as component };
+    export let tags: string[];
+    export { doc as markdown };
+    export let displayName: string;
 }
 export default _default;
-export { Default };
-import { Default } from './__stories__/Default';
+export { Default } from "@digigov/form/inputs/DateTimeInput/__stories__/Default";
+export { WithDefaultValue } from "@digigov/form/inputs/DateTimeInput/__stories__/WithDefaultValue";
+export { WithWrongDefaultValue } from "@digigov/form/inputs/DateTimeInput/__stories__/WithWrongDefaultValue";
+export { WithInitialValue } from "@digigov/form/inputs/DateTimeInput/__stories__/WithInitialValue";
+export { WithWrongInitialValue } from "@digigov/form/inputs/DateTimeInput/__stories__/WithWrongInitialValue";
+import DateTimeInput from '@digigov/form/inputs/DateTimeInput';

package/inputs/DateTimeInput/__stories__/Default.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Default: () => React.JSX.Element;
+export declare const Default: (_: any) => React.JSX.Element;
 export default Default;

package/inputs/DateTimeInput/__stories__/WithDefaultValue.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const WithDefaultValue: (_: any) => React.JSX.Element;
+export default WithDefaultValue;

package/inputs/DateTimeInput/__stories__/WithInitialValue.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const WithInitialValue: (_: any) => React.JSX.Element;
+export default WithInitialValue;

package/inputs/DateTimeInput/__stories__/WithWrongDefaultValue.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const WithWrongDefaultValue: (_: any) => React.JSX.Element;
+export default WithWrongDefaultValue;

package/inputs/DateTimeInput/__stories__/WithWrongInitialValue.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const WithWrongInitialValue: (_: any) => React.JSX.Element;
+export default WithWrongInitialValue;

package/inputs/DateTimeInput/index.js

@@ -1,16 +1,16 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useEffect } from "react";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
+import { useFormContext } from "@digigov/form/FormContext";
 import {
   DateInputContainer,
   DateInputItem
 } from "@digigov/ui/form/DateInputContainer";
 import { useTranslation } from "@digigov/ui/i18n";
 dayjs.extend(customParseFormat);
-function useDateTime(value, onChange) {
+function useDateTime(name, value, form) {
   const [year, month, day, hours, minutes] = useMemo(() => {
     if (!value || value.length === 0) {
-      onChange("");
       return ["", "", "", "", ""];
     }
     const [datePart, timePart] = value.split(" ");
@@ -18,14 +18,17 @@ function useDateTime(value, onChange) {
     const [hours2, minutes2] = timePart ? timePart.split(":") : ["", ""];
     return [year2, month2, day2, hours2, minutes2];
   }, [value]);
+  function update(value2) {
+    form.setValue(name, value2, { shouldValidate: false });
+  }
   function set(year2, month2, day2, hours2, minutes2) {
     const datePart = `${day2 || ""}/${month2 || ""}/${year2 || ""}`;
     const timePart = hours2 || minutes2 ? `${hours2 || ""}:${minutes2 || ""}` : "";
     const value2 = timePart ? `${datePart} ${timePart}` : datePart;
     if (!year2 && !month2 && !day2 && !hours2 && !minutes2) {
-      onChange(null);
+      update("");
     } else {
-      onChange(value2);
+      update(value2);
     }
   }
   function setYear(evt) {
@@ -60,6 +63,11 @@ function useDateTime(value, onChange) {
     }
     set(year, month, day, hours, val);
   }
+  function trigger() {
+    if (form.formState.isSubmitted) {
+      form.trigger(name);
+    }
+  }
   return {
     day,
     month,
@@ -70,7 +78,8 @@ function useDateTime(value, onChange) {
     setMonth,
     setDay,
     setHours,
-    setMinutes
+    setMinutes,
+    trigger
   };
 }
 const VALID_FORMATS = ["DD/MM/YYYY HH:mm", "DD/MM/YYYY"];
@@ -86,90 +95,115 @@ const DateTimePart = ({ label, ...props }) => {
 };
 const DateTimeInput = ({ name, ...props }) => {
   const { t } = useTranslation();
-  const [initial] = useState(props.value);
-  const value = useMemo(() => {
-    if (initial === props.value) {
-      return makeDateTime(props.value);
+  const form = useFormContext();
+  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
+      });
     }
-    return props.value;
-  }, [props.value, initial]);
-  const datetime = useDateTime(
-    value || makeDateTime(props.defaultValue),
-    props.onChange
-  );
+  }, []);
+  const value = form.getValues(name);
+  const dateTime = useDateTime(name, value, form);
   return /* @__PURE__ */ React.createElement(DateInputContainer, null, /* @__PURE__ */ React.createElement(
     DateTimePart,
     {
       label: t("form.label.day"),
-      onChange: datetime.setDay,
-      onBlur: (e) => datetime.setDay(e, true),
-      value: datetime.day,
+      onChange: dateTime.setDay,
+      onBlur: (e) => {
+        if (dateTime.day && dateTime.day.length === 1) {
+          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 ? props.error : false,
+      error: !dateTime.day ? props.error : false,
       id: `${name}-day`
     }
   ), /* @__PURE__ */ React.createElement(
     DateTimePart,
     {
       label: t("form.label.month"),
-      onChange: datetime.setMonth,
-      onBlur: (e) => datetime.setMonth(e, true),
-      value: datetime.month,
+      onChange: dateTime.setMonth,
+      onBlur: (e) => {
+        if (dateTime.month && dateTime.month.length === 1) {
+          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 ? props.error : false
+      error: !dateTime.month ? props.error : false
     }
   ), /* @__PURE__ */ React.createElement(
     DateTimePart,
     {
       label: t("form.label.year"),
-      onChange: datetime.setYear,
-      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__ */ React.createElement(
     DateTimePart,
     {
       label: t("form.label.hours"),
-      onChange: datetime.setHours,
-      onBlur: (e) => datetime.setHours(e, true),
-      value: datetime.hours,
+      onChange: dateTime.setHours,
+      onBlur: (e) => {
+        if (dateTime.hours && dateTime.hours.length === 1) {
+          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 ? props.error : false
+      error: !dateTime.hours ? props.error : false
     }
   ), /* @__PURE__ */ React.createElement(
     DateTimePart,
     {
       label: t("form.label.minutes"),
-      onChange: datetime.setMinutes,
-      onBlur: (e) => datetime.setMinutes(e, true),
-      value: datetime.minutes,
+      onChange: dateTime.setMinutes,
+      onBlur: (e) => {
+        if (dateTime.minutes && dateTime.minutes.length === 1) {
+          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 ? props.error : false
+      error: !dateTime.minutes ? props.error : false
     }
   ));
 };

package/inputs/DateTimeInput/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/DateTimeInput/index.tsx"],
-  "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 {\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(value, onChange) {\n  const [year, month, day, hours, minutes] = useMemo(() => {\n    if (!value || value.length === 0) {\n      onChange('');\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 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      onChange(null);\n    } else {\n      onChange(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  return {\n    day,\n    month,\n    year,\n    hours,\n    minutes,\n    setYear,\n    setMonth,\n    setDay,\n    setHours,\n    setMinutes,\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 datetime = useDateTime(\n    value || makeDateTime(props.defaultValue),\n    props.onChange\n  );\n\n  return (\n    <DateInputContainer>\n      <DateTimePart\n        label={t('form.label.day')}\n        onChange={datetime.setDay}\n        onBlur={(e) => datetime.setDay(e, true)}\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) => datetime.setMonth(e, true)}\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        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) => datetime.setHours(e, true)}\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) => datetime.setMinutes(e, true)}\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, 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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",
   "names": ["day", "month", "year", "hours", "minutes", "value"]
 }

package/inputs/FileInput/FileInput.stories.d.ts

@@ -1,8 +1,11 @@
 declare namespace _default {
     export let title: string;
     export { FileInput as component };
+    export let tags: string[];
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;
 export { Default } from "@digigov/form/inputs/FileInput/__stories__/Default";
+export { WithBorderAndLink } from "@digigov/form/inputs/FileInput/__stories__/WithBorderAndLink";
 import FileInput from '@digigov/form/inputs/FileInput';

package/inputs/FileInput/__stories__/Default.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Default: () => React.JSX.Element;
+export declare const Default: (_: any) => React.JSX.Element;
 export default Default;

package/inputs/FileInput/__stories__/WithBorderAndLink.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const WithBorderAndLink: () => React.JSX.Element;
+export default WithBorderAndLink;

package/inputs/FileInput/index.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
+import { UseFormReturn } from 'react-hook-form';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { ButtonProps } from '@digigov/ui/form/Button';
+import { FileUploadContainerProps, FileUploadProps } from '@digigov/ui/form/FileUpload';
 export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
     extra?: {
         className?: string;
@@ -8,9 +11,10 @@ export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
         limit: {
             maxSize?: number;
         };
-        variant?: 'border' | 'none';
-        buttonVariant?: 'link' | 'button';
-        resetButtonColor?: 'primary' | 'secondary' | 'warning';
+        containerProps?: FileUploadContainerProps;
+        uploadButtonProps?: FileUploadProps;
+        noResetButton?: boolean;
+        resetButtonProps?: ButtonProps;
         locales?: {
             file?: string;
             chooseFile?: string;
@@ -18,6 +22,9 @@ export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
             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;