@dnb/eufemia 9.47.0 → 9.47.2

package/cjs/elements/Element.js

@@ -31,8 +31,6 @@ var _SpacingHelper = require("../components/space/SpacingHelper");
 
 var _SkeletonHelper = require("../components/skeleton/SkeletonHelper");
 
-var _FormRowHelpers = require("../components/form-row/FormRowHelpers");
-
 var _excluded = ["className", "class", "internalClass", "css", "as", "is", "innerRef", "skeleton", "skeletonMethod"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -59,7 +57,7 @@ function ElementInstance(localProps) {
 
   var props = (0, _componentHelper.extendPropsWithContext)(localProps, defaultProps, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
-  }, (0, _FormRowHelpers.includeValidProps)(context === null || context === void 0 ? void 0 : context.FormRow));
+  });
 
   if (typeof props.inner_ref !== 'undefined') {
     props.innerRef = props.inner_ref;

package/cjs/fragments/drawer-list/DrawerList.js

@@ -70,8 +70,6 @@ var _componentHelper = require("../../shared/component-helper");
 
 var _SpacingHelper = require("../../components/space/SpacingHelper");
 
-var _FormRowHelpers = require("../../components/form-row/FormRowHelpers");
-
 var _DrawerListContext = _interopRequireDefault(require("./DrawerListContext"));
 
 var _DrawerListProvider = _interopRequireDefault(require("./DrawerListProvider"));
@@ -265,7 +263,7 @@ var DrawerListInstance = function (_React$PureComponent2) {
     value: function render() {
       var _this3 = this;
 
-      var props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, DrawerList.defaultProps, this.context.getTranslation(this.props).DrawerList, (0, _FormRowHelpers.includeValidProps)(this.context.FormRow), this.context.DrawerList);
+      var props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, DrawerList.defaultProps, this.context.getTranslation(this.props).DrawerList);
 
       var role = props.role,
           align_drawer = props.align_drawer,

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.2';
         }
       }]);
 

package/components/accordion/AccordionProvider.js

@@ -31,7 +31,6 @@ import classnames from 'classnames';
 import { isTrue, makeUniqueId, extendPropsWithContextInClassComponent, registerElement, validateDOMAttributes, dispatchCustomElementEvent } from '../../shared/component-helper';
 import { createSpacingClasses } from '../space/SpacingHelper';
 import { accordionPropTypes, accordionDefaultProps } from './AccordionPropTypes';
-import { includeValidProps } from '../form-row/FormRowHelpers';
 import Context from '../../shared/Context';
 import AccordionGroupContext from './AccordionProviderContext';
 
@@ -65,7 +64,7 @@ var AccordionGroup = function (_React$PureComponent) {
   _createClass(AccordionGroup, [{
     key: "render",
     value: function render() {
-      var props = extendPropsWithContextInClassComponent(this.props, AccordionGroup.defaultProps, includeValidProps(this.context.FormRow), this.context.Accordion, this.context.getTranslation(this.props).Accordion);
+      var props = extendPropsWithContextInClassComponent(this.props, AccordionGroup.defaultProps, this.context.Accordion, this.context.getTranslation(this.props).Accordion);
 
       var expanded = props.expanded,
           expanded_id = props.expanded_id,

package/components/autocomplete/Autocomplete.js

@@ -1647,7 +1647,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/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/components/button/Button.js

@@ -38,7 +38,6 @@ import Context from '../../shared/Context';
 import { warn, makeUniqueId, isTrue, extendPropsWithContextInClassComponent, registerElement, validateDOMAttributes, processChildren, getStatusState, dispatchCustomElementEvent } from '../../shared/component-helper';
 import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
 import { skeletonDOMAttributes, createSkeletonClass } from '../skeleton/SkeletonHelper';
-import { includeValidProps } from '../form-row/FormRowHelpers';
 import IconPrimary from '../icon-primary/IconPrimary';
 import { launch, launch_medium } from '../../icons';
 import FormStatus from '../form-status/FormStatus';
@@ -98,7 +97,7 @@ var Button = function (_React$PureComponent) {
 
       var props = extendPropsWithContextInClassComponent(this.props, Button.defaultProps, {
         skeleton: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.skeleton
-      }, includeValidProps(this.context.FormRow), this.context.Button);
+      }, this.context.Button);
 
       var class_name = props.class,
           className = props.className,
@@ -260,6 +259,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes = _objectSpread(_object
   class: PropTypes.string,
   href: PropTypes.string,
   target: PropTypes.string,
+  rel: PropTypes.string,
   to: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
   custom_content: PropTypes.node,
   wrap: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -288,6 +288,7 @@ Button.defaultProps = {
   icon_size: null,
   href: null,
   target: null,
+  rel: null,
   to: null,
   id: null,
   class: null,

package/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/components/help-button/HelpButtonInstance.js

@@ -19,7 +19,6 @@ import React from 'react';
 import classnames from 'classnames';
 import { convertJsxToString, extendPropsWithContext } from '../../shared/component-helper';
 import Context from '../../shared/Context';
-import { includeValidProps } from '../form-row/FormRowHelpers';
 import { createSpacingClasses } from '../space/SpacingHelper';
 import Button from '../button/Button';
 var defaultProps = {
@@ -28,7 +27,7 @@ var defaultProps = {
 };
 export default function HelpButtonInstance(localProps) {
   var context = React.useContext(Context);
-  var props = extendPropsWithContext(localProps, defaultProps, includeValidProps(context.FormRow), context.HelpButton);
+  var props = extendPropsWithContext(localProps, defaultProps, context.HelpButton);
 
   var size = props.size,
       icon = props.icon,

package/components/icon/Icon.js

@@ -44,7 +44,6 @@ import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
 import { createSkeletonClass } from '../skeleton/SkeletonHelper';
 import Context from '../../shared/Context';
 import { iconCase } from './IconHelpers';
-import { includeValidProps } from '../form-row/FormRowHelpers';
 export var DefaultIconSize = 16;
 export var DefaultIconSizes = {
   default: 16,
@@ -88,7 +87,7 @@ var Icon = function (_React$PureComponent) {
 
       var props = extendPropsWithContextInClassComponent(this.props, Icon.defaultProps, {
         skeleton: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.skeleton
-      }, includeValidProps(this.context.FormRow), this.context.Icon);
+      }, this.context.Icon);
 
       var _prepareIcon = prepareIcon(props, this.context),
           icon = _prepareIcon.icon,

package/components/icon-primary/IconPrimary.js

@@ -24,7 +24,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import Context from '../../shared/Context';
 import { extendPropsWithContextInClassComponent } from '../../shared/component-helper';
-import { includeValidProps } from '../form-row/FormRowHelpers';
 import DefaultIcon, { iconPropTypes, DefaultIconSize, prerenderIcon, prepareIcon } from '../icon/Icon';
 import * as primary_icons from '../../icons/primary_icons.js';
 import * as primary_icons_medium from '../../icons/primary_icons_medium.js';
@@ -51,7 +50,7 @@ var IconPrimary = function (_React$PureComponent) {
 
       var props = extendPropsWithContextInClassComponent(this.props, IconPrimary.defaultProps, {
         skeleton: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.skeleton
-      }, includeValidProps(this.context.FormRow), this.context.Icon, this.context.IconPrimary);
+      }, this.context.Icon, this.context.IconPrimary);
 
       var _prepareIcon = prepareIcon(props, this.context),
           icon = _prepareIcon.icon,

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

@@ -33,7 +33,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Context from '../../shared/Context';
 import { validateDOMAttributes, registerElement, extendPropsWithContextInClassComponent } from '../../shared/component-helper';
-import { includeValidProps } from '../form-row/FormRowHelpers';
 import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
 
 var Logo = function (_React$PureComponent) {
@@ -52,7 +51,7 @@ var Logo = function (_React$PureComponent) {
     value: function render() {
       var _objectSpread2;
 
-      var props = extendPropsWithContextInClassComponent(this.props, Logo.defaultProps, this.context.getTranslation(this.props).Logo, includeValidProps(this.context.FormRow), this.context.Logo);
+      var props = extendPropsWithContextInClassComponent(this.props, Logo.defaultProps, this.context.getTranslation(this.props).Logo, this.context.Logo);
 
       var ratio = props.ratio,
           size = props.size,

package/components/modal/Modal.js

@@ -42,7 +42,6 @@ import ModalHeaderBar from './parts/ModalHeaderBar';
 import CloseButton from './parts/CloseButton';
 import ModalRoot from './ModalRoot';
 import { classWithCamelCaseProps } from '../../shared/helpers/withCamelCaseProps';
-import { includeValidProps } from '../form-row/FormRowHelpers';
 export var ANIMATION_DURATION = 300;
 
 var Modal = function (_React$PureComponent) {
@@ -311,7 +310,7 @@ var Modal = function (_React$PureComponent) {
     value: function render() {
       var _this2 = this;
 
-      var props = extendPropsWithContextInClassComponent(this.props, Modal.defaultProps, this.context.getTranslation(this.props).Modal, includeValidProps(this.context.FormRow), this.context.Modal);
+      var props = 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/components/pagination/Pagination.js

@@ -36,7 +36,6 @@ import classnames from 'classnames';
 import PaginationContext from './PaginationContext';
 import PaginationProvider from './PaginationProvider';
 import { registerElement, validateDOMAttributes, extendPropsWithContextInClassComponent } from '../../shared/component-helper';
-import { includeValidProps } from '../form-row/FormRowHelpers';
 import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
 import { PaginationIndicator } from './PaginationHelpers';
 import InfinityScroller from './PaginationInfinity';
@@ -169,7 +168,7 @@ var PaginationInstance = function (_React$PureComponent2) {
   _createClass(PaginationInstance, [{
     key: "render",
     value: function render() {
-      var props = extendPropsWithContextInClassComponent(this.props, paginationDefaultProps, this.context.getTranslation(this.props).Pagination, includeValidProps(this.context.FormRow), this.context.Pagination);
+      var props = extendPropsWithContextInClassComponent(this.props, paginationDefaultProps, this.context.getTranslation(this.props).Pagination, this.context.Pagination);
 
       var align = props.align,
           children = props.children,

package/components/progress-indicator/ProgressIndicator.js

@@ -33,7 +33,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Context from '../../shared/Context';
 import { isTrue, registerElement, validateDOMAttributes, dispatchCustomElementEvent, extendPropsWithContextInClassComponent } from '../../shared/component-helper';
-import { includeValidProps } from '../form-row/FormRowHelpers';
 import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
 import ProgressIndicatorCircular from './ProgressIndicatorCircular';
 import ProgressIndicatorLinear from './ProgressIndicatorLinear';
@@ -85,7 +84,7 @@ var ProgressIndicator = function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var props = extendPropsWithContextInClassComponent(this.props, ProgressIndicator.defaultProps, this.context.getTranslation(this.props).ProgressIndicator, includeValidProps(this.context.FormRow), this.context.ProgressIndicator);
+      var props = extendPropsWithContextInClassComponent(this.props, ProgressIndicator.defaultProps, this.context.getTranslation(this.props).ProgressIndicator, this.context.ProgressIndicator);
 
       var type = props.type,
           size = props.size,

package/components/step-indicator/StepIndicatorContext.js

@@ -38,7 +38,6 @@ import Context from '../../shared/Context';
 import { stepIndicatorDefaultProps } from './StepIndicatorProps';
 import { processChildren, extendPropsWithContextInClassComponent } from '../../shared/component-helper';
 import { onMediaQueryChange } from '../../shared/MediaQueryUtils';
-import { includeValidProps } from '../form-row/FormRowHelpers';
 var filterAttributes = Object.keys(stepIndicatorDefaultProps).filter(function (item) {
   return !['class', 'className'].includes(item);
 }).concat(['internalId', 'isSidebar', 'hasSidebar', 'hideSidebar', 'sidebarIsVisible', 'mainTitle', 'stepsLabel', 'stepsLabelExtended', 'listOfReachedSteps', 'setActiveStep', 'activeStep', 'countSteps', 'openState', 'onChangeState', 'openHandler', 'closeHandler', 'innerRef', 'hasSkeletonData', 'filterAttributes', 'listAttributes', 'onChangeState', 'isV1', 'activeUrl']);
@@ -141,7 +140,7 @@ export var StepIndicatorProvider = function (_React$PureComponent) {
       var context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.context;
       var data = extendPropsWithContextInClassComponent(this.props, stepIndicatorDefaultProps, {
         skeleton: context === null || context === void 0 ? void 0 : context.skeleton
-      }, context.getTranslation(context).StepIndicator, includeValidProps(context.FormRow), context.StepIndicator);
+      }, context.getTranslation(context).StepIndicator, context.StepIndicator);
       return data;
     }
   }, {

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[];

package/components/upload/UploadVerify.js

@@ -7,6 +7,9 @@ import "core-js/modules/es.regexp.to-string.js";
 import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.includes.js";
 import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.join.js";
+import "core-js/modules/es.string.split.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.object.entries.js";
 import { format } from '../number-format/NumberUtils';
@@ -26,8 +29,9 @@ export 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;
   };
@@ -44,6 +48,19 @@ export function verifyFiles(files, context) {
   });
   return cleanedFiles;
 }
+export function getFileTypeFromExtension(file) {
+  return file.name.includes('.') && file.name.replace(/.*\.([^.]+)$/, '$1') || null;
+}
+export function getAcceptedFileTypes(acceptedFileTypes) {
+  return extendWithAbbreviation(acceptedFileTypes).map(function (type) {
+    return type.includes('/') ? type : ".".concat(type);
+  }).join(',');
+}
+export 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();
+  })));
+}
 export function extendWithAbbreviation(acceptedFileTypes) {
   var abbreviations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     jpg: 'jpeg'

package/elements/Element.js

@@ -10,7 +10,6 @@ import Context from '../shared/Context';
 import { validateDOMAttributes, extendPropsWithContext } from '../shared/component-helper';
 import { createSpacingClasses } from '../components/space/SpacingHelper';
 import { createSkeletonClass, skeletonDOMAttributes } from '../components/skeleton/SkeletonHelper';
-import { includeValidProps } from '../components/form-row/FormRowHelpers';
 export var defaultProps = {
   skeletonMethod: 'font'
 };
@@ -24,7 +23,7 @@ function ElementInstance(localProps) {
   var context = React.useContext(Context);
   var props = extendPropsWithContext(localProps, defaultProps, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
-  }, includeValidProps(context === null || context === void 0 ? void 0 : context.FormRow));
+  });
 
   if (typeof props.inner_ref !== 'undefined') {
     props.innerRef = props.inner_ref;