@agilemotion/oui-react-js 1.8.1 → 1.8.3

package/dist/components/layout/Layout.js

@@ -89,7 +89,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(Layout, {
             handle: createComponentHandle(component),
             config: component,
-            ref: /*#__PURE__*/_react.default.createRef(),
             tableRow: props.tableRow,
             key: index,
             viewId: props.viewId
@@ -100,7 +99,6 @@ const Layout = props => {
             handle: createComponentHandle(component),
             tableRow: props.tableRow,
             key: index,
-            ref: /*#__PURE__*/_react.default.createRef(),
             viewId: props.viewId
           });
         case 'tab':
@@ -109,14 +107,12 @@ const Layout = props => {
             handle: createComponentHandle(component),
             tableRow: props.tableRow,
             key: index,
-            ref: /*#__PURE__*/_react.default.createRef(),
             viewId: props.viewId
           });
         case 'dataGrid':
           return /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -124,7 +120,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_Form.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId,
             className: 'defaultForm'
@@ -134,21 +129,18 @@ const Layout = props => {
             config: component,
             handle: createComponentHandle(component),
             viewId: props.viewId,
-            key: index,
-            ref: /*#__PURE__*/_react.default.createRef()
+            key: index
           });
         case 'portlet':
           return /*#__PURE__*/_react.default.createElement(_Portlet.default, {
             config: component,
             handle: createComponentHandle(component),
-            viewId: props.viewId,
-            ref: /*#__PURE__*/_react.default.createRef()
+            viewId: props.viewId
           });
         case 'tree':
           return /*#__PURE__*/_react.default.createElement(_Tree.Tree, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -156,7 +148,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_TitleBar.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -164,7 +155,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_StepperTitleBar.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -172,7 +162,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_AlertBar.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -180,7 +169,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_SignatureTemplateDesigner.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -188,7 +176,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_DocumentViewer.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -196,7 +183,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_VCRoom.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -204,7 +190,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_Video.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -212,7 +197,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -220,7 +204,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_SignaturePanel.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -228,7 +211,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -243,7 +225,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_TemplateDesigner.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -251,7 +232,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_DocumentTemplateDesigner.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -259,7 +239,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_ChatRoomWrapper.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -350,7 +329,7 @@ const Layout = props => {
         component.attributes.style = {};
       }
       if (component.type !== 'layout') {
-        component.attributes.style.width = '100%;';
+        component.attributes.style.width = '100%';
       }
       return component.type === 'layout' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderComponent(component, index)) : /*#__PURE__*/_react.default.createElement("div", {
         key: index,

package/dist/components/layout/View.js

@@ -18,7 +18,7 @@ require("./VC.css");
 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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const View = exports.View = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const View = props => {
   const [layoutHandle] = _react.default.useState({});
   const [model] = _react.default.useState({});
   const loadingRef = _react.default.useRef(true);
@@ -161,12 +161,10 @@ const View = exports.View = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: 'view',
-    ref: ref,
     style: _Utils.default.mergeStyles({
       minWidth: '128px',
       height: '100%'
     }, props.config)
   }, render(props.config.layout));
-}), () => {
-  return true;
-});
+};
+exports.View = View;

package/dist/components/layout/ViewContainer.js

@@ -4,31 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 require("./ViewContainer.css");
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
-var _Dashboard = _interopRequireDefault(require("../../view/Dashboard"));
 var _Utils = _interopRequireDefault(require("../../Utils"));
 var _View = require("./View");
 var _reactRouterDom = require("react-router-dom");
 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; }
 const ViewContainer = props => {
   const params = (0, _reactRouterDom.useParams)();
-  const attributes = (0, _react.useRef)({
-    windowView: null,
-    anchorView: null
-  });
-  const windowOpen = (0, _react.useRef)(null);
   _react.default.useEffect(() => {}, []);
   const renderView = () => {
     let viewId = params.id;
     let view = _ApplicationManager.default.getView(viewId);
     let element = viewId === 'dashboard' ? props.dashboard : !_Utils.default.isNull(view) && !_Utils.default.isNull(view.config) ? /*#__PURE__*/_react.default.createElement(_View.View, {
+      key: view.config.id,
       config: view.config,
       parameters: view.parameters,
-      ref: /*#__PURE__*/_react.default.createRef(),
       handle: view.handle
     }) : null;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, element);

package/dist/components/layout/Window.js

@@ -6,40 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 require("./Window.css");
-var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
 var _reactDraggable = _interopRequireDefault(require("react-draggable"));
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _Icon = _interopRequireDefault(require("../Icon"));
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
+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 StyledDialog = (0, _withStyles.default)({
-  root: {
-    pointerEvents: 'none'
-  },
-  paper: {
-    pointerEvents: 'auto',
-    width: 'calc(100% - 344px)',
-    maxWidth: '100%',
-    height: 'calc(100% - 88px)',
-    position: 'absolute',
-    margin: '8px',
-    bottom: 0,
-    right: 0,
-    overflow: 'hidden',
-    borderRadius: 4,
-    ['@media (max-width:991px)']: {
-      maxWidth: '100%'
-    }
-  }
-})(props => /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({
-  hideBackdrop: true
-}, props)));
 const PaperComponent = props => {
   const [bounds, setBounds] = (0, _react.useState)({
     left: 0,
@@ -133,7 +109,7 @@ const Window = props => {
     return {
       transform: 'translate(0, 0)',
       backgroundColor: '#FFFFFF',
-      width: 'calc(100% - 344px)',
+      width: 'calc(100% - ' + props.leftOffset + ' )',
       height: 'calc(100% - 88px)',
       margin: '8px'
     };
@@ -230,7 +206,8 @@ const Window = props => {
       display: 'none',
       color: '#000000'
     }
-  }, /*#__PURE__*/_react.default.createElement(StyledDialog, {
+  }, /*#__PURE__*/_react.default.createElement(_WindowDialog.default, {
+    leftOffset: props.leftOffset,
     disableEnforceFocus: true,
     open: open,
     onClose: e => {

package/dist/components/layout/WindowDialog.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(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 _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"
+  },
+  paper: props => ({
+    pointerEvents: "auto",
+    width: `calc(100% - ${props.leftOffset || "0px"})`,
+    maxWidth: "100%",
+    height: "calc(100% - 88px)",
+    position: "absolute",
+    margin: "8px",
+    bottom: 0,
+    right: 0,
+    overflow: "hidden",
+    borderRadius: 4,
+    "@media (max-width:991px)": {
+      maxWidth: "100%"
+    }
+  })
+}))(_ref => {
+  let {
+    classes,
+    leftOffset,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
+    classes: {
+      paper: classes.paper
+    }
+  }));
+});
+const StyledDialog = withStyledDialog(_Dialog.default);
+const WindowDialog = props => {
+  return /*#__PURE__*/_react.default.createElement(StyledDialog, props);
+};
+var _default = exports.default = WindowDialog;

package/dist/components/layout/WindowViewPort.js

@@ -11,7 +11,7 @@ var _View = require("./View");
 var _Observable = _interopRequireDefault(require("../../event/Observable"));
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 var _Icon = _interopRequireDefault(require("../Icon"));
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 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; }
@@ -47,11 +47,19 @@ const WindowViewContainer = props => {
     });
   }, [pinned]);
   const renderView = () => {
+    let windowLeftOffset;
+    if (view) {
+      let windowLeftOffsetParam = view.parameters?.find(p => p.name === 'windowLeftOffset');
+      if (windowLeftOffsetParam) {
+        windowLeftOffset = windowLeftOffsetParam.value;
+      }
+    }
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, view && /*#__PURE__*/_react.default.createElement(_Window.default, {
       pinnable: true,
       minimizable: false,
       open: true,
       displayState: 'MAXIMIZED',
+      leftOffset: windowLeftOffset || '344px',
       onPinned: () => {
         if (!pinned) {
           setPinned(true);

package/dist/components/media/ClosablePanel.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 require("./ClosablePanel.css");
 var _reactRouterDom = require("react-router-dom");
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ClosablePanel = props => {

package/dist/components/media/LobbyWaitingList.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _RegularButton = _interopRequireDefault(require("../RegularButton"));
 var _Icon = _interopRequireDefault(require("../Icon"));
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable react-hooks/exhaustive-deps */
 

package/dist/components/media/Timer.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 require("./Timer.css");
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
-var _RadioGroup = _interopRequireDefault(require("@material-ui/core/RadioGroup"));
-var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _RadioGroup = _interopRequireDefault(require("@mui/material/RadioGroup"));
+var _Radio = _interopRequireDefault(require("@mui/material/Radio"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
 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; }

package/dist/components/media/Toolbar.js

@@ -7,13 +7,13 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 require("./Toolbar.css");
 var _Icon = _interopRequireDefault(require("../Icon"));
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
-var _core = require("@material-ui/core");
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _material = require("@mui/material");
 var _LottieIcon = _interopRequireDefault(require("../LottieIcon"));
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _Timer = _interopRequireDefault(require("./Timer"));
 var _ToolbarButton = _interopRequireDefault(require("./ToolbarButton"));
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 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; }
@@ -499,7 +499,7 @@ const Toolbar = props => {
       marginRight: '8px',
       fontSize: '12px'
     }
-  }, "Leave"))))))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
+  }, "Leave"))))))), /*#__PURE__*/_react.default.createElement(_material.Menu, {
     anchorEl: leaveButtonAnchorEl,
     id: "toobar-menu",
     open: leaveButtonOpen,
@@ -543,15 +543,15 @@ const Toolbar = props => {
       horizontal: 'right',
       vertical: 'top'
     }
-  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: () => {
       endCall();
     }
-  }, "Leave"), /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, "Leave"), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: () => {
       endSession();
     }
-  }, "End session")), /*#__PURE__*/_react.default.createElement(_core.Menu, {
+  }, "End session")), /*#__PURE__*/_react.default.createElement(_material.Menu, {
     anchorEl: anchorEl,
     id: "toobar-menu",
     open: openMoreActions,
@@ -597,35 +597,35 @@ const Toolbar = props => {
     }
   }, !buttonVisibility.record && isHost && roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper no-margin no-padding'
-  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: () => {
       toggleRecorder();
     }
-  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: "RECORD"
   })), "Record")), !buttonVisibility.video && (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !videoDisabled && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper no-margin no-padding'
-  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: () => {
       muteVideo();
     }
-  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, videoMuted ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, videoMuted ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'CAMERA_OFF'
   }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'CAMERA'
   })), "Camera")), !buttonVisibility.audio && (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !videoDisabled && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper no-margin no-padding'
-  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: () => {
       muteAudio();
     }
-  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, audioMuted ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, audioMuted ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'MIC_OFF'
   }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'MIC'
   })), "Mic")), !buttonVisibility.shareScreen && roomStatus === 'SESSION' && !whiteBoardShown && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper no-margin no-padding'
-  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: () => {
       if (screenShared) {
         stopShareScreen();
@@ -633,7 +633,7 @@ const Toolbar = props => {
         shareScreen();
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, screenShared ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, screenShared ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'CANCEL_PRESENTATION'
   })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'PRESENT_TO_ALL'
@@ -647,23 +647,23 @@ const Toolbar = props => {
     }
   }, "Share screen")))), !buttonVisibility.people && roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper no-margin no-padding'
-  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: () => {
       showPeople();
     }
-  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'PEOPLE'
   })), /*#__PURE__*/_react.default.createElement("div", null, participants.length, "\xA0People"))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper no-margin no-padding'
-  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: () => {
       showChat();
     }
-  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'CHAT_BUBBLE'
   })), /*#__PURE__*/_react.default.createElement("div", null, hasUnreadChats ? '1' : '', "\xA0Chat"))), !buttonVisibility.raiseHand && roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper no-margin no-padding'
-  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: () => {
       if (handRaised) {
         lowerHand();
@@ -671,7 +671,7 @@ const Toolbar = props => {
         raiseHand();
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'PAN_TOOL'
   })), handRaised ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Lower") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Raise")))));
 };

package/dist/components/media/ToolbarButton.js

@@ -20,7 +20,6 @@ const ToolbarButton = props => {
     children
   } = props;
   (0, _react.useEffect)(() => {
-    console.log("VISIBILITY FOR : " + props.id + " : " + isVisible);
     if (visible === null) {
       setVisible(true);
     } else {

package/dist/components/media/Toolbar_bck.js

@@ -7,13 +7,13 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 require("./Toolbar.css");
 var _Icon = _interopRequireDefault(require("../Icon"));
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
-var _core = require("@material-ui/core");
-var _icons = require("@material-ui/icons");
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
 var _Utils = _interopRequireDefault(require("../../Utils"));
 var _Observable = _interopRequireDefault(require("../../event/Observable"));
 var _LottieIcon = _interopRequireDefault(require("../LottieIcon"));
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _Timer = _interopRequireDefault(require("./Timer"));
 var _VCEventType = require("./VCEventType");
 var _VCEventManager = _interopRequireDefault(require("./VCEventManager"));
@@ -371,7 +371,7 @@ const Toolbar = props => {
     }
   }, "Hang up"), /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'CALL_END'
-  }))))))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
+  }))))))), /*#__PURE__*/_react.default.createElement(_material.Menu, {
     anchorEl: anchorEl,
     id: "account-menu",
     open: openMoreActions,
@@ -414,10 +414,10 @@ const Toolbar = props => {
       horizontal: 'right',
       vertical: 'top'
     }
-  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     disabled: !isHost,
     onClick: toggleAutoPermit
-  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_icons.PersonAdd, {
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_iconsMaterial.PersonAdd, {
     fontSize: "small"
   })), autoPermit ? 'Disable auto permit [Auto permit is currently on]' : 'Enable auto permit [Auto permit is currently off]')));
 };

package/dist/components/media/TrainingRoom.js

@@ -34,7 +34,7 @@ const Status = {
   STREAM_ERROR: 'STREAM_ERROR'
 };
 const location = window.location.protocol + '//' + window.location.hostname;
-const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const TrainingRoom = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const recordRef = (0, _react.useRef)();
   const [hasUnreadChats, setHasUnreadChats] = (0, _react.useState)(null);
   const [participants, setParticipants] = (0, _react.useState)([]);