@sb1/ffe-file-upload-react 11.0.5 → 11.0.7

package/es/FileItem.js

@@ -1,76 +1,32 @@
 import React from 'react';
 import { Icon } from '@sb1/ffe-icons-react';
-export function FileItem(_ref) {
-  var file = _ref.file,
-    onFileDeleted = _ref.onFileDeleted,
-    cancelText = _ref.cancelText,
-    deleteText = _ref.deleteText;
-  var closeIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtNDM3Ljg0NyAyNzcuMDc2LTIzNC45MjRxLTguMzA3IDguMzA4LTIwLjg4NCA4LjUtMTIuNTc2LjE5My0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NnQ4LjY5My0yMS4wNzZMNDM3Ljg0Ny00ODAgMjM0LjkyNC02ODIuOTI0cS04LjMwOC04LjMwNy04LjUtMjAuODg0LS4xOTMtMTIuNTc2IDguNS0yMS4yNjggOC42OTItOC42OTMgMjEuMDc2LTguNjkzdDIxLjA3NiA4LjY5M0w0ODAtNTIyLjE1M2wyMDIuOTI0LTIwMi45MjNxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDUyMi4xNTMtNDgwbDIwMi45MjMgMjAyLjkyNHE4LjMwOCA4LjMwNyA4LjUgMjAuODg0LjE5MyAxMi41NzYtOC41IDIxLjI2OC04LjY5MiA4LjY5My0yMS4wNzYgOC42OTN0LTIxLjA3Ni04LjY5M0w0ODAtNDM3Ljg0N1oiLz48L3N2Zz4=';
-  var exclamationIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00ODAuMjExLTM4MC40MTNxLTE3LjM2MyAwLTI5LjUzNy0xMi4wMjRUNDM4LjUtNDIxLjkxM3YtMjY0cTAtMTcuNDUyIDExLjk2My0yOS40NzYgMTEuOTY0LTEyLjAyNCAyOS4zMjYtMTIuMDI0IDE3LjM2MyAwIDI5LjUzNyAxMi4wMjR0MTIuMTc0IDI5LjQ3NnYyNjRxMCAxNy40NTItMTEuOTYzIDI5LjQ3Ni0xMS45NjQgMTIuMDI0LTI5LjMyNiAxMi4wMjRabTAgMTQ3LjgyNnEtMTcuMzYzIDAtMjkuNTM3LTExLjk2My0xMi4xNzQtMTEuOTY0LTEyLjE3NC0yOS4zMjYgMC0xNy4zNjMgMTEuOTYzLTI5LjUzNyAxMS45NjQtMTIuMTc0IDI5LjMyNi0xMi4xNzQgMTcuMzYzIDAgMjkuNTM3IDExLjk2M1E1MjEuNS0yOTEuNjYgNTIxLjUtMjc0LjI5N3EwIDE3LjM2Mi0xMS45NjMgMjkuNTM2LTExLjk2NCAxMi4xNzQtMjkuMzI2IDEyLjE3NFoiLz48L3N2Zz4=';
-  return /*#__PURE__*/React.createElement("li", null,
-  // File is loading
-  !file.document && !file.error && /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__file-item-stencil"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    id: file.name,
-    className: "ffe-file-upload__file-item-delete-button",
-    onClick: onFileDeleted
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "ffe-file-upload__file-item-delete-button-text"
-  }, cancelText), /*#__PURE__*/React.createElement(Icon, {
-    fileUrl: closeIcon,
-    size: "md",
-    className: "ffe-file-upload__file-item-delete-icon"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__file-item-stencil-info"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__file-item-stencil-info-background"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__file-item-stencil-info-filename"
-  }, file.name))),
-  // File finished loading without error
-  file.document && !file.error && /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__file-item-loaded"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    id: file.name,
-    className: "ffe-file-upload__file-item-delete-button",
-    onClick: onFileDeleted
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "ffe-file-upload__file-item-delete-button-text"
-  }, deleteText), /*#__PURE__*/React.createElement(Icon, {
-    fileUrl: closeIcon,
-    size: "md",
-    className: "ffe-file-upload__file-item-delete-icon"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__file-item-filename"
-  }, file.name)),
-  // File has error
-  file.error && /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__file-item-error",
-    role: "alert"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__file-item-error-icon"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    fileUrl: exclamationIcon,
-    size: "sm"
-  })), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    id: file.name,
-    className: "ffe-file-upload__file-item-delete-button",
-    onClick: onFileDeleted
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "ffe-file-upload__file-item-delete-button-text"
-  }, deleteText), /*#__PURE__*/React.createElement(Icon, {
-    fileUrl: closeIcon,
-    size: "md",
-    className: "ffe-file-upload__file-item-delete-icon"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__file-item-error-info"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__file-item-error-filename"
-  }, file.name), /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__file-item-error-message"
-  }, file.error))));
-}
+export function FileItem(_a) {
+    var file = _a.file, onFileDeleted = _a.onFileDeleted, cancelText = _a.cancelText, deleteText = _a.deleteText;
+    var closeIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtNDM3Ljg0NyAyNzcuMDc2LTIzNC45MjRxLTguMzA3IDguMzA4LTIwLjg4NCA4LjUtMTIuNTc2LjE5My0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NnQ4LjY5My0yMS4wNzZMNDM3Ljg0Ny00ODAgMjM0LjkyNC02ODIuOTI0cS04LjMwOC04LjMwNy04LjUtMjAuODg0LS4xOTMtMTIuNTc2IDguNS0yMS4yNjggOC42OTItOC42OTMgMjEuMDc2LTguNjkzdDIxLjA3NiA4LjY5M0w0ODAtNTIyLjE1M2wyMDIuOTI0LTIwMi45MjNxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDUyMi4xNTMtNDgwbDIwMi45MjMgMjAyLjkyNHE4LjMwOCA4LjMwNyA4LjUgMjAuODg0LjE5MyAxMi41NzYtOC41IDIxLjI2OC04LjY5MiA4LjY5My0yMS4wNzYgOC42OTN0LTIxLjA3Ni04LjY5M0w0ODAtNDM3Ljg0N1oiLz48L3N2Zz4=';
+    var exclamationIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00ODAuMjExLTM4MC40MTNxLTE3LjM2MyAwLTI5LjUzNy0xMi4wMjRUNDM4LjUtNDIxLjkxM3YtMjY0cTAtMTcuNDUyIDExLjk2My0yOS40NzYgMTEuOTY0LTEyLjAyNCAyOS4zMjYtMTIuMDI0IDE3LjM2MyAwIDI5LjUzNyAxMi4wMjR0MTIuMTc0IDI5LjQ3NnYyNjRxMCAxNy40NTItMTEuOTYzIDI5LjQ3Ni0xMS45NjQgMTIuMDI0LTI5LjMyNiAxMi4wMjRabTAgMTQ3LjgyNnEtMTcuMzYzIDAtMjkuNTM3LTExLjk2My0xMi4xNzQtMTEuOTY0LTEyLjE3NC0yOS4zMjYgMC0xNy4zNjMgMTEuOTYzLTI5LjUzNyAxMS45NjQtMTIuMTc0IDI5LjMyNi0xMi4xNzQgMTcuMzYzIDAgMjkuNTM3IDExLjk2M1E1MjEuNS0yOTEuNjYgNTIxLjUtMjc0LjI5N3EwIDE3LjM2Mi0xMS45NjMgMjkuNTM2LTExLjk2NCAxMi4xNzQtMjkuMzI2IDEyLjE3NFoiLz48L3N2Zz4=';
+    return (React.createElement("li", null,
+        // File is loading
+        !file.document && !file.error && (React.createElement("div", { className: "ffe-file-upload__file-item-stencil" },
+            React.createElement("button", { type: "button", id: file.name, className: "ffe-file-upload__file-item-delete-button", onClick: onFileDeleted },
+                React.createElement("span", { className: "ffe-file-upload__file-item-delete-button-text" }, cancelText),
+                React.createElement(Icon, { fileUrl: closeIcon, size: "md", className: "ffe-file-upload__file-item-delete-icon" })),
+            React.createElement("div", { className: "ffe-file-upload__file-item-stencil-info" },
+                React.createElement("div", { className: "ffe-file-upload__file-item-stencil-info-background" }),
+                React.createElement("div", { className: "ffe-file-upload__file-item-stencil-info-filename" }, file.name)))),
+        // File finished loading without error
+        file.document && !file.error && (React.createElement("div", { className: "ffe-file-upload__file-item-loaded" },
+            React.createElement("button", { type: "button", id: file.name, className: "ffe-file-upload__file-item-delete-button", onClick: onFileDeleted },
+                React.createElement("span", { className: "ffe-file-upload__file-item-delete-button-text" }, deleteText),
+                React.createElement(Icon, { fileUrl: closeIcon, size: "md", className: "ffe-file-upload__file-item-delete-icon" })),
+            React.createElement("div", { className: "ffe-file-upload__file-item-filename" }, file.name))),
+        // File has error
+        file.error && (React.createElement("div", { className: "ffe-file-upload__file-item-error", role: "alert" },
+            React.createElement("div", { className: "ffe-file-upload__file-item-error-icon" },
+                React.createElement(Icon, { fileUrl: exclamationIcon, size: "sm" })),
+            React.createElement("button", { type: "button", id: file.name, className: "ffe-file-upload__file-item-delete-button", onClick: onFileDeleted },
+                React.createElement("span", { className: "ffe-file-upload__file-item-delete-button-text" }, deleteText),
+                React.createElement(Icon, { fileUrl: closeIcon, size: "md", className: "ffe-file-upload__file-item-delete-icon" })),
+            React.createElement("div", { className: "ffe-file-upload__file-item-error-info" },
+                React.createElement("div", { className: "ffe-file-upload__file-item-error-filename" }, file.name),
+                React.createElement("div", { className: "ffe-file-upload__file-item-error-message" }, file.error))))));
+}

package/es/FileUpload.js

@@ -1,112 +1,47 @@
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React, { useRef, useState } from 'react';
 import { FileItem } from './FileItem';
 import classNames from 'classnames';
 import { SecondaryButton } from '@sb1/ffe-buttons-react';
 import { Icon } from '@sb1/ffe-icons-react';
-export function FileUpload(_ref) {
-  var id = _ref.id,
-    label = _ref.label,
-    files = _ref.files,
-    cancelText = _ref.cancelText,
-    deleteText = _ref.deleteText,
-    multiple = _ref.multiple,
-    title = _ref.title,
-    infoText = _ref.infoText,
-    infoSubText = _ref.infoSubText,
-    uploadTitle = _ref.uploadTitle,
-    uploadMicroText = _ref.uploadMicroText,
-    uploadSubText = _ref.uploadSubText,
-    accept = _ref.accept,
-    onFilesDropped = _ref.onFilesDropped,
-    onFileDeleted = _ref.onFileDeleted,
-    onFilesSelected = _ref.onFilesSelected;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isHover = _useState2[0],
-    setIsHover = _useState2[1];
-  var fileInputElement = useRef(null);
-  var downloadIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuOC0zNTcuNTM5cS02LjQzMSAwLTExLjk2MS0yLjMwOC01LjUzMS0yLjMwNy0xMC4xNDYtNi45MjNMMzM1LjMwOS00ODkuMTUzcS03LjkyMy03LjgzMi03LjgwNy0xOC4zMzguMTE1LTEwLjUwNyA4LjMyOS0xOC44MTUgOC43ODYtOC4zMDcgMTguODYyLTguMTE1IDEwLjA3Ny4xOTIgMTguMzg1IDguNWw4MC45MjMgODEuOTIzdi0zMjYuMDAxcTAtMTEuMDY5IDcuNDA0LTE4LjUzNCA3LjQwNS03LjQ2NiAxOC4zODQtNy40NjYgMTAuOTggMCAxOC41OTUgNy40NjYgNy42MTUgNy40NjUgNy42MTUgMTguNTM0djMyNi4wMDFsODEuOTIzLTgxLjkyM3E3LjU5LTcuOTIzIDE4LjAyNi03LjgwOCAxMC40MzUuMTE2IDE5LjIyMSA4LjQyMyA4LjIxNCA4LjMwOCA4LjAyMSAxOC41NzctLjE5MiAxMC4yNjktOC40OTkgMTguNTc2TDUwMi4zMDctMzY2Ljc3cS01LjAxNSA0LjYxNi0xMC41NDYgNi45MjMtNS41MyAyLjMwOC0xMS45NjEgMi4zMDhaTTI3Ni4wMjUtMjEyLjAwMXEtMjcuMDI0IDAtNDUuNTI0LTE4LjY1dC0xOC41LTQ1LjY1OHYtMzQuNDYxcTAtMTEuMDY5IDcuNDA1LTE4LjUzNCA3LjQwNS03LjQ2NSAxOC4zODQtNy40NjUgMTAuOTggMCAxOC41OTUgNy40NjVRMjY0LTMyMS44MzkgMjY0LTMxMC43N3YzNC40NjFxMCA0LjYxNiAzLjg0NiA4LjQ2MyAzLjg0NyAzLjg0NiA4LjQ2MyAzLjg0Nmg0MDcuMzgycTQuNjE2IDAgOC40NjMtMy44NDYgMy44NDYtMy44NDcgMy44NDYtOC40NjN2LTM0LjQ2MXEwLTExLjA2OSA3LjQwNS0xOC41MzQgNy40MDQtNy40NjUgMTguMzg0LTcuNDY1IDEwLjk3OSAwIDE4LjU5NCA3LjQ2NSA3LjYxNiA3LjQ2NSA3LjYxNiAxOC41MzR2MzQuNDYxcTAgMjcuMDA4LTE4LjY2MiA0NS42NTgtMTguNjYyIDE4LjY1LTQ1LjY4NiAxOC42NUgyNzYuMDI1WiIvPjwvc3ZnPg==';
-  var handleFilesDropped = function handleFilesDropped(event) {
-    event.preventDefault();
-    setIsHover(false);
-    onFilesDropped(event.dataTransfer.files);
-  };
-  var handleFileDeleted = function handleFileDeleted(event) {
-    onFileDeleted(files[event.currentTarget.id]);
-  };
-  var triggerUploadFileNativeHandler = function triggerUploadFileNativeHandler() {
-    // clear file input to trigger onChange when uploading same filename
-    if (fileInputElement.current) {
-      fileInputElement.current.value = '';
-      fileInputElement.current.click();
-    }
-  };
-  var handleFileSelected = function handleFileSelected(event) {
-    onFilesSelected(event.target.files);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__title"
-  }, title), Object.keys(files).length > 0 ? /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__file-items-section"
-  }, Object.keys(files).map(function (file) {
-    return /*#__PURE__*/React.createElement(FileItem, {
-      key: file,
-      file: files[file],
-      cancelText: cancelText,
-      deleteText: deleteText,
-      onFileDeleted: handleFileDeleted
-    });
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__info-section"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__info-section-text"
-  }, infoText), /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__info-section-subtext"
-  }, infoSubText)), /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__upload-section",
-    role: "presentation",
-    onDrop: handleFilesDropped,
-    onDragOver: function onDragOver(event) {
-      event.preventDefault();
-      setIsHover(true);
-    },
-    onDragLeave: function onDragLeave() {
-      return setIsHover(false);
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames('ffe-file-upload__upload-section-border', {
-      'ffe-file-upload__upload-section-border--hover': isHover
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__upload-section-title"
-  }, uploadTitle), /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__upload-section-microtext"
-  }, uploadMicroText), /*#__PURE__*/React.createElement(SecondaryButton, {
-    leftIcon: /*#__PURE__*/React.createElement(Icon, {
-      fileUrl: downloadIcon,
-      size: "sm"
-    }),
-    onClick: triggerUploadFileNativeHandler,
-    id: "".concat(id, "-button")
-  }, /*#__PURE__*/React.createElement("span", {
-    id: "".concat(id, "-label")
-  }, label)), /*#__PURE__*/React.createElement("div", {
-    className: "ffe-file-upload__upload-section-subtext"
-  }, uploadSubText))), /*#__PURE__*/React.createElement("input", {
-    id: id,
-    type: "file",
-    multiple: multiple,
-    ref: fileInputElement,
-    onChange: handleFileSelected,
-    "aria-labelledby": "".concat(id, "-label"),
-    accept: accept || '*'
-  }));
-}
+export function FileUpload(_a) {
+    var id = _a.id, label = _a.label, files = _a.files, cancelText = _a.cancelText, deleteText = _a.deleteText, multiple = _a.multiple, title = _a.title, infoText = _a.infoText, infoSubText = _a.infoSubText, uploadTitle = _a.uploadTitle, uploadMicroText = _a.uploadMicroText, uploadSubText = _a.uploadSubText, accept = _a.accept, onFilesDropped = _a.onFilesDropped, onFileDeleted = _a.onFileDeleted, onFilesSelected = _a.onFilesSelected;
+    var _b = useState(false), isHover = _b[0], setIsHover = _b[1];
+    var fileInputElement = useRef(null);
+    var downloadIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuOC0zNTcuNTM5cS02LjQzMSAwLTExLjk2MS0yLjMwOC01LjUzMS0yLjMwNy0xMC4xNDYtNi45MjNMMzM1LjMwOS00ODkuMTUzcS03LjkyMy03LjgzMi03LjgwNy0xOC4zMzguMTE1LTEwLjUwNyA4LjMyOS0xOC44MTUgOC43ODYtOC4zMDcgMTguODYyLTguMTE1IDEwLjA3Ny4xOTIgMTguMzg1IDguNWw4MC45MjMgODEuOTIzdi0zMjYuMDAxcTAtMTEuMDY5IDcuNDA0LTE4LjUzNCA3LjQwNS03LjQ2NiAxOC4zODQtNy40NjYgMTAuOTggMCAxOC41OTUgNy40NjYgNy42MTUgNy40NjUgNy42MTUgMTguNTM0djMyNi4wMDFsODEuOTIzLTgxLjkyM3E3LjU5LTcuOTIzIDE4LjAyNi03LjgwOCAxMC40MzUuMTE2IDE5LjIyMSA4LjQyMyA4LjIxNCA4LjMwOCA4LjAyMSAxOC41NzctLjE5MiAxMC4yNjktOC40OTkgMTguNTc2TDUwMi4zMDctMzY2Ljc3cS01LjAxNSA0LjYxNi0xMC41NDYgNi45MjMtNS41MyAyLjMwOC0xMS45NjEgMi4zMDhaTTI3Ni4wMjUtMjEyLjAwMXEtMjcuMDI0IDAtNDUuNTI0LTE4LjY1dC0xOC41LTQ1LjY1OHYtMzQuNDYxcTAtMTEuMDY5IDcuNDA1LTE4LjUzNCA3LjQwNS03LjQ2NSAxOC4zODQtNy40NjUgMTAuOTggMCAxOC41OTUgNy40NjVRMjY0LTMyMS44MzkgMjY0LTMxMC43N3YzNC40NjFxMCA0LjYxNiAzLjg0NiA4LjQ2MyAzLjg0NyAzLjg0NiA4LjQ2MyAzLjg0Nmg0MDcuMzgycTQuNjE2IDAgOC40NjMtMy44NDYgMy44NDYtMy44NDcgMy44NDYtOC40NjN2LTM0LjQ2MXEwLTExLjA2OSA3LjQwNS0xOC41MzQgNy40MDQtNy40NjUgMTguMzg0LTcuNDY1IDEwLjk3OSAwIDE4LjU5NCA3LjQ2NSA3LjYxNiA3LjQ2NSA3LjYxNiAxOC41MzR2MzQuNDYxcTAgMjcuMDA4LTE4LjY2MiA0NS42NTgtMTguNjYyIDE4LjY1LTQ1LjY4NiAxOC42NUgyNzYuMDI1WiIvPjwvc3ZnPg==';
+    var handleFilesDropped = function (event) {
+        event.preventDefault();
+        setIsHover(false);
+        onFilesDropped(event.dataTransfer.files);
+    };
+    var handleFileDeleted = function (event) {
+        onFileDeleted(files[event.currentTarget.id]);
+    };
+    var triggerUploadFileNativeHandler = function () {
+        // clear file input to trigger onChange when uploading same filename
+        if (fileInputElement.current) {
+            fileInputElement.current.value = '';
+            fileInputElement.current.click();
+        }
+    };
+    var handleFileSelected = function (event) {
+        onFilesSelected(event.target.files);
+    };
+    return (React.createElement("div", { className: "ffe-file-upload" },
+        React.createElement("div", { className: "ffe-file-upload__title" }, title),
+        Object.keys(files).length > 0 ? (React.createElement("div", { className: "ffe-file-upload__file-items-section" }, Object.keys(files).map(function (file) { return (React.createElement(FileItem, { key: file, file: files[file], cancelText: cancelText, deleteText: deleteText, onFileDeleted: handleFileDeleted })); }))) : (React.createElement("div", { className: "ffe-file-upload__info-section" },
+            React.createElement("div", { className: "ffe-file-upload__info-section-text" }, infoText),
+            React.createElement("div", { className: "ffe-file-upload__info-section-subtext" }, infoSubText))),
+        React.createElement("div", { className: "ffe-file-upload__upload-section", role: "presentation", onDrop: handleFilesDropped, onDragOver: function (event) {
+                event.preventDefault();
+                setIsHover(true);
+            }, onDragLeave: function () { return setIsHover(false); } },
+            React.createElement("div", { className: classNames('ffe-file-upload__upload-section-border', {
+                    'ffe-file-upload__upload-section-border--hover': isHover,
+                }) },
+                React.createElement("div", { className: "ffe-file-upload__upload-section-title" }, uploadTitle),
+                React.createElement("div", { className: "ffe-file-upload__upload-section-microtext" }, uploadMicroText),
+                React.createElement(SecondaryButton, { leftIcon: React.createElement(Icon, { fileUrl: downloadIcon, size: "sm" }), onClick: triggerUploadFileNativeHandler, id: "".concat(id, "-button") },
+                    React.createElement("span", { id: "".concat(id, "-label") }, label)),
+                React.createElement("div", { className: "ffe-file-upload__upload-section-subtext" }, uploadSubText))),
+        React.createElement("input", { id: id, type: "file", multiple: multiple, ref: fileInputElement, onChange: handleFileSelected, "aria-labelledby": "".concat(id, "-label"), accept: accept || '*' })));
+}

package/es/getFileContent.js

@@ -1,12 +1,10 @@
-export var getFileContent = function getFileContent(file) {
-  return new Promise(function (resolve, reject) {
-    var reader = new window.FileReader();
-    reader.onload = function (event) {
-      return resolve(event.target ? event.target.result : null);
-    };
-    reader.onerror = function (error) {
-      return reject(error);
-    };
-    reader.readAsDataURL(file);
-  });
-};
+export var getFileContent = function (file) {
+    return new Promise(function (resolve, reject) {
+        var reader = new window.FileReader();
+        reader.onload = function (event) {
+            return resolve(event.target ? event.target.result : null);
+        };
+        reader.onerror = function (error) { return reject(error); };
+        reader.readAsDataURL(file);
+    });
+};

package/es/index.js

@@ -1,2 +1,2 @@
-export { FileUpload, FileUploadProps } from './FileUpload';
-export { getFileContent } from './getFileContent';
+export { FileUpload } from './FileUpload';
+export { getFileContent } from './getFileContent';

package/lib/FileItem.js

@@ -1,83 +1,39 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileItem = void 0;
+var react_1 = __importDefault(require("react"));
+var ffe_icons_react_1 = require("@sb1/ffe-icons-react");
+function FileItem(_a) {
+    var file = _a.file, onFileDeleted = _a.onFileDeleted, cancelText = _a.cancelText, deleteText = _a.deleteText;
+    var closeIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtNDM3Ljg0NyAyNzcuMDc2LTIzNC45MjRxLTguMzA3IDguMzA4LTIwLjg4NCA4LjUtMTIuNTc2LjE5My0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NnQ4LjY5My0yMS4wNzZMNDM3Ljg0Ny00ODAgMjM0LjkyNC02ODIuOTI0cS04LjMwOC04LjMwNy04LjUtMjAuODg0LS4xOTMtMTIuNTc2IDguNS0yMS4yNjggOC42OTItOC42OTMgMjEuMDc2LTguNjkzdDIxLjA3NiA4LjY5M0w0ODAtNTIyLjE1M2wyMDIuOTI0LTIwMi45MjNxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDUyMi4xNTMtNDgwbDIwMi45MjMgMjAyLjkyNHE4LjMwOCA4LjMwNyA4LjUgMjAuODg0LjE5MyAxMi41NzYtOC41IDIxLjI2OC04LjY5MiA4LjY5My0yMS4wNzYgOC42OTN0LTIxLjA3Ni04LjY5M0w0ODAtNDM3Ljg0N1oiLz48L3N2Zz4=';
+    var exclamationIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00ODAuMjExLTM4MC40MTNxLTE3LjM2MyAwLTI5LjUzNy0xMi4wMjRUNDM4LjUtNDIxLjkxM3YtMjY0cTAtMTcuNDUyIDExLjk2My0yOS40NzYgMTEuOTY0LTEyLjAyNCAyOS4zMjYtMTIuMDI0IDE3LjM2MyAwIDI5LjUzNyAxMi4wMjR0MTIuMTc0IDI5LjQ3NnYyNjRxMCAxNy40NTItMTEuOTYzIDI5LjQ3Ni0xMS45NjQgMTIuMDI0LTI5LjMyNiAxMi4wMjRabTAgMTQ3LjgyNnEtMTcuMzYzIDAtMjkuNTM3LTExLjk2My0xMi4xNzQtMTEuOTY0LTEyLjE3NC0yOS4zMjYgMC0xNy4zNjMgMTEuOTYzLTI5LjUzNyAxMS45NjQtMTIuMTc0IDI5LjMyNi0xMi4xNzQgMTcuMzYzIDAgMjkuNTM3IDExLjk2M1E1MjEuNS0yOTEuNjYgNTIxLjUtMjc0LjI5N3EwIDE3LjM2Mi0xMS45NjMgMjkuNTM2LTExLjk2NCAxMi4xNzQtMjkuMzI2IDEyLjE3NFoiLz48L3N2Zz4=';
+    return (react_1.default.createElement("li", null,
+        // File is loading
+        !file.document && !file.error && (react_1.default.createElement("div", { className: "ffe-file-upload__file-item-stencil" },
+            react_1.default.createElement("button", { type: "button", id: file.name, className: "ffe-file-upload__file-item-delete-button", onClick: onFileDeleted },
+                react_1.default.createElement("span", { className: "ffe-file-upload__file-item-delete-button-text" }, cancelText),
+                react_1.default.createElement(ffe_icons_react_1.Icon, { fileUrl: closeIcon, size: "md", className: "ffe-file-upload__file-item-delete-icon" })),
+            react_1.default.createElement("div", { className: "ffe-file-upload__file-item-stencil-info" },
+                react_1.default.createElement("div", { className: "ffe-file-upload__file-item-stencil-info-background" }),
+                react_1.default.createElement("div", { className: "ffe-file-upload__file-item-stencil-info-filename" }, file.name)))),
+        // File finished loading without error
+        file.document && !file.error && (react_1.default.createElement("div", { className: "ffe-file-upload__file-item-loaded" },
+            react_1.default.createElement("button", { type: "button", id: file.name, className: "ffe-file-upload__file-item-delete-button", onClick: onFileDeleted },
+                react_1.default.createElement("span", { className: "ffe-file-upload__file-item-delete-button-text" }, deleteText),
+                react_1.default.createElement(ffe_icons_react_1.Icon, { fileUrl: closeIcon, size: "md", className: "ffe-file-upload__file-item-delete-icon" })),
+            react_1.default.createElement("div", { className: "ffe-file-upload__file-item-filename" }, file.name))),
+        // File has error
+        file.error && (react_1.default.createElement("div", { className: "ffe-file-upload__file-item-error", role: "alert" },
+            react_1.default.createElement("div", { className: "ffe-file-upload__file-item-error-icon" },
+                react_1.default.createElement(ffe_icons_react_1.Icon, { fileUrl: exclamationIcon, size: "sm" })),
+            react_1.default.createElement("button", { type: "button", id: file.name, className: "ffe-file-upload__file-item-delete-button", onClick: onFileDeleted },
+                react_1.default.createElement("span", { className: "ffe-file-upload__file-item-delete-button-text" }, deleteText),
+                react_1.default.createElement(ffe_icons_react_1.Icon, { fileUrl: closeIcon, size: "md", className: "ffe-file-upload__file-item-delete-icon" })),
+            react_1.default.createElement("div", { className: "ffe-file-upload__file-item-error-info" },
+                react_1.default.createElement("div", { className: "ffe-file-upload__file-item-error-filename" }, file.name),
+                react_1.default.createElement("div", { className: "ffe-file-upload__file-item-error-message" }, file.error))))));
+}
 exports.FileItem = FileItem;
-var _react = _interopRequireDefault(require("react"));
-var _ffeIconsReact = require("@sb1/ffe-icons-react");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function FileItem(_ref) {
-  var file = _ref.file,
-    onFileDeleted = _ref.onFileDeleted,
-    cancelText = _ref.cancelText,
-    deleteText = _ref.deleteText;
-  var closeIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtNDM3Ljg0NyAyNzcuMDc2LTIzNC45MjRxLTguMzA3IDguMzA4LTIwLjg4NCA4LjUtMTIuNTc2LjE5My0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NnQ4LjY5My0yMS4wNzZMNDM3Ljg0Ny00ODAgMjM0LjkyNC02ODIuOTI0cS04LjMwOC04LjMwNy04LjUtMjAuODg0LS4xOTMtMTIuNTc2IDguNS0yMS4yNjggOC42OTItOC42OTMgMjEuMDc2LTguNjkzdDIxLjA3NiA4LjY5M0w0ODAtNTIyLjE1M2wyMDIuOTI0LTIwMi45MjNxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDUyMi4xNTMtNDgwbDIwMi45MjMgMjAyLjkyNHE4LjMwOCA4LjMwNyA4LjUgMjAuODg0LjE5MyAxMi41NzYtOC41IDIxLjI2OC04LjY5MiA4LjY5My0yMS4wNzYgOC42OTN0LTIxLjA3Ni04LjY5M0w0ODAtNDM3Ljg0N1oiLz48L3N2Zz4=';
-  var exclamationIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00ODAuMjExLTM4MC40MTNxLTE3LjM2MyAwLTI5LjUzNy0xMi4wMjRUNDM4LjUtNDIxLjkxM3YtMjY0cTAtMTcuNDUyIDExLjk2My0yOS40NzYgMTEuOTY0LTEyLjAyNCAyOS4zMjYtMTIuMDI0IDE3LjM2MyAwIDI5LjUzNyAxMi4wMjR0MTIuMTc0IDI5LjQ3NnYyNjRxMCAxNy40NTItMTEuOTYzIDI5LjQ3Ni0xMS45NjQgMTIuMDI0LTI5LjMyNiAxMi4wMjRabTAgMTQ3LjgyNnEtMTcuMzYzIDAtMjkuNTM3LTExLjk2My0xMi4xNzQtMTEuOTY0LTEyLjE3NC0yOS4zMjYgMC0xNy4zNjMgMTEuOTYzLTI5LjUzNyAxMS45NjQtMTIuMTc0IDI5LjMyNi0xMi4xNzQgMTcuMzYzIDAgMjkuNTM3IDExLjk2M1E1MjEuNS0yOTEuNjYgNTIxLjUtMjc0LjI5N3EwIDE3LjM2Mi0xMS45NjMgMjkuNTM2LTExLjk2NCAxMi4xNzQtMjkuMzI2IDEyLjE3NFoiLz48L3N2Zz4=';
-  return /*#__PURE__*/_react.default.createElement("li", null,
-  // File is loading
-  !file.document && !file.error && /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__file-item-stencil"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    id: file.name,
-    className: "ffe-file-upload__file-item-delete-button",
-    onClick: onFileDeleted
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "ffe-file-upload__file-item-delete-button-text"
-  }, cancelText), /*#__PURE__*/_react.default.createElement(_ffeIconsReact.Icon, {
-    fileUrl: closeIcon,
-    size: "md",
-    className: "ffe-file-upload__file-item-delete-icon"
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__file-item-stencil-info"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__file-item-stencil-info-background"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__file-item-stencil-info-filename"
-  }, file.name))),
-  // File finished loading without error
-  file.document && !file.error && /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__file-item-loaded"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    id: file.name,
-    className: "ffe-file-upload__file-item-delete-button",
-    onClick: onFileDeleted
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "ffe-file-upload__file-item-delete-button-text"
-  }, deleteText), /*#__PURE__*/_react.default.createElement(_ffeIconsReact.Icon, {
-    fileUrl: closeIcon,
-    size: "md",
-    className: "ffe-file-upload__file-item-delete-icon"
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__file-item-filename"
-  }, file.name)),
-  // File has error
-  file.error && /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__file-item-error",
-    role: "alert"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__file-item-error-icon"
-  }, /*#__PURE__*/_react.default.createElement(_ffeIconsReact.Icon, {
-    fileUrl: exclamationIcon,
-    size: "sm"
-  })), /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    id: file.name,
-    className: "ffe-file-upload__file-item-delete-button",
-    onClick: onFileDeleted
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "ffe-file-upload__file-item-delete-button-text"
-  }, deleteText), /*#__PURE__*/_react.default.createElement(_ffeIconsReact.Icon, {
-    fileUrl: closeIcon,
-    size: "md",
-    className: "ffe-file-upload__file-item-delete-icon"
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__file-item-error-info"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__file-item-error-filename"
-  }, file.name), /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__file-item-error-message"
-  }, file.error))));
-}

package/lib/FileUpload.js

@@ -1,122 +1,77 @@
 "use strict";
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUpload = void 0;
+var react_1 = __importStar(require("react"));
+var FileItem_1 = require("./FileItem");
+var classnames_1 = __importDefault(require("classnames"));
+var ffe_buttons_react_1 = require("@sb1/ffe-buttons-react");
+var ffe_icons_react_1 = require("@sb1/ffe-icons-react");
+function FileUpload(_a) {
+    var id = _a.id, label = _a.label, files = _a.files, cancelText = _a.cancelText, deleteText = _a.deleteText, multiple = _a.multiple, title = _a.title, infoText = _a.infoText, infoSubText = _a.infoSubText, uploadTitle = _a.uploadTitle, uploadMicroText = _a.uploadMicroText, uploadSubText = _a.uploadSubText, accept = _a.accept, onFilesDropped = _a.onFilesDropped, onFileDeleted = _a.onFileDeleted, onFilesSelected = _a.onFilesSelected;
+    var _b = (0, react_1.useState)(false), isHover = _b[0], setIsHover = _b[1];
+    var fileInputElement = (0, react_1.useRef)(null);
+    var downloadIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuOC0zNTcuNTM5cS02LjQzMSAwLTExLjk2MS0yLjMwOC01LjUzMS0yLjMwNy0xMC4xNDYtNi45MjNMMzM1LjMwOS00ODkuMTUzcS03LjkyMy03LjgzMi03LjgwNy0xOC4zMzguMTE1LTEwLjUwNyA4LjMyOS0xOC44MTUgOC43ODYtOC4zMDcgMTguODYyLTguMTE1IDEwLjA3Ny4xOTIgMTguMzg1IDguNWw4MC45MjMgODEuOTIzdi0zMjYuMDAxcTAtMTEuMDY5IDcuNDA0LTE4LjUzNCA3LjQwNS03LjQ2NiAxOC4zODQtNy40NjYgMTAuOTggMCAxOC41OTUgNy40NjYgNy42MTUgNy40NjUgNy42MTUgMTguNTM0djMyNi4wMDFsODEuOTIzLTgxLjkyM3E3LjU5LTcuOTIzIDE4LjAyNi03LjgwOCAxMC40MzUuMTE2IDE5LjIyMSA4LjQyMyA4LjIxNCA4LjMwOCA4LjAyMSAxOC41NzctLjE5MiAxMC4yNjktOC40OTkgMTguNTc2TDUwMi4zMDctMzY2Ljc3cS01LjAxNSA0LjYxNi0xMC41NDYgNi45MjMtNS41MyAyLjMwOC0xMS45NjEgMi4zMDhaTTI3Ni4wMjUtMjEyLjAwMXEtMjcuMDI0IDAtNDUuNTI0LTE4LjY1dC0xOC41LTQ1LjY1OHYtMzQuNDYxcTAtMTEuMDY5IDcuNDA1LTE4LjUzNCA3LjQwNS03LjQ2NSAxOC4zODQtNy40NjUgMTAuOTggMCAxOC41OTUgNy40NjVRMjY0LTMyMS44MzkgMjY0LTMxMC43N3YzNC40NjFxMCA0LjYxNiAzLjg0NiA4LjQ2MyAzLjg0NyAzLjg0NiA4LjQ2MyAzLjg0Nmg0MDcuMzgycTQuNjE2IDAgOC40NjMtMy44NDYgMy44NDYtMy44NDcgMy44NDYtOC40NjN2LTM0LjQ2MXEwLTExLjA2OSA3LjQwNS0xOC41MzQgNy40MDQtNy40NjUgMTguMzg0LTcuNDY1IDEwLjk3OSAwIDE4LjU5NCA3LjQ2NSA3LjYxNiA3LjQ2NSA3LjYxNiAxOC41MzR2MzQuNDYxcTAgMjcuMDA4LTE4LjY2MiA0NS42NTgtMTguNjYyIDE4LjY1LTQ1LjY4NiAxOC42NUgyNzYuMDI1WiIvPjwvc3ZnPg==';
+    var handleFilesDropped = function (event) {
+        event.preventDefault();
+        setIsHover(false);
+        onFilesDropped(event.dataTransfer.files);
+    };
+    var handleFileDeleted = function (event) {
+        onFileDeleted(files[event.currentTarget.id]);
+    };
+    var triggerUploadFileNativeHandler = function () {
+        // clear file input to trigger onChange when uploading same filename
+        if (fileInputElement.current) {
+            fileInputElement.current.value = '';
+            fileInputElement.current.click();
+        }
+    };
+    var handleFileSelected = function (event) {
+        onFilesSelected(event.target.files);
+    };
+    return (react_1.default.createElement("div", { className: "ffe-file-upload" },
+        react_1.default.createElement("div", { className: "ffe-file-upload__title" }, title),
+        Object.keys(files).length > 0 ? (react_1.default.createElement("div", { className: "ffe-file-upload__file-items-section" }, Object.keys(files).map(function (file) { return (react_1.default.createElement(FileItem_1.FileItem, { key: file, file: files[file], cancelText: cancelText, deleteText: deleteText, onFileDeleted: handleFileDeleted })); }))) : (react_1.default.createElement("div", { className: "ffe-file-upload__info-section" },
+            react_1.default.createElement("div", { className: "ffe-file-upload__info-section-text" }, infoText),
+            react_1.default.createElement("div", { className: "ffe-file-upload__info-section-subtext" }, infoSubText))),
+        react_1.default.createElement("div", { className: "ffe-file-upload__upload-section", role: "presentation", onDrop: handleFilesDropped, onDragOver: function (event) {
+                event.preventDefault();
+                setIsHover(true);
+            }, onDragLeave: function () { return setIsHover(false); } },
+            react_1.default.createElement("div", { className: (0, classnames_1.default)('ffe-file-upload__upload-section-border', {
+                    'ffe-file-upload__upload-section-border--hover': isHover,
+                }) },
+                react_1.default.createElement("div", { className: "ffe-file-upload__upload-section-title" }, uploadTitle),
+                react_1.default.createElement("div", { className: "ffe-file-upload__upload-section-microtext" }, uploadMicroText),
+                react_1.default.createElement(ffe_buttons_react_1.SecondaryButton, { leftIcon: react_1.default.createElement(ffe_icons_react_1.Icon, { fileUrl: downloadIcon, size: "sm" }), onClick: triggerUploadFileNativeHandler, id: "".concat(id, "-button") },
+                    react_1.default.createElement("span", { id: "".concat(id, "-label") }, label)),
+                react_1.default.createElement("div", { className: "ffe-file-upload__upload-section-subtext" }, uploadSubText))),
+        react_1.default.createElement("input", { id: id, type: "file", multiple: multiple, ref: fileInputElement, onChange: handleFileSelected, "aria-labelledby": "".concat(id, "-label"), accept: accept || '*' })));
+}
 exports.FileUpload = FileUpload;
-var _react = _interopRequireWildcard(require("react"));
-var _FileItem = require("./FileItem");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _ffeButtonsReact = require("@sb1/ffe-buttons-react");
-var _ffeIconsReact = require("@sb1/ffe-icons-react");
-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 _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 && {}.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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function FileUpload(_ref) {
-  var id = _ref.id,
-    label = _ref.label,
-    files = _ref.files,
-    cancelText = _ref.cancelText,
-    deleteText = _ref.deleteText,
-    multiple = _ref.multiple,
-    title = _ref.title,
-    infoText = _ref.infoText,
-    infoSubText = _ref.infoSubText,
-    uploadTitle = _ref.uploadTitle,
-    uploadMicroText = _ref.uploadMicroText,
-    uploadSubText = _ref.uploadSubText,
-    accept = _ref.accept,
-    onFilesDropped = _ref.onFilesDropped,
-    onFileDeleted = _ref.onFileDeleted,
-    onFilesSelected = _ref.onFilesSelected;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isHover = _useState2[0],
-    setIsHover = _useState2[1];
-  var fileInputElement = (0, _react.useRef)(null);
-  var downloadIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuOC0zNTcuNTM5cS02LjQzMSAwLTExLjk2MS0yLjMwOC01LjUzMS0yLjMwNy0xMC4xNDYtNi45MjNMMzM1LjMwOS00ODkuMTUzcS03LjkyMy03LjgzMi03LjgwNy0xOC4zMzguMTE1LTEwLjUwNyA4LjMyOS0xOC44MTUgOC43ODYtOC4zMDcgMTguODYyLTguMTE1IDEwLjA3Ny4xOTIgMTguMzg1IDguNWw4MC45MjMgODEuOTIzdi0zMjYuMDAxcTAtMTEuMDY5IDcuNDA0LTE4LjUzNCA3LjQwNS03LjQ2NiAxOC4zODQtNy40NjYgMTAuOTggMCAxOC41OTUgNy40NjYgNy42MTUgNy40NjUgNy42MTUgMTguNTM0djMyNi4wMDFsODEuOTIzLTgxLjkyM3E3LjU5LTcuOTIzIDE4LjAyNi03LjgwOCAxMC40MzUuMTE2IDE5LjIyMSA4LjQyMyA4LjIxNCA4LjMwOCA4LjAyMSAxOC41NzctLjE5MiAxMC4yNjktOC40OTkgMTguNTc2TDUwMi4zMDctMzY2Ljc3cS01LjAxNSA0LjYxNi0xMC41NDYgNi45MjMtNS41MyAyLjMwOC0xMS45NjEgMi4zMDhaTTI3Ni4wMjUtMjEyLjAwMXEtMjcuMDI0IDAtNDUuNTI0LTE4LjY1dC0xOC41LTQ1LjY1OHYtMzQuNDYxcTAtMTEuMDY5IDcuNDA1LTE4LjUzNCA3LjQwNS03LjQ2NSAxOC4zODQtNy40NjUgMTAuOTggMCAxOC41OTUgNy40NjVRMjY0LTMyMS44MzkgMjY0LTMxMC43N3YzNC40NjFxMCA0LjYxNiAzLjg0NiA4LjQ2MyAzLjg0NyAzLjg0NiA4LjQ2MyAzLjg0Nmg0MDcuMzgycTQuNjE2IDAgOC40NjMtMy44NDYgMy44NDYtMy44NDcgMy44NDYtOC40NjN2LTM0LjQ2MXEwLTExLjA2OSA3LjQwNS0xOC41MzQgNy40MDQtNy40NjUgMTguMzg0LTcuNDY1IDEwLjk3OSAwIDE4LjU5NCA3LjQ2NSA3LjYxNiA3LjQ2NSA3LjYxNiAxOC41MzR2MzQuNDYxcTAgMjcuMDA4LTE4LjY2MiA0NS42NTgtMTguNjYyIDE4LjY1LTQ1LjY4NiAxOC42NUgyNzYuMDI1WiIvPjwvc3ZnPg==';
-  var handleFilesDropped = function handleFilesDropped(event) {
-    event.preventDefault();
-    setIsHover(false);
-    onFilesDropped(event.dataTransfer.files);
-  };
-  var handleFileDeleted = function handleFileDeleted(event) {
-    onFileDeleted(files[event.currentTarget.id]);
-  };
-  var triggerUploadFileNativeHandler = function triggerUploadFileNativeHandler() {
-    // clear file input to trigger onChange when uploading same filename
-    if (fileInputElement.current) {
-      fileInputElement.current.value = '';
-      fileInputElement.current.click();
-    }
-  };
-  var handleFileSelected = function handleFileSelected(event) {
-    onFilesSelected(event.target.files);
-  };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__title"
-  }, title), Object.keys(files).length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__file-items-section"
-  }, Object.keys(files).map(function (file) {
-    return /*#__PURE__*/_react.default.createElement(_FileItem.FileItem, {
-      key: file,
-      file: files[file],
-      cancelText: cancelText,
-      deleteText: deleteText,
-      onFileDeleted: handleFileDeleted
-    });
-  })) : /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__info-section"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__info-section-text"
-  }, infoText), /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__info-section-subtext"
-  }, infoSubText)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__upload-section",
-    role: "presentation",
-    onDrop: handleFilesDropped,
-    onDragOver: function onDragOver(event) {
-      event.preventDefault();
-      setIsHover(true);
-    },
-    onDragLeave: function onDragLeave() {
-      return setIsHover(false);
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('ffe-file-upload__upload-section-border', {
-      'ffe-file-upload__upload-section-border--hover': isHover
-    })
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__upload-section-title"
-  }, uploadTitle), /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__upload-section-microtext"
-  }, uploadMicroText), /*#__PURE__*/_react.default.createElement(_ffeButtonsReact.SecondaryButton, {
-    leftIcon: /*#__PURE__*/_react.default.createElement(_ffeIconsReact.Icon, {
-      fileUrl: downloadIcon,
-      size: "sm"
-    }),
-    onClick: triggerUploadFileNativeHandler,
-    id: "".concat(id, "-button")
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    id: "".concat(id, "-label")
-  }, label)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "ffe-file-upload__upload-section-subtext"
-  }, uploadSubText))), /*#__PURE__*/_react.default.createElement("input", {
-    id: id,
-    type: "file",
-    multiple: multiple,
-    ref: fileInputElement,
-    onChange: handleFileSelected,
-    "aria-labelledby": "".concat(id, "-label"),
-    accept: accept || '*'
-  }));
-}

package/lib/getFileContent.js

@@ -1,18 +1,14 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFileContent = void 0;
-var getFileContent = exports.getFileContent = function getFileContent(file) {
-  return new Promise(function (resolve, reject) {
-    var reader = new window.FileReader();
-    reader.onload = function (event) {
-      return resolve(event.target ? event.target.result : null);
-    };
-    reader.onerror = function (error) {
-      return reject(error);
-    };
-    reader.readAsDataURL(file);
-  });
-};
+var getFileContent = function (file) {
+    return new Promise(function (resolve, reject) {
+        var reader = new window.FileReader();
+        reader.onload = function (event) {
+            return resolve(event.target ? event.target.result : null);
+        };
+        reader.onerror = function (error) { return reject(error); };
+        reader.readAsDataURL(file);
+    });
+};
+exports.getFileContent = getFileContent;

package/lib/index.js

@@ -1,25 +1,7 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "FileUpload", {
-  enumerable: true,
-  get: function get() {
-    return _FileUpload.FileUpload;
-  }
-});
-Object.defineProperty(exports, "FileUploadProps", {
-  enumerable: true,
-  get: function get() {
-    return _FileUpload.FileUploadProps;
-  }
-});
-Object.defineProperty(exports, "getFileContent", {
-  enumerable: true,
-  get: function get() {
-    return _getFileContent.getFileContent;
-  }
-});
-var _FileUpload = require("./FileUpload");
-var _getFileContent = require("./getFileContent");
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFileContent = exports.FileUpload = void 0;
+var FileUpload_1 = require("./FileUpload");
+Object.defineProperty(exports, "FileUpload", { enumerable: true, get: function () { return FileUpload_1.FileUpload; } });
+var getFileContent_1 = require("./getFileContent");
+Object.defineProperty(exports, "getFileContent", { enumerable: true, get: function () { return getFileContent_1.getFileContent; } });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-file-upload-react",
-    "version": "11.0.5",
+    "version": "11.0.7",
     "description": "Upload file button with validation and list of uploaded files.",
     "keywords": [
         "ffe"
@@ -21,22 +21,22 @@
         "url": "ssh://git@github.com:SpareBank1/designsystem.git"
     },
     "scripts": {
-        "build": "ffe-buildtool babel",
-        "watch": "ffe-buildtool babel-watch",
+        "build": "ffe-buildtool tsc",
+        "build:es": "ffe-buildtool tsc --es",
         "lint": "eslint src --ext ts,tsx",
         "lint:fix": "eslint src --fix --ext ts,tsx",
         "test": "ffe-buildtool jest",
         "test:watch": "ffe-buildtool jest --watch"
     },
     "dependencies": {
-        "@sb1/ffe-buttons-react": "^23.0.1",
-        "@sb1/ffe-file-upload": "^10.0.43",
-        "@sb1/ffe-form": "^29.0.17",
-        "@sb1/ffe-icons-react": "^10.0.2",
+        "@sb1/ffe-buttons-react": "^23.0.2",
+        "@sb1/ffe-file-upload": "^10.0.44",
+        "@sb1/ffe-form": "^29.0.18",
+        "@sb1/ffe-icons-react": "^10.0.3",
         "classnames": "^2.3.1"
     },
     "devDependencies": {
-        "@sb1/ffe-buildtool": "^0.6.2",
+        "@sb1/ffe-buildtool": "^0.6.3",
         "@types/sinon": "^17.0.3",
         "react": "^16.9.0",
         "react-dom": "^16.9.0",
@@ -48,5 +48,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "127dc5b80ec3e599b2d34242626232bdcef25e3c"
+    "gitHead": "f9439b117955babfcd2ea4389d38618679598e2d"
 }

package/types/FileItem.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface FileItemProps<Document> {
+    /** Shape of the file type, name is required, error and document.content is optional */
+    file: {
+        name: string;
+        document?: Document;
+        error?: string;
+    };
+    /**
+     * Called when the user clicks the delete button for a given file. Is called with the name of the file in question.
+     */
+    onFileDeleted: React.MouseEventHandler<HTMLButtonElement>;
+    /** Label for the cancel button */
+    cancelText?: string;
+    /** Label for the delete button */
+    deleteText?: string;
+}
+export declare function FileItem<Document>({ file, onFileDeleted, cancelText, deleteText, }: FileItemProps<Document>): React.JSX.Element;

package/types/FileUpload.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { FileItemProps } from './FileItem';
+export interface FileUploadProps<Document> {
+    /** ID for the input field. The ID is used as a base for the label ID as well. */
+    id: string;
+    /** Label for the button to trigger native upload handling. */
+    label: string;
+    /**
+     * A map of files, indexed by file name (check file-shape on FileItem.js propTypes), that the user has uploaded.
+     * Must be maintained outside of `FileUpload`. It is up to the implementation to deny or accept file types, sizes, etc,
+     * and it is important that duplicates are not allowed.
+     * */
+    files: Record<string, FileItemProps<Document>['file']>;
+    /**
+     * Will be called with `FileList`-object containing the `File`-objects the user selected.
+     * See MDN for documentation on
+     * [FileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList) and
+     * [File](https://developer.mozilla.org/en-US/docs/Web/API/File).
+     */
+    onFilesSelected(fileList: FileList | null): void;
+    /** Will be called when objects are dropped over the upload-section. */
+    onFilesDropped(fileList: FileList | null): void;
+    /**
+     * Called when the user clicks the delete button for a given file. Is called with the `File`
+     * object of the file in question.
+     */
+    onFileDeleted(file: FileItemProps<Document>['file']): void;
+    /** Whether or not uploading multiple files at once via the native file handler is allowed*/
+    multiple?: boolean;
+    /** Title module */
+    title: string;
+    /** Text on the info-section */
+    infoText: string;
+    /** Subtext on the info-section */
+    infoSubText?: string;
+    /** Label for the cancel button */
+    cancelText?: string;
+    /** Label for the delete button */
+    deleteText?: string;
+    /** Title on the upload-section */
+    uploadTitle: string;
+    /** MicroText on the upload-section */
+    uploadMicroText: string;
+    /** SubText on the upload-section */
+    uploadSubText: string;
+    /** Unique file type specifier that describes a type of file that may be selected by the user, e.g. ".pdf"
+     *  See MDN for documentation on
+     *  [Unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)
+     */
+    accept?: string;
+}
+export declare function FileUpload<Document>({ id, label, files, cancelText, deleteText, multiple, title, infoText, infoSubText, uploadTitle, uploadMicroText, uploadSubText, accept, onFilesDropped, onFileDeleted, onFilesSelected, }: FileUploadProps<Document>): React.JSX.Element;

package/types/getFileContent.d.ts

@@ -0,0 +1 @@
+export declare const getFileContent: (file: File) => Promise<ArrayBuffer | string | null>;

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export { FileUpload, FileUploadProps } from './FileUpload';
+export { getFileContent } from './getFileContent';

package/es/FileUpload.spec.js

@@ -1,62 +0,0 @@
-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); }
-import React from 'react';
-import { spy } from 'sinon';
-import { FileUpload } from './FileUpload';
-import { render, screen, fireEvent } from '@testing-library/react';
-var renderFileUpload = function renderFileUpload(props) {
-  return render( /*#__PURE__*/React.createElement(FileUpload, _extends({
-    id: "file-upload",
-    label: "label",
-    title: "title",
-    infoText: "infoText",
-    uploadTitle: "uploadTitle",
-    uploadMicroText: "uploadMicroText",
-    uploadSubText: "uploadSubText",
-    files: {},
-    onFilesSelected: function onFilesSelected() {},
-    onFileDeleted: function onFileDeleted() {},
-    onFilesDropped: function onFilesDropped() {}
-  }, props)));
-};
-describe('<FileUpload/>', function () {
-  it('should have a button and input', function () {
-    var _renderFileUpload = renderFileUpload(),
-      container = _renderFileUpload.container;
-    expect(container.querySelector('#file-upload-button')).toBeTruthy();
-    expect(container.querySelector('#file-upload')).toBeTruthy();
-  });
-  it('should render input label', function () {
-    renderFileUpload();
-    expect(screen.getByRole('button', {
-      name: 'label'
-    })).toBeInTheDocument();
-  });
-  it('should extract and return files when user finishes selecting files', function () {
-    var onFilesSelected = spy();
-    var _renderFileUpload2 = renderFileUpload({
-        onFilesSelected: onFilesSelected
-      }),
-      container = _renderFileUpload2.container;
-    var input = container.querySelector('input#file-upload');
-    fireEvent.change(input);
-    expect(onFilesSelected.calledOnce).toBe(true);
-  });
-  it('should remove file from files when delete button is clicked', function () {
-    var onFileDeleted = spy();
-    // Do click on span inside button with event listener instead of actual button to catch nested clicks.
-    var _renderFileUpload3 = renderFileUpload({
-        onFileDeleted: onFileDeleted,
-        files: {
-          fileToDelete: {
-            name: 'fileToDelete'
-          }
-        }
-      }),
-      container = _renderFileUpload3.container;
-    var deleteButton = container.querySelector('.ffe-file-upload__file-item-delete-button-text');
-    fireEvent.click(deleteButton);
-    expect(onFileDeleted.calledWith({
-      name: 'fileToDelete'
-    })).toBe(true);
-  });
-});

package/lib/FileUpload.spec.js

@@ -1,65 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-var _sinon = require("sinon");
-var _FileUpload = require("./FileUpload");
-var _react2 = require("@testing-library/react");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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); }
-var renderFileUpload = function renderFileUpload(props) {
-  return (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_FileUpload.FileUpload, _extends({
-    id: "file-upload",
-    label: "label",
-    title: "title",
-    infoText: "infoText",
-    uploadTitle: "uploadTitle",
-    uploadMicroText: "uploadMicroText",
-    uploadSubText: "uploadSubText",
-    files: {},
-    onFilesSelected: function onFilesSelected() {},
-    onFileDeleted: function onFileDeleted() {},
-    onFilesDropped: function onFilesDropped() {}
-  }, props)));
-};
-describe('<FileUpload/>', function () {
-  it('should have a button and input', function () {
-    var _renderFileUpload = renderFileUpload(),
-      container = _renderFileUpload.container;
-    expect(container.querySelector('#file-upload-button')).toBeTruthy();
-    expect(container.querySelector('#file-upload')).toBeTruthy();
-  });
-  it('should render input label', function () {
-    renderFileUpload();
-    expect(_react2.screen.getByRole('button', {
-      name: 'label'
-    })).toBeInTheDocument();
-  });
-  it('should extract and return files when user finishes selecting files', function () {
-    var onFilesSelected = (0, _sinon.spy)();
-    var _renderFileUpload2 = renderFileUpload({
-        onFilesSelected: onFilesSelected
-      }),
-      container = _renderFileUpload2.container;
-    var input = container.querySelector('input#file-upload');
-    _react2.fireEvent.change(input);
-    expect(onFilesSelected.calledOnce).toBe(true);
-  });
-  it('should remove file from files when delete button is clicked', function () {
-    var onFileDeleted = (0, _sinon.spy)();
-    // Do click on span inside button with event listener instead of actual button to catch nested clicks.
-    var _renderFileUpload3 = renderFileUpload({
-        onFileDeleted: onFileDeleted,
-        files: {
-          fileToDelete: {
-            name: 'fileToDelete'
-          }
-        }
-      }),
-      container = _renderFileUpload3.container;
-    var deleteButton = container.querySelector('.ffe-file-upload__file-item-delete-button-text');
-    _react2.fireEvent.click(deleteButton);
-    expect(onFileDeleted.calledWith({
-      name: 'fileToDelete'
-    })).toBe(true);
-  });
-});