@dxc-technology/halstack-react 0.0.0-9b45027 → 0.0.0-9bd9511

package/file-input/FileInput.stories.tsx

@@ -2,14 +2,15 @@ import React from "react";
 import DxcFileInput from "./FileInput";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import FileItem from "./FileItem";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "File input",
   component: DxcFileInput,
 };
 
-const picPreview =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAEDklEQVRogdXaXaxcUxQH8J/etloajVT1I9qgCbdIUB8PXPeKBJHgsV5ExAuVivBUgtSDxgNBVMVHxEeRUhIhkpJ40BYhoTShaQglQtA2VR+ttjMe1j45c6cztzNnzszc+09Ocs/Za+39/++zzt5rr7l0D1diA35P14b0bMJgAE+g2uR6FpP7xq4NZCL2YjlOSNdt6VkVj/eNXYu4VhD9G+c3aL8gtVWS7bjEsfhRCFk2ht2yZPNT8hl3WCUIfoZJY9gdhY+T7QM94NUWFmEfDuHCFuyXJNv9OL2LvNrGO2KGn2rD55nks6ErjAog+8B3YXYbfrPwR/Lt+4d/NLYLMrcW8F+efL/DtBJ5tY17EpEvxEbYLgawJfVxXxObRZhbiF2LWCjfE4Y66OeS1Mc/OLnm+Uw8ggP4oYP+j4hHxUy+VEJfL6e+3hTL8/X4RZ7W/FvCGE1xOdZp7wNvhvny9CULtSo+1QMhZWImPpQL+A03YbouCpkqXn8ZqA+jg1iD41P7NF0QMiAy2N0ipDrFWUa/hU9wXp1N6UIuEktsNug3HfY3gD2pr4rYTxrlZ6UJmY3n0mBZ7JYhhDi3ZP1+i6sb2HQsZBJuEEfUqljjV+Ic5QkhzifZylTF+xisae9IyBIRr1nnb+PU1DaoXCHkk5blXfvxGGYoKGQWnhbpdZb/XFNn0w0hGebgBXm4fY/rtClkOn6Wz8j96Vk9uikkw5DRm2JLQrKV4hB2pr+niJznuPI5toRN4rx/u1jZiLfUMqZiBf4Ss7Bb7Bu1WW0v3kgt5mA17i7iPB8vymN1Cy5Obb0W0jFm4Fd5jFbEfjJsggl5UBDeiLvk4bZP/4RcJj76W1p1OE2sXAfFBkgcotYrL0UpghF5BfOkVhzeTQ5rGrRdIXbiVWWxaxNvCG6vHckwq4jsFPXa8YYF8gPYVc2MaisiN/eGVyGsEBy3C86H4d5k8LliFZFeYSq+FlwP218WiJWpIpbY8Y5heeXllNqGdcqriPQKrwrO67MHZwh1ezGvT6SKIKu8VLCYWGareKgPZEZECrS5oP/Dgvtq2Jpuzi6FWmuYh7XyfK5asJ9zk++X5EWARuePsjEZd9SM+afOhBwjz9TtSDeDY3mUgBH526/gFRHnnQhZLD9NejLdvG7sn8yKoj6MtuLSmvaiQibJ8781RNl+V3rwEZaKpGxKQeIZ6sNoD+5s0G87QqYkbksT1yydWpQZDMl/kS16bawb9AN5GK3VfGnvZMwd0qEv+w+ETTgTN4rEcRAninSgVdTP6oE2fFvFf6JIuA1v4XmRkXQVk+UFhGoacKXDJ6eTj72nmGt0DWCbONdkmDBCMgzjK6MrmAtNQCGUvyH2HfXhNmGFZBgRNYD3Ou3ofwlpcfptqgzTAAAAAElFTkSuQmCC";
+const picPreview = "https://cdn.mos.cms.futurecdn.net/CAZ6JXi6huSuN4QGE627NR.jpg";
 
 const file1 = new File(["file1"], "file.pdf", { type: "text/plain" });
 const file2 = new File(["file2"], "file2.mp3", {
@@ -21,7 +22,7 @@ const file3 = new File(["file3"], "file3.png", {
 const file4 = new File(["file4"], "file4file4file4file4file4file4file4file4file4.mp4", {
   type: "video",
 });
-const file5 = new File(["file4"], "file5file5file5file5file5file5file5file5file5.mp4", {
+const file5 = new File(["file5"], "file5file5file5file5file5file5file5file5file5.mp4", {
   type: "video",
 });
 
@@ -53,7 +54,7 @@ const filesExamples = [
     file: file4,
   },
   {
-    error: "Error message error message error message error message",
+    error: "This error message is a multiline paragraph for testing.",
     file: file5,
   },
   {
@@ -63,19 +64,53 @@ const filesExamples = [
   },
 ];
 
+const opinionatedTheme = {
+  fileInput: {
+    fontColor: "#000000",
+  },
+};
+
 export const Chromatic = () => (
   <>
+    <Title title="File item states" theme="light" level={2} />
     <ExampleContainer pseudoState="pseudo-hover">
-      <Title title="File item hovered" theme="light" level={4} />
-      <DxcFileInput value={fileExample} callbackFile={() => {}} />
+      <Title title="Hovered" theme="light" level={4} />
+      <FileItem
+        fileName="file"
+        error=""
+        singleFileMode={false}
+        showPreview={false}
+        preview={picPreview}
+        type="image/png"
+        onDelete={() => {}}
+        tabIndex={0}
+      />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
-      <Title title="File item focused" theme="light" level={4} />
-      <DxcFileInput value={fileExample} callbackFile={() => {}} />
+      <Title title="Focused" theme="light" level={4} />
+      <FileItem
+        fileName="file"
+        error=""
+        singleFileMode={false}
+        showPreview={false}
+        preview={picPreview}
+        type="image/png"
+        onDelete={() => {}}
+        tabIndex={0}
+      />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
-      <Title title="File item actived" theme="light" level={4} />
-      <DxcFileInput value={fileExample} callbackFile={() => {}} />
+      <Title title="Actived" theme="light" level={4} />
+      <FileItem
+        fileName="file"
+        error=""
+        singleFileMode={false}
+        showPreview={false}
+        preview={picPreview}
+        type="image/png"
+        onDelete={() => {}}
+        tabIndex={0}
+      />
     </ExampleContainer>
     <Title title="File" theme="light" level={2} />
     <ExampleContainer>
@@ -501,7 +536,83 @@ export const Chromatic = () => (
         mode="dropzone"
         margin="xxlarge"
       />
-      <hr />
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <Title title="Single file" theme="light" level={4} />
+        <DxcFileInput
+          label="File input"
+          helperText="Please select files"
+          value={fileExample}
+          multiple={false}
+          callbackFile={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <Title title="Invalid single file" theme="light" level={4} />
+        <DxcFileInput
+          label="File input"
+          helperText="Please select files"
+          value={fileExampleError}
+          multiple={false}
+          callbackFile={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Single file" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcFileInput
+          mode="filedrop"
+          label="File input"
+          helperText="Please select files"
+          value={fileExample}
+          multiple={false}
+          callbackFile={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Invalid single file" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcFileInput
+          mode="filedrop"
+          label="File input"
+          helperText="Please select files"
+          value={fileExampleError}
+          multiple={false}
+          callbackFile={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Single file" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcFileInput
+          label="File input"
+          helperText="Please select files"
+          mode="dropzone"
+          value={fileExample}
+          callbackFile={() => {}}
+          multiple={false}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Invalid single file" theme="light" level={4} />{" "}
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcFileInput
+          label="File input"
+          helperText="Please select files"
+          mode="dropzone"
+          value={fileExampleError}
+          callbackFile={() => {}}
+          multiple={false}
+        />
+      </HalstackProvider>
     </ExampleContainer>
   </>
 );

package/file-input/FileInput.test.js

@@ -0,0 +1,445 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _FileInput = _interopRequireDefault(require("./FileInput"));
+var file1 = new File(["file1"], "file1.png", {
+  type: "image/png"
+});
+var file2 = new File(["file2"], "file2.txt", {
+  type: "text/plain"
+});
+var allFiles = [{
+  file: file1
+}, {
+  error: "Error message",
+  file: file2
+}];
+describe("FileInput component tests", function () {
+  test("Renders with correct labels and helper text in file mode", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+        label: "File input label",
+        helperText: "File input helper text",
+        buttonLabel: "Choose files"
+      })),
+      getByText = _render.getByText;
+    expect(getByText("File input label")).toBeTruthy();
+    expect(getByText("File input helper text")).toBeTruthy();
+    expect(getByText("Choose files")).toBeTruthy();
+  });
+  test("Renders with correct button label in file mode", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+        label: "File input label",
+        helperText: "File input helper text"
+      })),
+      getByText = _render2.getByText;
+    expect(getByText("Select files")).toBeTruthy();
+  });
+  test("Renders with correct button label in file mode and single file selection", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+        label: "File input label",
+        helperText: "File input helper text",
+        multiple: false
+      })),
+      getByText = _render3.getByText;
+    expect(getByText("Select file")).toBeTruthy();
+  });
+  test("Renders with correct labels in filedrop mode", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+        label: "File input label",
+        helperText: "File input helper text",
+        mode: "filedrop"
+      })),
+      getByText = _render4.getByText;
+    expect(getByText("Select")).toBeTruthy();
+    expect(getByText("or drop files")).toBeTruthy();
+  });
+  test("Renders with correct labels in filedrop mode and single file selection", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+        label: "File input label",
+        helperText: "File input helper text",
+        mode: "filedrop",
+        multiple: false
+      })),
+      getByText = _render5.getByText;
+    expect(getByText("Select")).toBeTruthy();
+    expect(getByText("or drop a file")).toBeTruthy();
+  });
+  test("Renders with correct custom labels in filedrop mode", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+        label: "File input label",
+        helperText: "File input helper text",
+        mode: "filedrop",
+        buttonLabel: "Choose",
+        dropAreaLabel: "(or drop the files)"
+      })),
+      getByText = _render6.getByText;
+    expect(getByText("Choose")).toBeTruthy();
+    expect(getByText("(or drop the files)")).toBeTruthy();
+  });
+  test("Renders with correct labels in dropzone mode", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+        label: "File input label",
+        helperText: "File input helper text",
+        mode: "dropzone"
+      })),
+      getByText = _render7.getByText;
+    expect(getByText("Select")).toBeTruthy();
+    expect(getByText("or drop files")).toBeTruthy();
+  });
+  test("Renders with correct labels in dropzone mode and single file selection", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+        label: "File input label",
+        helperText: "File input helper text",
+        mode: "dropzone",
+        multiple: false
+      })),
+      getByText = _render8.getByText;
+    expect(getByText("Select")).toBeTruthy();
+    expect(getByText("or drop a file")).toBeTruthy();
+  });
+  test("Renders with correct custom labels in dropzone mode", function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+        label: "File input label",
+        helperText: "File input helper text",
+        mode: "dropzone",
+        buttonLabel: "Choose",
+        dropAreaLabel: "(or drop the files)"
+      })),
+      getByText = _render9.getByText;
+    expect(getByText("Choose")).toBeTruthy();
+    expect(getByText("(or drop the files)")).toBeTruthy();
+  });
+  test("Disabled file input", function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+        label: "File input label",
+        helperText: "File input helper text",
+        disabled: true
+      })),
+      getByText = _render10.getByText,
+      getByRole = _render10.getByRole;
+    expect(getByText("Select files")).toBeTruthy();
+    var button = getByRole("button");
+    expect(button.disabled).toBeTruthy();
+  });
+  test("Renders file items passed in value when multiple file input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var callbackFile, _render11, getByText;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          callbackFile = jest.fn();
+          _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+            label: "File input label",
+            helperText: "File input helper text",
+            value: allFiles,
+            callbackFile: callbackFile
+          })), getByText = _render11.getByText;
+          _context.next = 4;
+          return (0, _react2.waitFor)(function () {
+            expect(getByText("file1.png")).toBeTruthy();
+            expect(getByText("file2.txt")).toBeTruthy();
+            expect(getByText("Error message")).toBeTruthy();
+          });
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  test("Renders file items when single file input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var callbackFile, _render12, getByText;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          callbackFile = jest.fn();
+          _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+            label: "File input label",
+            helperText: "File input helper text",
+            multiple: false,
+            value: allFiles,
+            callbackFile: callbackFile
+          })), getByText = _render12.getByText;
+          _context2.next = 4;
+          return (0, _react2.waitFor)(function () {
+            expect(getByText("file1.png")).toBeTruthy();
+            expect(getByText("file2.txt")).toBeTruthy();
+            expect(getByText("Error message")).toBeTruthy();
+          });
+        case 4:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  test("Add file item when single file input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var newFile, callbackFile, _render13, getByText, getByLabelText;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          newFile = new File(["newFile"], "newFile.pdf", {
+            type: "pdf"
+          });
+          callbackFile = jest.fn();
+          _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+            label: "File input label",
+            helperText: "File input helper text",
+            value: allFiles,
+            callbackFile: callbackFile,
+            multiple: false
+          })), getByText = _render13.getByText, getByLabelText = _render13.getByLabelText;
+          _context3.next = 5;
+          return (0, _react2.waitFor)(function () {
+            expect(getByText("file1.png")).toBeTruthy();
+            expect(getByText("file2.txt")).toBeTruthy();
+            expect(getByText("Error message")).toBeTruthy();
+            var inputFile = getByLabelText("File input label", {
+              hidden: true
+            });
+            _react2.fireEvent.change(inputFile, {
+              target: {
+                files: [newFile]
+              }
+            });
+            expect(callbackFile).toHaveBeenCalledWith([{
+              file: newFile,
+              preview: /*#__PURE__*/_react["default"].createElement("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "currentColor"
+              }, /*#__PURE__*/_react["default"].createElement("path", {
+                fill: "none",
+                d: "M0 0h24v24H0V0z"
+              }), /*#__PURE__*/_react["default"].createElement("path", {
+                d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"
+              }))
+            }]);
+          });
+        case 5:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+  test("Renders file items and delete one file", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var callbackFile, _render14, getByText, getAllByRole;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          callbackFile = jest.fn();
+          _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+            label: "File input label",
+            helperText: "File input helper text",
+            value: allFiles,
+            callbackFile: callbackFile
+          })), getByText = _render14.getByText, getAllByRole = _render14.getAllByRole;
+          _context4.next = 4;
+          return (0, _react2.waitFor)(function () {
+            expect(getByText("file1.png")).toBeTruthy();
+            expect(getByText("file2.txt")).toBeTruthy();
+            expect(getByText("Error message")).toBeTruthy();
+            var removeBtn = getAllByRole("button")[1];
+            _userEvent["default"].click(removeBtn);
+            expect(callbackFile).toHaveBeenCalledWith([{
+              error: "Error message",
+              file: file2,
+              preview: /*#__PURE__*/_react["default"].createElement("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "currentColor"
+              }, /*#__PURE__*/_react["default"].createElement("path", {
+                fill: "none",
+                d: "M0 0h24v24H0V0z"
+              }), /*#__PURE__*/_react["default"].createElement("path", {
+                d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"
+              }))
+            }]);
+          });
+        case 4:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+  test("CallbackFile is correctly called", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+    var newFile, callbackFile, _render15, getByLabelText;
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          newFile = new File(["newFile"], "newFile.pdf", {
+            type: "pdf"
+          });
+          callbackFile = jest.fn();
+          _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+            label: "File input label",
+            helperText: "File input helper text",
+            value: allFiles,
+            callbackFile: callbackFile
+          })), getByLabelText = _render15.getByLabelText;
+          _context5.next = 5;
+          return (0, _react2.waitFor)(function () {
+            var inputFile = getByLabelText("File input label", {
+              hidden: true
+            });
+            _react2.fireEvent.change(inputFile, {
+              target: {
+                files: [newFile]
+              }
+            });
+            expect(callbackFile).toHaveBeenCalledWith([{
+              file: file1,
+              preview: "data:image/png;base64,ZmlsZTE="
+            }, {
+              error: "Error message",
+              file: file2,
+              preview: /*#__PURE__*/_react["default"].createElement("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "currentColor"
+              }, /*#__PURE__*/_react["default"].createElement("path", {
+                fill: "none",
+                d: "M0 0h24v24H0V0z"
+              }), /*#__PURE__*/_react["default"].createElement("path", {
+                d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"
+              }))
+            }, {
+              error: undefined,
+              file: newFile,
+              preview: /*#__PURE__*/_react["default"].createElement("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "currentColor"
+              }, /*#__PURE__*/_react["default"].createElement("path", {
+                fill: "none",
+                d: "M0 0h24v24H0V0z"
+              }), /*#__PURE__*/_react["default"].createElement("path", {
+                d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"
+              }))
+            }]);
+          });
+        case 5:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+  test("Callback called correctly when a file size does not comply minSize or maxSize", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+    var newFile, callbackFile, _render16, getByText, getByLabelText;
+    return _regenerator["default"].wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          newFile = new File(["newFile"], "newFile.pdf", {
+            type: "pdf"
+          });
+          callbackFile = jest.fn();
+          _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+            label: "File input label",
+            helperText: "File input helper text",
+            minSize: 1000,
+            maxSize: 20000,
+            value: allFiles,
+            callbackFile: callbackFile
+          })), getByText = _render16.getByText, getByLabelText = _render16.getByLabelText;
+          _context6.next = 5;
+          return (0, _react2.waitFor)(function () {
+            expect(getByText("file1.png")).toBeTruthy();
+            expect(getByText("file2.txt")).toBeTruthy();
+            expect(getByText("Error message")).toBeTruthy();
+            var inputFile = getByLabelText("File input label", {
+              hidden: true
+            });
+            _react2.fireEvent.change(inputFile, {
+              target: {
+                files: [newFile]
+              }
+            });
+            expect(callbackFile).toHaveBeenCalledWith([{
+              file: file1,
+              preview: "data:image/png;base64,ZmlsZTE="
+            }, {
+              error: "Error message",
+              file: file2,
+              preview: /*#__PURE__*/_react["default"].createElement("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "currentColor"
+              }, /*#__PURE__*/_react["default"].createElement("path", {
+                fill: "none",
+                d: "M0 0h24v24H0V0z"
+              }), /*#__PURE__*/_react["default"].createElement("path", {
+                d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"
+              }))
+            }, {
+              error: "File size must be greater than min size.",
+              file: newFile,
+              preview: /*#__PURE__*/_react["default"].createElement("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "currentColor"
+              }, /*#__PURE__*/_react["default"].createElement("path", {
+                fill: "none",
+                d: "M0 0h24v24H0V0z"
+              }), /*#__PURE__*/_react["default"].createElement("path", {
+                d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"
+              }))
+            }]);
+          });
+        case 5:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })));
+  test("File input sends value when submitted in a form", function () {
+    var newFile = new File(["newFile"], "newFile.pdf", {
+      type: "pdf"
+    });
+    var handlerOnSubmit = jest.fn(function (e) {
+      e.preventDefault();
+      var formData = new FormData(e.target);
+      var formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({
+        file: newFile
+      });
+    });
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+        onSubmit: handlerOnSubmit
+      }, /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
+        label: "File input label",
+        name: "file",
+        helperText: "File input helper text",
+        mode: "filedrop",
+        buttonLabel: "Choose",
+        dropAreaLabel: "(or drop the files)"
+      }), /*#__PURE__*/_react["default"].createElement("button", {
+        type: "submit"
+      }, "Submit"))),
+      getByText = _render17.getByText,
+      getByLabelText = _render17.getByLabelText;
+    var inputFile = getByLabelText("File input label", {
+      hidden: true
+    });
+    var submit = getByText("Submit");
+    _react2.fireEvent.change(inputFile, {
+      target: {
+        files: [newFile]
+      }
+    });
+    _userEvent["default"].click(submit);
+  });
+});

package/file-input/FileItem.d.ts

@@ -1,14 +1,4 @@
-/// <reference types="react" />
-declare const FileItem: ({ mode, multiple, name, error, showPreview, preview, type, numFiles, onDelete, tabIndex, }: {
-    mode: any;
-    multiple: any;
-    name?: string;
-    error?: string;
-    showPreview: any;
-    preview: any;
-    type: any;
-    numFiles: any;
-    onDelete: any;
-    tabIndex: any;
-}) => JSX.Element;
-export default FileItem;
+import React from "react";
+import { FileItemProps } from "./types";
+declare const _default: React.MemoExoticComponent<({ fileName, error, singleFileMode, showPreview, preview, type, onDelete, tabIndex, }: FileItemProps) => JSX.Element>;
+export default _default;