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

package/inputs/FileInput/index.js

@@ -1,62 +1,61 @@
-import React, { useState } from "react";
-import { Button } from "@digigov/ui/form/Button";
-import { FileUpload, FileUploadContainer } from "@digigov/ui/form/FileUpload";
-import { useTranslation } from "@digigov/ui/i18n";
-import { Hint } from "@digigov/ui/typography/Hint";
-import { Paragraph } from "@digigov/ui/typography/Paragraph";
-const FileInput = React.forwardRef(function FileInput2({ name, disabled, reset, onChange, extra, ...props }, ref) {
-  const { t } = useTranslation();
-  const variant = extra?.variant || "none";
-  const buttonVariant = extra?.buttonVariant;
-  const resetButtonColor = extra?.resetButtonColor;
-  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,
-    {
-      variant,
-      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(Hint, null, /* @__PURE__ */ React.createElement("b", null, t("upload.file"), ": "), t("upload.no_file")),
-    /* @__PURE__ */ React.createElement(
-      FileUpload,
-      {
-        ref,
-        hasFiles: !!files?.length,
+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();
+        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,
-        variant: buttonVariant,
-        disabled,
-        onChange: handleChange,
+        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,
-        ...{ ...props, required: void 0, Field: 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) => {
-          event.preventDefault();
-          reset({ [name]: "" });
-          setFiles(void 0);
-        },
-        color: resetButtonColor
-      },
-      t("upload.reset_file")
-    ))
-  ));
+        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;

package/inputs/ImageInput/index.js

@@ -1,65 +1,96 @@
-import React, { useState, useCallback } from "react";
-import { Button, ButtonGroup } from "@digigov/ui/form/Button";
-import { FileUpload, FileUploadContainer } from "@digigov/ui/form/FileUpload";
-import { useTranslation } from "@digigov/ui/i18n";
-import { Hint } from "@digigov/ui/typography/Hint";
-import { Paragraph } from "@digigov/ui/typography/Paragraph";
-import { Base } from "@digigov/ui/utils/Base";
-const Image = React.memo(function Image2({ src }) {
-  return /* @__PURE__ */ React.createElement(Base, { as: "img", src, className: "ds-image--ratio" });
+import react, { useCallback, useEffect, useRef, useState } from "react";
+import { omit } from "../../utils.js";
+import { Button, ButtonGroup } 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";
+import { Base } from "@digigov/ui/utils/Base/index.js";
+const ImageInput_Image = /*#__PURE__*/ react.memo(function({ src }) {
+    return /*#__PURE__*/ react.createElement(Base, {
+        as: "img",
+        src: src,
+        className: "ds-image--ratio"
+    });
 });
-const ImageInput = React.forwardRef(
-  function ImageInput2({ name, disabled, onChange, reset, ...props }, ref) {
+const blobToFileList = (blob, fileName)=>{
+    const file = new File([
+        blob
+    ], fileName, {
+        type: 'image/jpeg'
+    });
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(file);
+    return dataTransfer.files;
+};
+const ImageInput_ImageInput = /*#__PURE__*/ react.forwardRef(function({ name, disabled, onChange, defaultValue, value, resetField, ...props }, ref) {
+    const imageRef = useRef(ref?.current);
     const { t } = useTranslation();
-    const [selectedImage, setSelectedImage] = useState(null);
-    const [imageUrl, setImageUrl] = useState(null);
-    const handleImageChange = useCallback(
-      (e) => {
+    const currentValue = defaultValue || value || null;
+    const [selectedImage, setSelectedImage] = useState(currentValue);
+    const [imageUrl, setImageUrl] = useState(currentValue?.src || null);
+    const handleImageChange = useCallback((e)=>{
         e.preventDefault();
         const target = e.target;
         const selectedFile = target.files?.[0];
         if (selectedFile) {
-          setSelectedImage(selectedFile);
-          setImageUrl(URL.createObjectURL(selectedFile));
+            setSelectedImage(selectedFile);
+            setImageUrl(URL.createObjectURL(selectedFile));
         }
-        onChange(e);
-      },
-      [selectedImage]
-    );
-    const handleDeleteImage = useCallback(
-      (event) => {
+        onChange(target.files);
+    }, [
+        selectedImage
+    ]);
+    const handleDeleteImage = useCallback((event)=>{
         event.preventDefault();
-        reset({ [name]: "" });
+        resetField(name);
         setSelectedImage(null);
-        setImageUrl("");
-      },
-      [selectedImage]
-    );
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FileUploadContainer, null, selectedImage !== null ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Paragraph, null, /* @__PURE__ */ React.createElement(Base, { as: "b" }, t("upload.image"), ":"), " ", `${selectedImage?.name}`)) : /* @__PURE__ */ React.createElement(Hint, { className: "ds-dashed--border" }, t("upload.no_image")), /* @__PURE__ */ React.createElement(React.Fragment, null, selectedImage !== null && /* @__PURE__ */ React.createElement(Image, { src: imageUrl }), /* @__PURE__ */ React.createElement(ButtonGroup, { marginTop: 2 }, selectedImage !== null && /* @__PURE__ */ React.createElement(Button, { variant: "link", onClick: handleDeleteImage }, t("upload.reset_file")), /* @__PURE__ */ React.createElement(
-      FileUpload,
-      {
-        ref,
-        hasFiles: selectedImage !== null,
-        name,
+        setImageUrl(null);
+    }, [
+        resetField,
+        name
+    ]);
+    useEffect(()=>{
+        if (defaultValue?.src && imageRef.current) fetch(defaultValue?.src).then((response)=>response.blob()).then((blob)=>{
+            const fileList = blobToFileList(blob, defaultValue.filename);
+            imageRef.current.files = fileList;
+            const fileChangeEvent = new Event('change', {
+                bubbles: true
+            });
+            imageRef.current.dispatchEvent(fileChangeEvent);
+        }).catch((error)=>console.error('Error fetching image:', error));
+    }, [
+        defaultValue,
+        imageRef
+    ]);
+    return /*#__PURE__*/ react.createElement(FileUploadContainer, null, null !== selectedImage ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Paragraph, null, /*#__PURE__*/ react.createElement(Base, {
+        as: "b"
+    }, t('upload.image'), ":"), ' ', /*#__PURE__*/ react.createElement("em", null, `${selectedImage?.name || selectedImage?.filename}`))) : /*#__PURE__*/ react.createElement(Hint, {
+        className: "ds-dashed--border"
+    }, t('upload.no_image')), null !== imageUrl && null !== selectedImage && /*#__PURE__*/ react.createElement(ImageInput_Image, {
+        src: imageUrl
+    }), !disabled && /*#__PURE__*/ react.createElement(ButtonGroup, {
+        marginTop: 2
+    }, /*#__PURE__*/ react.createElement(FileUpload, {
+        ref: imageRef,
+        hasFiles: null !== selectedImage,
+        name: name,
         id: name,
-        disabled,
+        disabled: disabled,
         accept: "image/*",
         onChange: handleImageChange,
-        ...{
-          ...props,
-          required: void 0,
-          Field: void 0,
-          type: "file"
-        }
-      },
-      t("upload.choose_image")
-    )))));
-  }
-);
-var ImageInput_default = ImageInput;
-export {
-  Image,
-  ImageInput,
-  ImageInput_default as default
-};
-//# sourceMappingURL=index.js.map
+        ...omit(props, [
+            'Field',
+            'reset',
+            'error'
+        ]),
+        required: void 0,
+        type: 'file'
+    }, selectedImage ? t('upload.change_image') : t('upload.choose_image')), null !== selectedImage && /*#__PURE__*/ react.createElement(Button, {
+        color: "warning",
+        variant: "link",
+        onClick: handleDeleteImage
+    }, t('upload.reset_file'))));
+});
+const inputs_ImageInput = ImageInput_ImageInput;
+export { ImageInput_Image as Image, ImageInput_ImageInput as ImageInput, inputs_ImageInput as default };

package/inputs/Input/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
+import type { UseFormReturn } from 'react-hook-form';
+import type { UncontrolledFieldProps } from '../../Field/types.js';
+export interface InputProps extends Omit<UncontrolledFieldProps, 'extra' | 'Field'> {
     extra?: {
         fullWidth?: boolean;
         multiline?: boolean;
@@ -11,6 +12,8 @@ export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
             max?: number;
         };
     };
+    Field?: UncontrolledFieldProps['Field'];
+    resetField: UseFormReturn['resetField'];
 }
 export declare const Input: React.ExoticComponent<InputProps>;
 export default Input;

package/inputs/Input/index.js

@@ -1,78 +1,69 @@
-import React from "react";
+import react from "react";
 import { useWatch } from "react-hook-form";
-import { TextArea } from "@digigov/ui/form/TextArea";
-import { TextInput } from "@digigov/ui/form/TextInput";
-import { useTranslation } from "@digigov/ui/i18n";
-import { Hint } from "@digigov/ui/typography/Hint";
+import { omit } from "../../utils.js";
+import { TextArea } from "@digigov/ui/form/TextArea/index.js";
+import { TextInput } from "@digigov/ui/form/TextInput/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
 const TYPES_MAP = {
-  string: "text",
-  int: "text",
-  text: "text",
-  date: "date"
+    string: 'text',
+    password: 'password',
+    int: 'text',
+    rate: 'number',
+    text: 'text',
+    date: 'date'
 };
-const Input = React.forwardRef(
-  function WrappedInput({ name, control, type, extra, ...props }, ref) {
+const Input = /*#__PURE__*/ react.forwardRef(function({ name, control, type, extra, ...props }, ref) {
     let { multiline = false, rows, limit } = extra || {};
     const { className } = extra || {};
-    multiline = multiline === true || type === "text";
+    multiline = true === multiline || 'text' === type;
     rows = rows || (multiline ? 4 : 1);
-    const fieldType = TYPES_MAP[type || "text"] || "text";
+    const fieldType = TYPES_MAP[type || 'text'] || 'text';
     const { t } = useTranslation();
-    const currentValue = useWatch({ control, name });
-    const getRemainingChars = (currentValue2, limit2) => {
-      if (currentValue2) {
-        return limit2?.max - currentValue2.length;
-      }
-      return limit2?.max;
+    const currentValue = useWatch({
+        control,
+        name
+    });
+    const getRemainingChars = (currentValue, limit)=>{
+        if (currentValue) return limit?.max - currentValue.length;
+        return limit?.max;
     };
-    const constructRemainingText = (currentValue2, limit2) => {
-      const remainingChars = getRemainingChars(currentValue2, limit2);
-      let remainingText = Math.abs(remainingChars) === 1 ? t("form.info.text.character") : t("form.info.text.characters");
-      remainingText += remainingChars > 0 ? ` ${t("form.info.text.remaining")}.` : ` ${t("form.info.text.too_many")}.`;
-      return remainingText;
+    const constructRemainingText = (currentValue, limit)=>{
+        const remainingChars = getRemainingChars(currentValue, limit);
+        let remainingText = 1 === Math.abs(remainingChars) ? t('form.info.text.character') : t('form.info.text.characters');
+        remainingText += remainingChars > 0 ? ` ${t('form.info.text.remaining')}.` : ` ${t('form.info.text.too_many')}.`;
+        return remainingText;
     };
-    if (multiline === true) {
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        TextArea,
-        {
-          name,
-          className,
-          rows,
-          ref,
-          id: name,
-          ...{
-            ...props,
-            reset: void 0,
-            required: void 0,
-            type: fieldType,
-            Field: void 0
-          }
-        }
-      ), limit?.max && /* @__PURE__ */ React.createElement(Hint, { display: "flex" }, t("form.info.text.you_have"), /* @__PURE__ */ React.createElement(Hint, { fontWeight: "bold" }, "\xA0", `${Math.abs(getRemainingChars(currentValue, limit))}`, "\xA0"), constructRemainingText(currentValue, limit)));
-    } else {
-      return /* @__PURE__ */ React.createElement(
-        TextInput,
-        {
-          name,
-          id: name,
-          type: fieldType,
-          "data-type": type,
-          className,
-          ref,
-          ...{
-            ...props,
-            reset: void 0,
-            required: void 0,
-            Field: void 0
-          }
-        }
-      );
-    }
-  }
-);
-var Input_default = Input;
-export {
-  Input,
-  Input_default as default
-};
-//# sourceMappingURL=index.js.map
+    const transformedProps = omit(props, [
+        'Field',
+        'resetField'
+    ]);
+    if (true === multiline) return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(TextArea, {
+        name: name,
+        className: className,
+        rows: rows,
+        ref: ref,
+        id: name,
+        ...transformedProps,
+        reset: void 0,
+        required: void 0,
+        type: fieldType
+    }), limit?.max && /*#__PURE__*/ react.createElement(Hint, {
+        display: 'flex'
+    }, t('form.info.text.you_have'), /*#__PURE__*/ react.createElement("strong", null, "\xa0", `${Math.abs(getRemainingChars(currentValue, limit))}`, "\xa0"), constructRemainingText(currentValue, limit)));
+    return /*#__PURE__*/ react.createElement(TextInput, {
+        name: name,
+        id: name,
+        type: fieldType,
+        "data-type": type,
+        className: className,
+        ref: ref,
+        ...transformedProps,
+        min: void 0,
+        max: void 0,
+        reset: void 0,
+        required: void 0
+    });
+});
+const inputs_Input = Input;
+export { Input, inputs_Input as default };

package/inputs/Label/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FieldLabelProps } from '@digigov/form/types';
+import type { FieldLabelProps } from '../../types.js';
 export interface FieldOptionProps {
     label?: FieldLabelProps;
     value: string;

package/inputs/Label/index.js

@@ -1,17 +1,14 @@
-import React from "react";
-import { LabelTitle } from "@digigov/ui/form/LabelContainer";
-import { useTranslation } from "@digigov/ui/i18n";
-import { Hint } from "@digigov/ui/typography/Hint";
-const Label = ({ className, label, value }) => {
-  const { t } = useTranslation();
-  if ((!label || label && !label.primary && !label.secondary) && !value) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(LabelTitle, { className, size: "sm" }, label && label.primary && t(label.primary) || value), label && label.secondary && /* @__PURE__ */ React.createElement(Hint, null, t(label.secondary)));
+import react from "react";
+import { LabelTitle } from "@digigov/ui/form/LabelContainer/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
+const Label_Label = ({ className, label, value })=>{
+    const { t } = useTranslation();
+    if ((!label || label && !label.primary && !label.secondary) && !value) return null;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(LabelTitle, {
+        className: className,
+        size: "sm"
+    }, label && label.primary && t(label.primary) || value), label && label.secondary && /*#__PURE__*/ react.createElement(Hint, null, t(label.secondary)));
 };
-var Label_default = Label;
-export {
-  Label,
-  Label_default as default
-};
-//# sourceMappingURL=index.js.map
+const Label = Label_Label;
+export { Label_Label as Label, Label as default };

package/inputs/OtpInput/index.d.ts

@@ -8,9 +8,5 @@ export declare function useOtp(onChange: any, maxLength: any): {
     handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
     handlePaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
 };
-export declare const OtpInput: ({ name, maxLength, ...props }: {
-    [x: string]: any;
-    name: any;
-    maxLength?: number | undefined;
-}) => React.JSX.Element;
+export declare const OtpInput: React.ForwardRefExoticComponent<Omit<Record<string, any>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default OtpInput;