@crystaldesign/diva-backoffice 24.12.0-beta.17 → 24.12.0-beta.19

package/build/esm/index.js

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import React, { createElement, createContext, useState, useEffect, useRef, useMemo, useImperativeHandle, useCallback, createRef, useReducer, useContext, memo } from 'react';
+import React, { createElement, createContext, useState, useEffect, useRef, useMemo, forwardRef, useImperativeHandle, useCallback, createRef, useReducer, useContext, memo } from 'react';
 import 'antd/dist/reset.css';
-import { Form as Form$1, Button, Input, Popover, Typography, Divider, Select as Select$1, Avatar, Spin, Radio, Space, DatePicker, Checkbox, InputNumber, Modal as Modal$2, Progress, Cascader, Descriptions, Row, Col, Tooltip as Tooltip$1, Collapse, List as List$1, Skeleton, Alert, Card, Upload as Upload$2, Switch, Table as Table$1, Popconfirm, Tabs, Image, Slider, Breadcrumb, Result as Result$1, message, Layout, Drawer, ConfigProvider, theme } from 'antd';
+import { Form as Form$1, Button, Input, Popover, Typography, Divider, Select as Select$1, Avatar, Spin, Radio, Space, Dropdown, DatePicker, Checkbox, InputNumber, Modal as Modal$2, Progress, Cascader, Descriptions, Row, Col, Tooltip as Tooltip$1, Collapse, List as List$1, Skeleton, Alert, Card, Upload as Upload$2, Switch, Table as Table$1, Popconfirm, Tabs, Image, Slider, Breadcrumb, Result as Result$1, message, Layout, Drawer, ConfigProvider, theme } from 'antd';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { observer } from 'mobx-react-lite';
 import { getLogger, DivaError, useTranslation, useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
@@ -16,12 +16,12 @@ import _get from '@babel/runtime/helpers/get';
 import _inherits from '@babel/runtime/helpers/inherits';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import _typeof from '@babel/runtime/helpers/typeof';
-import flat, { flatten, unflatten } from 'flat';
+import { flatten, unflatten } from 'flat';
 import { compare } from 'fast-json-patch';
 import { io } from 'socket.io-client';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { toJS, makeAutoObservable, observable, action, makeObservable } from 'mobx';
-import merge from 'deepmerge';
+import mergeWith from 'lodash/mergeWith';
 import Tooltip from 'antd/es/tooltip';
 import RightOutlined from '@ant-design/icons/RightOutlined';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -65,7 +65,8 @@ import FolderOutlined from '@ant-design/icons/FolderOutlined';
 import SettingOutlined from '@ant-design/icons/SettingOutlined';
 import PieChartOutlined from '@ant-design/icons/PieChartOutlined';
 import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
-import { cloneDeep, merge as merge$1, mergeWith } from 'lodash';
+import merge from 'lodash/merge';
+import cloneDeep from 'lodash/cloneDeep';
 import DivaUtils$1, { nanoid, DivaError as DivaError$1 } from '@crystaldesign/diva-utils';
 import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
 import JSONEditor from 'jsoneditor';
@@ -77,6 +78,7 @@ import RTFEditor from '@crystaldesign/rtf-editor';
 import debounce from 'lodash/debounce';
 import Button$1 from 'antd/es/button';
 import Upload$1 from 'antd/es/upload';
+import DownOutlined from '@ant-design/icons/lib/icons/DownOutlined';
 import Space$1 from 'antd/es/space';
 import { stringify } from 'csv';
 import InfiniteScroll from 'react-infinite-scroll-component';
@@ -91,8 +93,9 @@ import QuestionCircleOutlined from '@ant-design/icons/QuestionCircleOutlined';
 import WarningTwoTone from '@ant-design/icons/WarningTwoTone';
 import CheckOutlined from '@ant-design/icons/lib/icons/CheckOutlined';
 import CloseOutlined from '@ant-design/icons/lib/icons/CloseOutlined';
+import merge$1 from 'deepmerge';
 import { ContentBoxComponent } from '@crystaldesign/content-box';
-import { AgChartsReact } from 'ag-charts-react';
+import { AgCharts } from 'ag-charts-react';
 import { Histogram } from '@crystaldesign/analytics';
 import dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
@@ -142,7 +145,7 @@ function _unsupportedIterableToArray$m(r, a) { if (r) { if ("string" == typeof r
 function _arrayLikeToArray$m(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function ownKeys$N(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$N(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$N(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$N(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var LOG$c = getLogger('Backoffice', 'AplyMapping');
+var LOG$d = getLogger('Backoffice', 'AplyMapping');
 function aplyMapping (_ref) {
   var mapable = _ref.mapable,
     mappingData = _ref.mappingData,
@@ -286,7 +289,7 @@ function aplyMapping (_ref) {
     }
     return returnValue;
   } catch (e) {
-    LOG$c.debug('Mapabledata', mapable);
+    LOG$d.debug('Mapabledata', mapable);
     throw e;
   }
 }
@@ -448,7 +451,7 @@ function getLeafColumns(columns) {
 
 function ownKeys$M(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$M(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$M(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$M(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var LOG$b = getLogger('Backoffice', 'ApiHandler');
+var LOG$c = getLogger('Backoffice', 'ApiHandler');
 var jp = require('jsonpath');
 var _default$d = /*#__PURE__*/function () {
   function _default(configuration, _rootStore) {
@@ -1125,16 +1128,16 @@ var _default$d = /*#__PURE__*/function () {
         }
       });
       this._socket.on('error', function (error) {
-        LOG$b.error(new DivaError('Error on connection', error));
+        LOG$c.error(new DivaError('Error on connection', error));
       });
       this._socket.on('connect_error', function (error) {
-        LOG$b.log("connect_error due to ".concat(error.message));
+        LOG$c.log("connect_error due to ".concat(error.message));
       });
       this._socket.on('connect', function () {
-        LOG$b.debug('Successfully connected to socket');
+        LOG$c.debug('Successfully connected to socket');
       });
       this._socket.on('disconnect', function () {
-        LOG$b.debug('Disconnect from socket');
+        LOG$c.debug('Disconnect from socket');
       });
       return this._socket;
     }
@@ -1715,8 +1718,8 @@ var _default$7 = /*#__PURE__*/function () {
   function _default(root) {
     _classCallCheck(this, _default);
     this.root = root;
-    _defineProperty(this, "_configuration", void 0);
-    _defineProperty(this, "_apiConfig", void 0);
+    _defineProperty(this, "_configuration", undefined);
+    _defineProperty(this, "_apiConfig", undefined);
     makeAutoObservable(this, {
       root: false,
       fetchConfiguration: false
@@ -1760,10 +1763,9 @@ var _default$7 = /*#__PURE__*/function () {
 
       //merge with configuration so everything can changed by config
       if (config.configuration) {
-        configuration = merge(configuration, config.configuration, {
-          arrayMerge: function arrayMerge(_, s) {
-            return s;
-          }
+        configuration = mergeWith(configuration, config.configuration, function (obj, src) {
+          if (Array.isArray(obj) && Array.isArray(src) && obj.length != src.length) return src;
+          return undefined;
         });
       }
 
@@ -7173,6 +7175,7 @@ function loadConfiguration(t, root, config, lang) {
         mode: 'multiple',
         values: ['de', 'en', 'fr', 'it'],
         permission: 'backoffice_admin_organizations',
+        canSetToUndefined: true,
         hidden: function hidden(data) {
           return (data === null || data === void 0 ? void 0 : data.type) === undefined || (data === null || data === void 0 ? void 0 : data.parentType) === 'SUPPLIER' && (data === null || data === void 0 ? void 0 : data.type) !== 'SUPPLIER';
         },
@@ -12696,7 +12699,7 @@ var _default$3 = /*#__PURE__*/function () {
 function _createForOfIteratorHelper$k(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$k(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$k(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$k(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$k(r, a) : void 0; } }
 function _arrayLikeToArray$k(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-var LOG$a = getLogger('Backoffice', 'DownloadStore');
+var LOG$b = getLogger('Backoffice', 'DownloadStore');
 var DownloadStore = /*#__PURE__*/function () {
   function DownloadStore(_rootStore) {
     var _this = this;
@@ -12726,7 +12729,7 @@ var DownloadStore = /*#__PURE__*/function () {
               _iterator = _createForOfIteratorHelper$k(action.download);
               _context2.prev = 8;
               _loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
-                var _download$params, _ref3, _data$fileUrl;
+                var _download$params, _data$fileFormat, _data$fileUrl;
                 var url;
                 return _regeneratorRuntime.wrap(function _loop$(_context) {
                   while (1) switch (_context.prev = _context.next) {
@@ -12756,7 +12759,7 @@ var DownloadStore = /*#__PURE__*/function () {
                         url.searchParams.append(param.name, param.value);
                       });
                       _context.next = 14;
-                      return _this.donwloadFile(url, (_ref3 = (data === null || data === void 0 ? void 0 : data.fileName) + '.' + data.fileFormat) !== null && _ref3 !== void 0 ? _ref3 : data === null || data === void 0 || (_data$fileUrl = data.fileUrl) === null || _data$fileUrl === void 0 ? void 0 : _data$fileUrl.substring((data === null || data === void 0 ? void 0 : data.fileUrl.lastIndexOf('.')) + 1));
+                      return _this.donwloadFile(url, (data === null || data === void 0 ? void 0 : data.fileName) + '.' + ((_data$fileFormat = data.fileFormat) !== null && _data$fileFormat !== void 0 ? _data$fileFormat : data === null || data === void 0 || (_data$fileUrl = data.fileUrl) === null || _data$fileUrl === void 0 ? void 0 : _data$fileUrl.substring((data === null || data === void 0 ? void 0 : data.fileUrl.lastIndexOf('.')) + 1)));
                     case 14:
                       return _context.abrupt("break", 24);
                     case 15:
@@ -12912,7 +12915,7 @@ var DownloadStore = /*#__PURE__*/function () {
                 _context5.next = 4;
                 break;
               }
-              LOG$a.debug("The organization ".concat(data._id, " has no parentType of ").concat(validTypes.join(' or ')));
+              LOG$b.debug("The organization ".concat(data._id, " has no parentType of ").concat(validTypes.join(' or ')));
               throw new Error("Current organization is no ".concat(type == 'RETAILER' ? 'retailer,  retailer channel or association' : 'supplier or dealer'));
             case 4:
               orgData = data;
@@ -12931,7 +12934,7 @@ var DownloadStore = /*#__PURE__*/function () {
                 _context5.next = 14;
                 break;
               }
-              LOG$a.debug("The organization ".concat(data._id, " has no type of ").concat(validTypes.join(' or '), " nor a parent organization"));
+              LOG$b.debug("The organization ".concat(data._id, " has no type of ").concat(validTypes.join(' or '), " nor a parent organization"));
               throw new Error("Current organization is no ".concat(type == 'RETAILER' ? 'retailer channel or association' : 'supplier or dealer'));
             case 14:
               _context5.prev = 14;
@@ -13547,24 +13550,34 @@ function isExternalVid(file) {
 }
 
 var VIDEO_THUMB_PLACEHOLDER = 'data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjgwMHB4IiB3aWR0aD0iODAwcHgiIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgCgkgdmlld0JveD0iMCAwIDQ5IDQ5IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMzkuMjU2LDYuNUg5Ljc0NEM0LjM3MSw2LjUsMCwxMC44ODUsMCwxNi4yNzR2MTYuNDUxYzAsNS4zOSw0LjM3MSw5Ljc3NCw5Ljc0NCw5Ljc3NGgyOS41MTIKCQkJYzUuMzczLDAsOS43NDQtNC4zODUsOS43NDQtOS43NzRWMTYuMjc0QzQ5LDEwLjg4NSw0NC42MjksNi41LDM5LjI1Niw2LjV6IE00NywzMi43MjZjMCw0LjI4Ny0zLjQ3NCw3Ljc3NC03Ljc0NCw3Ljc3NEg5Ljc0NAoJCQlDNS40NzQsNDAuNSwyLDM3LjAxMiwyLDMyLjcyNlYxNi4yNzRDMiwxMS45ODgsNS40NzQsOC41LDkuNzQ0LDguNWgyOS41MTJjNC4yNywwLDcuNzQ0LDMuNDg4LDcuNzQ0LDcuNzc0VjMyLjcyNnoiLz4KCQk8cGF0aCBkPSJNMzMuMzYsMjQuMTM4bC0xMy44NTUtOC4xMTVjLTAuMzA4LTAuMTgtMC42OTEtMC4xODMtMS4wMDItMC4wMDVTMTgsMTYuNTI3LDE4LDE2Ljg4NnYxNi4yMjkKCQkJYzAsMC4zNTgsMC4xOTIsMC42OSwwLjUwMiwwLjg2OGMwLjE1NCwwLjA4OCwwLjMyNiwwLjEzMiwwLjQ5OCwwLjEzMmMwLjE3NSwwLDAuMzQ5LTAuMDQ2LDAuNTA1LTAuMTM3bDEzLjg1NS04LjExMwoJCQljMC4zMDYtMC4xNzksMC40OTUtMC41MDgsMC40OTUtMC44NjNTMzMuNjY3LDI0LjMxNywzMy4zNiwyNC4xMzh6IE0yMCwzMS4zN1YxOC42M2wxMC44NzYsNi4zNzFMMjAsMzEuMzd6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+';
+var LOG$a = getLogger('Backoffice', 'MediaItem');
 var MediaItem = /*#__PURE__*/function () {
-  function MediaItem(media, config, mediaItemId, medaItemRefId) {
+  function MediaItem(_ref) {
+    var media = _ref.media,
+      remoteUrl = _ref.remoteUrl,
+      config = _ref.config,
+      mediaItemId = _ref.mediaItemId,
+      mediaItemRefId = _ref.mediaItemRefId;
     _classCallCheck(this, MediaItem);
-    this.config = config;
     _defineProperty(this, "_url", void 0);
     _defineProperty(this, "_file", void 0);
     _defineProperty(this, "_mediaItemId", void 0);
     _defineProperty(this, "_mediaItemRefId", void 0);
     _defineProperty(this, "_itemRef", void 0);
     _defineProperty(this, "_isRemoteUrl", void 0);
+    _defineProperty(this, "_config", void 0);
+    this._config = config;
     if (typeof media === 'string') {
       this._url = media;
-      this._isRemoteUrl = isExternalVid(media);
+      if (!this._url.startsWith('http')) {
+        this._url = "https://".concat(this._url);
+      }
+      this._isRemoteUrl = remoteUrl ? true : isExternalVid(media);
     } else {
       this._file = media;
     }
     this._mediaItemId = mediaItemId;
-    this._mediaItemRefId = medaItemRefId;
+    this._mediaItemRefId = mediaItemRefId;
   }
   return _createClass(MediaItem, [{
     key: "file",
@@ -13589,10 +13602,10 @@ var MediaItem = /*#__PURE__*/function () {
   }, {
     key: "antdFile",
     get: function get() {
-      var _this$_itemRef$_id, _this$_itemRef, _ref, _this$_itemRef$fileNa, _this$_itemRef2, _this$_file, _this$_url;
+      var _this$_itemRef$_id, _this$_itemRef, _ref2, _this$_itemRef$fileNa, _this$_itemRef2, _this$_file, _this$_url;
       return {
         uid: (_this$_itemRef$_id = (_this$_itemRef = this._itemRef) === null || _this$_itemRef === void 0 ? void 0 : _this$_itemRef._id) !== null && _this$_itemRef$_id !== void 0 ? _this$_itemRef$_id : nanoid(),
-        name: this._isRemoteUrl ? this._url : (_ref = (_this$_itemRef$fileNa = (_this$_itemRef2 = this._itemRef) === null || _this$_itemRef2 === void 0 ? void 0 : _this$_itemRef2.fileName) !== null && _this$_itemRef$fileNa !== void 0 ? _this$_itemRef$fileNa : (_this$_file = this._file) === null || _this$_file === void 0 ? void 0 : _this$_file.name) !== null && _ref !== void 0 ? _ref : nameFromUrl((_this$_url = this._url) !== null && _this$_url !== void 0 ? _this$_url : ''),
+        name: this._isRemoteUrl ? this._url : (_ref2 = (_this$_itemRef$fileNa = (_this$_itemRef2 = this._itemRef) === null || _this$_itemRef2 === void 0 ? void 0 : _this$_itemRef2.fileName) !== null && _this$_itemRef$fileNa !== void 0 ? _this$_itemRef$fileNa : (_this$_file = this._file) === null || _this$_file === void 0 ? void 0 : _this$_file.name) !== null && _ref2 !== void 0 ? _ref2 : nameFromUrl((_this$_url = this._url) !== null && _this$_url !== void 0 ? _this$_url : ''),
         url: this._url,
         thumbUrl: this._isRemoteUrl ? VIDEO_THUMB_PLACEHOLDER : undefined
       };
@@ -13613,7 +13626,7 @@ var MediaItem = /*#__PURE__*/function () {
               return _context.abrupt("return");
             case 4:
               _context.next = 6;
-              return removeMediaItemRef(this.config.baseUrl, this.config.jwt, this._mediaItemRefId);
+              return removeMediaItemRef(this._config.baseUrl, this._config.jwt, this._mediaItemRefId);
             case 6:
               this._mediaItemId = undefined;
               this._mediaItemRefId = undefined;
@@ -13637,45 +13650,55 @@ var MediaItem = /*#__PURE__*/function () {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               if (!this._mediaItemRefId) {
-                _context2.next = 5;
+                _context2.next = 12;
                 break;
               }
-              _context2.next = 3;
-              return getMediaItemRef(this.config.baseUrl, this.config.jwt, this._mediaItemRefId);
-            case 3:
+              _context2.prev = 1;
+              _context2.next = 4;
+              return getMediaItemRef(this._config.baseUrl, this._config.jwt, this._mediaItemRefId);
+            case 4:
               this._itemRef = _context2.sent;
               this._url = this._itemRef.url;
-            case 5:
+              _context2.next = 12;
+              break;
+            case 8:
+              _context2.prev = 8;
+              _context2.t0 = _context2["catch"](1);
+              this._mediaItemRefId = undefined;
+              LOG$a.error(new DivaError$1('Failed to get media item ref, on next upload a new ref will be created', {
+                cause: _context2.t0
+              }));
+            case 12:
               if (!(this.file && !this._url)) {
-                _context2.next = 11;
+                _context2.next = 18;
                 break;
               }
-              _context2.next = 8;
+              _context2.next = 15;
               return getFileAsDataUri(this.file);
-            case 8:
+            case 15:
               this._url = _context2.sent;
-              _context2.next = 15;
+              _context2.next = 22;
               break;
-            case 11:
+            case 18:
               if (!(this._url && !this._file && !this._isRemoteUrl)) {
-                _context2.next = 15;
+                _context2.next = 22;
                 break;
               }
-              _context2.next = 14;
+              _context2.next = 21;
               return fetchFileData(this._url);
-            case 14:
+            case 21:
               this._file = _context2.sent;
-            case 15:
+            case 22:
               if (!(this.file && !isFileOfType(this.file, allowedTypes))) {
-                _context2.next = 17;
+                _context2.next = 24;
                 break;
               }
               throw new Error('File type is not allowed');
-            case 17:
+            case 24:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, this);
+        }, _callee2, this, [[1, 8]]);
       }));
       function init(_x) {
         return _init.apply(this, arguments);
@@ -13720,7 +13743,7 @@ var MediaItem = /*#__PURE__*/function () {
               }));
               formData.append('file', this._file, this._file.name);
               _context3.next = 12;
-              return uploadMediaItem(this.config.baseUrl, this.config.jwt, formData);
+              return uploadMediaItem(this._config.baseUrl, this._config.jwt, formData);
             case 12:
               response = _context3.sent;
               this._mediaItemRefId = response.ref._id;
@@ -13819,10 +13842,15 @@ function useFormData (_ref) {
           var ref = typeof item.mediaItemRefField == 'string' ? [item.mediaItemRefField] : item.mediaItemRefField;
           var media = getData(itemName, data);
           if (media) {
-            var mediaItem = new MediaItem(getData(urlName, data), {
-              baseUrl: root.configurationStore.apiConfig.mediaService,
-              jwt: root.dataStore.jwt
-            }, media, getData(ref, data));
+            var mediaItem = new MediaItem({
+              media: getData(urlName, data),
+              config: {
+                baseUrl: root.configurationStore.apiConfig.mediaService,
+                jwt: root.dataStore.jwt
+              },
+              mediaItemId: media,
+              mediaItemRefId: getData(ref, data)
+            });
             mediaItem.init(item.allowedTypes);
             setFieldInObject(itemName, data, mediaItem);
           }
@@ -13998,7 +14026,7 @@ function useFormData (_ref) {
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            newData = merge$1(_objectSpread$I({}, state.data), values);
+            newData = merge(_objectSpread$I({}, state.data), values);
             if (!skipApi) {
               _context2.next = 3;
               break;
@@ -14141,7 +14169,7 @@ function useFormData (_ref) {
 
   //if at an array an entry got added or deleted, its handeled by and so we take the data from the formdata
   var mergeCustomizer = function mergeCustomizer(obj, src) {
-    if (Array.isArray(obj) && obj.length != src.length) return src;
+    if (Array.isArray(obj) && Array.isArray(src) && obj.length != src.length) return src;
     return undefined;
   };
   var setNewData = function setNewData(newData, orig) {
@@ -14771,9 +14799,7 @@ var FormList$2 = function FormList(_ref) {
     }
   });
 };
-var FormList$3 = observer(FormList$2, {
-  forwardRef: true
-});
+var FormList$3 = observer(FormList$2);
 
 var ApiKey = function ApiKey(_ref) {
   var value = _ref.value,
@@ -14978,9 +15004,7 @@ var CustomButton = function CustomButton(_ref) {
     })
   });
 };
-var CustomButton$1 = observer(CustomButton, {
-  forwardRef: true
-});
+var CustomButton$1 = observer(CustomButton);
 
 var wrapper$5 = "wrapper-GVe2h";
 var buttonGroup = "button-group-GYt-T";
@@ -15018,7 +15042,7 @@ var SubTitle = function SubTitle(_ref) {
 };
 var SubTitle$1 = observer(SubTitle);
 
-var InputComponent = function InputComponent(_ref) {
+var InputComponent = function InputComponent(_ref, ref) {
   var _item$value, _item$value4;
   var item = _ref.item,
     data = _ref.data,
@@ -15055,6 +15079,7 @@ var InputComponent = function InputComponent(_ref) {
   };
   if (item.type === 'password') {
     return /*#__PURE__*/jsx(Input.Password, {
+      ref: ref,
       addonBefore: item.prefix,
       addonAfter: item.suffix,
       disabled: isReadonly(item, data),
@@ -15067,6 +15092,7 @@ var InputComponent = function InputComponent(_ref) {
     });
   }
   return /*#__PURE__*/jsx(Input, {
+    ref: ref,
     addonBefore: item.prefix,
     addonAfter: item.suffix,
     disabled: isReadonly(item, data),
@@ -15077,9 +15103,7 @@ var InputComponent = function InputComponent(_ref) {
     }
   });
 };
-var InputComponent$1 = observer(InputComponent, {
-  forwardRef: true
-});
+var InputComponent$1 = observer(/*#__PURE__*/React.forwardRef(InputComponent));
 
 function _createForOfIteratorHelper$i(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$i(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$i(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$i(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$i(r, a) : void 0; } }
@@ -15095,7 +15119,7 @@ function getCombinedValues(data, pattern) {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var _flatten$match$;
       var match = _step.value;
-      value = value.replace(match[0], (_flatten$match$ = flat(data)[match[1]]) !== null && _flatten$match$ !== void 0 ? _flatten$match$ : '');
+      value = value.replace(match[0], (_flatten$match$ = flatten(data)[match[1]]) !== null && _flatten$match$ !== void 0 ? _flatten$match$ : '');
     }
   } catch (err) {
     _iterator.e(err);
@@ -15243,7 +15267,7 @@ styleInject(css_248z$m);
 var _excluded$2 = ["apiInterface", "selectMapping", "apiMapping", "onChange", "value", "search", "options", "autoSelectFirst", "title"];
 function ownKeys$F(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$F(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$F(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$F(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var SelectWrapper$1 = function SelectWrapper(_ref) {
+var SelectWrapper$1 = function SelectWrapper(_ref, ref) {
   var apiInterface = _ref.apiInterface,
     selectMapping = _ref.selectMapping,
     apiMapping = _ref.apiMapping,
@@ -15265,6 +15289,7 @@ var SelectWrapper$1 = function SelectWrapper(_ref) {
     autoSelectFirst: autoSelectFirst
   });
   return /*#__PURE__*/jsxs("div", {
+    ref: ref,
     className: classnames(title ? wrapper$4 : undefined),
     children: [title, /*#__PURE__*/jsx(Select$1, _objectSpread$F(_objectSpread$F({}, selectProps), {}, {
       showSearch: search,
@@ -15277,9 +15302,7 @@ var SelectWrapper$1 = function SelectWrapper(_ref) {
     }))]
   });
 };
-var SimpleSelect = observer(SelectWrapper$1, {
-  forwardRef: true
-});
+var SimpleSelect = observer(/*#__PURE__*/forwardRef(SelectWrapper$1));
 var filterOption = function filterOption(input, option) {
   var _option$label;
   return ((_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : '').toLowerCase().includes(input.toLowerCase());
@@ -15298,6 +15321,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
     onChange: handleChange
   });
 };
+var RichTextEditor$1 = /*#__PURE__*/React.forwardRef(RichTextEditor);
 
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -16723,7 +16747,7 @@ var SelectWrapper = function SelectWrapper(_ref) {
     filterOption: false,
     placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t('filter.global'),
     allowClear: allowClear !== null && allowClear !== void 0 ? allowClear : filterServerSide,
-    showArrow: !filterServerSide || allowCreate || search,
+    suffixIcon: filterServerSide && !allowCreate && !search ? null : undefined,
     mode: mode == 'single' ? undefined : mode,
     showSearch: filterServerSide || allowCreate || search,
     onSearch: filterServerSide || allowCreate || search ? state.fetch : undefined,
@@ -16739,9 +16763,7 @@ var SelectWrapper = function SelectWrapper(_ref) {
     value: selected
   });
 };
-var Select = observer(SelectWrapper, {
-  forwardRef: true
-});
+var Select = observer(SelectWrapper);
 
 var wrapper$3 = "wrapper-WStAk";
 var headerWrapper = "header-wrapper-gWQuH";
@@ -17005,9 +17027,7 @@ var Translation = function Translation(_ref) {
     })]
   });
 };
-var Translation$1 = observer(Translation, {
-  forwardRef: true
-});
+var Translation$1 = observer(Translation);
 
 function FileFromWeb (_ref) {
   var _onEnter = _ref.onEnter;
@@ -17017,8 +17037,8 @@ function FileFromWeb (_ref) {
     setUploadFromWeb = _useState2[1];
   if (uploadFromWeb) {
     return /*#__PURE__*/jsx(FileInput, {
-      onEnter: function onEnter(f) {
-        _onEnter(f);
+      onEnter: function onEnter(f, copy) {
+        _onEnter(f, copy);
         setUploadFromWeb(false);
       },
       onAbort: function onAbort() {
@@ -17052,6 +17072,8 @@ function FileInput(_ref3) {
     _useState4 = _slicedToArray(_useState3, 2),
     value = _useState4[0],
     setValue = _useState4[1];
+  var _useTranslation2 = useTranslation(),
+    t = _useTranslation2.t;
   return /*#__PURE__*/jsxs(Space, {
     direction: "horizontal",
     onClick: function onClick(e) {
@@ -17067,17 +17089,26 @@ function FileInput(_ref3) {
           value ? onEnter(value) : undefined;
         },
         allowClear: true
-      }), /*#__PURE__*/jsx(Button, {
-        onClick: function onClick() {
-          onEnter(value);
+      }), /*#__PURE__*/jsx(Dropdown.Button, {
+        icon: /*#__PURE__*/jsx(DownOutlined, {}),
+        menu: {
+          items: [{
+            key: 'use',
+            label: t('backoffice.mediaupload.upload'),
+            onClick: function onClick() {
+              onEnter(value);
+            }
+          }],
+          onClick: function onClick() {
+            return onEnter(value, true);
+          }
         },
-        disabled: !value,
-        children: "\xDCbernehmen"
+        children: t('backoffice.mediaupload.use')
       })]
     }), /*#__PURE__*/jsx(Button, {
       type: "link",
       onClick: onAbort,
-      children: "Abbrechen"
+      children: t('backoffice.mediaupload.cancel')
     })]
   });
 }
@@ -17102,6 +17133,12 @@ function Upload (_ref) {
       return f.antdFile;
     });
   }, [files]);
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    error = _useState2[0],
+    setError = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   useEffect(function () {
     _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -17150,21 +17187,22 @@ function Upload (_ref) {
           case 4:
             setFiles([media]);
             onAdd === null || onAdd === void 0 || onAdd(media);
-            _context2.next = 11;
+            _context2.next = 12;
             break;
           case 8:
             _context2.prev = 8;
             _context2.t0 = _context2["catch"](1);
             onError === null || onError === void 0 || onError(_context2.t0);
-          case 11:
-            _context2.prev = 11;
+            setError(_context2.t0.message);
+          case 12:
+            _context2.prev = 12;
             setLoading(false);
-            return _context2.finish(11);
-          case 14:
+            return _context2.finish(12);
+          case 15:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[1, 8, 11, 14]]);
+      }, _callee2, null, [[1, 8, 12, 15]]);
     }));
     return function addMediaItem(_x) {
       return _ref3.apply(this, arguments);
@@ -17178,34 +17216,45 @@ function Upload (_ref) {
     }
   };
   var beforeUpload = function beforeUpload(file) {
-    var mediaItem = new MediaItem(file, config);
+    var mediaItem = new MediaItem({
+      media: file,
+      config: config
+    });
     addMediaItem(mediaItem);
     return Upload$1.LIST_IGNORE;
   };
-  var onFileFormWeb = function onFileFormWeb(url) {
-    var mediaItem = new MediaItem(url, config);
+  var onFileFormWeb = function onFileFormWeb(url, copy) {
+    var mediaItem = new MediaItem({
+      media: url,
+      remoteUrl: !copy,
+      config: config
+    });
     addMediaItem(mediaItem);
   };
-  return /*#__PURE__*/jsx(Upload$1, {
-    listType: "picture",
-    maxCount: 1,
-    fileList: fileList,
-    beforeUpload: beforeUpload,
-    onRemove: onRemoveMedia,
-    accept: allowedTypes === null || allowedTypes === void 0 ? void 0 : allowedTypes.join(','),
-    showUploadList: {
-      showRemoveIcon: !config.hideTrash
-    },
-    children: /*#__PURE__*/jsxs(Space$1, {
-      direction: "horizontal",
-      children: [/*#__PURE__*/jsx(Button$1, {
-        type: "primary",
-        icon: /*#__PURE__*/jsx(UploadOutlined, {}),
-        loading: loading,
-        children: "Upload"
-      }), /*#__PURE__*/jsx(FileFromWeb, {
-        onEnter: onFileFormWeb
-      })]
+  return /*#__PURE__*/jsx(Form$1.Item, {
+    validateStatus: error ? 'error' : '',
+    help: error ? t(error) : undefined,
+    children: /*#__PURE__*/jsx(Upload$1, {
+      listType: "picture",
+      maxCount: 1,
+      fileList: fileList,
+      beforeUpload: beforeUpload,
+      onRemove: onRemoveMedia,
+      accept: allowedTypes === null || allowedTypes === void 0 ? void 0 : allowedTypes.join(','),
+      showUploadList: {
+        showRemoveIcon: !config.hideTrash
+      },
+      children: /*#__PURE__*/jsxs(Space$1, {
+        direction: "horizontal",
+        children: [/*#__PURE__*/jsx(Button$1, {
+          type: "primary",
+          icon: /*#__PURE__*/jsx(UploadOutlined, {}),
+          loading: loading,
+          children: "Upload"
+        }), /*#__PURE__*/jsx(FileFromWeb, {
+          onEnter: onFileFormWeb
+        })]
+      })
     })
   });
 }
@@ -17219,10 +17268,15 @@ function Media (_ref) {
   var urlPath = item.urlField ? absoluteName.slice(0, -1).concat(item.urlField) : undefined;
   var mediaItemRefId = mediaItemRefIdPath ? state.getData(mediaItemRefIdPath, state.data) : undefined;
   var url = urlPath ? state.getData(urlPath, state.data) : undefined;
-  var _React$useState = React.useState(value ? new MediaItem(url, {
-      baseUrl: state.root.configurationStore.apiConfig.mediaService,
-      jwt: state.root.dataStore.jwt
-    }, value, mediaItemRefId) : undefined),
+  var _React$useState = React.useState(value ? new MediaItem({
+      media: url,
+      config: {
+        baseUrl: state.root.configurationStore.apiConfig.mediaService,
+        jwt: state.root.dataStore.jwt
+      },
+      mediaItemId: value,
+      mediaItemRefId: mediaItemRefId
+    }) : undefined),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     media = _React$useState2[0],
     setMedia = _React$useState2[1];
@@ -17276,6 +17330,7 @@ function getElement(item, setCanSave, state, absoluteName, _onChange, _onError,
   switch (item.type) {
     case 'select':
       return /*#__PURE__*/jsx(Select, {
+        value: item.value,
         initialValue: item.defaultValue,
         apiInterface: item.apiInterface,
         mode: item.mode,
@@ -17387,7 +17442,7 @@ function getElement(item, setCanSave, state, absoluteName, _onChange, _onError,
         children: item.label
       });
     case 'richText':
-      return /*#__PURE__*/jsx(RichTextEditor, {
+      return /*#__PURE__*/jsx(RichTextEditor$1, {
         initValue: state.getData(absoluteName, state.data),
         name: absoluteName,
         onChange: _onChange
@@ -17528,14 +17583,15 @@ function getElement(item, setCanSave, state, absoluteName, _onChange, _onError,
       return /*#__PURE__*/jsx(Fragment, {});
   }
 }
-function DisplayInput(props) {
+var DisplayInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   return /*#__PURE__*/jsx(Input, _objectSpread$A(_objectSpread$A({}, props), {}, {
+    ref: ref,
     disabled: true,
     value: t(props.translationPrefix + '.' + props.value)
   }));
-}
+});
 function isReadonly(item, data) {
   if (_typeof(item.readonly) != 'object') {
     return item.readonly;
@@ -17946,9 +18002,7 @@ function getLabel(item, t) {
   if (!item.label && item.type === 'button') return undefined;
   return item.label ? t(item.label, item.label) : item.name;
 }
-var Form = observer(FormWrapper$1, {
-  forwardRef: true
-});
+var Form = observer(/*#__PURE__*/React.forwardRef(FormWrapper$1));
 
 function ownKeys$y(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$y(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -18702,9 +18756,7 @@ var RoleSelector = function RoleSelector(_ref, ref) {
     })
   });
 };
-var RoleSelector$1 = observer(RoleSelector, {
-  forwardRef: true
-});
+var RoleSelector$1 = observer(/*#__PURE__*/React.forwardRef(RoleSelector));
 
 var permissionButton = "permission-Button-XctsZ";
 var select$1 = "select-lzft-";
@@ -20206,9 +20258,7 @@ var RelationSelector = function RelationSelector(_ref, ref) {
     })]
   });
 };
-var RelationSelector$1 = observer(RelationSelector, {
-  forwardRef: true
-});
+var RelationSelector$1 = observer(/*#__PURE__*/React.forwardRef(RelationSelector));
 
 function ownKeys$t(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$t(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$t(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -20426,9 +20476,7 @@ var FormList = function FormList(_ref, ref) {
     })]
   });
 };
-var FormList$1 = observer(FormList, {
-  forwardRef: true
-});
+var FormList$1 = observer(/*#__PURE__*/React.forwardRef(FormList));
 
 function ownKeys$s(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$s(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -20765,7 +20813,7 @@ var FormWrapper = function FormWrapper(_ref, ref) {
           placeholder: t('filter.global'),
           mode: mode == 'single' ? undefined : mode,
           allowClear: true,
-          showArrow: false,
+          suffixIcon: null,
           showSearch: true,
           onSearch: state.fetch,
           notFoundContent: state.fetching ? /*#__PURE__*/jsx(Spin, {
@@ -20785,9 +20833,7 @@ var FormWrapper = function FormWrapper(_ref, ref) {
     })]
   });
 };
-var SelectOrCreate = observer(FormWrapper, {
-  forwardRef: true
-});
+var SelectOrCreate = observer(/*#__PURE__*/React.forwardRef(FormWrapper));
 var Single = function Single(_ref2) {
   var _state$selected$;
   var state = _ref2.state;
@@ -21154,9 +21200,7 @@ var ListWrapper = function ListWrapper(props, ref) {
     }
   });
 };
-var List = observer(ListWrapper, {
-  forwardRef: true
-});
+var List = observer(/*#__PURE__*/React.forwardRef(ListWrapper));
 
 var LOG$5 = getLogger('Backoffice', 'JsonEditor');
 function useJsonEditorData (id, setCanSave, onChange, onError) {
@@ -21406,9 +21450,7 @@ var JsonEditor = function JsonEditor(_ref, ref) {
     })
   });
 };
-var JsonEditor$1 = observer(JsonEditor, {
-  forwardRef: true
-});
+var JsonEditor$1 = observer(/*#__PURE__*/React.forwardRef(JsonEditor));
 
 function ConfirmationPopup(props) {
   var _useTranslation = useTranslation(),
@@ -21649,7 +21691,7 @@ var ImageCropper = function ImageCropper(_ref, ref) {
         onChange: function onChange(e) {
           return aspect ? setKeepAspect(undefined) : setKeepAspect(crop.width / crop.height);
         }
-      }), "Echte Gr\xF6\xDFe x: ", realSize.x, "px y: ", realSize.y, "px"]
+      }), "Echte Gr\xF6\xDFe x: ", realSize.x.toString(), "px y: ", realSize.y.toString(), "px"]
     }), /*#__PURE__*/jsx(ReactCrop, {
       crop: crop,
       onChange: function onChange(_, percentCrop) {
@@ -21684,9 +21726,7 @@ var ImageCropper = function ImageCropper(_ref, ref) {
     })]
   });
 };
-var ImageCropper$1 = observer(ImageCropper, {
-  forwardRef: true
-});
+var ImageCropper$1 = observer(/*#__PURE__*/React.forwardRef(ImageCropper));
 
 function _createForOfIteratorHelper$9(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$9(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$9(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$9(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$9(r, a) : void 0; } }
@@ -22134,8 +22174,10 @@ var ToolTipInfo = function ToolTipInfo(props) {
     className: wrapper$2,
     children: /*#__PURE__*/jsx(Card, {
       title: t('backoffice.tooltipinfo.useroverview'),
-      bodyStyle: {
-        padding: 10
+      styles: {
+        body: {
+          padding: 10
+        }
       },
       bordered: false,
       style: {
@@ -22690,7 +22732,7 @@ function DropdownCell (_ref) {
           width: column.width - 20
         },
         onChange: save,
-        bordered: false,
+        variant: "borderless",
         disabled: !((_column$flow = column.flow) !== null && _column$flow !== void 0 && (_column$flow = _column$flow[children[1]]) !== null && _column$flow !== void 0 && _column$flow.length),
         options: (_column$flow2 = column.flow) === null || _column$flow2 === void 0 || (_column$flow2 = _column$flow2[children[1]]) === null || _column$flow2 === void 0 ? void 0 : _column$flow2.map(function (opt) {
           return {
@@ -22838,12 +22880,12 @@ function UnixTimeStampCell (_ref) {
 }
 
 function UnixTimeStampCheckCell (_ref) {
-  var _ref2;
+  var _checkTime;
   var children = _ref.children,
     column = _ref.column;
     _ref.dataIndex;
     _ref.save;
-  if ((_ref2 = (Date.now() - children[1]) / 1000 / 60 >= column.checkTime) !== null && _ref2 !== void 0 ? _ref2 : 15) {
+  if ((Date.now() - children[1]) / 1000 / 60 >= ((_checkTime = column.checkTime) !== null && _checkTime !== void 0 ? _checkTime : 15)) {
     return /*#__PURE__*/jsx("span", {
       style: {
         whiteSpace: 'nowrap'
@@ -23075,7 +23117,7 @@ var CustomCell = function CustomCell(_ref2) {
             return form.validateFields();
           case 3:
             values = _context.sent;
-            handleSave(merge(record, values));
+            handleSave(merge$1(record, values));
             _context.next = 10;
             break;
           case 7:
@@ -23388,7 +23430,6 @@ function AGHistogram (_ref) {
       if (subtitle) parseSubTitle = subtitle.text + eval(subtitle.variable);
       setOptions({
         data: data.bulks,
-        autoSize: true,
         theme: {
           baseTheme: root.contentStore.theme == 'darkmode' ? 'ag-default-dark' : 'ag-default'
         },
@@ -23459,7 +23500,7 @@ function AGHistogram (_ref) {
               height: height,
               width: width
             },
-            children: options && /*#__PURE__*/jsx(AgChartsReact, {
+            children: options && /*#__PURE__*/jsx(AgCharts, {
               options: options
             })
           }), loadingHistogram && /*#__PURE__*/jsx("div", {
@@ -24481,10 +24522,10 @@ var searchProps = function searchProps(title, filter) {
         confirm = _ref4.confirm,
         clearFilters = _ref4.clearFilters,
         visible = _ref4.visible;
-      var ref = useRef(null);
+      var ref1 = useRef(null);
       useEffect(function () {
         if (visible) {
-          ref.current.select();
+          ref1.current.select();
         }
       }, [visible]);
       return /*#__PURE__*/jsxs("div", {
@@ -24492,7 +24533,7 @@ var searchProps = function searchProps(title, filter) {
           padding: 8
         },
         children: [/*#__PURE__*/jsx(Input, {
-          ref: ref,
+          ref: ref1,
           placeholder: "Filter ".concat(title),
           value: selectedKeys[0],
           onChange: function onChange(e) {
@@ -24757,6 +24798,7 @@ function mapColumns(configuration, userHasPermission, onUpdate, data, globalFilt
 function mapColumn(column, onUpdate) {
   var _column$field, _column$children;
   return _objectSpread$j(_objectSpread$j(_objectSpread$j({}, column), {}, {
+    hidden: false,
     width: column.width || 100,
     dataIndex: (_column$field = column.field) === null || _column$field === void 0 ? void 0 : _column$field.split('.'),
     key: column.field || column.title,
@@ -24836,7 +24878,7 @@ function aplyFilterAndSortation (_ref) {
  */
 function sort(s, data) {
   var flatData = data.map(function (d) {
-    return flat.flatten(d);
+    return flatten(d);
   });
   var sorters = Array.of(s).flat().sort(function (a, b) {
     var _a$column, _b$column;
@@ -24847,7 +24889,7 @@ function sort(s, data) {
       return d[s.columnKey];
     });
   })).map(function (r) {
-    return flat.unflatten(r);
+    return unflatten(r);
   });
 }
 
@@ -24866,7 +24908,7 @@ function filter(f, data) {
     return k.includes('.');
   })) {
     filterableData = data.map(function (d) {
-      return flat.flatten(d);
+      return flatten(d);
     });
     isFlatted = true;
   }
@@ -24901,7 +24943,7 @@ function filter(f, data) {
     });
   });
   return isFlatted ? result.map(function (r) {
-    return flat.unflatten(r);
+    return unflatten(r);
   }) : result;
 }
 
@@ -24962,7 +25004,7 @@ function useTableData$1 (_ref) {
     var _configuration$create;
     if (!dataRow) return;
     var id = v4();
-    var processedDataRow = flat.unflatten(_objectSpread$h({
+    var processedDataRow = unflatten(_objectSpread$h({
       _id: id,
       ID: id
     }, dataRow));
@@ -25021,11 +25063,10 @@ function useTableData$1 (_ref) {
           sorter: mapColumns(configuration, root.actions.userHasPermission, onUpdate).filter(function (c) {
             return c.defaultSortOrder;
           }).map(function (c) {
-            var _c$dataIndex;
             return {
               column: c,
               field: c.dataIndex,
-              columnKey: (_c$dataIndex = c.dataIndex) === null || _c$dataIndex === void 0 ? void 0 : _c$dataIndex.join('.'),
+              columnKey: c.key,
               order: c.defaultSortOrder
             };
           })
@@ -25038,11 +25079,10 @@ function useTableData$1 (_ref) {
         sorter: mapColumns(configuration, root.actions.userHasPermission, onUpdate).filter(function (c) {
           return c.defaultSortOrder;
         }).map(function (c) {
-          var _c$dataIndex2;
           return {
             column: c,
             field: c.dataIndex,
-            columnKey: (_c$dataIndex2 = c.dataIndex) === null || _c$dataIndex2 === void 0 ? void 0 : _c$dataIndex2.join('.'),
+            columnKey: c.key,
             order: c.defaultSortOrder
           };
         })
@@ -25558,11 +25598,10 @@ function useTableData (_ref) {
     var sorter = columns.filter(function (c) {
       return c.defaultSortOrder;
     }).map(function (c) {
-      var _c$dataIndex;
       return {
         column: c,
         field: c.dataIndex,
-        columnKey: (_c$dataIndex = c.dataIndex) === null || _c$dataIndex === void 0 ? void 0 : _c$dataIndex.join('.'),
+        columnKey: c.key,
         order: c.defaultSortOrder
       };
     });
@@ -26328,7 +26367,7 @@ var AGChart = function AGChart(_ref) {
           padding: '50px'
         },
         className: root.contentStore.theme == 'darkmode' ? 'ag-theme-alpine-dark' : 'ag-theme-alpine',
-        children: /*#__PURE__*/jsx(AgChartsReact, {
+        children: /*#__PURE__*/jsx(AgCharts, {
           options: {
             data: dt,
             title: {
@@ -26677,9 +26716,7 @@ var CustomInput = function CustomInput(_ref) {
     })]
   });
 };
-var CustomInput$1 = observer(CustomInput, {
-  forwardRef: true
-});
+var CustomInput$1 = observer(CustomInput);
 
 function useTextData (_ref) {
   var id = _ref.id;
@@ -26713,9 +26750,7 @@ var CustomText = function CustomText(_ref) {
     });
   }
 };
-var CustomText$1 = observer(CustomText, {
-  forwardRef: true
-});
+var CustomText$1 = observer(CustomText);
 
 function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -27492,15 +27527,16 @@ var BreadCrumbsTrigger = function BreadCrumbsTrigger(_ref) {
         return e.stopPropagation();
       },
       children: /*#__PURE__*/jsx(Breadcrumb, {
-        children: breadcrumbs.map(function (data) {
-          return /*#__PURE__*/jsx(Breadcrumb.Item, {
-            className: classnames(breadcrumb, root.dataStore.selectedOrganizationId === data.id ? selected : undefined, !data.readPermission ? disabled : undefined),
+        items: breadcrumbs.map(function (data) {
+          return {
+            key: data.id,
+            breadcrumbName: data.displayName,
             onClick: function onClick() {
               var _root$dataStore;
               return root === null || root === void 0 || (_root$dataStore = root.dataStore) === null || _root$dataStore === void 0 ? void 0 : _root$dataStore.setSelectedOrganizationId(data.id);
             },
-            children: data.displayName
-          }, data.id);
+            className: classnames(breadcrumb, root.dataStore.selectedOrganizationId === data.id ? selected : undefined, !data.readPermission ? disabled : undefined)
+          };
         })
       })
     })]
@@ -29965,7 +30001,7 @@ var ExclusivityFeatureOption = function ExclusivityFeatureOption() {
   });
 };
 var ExclusivityTable = function ExclusivityTable(_ref) {
-  var _ref2;
+  var _selectedSerie$series;
   var type = _ref.type,
     config = _ref.config;
   var _useTranslation = useTranslation(),
@@ -30029,7 +30065,7 @@ var ExclusivityTable = function ExclusivityTable(_ref) {
         })]
       })
     }), showTable() && /*#__PURE__*/jsx(Spreadsheet, {
-      gridId: (_ref2 = 'crud-grid_exclusivity_' + type + (selectedSerie === null || selectedSerie === void 0 ? void 0 : selectedSerie.seriesName.DE)) !== null && _ref2 !== void 0 ? _ref2 : '',
+      gridId: 'crud-grid_exclusivity_' + type + ((_selectedSerie$series = selectedSerie === null || selectedSerie === void 0 ? void 0 : selectedSerie.seriesName.DE) !== null && _selectedSerie$series !== void 0 ? _selectedSerie$series : ''),
       jwt: jwt,
       applicationData: applicationData,
       configuration: {
@@ -30461,8 +30497,10 @@ function Detail(_ref) {
       },
       width: (_info$width = info.width) !== null && _info$width !== void 0 ? _info$width : left ? '800px' : '1000px',
       title: info.title,
-      bodyStyle: {
-        padding: 0
+      styles: {
+        body: {
+          padding: 0
+        }
       },
       footer: info.footer != false ? /*#__PURE__*/jsxs("div", {
         style: {