@dnb/eufemia 9.34.3 → 9.36.0

package/cjs/components/upload/UploadFileInput.js

@@ -4,6 +4,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
 require("core-js/modules/es.array.iterator.js");
 
+require("core-js/modules/es.object.to-string.js");
+
 require("core-js/modules/es.weak-map.js");
 
 require("core-js/modules/web.dom-collections.iterator.js");
@@ -21,11 +23,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-require("core-js/modules/es.array.reduce.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.join.js");
 
 require("core-js/modules/es.array.map.js");
 
@@ -45,7 +43,7 @@ var _UploadContext = require("./UploadContext");
 
 var _UploadStatus2 = _interopRequireDefault(require("./UploadStatus"));
 
-var _useUpload2 = _interopRequireDefault(require("./useUpload"));
+var _UploadVerify = require("./UploadVerify");
 
 var _UploadStatus;
 
@@ -66,18 +64,6 @@ var UploadFileInput = function UploadFileInput() {
       onInputUpload = context.onInputUpload,
       filesAmountLimit = context.filesAmountLimit;
 
-  var _useUpload = (0, _useUpload2.default)(id),
-      internalFiles = _useUpload.internalFiles;
-
-  var accept = acceptedFileTypes.reduce(function (accept, format, index) {
-    var previus = index === 0 ? '' : "".concat(accept, ",");
-    return "".concat(previus, " .").concat(format);
-  }, '');
-  (0, _react.useEffect)(function () {
-    fileInput.current.value = null;
-    fileInput.current.accept = accept;
-  }, []);
-
   var openFileDialog = function openFileDialog() {
     var _fileInput$current;
 
@@ -85,6 +71,9 @@ 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, {
@@ -96,19 +85,20 @@ var UploadFileInput = function UploadFileInput() {
     icon_position: "left",
     variant: "secondary",
     wrap: true,
-    onClick: openFileDialog,
-    disabled: internalFiles.length > filesAmountLimit
+    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",
     type: "file",
-    onChange: handleFileInput,
+    onChange: onChangeHandler,
+    onClick: onClickHandler,
     multiple: filesAmountLimit > 1
   }));
 
-  function handleFileInput(event) {
+  function onChangeHandler(event) {
     var target = event.target;
     var files = target.files;
     onInputUpload(Array.from(files).map(function (file) {
@@ -117,6 +107,11 @@ var UploadFileInput = function UploadFileInput() {
       };
     }));
   }
+
+  function onClickHandler(event) {
+    var target = event.target;
+    target.value = null;
+  }
 };
 
 var _default = UploadFileInput;

package/cjs/components/upload/UploadFileList.js

@@ -67,6 +67,7 @@ function UploadFileList() {
 
     return _react.default.createElement(_UploadFileListCell.default, {
       key: index,
+      id: id,
       uploadFile: uploadFile,
       onDelete: onDeleteHandler,
       deleteButtonText: deleteButton,

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { UploadFile } from './types';
 export declare type UploadFileListCellProps = {
+    id: string;
     /**
      * Uploaded file
      */
@@ -15,5 +16,5 @@ export declare type UploadFileListCellProps = {
     loadingText: React.ReactNode;
     deleteButtonText: React.ReactNode;
 };
-declare const UploadFileListCell: ({ uploadFile, onDelete, loadingText, deleteButtonText, }: UploadFileListCellProps) => JSX.Element;
+declare const UploadFileListCell: ({ id, uploadFile, onDelete, loadingText, deleteButtonText, }: UploadFileListCellProps) => JSX.Element;
 export default UploadFileListCell;

package/cjs/components/upload/UploadFileListCell.js

@@ -2,16 +2,20 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-require("core-js/modules/es.weak-map.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
 require("core-js/modules/es.symbol.js");
 
 require("core-js/modules/es.symbol.description.js");
 
 require("core-js/modules/es.symbol.iterator.js");
 
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -37,6 +41,8 @@ require("core-js/modules/web.url-search-params.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _Button = _interopRequireDefault(require("../button/Button"));
 
 var _Icon2 = _interopRequireDefault(require("../../components/Icon"));
@@ -51,6 +57,8 @@ var _icons = require("../../icons");
 
 var _componentHelper = require("../../shared/component-helper");
 
+var _useUpload2 = _interopRequireDefault(require("./useUpload"));
+
 var _ProgressIndicator, _Icon;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -59,6 +67,18 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var images = {
   pdf: _icons.file_pdf_medium,
   xls: _icons.file_xls_medium,
@@ -72,7 +92,8 @@ var images = {
 var UploadFileListCell = function UploadFileListCell(_ref) {
   var _div, _a, _FormStatus;
 
-  var uploadFile = _ref.uploadFile,
+  var id = _ref.id,
+      uploadFile = _ref.uploadFile,
       onDelete = _ref.onDelete,
       loadingText = _ref.loadingText,
       deleteButtonText = _ref.deleteButtonText;
@@ -85,6 +106,7 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
   var hasWarning = errorMessage != null;
   var imageUrl = URL.createObjectURL(file);
   var cellRef = (0, _react.useRef)();
+  var exists = useExistsHighlight(id, file);
 
   var handleDisappearFocus = function handleDisappearFocus() {
     try {
@@ -103,7 +125,7 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
 
   return _react.default.createElement("li", {
     "data-testid": "upload-file-list-cell",
-    className: 'dnb-upload__file-cell' + (hasWarning ? " dnb-upload__file-cell--warning" : ""),
+    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", {
     className: "dnb-upload__file-cell__content"
@@ -168,4 +190,40 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
 };
 
 var _default = UploadFileListCell;
-exports.default = _default;
+exports.default = _default;
+
+function useExistsHighlight(id, file) {
+  var _useUpload = (0, _useUpload2.default)(id),
+      internalFiles = _useUpload.internalFiles;
+
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      exists = _React$useState2[0],
+      updateExists = _React$useState2[1];
+
+  var timerRef = _react.default.useRef();
+
+  var clearTimers = function clearTimers() {
+    clearTimeout(timerRef.current);
+  };
+
+  _react.default.useEffect(function () {
+    var exists = internalFiles.some(function (_ref2) {
+      var exists = _ref2.exists,
+          f = _ref2.file;
+      return exists && f.name === file.name && f.size === file.size;
+    });
+
+    if (exists) {
+      updateExists(true);
+      clearTimers();
+      timerRef.current = setTimeout(function () {
+        return updateExists(false);
+      }, 1500);
+    }
+
+    return clearTimers;
+  }, [file, internalFiles]);
+
+  return exists;
+}

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

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

package/cjs/components/upload/UploadVerify.js

@@ -1,8 +1,27 @@
 "use strict";
 
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+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.verifyFiles = verifyFiles;
 
 require("core-js/modules/es.regexp.exec.js");
@@ -19,8 +38,32 @@ require("core-js/modules/es.string.includes.js");
 
 require("core-js/modules/es.array.map.js");
 
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.entries.js");
+
 var _NumberUtils = require("../number-format/NumberUtils");
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 var BYTES_IN_A_MEGA_BYTE = 1048576;
 
 function verifyFiles(files, context) {
@@ -38,7 +81,7 @@ function verifyFiles(files, context) {
       return false;
     }
 
-    var foundType = acceptedFileTypes.some(function (type) {
+    var foundType = extendWithAbbreviation(acceptedFileTypes).some(function (type) {
       return file.type.includes(type);
     });
     return !foundType ? errorUnsupportedFile : null;
@@ -55,4 +98,27 @@ function verifyFiles(files, context) {
     return item;
   });
   return cleanedFiles;
+}
+
+function extendWithAbbreviation(acceptedFileTypes) {
+  var abbreviations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    jpg: 'jpeg'
+  };
+
+  var list = _toConsumableArray(acceptedFileTypes);
+
+  Object.entries(abbreviations).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        type = _ref2[0],
+        abbr = _ref2[1];
+
+    if (list.some(function (t) {
+      return t === type;
+    }) && !list.some(function (t) {
+      return t === abbr;
+    })) {
+      list.push(abbr);
+    }
+  });
+  return list;
 }

package/cjs/components/upload/style/themes/dnb-upload-theme-ui.css

@@ -27,9 +27,22 @@
   .dnb-upload--active {
     background-color: #f2f4ec;
     background-color: var(--color-pistachio); }
-  .dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon {
-    color: #dc2a2a;
-    color: var(--color-fire-red); }
+  .dnb-upload__file-cell {
+    /** Highlight Animation */
+    -webkit-transition: background-color;
+    transition: background-color;
+    -webkit-transition-duration: 1.5s;
+            transition-duration: 1.5s;
+    -webkit-transition-timing-function: cubic-bezier(0.42, 0, 0, 1);
+            transition-timing-function: cubic-bezier(0.42, 0, 0, 1);
+    -webkit-transition-timing-function: var(--easing-default);
+            transition-timing-function: var(--easing-default); }
+    .dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon {
+      color: #dc2a2a;
+      color: var(--color-fire-red); }
+    .dnb-upload__file-cell--highlight {
+      background-color: #fbf6ec;
+      background-color: var(--color-sand-yellow); }
   .dnb-upload__text.dnb-p {
     color: #737373;
     color: var(--color-black-55); }

package/cjs/components/upload/style/themes/dnb-upload-theme-ui.min.css

@@ -1 +1 @@
-.dnb-upload{background-color:#fff;background-color:var(--color-white);border-radius:.5rem}.dnb-upload__outline{stroke:#007272;stroke:var(--color-sea-green);stroke-width:.1875rem;border-radius:.5rem}.dnb-upload--active .dnb-upload__outline{stroke:#14555a;stroke:var(--color-emerald-green);bottom:-1px;height:calc(100% + 2px);inset:-1px;left:-1px;right:-1px;top:-1px;width:calc(100% + 2px)}.dnb-upload--active .dnb-upload__outline rect{stroke-width:.25rem;stroke-dasharray:0}.dnb-upload--active{background-color:#f2f4ec;background-color:var(--color-pistachio)}.dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon{color:#dc2a2a;color:var(--color-fire-red)}.dnb-upload__subtitle.dnb-p,.dnb-upload__text.dnb-p{color:#737373;color:var(--color-black-55)}
+.dnb-upload{background-color:#fff;background-color:var(--color-white);border-radius:.5rem}.dnb-upload__outline{stroke:#007272;stroke:var(--color-sea-green);stroke-width:.1875rem;border-radius:.5rem}.dnb-upload--active .dnb-upload__outline{stroke:#14555a;stroke:var(--color-emerald-green);bottom:-1px;height:calc(100% + 2px);inset:-1px;left:-1px;right:-1px;top:-1px;width:calc(100% + 2px)}.dnb-upload--active .dnb-upload__outline rect{stroke-width:.25rem;stroke-dasharray:0}.dnb-upload--active{background-color:#f2f4ec;background-color:var(--color-pistachio)}.dnb-upload__file-cell{-webkit-transition:background-color;transition:background-color;-webkit-transition-duration:1.5s;transition-duration:1.5s;-webkit-transition-timing-function:cubic-bezier(.42,0,0,1);transition-timing-function:cubic-bezier(.42,0,0,1);-webkit-transition-timing-function:var(--easing-default);transition-timing-function:var(--easing-default)}.dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon{color:#dc2a2a;color:var(--color-fire-red)}.dnb-upload__file-cell--highlight{background-color:#fbf6ec;background-color:var(--color-sand-yellow)}.dnb-upload__subtitle.dnb-p,.dnb-upload__text.dnb-p{color:#737373;color:var(--color-black-55)}

package/cjs/components/upload/style/themes/dnb-upload-theme-ui.scss

@@ -35,6 +35,15 @@
     &--warning &__content__left .dnb-icon {
       color: var(--color-fire-red);
     }
+
+    /** Highlight Animation */
+    transition: background-color;
+    transition-duration: 1.5s;
+    transition-timing-function: var(--easing-default);
+
+    &--highlight {
+      background-color: var(--color-sand-yellow);
+    }
   }
 
   &__text.dnb-p {

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SkeletonShow } from '../skeleton/Skeleton';
 import { LocaleProps, SpacingProps } from '../../shared/types';
+export declare type UploadAcceptedFileTypes = string[];
 export declare type UploadProps = {
     /**
      * unique id used with the useUpload hook to manage the files
@@ -9,7 +10,7 @@ export declare type UploadProps = {
     /**
      * list of accepted file types.
      */
-    acceptedFileTypes: string[];
+    acceptedFileTypes: UploadAcceptedFileTypes;
     /**
      * Skeleton should be applied when loading content
      * Default: null
@@ -63,5 +64,6 @@ export declare type UploadFile = {
     file: File;
     errorMessage?: React.ReactNode;
     isLoading?: boolean;
+    exists?: boolean;
     id?: string;
 };

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

@@ -4,11 +4,10 @@ export declare type useUploadReturn = {
     setFiles: (files: UploadFile[]) => void;
     internalFiles: UploadFile[];
     setInternalFiles: (files: UploadFile[]) => void;
+    existsInFiles: (file: File, fileItems?: UploadFile[]) => boolean;
 };
 /**
  * Use together with Upload with the same id to manage the files from outside the component.
- * @param id string, must match the id of the Upload component
- * @returns { files: UploadFile[], setFiles: (file: UploadFile[]) => void }
  */
 declare function useUpload(id: string): useUploadReturn;
 export default useUpload;

package/cjs/components/upload/useUpload.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.function.name.js");
+
 var _componentHelper = require("../../shared/component-helper");
 
 function useUpload(id) {
@@ -24,11 +28,23 @@ function useUpload(id) {
     });
   };
 
+  var files = (data === null || data === void 0 ? void 0 : data.files) || [];
+  var internalFiles = (data === null || data === void 0 ? void 0 : data.internalFiles) || [];
+
+  var existsInFiles = function existsInFiles(file) {
+    var fileItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : files;
+    return fileItems.some(function (_ref) {
+      var f = _ref.file;
+      return f.name === file.name && f.size === file.size && f.lastModified === file.lastModified;
+    });
+  };
+
   return {
-    files: (data === null || data === void 0 ? void 0 : data.files) || [],
+    files: files,
     setFiles: setFiles,
-    internalFiles: (data === null || data === void 0 ? void 0 : data.internalFiles) || [],
-    setInternalFiles: setInternalFiles
+    internalFiles: internalFiles,
+    setInternalFiles: setInternalFiles,
+    existsInFiles: existsInFiles
   };
 }
 

package/cjs/elements/Element.d.ts

@@ -49,5 +49,5 @@ declare const Element: React.ForwardRefExoticComponent<Pick<{
     skeleton_method?: SkeletonMethods;
 } & import("../shared/types").SpacingElementProps & {
     space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
-} & ElementInternalProps & React.HTMLProps<HTMLElement>, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "top" | "right" | "bottom" | "left" | "width" | "height" | "size" | "children" | "className" | "skeleton" | "space" | "alt" | "src" | "shape" | "list" | "step" | "content" | "inner_ref" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "class" | "innerRef" | "skeletonMethod" | "internalClass" | "css" | "skeleton_method"> & React.RefAttributes<unknown>>;
+} & ElementInternalProps & React.HTMLProps<HTMLElement>, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "top" | "right" | "bottom" | "left" | "space" | "width" | "height" | "size" | "children" | "className" | "skeleton" | "alt" | "src" | "shape" | "list" | "step" | "content" | "inner_ref" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "class" | "innerRef" | "skeletonMethod" | "internalClass" | "css" | "skeleton_method"> & React.RefAttributes<unknown>>;
 export default Element;

package/cjs/shared/Eufemia.js

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

package/cjs/shared/MediaQueryUtils.d.ts

@@ -32,10 +32,6 @@ export declare type MediaQueryProperties = {
      * If set to true, no MediaQuery will be used.
      */
     disabled?: boolean;
-    /**
-     * If set to true, no Eufemia warning will be shown when window.matchMedia is undefined
-     */
-    dismissWarning?: boolean;
     /**
      * For debugging
      */
@@ -84,7 +80,7 @@ export declare const isMatchMediaSupported: () => boolean;
  * @property {boolean} log - print used query to console
  * @returns MediaQueryList type
  */
-export declare function makeMediaQueryList({ query, when, not, log, disabled, dismissWarning, }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
+export declare function makeMediaQueryList({ query, when, not, log, disabled, }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
 /**
  * Adds a listener to the window.matchMedia Browser API
  *

package/cjs/shared/MediaQueryUtils.js

@@ -136,18 +136,12 @@ function makeMediaQueryList() {
       _ref2$log = _ref2.log,
       log = _ref2$log === void 0 ? false : _ref2$log,
       _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      _ref2$dismissWarning = _ref2.dismissWarning,
-      dismissWarning = _ref2$dismissWarning === void 0 ? false : _ref2$dismissWarning;
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
 
   var breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   var isSupported = isMatchMediaSupported();
 
   if (disabled || !isSupported) {
-    if (!dismissWarning && !isSupported) {
-      (0, _helpers.warn)('window.matchMedia is "undefined"');
-    }
-
     return null;
   }
 

package/cjs/shared/SpacingHelper.d.ts

@@ -1 +1,6 @@
-export const SpacingHelper: (props: any) => {};
+export const SpacingHelper: (props: (Record<string, unknown> | import("./types").SpacingProps) & {
+    maxWidth?: string;
+    maxHeight?: string;
+    width?: string;
+    height?: string;
+}) => {};

package/cjs/shared/useMedia.js

@@ -131,8 +131,7 @@ function useMedia() {
     var mediaQueryList = (0, _MediaQueryUtils.makeMediaQueryList)({
       when: when,
       disabled: disabled,
-      log: log,
-      dismissWarning: true
+      log: log
     }, context.breakpoints);
     var event = (0, _MediaQueryUtils.createMediaQueryListener)(mediaQueryList, function (match) {
       if (!disabledRef.current && match) {

package/cjs/shared/useMediaQuery.js

@@ -87,9 +87,11 @@ function useMediaQuery(props) {
     }
 
     if (typeof listenerRef.current === 'function') {
+      var _mediaQueryList$curre2;
+
       listenerRef.current();
       mediaQueryList.current = (0, _MediaQueryUtils.makeMediaQueryList)(props, context.breakpoints);
-      matchUpdate(mediaQueryList.current.matches);
+      matchUpdate((_mediaQueryList$curre2 = mediaQueryList.current) === null || _mediaQueryList$curre2 === void 0 ? void 0 : _mediaQueryList$curre2.matches);
     }
 
     listenerRef.current = (0, _MediaQueryUtils.createMediaQueryListener)(mediaQueryList.current, function (match) {
@@ -98,5 +100,5 @@ function useMediaQuery(props) {
     return listenerRef.current;
   }, [query, when, not, disabled]);
 
-  return match;
+  return Boolean(match);
 }