@digigov/form 2.0.0-d57821ba → 2.0.0-e20fed09

package/inputs/FileInput/index.js

@@ -1,44 +1,84 @@
-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 React, { useCallback, useEffect, useState } from "react";
+import { useWatch } from "react-hook-form";
+import { Button } from "@digigov/ui/form/Button";
+import {
+  FileUpload,
+  FileUploadContainer
+} from "@digigov/ui/form/FileUpload";
 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) {
+import { Hint } from "@digigov/ui/typography/Hint";
+import { Paragraph } from "@digigov/ui/typography/Paragraph";
+const FileInput = React.forwardRef(function FileInput2({
+  name,
+  disabled,
+  resetField,
+  extra,
+  control,
+  onChange,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Field,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  reset,
+  ...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 }
+  const value = useWatch({ control, name });
+  const [filenames, setFilenames] = useState(
+    Object.values(value || {}).map(({ name: name2 }) => name2) || []
+  );
+  useEffect(() => {
+    setFilenames(Object.values(value || {}).map(({ name: name2 }) => name2));
+  }, [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: name2 }) => name2));
+      }
+      onChange(event);
     },
-    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,
+    [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: "link",
-      onClick: (event) => {
-        event.preventDefault();
-        reset({ [name]: "" });
-        setFiles(void 0);
-      }
+      variant: extra?.containerProps?.variant || "default",
+      hasFiles: filenames && filenames.length > 0
     },
-    t("upload.reset_file")
-  ))));
+    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,
+        hasFiles: !!filenames?.length,
+        name,
+        variant: extra?.uploadButtonProps?.variant,
+        disabled,
+        id: name,
+        onChange: handleChange,
+        ...{ ...props, required: void 0 }
+      },
+      filenames?.length ? t("upload.change_file") : t("upload.choose_file")
+    ),
+    filenames !== void 0 && 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 {

package/inputs/FileInput/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/FileInput/index.tsx"],
-  "sourcesContent": ["import React, { useState } from 'react';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport FileUpload from '@digigov/react-core/FileUpload';\nimport FileUploadContainer from '@digigov/react-core/FileUploadContainer';\nimport CoreHint from '@digigov/react-core/Hint';\nimport Button from '@digigov/ui/form/Button';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport Paragraph from '@digigov/ui/typography/Paragraph';\nexport interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    className?: string;\n    multiple?: boolean;\n    accept?: string;\n    limit: {\n      maxSize?: number;\n    };\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const FileInput: React.FC<any> = React.forwardRef(function FileInput(\n  { name, extra = {}, disabled, reset, onChange, ...props },\n  ref: any\n) {\n  const { t } = useTranslation();\n  const [files, setFiles] = useState<Array<string> | undefined>([]);\n  const handleChange = (e) => {\n    const target = e.target as HTMLInputElement;\n    const selectedFiles = Array.from(\n      target.files as ArrayLike<{ name: string }>\n    ).map(({ name }) => name);\n    setFiles(selectedFiles);\n    // proceed calling the onChange provided\n    // by react-hook-form\n    onChange(e);\n  };\n  return (\n    <>\n      <FileUploadContainer hasFiles={files && files.length > 0}>\n        {files?.length ? (\n          <>\n            <Paragraph>\n              <b>{t('upload.file')}:</b> {`${files.join(', ')}`}\n            </Paragraph>\n          </>\n        ) : (\n          <CoreHint>{t('upload.no_file')}</CoreHint>\n        )}\n        <FileUpload\n          ref={ref}\n          hasFiles={!!files?.length}\n          name={name}\n          disabled={disabled}\n          onChange={handleChange}\n          {...{ ...props, required: undefined }}\n        >\n          {files?.length ? t('upload.change_file') : t('upload.choose_file')}\n        </FileUpload>\n        {files !== undefined && files.length > 0 && (\n          <>\n            <Button\n              variant=\"link\"\n              onClick={(event) => {\n                event.preventDefault();\n                reset({ [name]: '' });\n                setFiles(undefined);\n              }}\n            >\n              {t('upload.reset_file')}\n            </Button>\n          </>\n        )}\n      </FileUploadContainer>\n    </>\n  );\n});\n\nexport default FileInput;\n"],
-  "mappings": "AAAA,OAAO,SAAS,gBAAgB;AAEhC,OAAO,gBAAgB;AACvB,OAAO,yBAAyB;AAChC,OAAO,cAAc;AACrB,OAAO,YAAY;AACnB,SAAS,sBAAsB;AAC/B,OAAO,eAAe;AAaf,MAAM,YAA2B,MAAM,WAAW,SAASA,WAChE,EAAE,MAAM,QAAQ,CAAC,GAAG,UAAU,OAAO,UAAU,GAAG,MAAM,GACxD,KACA;AACA,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAoC,CAAC,CAAC;AAChE,QAAM,eAAe,CAAC,MAAM;AAC1B,UAAM,SAAS,EAAE;AACjB,UAAM,gBAAgB,MAAM;AAAA,MAC1B,OAAO;AAAA,IACT,EAAE,IAAI,CAAC,EAAE,MAAAC,MAAK,MAAMA,KAAI;AACxB,aAAS,aAAa;AAGtB,aAAS,CAAC;AAAA,EACZ;AACA,SACE,0DACE,oCAAC,uBAAoB,UAAU,SAAS,MAAM,SAAS,KACpD,OAAO,SACN,0DACE,oCAAC,iBACC,oCAAC,WAAG,EAAE,aAAa,GAAE,GAAC,GAAI,KAAE,GAAG,MAAM,KAAK,IAAI,CAAC,EACjD,CACF,IAEA,oCAAC,gBAAU,EAAE,gBAAgB,CAAE,GAEjC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,CAAC,CAAC,OAAO;AAAA,MACnB;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACT,GAAG,EAAE,GAAG,OAAO,UAAU,OAAU;AAAA;AAAA,IAEnC,OAAO,SAAS,EAAE,oBAAoB,IAAI,EAAE,oBAAoB;AAAA,EACnE,GACC,UAAU,UAAa,MAAM,SAAS,KACrC,0DACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,CAAC,UAAU;AAClB,cAAM,eAAe;AACrB,cAAM,EAAE,CAAC,IAAI,GAAG,GAAG,CAAC;AACpB,iBAAS,MAAS;AAAA,MACpB;AAAA;AAAA,IAEC,EAAE,mBAAmB;AAAA,EACxB,CACF,CAEJ,CACF;AAEJ,CAAC;AAED,IAAO,oBAAQ;",
+  "sourcesContent": ["import React, { ComponentRef, useCallback, useEffect, useState } from 'react';\nimport { UseFormReturn, useWatch } from 'react-hook-form';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { Button, ButtonProps } from '@digigov/ui/form/Button';\nimport {\n  FileUpload,\n  FileUploadContainer,\n  FileUploadContainerProps,\n  FileUploadProps,\n} from '@digigov/ui/form/FileUpload';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport { Hint } from '@digigov/ui/typography/Hint';\nimport { Paragraph } from '@digigov/ui/typography/Paragraph';\n\nexport interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    className?: string;\n    multiple?: boolean;\n    accept?: string;\n    limit: {\n      maxSize?: number;\n    };\n    containerProps?: FileUploadContainerProps;\n    uploadButtonProps?: FileUploadProps;\n    noResetButton?: boolean;\n    resetButtonProps?: ButtonProps;\n    locales?: {\n      file?: string;\n      chooseFile?: string;\n      changeFile?: string;\n      resetFile?: string;\n    };\n  };\n  reset: (values?: FileList) => void;\n  resetField: UseFormReturn['resetField'];\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const FileInput = React.forwardRef<\n  ComponentRef<typeof FileUpload>,\n  FileInputProps\n>(function FileInput(\n  {\n    name,\n    disabled,\n    resetField,\n    extra,\n    control,\n    onChange,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    Field,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    reset,\n    ...props\n  },\n  ref\n) {\n  const { t } = useTranslation();\n  const value: FileList = useWatch({ control, name });\n\n  const [filenames, setFilenames] = useState<string[] | undefined>(\n    Object.values(value || {}).map(({ name }) => name) || []\n  );\n\n  useEffect(() => {\n    setFilenames(Object.values(value || {}).map(({ name }) => name));\n  }, [value]);\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      event.preventDefault();\n      const target = event.target;\n      if (target.files && target.files.length > 0) {\n        setFilenames(Object.values(target.files).map(({ name }) => name));\n      }\n      onChange(event);\n    },\n    [onChange]\n  );\n\n  const handleReset = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      resetField(name);\n      setFilenames(undefined);\n    },\n    [name, resetField]\n  );\n\n  return (\n    <>\n      <FileUploadContainer\n        variant={extra?.containerProps?.variant || 'default'}\n        hasFiles={filenames && filenames.length > 0}\n      >\n        {filenames?.length ? (\n          <>\n            <Paragraph>\n              <b>{t('upload.file')}:</b> {`${filenames.join(', ')}`}\n            </Paragraph>\n          </>\n        ) : (\n          <Hint>\n            <b>\n              {t('upload.file')}\n              {': '}\n            </b>\n            {t('upload.no_file')}\n          </Hint>\n        )}\n        <FileUpload\n          ref={ref}\n          hasFiles={!!filenames?.length}\n          name={name}\n          variant={extra?.uploadButtonProps?.variant}\n          disabled={disabled}\n          id={name}\n          onChange={handleChange}\n          {...{ ...props, required: undefined }}\n        >\n          {filenames?.length\n            ? t('upload.change_file')\n            : t('upload.choose_file')}\n        </FileUpload>\n        {filenames !== undefined &&\n          filenames?.length > 0 &&\n          !extra?.noResetButton && (\n            <>\n              <Button\n                variant={extra?.resetButtonProps?.variant || 'link'}\n                onClick={handleReset}\n                color={extra?.resetButtonProps?.color || 'secondary'}\n              >\n                {t('upload.reset_file')}\n              </Button>\n            </>\n          )}\n      </FileUploadContainer>\n    </>\n  );\n});\n\nexport default FileInput;\n"],
+  "mappings": "AAAA,OAAO,SAAuB,aAAa,WAAW,gBAAgB;AACtE,SAAwB,gBAAgB;AAExC,SAAS,cAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,iBAAiB;AA0BnB,MAAM,YAAY,MAAM,WAG7B,SAASA,WACT;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,QAAkB,SAAS,EAAE,SAAS,KAAK,CAAC;AAElD,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAChC,OAAO,OAAO,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,MAAAC,MAAK,MAAMA,KAAI,KAAK,CAAC;AAAA,EACzD;AAEA,YAAU,MAAM;AACd,iBAAa,OAAO,OAAO,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,MAAAA,MAAK,MAAMA,KAAI,CAAC;AAAA,EACjE,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,eAAe;AAAA,IACnB,CAAC,UAA+C;AAC9C,YAAM,eAAe;AACrB,YAAM,SAAS,MAAM;AACrB,UAAI,OAAO,SAAS,OAAO,MAAM,SAAS,GAAG;AAC3C,qBAAa,OAAO,OAAO,OAAO,KAAK,EAAE,IAAI,CAAC,EAAE,MAAAA,MAAK,MAAMA,KAAI,CAAC;AAAA,MAClE;AACA,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,UAA+C;AAC9C,YAAM,eAAe;AACrB,iBAAW,IAAI;AACf,mBAAa,MAAS;AAAA,IACxB;AAAA,IACA,CAAC,MAAM,UAAU;AAAA,EACnB;AAEA,SACE,0DACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,OAAO,gBAAgB,WAAW;AAAA,MAC3C,UAAU,aAAa,UAAU,SAAS;AAAA;AAAA,IAEzC,WAAW,SACV,0DACE,oCAAC,iBACC,oCAAC,WAAG,EAAE,aAAa,GAAE,GAAC,GAAI,KAAE,GAAG,UAAU,KAAK,IAAI,CAAC,EACrD,CACF,IAEA,oCAAC,YACC,oCAAC,WACE,EAAE,aAAa,GACf,IACH,GACC,EAAE,gBAAgB,CACrB;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU,CAAC,CAAC,WAAW;AAAA,QACvB;AAAA,QACA,SAAS,OAAO,mBAAmB;AAAA,QACnC;AAAA,QACA,IAAI;AAAA,QACJ,UAAU;AAAA,QACT,GAAG,EAAE,GAAG,OAAO,UAAU,OAAU;AAAA;AAAA,MAEnC,WAAW,SACR,EAAE,oBAAoB,IACtB,EAAE,oBAAoB;AAAA,IAC5B;AAAA,IACC,cAAc,UACb,WAAW,SAAS,KACpB,CAAC,OAAO,iBACN,0DACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,OAAO,kBAAkB,WAAW;AAAA,QAC7C,SAAS;AAAA,QACT,OAAO,OAAO,kBAAkB,SAAS;AAAA;AAAA,MAExC,EAAE,mBAAmB;AAAA,IACxB,CACF;AAAA,EAEN,CACF;AAEJ,CAAC;AAED,IAAO,oBAAQ;",
   "names": ["FileInput", "name"]
 }

package/inputs/ImageInput/ImageInput.stories.d.ts

@@ -1,10 +1,13 @@
 declare namespace _default {
     export let title: string;
     export { ImageInput as component };
+    export let tags: string[];
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;
 export { Default } from "@digigov/form/inputs/ImageInput/__stories__/Default";
-export { WithInvalidImageSize } from "@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageSize";
+export { MaxSize } from "@digigov/form/inputs/ImageInput/__stories__/MaxSize";
 export { WithInvalidImageDimension } from "@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension";
+export { WithInitialValues } from "@digigov/form/inputs/ImageInput/__stories__/WithInitialValues";
 import ImageInput from '@digigov/form/inputs/ImageInput';

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

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

package/inputs/ImageInput/__stories__/MaxSize.d.ts

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

package/inputs/ImageInput/__stories__/WithInitialValues.d.ts

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

package/inputs/ImageInput/__stories__/WithInvalidImageDimension.d.ts

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

package/inputs/ImageInput/__stories__/logo.d/index.js

@@ -0,0 +1 @@
+//# sourceMappingURL=logo.d.js.map

package/inputs/{DateInput/__stories__/Default → ImageInput/__stories__/logo.d}/package.json

@@ -2,5 +2,5 @@
   "sideEffects": false,
   "module": "./index.js",
   "types": "./index.d.ts",
-  "main": "../../../../cjs/inputs/DateInput/__stories__/Default/index.js"
+  "main": "../../../../cjs/inputs/ImageInput/__stories__/logo.d/index.js"
 }

package/inputs/ImageInput/__stories__/logo.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/inputs/ImageInput/index.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { UseFormReturn } from 'react-hook-form';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
 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,18 +1,28 @@
-import React, { useState, useCallback } 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, { ButtonGroup } from "@digigov/ui/form/Button";
+import React, { useRef, useState, useEffect, 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 Paragraph from "@digigov/ui/typography/Paragraph";
+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("img", { src, className: "ds-image--ratio" });
+  return /* @__PURE__ */ React.createElement(Base, { as: "img", src, className: "ds-image--ratio" });
 });
+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 = React.forwardRef(
-  function ImageInput2({ name, extra = {}, disabled, onChange, reset, ...props }, ref) {
+  function ImageInput2({ name, disabled, onChange, resetField, defaultValue, value, ...props }, ref) {
+    const imageRef = useRef(ref?.current);
     const { t } = useTranslation();
-    const [selectedImage, setSelectedImage] = useState(null);
-    const [imageUrl, setImageUrl] = useState(null);
+    const currentValue = defaultValue || value || null;
+    const [selectedImage, setSelectedImage] = useState(currentValue);
+    const [imageUrl, setImageUrl] = useState(
+      currentValue?.src || null
+    );
     const handleImageChange = useCallback(
       (e) => {
         e.preventDefault();
@@ -22,32 +32,59 @@ const ImageInput = React.forwardRef(
           setSelectedImage(selectedFile);
           setImageUrl(URL.createObjectURL(selectedFile));
         }
-        onChange(e);
+        onChange(
+          target.files
+        );
       },
       [selectedImage]
     );
     const handleDeleteImage = useCallback(
       (event) => {
         event.preventDefault();
-        reset({ [name]: "" });
+        resetField(name);
         setSelectedImage(null);
-        setImageUrl("");
+        setImageUrl(null);
       },
       [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("b", null, t("upload.image"), ":"), " ", `${selectedImage?.name}`)) : /* @__PURE__ */ React.createElement(CoreHint, { 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(
+    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);
+          return;
+        }).catch((error) => console.error("Error fetching image:", error));
+      }
+    }, [defaultValue, imageRef]);
+    return /* @__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"), ":"), " ", /* @__PURE__ */ React.createElement("em", null, `${selectedImage?.name || selectedImage?.filename}`))) : /* @__PURE__ */ React.createElement(Hint, { className: "ds-dashed--border" }, t("upload.no_image")), imageUrl !== null && selectedImage !== null && /* @__PURE__ */ React.createElement(Image, { src: imageUrl }), !disabled && /* @__PURE__ */ React.createElement(ButtonGroup, { marginTop: 2 }, /* @__PURE__ */ React.createElement(
       FileUpload,
       {
-        ref,
+        ref: imageRef,
         hasFiles: selectedImage !== null,
         name,
+        id: name,
         disabled,
         accept: "image/*",
         onChange: handleImageChange,
-        ...{ ...props, required: void 0, type: "file" }
+        ...{
+          ...props,
+          required: void 0,
+          Field: void 0,
+          type: "file"
+        }
+      },
+      selectedImage ? t("upload.change_image") : t("upload.choose_image")
+    ), selectedImage !== null && /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        color: "warning",
+        variant: "link",
+        onClick: handleDeleteImage
       },
-      t("upload.choose_image")
-    )))));
+      t("upload.reset_file")
+    )));
   }
 );
 var ImageInput_default = ImageInput;

package/inputs/ImageInput/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/ImageInput/index.tsx"],
-  "sourcesContent": ["import React, { useState, useCallback } from 'react';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport FileUpload from '@digigov/react-core/FileUpload';\nimport FileUploadContainer from '@digigov/react-core/FileUploadContainer';\nimport CoreHint from '@digigov/react-core/Hint';\nimport Button, { ButtonGroup } from '@digigov/ui/form/Button';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport Paragraph from '@digigov/ui/typography/Paragraph';\n\nexport interface ImageProps {\n  src?: any;\n}\n\nexport interface Limit {\n  maxSize?: number;\n  maxWidth?: number;\n  maxHeight?: number;\n  minWidth?: number;\n  minHeight?: number;\n}\n\nexport const Image: React.FC<ImageProps> = React.memo(function Image({ src }) {\n  return <img src={src} className=\"ds-image--ratio\" />;\n});\nexport interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    className?: string;\n    multiple?: boolean;\n    accept?: string;\n    limit?: Limit;\n  };\n  reset: (values?: any) => void;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const ImageInput: React.FC<ImageInputProps> = React.forwardRef(\n  function ImageInput(\n    { name, extra = {}, disabled, onChange, reset, ...props },\n    ref: any\n  ) {\n    const { t } = useTranslation();\n    const [selectedImage, setSelectedImage] = useState<File | null>(null);\n    const [imageUrl, setImageUrl] = useState<string | null>(null);\n    const handleImageChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        const target = e.target as HTMLInputElement;\n        const selectedFile = target.files?.[0];\n\n        if (selectedFile) {\n          setSelectedImage(selectedFile);\n          setImageUrl(URL.createObjectURL(selectedFile));\n        }\n        onChange(e);\n      },\n      [selectedImage]\n    );\n\n    const handleDeleteImage = useCallback(\n      (event) => {\n        event.preventDefault();\n        reset({ [name]: '' });\n        setSelectedImage(null);\n        setImageUrl('');\n      },\n      [selectedImage]\n    );\n\n    return (\n      <>\n        <FileUploadContainer>\n          {selectedImage !== null ? (\n            <>\n              <Paragraph>\n                <b>{t('upload.image')}:</b> {`${selectedImage?.name}`}\n              </Paragraph>\n            </>\n          ) : (\n            <CoreHint className=\"ds-dashed--border\">\n              {t('upload.no_image')}\n            </CoreHint>\n          )}\n          <>\n            {selectedImage !== null && <Image src={imageUrl} />}\n            <ButtonGroup marginTop={2}>\n              {selectedImage !== null && (\n                <Button variant=\"link\" onClick={handleDeleteImage}>\n                  {t('upload.reset_file')}\n                </Button>\n              )}\n              <FileUpload\n                ref={ref}\n                hasFiles={selectedImage !== null}\n                name={name}\n                disabled={disabled}\n                accept=\"image/*\"\n                onChange={handleImageChange}\n                {...{ ...props, required: undefined, type: 'file' }}\n              >\n                {t('upload.choose_image')}\n              </FileUpload>\n            </ButtonGroup>\n          </>\n        </FileUploadContainer>\n      </>\n    );\n  }\n);\n\nexport default ImageInput;\n"],
-  "mappings": "AAAA,OAAO,SAAS,UAAU,mBAAmB;AAE7C,OAAO,gBAAgB;AACvB,OAAO,yBAAyB;AAChC,OAAO,cAAc;AACrB,OAAO,UAAU,mBAAmB;AACpC,SAAS,sBAAsB;AAC/B,OAAO,eAAe;AAcf,MAAM,QAA8B,MAAM,KAAK,SAASA,OAAM,EAAE,IAAI,GAAG;AAC5E,SAAO,oCAAC,SAAI,KAAU,WAAU,mBAAkB;AACpD,CAAC;AAYM,MAAM,aAAwC,MAAM;AAAA,EACzD,SAASC,YACP,EAAE,MAAM,QAAQ,CAAC,GAAG,UAAU,UAAU,OAAO,GAAG,MAAM,GACxD,KACA;AACA,UAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAsB,IAAI;AACpE,UAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AAC5D,UAAM,oBAAoB;AAAA,MACxB,CAAC,MAA2C;AAC1C,UAAE,eAAe;AACjB,cAAM,SAAS,EAAE;AACjB,cAAM,eAAe,OAAO,QAAQ,CAAC;AAErC,YAAI,cAAc;AAChB,2BAAiB,YAAY;AAC7B,sBAAY,IAAI,gBAAgB,YAAY,CAAC;AAAA,QAC/C;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,aAAa;AAAA,IAChB;AAEA,UAAM,oBAAoB;AAAA,MACxB,CAAC,UAAU;AACT,cAAM,eAAe;AACrB,cAAM,EAAE,CAAC,IAAI,GAAG,GAAG,CAAC;AACpB,yBAAiB,IAAI;AACrB,oBAAY,EAAE;AAAA,MAChB;AAAA,MACA,CAAC,aAAa;AAAA,IAChB;AAEA,WACE,0DACE,oCAAC,2BACE,kBAAkB,OACjB,0DACE,oCAAC,iBACC,oCAAC,WAAG,EAAE,cAAc,GAAE,GAAC,GAAI,KAAE,GAAG,eAAe,IAAI,EACrD,CACF,IAEA,oCAAC,YAAS,WAAU,uBACjB,EAAE,iBAAiB,CACtB,GAEF,0DACG,kBAAkB,QAAQ,oCAAC,SAAM,KAAK,UAAU,GACjD,oCAAC,eAAY,WAAW,KACrB,kBAAkB,QACjB,oCAAC,UAAO,SAAQ,QAAO,SAAS,qBAC7B,EAAE,mBAAmB,CACxB,GAEF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU,kBAAkB;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,QAAO;AAAA,QACP,UAAU;AAAA,QACT,GAAG,EAAE,GAAG,OAAO,UAAU,QAAW,MAAM,OAAO;AAAA;AAAA,MAEjD,EAAE,qBAAqB;AAAA,IAC1B,CACF,CACF,CACF,CACF;AAAA,EAEJ;AACF;AAEA,IAAO,qBAAQ;",
+  "sourcesContent": ["import React, { useRef, useState, useEffect, useCallback } from 'react';\nimport { UseFormReturn } from 'react-hook-form';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { Button, ButtonGroup } from '@digigov/ui/form/Button';\nimport { FileUpload, FileUploadContainer } from '@digigov/ui/form/FileUpload';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport { Hint } from '@digigov/ui/typography/Hint';\nimport { Paragraph } from '@digigov/ui/typography/Paragraph';\nimport { Base } from '@digigov/ui/utils/Base';\nexport interface ImageProps {\n  src: string;\n}\n\nexport interface Limit {\n  maxSize?: number;\n  maxWidth?: number;\n  maxHeight?: number;\n  minWidth?: number;\n  minHeight?: number;\n}\n\nexport const Image: React.FC<ImageProps> = React.memo(function Image({ src }) {\n  return <Base as=\"img\" src={src} className=\"ds-image--ratio\" />;\n});\n\ninterface ImageInputDefaultValue {\n  filename: string;\n  src: string;\n}\n\nconst blobToFileList = (blob: Blob, fileName: string): FileList => {\n  const file = new File([blob], fileName, { type: 'image/jpeg' });\n  const dataTransfer = new DataTransfer();\n  dataTransfer.items.add(file);\n  return dataTransfer.files;\n};\nexport interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    className?: string;\n    multiple?: boolean;\n    accept?: string;\n    limit?: Limit;\n  };\n  reset: (values?: any) => void;\n  resetField: UseFormReturn['resetField'];\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  defaultValue?: ImageInputDefaultValue | null;\n  value: any;\n}\n\nexport const ImageInput: React.FC<ImageInputProps> = React.forwardRef(\n  function ImageInput(\n    { name, disabled, onChange, resetField, defaultValue, value, ...props },\n    ref: any\n  ) {\n    const imageRef = useRef(ref?.current);\n    const { t } = useTranslation();\n    const currentValue: ImageInputDefaultValue | null =\n      defaultValue || value || null;\n    const [selectedImage, setSelectedImage] = useState<\n      File | ImageInputDefaultValue | null\n    >(currentValue);\n    const [imageUrl, setImageUrl] = useState<string | null>(\n      currentValue?.src || null\n    );\n\n    const handleImageChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        const target = e.target as HTMLInputElement;\n        const selectedFile = target.files?.[0];\n        if (selectedFile) {\n          setSelectedImage(selectedFile);\n          setImageUrl(URL.createObjectURL(selectedFile));\n        }\n        onChange(\n          target.files as unknown as React.ChangeEvent<HTMLInputElement>\n        );\n      },\n      [selectedImage]\n    );\n\n    const handleDeleteImage = useCallback(\n      (event) => {\n        event.preventDefault();\n        resetField(name);\n        setSelectedImage(null);\n        setImageUrl(null);\n      },\n      [selectedImage]\n    );\n\n    useEffect(() => {\n      // This is to fill the input with the default value (image)\n      if (defaultValue?.src && imageRef.current) {\n        fetch(defaultValue?.src)\n          .then((response) => response.blob())\n          .then((blob) => {\n            const fileList = blobToFileList(blob, defaultValue.filename);\n            imageRef.current.files = fileList;\n            const fileChangeEvent = new Event('change', { bubbles: true });\n            imageRef.current.dispatchEvent(fileChangeEvent);\n            return;\n          })\n          .catch((error) => console.error('Error fetching image:', error));\n      }\n    }, [defaultValue, imageRef]);\n\n    return (\n      <FileUploadContainer>\n        {selectedImage !== null ? (\n          <>\n            <Paragraph>\n              <Base as=\"b\">{t('upload.image')}:</Base>{' '}\n              <em>\n                {`${(selectedImage as File)?.name || (selectedImage as ImageInputDefaultValue)?.filename}`}\n              </em>\n            </Paragraph>\n          </>\n        ) : (\n          <Hint className=\"ds-dashed--border\">{t('upload.no_image')}</Hint>\n        )}\n        {imageUrl !== null && selectedImage !== null && (\n          <Image src={imageUrl} />\n        )}\n        {!disabled && (\n          <ButtonGroup marginTop={2}>\n            <FileUpload\n              ref={imageRef}\n              hasFiles={selectedImage !== null}\n              name={name}\n              id={name}\n              disabled={disabled}\n              accept=\"image/*\"\n              onChange={handleImageChange}\n              {...{\n                ...(props as any),\n                required: undefined,\n                Field: undefined,\n                type: 'file',\n              }}\n            >\n              {selectedImage\n                ? t('upload.change_image')\n                : t('upload.choose_image')}\n            </FileUpload>\n            {selectedImage !== null && (\n              <Button\n                color=\"warning\"\n                variant=\"link\"\n                onClick={handleDeleteImage}\n              >\n                {t('upload.reset_file')}\n              </Button>\n            )}\n          </ButtonGroup>\n        )}\n      </FileUploadContainer>\n    );\n  }\n);\n\nexport default ImageInput;\n"],
+  "mappings": "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",
   "names": ["Image", "ImageInput"]
 }

package/inputs/Input/Input.stories.d.ts

@@ -1,17 +1,22 @@
 declare namespace _default {
     export let title: string;
     export { Input as component };
+    export let tags: string[];
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;
 export { String } from "@digigov/form/inputs/Input/__stories__/String";
+export { StringWithTrimValidation } from "@digigov/form/inputs/Input/__stories__/StringWithTrimValidation";
 export { Integer } from "@digigov/form/inputs/Input/__stories__/Integer";
 export { Boolean } from "@digigov/form/inputs/Input/__stories__/Boolean";
 export { PhoneNumber } from "@digigov/form/inputs/Input/__stories__/PhoneNumber";
 export { LandlineNumber } from "@digigov/form/inputs/Input/__stories__/LandlineNumber";
 export { MobilePhone } from "@digigov/form/inputs/Input/__stories__/MobilePhone";
 export { AFM } from "@digigov/form/inputs/Input/__stories__/AFM";
+export { AMKA } from "@digigov/form/inputs/Input/__stories__/AMKA";
 export { IBAN } from "@digigov/form/inputs/Input/__stories__/IBAN";
+export { Email } from "@digigov/form/inputs/Input/__stories__/Email";
 export { PostalCode } from "@digigov/form/inputs/Input/__stories__/PostalCode";
 export { TextWithLimit } from "@digigov/form/inputs/Input/__stories__/TextWithLimit";
 import Input from '@digigov/form/inputs/Input';

package/inputs/Input/__stories__/AFM.d.ts

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

package/inputs/Input/__stories__/AMKA.d.ts

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

package/inputs/Input/__stories__/Boolean.d.ts

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

package/inputs/Input/__stories__/Email.d.ts

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

package/inputs/Input/__stories__/IBAN.d.ts

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

package/inputs/Input/__stories__/Integer.d.ts

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

package/inputs/Input/__stories__/LandlineNumber.d.ts

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

package/inputs/Input/__stories__/MobilePhone.d.ts

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

package/inputs/Input/__stories__/PhoneNumber.d.ts

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

package/inputs/Input/__stories__/PostalCode.d.ts

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

package/inputs/Input/__stories__/String.d.ts

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

package/inputs/Input/__stories__/StringWithTrimValidation.d.ts

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

package/inputs/Input/__stories__/TextWithLimit.d.ts

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

package/inputs/Input/index.d.ts

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

package/inputs/Input/index.js

@@ -1,17 +1,19 @@
 import React from "react";
 import { useWatch } from "react-hook-form";
-import { Hint } from "@digigov/react-core/Hint";
-import TextArea from "@digigov/react-core/TextArea";
-import TextInput from "@digigov/react-core/TextInput";
+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";
 const TYPES_MAP = {
   string: "text",
+  password: "password",
   int: "text",
   text: "text",
   date: "date"
 };
 const Input = React.forwardRef(
   function WrappedInput({ name, control, type, extra, ...props }, ref) {
+    delete props["Field"];
     let { multiline = false, rows, limit } = extra || {};
     const { className } = extra || {};
     multiline = multiline === true || type === "text";
@@ -19,6 +21,18 @@ const Input = React.forwardRef(
     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 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;
+    };
     if (multiline === true) {
       return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
         TextArea,
@@ -27,6 +41,7 @@ const Input = React.forwardRef(
           className,
           rows,
           ref,
+          id: name,
           ...{
             ...props,
             reset: void 0,
@@ -34,16 +49,22 @@ const Input = React.forwardRef(
             type: fieldType
           }
         }
-      ), limit?.max && /* @__PURE__ */ React.createElement(Hint, null, currentValue === void 0 || currentValue?.length >= 0 && currentValue?.length <= limit?.max ? /* @__PURE__ */ React.createElement("span", null, t("form.info.text.you_have"), " ", /* @__PURE__ */ React.createElement("b", null, !currentValue ? limit.max : limit?.max - currentValue?.length), " ", currentValue && limit?.max - currentValue?.length === 1 ? `${t("form.info.text.character")}` : `${t("form.info.text.characters")}`, " ", t("form.info.text.remaining"), ".") : /* @__PURE__ */ React.createElement("span", { style: { color: "#b60202" } }, t("form.info.text.you_have"), " ", /* @__PURE__ */ React.createElement("b", null, currentValue && currentValue?.length - limit?.max), " ", currentValue?.length - limit?.max === 1 ? `${t("form.info.text.character")}` : `${t("form.info.text.characters")}`, " ", t("form.info.text.too_many"), ".")));
+      ), 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 }
+          ...{
+            ...props,
+            reset: void 0,
+            required: void 0
+          }
         }
       );
     }