@agilemotion/oui-react-js 1.5.7 → 1.5.9

package/dist/components/DocumentTemplateDesignerComponent.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ej2ReactRichtexteditor = require("@syncfusion/ej2-react-richtexteditor");
+
+var React = _interopRequireWildcard(require("react"));
+
+require("./DocumentTemplateDesignerComponent.css");
+
+var _DocumentTemplatePlaceholderDialog = _interopRequireDefault(require("./DocumentTemplatePlaceholderDialog"));
+
+var _mammoth = _interopRequireDefault(require("mammoth"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const DocumentTemplateDesignerComponent = props => {
+  const {
+    contractTemplate,
+    uploadTrigger
+  } = props;
+  const [open, setOpen] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [documentLoaded, setDocumentLoaded] = React.useState(false);
+  const fileInputRef = (0, React.useRef)(null);
+  const btnRef = (0, React.useRef)(null);
+  let rteObj;
+  let items = ['Bold', 'Italic', 'Underline', '|', 'Formats', '|', 'CreateLink', '|', {
+    template: '' + '<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar"  style="width:100%"><div class="e-tbar-btn-text" style="font-weight: normal; font-size: inherit;"> Placeholders</div></button>',
+    undo: true,
+    click: onClick.bind(void 0),
+    tooltipText: 'Insert Placeholders'
+  }, '|', 'Undo', 'Redo'];
+  let toolbarSettings = {
+    items: items
+  };
+
+  function onInsert(holder) {
+    rteObj.executeCommand('insertText', holder);
+  }
+
+  function onClick() {
+    setOpen(true);
+  }
+
+  const handleFileChange = async event => {
+    const file = event.target.files[0];
+    setError(null);
+
+    if (file) {
+      if (file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
+        const reader = new FileReader();
+
+        reader.onload = async e => {
+          const arrayBuffer = e.target.result;
+
+          try {
+            const {
+              value
+            } = await _mammoth.default.convertToHtml({
+              arrayBuffer
+            });
+            rteObj.executeCommand('insertHTML', value);
+          } catch (error) {
+            setError('Error processing the file. Please ensure it is a valid .docx file.');
+          }
+        };
+
+        reader.readAsArrayBuffer(file);
+      } else {
+        setError('Unsupported file type. Please upload a .docx file.');
+      }
+    }
+  };
+
+  (0, React.useEffect)(() => {
+    if (uploadTrigger != null && btnRef.current) {
+      btnRef.current.click();
+    }
+  }, [uploadTrigger]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button.default, {
+    style: {
+      display: 'none'
+    },
+    ref: btnRef,
+    variant: "contained",
+    component: "label"
+  }, "Load Contract", /*#__PURE__*/React.createElement("input", {
+    type: "file",
+    style: {
+      display: 'none'
+    },
+    onChange: handleFileChange,
+    accept: ".docx"
+  })), /*#__PURE__*/React.createElement(_ej2ReactRichtexteditor.RichTextEditorComponent, {
+    id: "defaultRTE",
+    ref: scope => {
+      rteObj = scope;
+    },
+    toolbarSettings: toolbarSettings
+  }, /*#__PURE__*/React.createElement(_ej2ReactRichtexteditor.Inject, {
+    services: [_ej2ReactRichtexteditor.HtmlEditor, _ej2ReactRichtexteditor.Toolbar, _ej2ReactRichtexteditor.Link, _ej2ReactRichtexteditor.Image, _ej2ReactRichtexteditor.QuickToolbar]
+  })), /*#__PURE__*/React.createElement(_DocumentTemplatePlaceholderDialog.default, {
+    open: open,
+    onClose: () => setOpen(false),
+    onInsertHandler: onInsert
+  }));
+};
+
+var _default = DocumentTemplateDesignerComponent;
+exports.default = _default;

package/dist/components/DocumentTemplatePlaceholderDialog.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _icons = require("@material-ui/icons");
+
+require("./DocumentTemplateDesignerComponent.css");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const DocumentTemplatePlaceholderDialog = ({
+  open,
+  onClose,
+  onInsertHandler
+}) => {
+  const [selectedIndex, setSelectedIndex] = (0, _react.useState)(null);
+  const placeholders = [{
+    title: 'Placeholder 1',
+    description: '{{placeholder_1}}'
+  }, {
+    title: 'Placeholder 2',
+    description: '{{placeholder_2}}'
+  }, {
+    title: 'Placeholder 3',
+    description: '{{placeholder_3}}'
+  }, {
+    title: 'Placeholder 4',
+    description: '{{placeholder_4}}'
+  }];
+  const {
+    palette
+  } = (0, _core.useTheme)();
+
+  const handleListItemClick = index => {
+    setSelectedIndex(index);
+  };
+
+  const handleInsert = () => {
+    if (selectedIndex !== null) {
+      console.log("Selected placeholder: ".concat(placeholders[selectedIndex].title));
+      onInsertHandler(placeholders[selectedIndex].description);
+    }
+
+    onClose();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_core.Dialog, {
+    open: open,
+    onClose: onClose,
+    fullWidth: true,
+    maxWidth: 'md'
+  }, /*#__PURE__*/_react.default.createElement(_core.DialogTitle, null, "Select a Placeholder"), /*#__PURE__*/_react.default.createElement(_core.DialogContent, null, /*#__PURE__*/_react.default.createElement("div", {
+    id: "customTbarDialog"
+  }, /*#__PURE__*/_react.default.createElement(_core.List, null, placeholders.map((placeholder, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: index
+  }, /*#__PURE__*/_react.default.createElement(_core.ListItem, {
+    button: true,
+    selected: selectedIndex === index,
+    onClick: () => handleListItemClick(index) // className="char_block"
+    ,
+    style: {
+      border: selectedIndex === index ? "1px solid ".concat(palette.primary.main) : null,
+      margin: '4px 0',
+      borderRadius: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.ListItemAvatar, null, /*#__PURE__*/_react.default.createElement(_core.Avatar, null, /*#__PURE__*/_react.default.createElement(_icons.AddCircle, null))), /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
+    primary: placeholder.title,
+    secondary: placeholder.description
+  })), index < placeholders.length - 1 && /*#__PURE__*/_react.default.createElement(_core.Divider, null)))))), /*#__PURE__*/_react.default.createElement(_core.DialogActions, null, /*#__PURE__*/_react.default.createElement(_core.Button, {
+    onClick: onClose,
+    color: "primary"
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_core.Button, {
+    onClick: handleInsert,
+    color: "primary",
+    disabled: selectedIndex === null
+  }, "Insert")));
+};
+
+var _default = DocumentTemplatePlaceholderDialog;
+exports.default = _default;

package/dist/components/Icon.js

@@ -45,6 +45,8 @@ var _Notifications = _interopRequireDefault(require("@material-ui/icons/Notifica
 
 var _Person = _interopRequireDefault(require("@material-ui/icons/Person"));
 
+var _Refresh = _interopRequireDefault(require("@material-ui/icons/Refresh"));
+
 var _Folder = _interopRequireDefault(require("@material-ui/icons/Folder"));
 
 var _AttachFile = _interopRequireDefault(require("@material-ui/icons/AttachFile"));
@@ -101,6 +103,12 @@ class Icon extends _react.Component {
           color: this.props.color
         }
       });
+    } else if (this.props.id === 'REFRESH') {
+      return /*#__PURE__*/_react.default.createElement(_Refresh.default, {
+        style: {
+          color: this.props.color
+        }
+      });
     } else if (this.props.id === 'SETTINGS') {
       return /*#__PURE__*/_react.default.createElement(_Settings.default, {
         style: {

package/dist/components/Portlet.css

@@ -0,0 +1,18 @@
+.iframe_container {
+    padding: 0;
+    height: 100%;
+    width: 100%;
+}
+
+.portlet-iframe {
+    overflow: scroll;
+    border: 0;
+    width: 100%;
+    height: 100%;
+    transform: scale(1);
+    -ms-transform-origin: 0 0;
+    -moz-transform-origin: 0 0;
+    -o-transform-origin: 0 0;
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+}

package/dist/components/Portlet.js

@@ -11,13 +11,19 @@ var _Utils = _interopRequireDefault(require("../Utils"));
 
 var _Observable = _interopRequireDefault(require("../event/Observable"));
 
+require("./Portlet.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Portlet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  var _props$config$attribu;
+
   const [url, setUrl] = _react.default.useState(null);
 
   const [visible, setVisible] = _react.default.useState(true);
 
+  const urlTemp = _react.default.useRef(null);
+
   _react.default.useEffect(() => {
     props.handle.api = api();
   });
@@ -36,6 +42,13 @@ const Portlet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
     };
   }, []);
 
+  _react.default.useEffect(() => {
+    if (url === 'reload') {
+      setUrl(urlTemp.current);
+      urlTemp.current = null;
+    }
+  }, [url]);
+
   const api = () => {
     return {
       get id() {
@@ -52,6 +65,11 @@ const Portlet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
 
       refresh() {},
 
+      reload() {
+        urlTemp.current = url;
+        setUrl('reload');
+      },
+
       getChildren: () => {
         return [];
       },
@@ -65,12 +83,11 @@ const Portlet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
 
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
+    className: 'iframe_container',
     style: {
-      display: visible ? 'block' : 'none',
-      width: '100%',
-      height: '100%'
+      display: visible ? 'block' : 'none'
     }
-  }, !url && /*#__PURE__*/_react.default.createElement("div", {
+  }, (!url || url === 'reload') && /*#__PURE__*/_react.default.createElement("div", {
     className: "centered-flex-box w-100 h-100",
     style: {
       fontSize: '20px'
@@ -78,12 +95,9 @@ const Portlet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
   }, "Loading..."), url && /*#__PURE__*/_react.default.createElement("iframe", {
     src: url,
     title: "eProcurement",
-    style: {
-      width: '100%',
-      height: '99%',
-      borderWidth: '0'
-    },
-    allow: "camera;microphone"
+    className: 'portlet-iframe',
+    allow: (_props$config$attribu = props.config.attributes) === null || _props$config$attribu === void 0 ? void 0 : _props$config$attribu.allow,
+    id: props.config.id
   }));
 }));
 

package/dist/components/dashboard/BusinessPortalAppDashboard.js

@@ -19,16 +19,16 @@ var _Workspace = _interopRequireDefault(require("./components/portal/Workspace")
 
 var _Observable = _interopRequireDefault(require("../../event/Observable"));
 
+var _RestUtils = require("../../RestUtils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 let ps;
 
 const BusinessPortalAppDashboard = /*#__PURE__*/_react.default.memo(props => {
-  const [loading, setLoading] = _react.default.useState(true);
-
   const [routes, setRoutes] = _react.default.useState([]);
 
-  const [currentModuleMenu, setCurrentModuleMenu] = _react.default.useState(null);
+  const [currentModule, setCurrentModule] = _react.default.useState(null);
 
   const [logo, setLogo] = _react.default.useState("data:image/png;base64," + props.logo);
 
@@ -57,73 +57,36 @@ const BusinessPortalAppDashboard = /*#__PURE__*/_react.default.memo(props => {
     return newItems;
   };
 
-  const getViews = (menus, level) => {
-    let newViews = [];
-
-    for (let i = 0; i < menus.length; i++) {
-      _Observable.default.clearComponentEventListeners(menus[i].id);
-
-      let createView = {};
-      createView.name = menus[i].attributes.label;
-      createView.mini = "SS";
-      createView.layout = "/admin";
-      createView.level = level;
-      createView.item = menus[i];
-
-      if (menus[i].items && menus[i].items.length > 0) {
-        createView.collapse = true;
-        createView.state = menus[i].id + "Collapse";
-        createView.views = getItems(menus[i].items, level + 1);
-      }
-
-      newViews.push(createView);
-    }
-
-    return newViews;
-  };
-
-  _react.default.useEffect(() => {
-    if (!_Utils.default.isNull(currentModuleMenu) && !_Utils.default.isNull(props.settings.menu) && !_Utils.default.isNull(props.settings.menu.menus)) {
-      let newRoutes = [];
-      let currentMenu = null;
-
-      for (const menu of props.settings.menu.menus) {
-        if (menu.id === currentModuleMenu) {
-          currentMenu = menu;
-          break;
-        }
-      }
-
-      if (currentMenu != null) {
-        for (const item of currentMenu.items) {
-          _Observable.default.clearComponentEventListeners(item.id);
-
-          let newRoute = {};
-          newRoute.name = item.attributes.label;
-
-          if (!_Utils.default.isNull(item.icon)) {
-            newRoute.icon = item.icon;
+  const getMenu = path => {
+    return new Promise(resolve => {
+      let service = {
+        url: '/ui/api/v1/menu/get',
+        parameters: [{
+          name: 'id',
+          value: path,
+          httpParameterType: 'QUERY_PARAMETER'
+        }, {
+          name: 'version',
+          value: 1.0,
+          httpParameterType: 'QUERY_PARAMETER'
+        }],
+        contentType: 'application/json'
+      };
+      (0, _RestUtils.invokeRest)(service, {
+        api: {
+          get id() {
+            return 'portal-dashboard';
           }
 
-          newRoute.layout = "/admin";
-          newRoute.level = 0;
-          newRoute.isParent = false;
-          newRoute.item = item;
-          newRoutes.push(newRoute);
-
-          if (!_Utils.default.isNull(item.items) && item.items.length > 0) {
-            newRoute.collapse = false;
-            newRoute.state = item.name + "Collapse";
-            newRoute.views = getViews(item.items, 0);
-          }
         }
-      }
-
-      setRoutes(newRoutes);
-    }
-
-    setLoading(false);
-  }, [currentModuleMenu]);
+      }, 'portal-dashboard', result => {
+        resolve(result.menus);
+      }, e => {
+        console.error(e);
+        resolve(null);
+      }, null);
+    });
+  };
 
   _react.default.useEffect(() => {
     document.body.classList.add("white-content");
@@ -136,7 +99,7 @@ const BusinessPortalAppDashboard = /*#__PURE__*/_react.default.memo(props => {
     window.removeEventListener("scroll", showNavbarButton); //dispatch(actionCreators.setSecondaryThemeColor(props.settings.systemProfileDto.secondCorporateBrandColor));
 
     if (!_Utils.default.isNull(props.settings)) {
-      setCurrentModuleMenu("homeMenu");
+      setCurrentModule("home");
     }
   }, [props.settings]);
 
@@ -148,7 +111,7 @@ const BusinessPortalAppDashboard = /*#__PURE__*/_react.default.memo(props => {
     }
   };
 
-  return loading ? /*#__PURE__*/_react.default.createElement("div", null, "Loading...") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "wrapper",
     style: {
       height: '100%',
@@ -160,9 +123,10 @@ const BusinessPortalAppDashboard = /*#__PURE__*/_react.default.memo(props => {
     logoutCallBack: props.logoutCallBack,
     appLogoPath: props.appLogoPath,
     avatar: props.avatar,
-    moduleMenus: props.settings.menu.menus,
+    currentModule: currentModule,
+    moduleMenus: props.settings.modules,
     moduleChangeHandler: selected => {
-      setCurrentModuleMenu(selected);
+      setCurrentModule(selected);
     },
     logo: {
       outterLink: "",

package/dist/components/form/FieldSet.js

@@ -63,6 +63,8 @@ var _Switch = _interopRequireDefault(require("./Switch"));
 
 var _IconField = _interopRequireDefault(require("./IconField"));
 
+var _DocumentTemplateDesigner = _interopRequireDefault(require("../DocumentTemplateDesigner"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
@@ -356,6 +358,16 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       valueChangeHandler: () => fireChangeEvent(),
       values: props.values,
       viewId: props.viewId
+    }) : component.fieldType === 'DOCUMENT_TEMPLATE_DESIGNER' ? /*#__PURE__*/_react.default.createElement(_DocumentTemplateDesigner.default, {
+      keyHandler: props.keyHandler,
+      config: component,
+      form: props.form,
+      parentId: props.parentId,
+      handle: createComponentHandle(component),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      valueChangeHandler: () => fireChangeEvent(),
+      values: props.values,
+      viewId: props.viewId
     }) : /*#__PURE__*/_react.default.createElement("div", null, 'Unsupported fieldset component type ' + component.fieldType + ' - ' + component.id);
   }
 

package/dist/components/layout/Layout.js

@@ -49,6 +49,8 @@ var _Portlet = _interopRequireDefault(require("../Portlet"));
 
 var _TabPanel = _interopRequireDefault(require("../TabPanel"));
 
+var _DocumentTemplateDesigner = _interopRequireDefault(require("../DocumentTemplateDesigner"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -252,6 +254,12 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         ref: /*#__PURE__*/_react.default.createRef(),
         key: index,
         viewId: props.viewId
+      }) : component.type === 'documentTemplateDesigner' ? /*#__PURE__*/_react.default.createElement(_DocumentTemplateDesigner.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        key: index,
+        viewId: props.viewId
       }) : /*#__PURE__*/_react.default.createElement("div", null, 'Unsupported component type ' + component.type);
     }
   }

package/dist/components/layout/ViewContainer.js

@@ -40,15 +40,12 @@ const ViewContainer = props => {
 
     let view = _ApplicationManager.default.getView(viewId);
 
-    let element = viewId === 'dashboard' ? /*#__PURE__*/_react.default.createElement(_Dashboard.default, {
-      ref: /*#__PURE__*/_react.default.createRef()
-    }) : !_Utils.default.isNull(view) && !_Utils.default.isNull(view.config) ? /*#__PURE__*/_react.default.createElement(_View.View, {
+    let element = viewId === 'dashboard' ? props.dashboard : !_Utils.default.isNull(view) && !_Utils.default.isNull(view.config) ? /*#__PURE__*/_react.default.createElement(_View.View, {
       config: view.config,
       parameters: view.parameters,
       ref: /*#__PURE__*/_react.default.createRef(),
       handle: view.handle
     }) : null;
-    console.log("\n\n\n\nLOADING : " + viewId, element);
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, element);
   };
 

package/dist/components/media/TrainingRoom.js

@@ -116,7 +116,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
             break;
 
           case _VCEventType.VCEventType.AUDIO_VISUAL_SETTINGS_CHANGED:
-            onAVSettingsChange(be.payload);
+            onAVSettingsChange(be === null || be === void 0 ? void 0 : be.payload);
             break;
 
           case _VCEventType.VCEventType.SYSTEM_EVENT:
@@ -169,14 +169,16 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
   };
 
   const onAVSettingsChange = payload => {
-    let participant = participants.find(p => p.userId === payload.userId);
+    if (payload) {
+      let participant = participants.find(p => p.userId === payload.userId);
 
-    if (participant) {
-      participant.audioMuted = payload.audioMuted;
-      participant.videoMuted = payload.videoMuted;
-    }
+      if (participant) {
+        participant.audioMuted = payload.audioMuted;
+        participant.videoMuted = payload.videoMuted;
+      }
 
-    _VCEventManager.default.fireEvent(_VCEventType.VCEventType.AUDIO_VISUAL_SETTINGS_CHANGED, payload);
+      _VCEventManager.default.fireEvent(_VCEventType.VCEventType.AUDIO_VISUAL_SETTINGS_CHANGED, payload);
+    }
   };
 
   function emitAVSettingsChange() {
@@ -305,7 +307,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
       setDisplayState(initialContext ? initialContext.windowDisplayState : 'MAXIMIZED');
     });
 
-    _VCEventManager.default.addSubscriptions(eventHandler, _VCEventType.VCEventType.REQUEST_TO_JOIN_MEETING, _VCEventType.VCEventType.USER_JOINED, _VCEventType.VCEventType.USER_LEFT_MEETING, _VCEventType.VCEventType.SYSTEM_EVENT, _VCEventType.VCEventType.SOCKET_CONNECT, _VCEventType.VCEventType.SOCKET_DISCONNECT, _VCEventType.VCEventType.RAISE_HAND, _VCEventType.VCEventType.LOWER_HAND, _VCEventType.VCEventType.PEER_DISCONNECT, _VCEventType.VCEventType.CONSUMER_TRANSPORT_FAILED, _VCEventType.VCEventType.CREATE_TRANSPORT_FAILED, _VCEventType.VCEventType.SHARING_STOPPED, _VCEventType.VCEventType.END_SESSION);
+    _VCEventManager.default.addSubscriptions(eventHandler, _VCEventType.VCEventType.REQUEST_TO_JOIN_MEETING, _VCEventType.VCEventType.USER_JOINED, _VCEventType.VCEventType.USER_LEFT_MEETING, _VCEventType.VCEventType.SYSTEM_EVENT, _VCEventType.VCEventType.SOCKET_CONNECT, _VCEventType.VCEventType.SOCKET_DISCONNECT, _VCEventType.VCEventType.RAISE_HAND, _VCEventType.VCEventType.LOWER_HAND, _VCEventType.VCEventType.PEER_DISCONNECT, _VCEventType.VCEventType.CONSUMER_TRANSPORT_FAILED, _VCEventType.VCEventType.CREATE_TRANSPORT_FAILED, _VCEventType.VCEventType.SHARING_STOPPED, _VCEventType.VCEventType.END_SESSION, _VCEventType.VCEventType.AUDIO_VISUAL_SETTINGS_CHANGED);
 
     document.addEventListener('sideBarToggleEvent', handleSidebarToggle);
 

package/dist/components/media/VCRoomWorkspace.js

@@ -420,7 +420,7 @@ const VCRoomWorkspace = props => {
 
       setupGrid(inViewParticipants);
     }
-  }, [props.participants, props.currentUserFullName]);
+  }, [props.participants, props.currentUserFullName, props.displayState]);
 
   const setupGrid = () => {
     let inViewGrid = [];

package/dist/components/navbars/PortalNavbar.js

@@ -43,12 +43,18 @@ const PortalNavbar = /*#__PURE__*/_react.default.memo(props => {
 
   const [avatarUrl, setAvatarUrl] = _react.default.useState(props.avatar);
 
-  const [selectedButton, setSelectedButton] = _react.default.useState(props.moduleMenus ? props.moduleMenus[0].id : null);
+  const [selectedButton, setSelectedButton] = _react.default.useState(null);
 
   const initializing = _react.default.useRef(true);
 
   let keyCounter = 0;
 
+  _react.default.useEffect(() => {
+    var _props$currentModule;
+
+    setSelectedButton((_props$currentModule = props.currentModule) === null || _props$currentModule === void 0 ? void 0 : _props$currentModule.name);
+  }, [props.currentModule]);
+
   _react.default.useEffect(() => {
     if (initializing.current) {
       let avatarListener = {};
@@ -62,7 +68,7 @@ const PortalNavbar = /*#__PURE__*/_react.default.memo(props => {
 
       initializing.current = false;
     }
-  });
+  }, []);
 
   const launchView = path => {
     let actionConfig = {};
@@ -98,7 +104,7 @@ const PortalNavbar = /*#__PURE__*/_react.default.memo(props => {
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "row"
-  }, props.moduleMenus ? props.moduleMenus.map(menu => {
+  }, props.modules ? props.modules.map(module => {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "col-*-*",
       style: {
@@ -110,7 +116,7 @@ const PortalNavbar = /*#__PURE__*/_react.default.memo(props => {
       style: {
         width: 80,
         height: 48,
-        borderBottom: selectedButton === menu.id ? '2px solid ' + _colors.grey800 : 'none',
+        borderBottom: selectedButton === module.name ? '2px solid ' + _colors.grey800 : 'none',
         borderRadius: 0
       },
       "aria-haspopup": "true",
@@ -118,16 +124,16 @@ const PortalNavbar = /*#__PURE__*/_react.default.memo(props => {
         label: classes.iconButtonLabel
       },
       onClick: () => {
-        setSelectedButton(menu.id);
-        props.moduleChangeHandler(menu.id);
+        setSelectedButton(module.name);
+        props.moduleChangeHandler(module.name);
       }
     }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      id: menu.icon
+      id: module.icon
     }), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         fontSize: '14px'
       }
-    }, _Utils.default.getComponentAttribute(menu, 'label', ''))));
+    }, _Utils.default.getComponentAttribute(module, 'label', ''))));
   }) : null)), /*#__PURE__*/_react.default.createElement("div", {
     className: "col-*-*",
     style: {