@dnb/eufemia 9.47.0 → 9.47.1

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.47.1](https://github.com/dnbexperience/eufemia/compare/v9.47.0...v9.47.1) (2023-02-13)
+
+
+### Bug Fixes
+
+* **InputMasked:** avoid inherit mask options and types when custom mask is used ([#1988](https://github.com/dnbexperience/eufemia/issues/1988)) ([8937bcc](https://github.com/dnbexperience/eufemia/commit/8937bcc7842ba079318215c23d5e47c38fc91aeb))
+* **InputMasked:** fix negative value updates (number mask) ([#1792](https://github.com/dnbexperience/eufemia/issues/1792)) ([e2b9482](https://github.com/dnbexperience/eufemia/commit/e2b94826d08572cb3008cb837658186644b8d0ba))
+* **Upload:** fix handling of file types in combination with file extension ([#1986](https://github.com/dnbexperience/eufemia/issues/1986)) ([3fd9bfa](https://github.com/dnbexperience/eufemia/commit/3fd9bfab541dba28980edb1ef00c403723d8b4e7))
+
 # [9.47.0](https://github.com/dnbexperience/eufemia/compare/v9.46.2...v9.47.0) (2023-02-05)
 
 

package/cjs/components/input-masked/InputMasked.js

@@ -33,6 +33,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.regexp.exec.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -64,6 +66,16 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var InputMasked = _react.default.forwardRef(function (props, ref) {
   var context = _react.default.useContext(_Context.default);
 
+  if (props !== null && props !== void 0 && props.mask) {
+    var alias = context === null || context === void 0 ? void 0 : context.InputMasked;
+
+    for (var key in alias) {
+      if (/^as[_A-Z]|number_mask|currency_mask/.test(key)) {
+        delete alias[key];
+      }
+    }
+  }
+
   var contextAndProps = _react.default.useCallback((0, _componentHelper.extendPropsWithContext)(props, InputMasked.defaultProps, context === null || context === void 0 ? void 0 : context.InputMasked), [props, InputMasked.defaultProps, context === null || context === void 0 ? void 0 : context.InputMasked]);
 
   return _react.default.createElement(_InputMaskedContext.default.Provider, {
@@ -107,7 +119,7 @@ process.env.NODE_ENV !== "production" ? InputMasked.propTypes = _objectSpread({
   on_submit_blur: _propTypes.default.func
 }, _Input.inputPropTypes) : void 0;
 InputMasked.defaultProps = _objectSpread(_objectSpread({}, _Input.default.defaultProps), {}, {
-  mask: [],
+  mask: null,
   number_mask: null,
   currency_mask: null,
   mask_options: null,

package/cjs/components/input-masked/InputMaskedHooks.js

@@ -286,7 +286,7 @@ var useInputElement = function useInputElement() {
       inputRef: ref,
       inputElement: inputElementRef.current,
       pipe: pipe,
-      mask: mask,
+      mask: mask || [],
       showMask: showMask,
       guide: showGuide,
       keepCharPositions: keepCharPositions,

package/cjs/components/input-masked/InputMaskedUtils.js

@@ -163,8 +163,8 @@ var correctNumberValue = function correctNumberValue(_ref5) {
   value = value.replace('.', decimalSymbol);
 
   if (localValue !== null) {
-    var localNumberValue = localValue.replace(/[^\d,.]/g, '');
-    var numberValue = value.replace(/[^\d,.]/g, '');
+    var localNumberValue = localValue.replace(/[^\d,.-]/g, '');
+    var numberValue = value.replace(/[^\d,.-]/g, '');
     var endsWithDecimal = localNumberValue.endsWith(decimalSymbol);
     var endsWithZeroAndDecimal = localNumberValue.endsWith("".concat(decimalSymbol, "0"));
 
@@ -178,7 +178,7 @@ var correctNumberValue = function correctNumberValue(_ref5) {
       value = localValue;
     }
 
-    if (/^-|-0$/.test(localValue)) {
+    if (/^(-|-0)$/.test(localValue.replace(/[^\d-0]/g, ''))) {
       value = localValue;
     } else if (localNumberValue === '' && numberValue === '0') {
       value = '';

package/cjs/components/upload/Upload.js

@@ -159,7 +159,6 @@ var Upload = function Upload(localProps) {
   }, _react.default.createElement(_Provider.default, {
     skeleton: skeleton
   }, _react.default.createElement(_UploadDropzone.default, _extends({
-    "data-testid": "upload",
     className: (0, _classnames.default)('dnb-upload', spacingClasses, className)
   }, props), _UploadInfo || (_UploadInfo = _react.default.createElement(_UploadInfo2.default, null)), _UploadFileInput || (_UploadFileInput = _react.default.createElement(_UploadFileInput2.default, null)), _UploadFileList || (_UploadFileList = _react.default.createElement(_UploadFileList2.default, null)))));
 

package/cjs/components/upload/UploadFileInput.js

@@ -23,8 +23,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-require("core-js/modules/es.array.join.js");
-
 require("core-js/modules/es.array.map.js");
 
 require("core-js/modules/es.array.from.js");
@@ -71,15 +69,10 @@ var UploadFileInput = function UploadFileInput() {
   };
 
   var sharedId = id || (0, _componentHelper.makeUniqueId)();
-  var accept = (0, _UploadVerify.extendWithAbbreviation)(acceptedFileTypes).map(function (type) {
-    return ".".concat(type);
-  }).join(',');
-  return _react.default.createElement("div", {
-    "data-testid": "upload-file-input"
-  }, _react.default.createElement(_Button.default, {
+  var accept = (0, _UploadVerify.getAcceptedFileTypes)(acceptedFileTypes);
+  return _react.default.createElement("div", null, _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",
@@ -88,7 +81,6 @@ var UploadFileInput = function UploadFileInput() {
     onClick: openFileDialog
   }, 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,
     accept: accept,
     className: "dnb-upload__file-input",

package/cjs/components/upload/UploadFileList.js

@@ -41,7 +41,6 @@ function UploadFileList() {
   }
 
   return _react.default.createElement("ul", {
-    "data-testid": "upload-file-list",
     className: "dnb-upload__file-list",
     "aria-label": fileListAriaLabel
   }, files.map(function (uploadFile, index) {

package/cjs/components/upload/UploadFileListCell.js

@@ -21,12 +21,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 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");
@@ -39,6 +33,12 @@ require("core-js/modules/web.url.js");
 
 require("core-js/modules/web.url-search-params.js");
 
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.split.js");
+
+require("core-js/modules/es.function.name.js");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -51,7 +51,7 @@ var _FormStatus2 = _interopRequireDefault(require("../../components/FormStatus")
 
 var _progressIndicator = _interopRequireDefault(require("../../components/progress-indicator"));
 
-var _P = _interopRequireDefault(require("../../elements/P"));
+var _P2 = _interopRequireDefault(require("../../elements/P"));
 
 var _icons = require("../../icons");
 
@@ -59,6 +59,8 @@ var _componentHelper = require("../../shared/component-helper");
 
 var _useUpload2 = _interopRequireDefault(require("./useUpload"));
 
+var _UploadVerify = require("./UploadVerify");
+
 var _ProgressIndicator, _Icon;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -90,7 +92,7 @@ var images = {
 };
 
 var UploadFileListCell = function UploadFileListCell(_ref) {
-  var _div, _a, _FormStatus;
+  var _div, _P, _FormStatus;
 
   var id = _ref.id,
       uploadFile = _ref.uploadFile,
@@ -100,10 +102,9 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
   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 fileType = (0, _UploadVerify.getFileTypeFromExtension)(file);
+  var humanFileType = fileType.toUpperCase();
   var imageUrl = URL.createObjectURL(file);
   var cellRef = (0, _react.useRef)();
   var exists = useExistsHighlight(id, file);
@@ -124,7 +125,6 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
   };
 
   return _react.default.createElement("li", {
-    "data-testid": "upload-file-list-cell",
     className: (0, _classnames.default)('dnb-upload__file-cell', hasWarning && 'dnb-upload__file-cell--warning', exists && 'dnb-upload__file-cell--highlight'),
     ref: cellRef
   }, _react.default.createElement("div", {
@@ -132,7 +132,6 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
   }, _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,
@@ -141,9 +140,7 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
 
   function getIcon() {
     if (isLoading) {
-      return _ProgressIndicator || (_ProgressIndicator = _react.default.createElement(_progressIndicator.default, {
-        "data-testid": "upload-progress-indicator"
-      }));
+      return _ProgressIndicator || (_ProgressIndicator = _react.default.createElement(_progressIndicator.default, null));
     }
 
     if (hasWarning) return _Icon || (_Icon = _react.default.createElement(_Icon2.default, {
@@ -151,7 +148,12 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
     }));
     var iconFileType = fileType;
 
-    if (!Object.prototype.hasOwnProperty.call(images, fileType)) {
+    if (!iconFileType) {
+      var mimeParts = file.type.split('/');
+      iconFileType = images[mimeParts[0]] || images[mimeParts[1]];
+    }
+
+    if (!Object.prototype.hasOwnProperty.call(images, iconFileType)) {
       iconFileType = 'file';
     }
 
@@ -165,23 +167,20 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
       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",
+    }, _react.default.createElement("a", {
       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",
+    }, file.name), _P || (_P = _react.default.createElement(_P2.default, {
       className: "dnb-upload__file-cell__subtitle",
       size: "x-small",
       top: "xx-small"
-    }, fileType.toUpperCase()));
+    }, humanFileType)));
   }
 
   function getWarning() {
     return hasWarning ? _FormStatus || (_FormStatus = _react.default.createElement(_FormStatus2.default, {
-      "data-testid": "upload-warning",
       top: "small",
       text: errorMessage,
       stretch: true

package/cjs/components/upload/UploadInfo.js

@@ -47,10 +47,8 @@ var UploadInfo = function UploadInfo() {
       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, {
@@ -58,13 +56,7 @@ var UploadInfo = function UploadInfo() {
     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))));
+  }, prettyfiedAcceptedFileFormats && _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, null, fileTypeDescription), _react.default.createElement(_Dd.default, null, prettyfiedAcceptedFileFormats)), _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, null, 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, null, fileAmountDescription), _react.default.createElement(_Dd.default, null, filesAmountLimit))));
 };
 
 var _default = UploadInfo;

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

@@ -1,5 +1,8 @@
 import { UploadFile, UploadContextProps, UploadAcceptedFileTypes } from './types';
 export declare function verifyFiles(files: UploadFile[], context: Pick<UploadContextProps, 'errorUnsupportedFile' | 'errorLargeFile' | 'acceptedFileTypes' | 'fileMaxSize'>): UploadFile[];
+export declare function getFileTypeFromExtension(file: File): string;
+export declare function getAcceptedFileTypes(acceptedFileTypes: UploadAcceptedFileTypes): string;
+export declare function hasPreferredMimeType(acceptedFileTypes: UploadAcceptedFileTypes, file: File): boolean;
 export declare function extendWithAbbreviation(acceptedFileTypes: UploadAcceptedFileTypes, abbreviations?: {
     jpg: string;
 }): string[];

package/cjs/components/upload/UploadVerify.js

@@ -16,12 +16,13 @@ require("core-js/modules/es.array.from.js");
 
 require("core-js/modules/es.array.slice.js");
 
-require("core-js/modules/es.function.name.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.extendWithAbbreviation = extendWithAbbreviation;
+exports.getAcceptedFileTypes = getAcceptedFileTypes;
+exports.getFileTypeFromExtension = getFileTypeFromExtension;
+exports.hasPreferredMimeType = hasPreferredMimeType;
 exports.verifyFiles = verifyFiles;
 
 require("core-js/modules/es.regexp.exec.js");
@@ -38,6 +39,12 @@ require("core-js/modules/es.string.includes.js");
 
 require("core-js/modules/es.array.map.js");
 
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.join.js");
+
+require("core-js/modules/es.string.split.js");
+
 require("core-js/modules/web.dom-collections.for-each.js");
 
 require("core-js/modules/es.object.entries.js");
@@ -81,8 +88,9 @@ function verifyFiles(files, context) {
       return false;
     }
 
+    var fileType = hasPreferredMimeType(acceptedFileTypes, file) ? file.type : getFileTypeFromExtension(file) || file.type;
     var foundType = extendWithAbbreviation(acceptedFileTypes).some(function (type) {
-      return file.type.includes(type);
+      return fileType.includes(type);
     });
     return !foundType ? errorUnsupportedFile : null;
   };
@@ -100,6 +108,22 @@ function verifyFiles(files, context) {
   return cleanedFiles;
 }
 
+function getFileTypeFromExtension(file) {
+  return file.name.includes('.') && file.name.replace(/.*\.([^.]+)$/, '$1') || null;
+}
+
+function getAcceptedFileTypes(acceptedFileTypes) {
+  return extendWithAbbreviation(acceptedFileTypes).map(function (type) {
+    return type.includes('/') ? type : ".".concat(type);
+  }).join(',');
+}
+
+function hasPreferredMimeType(acceptedFileTypes, file) {
+  return file.type.split('/')[1] && (!(acceptedFileTypes !== null && acceptedFileTypes !== void 0 && acceptedFileTypes.length) || (acceptedFileTypes === null || acceptedFileTypes === void 0 ? void 0 : acceptedFileTypes.some(function (type) {
+    return type.toLowerCase() === file.type.toLowerCase();
+  })));
+}
+
 function extendWithAbbreviation(acceptedFileTypes) {
   var abbreviations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     jpg: 'jpeg'

package/cjs/shared/Eufemia.js

@@ -21,7 +21,7 @@ function init() {
       _createClass(Eufemia, [{
         key: "version",
         get: function get() {
-          return '9.47.0';
+          return '9.47.1';
         }
       }]);
 

package/components/input-masked/InputMasked.js

@@ -13,6 +13,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+import "core-js/modules/es.regexp.exec.js";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { registerElement, extendPropsWithContext } from '../../shared/component-helper';
@@ -22,6 +23,17 @@ import Input, { inputPropTypes } from '../input/Input';
 import Context from '../../shared/Context';
 var InputMasked = React.forwardRef(function (props, ref) {
   var context = React.useContext(Context);
+
+  if (props !== null && props !== void 0 && props.mask) {
+    var alias = context === null || context === void 0 ? void 0 : context.InputMasked;
+
+    for (var key in alias) {
+      if (/^as[_A-Z]|number_mask|currency_mask/.test(key)) {
+        delete alias[key];
+      }
+    }
+  }
+
   var contextAndProps = React.useCallback(extendPropsWithContext(props, InputMasked.defaultProps, context === null || context === void 0 ? void 0 : context.InputMasked), [props, InputMasked.defaultProps, context === null || context === void 0 ? void 0 : context.InputMasked]);
   return React.createElement(InputMaskedContext.Provider, {
     value: {
@@ -62,7 +74,7 @@ process.env.NODE_ENV !== "production" ? InputMasked.propTypes = _objectSpread({
   on_submit_blur: PropTypes.func
 }, inputPropTypes) : void 0;
 InputMasked.defaultProps = _objectSpread(_objectSpread({}, Input.defaultProps), {}, {
-  mask: [],
+  mask: null,
   number_mask: null,
   currency_mask: null,
   mask_options: null,

package/components/input-masked/InputMaskedHooks.js

@@ -198,7 +198,7 @@ export var useInputElement = function useInputElement() {
       inputRef: ref,
       inputElement: inputElementRef.current,
       pipe: pipe,
-      mask: mask,
+      mask: mask || [],
       showMask: showMask,
       guide: showGuide,
       keepCharPositions: keepCharPositions,

package/components/input-masked/InputMaskedUtils.js

@@ -94,8 +94,8 @@ export var correctNumberValue = function correctNumberValue(_ref5) {
   value = value.replace('.', decimalSymbol);
 
   if (localValue !== null) {
-    var localNumberValue = localValue.replace(/[^\d,.]/g, '');
-    var numberValue = value.replace(/[^\d,.]/g, '');
+    var localNumberValue = localValue.replace(/[^\d,.-]/g, '');
+    var numberValue = value.replace(/[^\d,.-]/g, '');
     var endsWithDecimal = localNumberValue.endsWith(decimalSymbol);
     var endsWithZeroAndDecimal = localNumberValue.endsWith("".concat(decimalSymbol, "0"));
 
@@ -109,7 +109,7 @@ export var correctNumberValue = function correctNumberValue(_ref5) {
       value = localValue;
     }
 
-    if (/^-|-0$/.test(localValue)) {
+    if (/^(-|-0)$/.test(localValue.replace(/[^\d-0]/g, ''))) {
       value = localValue;
     } else if (localNumberValue === '' && numberValue === '0') {
       value = '';

package/components/upload/Upload.js

@@ -85,7 +85,6 @@ var Upload = function Upload(localProps) {
   }, React.createElement(Provider, {
     skeleton: skeleton
   }, React.createElement(UploadDropzone, _extends({
-    "data-testid": "upload",
     className: classnames('dnb-upload', spacingClasses, className)
   }, props), _UploadInfo || (_UploadInfo = React.createElement(UploadInfo, null)), _UploadFileInput || (_UploadFileInput = React.createElement(UploadFileInput, null)), _UploadFileList || (_UploadFileList = React.createElement(UploadFileList, null)))));
 

package/components/upload/UploadFileInput.js

@@ -1,6 +1,5 @@
 var _UploadStatus;
 
-import "core-js/modules/es.array.join.js";
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.string.iterator.js";
@@ -10,7 +9,7 @@ import { folder as FolderIcon } from '../../icons';
 import { makeUniqueId } from '../../shared/component-helper';
 import { UploadContext } from './UploadContext';
 import UploadStatus from './UploadStatus';
-import { extendWithAbbreviation } from './UploadVerify';
+import { getAcceptedFileTypes } from './UploadVerify';
 
 var UploadFileInput = function UploadFileInput() {
   var fileInput = useRef(null);
@@ -28,15 +27,10 @@ var UploadFileInput = function UploadFileInput() {
   };
 
   var sharedId = id || makeUniqueId();
-  var accept = extendWithAbbreviation(acceptedFileTypes).map(function (type) {
-    return ".".concat(type);
-  }).join(',');
-  return React.createElement("div", {
-    "data-testid": "upload-file-input"
-  }, React.createElement(Button, {
+  var accept = getAcceptedFileTypes(acceptedFileTypes);
+  return React.createElement("div", null, React.createElement(Button, {
     top: "medium",
     id: "".concat(sharedId, "-input"),
-    "data-testid": "upload-file-input-button",
     className: "dnb-upload__file-input-button",
     icon: FolderIcon,
     icon_position: "left",
@@ -45,7 +39,6 @@ var UploadFileInput = function UploadFileInput() {
     onClick: openFileDialog
   }, buttonText), _UploadStatus || (_UploadStatus = React.createElement(UploadStatus, null)), React.createElement("input", {
     "aria-labelledby": "".concat(sharedId, "-input"),
-    "data-testid": "upload-file-input-input",
     ref: fileInput,
     accept: accept,
     className: "dnb-upload__file-input",

package/components/upload/UploadFileList.js

@@ -25,7 +25,6 @@ function UploadFileList() {
   }
 
   return React.createElement("ul", {
-    "data-testid": "upload-file-list",
     className: "dnb-upload__file-list",
     "aria-label": fileListAriaLabel
   }, files.map(function (uploadFile, index) {

package/components/upload/UploadFileListCell.js

@@ -2,15 +2,15 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 
 var _ProgressIndicator, _Icon;
 
-import "core-js/modules/es.function.name.js";
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.string.split.js";
 import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/web.url.js";
 import "core-js/modules/web.url-search-params.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.split.js";
+import "core-js/modules/es.function.name.js";
 import React, { useRef } from 'react';
 import classnames from 'classnames';
 import Button from '../button/Button';
@@ -21,6 +21,7 @@ import P from '../../elements/P';
 import { trash as TrashIcon, exclamation_medium as ExclamationIcon, file_pdf_medium as pdf, file_xls_medium as xls, file_ppt_medium as ppt, file_csv_medium as csv, file_txt_medium as txt, file_xml_medium as xml, file_medium as file } from '../../icons';
 import { getPreviousSibling, warn } from '../../shared/component-helper';
 import useUpload from './useUpload';
+import { getFileTypeFromExtension } from './UploadVerify';
 var images = {
   pdf: pdf,
   xls: xls,
@@ -32,7 +33,7 @@ var images = {
 };
 
 var UploadFileListCell = function UploadFileListCell(_ref) {
-  var _div, _a, _FormStatus;
+  var _div, _P, _FormStatus;
 
   var id = _ref.id,
       uploadFile = _ref.uploadFile,
@@ -42,10 +43,9 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
   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 fileType = getFileTypeFromExtension(file);
+  var humanFileType = fileType.toUpperCase();
   var imageUrl = URL.createObjectURL(file);
   var cellRef = useRef();
   var exists = useExistsHighlight(id, file);
@@ -66,7 +66,6 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
   };
 
   return React.createElement("li", {
-    "data-testid": "upload-file-list-cell",
     className: classnames('dnb-upload__file-cell', hasWarning && 'dnb-upload__file-cell--warning', exists && 'dnb-upload__file-cell--highlight'),
     ref: cellRef
   }, React.createElement("div", {
@@ -74,7 +73,6 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
   }, React.createElement("div", {
     className: "dnb-upload__file-cell__content__left"
   }, getIcon(), getTitle()), React.createElement("div", null, React.createElement(Button, {
-    "data-testid": "upload-delete-button",
     icon: TrashIcon,
     variant: "tertiary",
     onClick: onDeleteHandler,
@@ -83,9 +81,7 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
 
   function getIcon() {
     if (isLoading) {
-      return _ProgressIndicator || (_ProgressIndicator = React.createElement(ProgressIndicator, {
-        "data-testid": "upload-progress-indicator"
-      }));
+      return _ProgressIndicator || (_ProgressIndicator = React.createElement(ProgressIndicator, null));
     }
 
     if (hasWarning) return _Icon || (_Icon = React.createElement(Icon, {
@@ -93,7 +89,12 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
     }));
     var iconFileType = fileType;
 
-    if (!Object.prototype.hasOwnProperty.call(images, fileType)) {
+    if (!iconFileType) {
+      var mimeParts = file.type.split('/');
+      iconFileType = images[mimeParts[0]] || images[mimeParts[1]];
+    }
+
+    if (!Object.prototype.hasOwnProperty.call(images, iconFileType)) {
       iconFileType = 'file';
     }
 
@@ -107,23 +108,20 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
       className: "dnb-upload__file-cell__text-container dnb-upload__file-cell__text-container--loading"
     }, loadingText)) : React.createElement("div", {
       className: "dnb-upload__file-cell__text-container"
-    }, _a || (_a = React.createElement("a", {
-      "data-testid": "upload-file-anchor",
+    }, React.createElement("a", {
       target: "_blank",
       href: imageUrl,
       className: "dnb-anchor dnb-upload__file-cell__title",
       rel: "noopener noreferrer"
-    }, name)), React.createElement(P, {
-      "data-testid": "upload-subtitle",
+    }, file.name), _P || (_P = React.createElement(P, {
       className: "dnb-upload__file-cell__subtitle",
       size: "x-small",
       top: "xx-small"
-    }, fileType.toUpperCase()));
+    }, humanFileType)));
   }
 
   function getWarning() {
     return hasWarning ? _FormStatus || (_FormStatus = React.createElement(FormStatus, {
-      "data-testid": "upload-warning",
       top: "small",
       text: errorMessage,
       stretch: true

package/components/upload/UploadInfo.js

@@ -25,10 +25,8 @@ var UploadInfo = function UploadInfo() {
       fileMaxSize = context.fileMaxSize;
   var prettyfiedAcceptedFileFormats = acceptedFileTypes.join(', ').toUpperCase();
   return React.createElement(React.Fragment, null, React.createElement(Lead, {
-    "data-testid": "upload-title",
     space: "0"
   }, title), React.createElement(P, {
-    "data-testid": "upload-text",
     top: "xx-small",
     className: "dnb-upload__text"
   }, text), React.createElement(Dl, {
@@ -36,13 +34,7 @@ var UploadInfo = function UploadInfo() {
     bottom: 0,
     direction: "horizontal",
     className: "dnb-upload__condition-list"
-  }, React.createElement(Dl.Item, null, React.createElement(Dt, {
-    "data-testid": "upload-accepted-formats"
-  }, fileTypeDescription), React.createElement(Dd, null, prettyfiedAcceptedFileFormats)), React.createElement(Dl.Item, null, React.createElement(Dt, {
-    "data-testid": "upload-file-size"
-  }, fileSizeDescription), React.createElement(Dd, null, String(fileSizeContent).replace('%size', format(fileMaxSize).toString()))), filesAmountLimit < defaultProps.filesAmountLimit && React.createElement(Dl.Item, null, React.createElement(Dt, {
-    "data-testid": "upload-file-amount-limit"
-  }, fileAmountDescription), React.createElement(Dd, null, filesAmountLimit))));
+  }, prettyfiedAcceptedFileFormats && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileTypeDescription), React.createElement(Dd, null, prettyfiedAcceptedFileFormats)), React.createElement(Dl.Item, null, React.createElement(Dt, null, fileSizeDescription), React.createElement(Dd, null, String(fileSizeContent).replace('%size', format(fileMaxSize).toString()))), filesAmountLimit < defaultProps.filesAmountLimit && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileAmountDescription), React.createElement(Dd, null, filesAmountLimit))));
 };
 
 export default UploadInfo;

package/components/upload/UploadVerify.d.ts

@@ -1,5 +1,8 @@
 import { UploadFile, UploadContextProps, UploadAcceptedFileTypes } from './types';
 export declare function verifyFiles(files: UploadFile[], context: Pick<UploadContextProps, 'errorUnsupportedFile' | 'errorLargeFile' | 'acceptedFileTypes' | 'fileMaxSize'>): UploadFile[];
+export declare function getFileTypeFromExtension(file: File): string;
+export declare function getAcceptedFileTypes(acceptedFileTypes: UploadAcceptedFileTypes): string;
+export declare function hasPreferredMimeType(acceptedFileTypes: UploadAcceptedFileTypes, file: File): boolean;
 export declare function extendWithAbbreviation(acceptedFileTypes: UploadAcceptedFileTypes, abbreviations?: {
     jpg: string;
 }): string[];