@agilemotion/oui-react-js 1.8.14 → 1.8.16

package/dist/ApplicationManager.js

@@ -409,6 +409,7 @@ class ApplicationManager {
         currentGraph.anchorView = view;
         currentGraph.anchorHistoryElement = this.navHistory[this.navHistory.length - 1];
         currentGraph.initialNavHistoryDepth = 0;
+        //this.updateAppBarTitle(currentGraph.anchorView.config.id, currentGraph.anchorView.config.title);
         this.updateContext({
           windowDisplayState: 'PINNED'
         });
@@ -476,7 +477,7 @@ class ApplicationManager {
       }
       if (view.window) {
         this.updateContext({
-          windowDisplayState: 'CLOSED'
+          windowDisplayState: 'MAXIMIZED'
         });
       }
     }
@@ -749,9 +750,10 @@ class ApplicationManager {
     return 'applicationManager';
   };
   loadAnchor(graph) {
+    alert('Loading anchor');
     this.navHistory.splice(graph.initialNavHistoryDepth - 1, this.navHistory.length);
     this.addView(graph.anchorView, graph.anchorHistoryElement.path, true);
-    this.navigate('/view/unload');
+    //this.navigate('/view/unload');
     this.navigate('/view/' + graph.anchorView.config.id);
   }
   removeLoadedGraph(routeBackToAnchor) {
@@ -790,7 +792,7 @@ class ApplicationManager {
       }
       if (graph.config.isWindow) {
         this.updateContext({
-          windowDisplayState: 'CLOSED'
+          windowDisplayState: 'MAXIMIZED'
         });
       }
     }
@@ -801,7 +803,9 @@ class ApplicationManager {
       for (const contextView of this.views) {
         this.closeView(contextView.handle.api.id, false);
       }
-      this.getViewPortHistory().push('/switch');
+
+      /*this.getViewPortHistory()
+          .push('/switch');*/
     }
     config.isWindow = isWindow;
     let graph = new _Graph.default(_Utils.default.parseConfig(config));

package/dist/BasicApp.js

@@ -17,6 +17,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const location = window.location.protocol + "//" + window.location.hostname;
 const BasicApp = props => {
   const navigate = (0, _reactRouterDom.useNavigate)();
+  const reloadKey = _react.default.useRef(0);
   _react.default.useEffect(() => {
     console.log('PATH : ' + window.location.pathname);
     if (window.location.pathname !== '/reset-password' && window.location.pathname !== '/login' && window.location.pathname !== '/forgot-password' && window.location.pathname !== '/change-password') {
@@ -31,7 +32,7 @@ const BasicApp = props => {
     path: "view/:id",
     element: /*#__PURE__*/_react.default.createElement(_ViewContainer.default, {
       dashboard: /*#__PURE__*/_react.default.createElement(_Dashboard.default, {
-        ref: /*#__PURE__*/_react.default.createRef()
+        key: 'dashboard-' + reloadKey.current++
       })
     })
   })), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {

package/dist/components/DataGrid.js

@@ -119,7 +119,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
   const [deletedRows, setDeletedRows] = _react.default.useState([]);
   const [editable, setEditable] = _react.default.useState(false);
   const [scrollWidth, setScrollWidth] = _react.default.useState(0);
-  const [rowsPerPageOptions] = _react.default.useState([15, 30, 45, 60, 75]);
+  const [rowsPerPageOptions] = _react.default.useState([15, 30, 45, 60, 75, 150, 300]);
   const [rowsPerPageLoading, setRowsPerPageLoading] = _react.default.useState(true);
   const [rowsPerPage, setRowsPerPage] = _react.default.useState(props.config.pageSize);
   const highlightRowSelection = _react.default.useRef(!_Utils.default.isNull(props.config.highlightRowSelection) ? props.config.highlightRowSelection : !_Utils.default.isNull(props.config.disableRowSelection) ? !props.config.disableRowSelection : true);
@@ -394,7 +394,6 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
     for (let i = 0; i < records.length; i++) {
       tableRows.push(observeRow(records[i]));
     }
-    rowsRef.current = tableRows;
     setRows(tableRows);
   }
   const search = function () {
@@ -521,6 +520,33 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
       }
     }
   };
+  const updateRowReadOnlyStatus = newRows => {
+    if (newRows) {
+      if (props.config.rowAttributes && props.config.rowAttributes.readOnlyEvaluator) {
+        let index = 0;
+        for (const row of newRows) {
+          row.readOnly = _DynamicJS.default.executeScriptObject('ROW-' + row.id + 'readOnlyEvaluator', props.config.rowAttributes.readOnlyEvaluator, props.config.id, {
+            index
+          }, null);
+          index++;
+        }
+      }
+    }
+  };
+  const updateColumnReadOnlyStatus = (column, newRows) => {
+    if (column.attributes && column.attributes.readOnlyEvaluator) {
+      let index = 0;
+      for (const row of newRows) {
+        if (!row.columnReadOnly) {
+          row.columnReadOnly = {};
+        }
+        row.columnReadOnly[column.id] = _DynamicJS.default.executeScriptObject('COL-' + row.id + '-' + column.id + '-readOnlyEvaluator', column.attributes.readOnlyEvaluator, props.config.id, {
+          index
+        }, null);
+        index++;
+      }
+    }
+  };
   _react.default.useEffect(() => {
     updateScrollBarPadding();
     _Observable.default.processSystemGeneratedSubscriptions(props.config.id);
@@ -544,10 +570,20 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
       for (const row of props.rows) {
         rowValues.push(observeRow(row));
       }
+      updateRowReadOnlyStatus(props.rows);
+      for (const column of config.columns) {
+        updateColumnReadOnlyStatus(column, props.rows);
+      }
       rowsRef.current = rowValues;
       setRows(rowValues);
     }
   }, [props.rows]);
+  _react.default.useEffect(() => {
+    updateRowReadOnlyStatus(rows);
+    for (const column of config.columns) {
+      updateColumnReadOnlyStatus(column, rows);
+    }
+  }, [rows]);
   _react.default.useEffect(() => {
     fireSelectionEvent();
   }, [selected]);
@@ -834,7 +870,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
       onRowError: rowErrorHandler,
       handle: createCellEditorHandle(column),
       viewId: props.viewId,
-      editor: !props.disabled ? column.editor : null,
+      editor: !props.disabled && !row.readOnly && !row.columnReadOnly?.[column?.id] ? column.editor : null,
       ref: /*#__PURE__*/_react.default.createRef(),
       refCallback: createCell,
       selected: isItemSelected,

package/dist/components/ProgressTracker.js

@@ -95,7 +95,7 @@ const HtmlPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
   };
   return visible && /*#__PURE__*/_react.default.createElement("div", {
     style: _Utils.default.mergeStyles({}, props.config)
-  }, data && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, data.steps.map((step, index) => {
+  }, data && /*#__PURE__*/_react.default.createElement("div", null, data.steps.map((step, index) => {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       style: {
         margin: "4px"

package/dist/components/Toolbar.js

@@ -284,7 +284,7 @@ const Toolbar = props => {
       onClick: handleToggle
     }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
       id: 'MORE'
-    }))))), /*#__PURE__*/_react.default.createElement(_Popper.default, {
+    }))))), anchorRef.current && /*#__PURE__*/_react.default.createElement(_Popper.default, {
       open: open,
       anchorEl: anchorRef.current,
       keepMounted: true,

package/dist/components/dashboard/FoldingSideTabDashboard.js

@@ -230,7 +230,7 @@ const FoldingSideTabDashboard = props => {
   };
   function launchDashboard() {
     _ApplicationManager.default.closeAllViews();
-    _ApplicationManager.default.navigate('/switch');
+    //applicationManager.navigate('/switch');
     _ApplicationManager.default.navigate('/view/dashboard');
   }
   return loading ? /*#__PURE__*/_react.default.createElement("div", null, "Loading...") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -293,17 +293,19 @@ const FoldingSideTabDashboard = props => {
     className: "content w-100 h-100 row no-margin no-padding"
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: '100%',
+      width: windowPinned ? 'calc(100% - 320px)' : '100%',
       height: "100%",
       mxHeight: "100%",
-      overflow: 'auto'
+      overflow: 'auto',
+      paddingTop: '4px'
     }
   }, /*#__PURE__*/_react.default.createElement(_ViewPort.default, {
     windowPinned: windowPinned
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'col no-margin no-padding',
     style: {
-      width: windowPinned ? '320px' : '0'
+      width: windowPinned ? '320px' : '0',
+      margin: '8px'
     }
   }, /*#__PURE__*/_react.default.createElement(_WindowViewPort.default, {
     stateChangeHandler: state => {

package/dist/components/form/Form.js

@@ -191,8 +191,9 @@ const Form = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwar
             sectionHandle.api.refresh();
           }
         }
-        if (!_Utils.default.isNull(props.config.visible)) {
-          setVisible(_Utils.default.evaluateBooleanExpression(props.config.visible, props.config.id));
+        let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+        if (!_Utils.default.isNull(parsedConfig.visible)) {
+          setVisible(_Utils.default.evaluateBooleanExpression(parsedConfig.visible, parsedConfig.id));
         }
       }
     };

package/dist/components/form/LookupField.js

@@ -16,6 +16,7 @@ var _BaseField = require("./BaseField");
 var _DataGrid = require("../DataGrid");
 var _Observable = _interopRequireDefault(require("../../event/Observable"));
 var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
+var _Icon = _interopRequireDefault(require("../Icon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
@@ -68,6 +69,9 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
   const openSearch = () => {
     setOpen(true);
   };
+  const clearValue = () => {
+    base.handleValueChange(null);
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "w-100 lookup row no-margin no-padding",
     style: _Utils.default.mergeStyles({
@@ -96,16 +100,32 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
     className: 'col-*-* no-margin no-padding',
     style: {
       width: 'calc(100% - 72px)',
-      marginBottom: base.value ? '0' : '8px'
+      marginBottom: base.value ? '0' : '8px',
+      position: 'relative'
     }
-  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+  }, !base.required && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '32px',
+      height: '32px',
+      position: 'absolute',
+      right: 8,
+      zIndex: 10000
+    }
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    variant: 'outlined',
+    onClick: clearValue,
+    disabled: base.disabled
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: "CLEAR"
+  }))), /*#__PURE__*/_react.default.createElement(_TextField.default, {
     style: {
       marginTop: '0',
       width: props.config.attributes?.style?.width || 'calc(100% - 2px)'
     },
     id: props.id,
     required: base.required,
-    disabled: true,
+    readonly: true,
+    disabled: base.disabled,
     label: !_Utils.default.isNull(props.config.attributes) && !_Utils.default.isNull(props.config.attributes['label']) ? props.config.attributes['label'] : null,
     value: base.value?.__oui_label || base.value?.dataRecordDescription || defaultValue,
     className: props.className || 'lookup-field-input',

package/dist/components/layout/CollapsiblePanel.css

@@ -1,9 +1,9 @@
-.coll-panel-container {
-    font-family: sans-serif;
-    text-align: center;
-}
-
-.coll-panel-btn:focus {
-    outline: 0;
-    box-shadow: none;
-}
+.coll-panel-container {
+    font-family: sans-serif;
+    text-align: center;
+}
+
+.coll-panel-btn:focus {
+    outline: 0;
+    box-shadow: none;
+}

package/dist/components/layout/View.css

@@ -1,68 +1,68 @@
-.view {
-    padding: 0 32px;
-    background-color: #ffffff;
-    border-radius: 4px;
-}
-
-.window-unpinned .view {
-    width: 0 !important;;
-}
-
-.window-pinned .view {
-    padding: 0 8px;
-}
-
-.no-margin {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-}
-
-.no-padding {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-}
-
-.centered-flex-box {
-    display: flex;
-    align-Items: center;
-    justify-content: center
-}
-
-/* Smartphones (landscape); */
-@media only screen and (min-device-width : 361px) and (max-device-width : 480px) {
-    .view {
-        padding: 0 16px;
-    }
-}
-
-/* Smartphones (portrait); */
-@media only screen and (min-device-width : 280px) and (max-device-width : 360px) {
-    .view {
-        padding: 0 16px;
-    }
-}
-
-/* iPads (portrait and landscape); */
-@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
-    .view {
-        padding: 0 24px;
-    }
-}
-
-/* iPad 3 */
-@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
-    .view {
-        padding: 0 24px;
-    }
-}
-
-/* small desktop screens */
-@media only screen and (max-width : 600px) {
-}
-
-/* low resolution desktop */
-@media only screen and (max-width : 1200px) {
-    .view {
-
-    }
-}
+.view {
+    padding: 0 32px;
+    background-color: #ffffff;
+    border-radius: 4px;
+}
+
+.window-unpinned .view {
+    width: 0 !important;;
+}
+
+.window-pinned .view {
+    padding: 0 8px;
+}
+
+.no-margin {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+
+.no-padding {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+.centered-flex-box {
+    display: flex;
+    align-Items: center;
+    justify-content: center
+}
+
+/* Smartphones (landscape); */
+@media only screen and (min-device-width : 361px) and (max-device-width : 480px) {
+    .view {
+        padding: 0 16px;
+    }
+}
+
+/* Smartphones (portrait); */
+@media only screen and (min-device-width : 280px) and (max-device-width : 360px) {
+    .view {
+        padding: 0 16px;
+    }
+}
+
+/* iPads (portrait and landscape); */
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
+    .view {
+        padding: 0 24px;
+    }
+}
+
+/* iPad 3 */
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
+    .view {
+        padding: 0 24px;
+    }
+}
+
+/* small desktop screens */
+@media only screen and (max-width : 600px) {
+}
+
+/* low resolution desktop */
+@media only screen and (max-width : 1200px) {
+    .view {
+
+    }
+}

package/dist/components/layout/View.js

@@ -61,6 +61,7 @@ const View = props => {
     }
   }
   _react.default.useLayoutEffect(() => {
+    props.handle.api = api();
     if (!props.handle.api.loaded()) {
       if (props.handle.api.model) {
         let ownPropertyNames = Object.getOwnPropertyNames(props.handle.api.model);
@@ -69,7 +70,6 @@ const View = props => {
         }
       }
     }
-    props.handle.api = api();
   }, []);
   _react.default.useEffect(() => {
     props.handle.api = api();
@@ -149,7 +149,7 @@ const View = props => {
         doUpdateModel(values);
       },
       setModelValue: (key, value) => {
-        model.key = value;
+        model[key] = value;
       },
       getModelValue: key => {
         return model[key];

package/dist/components/layout/ViewPort.js

@@ -44,8 +44,9 @@ const ViewPort = props => {
     style: {
       height: 'calc(100vh - 96px)',
       maxHeight: 'calc(100vh - 96px)',
-      position: props.windowPinned ? 'relative' : 'fixed',
-      width: props.windowPinned ? '100%' : 'calc(100% - 348px)'
+      position: 'fixed',
+      width: props.windowPinned ? 'calc(100% - 664px)' : 'calc(100% - 348px)',
+      borderRadius: '4px'
     }
   }, /*#__PURE__*/_react.default.createElement(_PopupView.default, {
     controller: popupViewController.current

package/dist/components/layout/Window.css

@@ -17,6 +17,11 @@
   padding-left: 0 !important;
 }
 
+.window-paper-min,
+.window-paper-max {
+  --Paper-shadow: unset !important;
+}
+
 @media (max-width: 991px) {
   .window-paper-max {
     width: calc(100% - 16px) !important;

package/dist/components/layout/Window.js

@@ -15,8 +15,10 @@ var _WindowDialog = _interopRequireDefault(require("./WindowDialog"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const minimizeWidth = '848';
 const PaperComponent = props => {
+  const nodeRef = (0, _react.useRef)(null);
   const [bounds, setBounds] = (0, _react.useState)({
     left: 0,
     right: 0,
@@ -44,8 +46,11 @@ const PaperComponent = props => {
     bounds: bounds,
     onStart: handleStart,
     handle: "#meeting-window-header",
-    cancel: '[class*="MuiDialogContent-root"]'
-  }, /*#__PURE__*/_react.default.createElement(_Paper.default, props));
+    cancel: '[class*="MuiDialogContent-root"]',
+    nodeRef: nodeRef
+  }, /*#__PURE__*/_react.default.createElement(_Paper.default, _extends({}, props, {
+    ref: nodeRef
+  })));
 };
 const Window = props => {
   const {
@@ -134,8 +139,13 @@ const Window = props => {
           paper.style.transform = windowTransformValue;
         }
         paper.style.width = '320px';
-        paper.style.height = 'calc(100% - 88px)';
+        paper.style.height = 'calc(100% - 96px)';
         paper.style.boxShadow = 'unset';
+        paper.style.borderRadius = '4px';
+        paper.style.left = 'unset';
+        paper.style.right = '0';
+        paper.style.position = 'absolute';
+        paper.style.top = '72px';
         let header = document.getElementsByClassName('dialogHeader')[0];
         header.getElementsByTagName('button')[0].style.color = '#000000';
         setDisplayState('PINNED');
@@ -156,9 +166,13 @@ const Window = props => {
         if (windowTransformValue) {
           paper.style.transform = windowTransformValue;
         }
+        paper.style.removeProperty('--Paper-shadow');
+        paper.style.boxShadow = 'unset';
         paper.style.width = minimizeWidth + 'px';
         paper.style.height = '500px';
         paper.style.margin = '0 16px 16px 16px';
+        paper.style.position = 'relative';
+        paper.style.border = 'unset';
         let header = document.getElementsByClassName('dialogHeader')[0];
         header.getElementsByTagName('button')[0].style.color = '#000000';
         document.getElementById('meeting-window-header').style.cursor = 'move';
@@ -182,11 +196,17 @@ const Window = props => {
       let sidebar = document.getElementsByClassName('sidebar')[0];
       let sidebarTransform = window.getComputedStyle(sidebar, null).transform;
       setWindowTransformValue(paper.style.transform);
+      paper.style.removeProperty('--Paper-shadow');
+      paper.style.boxShadow = 'unset';
       paper.style.transform = 'translate(0, 0)';
       paper.style.backgroundColor = '#FFFFFF';
-      paper.style.width = 'calc(100% - ' + getLeftOffset() + 'px)';
+      paper.style.width = 'calc(100% - ' + isNaN(getLeftOffset()) ? '344' : getLeftOffset() + 'px)';
       paper.style.height = 'calc(100% - 88px)';
       paper.style.margin = '8px';
+      paper.style.right = '0';
+      paper.style.position = 'absolute';
+      paper.style.top = '72px';
+      paper.style.left = (isNaN(getLeftOffset()) ? '328' : getLeftOffset()) + 'px';
       let header = document.getElementsByClassName('dialogHeader')[0];
       header.getElementsByTagName('button')[0].style.color = 'rgba(0, 0, 0, 0.54)';
       document.getElementById('meeting-window-header').style.cursor = 'default';
@@ -229,6 +249,9 @@ const Window = props => {
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: 'window-content',
+    style: {
+      overflow: 'hidden'
+    },
     className: `${(displayState === 'PINNED' ? 'window-pinned ' : '') + 'w-100 h-100'}`
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'meeting-window-header',

package/dist/components/layout/WindowDialog.js

@@ -16,7 +16,6 @@ const withStyledDialog = Component => (0, _withStyles.default)(theme => ({
     pointerEvents: "none",
     zIndex: 0,
     left: 'unset',
-    border: '1px solid #e1e1e1',
     borderRadius: '4px'
   },
   paper: props => ({
@@ -30,7 +29,6 @@ const withStyledDialog = Component => (0, _withStyles.default)(theme => ({
     bottom: 0,
     left: '164px',
     top: '40px',
-    borderRadius: 4,
     boxShadow: "none",
     zIndex: 0,
     "@media (max-width:991px)": {

package/dist/components/layout/WindowViewPort.js

@@ -8,7 +8,6 @@ var _react = _interopRequireWildcard(require("react"));
 require("./ViewContainer.css");
 var _Window = _interopRequireDefault(require("./Window"));
 var _View = require("./View");
-var _Observable = _interopRequireDefault(require("../../event/Observable"));
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
@@ -18,6 +17,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const WindowViewContainer = props => {
   const [view, setView] = _react.default.useState(null);
   const [pinned, setPinned] = _react.default.useState(false);
+  const counter = (0, _react.useRef)(0);
   function loadView(context) {
     if (context) {
       if (Object.keys(context).find(key => key === 'windowView')) {
@@ -74,8 +74,8 @@ const WindowViewContainer = props => {
       onClose: () => {}
     }, /*#__PURE__*/_react.default.createElement(_View.View, {
       config: view.config,
+      key: view.config.id,
       parameters: view.parameters,
-      ref: /*#__PURE__*/_react.default.createRef(),
       handle: view.handle
     })), view && pinned && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
       onClick: e => {