@digigov/form 2.0.0-8e254888 → 2.0.0-a0ac149e

package/cjs/inputs/Checkboxes/index.js

@@ -35,70 +35,74 @@ var import_react = __toESM(require("react"));
 var import_Checkbox = require("@digigov/ui/form/Checkbox");
 var import_i18n = require("@digigov/ui/i18n");
 var import_Hint = require("@digigov/ui/typography/Hint");
-const Checkboxes = ({
-  name,
-  onChange,
-  value,
-  extra: { options, className },
-  disabled,
-  Field,
-  ...props
-}) => {
-  if (!value) value = [];
-  const handleChange = (optionValue, idx, show) => (evt) => {
-    let newValue;
-    if (evt.currentTarget.checked) {
-      newValue = value.concat([optionValue]);
-    } else {
-      newValue = value.filter((val) => val !== optionValue);
-    }
-    if (show && show.length > 0) {
-      setChecked(
-        (items) => items.map((item, index) => index === idx ? !item : item)
-      );
-    }
-    if (newValue.length === 0) newValue = void 0;
-    onChange(newValue);
-  };
-  const { t } = (0, import_i18n.useTranslation)();
-  const [checked, setChecked] = (0, import_react.useState)(
-    Array(options.length).fill(false)
-  );
-  return /* @__PURE__ */ import_react.default.createElement(import_Checkbox.Checkbox, { className }, options.map(
-    ({
-      label,
-      value: v,
-      show,
-      disabled: optionDisabled,
-      selected,
-      ...option
-    }, index) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: index }, /* @__PURE__ */ import_react.default.createElement(
-      import_Checkbox.CheckboxItem,
-      {
-        key: `${name}.${index}`,
-        name: `${name}.${v}`,
-        id: `${name}.${v}`,
+const Checkboxes = import_react.default.forwardRef(
+  ({
+    name,
+    onChange,
+    value,
+    extra: { options, className },
+    disabled,
+    Field,
+    ...props
+  }, ref) => {
+    if (!value) value = [];
+    const handleChange = (optionValue, idx, show) => (evt) => {
+      let newValue = [];
+      if (evt.currentTarget.checked) {
+        newValue = value.concat([optionValue]);
+      } else {
+        newValue = value.filter((val) => val !== optionValue);
+      }
+      if (show && show.length > 0) {
+        setChecked(
+          (items) => items.map((item, index) => index === idx ? !item : item)
+        );
+      }
+      if (newValue.length === 0) newValue = void 0;
+      onChange(newValue);
+    };
+    const { t } = (0, import_i18n.useTranslation)();
+    const [checked, setChecked] = (0, import_react.useState)(
+      Array(options.length).fill(false)
+    );
+    return /* @__PURE__ */ import_react.default.createElement(import_Checkbox.Checkbox, { className }, options.map(
+      ({
+        label,
         value: v,
-        disabled: disabled || optionDisabled,
-        checked: value?.includes(v),
-        onChange: handleChange(v, index, show),
-        ...option,
-        ...{
-          ...props,
-          reset: void 0,
-          defaultValue: void 0,
-          onBlur: void 0,
-          required: void 0,
-          Field: void 0,
-          "aria-describedby": void 0,
-          type: "checkbox"
-        }
-      },
-      label && label.primary && t(label.primary) || value,
-      label && label.secondary && /* @__PURE__ */ import_react.default.createElement(import_Hint.Hint, null, t(label.secondary))
-    ), !!checked[index] && show && Field && /* @__PURE__ */ import_react.default.createElement(import_Checkbox.CheckboxConditional, null, show.map((fieldName) => /* @__PURE__ */ import_react.default.createElement(Field, { name: fieldName, key: fieldName }))), selected && selected())
-  ));
-};
+        show,
+        disabled: optionDisabled,
+        selected,
+        ...option
+      }, index) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: index }, /* @__PURE__ */ import_react.default.createElement(
+        import_Checkbox.CheckboxItem,
+        {
+          ref: index === 0 ? ref : void 0,
+          key: `${name}.${index}`,
+          name: `${name}.${v}`,
+          id: `${name}.${v}`,
+          value: v,
+          disabled: disabled || optionDisabled,
+          checked: value?.includes(v),
+          onChange: handleChange(v, index, show),
+          ...option,
+          ...{
+            ...props,
+            reset: void 0,
+            defaultValue: void 0,
+            error: void 0,
+            onBlur: void 0,
+            required: void 0,
+            "aria-describedby": void 0,
+            type: "checkbox"
+          }
+        },
+        label && label.primary && t(label.primary) || value,
+        label && label.secondary && /* @__PURE__ */ import_react.default.createElement(import_Hint.Hint, null, t(label.secondary))
+      ), !!checked[index] && show && Field && /* @__PURE__ */ import_react.default.createElement(import_Checkbox.CheckboxConditional, null, show.map((fieldName) => /* @__PURE__ */ import_react.default.createElement(Field, { name: fieldName, key: fieldName }))), selected && selected())
+    ));
+  }
+);
+Checkboxes.displayName = "Checkboxes";
 var Checkboxes_default = Checkboxes;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/inputs/Checkboxes/index.tsx"],
-  "sourcesContent": ["import React, { useState } from 'react';\nimport { ControlledFieldProps } from '@digigov/form/Field/types';\nimport { FieldOptionProps } from '@digigov/form/inputs/Label';\nimport {\n  Checkbox,\n  CheckboxItem,\n  CheckboxConditional,\n} from '@digigov/ui/form/Checkbox';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport { Hint } from '@digigov/ui/typography/Hint';\n\nexport interface CheckboxesProps\n  extends Omit<ControlledFieldProps, 'extra' | 'value'> {\n  value?: string[];\n  extra: {\n    className?: string;\n    options: FieldOptionProps[];\n  };\n  fieldComponent: React.FC<Omit<ControlledFieldProps, 'value' | 'onChange'>>;\n}\n\nexport const Checkboxes: React.FC<CheckboxesProps> = ({\n  name,\n  onChange,\n  value,\n  extra: { options, className },\n  disabled,\n  Field,\n  ...props\n}) => {\n  if (!value) value = [];\n  const handleChange =\n    (optionValue, idx, show) =>\n    (evt): void => {\n      let newValue;\n      if (evt.currentTarget.checked) {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        newValue = value.concat([optionValue]);\n      } else {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        newValue = value.filter((val) => val !== optionValue);\n      }\n      if (show && show.length > 0) {\n        setChecked((items) =>\n          items.map((item, index) => (index === idx ? !item : item))\n        );\n      }\n\n      // reset value to undefined instead of an empty array\n      // so the error state mechanism can throw validation errors\n      if (newValue.length === 0) newValue = undefined;\n      onChange(newValue);\n    };\n  const { t } = useTranslation();\n  const [checked, setChecked] = useState(\n    Array<boolean>(options.length).fill(false)\n  );\n  return (\n    <Checkbox className={className}>\n      {options.map(\n        (\n          {\n            label,\n            value: v,\n            show,\n            disabled: optionDisabled,\n            selected,\n            ...option\n          },\n          index\n        ) => (\n          <React.Fragment key={index}>\n            <CheckboxItem\n              key={`${name}.${index}`}\n              name={`${name}.${v}`}\n              id={`${name}.${v}`}\n              value={v}\n              disabled={disabled || optionDisabled}\n              checked={value?.includes(v)}\n              onChange={handleChange(v, index, show)}\n              {...option}\n              {...{\n                ...props,\n                reset: undefined,\n                defaultValue: undefined,\n                onBlur: undefined,\n                required: undefined,\n                Field: undefined,\n                'aria-describedby': undefined,\n                type: 'checkbox',\n              }}\n            >\n              {(label && label.primary && t(label.primary)) || value}\n              {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}\n            </CheckboxItem>\n\n            {!!checked[index] && show && Field && (\n              <CheckboxConditional>\n                {show.map((fieldName) => (\n                  <Field name={fieldName} key={fieldName} />\n                ))}\n              </CheckboxConditional>\n            )}\n            {selected && selected()}\n          </React.Fragment>\n        )\n      )}\n    </Checkbox>\n  );\n};\n\nexport default Checkboxes;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAGhC,sBAIO;AACP,kBAA+B;AAC/B,kBAAqB;AAYd,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,EAAE,SAAS,UAAU;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,CAAC,MAAO,SAAQ,CAAC;AACrB,QAAM,eACJ,CAAC,aAAa,KAAK,SACnB,CAAC,QAAc;AACb,QAAI;AACJ,QAAI,IAAI,cAAc,SAAS;AAG7B,iBAAW,MAAM,OAAO,CAAC,WAAW,CAAC;AAAA,IACvC,OAAO;AAGL,iBAAW,MAAM,OAAO,CAAC,QAAQ,QAAQ,WAAW;AAAA,IACtD;AACA,QAAI,QAAQ,KAAK,SAAS,GAAG;AAC3B;AAAA,QAAW,CAAC,UACV,MAAM,IAAI,CAAC,MAAM,UAAW,UAAU,MAAM,CAAC,OAAO,IAAK;AAAA,MAC3D;AAAA,IACF;AAIA,QAAI,SAAS,WAAW,EAAG,YAAW;AACtC,aAAS,QAAQ;AAAA,EACnB;AACF,QAAM,EAAE,EAAE,QAAI,4BAAe;AAC7B,QAAM,CAAC,SAAS,UAAU,QAAI;AAAA,IAC5B,MAAe,QAAQ,MAAM,EAAE,KAAK,KAAK;AAAA,EAC3C;AACA,SACE,6BAAAA,QAAA,cAAC,4BAAS,aACP,QAAQ;AAAA,IACP,CACE;AAAA,MACE;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,GAAG;AAAA,IACL,GACA,UAEA,6BAAAA,QAAA,cAAC,aAAAA,QAAM,UAAN,EAAe,KAAK,SACnB,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,GAAG,IAAI,IAAI,KAAK;AAAA,QACrB,MAAM,GAAG,IAAI,IAAI,CAAC;AAAA,QAClB,IAAI,GAAG,IAAI,IAAI,CAAC;AAAA,QAChB,OAAO;AAAA,QACP,UAAU,YAAY;AAAA,QACtB,SAAS,OAAO,SAAS,CAAC;AAAA,QAC1B,UAAU,aAAa,GAAG,OAAO,IAAI;AAAA,QACpC,GAAG;AAAA,QACH,GAAG;AAAA,UACF,GAAG;AAAA,UACH,OAAO;AAAA,UACP,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,OAAO;AAAA,UACP,oBAAoB;AAAA,UACpB,MAAM;AAAA,QACR;AAAA;AAAA,MAEE,SAAS,MAAM,WAAW,EAAE,MAAM,OAAO,KAAM;AAAA,MAChD,SAAS,MAAM,aAAa,6BAAAA,QAAA,cAAC,wBAAM,EAAE,MAAM,SAAS,CAAE;AAAA,IACzD,GAEC,CAAC,CAAC,QAAQ,KAAK,KAAK,QAAQ,SAC3B,6BAAAA,QAAA,cAAC,2CACE,KAAK,IAAI,CAAC,cACT,6BAAAA,QAAA,cAAC,SAAM,MAAM,WAAW,KAAK,WAAW,CACzC,CACH,GAED,YAAY,SAAS,CACxB;AAAA,EAEJ,CACF;AAEJ;AAEA,IAAO,qBAAQ;",
+  "sourcesContent": ["import React, { useState } from 'react';\nimport type { ControlledFieldProps } from '@digigov/form/Field/types';\nimport type { FieldOptionProps } from '@digigov/form/inputs/Label';\nimport {\n  Checkbox,\n  CheckboxItem,\n  CheckboxConditional,\n} from '@digigov/ui/form/Checkbox';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport { Hint } from '@digigov/ui/typography/Hint';\n\nexport interface CheckboxesProps\n  extends Omit<ControlledFieldProps, 'extra' | 'value'> {\n  value?: string[];\n  extra: {\n    className?: string;\n    options: FieldOptionProps[];\n  };\n  fieldComponent: React.FC<Omit<ControlledFieldProps, 'value' | 'onChange'>>;\n}\n\nexport const Checkboxes = React.forwardRef<HTMLInputElement, CheckboxesProps>(\n  (\n    {\n      name,\n      onChange,\n      value,\n      extra: { options, className },\n      disabled,\n      Field,\n      ...props\n    },\n    ref\n  ) => {\n    if (!value) value = [];\n    const handleChange =\n      (optionValue, idx, show) =>\n      (evt): void => {\n        let newValue: any = [];\n        if (evt.currentTarget.checked) {\n          newValue = value.concat([optionValue]);\n        } else {\n          newValue = value.filter((val) => val !== optionValue);\n        }\n        if (show && show.length > 0) {\n          setChecked((items) =>\n            items.map((item, index) => (index === idx ? !item : item))\n          );\n        }\n\n        // reset value to undefined instead of an empty array\n        // so the error state mechanism can throw validation errors\n        if (newValue.length === 0) newValue = undefined;\n        onChange(newValue);\n      };\n    const { t } = useTranslation();\n    const [checked, setChecked] = useState(\n      Array<boolean>(options.length).fill(false)\n    );\n    return (\n      <Checkbox className={className}>\n        {options.map(\n          (\n            {\n              label,\n              value: v,\n              show,\n              disabled: optionDisabled,\n              selected,\n              ...option\n            },\n            index\n          ) => (\n            <React.Fragment key={index}>\n              <CheckboxItem\n                ref={index === 0 ? ref : undefined}\n                key={`${name}.${index}`}\n                name={`${name}.${v}`}\n                id={`${name}.${v}`}\n                value={v}\n                disabled={disabled || optionDisabled}\n                checked={value?.includes(v)}\n                onChange={handleChange(v, index, show)}\n                {...option}\n                {...{\n                  ...props,\n                  reset: undefined,\n                  defaultValue: undefined,\n                  error: undefined,\n                  onBlur: undefined,\n                  required: undefined,\n                  'aria-describedby': undefined,\n                  type: 'checkbox',\n                }}\n              >\n                {(label && label.primary && t(label.primary)) || value}\n                {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}\n              </CheckboxItem>\n\n              {!!checked[index] && show && Field && (\n                <CheckboxConditional>\n                  {show.map((fieldName) => (\n                    <Field name={fieldName} key={fieldName} />\n                  ))}\n                </CheckboxConditional>\n              )}\n              {selected && selected()}\n            </React.Fragment>\n          )\n        )}\n      </Checkbox>\n    );\n  }\n);\n\nCheckboxes.displayName = 'Checkboxes';\n\nexport default Checkboxes;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAGhC,sBAIO;AACP,kBAA+B;AAC/B,kBAAqB;AAYd,MAAM,aAAa,aAAAA,QAAM;AAAA,EAC9B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,SAAS,UAAU;AAAA,IAC5B;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,CAAC,MAAO,SAAQ,CAAC;AACrB,UAAM,eACJ,CAAC,aAAa,KAAK,SACnB,CAAC,QAAc;AACb,UAAI,WAAgB,CAAC;AACrB,UAAI,IAAI,cAAc,SAAS;AAC7B,mBAAW,MAAM,OAAO,CAAC,WAAW,CAAC;AAAA,MACvC,OAAO;AACL,mBAAW,MAAM,OAAO,CAAC,QAAQ,QAAQ,WAAW;AAAA,MACtD;AACA,UAAI,QAAQ,KAAK,SAAS,GAAG;AAC3B;AAAA,UAAW,CAAC,UACV,MAAM,IAAI,CAAC,MAAM,UAAW,UAAU,MAAM,CAAC,OAAO,IAAK;AAAA,QAC3D;AAAA,MACF;AAIA,UAAI,SAAS,WAAW,EAAG,YAAW;AACtC,eAAS,QAAQ;AAAA,IACnB;AACF,UAAM,EAAE,EAAE,QAAI,4BAAe;AAC7B,UAAM,CAAC,SAAS,UAAU,QAAI;AAAA,MAC5B,MAAe,QAAQ,MAAM,EAAE,KAAK,KAAK;AAAA,IAC3C;AACA,WACE,6BAAAA,QAAA,cAAC,4BAAS,aACP,QAAQ;AAAA,MACP,CACE;AAAA,QACE;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA,GAAG;AAAA,MACL,GACA,UAEA,6BAAAA,QAAA,cAAC,aAAAA,QAAM,UAAN,EAAe,KAAK,SACnB,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,UAAU,IAAI,MAAM;AAAA,UACzB,KAAK,GAAG,IAAI,IAAI,KAAK;AAAA,UACrB,MAAM,GAAG,IAAI,IAAI,CAAC;AAAA,UAClB,IAAI,GAAG,IAAI,IAAI,CAAC;AAAA,UAChB,OAAO;AAAA,UACP,UAAU,YAAY;AAAA,UACtB,SAAS,OAAO,SAAS,CAAC;AAAA,UAC1B,UAAU,aAAa,GAAG,OAAO,IAAI;AAAA,UACpC,GAAG;AAAA,UACH,GAAG;AAAA,YACF,GAAG;AAAA,YACH,OAAO;AAAA,YACP,cAAc;AAAA,YACd,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,oBAAoB;AAAA,YACpB,MAAM;AAAA,UACR;AAAA;AAAA,QAEE,SAAS,MAAM,WAAW,EAAE,MAAM,OAAO,KAAM;AAAA,QAChD,SAAS,MAAM,aAAa,6BAAAA,QAAA,cAAC,wBAAM,EAAE,MAAM,SAAS,CAAE;AAAA,MACzD,GAEC,CAAC,CAAC,QAAQ,KAAK,KAAK,QAAQ,SAC3B,6BAAAA,QAAA,cAAC,2CACE,KAAK,IAAI,CAAC,cACT,6BAAAA,QAAA,cAAC,SAAM,MAAM,WAAW,KAAK,WAAW,CACzC,CACH,GAED,YAAY,SAAS,CACxB;AAAA,IAEJ,CACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;",
   "names": ["React"]
 }

package/cjs/inputs/DateInput/index.js

@@ -34,24 +34,27 @@ 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_DateInputContainer = require("@digigov/ui/form/DateInputContainer");
 var import_i18n = require("@digigov/ui/i18n");
 import_dayjs.default.extend(import_customParseFormat.default);
-function useDate(value, onChange) {
+function useDate(name, value, form) {
   const [year, month, day] = (0, import_react.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) {
@@ -72,13 +75,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"];
@@ -89,25 +98,41 @@ const makeDate = (val) => {
   }
   return "";
 };
-const DatePart = ({ label, ...props }) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_DateInputContainer.DateInputItem, { ...props }, label);
-};
-const DateInput = ({ name, ...props }) => {
+const DatePart = import_react.default.forwardRef(
+  ({ label, ...props }, ref) => {
+    return /* @__PURE__ */ import_react.default.createElement(import_DateInputContainer.DateInputItem, { ...props, ref }, label);
+  }
+);
+DatePart.displayName = "DatePart";
+const DateInput = import_react.default.forwardRef(({ name, ...props }, ref) => {
   const { t } = (0, import_i18n.useTranslation)();
-  const [initial] = (0, import_react.useState)(props.value);
-  const value = (0, import_react.useMemo)(() => {
-    if (initial === props.value) {
-      return makeDate(props.value);
+  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
+      });
     }
-    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__ */ import_react.default.createElement(import_DateInputContainer.DateInputContainer, null, /* @__PURE__ */ import_react.default.createElement(
     DatePart,
     {
+      ref,
       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`,
@@ -122,7 +147,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`,
@@ -137,6 +167,7 @@ const DateInput = ({ name, ...props }) => {
     {
       label: t("form.label.year"),
       onChange: date.setYear,
+      onBlur: date.trigger,
       value: date.year,
       width: 4,
       name: `${name}-year`,
@@ -147,7 +178,8 @@ const DateInput = ({ name, ...props }) => {
       error: !date.year ? props.error : false
     }
   ));
-};
+});
+DateInput.displayName = "DateInput";
 var DateInput_default = DateInput;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/cjs/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 type { 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 = React.forwardRef<HTMLInputElement, Record<string, any>>(\n  ({ label, ...props }, ref) => {\n    return (\n      <DateInputItem {...props} ref={ref}>\n        {label}\n      </DateInputItem>\n    );\n  }\n);\nDatePart.displayName = 'DatePart';\n\nexport const DateInput = React.forwardRef<\n  HTMLInputElement,\n  Record<string, any>\n>(({ name, ...props }, ref) => {\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        ref={ref}\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\nDateInput.displayName = 'DateInput';\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,13 @@ 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_DateInputContainer = require("@digigov/ui/form/DateInputContainer");
 var import_i18n = require("@digigov/ui/i18n");
 import_dayjs.default.extend(import_customParseFormat.default);
-function useDateTime(value, onChange) {
+function useDateTime(name, value, form) {
   const [year, month, day, hours, minutes] = (0, import_react.useMemo)(() => {
     if (!value || value.length === 0) {
-      onChange("");
       return ["", "", "", "", ""];
     }
     const [datePart, timePart] = value.split(" ");
@@ -48,14 +48,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) {
@@ -90,6 +93,11 @@ function useDateTime(value, onChange) {
     }
     set(year, month, day, hours, val);
   }
+  function trigger() {
+    if (form.formState.isSubmitted) {
+      form.trigger(name);
+    }
+  }
   return {
     day,
     month,
@@ -100,7 +108,8 @@ function useDateTime(value, onChange) {
     setMonth,
     setDay,
     setHours,
-    setMinutes
+    setMinutes,
+    trigger
   };
 }
 const VALID_FORMATS = ["DD/MM/YYYY HH:mm", "DD/MM/YYYY"];
@@ -111,98 +120,128 @@ const makeDateTime = (val) => {
   }
   return "";
 };
-const DateTimePart = ({ label, ...props }) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_DateInputContainer.DateInputItem, { ...props }, label);
-};
-const DateTimeInput = ({ name, ...props }) => {
+const DateTimePart = import_react.default.forwardRef(
+  ({ label, ...props }, ref) => {
+    return /* @__PURE__ */ import_react.default.createElement(import_DateInputContainer.DateInputItem, { ...props, ref }, label);
+  }
+);
+DateTimePart.displayName = "DateTimePart";
+const DateTimeInput = import_react.default.forwardRef(({ name, ...props }, ref) => {
   const { t } = (0, import_i18n.useTranslation)();
-  const [initial] = (0, import_react.useState)(props.value);
-  const value = (0, import_react.useMemo)(() => {
-    if (initial === props.value) {
-      return makeDateTime(props.value);
+  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
+      });
     }
-    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__ */ import_react.default.createElement(import_DateInputContainer.DateInputContainer, null, /* @__PURE__ */ import_react.default.createElement(
     DateTimePart,
     {
+      ref,
       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__ */ import_react.default.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__ */ import_react.default.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__ */ import_react.default.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__ */ import_react.default.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
     }
   ));
-};
+});
+DateTimeInput.displayName = "DateTimeInput";
 var DateTimeInput_default = DateTimeInput;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {