@dnb/eufemia 9.32.0 → 9.33.0

package/cjs/components/upload/UploadDropzone.js

@@ -0,0 +1,147 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.array.index-of.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = UploadDropzone;
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _HeightAnimation = _interopRequireDefault(require("../height-animation/HeightAnimation"));
+
+var _UploadContext = require("./UploadContext");
+
+var _svg;
+
+var _excluded = ["children", "className"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function UploadDropzone(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var props = rest;
+
+  var context = _react.default.useContext(_UploadContext.UploadContext);
+
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      hover = _React$useState2[0],
+      setHover = _React$useState2[1];
+
+  var hoverTimeout = _react.default.useRef();
+
+  var onInputUpload = context.onInputUpload;
+
+  var getFiles = function getFiles(event) {
+    var fileData = event.dataTransfer;
+    var files = [];
+    Array.from(fileData.files).forEach(function (file, i) {
+      files.push({
+        file: file
+      });
+    });
+    return files;
+  };
+
+  var hoverHandler = function hoverHandler(event, state) {
+    event.stopPropagation();
+    event.preventDefault();
+    clearTimers();
+    setHover(state);
+  };
+
+  var dropHandler = function dropHandler(event) {
+    var files = getFiles(event);
+    onInputUpload(files);
+    hoverHandler(event, false);
+  };
+
+  var dragEnterHandler = function dragEnterHandler(event) {
+    hoverHandler(event, true);
+  };
+
+  var dragLeaveHandler = function dragLeaveHandler(event) {
+    hoverHandler(event, false);
+  };
+
+  var clearTimers = function clearTimers() {
+    clearTimeout(hoverTimeout.current);
+  };
+
+  _react.default.useEffect(function () {
+    return clearTimers;
+  }, []);
+
+  return _react.default.createElement(_HeightAnimation.default, _extends({
+    className: (0, _classnames.default)(className, hover && 'dnb-upload--active'),
+    onDrop: dropHandler,
+    onDragOver: dragEnterHandler,
+    onDragLeave: dragLeaveHandler
+  }, props), children, _svg || (_svg = _react.default.createElement("svg", {
+    className: "dnb-upload__outline",
+    "aria-hidden": true,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none"
+  }, _react.default.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    rx: "0.5rem",
+    ry: "0.5rem",
+    strokeWidth: "3",
+    strokeDashoffset: "4",
+    strokeDasharray: "8 8"
+  }))));
+}

package/cjs/components/upload/UploadFileInput.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const UploadFileInput: () => JSX.Element;
+export default UploadFileInput;

package/cjs/components/upload/UploadFileInput.js

@@ -0,0 +1,123 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.array.reduce.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Button = _interopRequireDefault(require("../button/Button"));
+
+var _icons = require("../../icons");
+
+var _componentHelper = require("../../shared/component-helper");
+
+var _UploadContext = require("./UploadContext");
+
+var _UploadStatus2 = _interopRequireDefault(require("./UploadStatus"));
+
+var _useUpload2 = _interopRequireDefault(require("./useUpload"));
+
+var _UploadStatus;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var UploadFileInput = function UploadFileInput() {
+  var fileInput = (0, _react.useRef)(null);
+
+  var context = _react.default.useContext(_UploadContext.UploadContext);
+
+  var id = context.id,
+      acceptedFileTypes = context.acceptedFileTypes,
+      buttonText = context.buttonText,
+      onInputUpload = context.onInputUpload,
+      filesAmountLimit = context.filesAmountLimit;
+
+  var _useUpload = (0, _useUpload2.default)(id),
+      internalFiles = _useUpload.internalFiles;
+
+  var accept = acceptedFileTypes.reduce(function (accept, format, index) {
+    var previus = index === 0 ? '' : "".concat(accept, ",");
+    return "".concat(previus, " .").concat(format);
+  }, '');
+  (0, _react.useEffect)(function () {
+    fileInput.current.value = null;
+    fileInput.current.accept = accept;
+  }, []);
+
+  var openFileDialog = function openFileDialog() {
+    var _fileInput$current;
+
+    return (_fileInput$current = fileInput.current) === null || _fileInput$current === void 0 ? void 0 : _fileInput$current.click();
+  };
+
+  var sharedId = id || (0, _componentHelper.makeUniqueId)();
+  return _react.default.createElement("div", {
+    "data-testid": "upload-file-input"
+  }, _react.default.createElement(_Button.default, {
+    top: "medium",
+    id: "".concat(sharedId, "-input"),
+    "data-testid": "upload-file-input-button",
+    className: "dnb-upload__file-input-button",
+    icon: _icons.folder,
+    icon_position: "left",
+    variant: "secondary",
+    wrap: true,
+    onClick: openFileDialog,
+    disabled: internalFiles.length > filesAmountLimit
+  }, buttonText), _UploadStatus || (_UploadStatus = _react.default.createElement(_UploadStatus2.default, null)), _react.default.createElement("input", {
+    "aria-labelledby": "".concat(sharedId, "-input"),
+    "data-testid": "upload-file-input-input",
+    ref: fileInput,
+    className: "dnb-upload__file-input",
+    type: "file",
+    onChange: handleFileInput,
+    multiple: filesAmountLimit > 1
+  }));
+
+  function handleFileInput(event) {
+    var target = event.target;
+    var files = target.files;
+    onInputUpload(Array.from(files).map(function (file) {
+      return {
+        file: file
+      };
+    }));
+  }
+};
+
+var _default = UploadFileInput;
+exports.default = _default;

package/cjs/components/upload/UploadFileList.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function UploadFileList(): JSX.Element;
+export default UploadFileList;

package/cjs/components/upload/UploadFileList.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _UploadContext = require("./UploadContext");
+
+var _UploadFileListCell = _interopRequireDefault(require("./UploadFileListCell"));
+
+var _useUpload2 = _interopRequireDefault(require("./useUpload"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function UploadFileList() {
+  var context = _react.default.useContext(_UploadContext.UploadContext);
+
+  var id = context.id,
+      fileListAriaLabel = context.fileListAriaLabel,
+      deleteButton = context.deleteButton,
+      loadingText = context.loadingText,
+      onFileDelete = context.onFileDelete,
+      onChange = context.onChange;
+
+  var _useUpload = (0, _useUpload2.default)(id),
+      files = _useUpload.files,
+      setFiles = _useUpload.setFiles,
+      setInternalFiles = _useUpload.setInternalFiles;
+
+  if (files == null || files.length < 1) {
+    return null;
+  }
+
+  return _react.default.createElement("ul", {
+    "data-testid": "upload-file-list",
+    className: "dnb-upload__file-list",
+    "aria-label": fileListAriaLabel
+  }, files.map(function (uploadFile, index) {
+    var onDeleteHandler = function onDeleteHandler() {
+      if (typeof onFileDelete === 'function') {
+        onFileDelete({
+          fileItem: uploadFile
+        });
+      }
+
+      var cleanedFiles = files.filter(function (fileListElement) {
+        return fileListElement.file != uploadFile.file;
+      });
+      setFiles(cleanedFiles);
+      setInternalFiles(cleanedFiles);
+
+      if (typeof onChange === 'function') {
+        onChange({
+          files: cleanedFiles
+        });
+      }
+    };
+
+    return _react.default.createElement(_UploadFileListCell.default, {
+      key: index,
+      uploadFile: uploadFile,
+      onDelete: onDeleteHandler,
+      deleteButtonText: deleteButton,
+      loadingText: loadingText
+    });
+  }));
+}
+
+var _default = UploadFileList;
+exports.default = _default;

package/cjs/components/upload/UploadFileListCell.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { UploadFile } from './types';
+export declare type UploadFileListCellProps = {
+    /**
+     * Uploaded file
+     */
+    uploadFile: UploadFile;
+    /**
+     * Calls onDelete when clicking the delete button
+     */
+    onDelete: () => void;
+    /**
+     * Text
+     */
+    loadingText: React.ReactNode;
+    deleteButtonText: React.ReactNode;
+};
+declare const UploadFileListCell: ({ uploadFile, onDelete, loadingText, deleteButtonText, }: UploadFileListCellProps) => JSX.Element;
+export default UploadFileListCell;

package/cjs/components/upload/UploadFileListCell.js

@@ -0,0 +1,171 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.split.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/web.url.js");
+
+require("core-js/modules/web.url-search-params.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Button = _interopRequireDefault(require("../button/Button"));
+
+var _Icon2 = _interopRequireDefault(require("../../components/Icon"));
+
+var _FormStatus2 = _interopRequireDefault(require("../../components/FormStatus"));
+
+var _progressIndicator = _interopRequireDefault(require("../../components/progress-indicator"));
+
+var _P = _interopRequireDefault(require("../../../src/elements/P"));
+
+var _icons = require("../../icons");
+
+var _componentHelper = require("../../shared/component-helper");
+
+var _ProgressIndicator, _Icon;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var images = {
+  pdf: _icons.file_pdf_medium,
+  xls: _icons.file_xls_medium,
+  ppt: _icons.file_ppt_medium,
+  csv: _icons.file_csv_medium,
+  txt: _icons.file_txt_medium,
+  xml: _icons.file_xml_medium,
+  file: _icons.file_medium
+};
+
+var UploadFileListCell = function UploadFileListCell(_ref) {
+  var _div, _a, _FormStatus;
+
+  var uploadFile = _ref.uploadFile,
+      onDelete = _ref.onDelete,
+      loadingText = _ref.loadingText,
+      deleteButtonText = _ref.deleteButtonText;
+  var file = uploadFile.file,
+      errorMessage = uploadFile.errorMessage,
+      isLoading = uploadFile.isLoading;
+  var name = file.name,
+      type = file.type;
+  var fileType = type.split('/')[1];
+  var hasWarning = errorMessage != null;
+  var imageUrl = URL.createObjectURL(file);
+  var cellRef = (0, _react.useRef)();
+
+  var handleDisappearFocus = function handleDisappearFocus() {
+    try {
+      var cellElement = cellRef.current;
+      var focusElement = (0, _componentHelper.getPreviousSibling)('.dnb-upload', cellElement).querySelector('.dnb-upload__file-input-button');
+      focusElement.focus();
+    } catch (e) {
+      (0, _componentHelper.warn)(e);
+    }
+  };
+
+  var onDeleteHandler = function onDeleteHandler() {
+    handleDisappearFocus();
+    onDelete();
+  };
+
+  return _react.default.createElement("li", {
+    "data-testid": "upload-file-list-cell",
+    className: 'dnb-upload__file-cell' + (hasWarning ? " dnb-upload__file-cell--warning" : ""),
+    ref: cellRef
+  }, _react.default.createElement("div", {
+    className: "dnb-upload__file-cell__content"
+  }, _react.default.createElement("div", {
+    className: "dnb-upload__file-cell__content__left"
+  }, getIcon(), getTitle()), _react.default.createElement("div", null, _react.default.createElement(_Button.default, {
+    "data-testid": "upload-delete-button",
+    icon: _icons.trash,
+    variant: "tertiary",
+    onClick: onDeleteHandler,
+    icon_position: "left"
+  }, deleteButtonText))), getWarning());
+
+  function getIcon() {
+    if (isLoading) {
+      return _ProgressIndicator || (_ProgressIndicator = _react.default.createElement(_progressIndicator.default, {
+        "data-testid": "upload-progress-indicator"
+      }));
+    }
+
+    if (hasWarning) return _Icon || (_Icon = _react.default.createElement(_Icon2.default, {
+      icon: _icons.exclamation_medium
+    }));
+    var iconFileType = fileType;
+
+    if (!Object.prototype.hasOwnProperty.call(images, fileType)) {
+      iconFileType = 'file';
+    }
+
+    return _react.default.createElement(_Icon2.default, {
+      icon: images[iconFileType]
+    });
+  }
+
+  function getTitle() {
+    return isLoading ? _div || (_div = _react.default.createElement("div", {
+      className: "dnb-upload__file-cell__text-container dnb-upload__file-cell__text-container--loading"
+    }, loadingText)) : _react.default.createElement("div", {
+      className: "dnb-upload__file-cell__text-container"
+    }, _a || (_a = _react.default.createElement("a", {
+      "data-testid": "upload-file-anchor",
+      target: "_blank",
+      href: imageUrl,
+      className: "dnb-anchor dnb-upload__file-cell__title",
+      rel: "noopener noreferrer"
+    }, name)), _react.default.createElement(_P.default, {
+      "data-testid": "upload-subtitle",
+      className: "dnb-upload__file-cell__subtitle",
+      size: "x-small",
+      top: "xx-small"
+    }, fileType.toUpperCase()));
+  }
+
+  function getWarning() {
+    return hasWarning ? _FormStatus || (_FormStatus = _react.default.createElement(_FormStatus2.default, {
+      "data-testid": "upload-warning",
+      top: "small",
+      text: errorMessage,
+      stretch: true
+    })) : null;
+  }
+};
+
+var _default = UploadFileListCell;
+exports.default = _default;

package/cjs/components/upload/UploadInfo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const UploadInfo: () => JSX.Element;
+export default UploadInfo;

package/cjs/components/upload/UploadInfo.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.array.join.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.replace.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.regexp.to-string.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _UploadContext = require("./UploadContext");
+
+var _Lead = _interopRequireDefault(require("../../elements/Lead"));
+
+var _P = _interopRequireDefault(require("../../elements/P"));
+
+var _Dl = _interopRequireDefault(require("../../elements/Dl"));
+
+var _Dt = _interopRequireDefault(require("../../elements/Dt"));
+
+var _Dd = _interopRequireDefault(require("../../elements/Dd"));
+
+var _NumberUtils = require("../number-format/NumberUtils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var UploadInfo = function UploadInfo() {
+  var context = _react.default.useContext(_UploadContext.UploadContext);
+
+  var title = context.title,
+      text = context.text,
+      acceptedFileTypes = context.acceptedFileTypes,
+      fileTypeDescription = context.fileTypeDescription,
+      fileSizeDescription = context.fileSizeDescription,
+      fileAmountDescription = context.fileAmountDescription,
+      fileSizeContent = context.fileSizeContent,
+      filesAmountLimit = context.filesAmountLimit,
+      fileMaxSize = context.fileMaxSize;
+  var prettyfiedAcceptedFileFormats = acceptedFileTypes.join(', ').toUpperCase();
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Lead.default, {
+    "data-testid": "upload-title",
+    space: "0"
+  }, title), _react.default.createElement(_P.default, {
+    "data-testid": "upload-text",
+    top: "xx-small",
+    className: "dnb-upload__text"
+  }, text), _react.default.createElement(_Dl.default, {
+    top: "small",
+    bottom: 0,
+    direction: "horizontal",
+    className: "dnb-upload__condition-list"
+  }, _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, {
+    "data-testid": "upload-accepted-formats"
+  }, fileTypeDescription), _react.default.createElement(_Dd.default, null, prettyfiedAcceptedFileFormats)), _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, {
+    "data-testid": "upload-file-size"
+  }, fileSizeDescription), _react.default.createElement(_Dd.default, null, String(fileSizeContent).replace('%size', (0, _NumberUtils.format)(fileMaxSize).toString()))), filesAmountLimit < _UploadContext.defaultProps.filesAmountLimit && _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, {
+    "data-testid": "upload-file-amount-limit"
+  }, fileAmountDescription), _react.default.createElement(_Dd.default, null, filesAmountLimit))));
+};
+
+var _default = UploadInfo;
+exports.default = _default;

package/cjs/components/upload/UploadStatus.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const UploadStatus: () => JSX.Element;
+export default UploadStatus;

package/cjs/components/upload/UploadStatus.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.replace.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _UploadContext = require("./UploadContext");
+
+var _FormStatus = _interopRequireDefault(require("../FormStatus"));
+
+var _useUpload2 = _interopRequireDefault(require("./useUpload"));
+
+var _HeightAnimation = _interopRequireDefault(require("../height-animation/HeightAnimation"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var UploadStatus = function UploadStatus() {
+  var context = _react.default.useContext(_UploadContext.UploadContext);
+
+  var id = context.id,
+      filesAmountLimit = context.filesAmountLimit,
+      errorAmountLimit = context.errorAmountLimit;
+
+  var _useUpload = (0, _useUpload2.default)(id),
+      internalFiles = _useUpload.internalFiles;
+
+  return _react.default.createElement(_HeightAnimation.default, {
+    open: internalFiles.length > filesAmountLimit
+  }, _react.default.createElement(_FormStatus.default, {
+    top: true,
+    stretch: true
+  }, String(errorAmountLimit).replace('%amount', String(filesAmountLimit))));
+};
+
+var _default = UploadStatus;
+exports.default = _default;

package/cjs/components/upload/UploadVerify.d.ts

@@ -0,0 +1,2 @@
+import { UploadContextProps, UploadFile } from './types';
+export declare function verifyFiles(files: UploadFile[], context: Pick<UploadContextProps, 'errorUnsupportedFile' | 'errorLargeFile' | 'acceptedFileTypes' | 'fileMaxSize'>): UploadFile[];