@digigov/form 2.0.0-7d9a8d86 → 2.0.0-834daea4

package/inputs/Input/__stories__/PostalCode/index.js

@@ -1,22 +1,28 @@
 import React from "react";
-import FormBuilder, {Field} from "@digigov/form";
-import {Button} from "@digigov/ui/form/Button";
-const PostalCode = () => /* @__PURE__ */ React.createElement(FormBuilder, {
-  onSubmit: (data) => {
-    console.log(data);
-  }
-}, /* @__PURE__ */ React.createElement(Field, {
-  key: "postal-code",
-  name: "postal-code",
-  type: "postal_code",
-  label: {
-    primary: "\u03A4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B9\u03BA\u03CC\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2"
+import FormBuilder, { Field } from "@digigov/form";
+import { Button } from "@digigov/ui/form/Button";
+const PostalCode = () => /* @__PURE__ */ React.createElement(
+  FormBuilder,
+  {
+    onSubmit: (data) => {
+      console.log(data);
+    }
   },
-  required: true,
-  extra: {countries: ["GR"]}
-}), /* @__PURE__ */ React.createElement(Button, {
-  type: "submit"
-}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1"));
+  /* @__PURE__ */ React.createElement(
+    Field,
+    {
+      key: "postal-code",
+      name: "postal-code",
+      type: "postal_code",
+      label: {
+        primary: "\u03A4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B9\u03BA\u03CC\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2"
+      },
+      required: true,
+      extra: { countries: ["GR"] }
+    }
+  ),
+  /* @__PURE__ */ React.createElement(Button, { type: "submit" }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1")
+);
 var PostalCode_default = PostalCode;
 export {
   PostalCode,

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const PostalCode: () => JSX.Element;
+import React from 'react';
+export declare const PostalCode: () => React.JSX.Element;
 export default PostalCode;

package/inputs/Input/__stories__/PostalCode.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/inputs/Input/__stories__/PostalCode.tsx"],
   "sourcesContent": ["import React from 'react';\nimport FormBuilder, { Field } from '@digigov/form';\nimport { Button } from '@digigov/ui/form/Button';\n\nexport const PostalCode = () => (\n  <FormBuilder\n    onSubmit={(data) => {\n      console.log(data);\n    }}\n  >\n    <Field\n      key=\"postal-code\"\n      name=\"postal-code\"\n      type=\"postal_code\"\n      label={{\n        primary: '\u03A4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B9\u03BA\u03CC\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2',\n      }}\n      required\n      extra={{ countries: ['GR'] }}\n    />\n    <Button type=\"submit\">\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1</Button>\n  </FormBuilder>\n);\nexport default PostalCode;\n"],
-  "mappings": "AAAA;AACA;AACA;AAEO,MAAM,aAAa,MACxB,oCAAC,aAAD;AAAA,EACE,UAAU,CAAC,SAAS;AAClB,YAAQ,IAAI;AAAA;AAAA,GAGd,oCAAC,OAAD;AAAA,EACE,KAAI;AAAA,EACJ,MAAK;AAAA,EACL,MAAK;AAAA,EACL,OAAO;AAAA,IACL,SAAS;AAAA;AAAA,EAEX,UAAQ;AAAA,EACR,OAAO,CAAE,WAAW,CAAC;AAAA,IAEvB,oCAAC,QAAD;AAAA,EAAQ,MAAK;AAAA,GAAS;AAG1B,IAAO,qBAAQ;",
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,eAAe,aAAa;AACnC,SAAS,cAAc;AAEhB,MAAM,aAAa,MACxB;AAAA,EAAC;AAAA;AAAA,IACC,UAAU,CAAC,SAAS;AAClB,cAAQ,IAAI,IAAI;AAAA,IAClB;AAAA;AAAA,EAEA;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,UAAQ;AAAA,MACR,OAAO,EAAE,WAAW,CAAC,IAAI,EAAE;AAAA;AAAA,EAC7B;AAAA,EACA,oCAAC,UAAO,MAAK,YAAS,kDAAQ;AAChC;AAEF,IAAO,qBAAQ;",
   "names": []
 }

package/inputs/Input/__stories__/String/index.js

@@ -0,0 +1,31 @@
+import React from "react";
+import FormBuilder, { Field } from "@digigov/form";
+import { Button } from "@digigov/ui/form/Button";
+const String = () => /* @__PURE__ */ React.createElement(
+  FormBuilder,
+  {
+    onSubmit: (data) => {
+      console.log(data);
+    }
+  },
+  /* @__PURE__ */ React.createElement(
+    Field,
+    {
+      key: "business-title",
+      name: "business-title",
+      type: "string",
+      label: {
+        primary: "\u038C\u03BD\u03BF\u03BC\u03B1 \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2",
+        secondary: "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03BC\u03B9\u03B1 \u03C3\u03B5\u03B9\u03C1\u03AC \u03B1\u03C0\u03CC \u03C7\u03B1\u03C1\u03B1\u03BA\u03C4\u03AE\u03C1\u03B5\u03C2 \u03BA\u03B1\u03B9 \u03B1\u03C1\u03B9\u03B8\u03BC\u03BF\u03CD\u03C2"
+      },
+      required: true
+    }
+  ),
+  /* @__PURE__ */ React.createElement(Button, { type: "submit" }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1")
+);
+var String_default = String;
+export {
+  String,
+  String_default as default
+};
+//# sourceMappingURL=String.js.map

package/inputs/Input/__stories__/String/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../cjs/inputs/Input/__stories__/String/index.js"
+}

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

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

package/inputs/Input/__stories__/String.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/inputs/Input/__stories__/String.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport FormBuilder, { Field } from '@digigov/form';\nimport { Button } from '@digigov/ui/form/Button';\n\nexport const String = () => (\n  <FormBuilder\n    onSubmit={(data) => {\n      console.log(data);\n    }}\n  >\n    <Field\n      key=\"business-title\"\n      name=\"business-title\"\n      type=\"string\"\n      label={{\n        primary: '\u038C\u03BD\u03BF\u03BC\u03B1 \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2',\n        secondary: '\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03BC\u03B9\u03B1 \u03C3\u03B5\u03B9\u03C1\u03AC \u03B1\u03C0\u03CC \u03C7\u03B1\u03C1\u03B1\u03BA\u03C4\u03AE\u03C1\u03B5\u03C2 \u03BA\u03B1\u03B9 \u03B1\u03C1\u03B9\u03B8\u03BC\u03BF\u03CD\u03C2',\n      }}\n      required\n    />\n    <Button type=\"submit\">\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1</Button>\n  </FormBuilder>\n);\nexport default String;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,eAAe,aAAa;AACnC,SAAS,cAAc;AAEhB,MAAM,SAAS,MACpB;AAAA,EAAC;AAAA;AAAA,IACC,UAAU,CAAC,SAAS;AAClB,cAAQ,IAAI,IAAI;AAAA,IAClB;AAAA;AAAA,EAEA;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,MACb;AAAA,MACA,UAAQ;AAAA;AAAA,EACV;AAAA,EACA,oCAAC,UAAO,MAAK,YAAS,kDAAQ;AAChC;AAEF,IAAO,iBAAQ;",
+  "names": []
+}

package/inputs/Input/__stories__/TextWithLimit/index.js

@@ -0,0 +1,31 @@
+import React from "react";
+import FormBuilder, { Field } from "@digigov/form";
+import { Button } from "@digigov/ui/form";
+const TextWithLimit = () => /* @__PURE__ */ React.createElement(
+  FormBuilder,
+  {
+    onSubmit: (data) => {
+      console.log(data);
+    }
+  },
+  /* @__PURE__ */ React.createElement(
+    Field,
+    {
+      key: "text",
+      name: "text",
+      type: "text",
+      label: {
+        primary: "\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03BB\u03B7\u03C1\u03BF\u03C6\u03BF\u03C1\u03AF\u03B5\u03C2;"
+      },
+      required: true,
+      extra: { limit: { min: 3, max: 10 }, multiline: true }
+    }
+  ),
+  /* @__PURE__ */ React.createElement(Button, { type: "submit" }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1")
+);
+var TextWithLimit_default = TextWithLimit;
+export {
+  TextWithLimit,
+  TextWithLimit_default as default
+};
+//# sourceMappingURL=TextWithLimit.js.map

package/inputs/Input/__stories__/TextWithLimit/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../cjs/inputs/Input/__stories__/TextWithLimit/index.js"
+}

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

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

package/inputs/Input/__stories__/TextWithLimit.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/inputs/Input/__stories__/TextWithLimit.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport FormBuilder, { Field } from '@digigov/form';\nimport { Button } from '@digigov/ui/form';\n\nexport const TextWithLimit = () => (\n  <FormBuilder\n    onSubmit={(data) => {\n      console.log(data);\n    }}\n  >\n    <Field\n      key=\"text\"\n      name=\"text\"\n      type=\"text\"\n      label={{\n        primary: '\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03BB\u03B7\u03C1\u03BF\u03C6\u03BF\u03C1\u03AF\u03B5\u03C2;',\n      }}\n      required\n      extra={{ limit: { min: 3, max: 10 }, multiline: true }}\n    />\n    <Button type=\"submit\">\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1</Button>\n  </FormBuilder>\n);\nexport default TextWithLimit;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,eAAe,aAAa;AACnC,SAAS,cAAc;AAEhB,MAAM,gBAAgB,MAC3B;AAAA,EAAC;AAAA;AAAA,IACC,UAAU,CAAC,SAAS;AAClB,cAAQ,IAAI,IAAI;AAAA,IAClB;AAAA;AAAA,EAEA;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,UAAQ;AAAA,MACR,OAAO,EAAE,OAAO,EAAE,KAAK,GAAG,KAAK,GAAG,GAAG,WAAW,KAAK;AAAA;AAAA,EACvD;AAAA,EACA,oCAAC,UAAO,MAAK,YAAS,kDAAQ;AAChC;AAEF,IAAO,wBAAQ;",
+  "names": []
+}

package/inputs/Input/index.js

@@ -1,48 +1,67 @@
 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 {useTranslation} from "@digigov/ui/i18n";
+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";
 const TYPES_MAP = {
   string: "text",
   int: "text",
   text: "text",
   date: "date"
 };
-const Input = React.forwardRef(function WrappedInput({name, control, type, extra, ...props}, ref) {
-  let {multiline = false, rows, limit} = extra || {};
-  const {className} = extra || {};
-  multiline = multiline === true || type === "text";
-  rows = rows || (multiline ? 4 : 1);
-  const fieldType = TYPES_MAP[type || "text"] || "text";
-  const {t} = useTranslation();
-  const currentValue = useWatch({control, name});
-  if (multiline === true) {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TextArea, {
-      name,
-      className,
-      rows,
-      ref,
-      ...{
-        ...props,
-        reset: void 0,
-        required: void 0,
-        type: fieldType
+const Input = React.forwardRef(
+  function WrappedInput({ name, control, type, extra, Field, ...props }, ref) {
+    let { multiline = false, rows, limit } = extra || {};
+    const { className } = extra || {};
+    multiline = multiline === true || type === "text";
+    rows = rows || (multiline ? 4 : 1);
+    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;
       }
-    }), 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"), ".")));
-  } else {
-    return /* @__PURE__ */ React.createElement(TextInput, {
-      name,
-      type: fieldType,
-      className,
-      ref,
-      ...{...props, reset: void 0, required: void 0}
-    });
+      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,
+        {
+          name,
+          className,
+          rows,
+          ref,
+          ...{
+            ...props,
+            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(Hint, { fontWeight: "bold" }, "\xA0", `${Math.abs(getRemainingChars(currentValue, limit))}`, "\xA0"), constructRemainingText(currentValue, limit)));
+    } else {
+      return /* @__PURE__ */ React.createElement(
+        TextInput,
+        {
+          name,
+          type: fieldType,
+          "data-type": type,
+          className,
+          ref,
+          ...{ ...props, reset: void 0, required: void 0 }
+        }
+      );
+    }
   }
-});
+);
 var Input_default = Input;
 export {
   Input,

package/inputs/Input/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/Input/index.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { useWatch } from 'react-hook-form';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { Hint } from '@digigov/react-core/Hint';\nimport TextArea from '@digigov/react-core/TextArea';\nimport TextInput from '@digigov/react-core/TextInput';\nimport { useTranslation } from '@digigov/ui/i18n';\n\nconst TYPES_MAP = {\n  string: 'text',\n  int: 'text',\n  text: 'text',\n  date: 'date',\n};\n\nexport interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    fullWidth?: boolean;\n    multiline?: boolean;\n    className?: string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    rows?: any;\n    limit: {\n      min?: number;\n      max?: number;\n    };\n  };\n}\n\nexport const Input: React.ExoticComponent<InputProps> = React.forwardRef(\n  function WrappedInput({ name, control, type, extra, ...props }, ref: never) {\n    // eslint-disable-next-line prefer-const\n    let { multiline = false, rows, limit } = extra || {};\n    const { className } = extra || {};\n    // if enforced to multiline use true. Derive from type otherwise.\n    multiline = multiline === true || type === 'text';\n    // use explicit rows value if set. Derive from multiline otherwise.\n    rows = rows || (multiline ? 4 : 1);\n    // translate dilosi type to HTML Input type\n    const fieldType = TYPES_MAP[type || 'text'] || 'text';\n    const { t } = useTranslation();\n    const currentValue: string | '' = useWatch({ control, name });\n    if (multiline === true) {\n      return (\n        <>\n          <TextArea\n            name={name}\n            className={className}\n            rows={rows}\n            ref={ref}\n            {...{\n              ...props,\n              reset: undefined,\n              required: undefined,\n              type: fieldType,\n            }}\n          />\n          {limit?.max && (\n            <Hint>\n              {currentValue === undefined ||\n              (currentValue?.length >= 0 &&\n                currentValue?.length <= limit?.max) ? (\n                <span>\n                  {t('form.info.text.you_have')}{' '}\n                  <b>\n                    {!currentValue\n                      ? limit.max\n                      : limit?.max - currentValue?.length}\n                  </b>{' '}\n                  {currentValue && limit?.max - currentValue?.length === 1\n                    ? `${t('form.info.text.character')}`\n                    : `${t('form.info.text.characters')}`}{' '}\n                  {t('form.info.text.remaining')}.\n                </span>\n              ) : (\n                <span style={{ color: '#b60202' }}>\n                  {t('form.info.text.you_have')}{' '}\n                  <b>{currentValue && currentValue?.length - limit?.max}</b>{' '}\n                  {currentValue?.length - limit?.max === 1\n                    ? `${t('form.info.text.character')}`\n                    : `${t('form.info.text.characters')}`}{' '}\n                  {t('form.info.text.too_many')}.\n                </span>\n              )}\n            </Hint>\n          )}\n        </>\n      );\n    } else {\n      return (\n        <TextInput\n          name={name}\n          type={fieldType}\n          className={className}\n          ref={ref}\n          {...{ ...props, reset: undefined, required: undefined }}\n        />\n      );\n    }\n  }\n);\n\nexport default Input;\n"],
-  "mappings": "AAAA;AACA;AAEA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAAA,EAChB,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AAAA;AAiBD,MAAM,QAA2C,MAAM,WAC5D,sBAAsB,CAAE,MAAM,SAAS,MAAM,UAAU,QAAS,KAAY;AAE1E,MAAI,CAAE,YAAY,OAAO,MAAM,SAAU,SAAS;AAClD,QAAM,CAAE,aAAc,SAAS;AAE/B,cAAY,cAAc,QAAQ,SAAS;AAE3C,SAAO,QAAS,aAAY,IAAI;AAEhC,QAAM,YAAY,UAAU,QAAQ,WAAW;AAC/C,QAAM,CAAE,KAAM;AACd,QAAM,eAA4B,SAAS,CAAE,SAAS;AACtD,MAAI,cAAc,MAAM;AACtB,WACE,0DACE,oCAAC,UAAD;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,SACI;AAAA,WACC;AAAA,QACH,OAAO;AAAA,QACP,UAAU;AAAA,QACV,MAAM;AAAA;AAAA,QAGT,OAAO,OACN,oCAAC,MAAD,MACG,iBAAiB,UACjB,cAAc,UAAU,KACvB,cAAc,UAAU,OAAO,MAC/B,oCAAC,QAAD,MACG,EAAE,4BAA4B,KAC/B,oCAAC,KAAD,MACG,CAAC,eACE,MAAM,MACN,OAAO,MAAM,cAAc,SAC5B,KACJ,gBAAgB,OAAO,MAAM,cAAc,WAAW,IACnD,GAAG,EAAE,gCACL,GAAG,EAAE,gCAAgC,KACxC,EAAE,6BAA4B,OAGjC,oCAAC,QAAD;AAAA,MAAM,OAAO,CAAE,OAAO;AAAA,OACnB,EAAE,4BAA4B,KAC/B,oCAAC,KAAD,MAAI,gBAAgB,cAAc,SAAS,OAAO,MAAS,KAC1D,cAAc,SAAS,OAAO,QAAQ,IACnC,GAAG,EAAE,gCACL,GAAG,EAAE,gCAAgC,KACxC,EAAE,4BAA2B;AAAA,SAOrC;AACL,WACE,oCAAC,WAAD;AAAA,MACE;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,SACI,IAAK,OAAO,OAAO,QAAW,UAAU;AAAA;AAAA;AAAA;AAOtD,IAAO,gBAAQ;",
-  "names": []
+  "sourcesContent": ["import React from 'react';\nimport { useWatch } from 'react-hook-form';\nimport { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { TextArea } from '@digigov/ui/form/TextArea';\nimport { TextInput } from '@digigov/ui/form/TextInput';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport { Hint } from '@digigov/ui/typography/Hint';\n\nconst TYPES_MAP = {\n  string: 'text',\n  int: 'text',\n  text: 'text',\n  date: 'date',\n};\n\nexport interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {\n  extra?: {\n    fullWidth?: boolean;\n    multiline?: boolean;\n    className?: string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    rows?: any;\n    limit: {\n      min?: number;\n      max?: number;\n    };\n  };\n}\n\nexport const Input: React.ExoticComponent<InputProps> = React.forwardRef(\n  function WrappedInput({ name, control, type, extra, Field, ...props }, ref: never) {\n    // eslint-disable-next-line prefer-const\n    let { multiline = false, rows, limit } = extra || {};\n    const { className } = extra || {};\n    // if enforced to multiline use true. Derive from type otherwise.\n    multiline = multiline === true || type === 'text';\n    // use explicit rows value if set. Derive from multiline otherwise.\n    rows = rows || (multiline ? 4 : 1);\n    // translate dilosi type to HTML Input type\n    const fieldType = TYPES_MAP[type || 'text'] || 'text';\n    const { t } = useTranslation();\n    const currentValue: string | '' = useWatch({ control, name });\n\n    const getRemainingChars = (currentValue, limit) => {\n      if (currentValue) {\n        return limit?.max - currentValue.length;\n      }\n      return limit?.max;\n    };\n\n    const constructRemainingText = (currentValue, limit) => {\n      const remainingChars = getRemainingChars(currentValue, limit);\n      let remainingText =\n        Math.abs(remainingChars) === 1\n          ? t('form.info.text.character')\n          : t('form.info.text.characters');\n      remainingText +=\n        remainingChars > 0\n          ? ` ${t('form.info.text.remaining')}.`\n          : ` ${t('form.info.text.too_many')}.`;\n      return remainingText;\n    };\n\n    if (multiline === true) {\n      return (\n        <>\n          <TextArea\n            name={name}\n            className={className}\n            rows={rows}\n            ref={ref}\n            {...{\n              ...props,\n              reset: undefined,\n              required: undefined,\n              type: fieldType,\n            }}\n          />\n          {limit?.max && (\n            <Hint display={'flex'}>\n              {t('form.info.text.you_have')}\n              <Hint fontWeight=\"bold\">\n                &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}\n                &nbsp;\n              </Hint>\n              {constructRemainingText(currentValue, limit)}\n            </Hint>\n          )}\n        </>\n      );\n    } else {\n      return (\n        <TextInput\n          name={name}\n          type={fieldType}\n          data-type={type}\n          className={className}\n          ref={ref}\n          {...{ ...props, reset: undefined, required: undefined }}\n        />\n      );\n    }\n  }\n);\n\nexport default Input;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,gBAAgB;AAEzB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AAErB,MAAM,YAAY;AAAA,EAChB,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AACR;AAgBO,MAAM,QAA2C,MAAM;AAAA,EAC5D,SAAS,aAAa,EAAE,MAAM,SAAS,MAAM,OAAO,OAAO,GAAG,MAAM,GAAG,KAAY;AAEjF,QAAI,EAAE,YAAY,OAAO,MAAM,MAAM,IAAI,SAAS,CAAC;AACnD,UAAM,EAAE,UAAU,IAAI,SAAS,CAAC;AAEhC,gBAAY,cAAc,QAAQ,SAAS;AAE3C,WAAO,SAAS,YAAY,IAAI;AAEhC,UAAM,YAAY,UAAU,QAAQ,MAAM,KAAK;AAC/C,UAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,UAAM,eAA4B,SAAS,EAAE,SAAS,KAAK,CAAC;AAE5D,UAAM,oBAAoB,CAACA,eAAcC,WAAU;AACjD,UAAID,eAAc;AAChB,eAAOC,QAAO,MAAMD,cAAa;AAAA,MACnC;AACA,aAAOC,QAAO;AAAA,IAChB;AAEA,UAAM,yBAAyB,CAACD,eAAcC,WAAU;AACtD,YAAM,iBAAiB,kBAAkBD,eAAcC,MAAK;AAC5D,UAAI,gBACF,KAAK,IAAI,cAAc,MAAM,IACzB,EAAE,0BAA0B,IAC5B,EAAE,2BAA2B;AACnC,uBACE,iBAAiB,IACb,IAAI,EAAE,0BAA0B,CAAC,MACjC,IAAI,EAAE,yBAAyB,CAAC;AACtC,aAAO;AAAA,IACT;AAEA,QAAI,cAAc,MAAM;AACtB,aACE,0DACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,YACF,GAAG;AAAA,YACH,OAAO;AAAA,YACP,UAAU;AAAA,YACV,MAAM;AAAA,UACR;AAAA;AAAA,MACF,GACC,OAAO,OACN,oCAAC,QAAK,SAAS,UACZ,EAAE,yBAAyB,GAC5B,oCAAC,QAAK,YAAW,UAAO,QACf,GAAG,KAAK,IAAI,kBAAkB,cAAc,KAAK,CAAC,CAAC,IAAG,MAE/D,GACC,uBAAuB,cAAc,KAAK,CAC7C,CAEJ;AAAA,IAEJ,OAAO;AACL,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAM;AAAA,UACN,aAAW;AAAA,UACX;AAAA,UACA;AAAA,UACC,GAAG,EAAE,GAAG,OAAO,OAAO,QAAW,UAAU,OAAU;AAAA;AAAA,MACxD;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,IAAO,gBAAQ;",
+  "names": ["currentValue", "limit"]
 }

package/inputs/Input/index.test.d.ts

@@ -0,0 +1 @@
+export {};