@dnb/eufemia 9.47.0 → 9.47.2

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.47.2](https://github.com/dnbexperience/eufemia/compare/v9.47.1...v9.47.2) (2023-03-16)
+
+
+### Bug Fixes
+
+* **Autocomplete:** pass status props to SubmitButton ([#2004](https://github.com/dnbexperience/eufemia/issues/2004)) ([fb89114](https://github.com/dnbexperience/eufemia/commit/fb89114e75ff4111640bc367a10d6faa339c4fe3))
+* **Button:** support rel property ([#1990](https://github.com/dnbexperience/eufemia/issues/1990)) ([ad029f2](https://github.com/dnbexperience/eufemia/commit/ad029f20f21154df40975a82b9b4f7019e373ebf))
+* remove FormRow context support from components not using FormRow ([#2103](https://github.com/dnbexperience/eufemia/issues/2103)) ([3a39134](https://github.com/dnbexperience/eufemia/commit/3a39134c883e70daf6ef374c85ea8ddbce317776))
+
+## [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/accordion/AccordionProvider.js

@@ -51,8 +51,6 @@ var _SpacingHelper = require("../space/SpacingHelper");
 
 var _AccordionPropTypes = require("./AccordionPropTypes");
 
-var _FormRowHelpers = require("../form-row/FormRowHelpers");
-
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 
 var _AccordionProviderContext = _interopRequireDefault(require("./AccordionProviderContext"));
@@ -123,7 +121,7 @@ var AccordionGroup = function (_React$PureComponent) {
   _createClass(AccordionGroup, [{
     key: "render",
     value: function render() {
-      var props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, AccordionGroup.defaultProps, (0, _FormRowHelpers.includeValidProps)(this.context.FormRow), this.context.Accordion, this.context.getTranslation(this.props).Accordion);
+      var props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, AccordionGroup.defaultProps, this.context.Accordion, this.context.getTranslation(this.props).Accordion);
 
       var expanded = props.expanded,
           expanded_id = props.expanded_id,

package/cjs/components/autocomplete/Autocomplete.js

@@ -1731,7 +1731,10 @@ var AutocompleteInstance = function (_React$PureComponent2) {
           icon_size: icon_size || (size === 'large' ? 'medium' : 'default'),
           variant: "secondary",
           size: size === 'default' ? 'medium' : size,
-          type: "button"
+          type: "button",
+          status: status,
+          status_state: status_state,
+          status_props: status_props
         }, triggerParams));
       }
 

package/cjs/components/button/Button.d.ts

@@ -150,10 +150,15 @@ export type ButtonProps = {
   href?: string;
 
   /**
-   * When button behaves as a link. Used to specifiy where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`.
+   * When button behaves as a link. Used to specify where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`.
    */
   target?: string;
 
+  /**
+   * When button behaves as a link. Used to specify the relationship between a linked resource and the current document. Examples(non-exhaustive list) of values are `nofollow`, `search`, and `tag`.
+   */
+  rel?: string;
+
   /**
    * Use this prop only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url.
    */

package/cjs/components/button/Button.js

@@ -57,8 +57,6 @@ var _SpacingHelper = require("../space/SpacingHelper");
 
 var _SkeletonHelper = require("../skeleton/SkeletonHelper");
 
-var _FormRowHelpers = require("../form-row/FormRowHelpers");
-
 var _IconPrimary = _interopRequireDefault(require("../icon-primary/IconPrimary"));
 
 var _icons = require("../../icons");
@@ -162,7 +160,7 @@ var Button = function (_React$PureComponent) {
 
       var props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, Button.defaultProps, {
         skeleton: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.skeleton
-      }, (0, _FormRowHelpers.includeValidProps)(this.context.FormRow), this.context.Button);
+      }, this.context.Button);
 
       var class_name = props.class,
           className = props.className,
@@ -325,6 +323,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes = _objectSpread(_object
   class: _propTypes.default.string,
   href: _propTypes.default.string,
   target: _propTypes.default.string,
+  rel: _propTypes.default.string,
   to: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.func]),
   custom_content: _propTypes.default.node,
   wrap: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
@@ -353,6 +352,7 @@ Button.defaultProps = {
   icon_size: null,
   href: null,
   target: null,
+  rel: null,
   to: null,
   id: null,
   class: null,

package/cjs/components/dropdown/Dropdown.d.ts

@@ -433,12 +433,12 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   on_hide?: (...args: any[]) => any;
 
   /**
-   * Will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value }`.
+   * Will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }`.
    */
   on_change?: (...args: any[]) => any;
 
   /**
-   * Will be called once the user selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value, active_item }`. The "active_item" property is the currently selected item by keyboard navigation
+   * Will be called once the user selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }`. The "active_item" property is the currently selected item by keyboard navigation
    */
   on_select?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;

package/cjs/components/help-button/HelpButtonInstance.js

@@ -33,8 +33,6 @@ var _componentHelper = require("../../shared/component-helper");
 
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 
-var _FormRowHelpers = require("../form-row/FormRowHelpers");
-
 var _SpacingHelper = require("../space/SpacingHelper");
 
 var _Button = _interopRequireDefault(require("../button/Button"));
@@ -63,7 +61,7 @@ var defaultProps = {
 function HelpButtonInstance(localProps) {
   var context = _react.default.useContext(_Context.default);
 
-  var props = (0, _componentHelper.extendPropsWithContext)(localProps, defaultProps, (0, _FormRowHelpers.includeValidProps)(context.FormRow), context.HelpButton);
+  var props = (0, _componentHelper.extendPropsWithContext)(localProps, defaultProps, context.HelpButton);
 
   var size = props.size,
       icon = props.icon,

package/cjs/components/icon/Icon.js

@@ -79,8 +79,6 @@ var _Context = _interopRequireDefault(require("../../shared/Context"));
 
 var _IconHelpers = require("./IconHelpers");
 
-var _FormRowHelpers = require("../form-row/FormRowHelpers");
-
 var _excluded = ["sizeAsString"],
     _excluded2 = ["icon", "size", "width", "height", "border", "color", "inherit_color", "modifier", "alt", "title", "skeleton", "class", "className"];
 
@@ -178,7 +176,7 @@ var Icon = function (_React$PureComponent) {
 
       var props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, Icon.defaultProps, {
         skeleton: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.skeleton
-      }, (0, _FormRowHelpers.includeValidProps)(this.context.FormRow), this.context.Icon);
+      }, this.context.Icon);
 
       var _prepareIcon = prepareIcon(props, this.context),
           icon = _prepareIcon.icon,

package/cjs/components/icon-primary/IconPrimary.js

@@ -49,8 +49,6 @@ var _Context = _interopRequireDefault(require("../../shared/Context"));
 
 var _componentHelper = require("../../shared/component-helper");
 
-var _FormRowHelpers = require("../form-row/FormRowHelpers");
-
 var _Icon = _interopRequireWildcard(require("../icon/Icon"));
 
 var primary_icons = _interopRequireWildcard(require("../../icons/primary_icons.js"));
@@ -109,7 +107,7 @@ var IconPrimary = function (_React$PureComponent) {
 
       var props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, IconPrimary.defaultProps, {
         skeleton: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.skeleton
-      }, (0, _FormRowHelpers.includeValidProps)(this.context.FormRow), this.context.Icon, this.context.IconPrimary);
+      }, this.context.Icon, this.context.IconPrimary);
 
       var _prepareIcon = (0, _Icon.prepareIcon)(props, this.context),
           icon = _prepareIcon.icon,

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/logo/Logo.js

@@ -49,8 +49,6 @@ var _Context = _interopRequireDefault(require("../../shared/Context"));
 
 var _componentHelper = require("../../shared/component-helper");
 
-var _FormRowHelpers = require("../form-row/FormRowHelpers");
-
 var _SpacingHelper = require("../space/SpacingHelper");
 
 var _title, _path, _path2, _path3;
@@ -105,7 +103,7 @@ var Logo = function (_React$PureComponent) {
     value: function render() {
       var _objectSpread2;
 
-      var props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, Logo.defaultProps, this.context.getTranslation(this.props).Logo, (0, _FormRowHelpers.includeValidProps)(this.context.FormRow), this.context.Logo);
+      var props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, Logo.defaultProps, this.context.getTranslation(this.props).Logo, this.context.Logo);
 
       var ratio = props.ratio,
           size = props.size,

package/cjs/components/modal/Modal.js

@@ -78,8 +78,6 @@ var _ModalRoot = _interopRequireDefault(require("./ModalRoot"));
 
 var _withCamelCaseProps = require("../../shared/helpers/withCamelCaseProps");
 
-var _FormRowHelpers = require("../form-row/FormRowHelpers");
-
 var _excluded = ["root_id", "content_id", "disabled", "labelled_by", "focus_selector", "header_content", "bar_content", "bypass_invalidation_selectors", "id", "open_state", "open_delay", "omit_trigger_button", "trigger", "trigger_attributes", "trigger_hidden", "trigger_disabled", "trigger_variant", "trigger_text", "trigger_title", "trigger_size", "trigger_icon", "trigger_icon_position", "trigger_class"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -385,7 +383,7 @@ var Modal = function (_React$PureComponent) {
     value: function render() {
       var _this2 = this;
 
-      var props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, Modal.defaultProps, this.context.getTranslation(this.props).Modal, (0, _FormRowHelpers.includeValidProps)(this.context.FormRow), this.context.Modal);
+      var props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, Modal.defaultProps, this.context.getTranslation(this.props).Modal, this.context.Modal);
 
       var _props$root_id = props.root_id,
           root_id = _props$root_id === void 0 ? 'root' : _props$root_id,

package/cjs/components/pagination/Pagination.js

@@ -53,8 +53,6 @@ var _PaginationProvider = _interopRequireDefault(require("./PaginationProvider")
 
 var _componentHelper = require("../../shared/component-helper");
 
-var _FormRowHelpers = require("../form-row/FormRowHelpers");
-
 var _SpacingHelper = require("../space/SpacingHelper");
 
 var _PaginationHelpers = require("./PaginationHelpers");
@@ -232,7 +230,7 @@ var PaginationInstance = function (_React$PureComponent2) {
   _createClass(PaginationInstance, [{
     key: "render",
     value: function render() {
-      var props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, paginationDefaultProps, this.context.getTranslation(this.props).Pagination, (0, _FormRowHelpers.includeValidProps)(this.context.FormRow), this.context.Pagination);
+      var props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, paginationDefaultProps, this.context.getTranslation(this.props).Pagination, this.context.Pagination);
 
       var align = props.align,
           children = props.children,

package/cjs/components/progress-indicator/ProgressIndicator.js

@@ -53,8 +53,6 @@ var _Context = _interopRequireDefault(require("../../shared/Context"));
 
 var _componentHelper = require("../../shared/component-helper");
 
-var _FormRowHelpers = require("../form-row/FormRowHelpers");
-
 var _SpacingHelper = require("../space/SpacingHelper");
 
 var _ProgressIndicatorCircular = _interopRequireDefault(require("./ProgressIndicatorCircular"));
@@ -145,7 +143,7 @@ var ProgressIndicator = function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, ProgressIndicator.defaultProps, this.context.getTranslation(this.props).ProgressIndicator, (0, _FormRowHelpers.includeValidProps)(this.context.FormRow), this.context.ProgressIndicator);
+      var props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, ProgressIndicator.defaultProps, this.context.getTranslation(this.props).ProgressIndicator, this.context.ProgressIndicator);
 
       var type = props.type,
           size = props.size,

package/cjs/components/step-indicator/StepIndicatorContext.js

@@ -71,8 +71,6 @@ var _componentHelper = require("../../shared/component-helper");
 
 var _MediaQueryUtils = require("../../shared/MediaQueryUtils");
 
-var _FormRowHelpers = require("../form-row/FormRowHelpers");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -219,7 +217,7 @@ var StepIndicatorProvider = function (_React$PureComponent) {
       var context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.context;
       var data = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, _StepIndicatorProps.stepIndicatorDefaultProps, {
         skeleton: context === null || context === void 0 ? void 0 : context.skeleton
-      }, context.getTranslation(context).StepIndicator, (0, _FormRowHelpers.includeValidProps)(context.FormRow), context.StepIndicator);
+      }, context.getTranslation(context).StepIndicator, context.StepIndicator);
       return data;
     }
   }, {

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'