@digigov/form 1.2.0-a7ffb5dc → 2.0.0-0138f8bd

package/cjs/inputs/FileInput/index.js

@@ -1,68 +1,118 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FileInput_exports = {};
+__export(FileInput_exports, {
+  FileInput: () => FileInput,
+  default: () => FileInput_default
 });
-exports["default"] = exports.FileInput = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _FileUpload = _interopRequireDefault(require("@digigov/react-core/cjs/FileUpload"));
-var _FileUploadContainer = _interopRequireDefault(require("@digigov/react-core/cjs/FileUploadContainer"));
-var _Hint = _interopRequireDefault(require("@digigov/react-core/cjs/Hint"));
-var _Button = _interopRequireDefault(require("@digigov/ui/cjs/form/Button"));
-var _i18n = require("@digigov/ui/cjs/i18n");
-var _Paragraph = _interopRequireDefault(require("@digigov/ui/cjs/typography/Paragraph"));
-var _excluded = ["name", "extra", "disabled", "reset", "onChange"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-var FileInput = exports.FileInput = /*#__PURE__*/_react["default"].forwardRef(function FileInput(_ref, ref) {
-  var name = _ref.name,
-    _ref$extra = _ref.extra,
-    extra = _ref$extra === void 0 ? {} : _ref$extra,
-    disabled = _ref.disabled,
-    reset = _ref.reset,
-    onChange = _ref.onChange,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var _useTranslation = (0, _i18n.useTranslation)(),
-    t = _useTranslation.t;
-  var _useState = (0, _react.useState)([]),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    files = _useState2[0],
-    setFiles = _useState2[1];
-  var handleChange = function handleChange(e) {
-    var target = e.target;
-    var selectedFiles = Array.from(target.files).map(function (_ref2) {
-      var name = _ref2.name;
-      return name;
-    });
-    setFiles(selectedFiles);
-    // proceed calling the onChange provided
-    // by react-hook-form
-    onChange(e);
-  };
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_FileUploadContainer["default"], {
-    hasFiles: files && files.length > 0
-  }, files !== null && files !== void 0 && files.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Paragraph["default"], null, /*#__PURE__*/_react["default"].createElement("b", null, t('upload.file'), ":"), " ", "".concat(files.join(', ')))) : /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, t('upload.no_file')), /*#__PURE__*/_react["default"].createElement(_FileUpload["default"], (0, _extends2["default"])({
-    ref: ref,
-    hasFiles: !!(files !== null && files !== void 0 && files.length),
-    name: name,
-    disabled: disabled,
-    onChange: handleChange
-  }, (0, _extends2["default"])({}, props, {
-    required: undefined
-  })), files !== null && files !== void 0 && files.length ? t('upload.change_file') : t('upload.choose_file')), files !== undefined && files.length > 0 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    variant: "link",
-    onClick: function onClick(event) {
+module.exports = __toCommonJS(FileInput_exports);
+var import_react = __toESM(require("react"));
+var import_react_hook_form = require("react-hook-form");
+var import_Button = require("@digigov/ui/form/Button");
+var import_FileUpload = require("@digigov/ui/form/FileUpload");
+var import_i18n = require("@digigov/ui/i18n");
+var import_Hint = require("@digigov/ui/typography/Hint");
+var import_Paragraph = require("@digigov/ui/typography/Paragraph");
+const FileInput = import_react.default.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 } = (0, import_i18n.useTranslation)();
+  const value = (0, import_react_hook_form.useWatch)({ control, name });
+  const [filenames, setFilenames] = (0, import_react.useState)(
+    Object.values(value || {}).map(({ name: name2 }) => name2) || []
+  );
+  (0, import_react.useEffect)(() => {
+    setFilenames(Object.values(value || {}).map(({ name: name2 }) => name2));
+  }, [value]);
+  const handleChange = (0, import_react.useCallback)(
+    (event) => {
       event.preventDefault();
-      reset((0, _defineProperty2["default"])({}, name, ''));
-      setFiles(undefined);
-    }
-  }, t('upload.reset_file')))));
+      const target = event.target;
+      if (target.files && target.files.length > 0) {
+        setFilenames(Object.values(target.files).map(({ name: name2 }) => name2));
+      }
+      onChange(event);
+    },
+    [onChange]
+  );
+  const handleReset = (0, import_react.useCallback)(
+    (event) => {
+      event.preventDefault();
+      resetField(name);
+      setFilenames(void 0);
+    },
+    [name, resetField]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    import_FileUpload.FileUploadContainer,
+    {
+      variant: extra?.containerProps?.variant || "default",
+      hasFiles: filenames && filenames.length > 0
+    },
+    filenames?.length ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Paragraph.Paragraph, null, /* @__PURE__ */ import_react.default.createElement("b", null, t("upload.file"), ":"), " ", `${filenames.join(", ")}`)) : /* @__PURE__ */ import_react.default.createElement(import_Hint.Hint, null, /* @__PURE__ */ import_react.default.createElement("b", null, t("upload.file"), ": "), t("upload.no_file")),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_FileUpload.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__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      import_Button.Button,
+      {
+        variant: extra?.resetButtonProps?.variant || "link",
+        onClick: handleReset,
+        color: extra?.resetButtonProps?.color || "secondary"
+      },
+      t("upload.reset_file")
+    ))
+  ));
+});
+var FileInput_default = FileInput;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FileInput
 });
-var _default = exports["default"] = FileInput;
+//# sourceMappingURL=index.js.map

package/cjs/inputs/FileInput/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/inputs/FileInput/index.tsx"],
+  "sourcesContent": ["import type { ComponentRef } from 'react';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport type { UseFormReturn } from 'react-hook-form';\nimport { useWatch } from 'react-hook-form';\nimport type { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport type { ButtonProps } from '@digigov/ui/form/Button';\nimport { Button } from '@digigov/ui/form/Button';\nimport type {\n  FileUploadContainerProps,\n  FileUploadProps,\n} from '@digigov/ui/form/FileUpload';\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';\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;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAwD;AAExD,6BAAyB;AAGzB,oBAAuB;AAKvB,wBAAgD;AAChD,kBAA+B;AAC/B,kBAAqB;AACrB,uBAA0B;AA0BnB,MAAM,YAAY,aAAAA,QAAM,WAG7B,SAASC,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,QAAI,4BAAe;AAC7B,QAAM,YAAkB,iCAAS,EAAE,SAAS,KAAK,CAAC;AAElD,QAAM,CAAC,WAAW,YAAY,QAAI;AAAA,IAChC,OAAO,OAAO,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,MAAAC,MAAK,MAAMA,KAAI,KAAK,CAAC;AAAA,EACzD;AAEA,8BAAU,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,mBAAe;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,kBAAc;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,6BAAAF,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,OAAO,gBAAgB,WAAW;AAAA,MAC3C,UAAU,aAAa,UAAU,SAAS;AAAA;AAAA,IAEzC,WAAW,SACV,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,kCACC,6BAAAA,QAAA,cAAC,WAAG,EAAE,aAAa,GAAE,GAAC,GAAI,KAAE,GAAG,UAAU,KAAK,IAAI,CAAC,EACrD,CACF,IAEA,6BAAAA,QAAA,cAAC,wBACC,6BAAAA,QAAA,cAAC,WACE,EAAE,aAAa,GACf,IACH,GACC,EAAE,gBAAgB,CACrB;AAAA,IAEF,6BAAAA,QAAA;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,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA;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": ["React", "FileInput", "name"]
+}

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

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

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

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

package/cjs/inputs/ImageInput/index.js

@@ -1,86 +1,130 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ImageInput_exports = {};
+__export(ImageInput_exports, {
+  Image: () => Image,
+  ImageInput: () => ImageInput,
+  default: () => ImageInput_default
 });
-exports["default"] = exports.ImageInput = exports.Image = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _FileUpload = _interopRequireDefault(require("@digigov/react-core/cjs/FileUpload"));
-var _FileUploadContainer = _interopRequireDefault(require("@digigov/react-core/cjs/FileUploadContainer"));
-var _Hint = _interopRequireDefault(require("@digigov/react-core/cjs/Hint"));
-var _Button = _interopRequireWildcard(require("@digigov/ui/cjs/form/Button"));
-var _i18n = require("@digigov/ui/cjs/i18n");
-var _Paragraph = _interopRequireDefault(require("@digigov/ui/cjs/typography/Paragraph"));
-var _excluded = ["name", "extra", "disabled", "onChange", "reset"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var Image = exports.Image = /*#__PURE__*/_react["default"].memo(function Image(_ref) {
-  var src = _ref.src;
-  return /*#__PURE__*/_react["default"].createElement("img", {
-    src: src,
-    className: "ds-image--ratio"
-  });
+module.exports = __toCommonJS(ImageInput_exports);
+var import_react = __toESM(require("react"));
+var import_Button = require("@digigov/ui/form/Button");
+var import_FileUpload = require("@digigov/ui/form/FileUpload");
+var import_i18n = require("@digigov/ui/i18n");
+var import_Hint = require("@digigov/ui/typography/Hint");
+var import_Paragraph = require("@digigov/ui/typography/Paragraph");
+var import_Base = require("@digigov/ui/utils/Base");
+const Image = import_react.default.memo(function Image2({ src }) {
+  return /* @__PURE__ */ import_react.default.createElement(import_Base.Base, { as: "img", src, className: "ds-image--ratio" });
 });
-var ImageInput = exports.ImageInput = /*#__PURE__*/_react["default"].forwardRef(function ImageInput(_ref2, ref) {
-  var name = _ref2.name,
-    _ref2$extra = _ref2.extra,
-    extra = _ref2$extra === void 0 ? {} : _ref2$extra,
-    disabled = _ref2.disabled,
-    onChange = _ref2.onChange,
-    reset = _ref2.reset,
-    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
-  var _useTranslation = (0, _i18n.useTranslation)(),
-    t = _useTranslation.t;
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    selectedImage = _useState2[0],
-    setSelectedImage = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    imageUrl = _useState4[0],
-    setImageUrl = _useState4[1];
-  var handleImageChange = (0, _react.useCallback)(function (e) {
-    var _target$files;
-    e.preventDefault();
-    var target = e.target;
-    var selectedFile = (_target$files = target.files) === null || _target$files === void 0 ? void 0 : _target$files[0];
-    if (selectedFile) {
-      setSelectedImage(selectedFile);
-      setImageUrl(URL.createObjectURL(selectedFile));
-    }
-    onChange(e);
-  }, [selectedImage]);
-  var handleDeleteImage = (0, _react.useCallback)(function (event) {
-    event.preventDefault();
-    reset((0, _defineProperty2["default"])({}, name, ''));
-    setSelectedImage(null);
-    setImageUrl('');
-  }, [selectedImage]);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_FileUploadContainer["default"], null, selectedImage !== null ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Paragraph["default"], null, /*#__PURE__*/_react["default"].createElement("b", null, t('upload.image'), ":"), " ", "".concat(selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.name))) : /*#__PURE__*/_react["default"].createElement(_Hint["default"], {
-    className: "ds-dashed--border"
-  }, t('upload.no_image')), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, selectedImage !== null && /*#__PURE__*/_react["default"].createElement(Image, {
-    src: imageUrl
-  }), /*#__PURE__*/_react["default"].createElement(_Button.ButtonGroup, {
-    marginTop: 2
-  }, selectedImage !== null && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    variant: "link",
-    onClick: handleDeleteImage
-  }, t('upload.reset_file')), /*#__PURE__*/_react["default"].createElement(_FileUpload["default"], (0, _extends2["default"])({
-    ref: ref,
-    hasFiles: selectedImage !== null,
-    name: name,
-    disabled: disabled,
-    accept: "image/*",
-    onChange: handleImageChange
-  }, (0, _extends2["default"])({}, props, {
-    required: undefined,
-    type: 'file'
-  })), t('upload.choose_image'))))));
+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 = import_react.default.forwardRef(
+  function ImageInput2({ name, disabled, onChange, resetField, defaultValue, value, ...props }, ref) {
+    const imageRef = (0, import_react.useRef)(ref?.current);
+    const { t } = (0, import_i18n.useTranslation)();
+    const currentValue = defaultValue || value || null;
+    const [selectedImage, setSelectedImage] = (0, import_react.useState)(currentValue);
+    const [imageUrl, setImageUrl] = (0, import_react.useState)(
+      currentValue?.src || null
+    );
+    const handleImageChange = (0, import_react.useCallback)(
+      (e) => {
+        e.preventDefault();
+        const target = e.target;
+        const selectedFile = target.files?.[0];
+        if (selectedFile) {
+          setSelectedImage(selectedFile);
+          setImageUrl(URL.createObjectURL(selectedFile));
+        }
+        onChange(
+          target.files
+        );
+      },
+      [selectedImage]
+    );
+    const handleDeleteImage = (0, import_react.useCallback)(
+      (event) => {
+        event.preventDefault();
+        resetField(name);
+        setSelectedImage(null);
+        setImageUrl(null);
+      },
+      [selectedImage]
+    );
+    (0, import_react.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__ */ import_react.default.createElement(import_FileUpload.FileUploadContainer, null, selectedImage !== null ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Paragraph.Paragraph, null, /* @__PURE__ */ import_react.default.createElement(import_Base.Base, { as: "b" }, t("upload.image"), ":"), " ", /* @__PURE__ */ import_react.default.createElement("em", null, `${selectedImage?.name || selectedImage?.filename}`))) : /* @__PURE__ */ import_react.default.createElement(import_Hint.Hint, { className: "ds-dashed--border" }, t("upload.no_image")), imageUrl !== null && selectedImage !== null && /* @__PURE__ */ import_react.default.createElement(Image, { src: imageUrl }), !disabled && /* @__PURE__ */ import_react.default.createElement(import_Button.ButtonGroup, { marginTop: 2 }, /* @__PURE__ */ import_react.default.createElement(
+      import_FileUpload.FileUpload,
+      {
+        ref: imageRef,
+        hasFiles: selectedImage !== null,
+        name,
+        id: name,
+        disabled,
+        accept: "image/*",
+        onChange: handleImageChange,
+        ...{
+          ...props,
+          required: void 0,
+          Field: void 0,
+          type: "file"
+        }
+      },
+      selectedImage ? t("upload.change_image") : t("upload.choose_image")
+    ), selectedImage !== null && /* @__PURE__ */ import_react.default.createElement(
+      import_Button.Button,
+      {
+        color: "warning",
+        variant: "link",
+        onClick: handleDeleteImage
+      },
+      t("upload.reset_file")
+    )));
+  }
+);
+var ImageInput_default = ImageInput;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Image,
+  ImageInput
 });
-var _default = exports["default"] = ImageInput;
+//# sourceMappingURL=index.js.map

package/cjs/inputs/ImageInput/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/inputs/ImageInput/index.tsx"],
+  "sourcesContent": ["import React, { useRef, useState, useEffect, useCallback } from 'react';\nimport type { UseFormReturn } from 'react-hook-form';\nimport type { 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": ["React", "Image", "ImageInput"]
+}