@digigov/form 2.0.0-13876dba → 2.0.0-16fbe090

package/inputs/DateInput/index.js

@@ -1,126 +1,134 @@
-import React, { useMemo, useState } from "react";
+import react, { useEffect, useMemo } from "react";
 import dayjs from "dayjs";
-import customParseFormat from "dayjs/plugin/customParseFormat";
-import {
-  DateInputContainer,
-  DateInputItem
-} from "@digigov/ui/form/DateInputContainer";
-import { useTranslation } from "@digigov/ui/i18n";
+import customParseFormat from "dayjs/plugin/customParseFormat.js";
+import { useFormContext } from "../../FormContext.js";
+import { DateInputContainer, DateInputItem } from "@digigov/ui/form/DateInputContainer/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
 dayjs.extend(customParseFormat);
-function useDate(value, onChange) {
-  const [year, month, day] = useMemo(() => {
-    if (!value || value.length === 0) {
-      onChange("");
-      return ["", "", ""];
+function useDate(name, value, form) {
+    const [year, month, day] = useMemo(()=>{
+        if (!value || 0 === value.length) return [
+            '',
+            '',
+            ''
+        ];
+        const [day, month, year] = value.split('/');
+        return [
+            year,
+            month,
+            day
+        ];
+    }, [
+        value
+    ]);
+    function update(value) {
+        form.setValue(name, value, {
+            shouldValidate: false
+        });
     }
-    const [day2, month2, year2] = value.split("/");
-    return [year2, month2, day2];
-  }, [value]);
-  function set(year2, month2, day2) {
-    const value2 = `${day2 || ""}/${month2 || ""}/${year2 || ""}`;
-    if (!year2 && !month2 && !day2) {
-      onChange(null);
-    } else {
-      onChange(value2);
+    function set(year, month, day) {
+        const value = `${day || ''}/${month || ''}/${year || ''}`;
+        year || month || day ? update(value) : update('');
     }
-  }
-  function setYear(evt) {
-    const val = evt.target.value.trim();
-    set(val, month, day);
-  }
-  function setMonth(evt, cast) {
-    let val = evt.target.value.trim();
-    if (cast && val && val.length === 1) {
-      val = "0" + val;
+    function setYear(evt) {
+        const val = evt.target.value.trim();
+        set(val, month, day);
     }
-    set(year, val, day);
-  }
-  function setDay(evt, cast) {
-    let val = evt.target.value.trim();
-    if (cast && val && val.length === 1) {
-      val = "0" + val;
+    function setMonth(evt, cast) {
+        let val = evt.target.value.trim();
+        if (cast && val && 1 === val.length) val = '0' + val;
+        set(year, val, day);
     }
-    set(year, month, val);
-  }
-  return {
-    day,
-    month,
-    year,
-    setYear,
-    setMonth,
-    setDay
-  };
-}
-const VALID_FORMATS = ["DD/MM/YYYY"];
-const makeDate = (val) => {
-  const date = dayjs(val, VALID_FORMATS, true);
-  if (date.isValid()) {
-    return date.format("DD/MM/YYYY");
-  }
-  return "";
-};
-const DatePart = ({ label, ...props }) => {
-  return /* @__PURE__ */ React.createElement(DateInputItem, { ...props }, label);
-};
-const DateInput = ({ name, ...props }) => {
-  const { t } = useTranslation();
-  const [initial] = useState(props.value);
-  const value = useMemo(() => {
-    if (initial === props.value) {
-      return makeDate(props.value);
-    }
-    return props.value;
-  }, [props.value, initial]);
-  const date = useDate(value || makeDate(props.defaultValue), props.onChange);
-  return /* @__PURE__ */ React.createElement(DateInputContainer, null, /* @__PURE__ */ React.createElement(
-    DatePart,
-    {
-      label: t("form.label.day"),
-      onChange: date.setDay,
-      onBlur: (e) => date.setDay(e, true),
-      value: date.day,
-      width: 2,
-      name: `${name}-day`,
-      id: `${name}-day`,
-      maxLength: "2",
-      disabled: props.disabled,
-      "aria-required": props["aria-required"],
-      error: !date.day ? props.error : false
+    function setDay(evt, cast) {
+        let val = evt.target.value.trim();
+        if (cast && val && 1 === val.length) val = '0' + val;
+        set(year, month, val);
     }
-  ), /* @__PURE__ */ React.createElement(
-    DatePart,
-    {
-      label: t("form.label.month"),
-      onChange: date.setMonth,
-      onBlur: (e) => date.setMonth(e, true),
-      value: date.month,
-      width: 2,
-      name: `${name}-month`,
-      id: `${name}-month`,
-      maxLength: "2",
-      disabled: props.disabled,
-      "aria-required": props["aria-required"],
-      error: !date.month ? props.error : false
+    function trigger() {
+        if (form.formState.isSubmitted) form.trigger(name);
     }
-  ), /* @__PURE__ */ React.createElement(
-    DatePart,
-    {
-      label: t("form.label.year"),
-      onChange: date.setYear,
-      value: date.year,
-      width: 4,
-      name: `${name}-year`,
-      id: `${name}-year`,
-      maxLength: "4",
-      disabled: props.disabled,
-      "aria-required": props["aria-required"],
-      error: !date.year ? props.error : false
-    }
-  ));
-};
-var DateInput_default = DateInput;
-export {
-  DateInput,
-  DateInput_default as default
+    return {
+        day,
+        month,
+        year,
+        setYear,
+        setMonth,
+        setDay,
+        trigger
+    };
+}
+const VALID_FORMATS = [
+    'DD/MM/YYYY'
+];
+const makeDate = (val)=>{
+    const date = dayjs(val, VALID_FORMATS, true);
+    if (date.isValid()) return date.format('DD/MM/YYYY');
+    return '';
 };
-//# sourceMappingURL=index.js.map
+const DatePart = /*#__PURE__*/ react.forwardRef(({ label, ...props }, ref)=>/*#__PURE__*/ react.createElement(DateInputItem, {
+        ...props,
+        ref: ref
+    }, label));
+DatePart.displayName = 'DatePart';
+const DateInput_DateInput = /*#__PURE__*/ react.forwardRef(({ name, ...props }, ref)=>{
+    const { t } = useTranslation();
+    const form = useFormContext();
+    useEffect(()=>{
+        const initialValue = form.getValues(name);
+        if (void 0 === initialValue && props.defaultValue) form.setValue(name, makeDate(props.defaultValue), {
+            shouldValidate: false
+        });
+        else form.setValue(name, makeDate(initialValue), {
+            shouldValidate: false
+        });
+    }, []);
+    const value = form.getValues(name);
+    const date = useDate(name, value, form);
+    return /*#__PURE__*/ react.createElement(DateInputContainer, null, /*#__PURE__*/ react.createElement(DatePart, {
+        ref: ref,
+        label: t('form.label.day'),
+        onChange: date.setDay,
+        onBlur: (e)=>{
+            if (date.day && 1 === date.day.length) date.setDay(e, true);
+            date.trigger();
+        },
+        value: date.day,
+        width: 2,
+        name: `${name}-day`,
+        id: `${name}-day`,
+        maxLength: "2",
+        disabled: props.disabled,
+        "aria-required": props['aria-required'],
+        error: date.day ? false : props.error
+    }), /*#__PURE__*/ react.createElement(DatePart, {
+        label: t('form.label.month'),
+        onChange: date.setMonth,
+        onBlur: (e)=>{
+            if (date.month && 1 === date.month.length) date.setMonth(e, true);
+            date.trigger();
+        },
+        value: date.month,
+        width: 2,
+        name: `${name}-month`,
+        id: `${name}-month`,
+        maxLength: "2",
+        disabled: props.disabled,
+        "aria-required": props['aria-required'],
+        error: date.month ? false : props.error
+    }), /*#__PURE__*/ react.createElement(DatePart, {
+        label: t('form.label.year'),
+        onChange: date.setYear,
+        onBlur: date.trigger,
+        value: date.year,
+        width: 4,
+        name: `${name}-year`,
+        id: `${name}-year`,
+        maxLength: "4",
+        disabled: props.disabled,
+        "aria-required": props['aria-required'],
+        error: date.year ? false : props.error
+    }));
+});
+DateInput_DateInput.displayName = 'DateInput';
+const DateInput = DateInput_DateInput;
+export { DateInput_DateInput as DateInput, DateInput as default };

package/inputs/DateTimeInput/index.d.ts

@@ -1,13 +1,10 @@
 import React from 'react';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import type { UncontrolledFieldProps } from '../../Field/types.js';
 export interface DateTimeInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
     extra?: {
         max?: string;
         min?: string;
     };
 }
-export declare const DateTimeInput: ({ name, ...props }: {
-    [x: string]: any;
-    name: any;
-}) => React.JSX.Element;
+export declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<Record<string, any>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default DateTimeInput;

package/inputs/DateTimeInput/index.js

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

package/inputs/FileInput/index.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import type { UseFormReturn } from 'react-hook-form';
+import type { UncontrolledFieldProps } from '../../Field/types.js';
+import type { ButtonProps } from '@digigov/ui/form/Button';
+import type { FileUploadContainerProps, FileUploadProps } from '@digigov/ui/form/FileUpload';
 export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
     extra?: {
         className?: string;
@@ -8,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;