@agilemotion/oui-react-js 1.7.1 → 1.7.3

package/dist/components/DocumentViewer.js

@@ -11,11 +11,18 @@ var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"
 var _RestUtils = require("../RestUtils");
 var _ServiceCallActionHandler = _interopRequireDefault(require("../event/ServiceCallActionHandler"));
 var _DynamicJS = _interopRequireDefault(require("../DynamicJS"));
-require("./DocumentView.css");
-var _DocumentViewerComponent = _interopRequireDefault(require("./DocumentViewerComponent"));
+require("./DocumentViewer.css");
+var _PDFViewer = _interopRequireDefault(require("./PDFViewer"));
+var _WordDocumentViewer = _interopRequireDefault(require("./WordDocumentViewer"));
+var _Event = _interopRequireDefault(require("../event/Event"));
+var _EventType = _interopRequireDefault(require("../event/EventType"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DocumentViewer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [loading, setLoading] = _react.default.useState(true);
+  const [label, setLabel] = _react.default.useState(null);
+  const [hasLoadingError, setHasLoadingError] = _react.default.useState(false);
   const [value, setValue] = _react.default.useState(null);
+  const wordEditorValueHandler = {};
   _react.default.useEffect(() => {
     props.handle.api = api();
   });
@@ -23,55 +30,80 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
     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 label = _Utils.default.getComponentAttribute(props.config, 'label', '');
+    setLabel(_DynamicJS.default.evaluateExpression(label));
+    let event = new _Event.default(props.handle, props.viewId, null);
+    _Observable.default.fireEvent(_EventType.default.COMPONENT_LOAD, event);
   }, []);
+  function doLoadData(actionConfig) {
+    if (!_Utils.default.isNull(actionConfig) && !_Utils.default.isNull(actionConfig.value)) {
+      let value = _ApplicationManager.default.isExpression(actionConfig.value) ? _ApplicationManager.default.resolveExpressionValue(actionConfig.value) : actionConfig.value;
+      // TODO : set value
+    } else {
+      let service = !_Utils.default.isNull(props.config.dataService) ? props.config.dataService : actionConfig !== null ? actionConfig.dataService : null;
+      if (!_Utils.default.isNull(service)) {
+        if (service.type === 'rpc') {
+          (0, _RestUtils.invokeRpc)(service, props.handle, props.viewId, result => {}, e => {}, parameter => {});
+        } else {
+          if (_Utils.default.isNull(actionConfig)) {
+            actionConfig = {};
+          }
+          actionConfig.service = service;
+          // TODO : Implement the invalid paramenter callback
+          _ServiceCallActionHandler.default.execute(actionConfig, null, null, props.viewId, data => {
+            let file = {};
+            if (data.payloadBase64) {
+              file.base64 = data.payloadBase64;
+            } else if (data.url) {
+              file.base64 = data.url.replace('data:application/pdf;base64,', '').replace('data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,', '');
+            }
+            file.name = data.name;
+            file.type = props.config.fileType;
+            setValue(file);
+            setHasLoadingError(false);
+            setLoading(false);
+            let event = new _Event.default(props.handle, props.viewId, null);
+            _Observable.default.fireEvent(_EventType.default.DATA_ARRIVED, event);
+          }, e => {
+            console.error(e);
+            setHasLoadingError(true);
+            setLoading(false);
+          });
+        }
+      } else {
+        let componentValue = !_Utils.default.isNull(props.config.value) ? props.config.value : actionConfig !== null ? actionConfig.value : null;
+        if (!_Utils.default.isNull(componentValue)) {
+          if (_ApplicationManager.default.isExpression(componentValue)) {
+            let path = _Utils.default.getPropertyChainPath(componentValue);
+            if (!_Utils.default.isNull(path.valueObject)) {
+              _Observable.default.addSystemGeneratedSubscription(props.viewId, props.viewId, props.config.id, () => {
+                let value = _DynamicJS.default.executeScript(`${props.config.id}ValueEvaluator`, componentValue);
+                if (!_Utils.default.isNull(value)) {
+                  // TODO : set value
+                }
+              });
+            }
+          }
+        }
+      }
+    }
+  }
   const api = () => {
     return {
       get id() {
         return props.config.id;
       },
       loadData: actionConfig => {
-        if (!_Utils.default.isNull(actionConfig) && !_Utils.default.isNull(actionConfig.value)) {
-          let value = _ApplicationManager.default.isExpression(actionConfig.value) ? _ApplicationManager.default.resolveExpressionValue(actionConfig.value) : actionConfig.value;
-          // TODO : set value
-        } else {
-          let service = !_Utils.default.isNull(props.config.dataService) ? props.config.dataService : actionConfig !== null ? actionConfig.dataService : null;
-          let componentValue = !_Utils.default.isNull(props.config.value) ? props.config.value : actionConfig !== null ? actionConfig.value : null;
-          if (!_Utils.default.isNull(service)) {
-            if (service.type === 'rpc') {
-              (0, _RestUtils.invokeRpc)(service, props.handle, props.viewId, result => {}, e => {}, parameter => {});
-            } else {
-              if (_Utils.default.isNull(actionConfig)) {
-                actionConfig = {};
-              }
-              actionConfig.service = service;
-              // TODO : Implement the invalid paramenter callback
-              _ServiceCallActionHandler.default.execute(actionConfig, null, null, props.viewId, data => {
-                let file = {};
-                if (data.payloadBase64) {
-                  file.base64 = data.payloadBase64;
-                } else if (data.url) {
-                  file.base64 = data.url.replace('data:application/pdf;base64,', '');
-                }
-                file.type = props.config.fileType;
-                setValue(file);
-              }, () => {});
-            }
-          } else {
-            if (!_Utils.default.isNull(componentValue)) {
-              if (_ApplicationManager.default.isExpression(componentValue)) {
-                let path = _Utils.default.getPropertyChainPath(componentValue);
-                if (!_Utils.default.isNull(path.valueObject)) {
-                  _Observable.default.addSystemGeneratedSubscription(props.viewId, props.viewId, props.config.id, () => {
-                    let value = _DynamicJS.default.executeScript(`${props.config.id}ValueEvaluator`, componentValue);
-                    if (!_Utils.default.isNull(value)) {
-                      // TODO : set value
-                    }
-                  });
-                }
-              }
-            }
-          }
+        doLoadData(actionConfig);
+      },
+      set label(label) {
+        setLabel(label);
+      },
+      getDocumentValue: async () => {
+        if (wordEditorValueHandler.api) {
+          return await wordEditorValueHandler.api.getValue();
         }
+        return null;
       }
     };
   };
@@ -83,9 +115,27 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
       fontSize: '20px',
       color: '#1d253b'
     }
-  }, props.config.attributes?.label), !_Utils.default.isNull(value) ? /*#__PURE__*/_react.default.createElement(_DocumentViewerComponent.default, {
+  }, label), loading && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '16px'
+    }
+  }, "Loading..."), hasLoadingError && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '16px',
+      color: 'red'
+    }
+  }, "Error loading document"), !loading && !hasLoadingError && props.config.fileType === 'application/pdf' && !_Utils.default.isNull(value) && /*#__PURE__*/_react.default.createElement(_PDFViewer.default, {
     file: value,
     onDocumentLoadSuccess: () => {}
-  }) : null);
+  }), !loading && !hasLoadingError && props.config.fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && !_Utils.default.isNull(value) && /*#__PURE__*/_react.default.createElement(_WordDocumentViewer.default, {
+    file: value,
+    onDocumentLoadSuccess: () => {},
+    valueHandler: wordEditorValueHandler,
+    allowUnresolvedChanges: props.config.allowUnresolvedChanges,
+    disableRejectChanges: props.config.disableRejectChanges,
+    disableAcceptChanges: props.config.disableAcceptChanges,
+    readOnly: props.config.readOnly,
+    commentsOnly: props.config.commentsOnly
+  }));
 }));
 var _default = exports.default = DocumentViewer;

package/dist/components/Graph.js

@@ -50,14 +50,19 @@ class Graph {
   get title() {
     return this.config.title;
   }
-  init = () => {
+  init = async () => {
     let root = this.config.nodes[0];
     this.current = new _GraphNode.default(this.config.nodes[0]);
     this.addNodeToPath(this.current);
     if (root.action.actionType === 'route') {
       root.action.window = this.config.isWindow;
     }
-    _ActionHandlers.default.invokeHandler(root.action, null, null, this.config.id);
+    if (root.onStart) {
+      for (const action of root.onStart.actions) {
+        await _ActionHandlers.default.invokeHandler(action, null, null, this.config.id);
+      }
+    }
+    await _ActionHandlers.default.invokeHandler(root.action, null, null, this.config.id);
   };
   signal = event => {
     let nextNodeName = this.current.getNextNode(event);
@@ -72,6 +77,11 @@ class Graph {
             if (node.action.actionType === 'route') {
               node.action.window = this.config.isWindow;
             }
+            if (node.onStart) {
+              for (const action of node.onStart.actions) {
+                _ActionHandlers.default.invokeHandler(action, null, null, this.config.id);
+              }
+            }
             _ActionHandlers.default.invokeHandler(node.action, null, null, this.config.id);
             break;
           }

package/dist/components/GraphNode.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
-var _ActionHandlers = _interopRequireDefault(require("../event/ActionHandlers"));
 var _DynamicJS = _interopRequireDefault(require("./../DynamicJS"));
 var _Utils = _interopRequireDefault(require("./../Utils"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/{DocumentViewerComponent.js → PDFViewer.js}

@@ -9,7 +9,7 @@ var _reactPdf = require("react-pdf");
 var _Utils = _interopRequireDefault(require("../Utils"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 _reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${_reactPdf.pdfjs.version}/pdf.worker.js`;
-const DocumentViewerComponent = props => {
+const PDFViewer = props => {
   const [pageNumber, setPageNumber] = _react.default.useState(1);
   const [numPages, setNumPages] = _react.default.useState(null);
   const onDocumentLoadSuccess = _ref => {
@@ -58,4 +58,4 @@ const DocumentViewerComponent = props => {
     alt: ''
   }), props.onDocumentLoadSuccess(1))) : null);
 };
-var _default = exports.default = DocumentViewerComponent;
+var _default = exports.default = PDFViewer;

package/dist/components/TabPage.js

@@ -39,9 +39,9 @@ const TabPage = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
   let componentKey = 0;
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    style: {
+    style: _Utils.default.mergeStyles({
       width: "inherit"
-    }
+    }, props.config)
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, _extends({
     component: "div",
     className: "w-100",
@@ -51,7 +51,11 @@ const TabPage = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
     "aria-labelledby": `simple-tab-${index}`
   }, other), /*#__PURE__*/_react.default.createElement(_Box.default, {
     p: 3,
-    className: classes.formTabPanel
+    className: classes.formTabPanel,
+    style: {
+      margin: 0,
+      padding: 0
+    }
   }, children)));
 }));
 TabPage.propTypes = {

package/dist/components/TabPanel.js

@@ -96,7 +96,7 @@ const TabPanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
   }
   const api = () => {
     return {
-      getId: () => {
+      get id() {
         return props.config.id;
       },
       getChildren: () => {
@@ -112,6 +112,15 @@ const TabPanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
           }
         }
         return children;
+      },
+      setPageHasError: (pageId, hasError) => {
+        setErrors({
+          ...errors,
+          [pageId]: hasError
+        });
+      },
+      clearErrors: () => {
+        setErrors({});
       }
     };
   };
@@ -140,7 +149,7 @@ const TabPanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     }, a11yProps(index), {
       key: index,
       style: {
-        color: _ApplicationManager.default.isFormMarkersEnabled() && !_Utils.default.isNull(props.form) && errors !== null && errors[page.id] === true ? '#ed5249' : null
+        color: _ApplicationManager.default.isFormMarkersEnabled() && errors !== null && errors[page.id] === true ? '#ed5249' : null
       }
     }));
   }) : null)), !_Utils.default.isNull(props.config) && !_Utils.default.isNull(props.config.tabPages) && props.config.tabPages.length > 0 ? props.config.tabPages.map((page, index) => {
@@ -150,7 +159,8 @@ const TabPanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     return /*#__PURE__*/_react.default.createElement(_TabPage.default, {
       value: tabValue,
       key: index,
-      index: index
+      index: index,
+      config: page
     }, renderPage(page, index));
   }) : null);
 }));

package/dist/components/TableCellContent.js

@@ -13,6 +13,7 @@ var _LookupField = _interopRequireDefault(require("./form/LookupField"));
 var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
+var _AutoComplete = _interopRequireDefault(require("./form/AutoComplete"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [contentType] = _react.default.useState(props.contentType);
@@ -65,6 +66,8 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
         props.editor.attributes = {};
       }
       props.editor.attributes['minWidth'] = 0;
+
+      // This forces the editable grid to validate its initial value
       let value = props.row[props.dataBinding];
       valueChangeHandler(_Utils.default.isNull(value) ? null : value);
     }
@@ -156,10 +159,6 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
         } else if (props.editor.fieldType === 'LOOKUP') {
           let data = props.row[props.dataBinding];
           if (!_Utils.default.isNull(data)) {
-            if (!_Utils.default.isNull(data.map)) {
-              data = data.map;
-              props.formValues[props.editor.id] = data;
-            }
             data.toString = () => {
               return data.label;
             };
@@ -175,6 +174,24 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
             value: data,
             viewId: props.viewId
           });
+        } else if (props.editor.fieldType === 'AUTO_COMPLETE') {
+          let data = props.row[props.dataBinding];
+          if (!_Utils.default.isNull(data)) {
+            data.toString = () => {
+              return "12345";
+            };
+          }
+          return /*#__PURE__*/_react.default.createElement(_AutoComplete.default, {
+            valueChangeHandler: valueChangeHandler,
+            config: props.editor,
+            form: props.form,
+            handle: {},
+            ref: /*#__PURE__*/_react.default.createRef(),
+            bindValueToForm: false,
+            values: props.formValues,
+            value: data,
+            viewId: props.viewId
+          });
         }
       } else {
         return getStaticDisplayValue();

package/dist/components/TemplateDesigner.css

@@ -1,7 +1,8 @@
-.dropTarget {
+.templateDesigner .dropTarget {
+    border: 2px dashed #d1d1d1;
 }
 
-._draggable_ {
+.templateDesigner ._draggable_ {
     position: absolute;
     border-radius: 2px;
     display: inline-block;

package/dist/components/TemplateDesigner.js

@@ -270,7 +270,9 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
     document.getElementsByTagName('body')[0].style.cursor = 'grabbing';
     setGrabbedItem(item);
   };
-  return /*#__PURE__*/_react.default.createElement("div", null, !_Utils.default.isNull(props.config) && !loading ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'templateDesigner'
+  }, !_Utils.default.isNull(props.config) && !loading ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '100%',
       height: '60px',

package/dist/components/TemplateItemEventHandler.js

@@ -67,7 +67,9 @@ class TemplateItemEventHandler {
       this.resetBorders();
       this.selectedNode = null;
       this.selectedNodeInitPosition = null;
-      selectionHandler(null);
+      if (selectionHandler) {
+        selectionHandler(null);
+      }
     }
     this.tableItemPreResizeWidth = null;
     this.tableItemPreResizeHeight = null;
@@ -80,19 +82,26 @@ class TemplateItemEventHandler {
     let width = props.width;
     let height = props.height;
     let parent = event.target;
-    let dropTarget = document.getElementsByClassName('dropTarget')[0]; //this.getDropTarget(parent);
-
+    let dropTarget = this.getDropTarget(parent);
     if (dropTarget) {
       let container = document.getElementById('templateContainer');
       let node = document.createElement("div");
       node.id = props.id;
-      node.style.lineHeight = event.target.style.lineHeight;
-      node.style.left = (props.left ? props.left : event.clientX - dropTarget.offsetLeft) + 'px';
+      node.style.left = (props.left ? props.left : container.scrollLeft + event.clientX - dropTarget.offsetLeft) + 'px';
       node.style.top = (props.top ? props.top : container.scrollTop + event.clientY - dropTarget.offsetTop) + 'px';
       node.style.border = '2px dashed green';
+      node.style.fontSize = '11px';
       node.style.position = 'absolute';
+      node.style.verticalAlign = 'middle';
+      node.style.padding = '0 4px';
       node.className = "_draggable_";
       node.setAttribute("draggable", true);
+      if (props.sid) {
+        node.setAttribute("sid", props.sid);
+      }
+      if (props.sdesc) {
+        node.setAttribute("sdesc", props.sdesc);
+      }
       if (props.type === 'TABLE') {
         let table = new _TemplateTable.default(props.table, node).build((resizing, boundary) => {
           this.resizingTableColumn = resizing;
@@ -104,10 +113,12 @@ class TemplateItemEventHandler {
         node.style.padding = '1px';
         node.style.width = parse(table.style.width) + 2 + 'px';
         node.style.height = parse(table.style.height) + 2 + 'px';
+        node.style.lineHeight = node.style.height;
       } else {
         node.style.height = height + 'px';
         node.style.width = width + 'px';
-        node.innerText = props.description;
+        node.style.lineHeight = node.style.height;
+        node.innerHTML = props.description;
       }
       node.addEventListener('dragend', event => this.handleItemDrop(event, dropTarget), false);
       let placeHolders = dropTarget.getElementsByClassName('__sys_placeholders')[0];
@@ -135,9 +146,9 @@ class TemplateItemEventHandler {
     return dropTarget;
   }
   handleItemDrop = (event, target) => {
-    console.log("\n\n\n\nclientY : " + event.clientY + " offsetTop : " + target.offsetTop + " dragOffset.y : " + this.dragOffset.y);
-    event.target.style.left = event.clientX - target.offsetLeft - this.dragOffset.x + 'px';
-    event.target.style.top = event.clientY - target.offsetTop - this.dragOffset.y + 'px';
+    //console.log("\n\n\n\nclientY : " + event.clientY + " offsetTop : " + target.offsetTop + " dragOffset.y : " + this.dragOffset.y);
+    event.target.style.left = event.clientX - this.dragOffset.x + 'px';
+    event.target.style.top = event.clientY - this.dragOffset.y + 'px';
     event.preventDefault();
     this.currentResizeNode = null;
     this.mouseDown = false;
@@ -223,22 +234,22 @@ class TemplateItemEventHandler {
     }
   }
   resizeNode = (event, node) => {
-    //console.log(this.mouseDown + " : " + node + " : " + this.resizingTableColumn);
     if (this.mouseDown && node) {
       let container = document.getElementById('templateContainer');
       if (container) {
-        let mouseX = event.clientX - this.resizingItemParent.offsetLeft + container.scrollLeft;
-        let mouseY = event.clientY - this.resizingItemParent.offsetTop + container.scrollTop;
+        let mouseX = event.clientX - this.resizingItemParent.getBoundingClientRect().left;
+        let mouseY = event.clientY - this.resizingItemParent.getBoundingClientRect().top;
         let resizeSpec = {
           leftOffset: 0,
           rightOffset: 0,
           topOffset: 0,
           bottomOffset: 0
         };
+        console.log("X : " + event.clientX + " Y : " + event.clientY + " MX : " + mouseX + " NL : " + node.style.left);
         if (this.boundCheckLeft) {
           let widthDiff = mouseX - parse(node.style.left);
           let newWidth = parse(node.style.width) - widthDiff;
-
+          console.log("WD : " + widthDiff + " NW : " + newWidth + " MX : " + mouseX + " NL : " + node.style.left);
           //console.log("\n\n\n SETTING SPEC LEFT : " + this.selectedNodeInitPosition.left);
           resizeSpec.leftOffset = mouseX - this.selectedNodeInitPosition.left;
           if (newWidth >= 20) {
@@ -259,6 +270,7 @@ class TemplateItemEventHandler {
           resizeSpec.topOffset = mouseY - this.selectedNodeInitPosition.top;
           if (newHeight >= 20) {
             node.style.height = newHeight + 'px';
+            node.style.lineHeight = newHeight + 'px';
             node.style.top = mouseY + 'px';
           }
           resizeSpec.topResized = true;
@@ -268,6 +280,7 @@ class TemplateItemEventHandler {
           resizeSpec.bottomOffset = newHeight - this.selectedNodeInitPosition.height;
           if (newHeight >= 20) {
             node.style.height = newHeight + 'px';
+            node.style.lineHeight = newHeight + 'px';
           }
           resizeSpec.bottomResized = true;
         }
@@ -283,7 +296,7 @@ class TemplateItemEventHandler {
       let top = parse(node.style.top) + itemParent.offsetTop;
       let bottom = top + parse(node.style.height);
       let mouseX = event.clientX + container.scrollLeft;
-      let mouseY = event.clientY + container.scrollTop;
+      let mouseY = event.clientY - itemParent.getBoundingClientRect().top;
       this.boundCheckTop = boundCheck(top, mouseY);
       this.boundCheckLeft = boundCheck(left, mouseX);
       this.boundCheckRight = boundCheck(right, mouseX);
@@ -322,7 +335,9 @@ class TemplateItemEventHandler {
     node.style.border = '2px dashed green';
     this.selectedNode = node;
     this.setSelectedInitNodePos();
-    selectionHandler(id, node);
+    if (selectionHandler) {
+      selectionHandler(id, node);
+    }
   };
   setSelectedInitNodePos() {
     this.selectedNodeInitPosition = {

package/dist/components/Toolbar.js

@@ -103,7 +103,9 @@ const Toolbar = props => {
       _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
       for (const section of config.sections) {
         for (const item of section.items) {
-          allItems.push(item);
+          if (item.type !== 'toolbarSpacer') {
+            allItems.push(item);
+          }
         }
       }
     }

package/dist/components/Tree.js

@@ -73,8 +73,8 @@ function TransitionComponent(props) {
   }, /*#__PURE__*/_react.default.createElement(_Collapse.default, props));
 }
 TransitionComponent.propTypes = {
-  /**
-   * Show the component; triggers the enter or exit states
+  /**
+   * Show the component; triggers the enter or exit states
    */
   in: _propTypes.default.bool
 };
@@ -122,9 +122,9 @@ const Tree = exports.Tree = /*#__PURE__*/_react.default.forwardRef((props, ref)
     if (!_Utils.default.isNull(service)) {
       (0, _RestUtils.invokeRpc)(service, props.handle, props.viewId, result => {
         try {
-          if (result.data) {
-            expand(result.data);
-            setRoot(result.data);
+          if (result) {
+            expand(result);
+            setRoot(result);
           }
         } catch (e) {
           console.error(e);