@dnb/eufemia 9.47.0 → 9.47.2

package/es/components/accordion/AccordionProvider.js

@@ -13,7 +13,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';
 export default class AccordionGroup extends React.PureComponent {
@@ -39,7 +38,7 @@ export default class AccordionGroup extends React.PureComponent {
   }
 
   render() {
-    const props = extendPropsWithContextInClassComponent(this.props, AccordionGroup.defaultProps, includeValidProps(this.context.FormRow), this.context.Accordion, this.context.getTranslation(this.props).Accordion);
+    const props = extendPropsWithContextInClassComponent(this.props, AccordionGroup.defaultProps, this.context.Accordion, this.context.getTranslation(this.props).Accordion);
 
     const {
       expanded,

package/es/components/autocomplete/Autocomplete.js

@@ -1524,7 +1524,10 @@ class AutocompleteInstance extends React.PureComponent {
         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/es/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/es/components/button/Button.js

@@ -17,7 +17,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';
@@ -72,7 +71,7 @@ export default class Button extends React.PureComponent {
 
     const 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);
 
     const {
       class: class_name,
@@ -226,6 +225,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]),
@@ -254,6 +254,7 @@ Button.defaultProps = {
   icon_size: null,
   href: null,
   target: null,
+  rel: null,
   to: null,
   id: null,
   class: null,

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

@@ -11,7 +11,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';
 const defaultProps = {
@@ -20,7 +19,7 @@ const defaultProps = {
 };
 export default function HelpButtonInstance(localProps) {
   const context = React.useContext(Context);
-  const props = extendPropsWithContext(localProps, defaultProps, includeValidProps(context.FormRow), context.HelpButton);
+  const props = extendPropsWithContext(localProps, defaultProps, context.HelpButton);
 
   const {
     size,

package/es/components/icon/Icon.js

@@ -16,7 +16,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 const DefaultIconSize = 16;
 export const DefaultIconSizes = {
   default: 16,
@@ -59,7 +58,7 @@ export default class Icon extends React.PureComponent {
 
     const 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);
     const {
       icon,
       size,

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

@@ -7,7 +7,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';
@@ -29,7 +28,7 @@ export default class IconPrimary extends React.PureComponent {
 
     const 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);
     const {
       icon,
       size,

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

@@ -15,6 +15,17 @@ import Input, { inputPropTypes } from '../input/Input';
 import Context from '../../shared/Context';
 const InputMasked = React.forwardRef((props, ref) => {
   const context = React.useContext(Context);
+
+  if (props !== null && props !== void 0 && props.mask) {
+    const alias = context === null || context === void 0 ? void 0 : context.InputMasked;
+
+    for (const key in alias) {
+      if (/^as[_A-Z]|number_mask|currency_mask/.test(key)) {
+        delete alias[key];
+      }
+    }
+  }
+
   const 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: {
@@ -55,7 +66,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/es/components/input-masked/InputMaskedHooks.js

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

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

@@ -63,8 +63,8 @@ export const correctNumberValue = ({
   value = value.replace('.', decimalSymbol);
 
   if (localValue !== null) {
-    const localNumberValue = localValue.replace(/[^\d,.]/g, '');
-    const numberValue = value.replace(/[^\d,.]/g, '');
+    const localNumberValue = localValue.replace(/[^\d,.-]/g, '');
+    const numberValue = value.replace(/[^\d,.-]/g, '');
     const endsWithDecimal = localNumberValue.endsWith(decimalSymbol);
     const endsWithZeroAndDecimal = localNumberValue.endsWith(`${decimalSymbol}0`);
 
@@ -78,7 +78,7 @@ export const correctNumberValue = ({
       value = localValue;
     }
 
-    if (/^-|-0$/.test(localValue)) {
+    if (/^(-|-0)$/.test(localValue.replace(/[^\d-0]/g, ''))) {
       value = localValue;
     } else if (localNumberValue === '' && numberValue === '0') {
       value = '';

package/es/components/logo/Logo.js

@@ -14,7 +14,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';
 export default class Logo extends React.PureComponent {
   static enableWebComponent() {
@@ -22,7 +21,7 @@ export default class Logo extends React.PureComponent {
   }
 
   render() {
-    const props = extendPropsWithContextInClassComponent(this.props, Logo.defaultProps, this.context.getTranslation(this.props).Logo, includeValidProps(this.context.FormRow), this.context.Logo);
+    const props = extendPropsWithContextInClassComponent(this.props, Logo.defaultProps, this.context.getTranslation(this.props).Logo, this.context.Logo);
 
     let {
       ratio,

package/es/components/modal/Modal.js

@@ -21,7 +21,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 const ANIMATION_DURATION = 300;
 
 class Modal extends React.PureComponent {
@@ -317,7 +316,7 @@ class Modal extends React.PureComponent {
   }
 
   render() {
-    const props = extendPropsWithContextInClassComponent(this.props, Modal.defaultProps, this.context.getTranslation(this.props).Modal, includeValidProps(this.context.FormRow), this.context.Modal);
+    const props = extendPropsWithContextInClassComponent(this.props, Modal.defaultProps, this.context.getTranslation(this.props).Modal, this.context.Modal);
 
     const {
       root_id = 'root',

package/es/components/pagination/Pagination.js

@@ -18,7 +18,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';
@@ -123,7 +122,7 @@ class PaginationInstance extends React.PureComponent {
   }
 
   render() {
-    const props = extendPropsWithContextInClassComponent(this.props, paginationDefaultProps, this.context.getTranslation(this.props).Pagination, includeValidProps(this.context.FormRow), this.context.Pagination);
+    const props = extendPropsWithContextInClassComponent(this.props, paginationDefaultProps, this.context.getTranslation(this.props).Pagination, this.context.Pagination);
 
     const {
       align,

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

@@ -12,7 +12,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';
@@ -65,7 +64,7 @@ export default class ProgressIndicator extends React.PureComponent {
   }
 
   render() {
-    const props = extendPropsWithContextInClassComponent(this.props, ProgressIndicator.defaultProps, this.context.getTranslation(this.props).ProgressIndicator, includeValidProps(this.context.FormRow), this.context.ProgressIndicator);
+    const props = extendPropsWithContextInClassComponent(this.props, ProgressIndicator.defaultProps, this.context.getTranslation(this.props).ProgressIndicator, this.context.ProgressIndicator);
 
     const {
       type,

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

@@ -10,7 +10,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';
 const filterAttributes = Object.keys(stepIndicatorDefaultProps).filter(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']);
@@ -139,7 +138,7 @@ export class StepIndicatorProvider extends React.PureComponent {
   getGlobalContext(context = this.context) {
     const 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/es/components/upload/Upload.js

@@ -75,7 +75,6 @@ const 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/es/components/upload/UploadFileInput.js

@@ -6,7 +6,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';
 
 const UploadFileInput = () => {
   const fileInput = useRef(null);
@@ -26,13 +26,10 @@ const UploadFileInput = () => {
   };
 
   const sharedId = id || makeUniqueId();
-  const accept = extendWithAbbreviation(acceptedFileTypes).map(type => `.${type}`).join(',');
-  return React.createElement("div", {
-    "data-testid": "upload-file-input"
-  }, React.createElement(Button, {
+  const accept = getAcceptedFileTypes(acceptedFileTypes);
+  return React.createElement("div", null, React.createElement(Button, {
     top: "medium",
     id: `${sharedId}-input`,
-    "data-testid": "upload-file-input-button",
     className: "dnb-upload__file-input-button",
     icon: FolderIcon,
     icon_position: "left",
@@ -41,7 +38,6 @@ const UploadFileInput = () => {
     onClick: openFileDialog
   }, buttonText), _UploadStatus || (_UploadStatus = React.createElement(UploadStatus, null)), React.createElement("input", {
     "aria-labelledby": `${sharedId}-input`,
-    "data-testid": "upload-file-input-input",
     ref: fileInput,
     accept: accept,
     className: "dnb-upload__file-input",

package/es/components/upload/UploadFileList.js

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

package/es/components/upload/UploadFileListCell.js

@@ -10,6 +10,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';
 const images = {
   pdf,
   xls,
@@ -27,19 +28,16 @@ const UploadFileListCell = ({
   loadingText,
   deleteButtonText
 }) => {
-  var _div, _a, _FormStatus;
+  var _div, _P, _FormStatus;
 
   const {
     file,
     errorMessage,
     isLoading
   } = uploadFile;
-  const {
-    name,
-    type
-  } = file;
-  const fileType = type.split('/')[1] || '';
   const hasWarning = errorMessage != null;
+  const fileType = getFileTypeFromExtension(file);
+  const humanFileType = fileType.toUpperCase();
   const imageUrl = URL.createObjectURL(file);
   const cellRef = useRef();
   const exists = useExistsHighlight(id, file);
@@ -60,7 +58,6 @@ const UploadFileListCell = ({
   };
 
   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", {
@@ -68,7 +65,6 @@ const UploadFileListCell = ({
   }, 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,
@@ -77,9 +73,7 @@ const UploadFileListCell = ({
 
   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, {
@@ -87,7 +81,12 @@ const UploadFileListCell = ({
     }));
     let iconFileType = fileType;
 
-    if (!Object.prototype.hasOwnProperty.call(images, fileType)) {
+    if (!iconFileType) {
+      const mimeParts = file.type.split('/');
+      iconFileType = images[mimeParts[0]] || images[mimeParts[1]];
+    }
+
+    if (!Object.prototype.hasOwnProperty.call(images, iconFileType)) {
       iconFileType = 'file';
     }
 
@@ -101,23 +100,20 @@ const UploadFileListCell = ({
       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/es/components/upload/UploadInfo.js

@@ -22,10 +22,8 @@ const UploadInfo = () => {
   } = context;
   const 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, {
@@ -33,13 +31,7 @@ const 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/es/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/es/components/upload/UploadVerify.js

@@ -17,8 +17,9 @@ export function verifyFiles(files, context) {
       return false;
     }
 
+    const fileType = hasPreferredMimeType(acceptedFileTypes, file) ? file.type : getFileTypeFromExtension(file) || file.type;
     const foundType = extendWithAbbreviation(acceptedFileTypes).some(type => {
-      return file.type.includes(type);
+      return fileType.includes(type);
     });
     return !foundType ? errorUnsupportedFile : null;
   };
@@ -37,6 +38,15 @@ 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(type => type.includes('/') ? type : `.${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(type => type.toLowerCase() === file.type.toLowerCase())));
+}
 export function extendWithAbbreviation(acceptedFileTypes, abbreviations = {
   jpg: 'jpeg'
 }) {

package/es/elements/Element.js

@@ -7,7 +7,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 const defaultProps = {
   skeletonMethod: 'font'
 };
@@ -21,7 +20,7 @@ function ElementInstance(localProps) {
   const context = React.useContext(Context);
   const 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;

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

@@ -16,7 +16,6 @@ import classnames from 'classnames';
 import keycode from 'keycode';
 import { isTrue, makeUniqueId, extendPropsWithContextInClassComponent, registerElement, validateDOMAttributes, dispatchCustomElementEvent } from '../../shared/component-helper';
 import { createSpacingClasses } from '../../components/space/SpacingHelper';
-import { includeValidProps } from '../../components/form-row/FormRowHelpers';
 import DrawerListContext from './DrawerListContext';
 import DrawerListProvider from './DrawerListProvider';
 import DrawerListPortal from './DrawerListPortal';
@@ -121,7 +120,7 @@ class DrawerListInstance extends React.PureComponent {
   }
 
   render() {
-    const props = extendPropsWithContextInClassComponent(this.props, DrawerList.defaultProps, this.context.getTranslation(this.props).DrawerList, includeValidProps(this.context.FormRow), this.context.DrawerList);
+    const props = extendPropsWithContextInClassComponent(this.props, DrawerList.defaultProps, this.context.getTranslation(this.props).DrawerList);
 
     const {
       role,

package/es/shared/Eufemia.js

@@ -2,7 +2,7 @@ export function init() {
   if (typeof window !== 'undefined') {
     class Eufemia {
       get version() {
-        return '9.47.0';
+        return '9.47.2';
       }
 
     }