@digigov/form 2.0.0-36b707c1 → 2.0.0-385c7994

package/inputs/DateInput/index.js

@@ -1,121 +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 from "@digigov/react-core/DateInputContainer";
-import CoreDateInputItem from "@digigov/react-core/DateInputItem";
-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;
-    set(val, month, day);
-  }
-  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.trim();
+        set(val, month, day);
     }
-    set(year, val, day);
-  }
-  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.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(CoreDateInputItem, { ...props }, label);
-};
-const DateInput = ({ name, type, ...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`,
-      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`,
-      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`,
-      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

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

package/inputs/DateTimeInput/index.js

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

package/inputs/FileInput/index.d.ts

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

package/inputs/FileInput/index.js

@@ -1,48 +1,61 @@
-import React, { useState } from "react";
-import FileUpload from "@digigov/react-core/FileUpload";
-import FileUploadContainer from "@digigov/react-core/FileUploadContainer";
-import CoreHint from "@digigov/react-core/Hint";
-import Button from "@digigov/ui/form/Button";
-import { useTranslation } from "@digigov/ui/i18n";
-import Paragraph from "@digigov/ui/typography/Paragraph";
-const FileInput = React.forwardRef(function FileInput2({ name, extra = {}, disabled, reset, onChange, ...props }, ref) {
-  const { t } = useTranslation();
-  const [files, setFiles] = useState([]);
-  const handleChange = (e) => {
-    const target = e.target;
-    const selectedFiles = Array.from(
-      target.files
-    ).map(({ name: name2 }) => name2);
-    setFiles(selectedFiles);
-    onChange(e);
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FileUploadContainer, { hasFiles: files && files.length > 0 }, files?.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Paragraph, null, /* @__PURE__ */ React.createElement("b", null, t("upload.file"), ":"), " ", `${files.join(", ")}`)) : /* @__PURE__ */ React.createElement(CoreHint, null, t("upload.no_file")), /* @__PURE__ */ React.createElement(
-    FileUpload,
-    {
-      ref,
-      hasFiles: !!files?.length,
-      name,
-      disabled,
-      onChange: handleChange,
-      ...{ ...props, required: void 0 }
-    },
-    files?.length ? t("upload.change_file") : t("upload.choose_file")
-  ), files !== void 0 && files.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "link",
-      onClick: (event) => {
+import react, { useCallback, useEffect, useState } from "react";
+import { useWatch } from "react-hook-form";
+import { omit } from "../../utils.js";
+import { Button } from "@digigov/ui/form/Button/index.js";
+import { FileUpload, FileUploadContainer } from "@digigov/ui/form/FileUpload/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
+import { Paragraph } from "@digigov/ui/typography/Paragraph/index.js";
+const FileInput_FileInput = /*#__PURE__*/ react.forwardRef(function({ name, disabled, extra, control, onChange, resetField, ...props }, ref) {
+    const { t } = useTranslation();
+    const value = useWatch({
+        control,
+        name
+    });
+    const [filenames, setFilenames] = useState(Object.values(value || {}).map(({ name })=>name) || []);
+    useEffect(()=>{
+        setFilenames(Object.values(value || {}).map(({ name })=>name));
+    }, [
+        value
+    ]);
+    const handleChange = useCallback((event)=>{
         event.preventDefault();
-        reset({ [name]: "" });
-        setFiles(void 0);
-      }
-    },
-    t("upload.reset_file")
-  ))));
+        const target = event.target;
+        if (target.files && target.files.length > 0) setFilenames(Object.values(target.files).map(({ name })=>name));
+        onChange(event);
+    }, [
+        onChange
+    ]);
+    const handleReset = useCallback((event)=>{
+        event.preventDefault();
+        resetField(name);
+        setFilenames(void 0);
+    }, [
+        name,
+        resetField
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FileUploadContainer, {
+        variant: extra?.containerProps?.variant || 'default',
+        hasFiles: filenames && filenames.length > 0
+    }, filenames?.length ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Paragraph, null, /*#__PURE__*/ react.createElement("b", null, t('upload.file'), ":"), " ", `${filenames.join(', ')}`)) : /*#__PURE__*/ react.createElement(Hint, null, /*#__PURE__*/ react.createElement("b", null, t('upload.file'), ': '), t('upload.no_file')), /*#__PURE__*/ react.createElement(FileUpload, {
+        ref: ref,
+        hasFiles: !!filenames?.length,
+        name: name,
+        variant: extra?.uploadButtonProps?.variant,
+        disabled: disabled,
+        id: name,
+        onChange: handleChange,
+        ...omit(props, [
+            'Field',
+            'reset',
+            'error'
+        ]),
+        required: void 0
+    }, filenames?.length ? t('upload.change_file') : t('upload.choose_file')), void 0 !== filenames && filenames?.length > 0 && !extra?.noResetButton && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Button, {
+        variant: extra?.resetButtonProps?.variant || 'link',
+        onClick: handleReset,
+        color: extra?.resetButtonProps?.color || 'secondary'
+    }, t('upload.reset_file')))));
 });
-var FileInput_default = FileInput;
-export {
-  FileInput,
-  FileInput_default as default
-};
-//# sourceMappingURL=index.js.map
+const inputs_FileInput = FileInput_FileInput;
+export { FileInput_FileInput as FileInput, inputs_FileInput as default };

package/inputs/ImageInput/index.d.ts

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