@dxc-technology/halstack-react 0.0.0-c1253f5 → 0.0.0-c18d61a

package/file-input/FileInput.js

@@ -15,10 +15,10 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -88,6 +88,17 @@ var fileIcon = /*#__PURE__*/_react["default"].createElement("svg", {
   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"
 }));
 
+var getFilePreview = function getFilePreview(file) {
+  if (file.type.includes("video")) return videoIcon;else if (file.type.includes("audio")) return audioIcon;else if (file.type.includes("image")) return new Promise(function (resolve) {
+    var reader = new FileReader();
+    reader.readAsDataURL(file);
+
+    reader.onload = function (e) {
+      resolve(e.target.result);
+    };
+  });else return fileIcon;
+};
+
 var DxcFileInput = function DxcFileInput(_ref) {
   var _ref$name = _ref.name,
       name = _ref$name === void 0 ? "" : _ref$name,
@@ -130,129 +141,26 @@ var DxcFileInput = function DxcFileInput(_ref) {
 
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();
-  (0, _react.useEffect)(function () {
-    var getFiles = /*#__PURE__*/function () {
-      var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-        var valueFiles;
-        return _regenerator["default"].wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                if (!value) {
-                  _context2.next = 5;
-                  break;
-                }
-
-                _context2.next = 3;
-                return Promise.all(value.map( /*#__PURE__*/function () {
-                  var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(file) {
-                    var preview;
-                    return _regenerator["default"].wrap(function _callee$(_context) {
-                      while (1) {
-                        switch (_context.prev = _context.next) {
-                          case 0:
-                            if (!file.preview) {
-                              _context.next = 4;
-                              break;
-                            }
-
-                            return _context.abrupt("return", file);
-
-                          case 4:
-                            _context.next = 6;
-                            return getFilePreview(file.file);
-
-                          case 6:
-                            preview = _context.sent;
-                            return _context.abrupt("return", _objectSpread(_objectSpread({}, file), {}, {
-                              preview: preview
-                            }));
-
-                          case 8:
-                          case "end":
-                            return _context.stop();
-                        }
-                      }
-                    }, _callee);
-                  }));
-
-                  return function (_x) {
-                    return _ref3.apply(this, arguments);
-                  };
-                }()));
-
-              case 3:
-                valueFiles = _context2.sent;
-                setFiles(valueFiles);
-
-              case 5:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2);
-      }));
-
-      return function getFiles() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-
-    getFiles();
-  }, [value]);
-
-  var handleClick = function handleClick() {
-    document.getElementById(fileInputId).click();
-  };
 
   var checkFileSize = function checkFileSize(file) {
-    if (file.size < minSize) {
-      return translatedLabels.fileInput.fileSizeGreaterThanErrorMessage;
-    }
-
-    if (file.size > maxSize) {
-      return translatedLabels.fileInput.fileSizeLessThanErrorMessage;
-    }
-  };
-
-  var getFilePreview = function getFilePreview(file) {
-    if (file.type.includes("video")) {
-      return videoIcon;
-    }
-
-    if (file.type.includes("audio")) {
-      return audioIcon;
-    }
-
-    if (file.type.includes("image")) {
-      return new Promise(function (resolve) {
-        var reader = new FileReader();
-        reader.readAsDataURL(file);
-
-        reader.onload = function (e) {
-          resolve(e.target.result);
-        };
-      });
-    }
-
-    return fileIcon;
+    if (file.size < minSize) return translatedLabels.fileInput.fileSizeGreaterThanErrorMessage;else if (file.size > maxSize) return translatedLabels.fileInput.fileSizeLessThanErrorMessage;
   };
 
   var getFilesToAdd = /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(selectedFiles) {
+    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(selectedFiles) {
       var filesToAdd;
-      return _regenerator["default"].wrap(function _callee3$(_context3) {
+      return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context.prev = _context.next) {
             case 0:
-              _context3.next = 2;
+              _context.next = 2;
               return Promise.all(selectedFiles.map(function (selectedFile) {
                 return getFilePreview(selectedFile);
               })).then(function (previews) {
-                return selectedFiles.map(function (selectedFile, index) {
+                return selectedFiles.map(function (file, index) {
                   var fileInfo = {
-                    file: selectedFile,
-                    error: checkFileSize(selectedFile),
+                    file: file,
+                    error: checkFileSize(file),
                     preview: previews[index]
                   };
                   return fileInfo;
@@ -260,86 +168,79 @@ var DxcFileInput = function DxcFileInput(_ref) {
               });
 
             case 2:
-              filesToAdd = _context3.sent;
-              return _context3.abrupt("return", filesToAdd);
+              filesToAdd = _context.sent;
+              return _context.abrupt("return", filesToAdd);
 
             case 4:
             case "end":
-              return _context3.stop();
+              return _context.stop();
           }
         }
-      }, _callee3);
+      }, _callee);
     }));
 
-    return function getFilesToAdd(_x2) {
-      return _ref4.apply(this, arguments);
+    return function getFilesToAdd(_x) {
+      return _ref2.apply(this, arguments);
     };
   }();
 
   var addFile = /*#__PURE__*/function () {
-    var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(selectedFiles) {
+    var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(selectedFiles) {
       var filesToAdd, finalFiles, fileToAdd;
-      return _regenerator["default"].wrap(function _callee4$(_context4) {
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
         while (1) {
-          switch (_context4.prev = _context4.next) {
+          switch (_context2.prev = _context2.next) {
             case 0:
               if (!multiple) {
-                _context4.next = 8;
+                _context2.next = 8;
                 break;
               }
 
-              _context4.next = 3;
+              _context2.next = 3;
               return getFilesToAdd(selectedFiles);
 
             case 3:
-              filesToAdd = _context4.sent;
+              filesToAdd = _context2.sent;
               finalFiles = [].concat((0, _toConsumableArray2["default"])(files), (0, _toConsumableArray2["default"])(filesToAdd));
-
-              if (typeof callbackFile === "function") {
-                callbackFile(finalFiles);
-              }
-
-              _context4.next = 19;
+              callbackFile === null || callbackFile === void 0 ? void 0 : callbackFile(finalFiles);
+              _context2.next = 19;
               break;
 
             case 8:
               if (!(selectedFiles.length === 1)) {
-                _context4.next = 14;
+                _context2.next = 14;
                 break;
               }
 
-              _context4.next = 11;
+              _context2.next = 11;
               return getFilesToAdd(selectedFiles);
 
             case 11:
-              _context4.t0 = _context4.sent;
-              _context4.next = 17;
+              _context2.t0 = _context2.sent;
+              _context2.next = 17;
               break;
 
             case 14:
-              _context4.next = 16;
+              _context2.next = 16;
               return getFilesToAdd([selectedFiles[0]]);
 
             case 16:
-              _context4.t0 = _context4.sent;
+              _context2.t0 = _context2.sent;
 
             case 17:
-              fileToAdd = _context4.t0;
-
-              if (typeof callbackFile === "function") {
-                callbackFile(fileToAdd);
-              }
+              fileToAdd = _context2.t0;
+              callbackFile === null || callbackFile === void 0 ? void 0 : callbackFile(fileToAdd);
 
             case 19:
             case "end":
-              return _context4.stop();
+              return _context2.stop();
           }
         }
-      }, _callee4);
+      }, _callee2);
     }));
 
-    return function addFile(_x3) {
-      return _ref5.apply(this, arguments);
+    return function addFile(_x2) {
+      return _ref3.apply(this, arguments);
     };
   }();
 
@@ -351,17 +252,18 @@ var DxcFileInput = function DxcFileInput(_ref) {
     addFile(filesArray);
   };
 
-  var onDelete = function onDelete(fileName) {
+  var onDelete = (0, _react.useCallback)(function (fileName) {
     var filesCopy = (0, _toConsumableArray2["default"])(files);
     var fileToRemove = filesCopy.find(function (file) {
       return file.file.name === fileName;
     });
     var fileIndex = filesCopy.indexOf(fileToRemove);
     filesCopy.splice(fileIndex, 1);
+    callbackFile === null || callbackFile === void 0 ? void 0 : callbackFile(filesCopy);
+  }, [files, callbackFile]);
 
-    if (typeof callbackFile === "function") {
-      callbackFile(filesCopy);
-    }
+  var handleClick = function handleClick() {
+    document.getElementById(fileInputId).click();
   };
 
   var handleDrag = function handleDrag(e) {
@@ -370,7 +272,9 @@ var DxcFileInput = function DxcFileInput(_ref) {
   };
 
   var handleDragIn = function handleDragIn(e) {
-    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) setIsDragging(true);
+    var _e$dataTransfer$items;
+
+    if (((_e$dataTransfer$items = e.dataTransfer.items) === null || _e$dataTransfer$items === void 0 ? void 0 : _e$dataTransfer$items.length) > 0) setIsDragging(true);
   };
 
   var handleDragOut = function handleDragOut(e) {
@@ -384,7 +288,7 @@ var DxcFileInput = function DxcFileInput(_ref) {
     setIsDragging(false);
     var filesObject = e.dataTransfer.files;
 
-    if (filesObject && filesObject.length > 0) {
+    if ((filesObject === null || filesObject === void 0 ? void 0 : filesObject.length) > 0) {
       var filesArray = Object.keys(filesObject).map(function (key) {
         return filesObject[key];
       });
@@ -392,6 +296,76 @@ var DxcFileInput = function DxcFileInput(_ref) {
     }
   };
 
+  (0, _react.useEffect)(function () {
+    var getFiles = /*#__PURE__*/function () {
+      var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+        var valueFiles;
+        return _regenerator["default"].wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                if (!value) {
+                  _context4.next = 5;
+                  break;
+                }
+
+                _context4.next = 3;
+                return Promise.all(value.map( /*#__PURE__*/function () {
+                  var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(file) {
+                    var preview;
+                    return _regenerator["default"].wrap(function _callee3$(_context3) {
+                      while (1) {
+                        switch (_context3.prev = _context3.next) {
+                          case 0:
+                            if (!file.preview) {
+                              _context3.next = 4;
+                              break;
+                            }
+
+                            return _context3.abrupt("return", file);
+
+                          case 4:
+                            _context3.next = 6;
+                            return getFilePreview(file.file);
+
+                          case 6:
+                            preview = _context3.sent;
+                            return _context3.abrupt("return", _objectSpread(_objectSpread({}, file), {}, {
+                              preview: preview
+                            }));
+
+                          case 8:
+                          case "end":
+                            return _context3.stop();
+                        }
+                      }
+                    }, _callee3);
+                  }));
+
+                  return function (_x3) {
+                    return _ref5.apply(this, arguments);
+                  };
+                }()));
+
+              case 3:
+                valueFiles = _context4.sent;
+                setFiles(valueFiles);
+
+              case 5:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }));
+
+      return function getFiles() {
+        return _ref4.apply(this, arguments);
+      };
+    }();
+
+    getFiles();
+  }, [value]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.fileInput
   }, /*#__PURE__*/_react["default"].createElement(FileInputContainer, {
@@ -405,25 +379,29 @@ var DxcFileInput = function DxcFileInput(_ref) {
   }, helperText), mode === "file" ? /*#__PURE__*/_react["default"].createElement(FileContainer, {
     multiple: multiple,
     files: files
-  }, /*#__PURE__*/_react["default"].createElement(HiddenInputFile, {
+  }, /*#__PURE__*/_react["default"].createElement(ValueInput, {
     id: fileInputId,
     type: "file",
     accept: accept,
     multiple: multiple,
-    onChange: selectFiles
+    onChange: selectFiles,
+    name: name,
+    disabled: disabled,
+    readOnly: true,
+    "aria-hidden": "true"
   }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     mode: "secondary",
     label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : multiple ? translatedLabels.fileInput.multipleButtonLabelDefault : translatedLabels.fileInput.singleButtonLabelDefault,
     onClick: handleClick,
     disabled: disabled,
-    size: "medium",
+    size: "fitContent",
     tabIndex: tabIndex
-  }), files.map(function (file) {
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(FileItemContainer, {
-      mode: mode,
-      multiple: multiple,
-      files: files
-    }, /*#__PURE__*/_react["default"].createElement(_FileItem["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(FileItemListContainer, {
+    mode: mode,
+    multiple: multiple,
+    files: files
+  }, files.map(function (file) {
+    return /*#__PURE__*/_react["default"].createElement(_FileItem["default"], {
       mode: mode,
       multiple: multiple,
       name: file.file.name,
@@ -434,13 +412,17 @@ var DxcFileInput = function DxcFileInput(_ref) {
       type: file.file.type,
       onDelete: onDelete,
       tabIndex: tabIndex
-    })));
-  })) : /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(HiddenInputFile, {
+    });
+  }))) : /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ValueInput, {
     id: fileInputId,
     type: "file",
     accept: accept,
     multiple: multiple,
-    onChange: selectFiles
+    onChange: selectFiles,
+    name: name,
+    disabled: disabled,
+    readOnly: true,
+    "aria-hidden": "true"
   }), /*#__PURE__*/_react["default"].createElement(DragDropArea, {
     isDragging: isDragging,
     disabled: disabled,
@@ -461,12 +443,12 @@ var DxcFileInput = function DxcFileInput(_ref) {
     disabled: disabled
   }, dropAreaLabel !== null && dropAreaLabel !== void 0 ? dropAreaLabel : multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) : /*#__PURE__*/_react["default"].createElement(FiledropLabel, {
     disabled: disabled
-  }, dropAreaLabel !== null && dropAreaLabel !== void 0 ? dropAreaLabel : multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault)), files.map(function (file) {
-    return /*#__PURE__*/_react["default"].createElement(FileItemContainer, {
-      mode: mode,
-      multiple: multiple,
-      files: files
-    }, /*#__PURE__*/_react["default"].createElement(_FileItem["default"], {
+  }, dropAreaLabel !== null && dropAreaLabel !== void 0 ? dropAreaLabel : multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault)), /*#__PURE__*/_react["default"].createElement(FileItemListContainer, {
+    mode: mode,
+    multiple: multiple,
+    files: files
+  }, files.map(function (file) {
+    return /*#__PURE__*/_react["default"].createElement(_FileItem["default"], {
       mode: mode,
       multiple: multiple,
       name: file.file.name,
@@ -477,8 +459,8 @@ var DxcFileInput = function DxcFileInput(_ref) {
       type: file.file.type,
       onDelete: onDelete,
       tabIndex: tabIndex
-    }));
-  })), files.length === 1 && files.map(function (file) {
+    });
+  }))), files.length === 1 && files.map(function (file) {
     return file.error && mode === "file" && !multiple && /*#__PURE__*/_react["default"].createElement(ErrorMessage, null, file.error);
   })));
 };
@@ -519,7 +501,17 @@ var HelperText = _styledComponents["default"].span(_templateObject3 || (_templat
   return props.theme.helperTextLineHeight;
 });
 
-var DragDropArea = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  overflow: hidden;\n  box-sizing: border-box;\n  flex-direction: ", ";\n  ", ";\n  align-items: center;\n  height: ", ";\n  width: 320px;\n\n  box-shadow: 0 0 0 2px transparent;\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n\n  ", "\n\n  cursor: ", ";\n"])), function (props) {
+var FileContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  ", "\n  margin-top: 0.25rem;\n"])), function (props) {
+  return props.multiple || props.files.length > 1 ? "flex-direction: column; row-gap: 0.25rem;" : "flex-direction: row; column-gap: 0.25rem;";
+});
+
+var ValueInput = _styledComponents["default"].input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: none;\n"])));
+
+var FileItemListContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  row-gap: 0.25rem;\n"])));
+
+var Container = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  row-gap: 0.25rem;\n  margin-top: 0.25rem;\n"])));
+
+var DragDropArea = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: ", ";\n  ", ";\n  align-items: center;\n  height: ", ";\n  width: 320px;\n  overflow: hidden;\n  box-shadow: 0 0 0 2px transparent;\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n\n  ", "\n\n  cursor: ", ";\n"])), function (props) {
   return props.mode === "filedrop" ? "row" : "column";
 }, function (props) {
   return props.mode === "dropzone" && "justify-content: center; padding: 1rem;";
@@ -539,17 +531,11 @@ var DragDropArea = _styledComponents["default"].div(_templateObject4 || (_templa
   return props.disabled && "not-allowed";
 });
 
-var FileContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  margin-top: 0.25rem;\n"])), function (props) {
-  return props.multiple || props.files.length > 1 ? "column" : "row";
-});
-
-var HiddenInputFile = _styledComponents["default"].input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  visibility: hidden;\n  position: absolute;\n  width: 0px;\n  height: 0px;\n"])));
-
-var ButtonContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n"])), function (props) {
+var ButtonContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n"])), function (props) {
   return props.mode === "filedrop" && "padding: 2px 12px 2px 3px";
 });
 
-var DropzoneLabel = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 3;\n  text-align: center;\n  margin-top: 0.5rem;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n"])), function (props) {
+var DropzoneLabel = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 3;\n  text-align: center;\n  margin-top: 0.5rem;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n"])), function (props) {
   return props.disabled ? props.theme.disabledDropLabelFontColor : props.theme.dropLabelFontColor;
 }, function (props) {
   return props.theme.dropLabelFontFamily;
@@ -559,7 +545,7 @@ var DropzoneLabel = _styledComponents["default"].div(_templateObject8 || (_templ
   return props.theme.dropLabelFontWeight;
 });
 
-var FiledropLabel = _styledComponents["default"].span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  margin-right: 1rem;\n"])), function (props) {
+var FiledropLabel = _styledComponents["default"].span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  margin-right: 1rem;\n"])), function (props) {
   return props.disabled ? props.theme.disabledDropLabelFontColor : props.theme.dropLabelFontColor;
 }, function (props) {
   return props.theme.dropLabelFontFamily;
@@ -569,14 +555,6 @@ var FiledropLabel = _styledComponents["default"].span(_templateObject9 || (_temp
   return props.theme.dropLabelFontWeight;
 });
 
-var Container = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 0.25rem;\n"])));
-
-var FileItemContainer = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-top: ", ";\n  margin-left: ", ";\n"])), function (props) {
-  return (props.multiple || props.files.length > 1 || props.mode !== "file") && "4px";
-}, function (props) {
-  return props.mode === "file" && props.files.length === 1 && !props.multiple && "4px";
-});
-
 var ErrorMessage = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: 0.25rem;\n"])), function (props) {
   return props.theme.errorMessageFontColor;
 }, function (props) {

package/file-input/FileInput.stories.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import DxcFileInput from "./FileInput";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import FileItem from "./FileItem";
 
 export default {
   title: "File input",
@@ -65,17 +66,48 @@ const filesExamples = [
 
 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
+        mode="dropzone"
+        multiple={true}
+        name="file"
+        showPreview={false}
+        numFiles={1}
+        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
+        mode="dropzone"
+        multiple={true}
+        name="file"
+        showPreview={false}
+        numFiles={1}
+        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
+        mode="dropzone"
+        multiple={true}
+        name="file"
+        showPreview={false}
+        numFiles={1}
+        preview={picPreview}
+        type="image/png"
+        onDelete={() => {}}
+        tabIndex={0}
+      />
     </ExampleContainer>
     <Title title="File" theme="light" level={2} />
     <ExampleContainer>

package/file-input/FileInput.test.js

@@ -454,4 +454,45 @@ describe("FileInput component tests", function () {
       }
     }, _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);
+  });
 });