@agilemotion/oui-react-js 1.8.78 → 2.0.1

package/dist/components/Tree.js

@@ -5,11 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Tree = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _SvgIcon = _interopRequireDefault(require("@mui/material/SvgIcon"));
-var _styles = require("@mui/styles");
+var _styles = require("@mui/material/styles");
 var _SimpleTreeView = require("@mui/x-tree-view/SimpleTreeView");
 var _TreeItem = require("@mui/x-tree-view/TreeItem");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _FolderRounded = _interopRequireDefault(require("@mui/icons-material/FolderRounded"));
+var _FolderOpenRounded = _interopRequireDefault(require("@mui/icons-material/FolderOpenRounded"));
+var _InsertDriveFileOutlined = _interopRequireDefault(require("@mui/icons-material/InsertDriveFileOutlined"));
+var _CorporateFareRounded = _interopRequireDefault(require("@mui/icons-material/CorporateFareRounded"));
+var _GroupsRounded = _interopRequireDefault(require("@mui/icons-material/GroupsRounded"));
+var _BadgeOutlined = _interopRequireDefault(require("@mui/icons-material/BadgeOutlined"));
+var _AccountTreeRounded = _interopRequireDefault(require("@mui/icons-material/AccountTreeRounded"));
+var _CircleOutlined = _interopRequireDefault(require("@mui/icons-material/CircleOutlined"));
+var _HubOutlined = _interopRequireDefault(require("@mui/icons-material/HubOutlined"));
 var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
 var _web = require("react-spring/web.cjs");
 var _Utils = _interopRequireDefault(require("../Utils"));
@@ -19,91 +28,173 @@ var _Observable = _interopRequireDefault(require("../event/Observable"));
 var _EventType = _interopRequireDefault(require("../event/EventType"));
 var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
 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); }
-// web.cjs is required for IE 11 support
+// ── Animated collapse transition ──
 
-function MinusSquare(props) {
-  return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, _extends({
-    fontSize: "inherit",
-    style: {
-      width: 14,
-      height: 14
-    }
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0zM17.873 11.023h-11.826q-.375 0-.669.281t-.294.682v0q0 .401.294 .682t.669.281h11.826q.375 0 .669-.281t.294-.682v0q0-.401-.294-.682t-.669-.281z"
-  }));
-}
-function PlusSquare(props) {
-  return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, _extends({
-    fontSize: "inherit",
-    style: {
-      width: 14,
-      height: 14
-    }
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0zM17.873 12.977h-4.923v4.896q0 .401-.281.682t-.682.281v0q-.375 0-.669-.281t-.294-.682v-4.896h-4.923q-.401 0-.682-.294t-.281-.669v0q0-.401.281-.682t.682-.281h4.923v-4.896q0-.401.294-.682t.669-.281v0q.401 0 .682.281t.281.682v4.896h4.923q.401 0 .682.281t.281.682v0q0 .375-.281.669t-.682.294z"
-  }));
-}
-function CloseSquare(props) {
-  return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, _extends({
-    className: "close",
-    fontSize: "inherit",
-    style: {
-      width: 14,
-      height: 14
-    }
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M17.485 17.512q-.281.281-.682.281t-.696-.268l-4.12-4.147-4.12 4.147q-.294.268-.696.268t-.682-.281-.281-.682.294-.669l4.12-4.147-4.12-4.147q-.294-.268-.294-.669t.281-.682.682-.281.696 .268l4.12 4.147 4.12-4.147q.294-.268.696-.268t.682.281 .281.669-.294.682l-4.12 4.147 4.12 4.147q.294.268 .294.669t-.281.682zM22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0z"
-  }));
-}
 function TransitionComponent(props) {
   const style = (0, _web.useSpring)({
     from: {
       opacity: 0,
-      transform: 'translate3d(20px,0,0)'
+      transform: 'translate3d(0,-8px,0)'
     },
     to: {
       opacity: props.in ? 1 : 0,
-      transform: "translate3d(".concat(props.in ? 0 : 20, "px,0,0)")
+      transform: "translate3d(0,".concat(props.in ? 0 : -8, "px,0)")
+    },
+    config: {
+      tension: 340,
+      friction: 28
     }
   });
   return /*#__PURE__*/_react.default.createElement(_web.animated.div, {
     style: style
   }, /*#__PURE__*/_react.default.createElement(_Collapse.default, props));
 }
-TransitionComponent.propTypes = {
-  /**
-   * Show the component; triggers the enter or exit states
-   */
-  in: _propTypes.default.bool
-};
-const StyledTreeItem = (0, _styles.withStyles)(theme => ({
-  iconContainer: {
-    '& .close': {
-      opacity: 0.3
+
+// ── Styled tree item ──
+
+const StyledTreeItem = (0, _styles.styled)(_TreeItem.TreeItem)(_ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    ["& .".concat(_TreeItem.treeItemClasses.content)]: {
+      borderRadius: theme.shape.borderRadius,
+      padding: '4px 8px',
+      margin: '2px 0',
+      transition: 'all 0.15s ease',
+      '&:hover': {
+        backgroundColor: (0, _styles.alpha)(theme.palette.primary.main, 0.06)
+      },
+      '&.Mui-selected': {
+        backgroundColor: (0, _styles.alpha)(theme.palette.primary.main, 0.12),
+        '&:hover': {
+          backgroundColor: (0, _styles.alpha)(theme.palette.primary.main, 0.16)
+        }
+      },
+      '&.Mui-focused': {
+        backgroundColor: 'transparent'
+      }
+    },
+    ["& .".concat(_TreeItem.treeItemClasses.iconContainer)]: {
+      color: theme.palette.primary.main,
+      marginRight: 4
+    },
+    ["& .".concat(_TreeItem.treeItemClasses.label)]: {
+      fontSize: '0.875rem',
+      fontWeight: 500,
+      color: theme.palette.text.primary
+    },
+    ["& .".concat(_TreeItem.treeItemClasses.groupTransition)]: {
+      marginLeft: 16,
+      paddingLeft: 12,
+      borderLeft: "1.5px solid ".concat((0, _styles.alpha)(theme.palette.divider, 0.4))
     }
+  };
+});
+
+// ── Icon themes ──
+
+const ICON_THEMES = {
+  documents: {
+    branchOpen: _FolderOpenRounded.default,
+    branchClosed: _FolderRounded.default,
+    leaf: _FolderOpenRounded.default,
+    empty: _FolderOpenRounded.default
   },
-  group: {
-    marginLeft: 7,
-    paddingLeft: 18,
-    borderLeft: "1px dashed #e1e1e1"
-  }
-}))(props => /*#__PURE__*/_react.default.createElement(_TreeItem.TreeItem, _extends({}, props, {
-  TransitionComponent: TransitionComponent
-})));
-const useStyles = (0, _styles.makeStyles)({
-  root: {
-    height: 264,
-    flexGrow: 1,
-    maxWidth: 400
+  organisation: {
+    branchOpen: _CorporateFareRounded.default,
+    branchClosed: _CorporateFareRounded.default,
+    leaf: _GroupsRounded.default,
+    empty: _CorporateFareRounded.default
+  },
+  hierarchy: {
+    branchOpen: _AccountTreeRounded.default,
+    branchClosed: _AccountTreeRounded.default,
+    leaf: _CircleOutlined.default,
+    empty: _HubOutlined.default
+  },
+  people: {
+    branchOpen: _GroupsRounded.default,
+    branchClosed: _GroupsRounded.default,
+    leaf: _BadgeOutlined.default,
+    empty: _GroupsRounded.default
   }
-});
+};
+function resolveIconTheme(themeName) {
+  return ICON_THEMES[themeName] || ICON_THEMES.documents;
+}
+
+// ── Custom node label with icon ──
+
+function NodeLabel(_ref2) {
+  let {
+    name,
+    hasChildren,
+    isExpanded,
+    iconTheme
+  } = _ref2;
+  const theme = resolveIconTheme(iconTheme);
+  const Icon = hasChildren ? isExpanded ? theme.branchOpen : theme.branchClosed : theme.leaf;
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 1,
+      py: 0.25
+    }
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
+    sx: {
+      fontSize: 18,
+      opacity: 0.7
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "body2",
+    sx: {
+      fontWeight: 'inherit'
+    }
+  }, name));
+}
+
+// ── Empty state ──
+
+function EmptyState(_ref3) {
+  let {
+    iconTheme
+  } = _ref3;
+  const theme = resolveIconTheme(iconTheme);
+  const Icon = theme.empty;
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      py: 6,
+      color: 'text.secondary'
+    }
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
+    sx: {
+      fontSize: 48,
+      opacity: 0.3,
+      mb: 1
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "body2",
+    color: "text.secondary"
+  }, "No items found"));
+}
+
+// ── Main Tree component ──
+
 const Tree = props => {
-  const classes = useStyles();
+  var _props$config;
+  const iconTheme = ((_props$config = props.config) === null || _props$config === void 0 ? void 0 : _props$config.iconTheme) || 'documents';
   const [root, setRoot] = _react.default.useState(null);
   const [selectedRows] = _react.default.useState([]);
   const [expanded, setExpanded] = _react.default.useState([]);
+  const [loading, setLoading] = _react.default.useState(true);
   const [initializing, setInitializing] = _react.default.useState(true);
+  const ref = _react.default.useRef(null);
   _react.default.useEffect(() => {
     props.handle.api = api();
   });
@@ -119,41 +210,39 @@ const Tree = props => {
   function loadData(eventConfig, componentConfig) {
     let service = !_Utils.default.isNull(componentConfig.dataService) ? componentConfig.dataService : eventConfig !== null ? eventConfig.dataService : null;
     if (!_Utils.default.isNull(service)) {
-      if (service.type === 'rpc') {
-        (0, _RestService.invokeRpc)({
-          service: service,
-          component: props.handle,
-          viewId: props.viewId
-        }).then(result => {
-          try {
-            if (result) {
-              expand(result);
-              setRoot(result);
-            }
-          } catch (e) {
-            props.console.error(e);
-            _Utils.default.publishErrorMessage(e, props.viewId);
-          }
-        }).catch(e => {});
-      } else {
-        (0, _RestService.invokeRest)({
-          service: service,
-          component: props.handle,
-          viewId: props.viewId
-        }).then(result => {
-          try {
-            if (result) {
-              expand(result);
-              setRoot(result);
+      setLoading(true);
+      const invoker = service.type === 'rpc' ? _RestService.invokeRpc : _RestService.invokeRest;
+      invoker({
+        service: service,
+        component: props.handle,
+        viewId: props.viewId
+      }).then(result => {
+        try {
+          if (result) {
+            var _props$config2;
+            const expandMode = ((_props$config2 = props.config) === null || _props$config2 === void 0 ? void 0 : _props$config2.expandMode) || 'collapsed';
+            const expandedIds = [];
+            if (expandMode === 'all') {
+              collectIds(result, expandedIds);
+            } else if (expandMode === 'root') {
+              expandedIds.push("".concat(result.id));
             }
-          } catch (e) {
-            props.console.error(e);
-            _Utils.default.publishErrorMessage(e, props.viewId);
+            // 'collapsed' → empty array, everything folded
+            setExpanded(expandedIds);
+            setRoot(result);
           }
-        }).catch(e => {});
-      }
+        } catch (e) {
+          console.error(e);
+          _Utils.default.publishErrorMessage(e, props.viewId);
+        }
+      }).catch(() => {}).finally(() => {
+        setLoading(false);
+      });
     } else if (!_Utils.default.isNull(componentConfig.value)) {
-      let value = _ApplicationManager.default.isExpression(componentConfig.value) ? _ApplicationManager.default.resolveExpressionValue(componentConfig.value) : componentConfig.value;
+      _ApplicationManager.default.isExpression(componentConfig.value) ? _ApplicationManager.default.resolveExpressionValue(componentConfig.value) : componentConfig.value;
+      setLoading(false);
+    } else {
+      setLoading(false);
     }
   }
   _react.default.useEffect(() => {
@@ -170,64 +259,71 @@ const Tree = props => {
         return selectedRows;
       },
       get root() {
-        let rootReference = null;
-        if (!_Utils.default.isNull(root)) {
-          rootReference = {};
-          if (!_Utils.default.isNull(root)) {
-            rootReference.id = root.id;
-            rootReference.label = root.name;
-          } else {
-            rootReference.id = root.id;
-            rootReference.label = root.name;
-          }
-        }
-        return rootReference;
+        if (_Utils.default.isNull(root)) return null;
+        return {
+          id: root.id,
+          label: root.name
+        };
       },
       getChildren: () => {
         return [];
       }
     };
   };
-  const handleSelectionChange = (id, name) => {
-    let node = {};
-    node.id = id;
-    node.label = name;
+  const handleSelectionChange = item => {
     selectedRows.splice(0, selectedRows.length);
-    selectedRows.push(node);
-    let event = new _Event.default(props.handle, props.viewId);
+    selectedRows.push(item);
+    let event = new _Event.default(props.handle, props.viewId, selectedRows);
     _Observable.default.fireEvent(_EventType.default.SELECTION_CHANGE, event);
   };
-  const render = item => {
-    return /*#__PURE__*/_react.default.createElement(StyledTreeItem, {
-      itemId: item.id.toString(),
-      label: item.name,
-      key: item.id,
-      onLabelClick: e => e.preventDefault(),
-      onClick: () => {
-        handleSelectionChange(item.id, item.name);
-      }
-    }, !_Utils.default.isNull(item.children) && item.children.length > 0 ? item.children.map(child => {
-      return render(child);
-    }) : null);
-  };
-  const expand = item => {
-    expanded.push("".concat(item.id));
+  const collectIds = (item, ids) => {
+    ids.push("".concat(item.id));
     if (!_Utils.default.isNull(item.children)) {
       for (const child of item.children) {
-        expand(child);
+        collectIds(child, ids);
       }
     }
   };
+  const renderNode = item => {
+    const hasChildren = !_Utils.default.isNull(item.children) && item.children.length > 0;
+    return /*#__PURE__*/_react.default.createElement(StyledTreeItem, {
+      key: item.id,
+      itemId: item.id.toString(),
+      slots: {
+        groupTransition: TransitionComponent
+      },
+      label: /*#__PURE__*/_react.default.createElement(NodeLabel, {
+        name: item.name,
+        hasChildren: hasChildren,
+        isExpanded: expanded.includes("".concat(item.id)),
+        iconTheme: iconTheme
+      }),
+      onClick: () => handleSelectionChange(item)
+    }, hasChildren ? item.children.map(renderNode) : null);
+  };
+
+  // ── Render ──
+
+  if (!loading && _Utils.default.isNull(root)) {
+    return /*#__PURE__*/_react.default.createElement(EmptyState, {
+      iconTheme: iconTheme
+    });
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      padding: '32px'
+    style: _Utils.default.mergeStyles({}, props.config)
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    sx: {
+      p: 2,
+      flexGrow: 1,
+      overflow: 'auto'
+    }
+  }, root && /*#__PURE__*/_react.default.createElement(_SimpleTreeView.SimpleTreeView, {
+    expandedItems: expanded,
+    onExpandedItemsChange: (event, ids) => setExpanded(ids),
+    sx: {
+      flexGrow: 1,
+      overflowY: 'auto'
     }
-  }, initializing === false && !_Utils.default.isNull(root) ? /*#__PURE__*/_react.default.createElement(_SimpleTreeView.SimpleTreeView, {
-    className: classes.root,
-    defaultExpanded: expanded,
-    defaultCollapseIcon: /*#__PURE__*/_react.default.createElement(MinusSquare, null),
-    defaultExpandIcon: /*#__PURE__*/_react.default.createElement(PlusSquare, null),
-    defaultEndIcon: /*#__PURE__*/_react.default.createElement(CloseSquare, null)
-  }, render(root)) : null);
+  }, renderNode(root))));
 };
 exports.Tree = Tree;

package/dist/components/WordDocumentViewer.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.KEY = exports.DOCSVC = void 0;
+exports.location = exports.default = exports.KEY = exports.DOCSVC = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactPromiseTracker = require("react-promise-tracker");
 var _Utils = _interopRequireDefault(require("../Utils"));
@@ -20,7 +20,18 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const KEY = exports.KEY = 'Ngo9BigBOggjHTQxAR8/V1JGaF5cXGpCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdlWX5ceHVRQ2BYUUdwX0NWYEs=';
 (0, _ej2Base.registerLicense)(KEY);
-const DOCSVC = exports.DOCSVC = "https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/";
+const location = exports.location = window.location.protocol + '//' + window.location.hostname;
+const DOCSVC = exports.DOCSVC = "/docs/api/v1/syncfusion";
+function getServiceUrl() {
+  const accessToken = sessionStorage.getItem('accessToken');
+  const idToken = sessionStorage.getItem('idToken');
+  const base = "".concat(location + _ApplicationManager.default.getContextRoot() + DOCSVC, "/Import");
+  const params = new URLSearchParams();
+  if (accessToken) params.set('access_token', accessToken);
+  if (idToken) params.set('id_token', idToken);
+  const qs = params.toString();
+  return qs ? "".concat(base, "?").concat(qs) : base;
+}
 _ej2ReactDocumenteditor.DocumentEditorContainerComponent.Inject(_ej2ReactDocumenteditor.Toolbar);
 const LEVEL_FMT = ['%1.', '%1.%2.', '%1.%2.%3.'];
 function applyLevel(ed) {
@@ -97,14 +108,25 @@ const WordDocumentViewer = props => {
     if (!(container !== null && container !== void 0 && container.documentEditor)) return;
     if (!dropPosition) return;
     if (!isPointInsideElement(dropPosition.x, dropPosition.y, viewerElement)) {
-      // Drop did not happen inside this document
-      //console.log("DROP NOT INSIDE THIS DOCUMENT : ", dropPosition);
       return;
     }
     const doc = container.documentEditor;
     const ed = doc.editor;
     const sel = doc.selection;
     if (!ed || !sel) return;
+
+    // Reject drop if cursor is strictly inside an existing anchor
+    // Allow dropping at the exact start or end boundary
+    const caretOffset = sel.startOffset;
+    const existingAnchor = grabAnchorWithBounds(container);
+    if (existingAnchor) {
+      const atStart = caretOffset === existingAnchor.startOffset;
+      const atEnd = caretOffset === existingAnchor.endOffset;
+      if (!atStart && !atEnd) {
+        console.warn("Drop rejected — cursor is inside anchor: " + existingAnchor.token);
+        return;
+      }
+    }
     const token = "[[".concat(normalizeAnchor(eventData), "]]");
     ed.insertText(token);
   }
@@ -169,8 +191,14 @@ const WordDocumentViewer = props => {
       });
       const formData = new FormData();
       formData.append('files', file, 'document.docx');
-      (0, _reactPromiseTracker.trackPromise)(fetch("".concat(DOCSVC, "Import"), {
+      const accessToken = sessionStorage.getItem('accessToken');
+      const idToken = sessionStorage.getItem('idToken');
+      (0, _reactPromiseTracker.trackPromise)(fetch("".concat(location + _ApplicationManager.default.getContextRoot() + DOCSVC, "/Import"), {
         method: 'POST',
+        headers: {
+          'Authorization': 'Bearer ' + accessToken,
+          'idToken': idToken
+        },
         body: formData
       }).then(response => {
         (0, _reactPromiseTracker.trackPromise)(response.json().then(json => {
@@ -592,7 +620,7 @@ const WordDocumentViewer = props => {
     showPropertiesPane: false,
     enableTrackChanges: true,
     enableAutoFocus: false,
-    serviceUrl: DOCSVC,
+    serviceUrl: getServiceUrl(),
     enableToolbar: !props.readOnly || props.commentsOnly
   }), visible && items && props.trackChanges === false && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
     id: "".concat(props.id, "-container"),
@@ -613,7 +641,7 @@ const WordDocumentViewer = props => {
     restrictEditing: props.readOnly && !props.commentsOnly,
     showPropertiesPane: false,
     enableAutoFocus: false,
-    serviceUrl: DOCSVC,
+    serviceUrl: getServiceUrl(),
     enableToolbar: !props.readOnly || props.commentsOnly
   }));
 };

package/dist/components/dashboard/FoldingSideTabDashboard.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.DRAWER_WIDTH = void 0;
 exports.default = FoldingSideTabDashboard;
 var React = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
@@ -30,7 +31,7 @@ var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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); } // FoldingSideTabDashboard.jsx
-const DRAWER_WIDTH = 320;
+const DRAWER_WIDTH = exports.DRAWER_WIDTH = 320;
 const MINI_WIDTH = 72;
 const DrawerStyled = (0, _styles.styled)(_material.Drawer, {
   shouldForwardProp: prop => prop !== "open"
@@ -123,6 +124,11 @@ function FoldingSideTabDashboard(props) {
       setOpen(false); // auto collapse when screen is small
     }
   }, [isMobile]);
+  React.useEffect(() => {
+    _ApplicationManager.default.setDashboardState({
+      leftOffset: open ? DRAWER_WIDTH : MINI_WIDTH
+    });
+  }, [open]);
   React.useEffect(() => {
     if (navigator.platform.indexOf("Win") > -1) {
       document.documentElement.classList.add("perfect-scrollbar-on");
@@ -141,6 +147,9 @@ function FoldingSideTabDashboard(props) {
   }, [props.width]);
   React.useEffect(() => {
     _SocketManager.default.init();
+    _ApplicationManager.default.setDashboardState({
+      leftOffset: open ? DRAWER_WIDTH : MINI_WIDTH
+    });
     return () => {
       _SocketManager.default.disconnect();
     };

package/dist/components/facialRecognition/FacialRegistration.js

@@ -10,6 +10,9 @@ var _Observable = _interopRequireDefault(require("../../event/Observable"));
 var _Event = _interopRequireDefault(require("../../event/Event"));
 var _EventType = _interopRequireDefault(require("../../event/EventType"));
 var _FaceRecognitionComponent = _interopRequireDefault(require("./FaceRecognitionComponent"));
+var _FoldingSideTabDashboard = require("../dashboard/FoldingSideTabDashboard");
+var _ApplicationManager = _interopRequireWildcard(require("../../ApplicationManager"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const status = response => {
   if (response.ok) {
@@ -26,6 +29,7 @@ const json = response => {
 const location = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port;
 const FacialRegistration = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [visible, setVisible] = _react.default.useState(false);
+  const [offset, setOffset] = _react.default.useState(_FoldingSideTabDashboard.DRAWER_WIDTH);
   _react.default.useEffect(() => {
     props.handle.api = api();
   });
@@ -36,8 +40,16 @@ const FacialRegistration = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.
     let event = new _Event.default(props.handle, props.viewId, null);
     _Observable.default.fireEvent(_EventType.default.COMPONENT_LOAD, event);
     props.handle.api.refresh();
+    let listener = {};
+    listener.id = 'facialRegistrationDashboardStateListener';
+    listener.type = _ApplicationManager.DASHBOARD_STATE;
+    listener.handler = state => {
+      setOffset(state.leftOffset);
+    };
+    _ApplicationManager.default.addApplicationListener(listener);
     return () => {
       _Observable.default.clearComponentEventListeners(props.handle);
+      _ApplicationManager.default.removeApplicationListener('facialVerificationDashboardStateListener');
     };
   }, []);
   const api = () => {
@@ -63,7 +75,9 @@ const FacialRegistration = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.
     };
   };
   return visible && /*#__PURE__*/_react.default.createElement("div", {
-    style: _Utils.default.mergeStyles({}, props.config)
+    style: _Utils.default.mergeStyles({
+      width: "calc(100% - ".concat(offset, "px)")
+    }, props.config)
   }, /*#__PURE__*/_react.default.createElement(_FaceRecognitionComponent.default, {
     mode: "register",
     onComplete: () => {},