linear-react-components-ui 1.1.26-beta.16 → 1.1.26-beta.18

package/lib/inputs/file/DefaultFile.js

@@ -1,69 +1,80 @@
-import { jsx as i, jsxs as k } from "react/jsx-runtime";
-import { c as $ } from "../../_virtual/compiler-runtime.js";
-import { useState as z } from "react";
-import D from "../../_virtual/lodash.js";
-import L from "../base/InputTextBase.js";
-import j from "./FileButtonSettings.js";
-import '../../assets/styles/button.css';import '../../assets/styles/file.css';/* empty css                            */
-import w from "../../buttons/Button.js";
-import P from "../../icons/index.js";
-/* empty css                              */
-import T from "../../popover/index.js";
-import V from "../../popover/PopoverText.js";
-const ie = (t) => {
-  const e = $.c(27), {
-    id: I,
-    accept: E,
-    onBtnClickInsert: u,
-    onBtnClickRemove: h,
-    inputRef: v,
-    defaultFiles: A,
-    hint: N,
-    multiple: C,
-    onChange: g
-  } = t, n = I === void 0 ? "file" : I, b = E === void 0 ? "image/*" : E, x = N === void 0 ? "" : N, R = O, [c, S] = z(A), m = c instanceof Array && c.length > 0;
-  let p;
-  e[0] !== g ? (p = (B) => {
-    B.preventDefault?.();
-    const _ = R(B.target.files);
-    S(_), g?.(_, B);
-  }, e[0] = g, e[1] = p) : p = e[1];
-  const F = p;
-  let o;
-  e[2] !== u ? (o = () => u(), e[2] = u, e[3] = o) : o = e[3];
-  let l;
-  e[4] !== n || e[5] !== o ? (l = /* @__PURE__ */ i(j, { id: n, onBtnClickInsert: o }), e[4] = n, e[5] = o, e[6] = l) : l = e[6];
-  let s;
-  e[7] !== c || e[8] !== m || e[9] !== C ? (s = C && /* @__PURE__ */ i("div", { className: `size-position-icon ${m ? "" : "-disabled-popover"}`, children: /* @__PURE__ */ i(T, { iconSize: 16, children: /* @__PURE__ */ k(V, { children: [
-    /* @__PURE__ */ i("strong", { children: "Arquivos" }),
-    /* @__PURE__ */ i("br", {}),
-    m && c.map(U)
-  ] }) }) }), e[7] = c, e[8] = m, e[9] = C, e[10] = s) : s = e[10];
-  const y = !m;
-  let r;
-  e[11] !== h ? (r = () => {
-    h(), S([]);
-  }, e[11] = h, e[12] = r) : r = e[12];
-  let f;
-  e[13] === Symbol.for("react.memo_cache_sentinel") ? (f = /* @__PURE__ */ i(P, { customClass: "colorIconUpload", name: "close" }), e[13] = f) : f = e[13];
-  let a;
-  e[14] !== y || e[15] !== r ? (a = /* @__PURE__ */ i(w, { disabled: y, className: "-pointerEventsRemove", transparent: !0, boxShadow: !1, onClick: r, icon: f }), e[14] = y, e[15] = r, e[16] = a) : a = e[16];
-  let d;
-  return e[17] !== b || e[18] !== F || e[19] !== x || e[20] !== n || e[21] !== v || e[22] !== t || e[23] !== a || e[24] !== l || e[25] !== s ? (d = /* @__PURE__ */ i("div", { className: "input-simple-file-container", children: /* @__PURE__ */ k(L, { ...t, hint: x, readOnlyClass: "-disabledVisualApply", customClassForWrapper: "file-wrapper", customClassForInputContent: "file-content -absolute -pointEventDisabled -disabledVisualApply", type: "file", id: n, accept: b, inputRef: v, onChange: F, rightElements: l, children: [
-    s,
-    a
-  ] }) }), e[17] = b, e[18] = F, e[19] = x, e[20] = n, e[21] = v, e[22] = t, e[23] = a, e[24] = l, e[25] = s, e[26] = d) : d = e[26], d;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
+var _FileButtonSettings = _interopRequireDefault(require("./FileButtonSettings"));
+require("../../assets/styles/file.scss");
+var _buttons = _interopRequireDefault(require("../../buttons"));
+var _icons = _interopRequireDefault(require("../../icons"));
+var _popover = _interopRequireWildcard(require("../../popover"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && {}.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; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const DefaultFile = props => {
+  const {
+    id = 'file',
+    accept = 'image/*',
+    onBtnClickInsert,
+    onBtnClickRemove,
+    inputRef,
+    defaultFiles,
+    hint = '',
+    multiple,
+    onChange
+  } = props;
+  const getFilesList = files => !files?.length ? [] : _lodash.default.map(files, file => file);
+  const [fileList, setFileList] = (0, _react.useState)(defaultFiles);
+  const ifExistFiles = fileList instanceof Array && fileList.length > 0;
+  const handleChange = e => {
+    e.preventDefault?.();
+    const files = getFilesList(e.target.files);
+    setFileList(files);
+    onChange?.(files, e);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "input-simple-file-container"
+  }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    hint: hint,
+    readOnlyClass: "-disabledVisualApply",
+    customClassForWrapper: "file-wrapper",
+    customClassForInputContent: "file-content -absolute -pointEventDisabled -disabledVisualApply",
+    type: "file",
+    id: id,
+    accept: accept,
+    inputRef: inputRef,
+    onChange: handleChange,
+    rightElements: /*#__PURE__*/_react.default.createElement(_FileButtonSettings.default, {
+      id: id,
+      onBtnClickInsert: () => onBtnClickInsert()
+    })
+  }), multiple && /*#__PURE__*/_react.default.createElement("div", {
+    className: `size-position-icon ${!ifExistFiles ? '-disabled-popover' : ''}`
+  }, /*#__PURE__*/_react.default.createElement(_popover.default, {
+    iconSize: 16
+  }, /*#__PURE__*/_react.default.createElement(_popover.PopoverText, null, /*#__PURE__*/_react.default.createElement("strong", null, "Arquivos"), /*#__PURE__*/_react.default.createElement("br", null), ifExistFiles && fileList.map(file => /*#__PURE__*/_react.default.createElement("div", {
+    className: "list-simple-file",
+    key: `${file.name}${file.size}`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "file-name"
+  }, /*#__PURE__*/_react.default.createElement("span", null, file.name))))))), /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    disabled: !ifExistFiles,
+    className: "-pointerEventsRemove",
+    transparent: true,
+    boxShadow: false,
+    onClick: () => {
+      onBtnClickRemove();
+      setFileList([]);
+    },
+    icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+      customClass: "colorIconUpload",
+      name: "close"
+    })
+  })));
 };
-function q(t) {
-  return t;
-}
-function O(t) {
-  return t?.length ? D.map(t, q) : [];
-}
-function U(t) {
-  return /* @__PURE__ */ i("div", { className: "list-simple-file", children: /* @__PURE__ */ i("div", { className: "file-name", children: /* @__PURE__ */ i("span", { children: t.name }) }) }, `${t.name}${t.size}`);
-}
-export {
-  ie as default
-};
-//# sourceMappingURL=DefaultFile.js.map
+var _default = exports.default = DefaultFile;

package/lib/inputs/file/DragDropFile.d.ts

@@ -1,3 +1,13 @@
-import { IDragDropFileProps } from './types';
-declare const DragDropFile: (props: IDragDropFileProps) => import("react/jsx-runtime").JSX.Element;
-export default DragDropFile;
+import { IDragDropFileProps } from './types.js';
+import 'react';
+import '../../@types/Size.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../@types/PermissionAttr.js';
+import '../../tooltip/types.js';
+import '../../@types/Position.js';
+
+declare const DragDropFile: (props: IDragDropFileProps) => JSX.Element;
+
+export { DragDropFile as default };

package/lib/inputs/file/DragDropFile.js

@@ -1,136 +1,272 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { useState as y, Fragment as S } from "react";
-import te from "../../_virtual/lodash.js";
-import "../../_virtual/compiler-runtime.js";
-import "../../buttons/DefaultButton.js";
-import A from "../../icons/index.js";
-import $ from "../../buttons/PrimaryButton.js";
-import q from "../../buttons/DangerButton.js";
-import '../../assets/styles/button.css';/* empty css                              */
-import se from "../base/InputTextBase.js";
-import ae from "../../hint/index.js";
-import { ErrorMessage as re } from "../errorMessage/index.js";
-const z = (n) => n?.length ? te.map(n, (i) => i) : [], f = (n) => n.split(",").map((i) => i.includes(".") ? i.split(".")[1] : i.split("/")[1]).join(", "), ne = (n) => n.split(", "), De = (n) => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _buttons = require("../../buttons");
+var _icons = _interopRequireDefault(require("../../icons"));
+var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
+var _hint = _interopRequireDefault(require("../../hint"));
+var _errorMessage = require("../errorMessage");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && {}.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; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const getFilesList = files => !files?.length ? [] : _lodash.default.map(files, file => file);
+const getAcceptFilesLabel = valueAccept => valueAccept.split(',').map(value => value.includes('.') ? value.split('.')[1] : value.split('/')[1]).join(', ');
+const getAcceptFilesWithoutRemoveText = value => value.split(', ');
+const DragDropFile = props => {
   const {
-    id: i = Math.random().toString(36).substring(2, 7),
-    accept: o = "image/png, image/jpeg",
-    labelButton: C = "Selecionar",
-    subtitleDragDrop: u = "Selecione arquivos do tipo ",
-    titleDragDrop: h = "Arquivo para importação",
-    onBtnClickInsert: T,
-    inputRef: M,
-    onChange: R,
-    onDragEnter: P,
-    onDragOver: U,
-    onDragLeave: I,
-    onDrop: H,
-    showSubtitle: W = !0,
-    multiple: v = !1,
-    hint: k = [],
-    hintPosition: G = "below",
-    errorMessages: J = [],
-    skeletonize: x = !1
-  } = n, [K, F] = y(!1), [r, D] = y([]), [b, B] = y(!1), [m, p] = y({
-    class: "",
-    text: h,
-    subtitle: u + f(o),
-    error: !1
-  }), N = (e) => {
-    e.preventDefault?.(), e.stopPropagation?.();
-  }, Q = (e, s, a) => {
-    B(!1), s.forEach((c) => (!b && e.indexOf(c) === -1 && B(!0), b)), !v && (a.dataTransfer.items.length > 1 || r.length > 0) ? p({
-      class: "disapprovedFile",
-      text: "Não é permitido anexar mais de um arquivo.",
-      subtitle: "",
-      error: !0
-    }) : p(b ? {
-      class: "disapprovedFile",
-      text: "Por favor, verifique a extensão do(s) arquivo(s) inserido(s).",
-      subtitle: `Apenas as extensões ${f(o)} são permitidas.`,
-      error: !0
-    } : {
-      class: "approvedFile",
-      text: h,
-      subtitle: u + f(o),
-      error: !1
+    id = Math.random().toString(36).substring(2, 7),
+    accept = 'image/png, image/jpeg',
+    labelButton = 'Selecionar',
+    subtitleDragDrop = 'Selecione arquivos do tipo ',
+    titleDragDrop = 'Arquivo para importação',
+    onBtnClickInsert,
+    inputRef,
+    onChange,
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    showSubtitle = true,
+    multiple = false,
+    hint = [],
+    hintPosition = 'below',
+    errorMessages = [],
+    skeletonize = false
+  } = props;
+  const [dragActive, setDragActive] = (0, _react.useState)(false);
+  const [fileList, setFileList] = (0, _react.useState)([]);
+  const [typeNotAccept, setTypeNotAccept] = (0, _react.useState)(false);
+  const [message, setMessage] = (0, _react.useState)({
+    class: '',
+    text: titleDragDrop,
+    subtitle: subtitleDragDrop + getAcceptFilesLabel(accept),
+    error: false
+  });
+  const handleDrag = e => {
+    e.preventDefault?.();
+    e.stopPropagation?.();
+  };
+  const checkTypeNotAccept = (types, getTypesArray, e) => {
+    setTypeNotAccept(false);
+    getTypesArray.forEach(element => {
+      if (!typeNotAccept && types.indexOf(element) === -1) {
+        setTypeNotAccept(true);
+      }
+      return typeNotAccept;
+    });
+    if (!multiple && (e.dataTransfer.items.length > 1 || fileList.length > 0)) {
+      setMessage({
+        class: 'disapprovedFile',
+        text: 'Não é permitido anexar mais de um arquivo.',
+        subtitle: '',
+        error: true
+      });
+    } else if (typeNotAccept) {
+      setMessage({
+        class: 'disapprovedFile',
+        text: 'Por favor, verifique a extensão do(s) arquivo(s) inserido(s).',
+        subtitle: `Apenas as extensões ${getAcceptFilesLabel(accept)} são permitidas.`,
+        error: true
+      });
+    } else {
+      setMessage({
+        class: 'approvedFile',
+        text: titleDragDrop,
+        subtitle: subtitleDragDrop + getAcceptFilesLabel(accept),
+        error: false
+      });
+    }
+  };
+  const getTypesFiles = e => {
+    let typesFilesDrag = [];
+    if (e.dataTransfer.items) {
+      Array.from(e.dataTransfer.items).map(item => {
+        if (typesFilesDrag.indexOf(item.type) === -1) {
+          typesFilesDrag = [...typesFilesDrag, item.type];
+        }
+        return typesFilesDrag;
+      });
+    }
+    return typesFilesDrag;
+  };
+  const handleDragEnter = e => {
+    const arrayTypes = getAcceptFilesWithoutRemoveText(accept);
+    const getTypesArray = getTypesFiles(e);
+    checkTypeNotAccept(arrayTypes, getTypesArray, e);
+    handleDrag(e);
+    setDragActive(true);
+    onDragEnter?.(e);
+  };
+  const handleDragLeave = e => {
+    setMessage({
+      class: '',
+      text: titleDragDrop,
+      subtitle: subtitleDragDrop + getAcceptFilesLabel(accept),
+      error: false
     });
-  }, V = (e) => {
-    let s = [];
-    return e.dataTransfer.items && Array.from(e.dataTransfer.items).map((a) => (s.indexOf(a.type) === -1 && (s = [...s, a.type]), s)), s;
-  }, j = (e) => {
-    const s = ne(o), a = V(e);
-    Q(s, a, e), N(e), F(!0), P?.(e);
-  }, O = (e) => {
-    p({
-      class: "",
-      text: h,
-      subtitle: u + f(o),
-      error: !1
-    }), N(e), F(!1), I?.(e);
-  }, w = (e) => {
-    N(e), U?.(e);
-  }, E = (e) => {
-    N(e), F(!1);
-    const s = e.dataTransfer;
-    if (s && !m.error) {
-      const a = z(s.files);
-      if (a.length > 0) {
-        const c = r.concat(a), L = c.map((g) => g.name), d = c.filter(({
-          name: g
-        }, ee) => !L.includes(g, ee + 1));
-        D(d), R?.(a, e), H?.(e);
+    handleDrag(e);
+    setDragActive(false);
+    onDragLeave?.(e);
+  };
+  const handleDragOver = e => {
+    handleDrag(e);
+    onDragOver?.(e);
+  };
+  const handleDrop = e => {
+    handleDrag(e);
+    setDragActive(false);
+    const input = e.dataTransfer;
+    if (input && !message.error) {
+      const files = getFilesList(input.files);
+      if (files.length > 0) {
+        const fileNoRepeat = fileList.concat(files);
+        const ids = fileNoRepeat.map(o => o.name);
+        const filtered = fileNoRepeat.filter((_ref, index) => {
+          let {
+            name
+          } = _ref;
+          return !ids.includes(name, index + 1);
+        });
+        setFileList(filtered);
+        onChange?.(files, e);
+        onDrop?.(e);
       }
     }
-    p({
-      class: "",
-      text: h,
-      subtitle: u + f(o),
-      error: !1
+    setMessage({
+      class: '',
+      text: titleDragDrop,
+      subtitle: subtitleDragDrop + getAcceptFilesLabel(accept),
+      error: false
     });
-  }, X = (e) => {
+  };
+  const handleChange = e => {
     e.preventDefault?.();
-    const s = z(e.target.files);
-    if (s.length > 0 && !b) {
-      const a = r.concat(s), c = a.map((d) => d.name), L = a.filter(({
-        name: d
-      }, g) => !c.includes(d, g + 1));
-      D(L), R?.(s, e);
+    const files = getFilesList(e.target.files);
+    if (files.length > 0 && !typeNotAccept) {
+      const fileNoRepeat = fileList.concat(files);
+      const ids = fileNoRepeat.map(o => o.name);
+      const filesFiltered = fileNoRepeat.filter((_ref2, index) => {
+        let {
+          name
+        } = _ref2;
+        return !ids.includes(name, index + 1);
+      });
+      setFileList(filesFiltered);
+      onChange?.(files, e);
     }
-  }, Y = () => D([]), Z = (e) => {
-    D((s) => s.filter((a) => a.name !== e));
-  }, _ = () => r?.length === 1 ? /* @__PURE__ */ l(S, { children: [
-    r[0].type === "image/jpeg" || r[0].type === "image/png" ? /* @__PURE__ */ t("img", { alt: r[0].name, src: URL.createObjectURL(r[0]) }) : /* @__PURE__ */ t(A, { size: 64, name: "file_excel" }),
-    /* @__PURE__ */ t("div", { className: "image-preview-solo", children: /* @__PURE__ */ t("div", { className: "description-file", children: /* @__PURE__ */ t("span", { className: "subtitle", children: r[0].name }) }) })
-  ] }) : /* @__PURE__ */ t("ul", { className: "file-list", children: r.length > 0 && r.map((e) => /* @__PURE__ */ l("li", { className: "file-card", children: [
-    /* @__PURE__ */ t(q, { transparent: !0, boxShadow: !1, className: "delete-button", onClick: () => Z(e.name), icon: /* @__PURE__ */ t(A, { customClass: "color-icon-upload", name: "close" }) }),
-    /* @__PURE__ */ t("div", { className: "image-content", children: (e.type === "image/jpeg" || e.type === "image/png") && /* @__PURE__ */ t("img", { alt: e.name, className: "image-preview", src: URL.createObjectURL(e) }) }),
-    /* @__PURE__ */ t("div", { className: "description-file", children: /* @__PURE__ */ t("span", { className: "subtitle", children: e.name }) })
-  ] }, `${e.name}${e.size}`)) });
-  return /* @__PURE__ */ l("div", { className: "input-dragdrop-container", onDragEnter: j, onSubmit: (e) => e.preventDefault(), children: [
-    /* @__PURE__ */ l("div", { className: `drag-content ${x ? "-skeletonized" : ""}`, children: [
-      /* @__PURE__ */ t("div", { className: `${m.class} ${x ? "" : "content"}`, children: m.error || r.length === 0 ? /* @__PURE__ */ l("label", { htmlFor: i, children: [
-        /* @__PURE__ */ t("h1", { className: "title", style: {
-          paddingBottom: "20px"
-        }, children: m.text }),
-        W && /* @__PURE__ */ t("p", { className: "subtitle", children: m.subtitle }),
-        !x && /* @__PURE__ */ t($, { onClick: T, label: C })
-      ] }) : /* @__PURE__ */ l(S, { children: [
-        _(),
-        /* @__PURE__ */ l("footer", { className: "footer-button-action", children: [
-          (!v && r.length < 1 || v) && /* @__PURE__ */ t($, { className: "selectButton", onClick: T, label: C }),
-          /* @__PURE__ */ t(q, { className: "cancelButton", onClick: Y, icon: /* @__PURE__ */ t(A, { name: "close", color: "white" }), label: "Limpar" })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ t(se, { ...n, inputRef: M, style: {
-        display: "none"
-      }, type: "file", id: i, accept: o, multiple: v, onDragOver: w, onDrop: E, onDragLeave: O, onChange: X }),
-      K && /* @__PURE__ */ t("div", { className: "drag-position-element", id: "dragFileElement", onDragEnter: j, onDragLeave: O, onDragOver: w, onDrop: E })
-    ] }),
-    /* @__PURE__ */ t(re, { messages: J }),
-    /* @__PURE__ */ t(ae, { visible: !!k && G === "below", customClass: "hint", description: k })
-  ] });
-};
-export {
-  De as default
+  };
+  const onButtonClickRemoveAll = () => setFileList([]);
+  const handleRemoveFile = fileName => {
+    setFileList(prevState => prevState.filter(file => file.name !== fileName));
+  };
+  const generateListArray = () => {
+    if (fileList?.length === 1) {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, fileList[0].type === 'image/jpeg' || fileList[0].type === 'image/png' ? /*#__PURE__*/_react.default.createElement("img", {
+        alt: fileList[0].name,
+        src: URL.createObjectURL(fileList[0])
+      }) : /*#__PURE__*/_react.default.createElement(_icons.default, {
+        size: 64,
+        name: "file_excel"
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: "image-preview-solo"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "description-file"
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: "subtitle"
+      }, fileList[0].name))));
+    }
+    return /*#__PURE__*/_react.default.createElement("ul", {
+      className: "file-list"
+    }, fileList.length > 0 && fileList.map(file => /*#__PURE__*/_react.default.createElement("li", {
+      key: `${file.name}${file.size}`,
+      className: "file-card"
+    }, /*#__PURE__*/_react.default.createElement(_buttons.DangerButton, {
+      transparent: true,
+      boxShadow: false,
+      className: "delete-button",
+      onClick: () => handleRemoveFile(file.name),
+      icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+        customClass: "color-icon-upload",
+        name: "close"
+      })
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "image-content"
+    }, (file.type === 'image/jpeg' || file.type === 'image/png') && /*#__PURE__*/_react.default.createElement("img", {
+      alt: file.name,
+      className: "image-preview",
+      src: URL.createObjectURL(file)
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "description-file"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "subtitle"
+    }, file.name)))));
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "input-dragdrop-container",
+    onDragEnter: handleDragEnter,
+    onSubmit: e => e.preventDefault()
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `drag-content ${skeletonize ? '-skeletonized' : ''}`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${message.class} ${!skeletonize ? 'content' : ''}`
+  }, message.error || fileList.length === 0 ? /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id
+  }, /*#__PURE__*/_react.default.createElement("h1", {
+    className: "title",
+    style: {
+      paddingBottom: '20px'
+    }
+  }, message.text), showSubtitle && /*#__PURE__*/_react.default.createElement("p", {
+    className: "subtitle"
+  }, message.subtitle), !skeletonize && /*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
+    onClick: onBtnClickInsert,
+    label: labelButton
+  })) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, generateListArray(), /*#__PURE__*/_react.default.createElement("footer", {
+    className: "footer-button-action"
+  }, (!multiple && fileList.length < 1 || multiple) && /*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
+    className: "selectButton",
+    onClick: onBtnClickInsert,
+    label: labelButton
+  }), /*#__PURE__*/_react.default.createElement(_buttons.DangerButton, {
+    className: "cancelButton",
+    onClick: onButtonClickRemoveAll,
+    icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+      name: "close",
+      color: "white"
+    }),
+    label: "Limpar"
+  })))), /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    inputRef: inputRef,
+    style: {
+      display: 'none'
+    },
+    type: "file",
+    id: id,
+    accept: accept,
+    multiple: multiple,
+    onDragOver: handleDragOver,
+    onDrop: handleDrop,
+    onDragLeave: handleDragLeave,
+    onChange: handleChange
+  })), dragActive && /*#__PURE__*/_react.default.createElement("div", {
+    className: "drag-position-element",
+    id: "dragFileElement",
+    onDragEnter: handleDragEnter,
+    onDragLeave: handleDragLeave,
+    onDragOver: handleDragOver,
+    onDrop: handleDrop
+  })), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
+    messages: errorMessages
+  }), /*#__PURE__*/_react.default.createElement(_hint.default, {
+    visible: !!hint && hintPosition === 'below',
+    customClass: "hint",
+    description: hint
+  }));
 };
-//# sourceMappingURL=DragDropFile.js.map
+var _default = exports.default = DragDropFile;

package/lib/inputs/file/File.d.ts

@@ -1,3 +1,13 @@
-import { IFileProps } from './types';
-declare const File: ({ applyDragDrop, defaultFiles, gridLayout, onBtnClickRemove: onBtnClickRemoveProp, ...rest }: Omit<IFileProps, "onBtnClickInsert">) => import("react/jsx-runtime").JSX.Element;
-export default File;
+import { IFileProps } from './types.js';
+import 'react';
+import '../../@types/Size.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../@types/PermissionAttr.js';
+import '../../tooltip/types.js';
+import '../../@types/Position.js';
+
+declare const File: ({ applyDragDrop, defaultFiles, gridLayout, onBtnClickRemove: onBtnClickRemoveProp, ...rest }: Omit<IFileProps, 'onBtnClickInsert'>) => JSX.Element;
+
+export { File as default };