@agilemotion/oui-react-js 1.8.13 → 1.8.15

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/BasicAppHome.js

@@ -91,7 +91,7 @@ const BasicAppHome = props => {
     }, true);
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !_Utils.default.isNull(dashboardSettings) && /*#__PURE__*/_react.default.createElement("div", {
-    className: `${"main w-100 h-100 d-inline-block " + dashboardSettings.systemProfileDto.organisation.code.toLowerCase() + "-skin"}`
+    className: `main w-100 h-100 d-inline-block ${dashboardSettings.systemProfileDto.organisation.code.toLowerCase()}-skin`
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "w-100 h-100"
   }, /*#__PURE__*/_react.default.createElement(_react2.ThemeProvider, {
@@ -114,12 +114,37 @@ const BasicAppHome = props => {
         secondary: {
           main: dashboardSettings.systemProfileDto.secondCorporateBrandColor
         }
+      },
+      components: {
+        MuiCssBaseline: {
+          styleOverrides: {
+            body: {
+              // Firefox
+              scrollbarColor: 'rgba(100, 100, 100, 0.4) transparent',
+              scrollbarWidth: 'thin'
+            },
+            // WebKit browsers
+            '::-webkit-scrollbar': {
+              width: '8px',
+              height: '8px'
+            },
+            '::-webkit-scrollbar-track': {
+              background: 'transparent'
+            },
+            '::-webkit-scrollbar-thumb': {
+              backgroundColor: 'rgba(100, 100, 100, 0.4)',
+              borderRadius: '4px',
+              transition: 'background-color 0.3s'
+            },
+            '::-webkit-scrollbar-thumb:hover': {
+              backgroundColor: 'rgba(100, 100, 100, 0.6)'
+            }
+          }
+        }
       }
     })
   }, /*#__PURE__*/_react.default.createElement(_material.CssBaseline, null), /*#__PURE__*/_react.default.createElement(_FoldingSideTabDashboard.default, {
-    logoutCallBack: () => {
-      logout();
-    },
+    logoutCallBack: () => logout(),
     settings: dashboardSettings,
     avatar: avatarUrl,
     logo: dashboardSettings.logo,

package/dist/components/DataGrid.js

@@ -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/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", {
@@ -284,17 +284,28 @@ const FoldingSideTabDashboard = props => {
     toggleSidebar: toggleSidebar,
     logoutCallBack: props.logoutCallBack
   })), ' ', /*#__PURE__*/_react.default.createElement("div", {
-    className: "content w-100 h-100"
+    className: "content",
+    style: {
+      height: "calc(100vh - 70px)",
+      maxHeight: "calc(100vh - 70px)"
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "content w-100 h-100 row no-margin no-padding"
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: windowPinned ? 'calc(100% - 320px)' : '100%'
+      width: windowPinned ? 'calc(100% - 320px)' : '100%',
+      height: "100%",
+      mxHeight: "100%",
+      overflow: 'auto',
+      paddingTop: '4px'
     }
-  }, /*#__PURE__*/_react.default.createElement(_ViewPort.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__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/dashboard/components/blackDashboard/sidebar/FoldingTabSidebar.js

@@ -317,7 +317,7 @@ class FoldingTabSidebar extends _react.default.Component {
       className: this.props.className,
       data: activeColor,
       style: {
-        overflow: 'auto',
+        overflow: 'hidden',
         maxHeight: '100vh'
       }
     }, /*#__PURE__*/_react.default.createElement("table", {

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,31 @@ 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'
+    }
+  }, !base.required && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '32px',
+      height: '32px',
+      position: 'absolute',
+      right: 8,
+      zIndex: 10000
     }
-  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+  }, /*#__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,
     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/View.js

@@ -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

@@ -11,7 +11,7 @@ var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManag
 var _ConfirmationDialog = require("../ConfirmationDialog");
 var _PopupView = _interopRequireDefault(require("../PopupView"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ViewPort = () => {
+const ViewPort = props => {
   const navigate = (0, _reactRouterDom.useNavigate)();
   const [loading, setLoading] = _react.default.useState(true);
   const confirmationDialogController = _react.default.useRef({});
@@ -42,7 +42,11 @@ const ViewPort = () => {
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      height: 'calc(100vh - 90px)'
+      height: 'calc(100vh - 96px)',
+      maxHeight: 'calc(100vh - 96px)',
+      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

@@ -4,26 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 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 withStyledDialog = Component => (0, _withStyles.default)(theme => ({
   root: {
-    pointerEvents: "none"
+    pointerEvents: "none",
+    zIndex: 0,
+    left: 'unset',
+    borderRadius: '4px'
   },
   paper: props => ({
     pointerEvents: "auto",
-    width: `calc(100% - ${props.leftOffset || "0px"})`,
+    width: `100%`,
     maxWidth: "100%",
-    height: "calc(100% - 88px)",
+    height: "calc(100% - 112px)",
     position: "absolute",
+    overflow: 'hidden',
     margin: "8px",
     bottom: 0,
-    right: 0,
-    overflow: "hidden",
-    borderRadius: 4,
+    left: '164px',
+    top: '40px',
+    boxShadow: "none",
+    zIndex: 0,
     "@media (max-width:991px)": {
       maxWidth: "100%"
     }
@@ -36,12 +43,14 @@ const withStyledDialog = Component => (0, _withStyles.default)(theme => ({
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
     classes: {
-      paper: classes.paper
+      paper: classes.paper,
+      root: classes.root
     }
   }));
 });
 const StyledDialog = withStyledDialog(_Dialog.default);
 const WindowDialog = props => {
+  (0, _react.useEffect)(() => {}, []);
   return /*#__PURE__*/_react.default.createElement(StyledDialog, props);
 };
 var _default = exports.default = WindowDialog;

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 => {

package/dist/components/loader.css

@@ -6,7 +6,7 @@
 	top: 0;
 	width: 100vw; /* Full width */
 	height: 100vh; /* Full height */
-	overflow: auto; /* Enable scroll if needed */
+	overflow: hidden; /* Enable scroll if needed */
 	background-color: rgb(0,0,0); /* Fallback color */
 	background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
 }

package/dist/components/media/TrainingRoom.js

@@ -78,6 +78,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defaul
           case _VCEventType.VCEventType.REQUEST_TO_JOIN_MEETING:
             break;
           case _VCEventType.VCEventType.USER_JOINED:
+            alert('USER JOIN FIREEEEE...');
             addUser(be.payload);
             break;
           case _VCEventType.VCEventType.USER_LEFT_MEETING:

package/dist/components/media/VCRoom.js

@@ -10,6 +10,8 @@ require("./Video.css");
 require("./VCRoom.css");
 var _TrainingRoom = _interopRequireDefault(require("./TrainingRoom"));
 var _Observable = _interopRequireDefault(require("../../event/Observable"));
+var _Event = _interopRequireDefault(require("../../event/Event"));
+var _EventType = _interopRequireDefault(require("../../event/EventType"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const WAITING_FOR_OTHERS_TO_JOIN_MESSAGE = exports.WAITING_FOR_OTHERS_TO_JOIN_MESSAGE = 'Waiting for others to join';
 const SYSTEM_ERROR_MESSAGE = exports.SYSTEM_ERROR_MESSAGE = 'A system error has occurred. Please try again later or contact your system administrator';
@@ -22,10 +24,11 @@ const VCRoom = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forw
     props.handle.api = api();
   });
   _react.default.useEffect(() => {
-    props.handle.api = api();
     let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
     _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
     _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
+    let event = new _Event.default(props.handle, props.viewId, null);
+    _Observable.default.fireEvent(_EventType.default.COMPONENT_LOAD, event);
   }, []);
   const api = () => {
     return {

package/dist/components/media/VCRoomParticipant.css

@@ -11,7 +11,7 @@
 }
 
 .meeting-participant-container-current-user {
-  min-width: 150px;
+  min-width: 212px;
   min-height: 150px;
 }
 

package/dist/components/media/VCRoomParticipant.js

@@ -713,7 +713,8 @@ const VCRoomParticipant = props => {
     }
   }, audioDevices.map((device, index) => {
     return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-      onClick: () => changeAudioDevice(device)
+      onClick: () => changeAudioDevice(device),
+      key: index
     }, /*#__PURE__*/_react.default.createElement("span", {
       style: {
         color: selectedAudioDevice && selectedAudioDevice.id === device.id ? '#198754' : null

package/dist/components/navbars/HomeNavbar.js

@@ -25,7 +25,9 @@ const propHandler = state => {
 class HomeNavbar extends _react.default.Component {
   styles = {
     header: {
-      backgroundColor: this.props.color
+      backgroundColor: this.props.color,
+      height: "72px",
+      minHeight: "72px"
     }
   };
   constructor(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.8.13",
+  "version": "1.8.15",
   "files": [
     "dist"
   ],