@agilemotion/oui-react-js 1.2.7 → 1.2.8

package/dist/components/Toolbar.js

@@ -0,0 +1,304 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+
+var _core = require("@material-ui/core");
+
+var _ToggleButtonGroup = _interopRequireDefault(require("@material-ui/lab/ToggleButtonGroup"));
+
+var _MenuButton = _interopRequireDefault(require("./menu/MenuButton"));
+
+var _Button = _interopRequireDefault(require("./Button"));
+
+var _Utils = _interopRequireDefault(require("../Utils"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _asyncMutex = require("async-mutex");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const useStyles = (0, _styles.makeStyles)(theme => ({
+  spacer: {
+    borderLeft: '2px solid' + theme.palette.secondary.main,
+    height: '100%'
+  }
+}));
+const StyledToggleButtonGroup = (0, _core.withStyles)(theme => ({
+  grouped: {
+    margin: theme.spacing(0.5),
+    border: 'none',
+    padding: theme.spacing(0, 1),
+    '&:not(:first-child)': {
+      borderRadius: theme.shape.borderRadius
+    },
+    '&:first-child': {
+      borderRadius: theme.shape.borderRadius
+    }
+  }
+}))(_ToggleButtonGroup.default);
+
+const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const classes = useStyles();
+
+  const _React$useState = _react.default.useState([]),
+        _React$useState2 = _slicedToArray(_React$useState, 1),
+        itemHandles = _React$useState2[0];
+
+  const _React$useState3 = _react.default.useState('left'),
+        _React$useState4 = _slicedToArray(_React$useState3, 1),
+        alignment = _React$useState4[0];
+
+  const _React$useState5 = _react.default.useState([]),
+        _React$useState6 = _slicedToArray(_React$useState5, 1),
+        loadedComponents = _React$useState6[0];
+
+  const mutex = new _asyncMutex.Mutex();
+  let itemKeyCounter = 0;
+  let sectionKeyCounter = 0;
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    _Observable.default.addSubscriptions(props.config.eventHandlingConfig, props.handle, props.viewId);
+
+    _Observable.default.addSystemSubscriptions(props.config);
+  });
+
+  function createItemHandle() {
+    let handle = {};
+    itemHandles.push(handle);
+    return handle;
+  }
+
+  function renderItem(item, defaultId) {
+    if (_Utils.default.isNull(item.id)) {
+      item.id = defaultId;
+    }
+
+    return item.type === 'menuButton' ? /*#__PURE__*/_react.default.createElement(_MenuButton.default, {
+      config: item,
+      handle: createItemHandle(),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      viewId: props.viewId,
+      loadCompleteHandler: loadCompleteHandler
+    }) : item.type === 'button' ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+      config: item,
+      handle: createItemHandle(),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      viewId: props.viewId,
+      loadCompleteHandler: loadCompleteHandler
+    }) : item.type === 'toolbarSpacer' ? /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.spacer
+    }, "\xA0") : /*#__PURE__*/_react.default.createElement("div", null, "Unsupported toolbar item type " + item.type);
+  }
+
+  function loadCompleteHandler(_x) {
+    return _loadCompleteHandler.apply(this, arguments);
+  }
+
+  function _loadCompleteHandler() {
+    _loadCompleteHandler = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(id) {
+      var release, allLoaded, _iterator, _step, section, _iterator2, _step2, item;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return mutex.acquire();
+
+          case 2:
+            release = _context.sent;
+            _context.prev = 3;
+            loadedComponents.push(id);
+            allLoaded = true;
+
+            if (!(_Utils.default.isNull(props.config.sections) || _Utils.default.isNull(props.config.sections.length === 0))) {
+              _context.next = 9;
+              break;
+            }
+
+            console.error("Toolbar without sections");
+            return _context.abrupt("return");
+
+          case 9:
+            _iterator = _createForOfIteratorHelper(props.config.sections);
+            _context.prev = 10;
+
+            _iterator.s();
+
+          case 12:
+            if ((_step = _iterator.n()).done) {
+              _context.next = 21;
+              break;
+            }
+
+            section = _step.value;
+
+            if (!(_Utils.default.isNull(section.items) || _Utils.default.isNull(section.items.length === 0))) {
+              _context.next = 17;
+              break;
+            }
+
+            console.error("Toolbar section without items");
+            return _context.abrupt("return");
+
+          case 17:
+            _iterator2 = _createForOfIteratorHelper(section.items);
+
+            try {
+              for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                item = _step2.value;
+
+                if (!loadedComponents.includes(item.id) && item.type !== 'toolbarSpacer') {
+                  allLoaded = false;
+                }
+              }
+            } catch (err) {
+              _iterator2.e(err);
+            } finally {
+              _iterator2.f();
+            }
+
+          case 19:
+            _context.next = 12;
+            break;
+
+          case 21:
+            _context.next = 26;
+            break;
+
+          case 23:
+            _context.prev = 23;
+            _context.t0 = _context["catch"](10);
+
+            _iterator.e(_context.t0);
+
+          case 26:
+            _context.prev = 26;
+
+            _iterator.f();
+
+            return _context.finish(26);
+
+          case 29:
+            if (allLoaded === true) {
+              props.loadCompleteHandler(props.config.id);
+            }
+
+          case 30:
+            _context.prev = 30;
+            release();
+            return _context.finish(30);
+
+          case 33:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[3,, 30, 33], [10, 23, 26, 29]]);
+    }));
+    return _loadCompleteHandler.apply(this, arguments);
+  }
+
+  function renderSection(section, counter) {
+    let itemCounter = 0;
+    return /*#__PURE__*/_react.default.createElement(StyledToggleButtonGroup, {
+      size: "small",
+      value: alignment,
+      exclusive: true,
+      key: sectionKeyCounter++,
+      "aria-label": "text alignment"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "row"
+    }, section.items.map(item => {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          margin: '4px'
+        },
+        key: itemKeyCounter++
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'col-*-*',
+        style: {
+          height: _Utils.default.getComponentAttribute(item, 'height', item.type === 'toolbarSpacer' ? '100%' : null),
+          minWidth: item.type === 'toolbarSpacer' ? '2' : _Utils.default.isNull(item.attributes) || _Utils.default.isNull(item.attributes['label']) ? '60px' : _Utils.default.getComponentAttribute(item, 'width', null)
+        }
+      }, renderItem(item, 'toolbar_item_' + counter + '_' + itemCounter++)));
+    })));
+  }
+
+  const api = () => {
+    return {
+      get id() {
+        // Toolbar
+        return props.config.id;
+      },
+
+      getChildren: () => {
+        return itemHandles;
+      }
+    };
+  };
+
+  function render(toolbar) {
+    let counter = 0;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "row",
+      ref: ref,
+      style: {
+        padding: '0 0 8px 0'
+      }
+    }, toolbar.sections.map(section => {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "col-*-*",
+        key: ++sectionKeyCounter
+      }, renderSection(section, counter++));
+    }));
+  }
+
+  function getBorderBottom() {
+    let border = _Utils.default.getComponentAttribute(props.config, 'border', null);
+
+    if (border === 'none') {
+      return 'none';
+    }
+
+    return _Utils.default.getComponentAttribute(props.config, 'borderBottom', '1px solid #e2e2e2');
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    style: {
+      padding: _Utils.default.getComponentAttribute(props.config, 'padding', '0px 32px 0px 32px'),
+      borderBottom: getBorderBottom(),
+      margin: _Utils.default.getComponentAttribute(props.config, 'margin', null)
+    }
+  }, render(props.config));
+});
+
+var _default = Toolbar;
+exports.default = _default;

package/dist/components/Tooltip.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomTooltip;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const LightTooltip = (0, _styles.withStyles)(theme => ({
+  tooltip: {
+    backgroundColor: theme.palette.common.white,
+    color: 'rgba(0, 0, 0, 0.87)',
+    boxShadow: theme.shadows[1],
+    fontSize: 11
+  }
+}))(_Tooltip.default);
+const useStylesBootstrap = (0, _styles.makeStyles)(theme => ({
+  arrow: {
+    color: theme.palette.common.black
+  },
+  tooltip: {
+    backgroundColor: theme.palette.common.black
+  }
+}));
+const useStylesError = (0, _styles.makeStyles)(theme => ({
+  arrow: {
+    color: '#f44336'
+  },
+  tooltip: {
+    backgroundColor: '#f44336'
+  }
+}));
+
+function BootstrapTooltip(props) {
+  const classes = useStylesBootstrap();
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.default, _extends({
+    arrow: true,
+    classes: classes
+  }, props));
+}
+
+function ErrorTooltip(props) {
+  const classes = useStylesError();
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.default, _extends({
+    arrow: true,
+    classes: classes
+  }, props));
+}
+
+const HtmlTooltip = (0, _styles.withStyles)(theme => ({
+  tooltip: {
+    backgroundColor: '#f5f5f9',
+    color: 'rgba(0, 0, 0, 0.87)',
+    maxWidth: 220,
+    fontSize: theme.typography.pxToRem(12),
+    border: '1px solid #dadde9'
+  }
+}))(_Tooltip.default);
+
+function CustomTooltip(props) {
+  return /*#__PURE__*/_react.default.createElement("div", null, props.type === 'LIGHT' ? /*#__PURE__*/_react.default.createElement(LightTooltip, {
+    title: props.title
+  }, props.children) : props.type === 'BOOTSTRAP' ? /*#__PURE__*/_react.default.createElement(BootstrapTooltip, {
+    title: props.title
+  }, props.children) : props.type === 'ERROR' ? /*#__PURE__*/_react.default.createElement(ErrorTooltip, {
+    title: props.title
+  }, props.children) : /*#__PURE__*/_react.default.createElement(HtmlTooltip, {
+    title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "inherit"
+    }, props.heading), props.title)
+  }));
+}

package/dist/components/Tree.js

@@ -0,0 +1,301 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tree = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _SvgIcon = _interopRequireDefault(require("@material-ui/core/SvgIcon"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _TreeView = _interopRequireDefault(require("@material-ui/lab/TreeView"));
+
+var _TreeItem = _interopRequireDefault(require("@material-ui/lab/TreeItem"));
+
+var _Collapse = _interopRequireDefault(require("@material-ui/core/Collapse"));
+
+var _web = require("react-spring/web.cjs");
+
+var _Utils = _interopRequireDefault(require("../Utils"));
+
+var _Event = _interopRequireDefault(require("../event/Event"));
+
+var _RestUtils = require("../RestUtils");
+
+var _ActionHandlers = _interopRequireDefault(require("../event/ActionHandlers"));
+
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+
+var _EventType = _interopRequireDefault(require("../event/EventType"));
+
+var _ApplicationContext = _interopRequireDefault(require("../ApplicationContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+// web.cjs is required for IE 11 support
+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)'
+    },
+    to: {
+      opacity: props.in ? 1 : 0,
+      transform: "translate3d(".concat(props.in ? 0 : 20, "px,0,0)")
+    }
+  });
+  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
+    }
+  },
+  group: {
+    marginLeft: 7,
+    paddingLeft: 18,
+    borderLeft: "1px dashed ".concat((0, _styles.fade)(theme.palette.text.primary, 0.4))
+  }
+}))(props => /*#__PURE__*/_react.default.createElement(_TreeItem.default, _extends({}, props, {
+  TransitionComponent: TransitionComponent
+})));
+const useStyles = (0, _styles.makeStyles)({
+  root: {
+    height: 264,
+    flexGrow: 1,
+    maxWidth: 400
+  }
+});
+
+const Tree = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const classes = useStyles();
+
+  const _React$useState = _react.default.useState(null),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        root = _React$useState2[0],
+        setRoot = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState([]),
+        _React$useState4 = _slicedToArray(_React$useState3, 1),
+        selectedRows = _React$useState4[0];
+
+  const _React$useState5 = _react.default.useState([]),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        expanded = _React$useState6[0],
+        setExpanded = _React$useState6[1];
+
+  const _React$useState7 = _react.default.useState(true),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        initializing = _React$useState8[0],
+        setInitializing = _React$useState8[1];
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    if (initializing) {
+      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+      _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, () => {
+        return ref;
+      }, props.viewId);
+
+      _Observable.default.addSystemSubscriptions(parsedConfig);
+
+      setInitializing(false);
+    }
+  });
+
+  function loadData(eventConfig, componentConfig) {
+    let service = !_Utils.default.isNull(componentConfig.dataService) ? componentConfig.dataService : eventConfig !== null ? eventConfig.dataService : null;
+
+    if (!_Utils.default.isNull(service)) {
+      (0, _RestUtils.invokeRpc)(service, props.handle, props.viewId, result => {
+        try {
+          expand(result.data);
+          setRoot(result.data);
+          props.loadCompleteHandler(props.config.id);
+        } catch (e) {
+          props.console.error(e);
+
+          _Utils.default.publishSystemErrorMessage(props.viewId);
+        }
+      }, e => {
+        props.console.error(e);
+
+        _Utils.default.publishSystemErrorMessage(props.viewId);
+      }, parameter => {
+        props.loadCompleteHandler(props.config.id);
+      });
+    } else if (!_Utils.default.isNull(componentConfig.value)) {
+      let value = _ApplicationContext.default.isExpression(componentConfig.value) ? _ApplicationContext.default.resolveExpressionValue(componentConfig.value) : componentConfig.value;
+    }
+  }
+
+  _react.default.useEffect(() => {
+    if (!initializing) {
+      loadData(null, props.config);
+    }
+  }, [initializing]);
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      get selection() {
+        return selectedRows;
+      },
+
+      get root() {
+        let rootReference = null;
+
+        if (!_Utils.default.isNull(root)) {
+          rootReference = {};
+
+          if (!_Utils.default.isNull(root.map)) {
+            rootReference.id = root.map.id;
+            rootReference.label = root.map.name;
+          } else {
+            rootReference.id = root.id;
+            rootReference.label = root.name;
+          }
+        }
+
+        return rootReference;
+      },
+
+      getChildren: () => {
+        return [];
+      }
+    };
+  };
+
+  const handleSelectionChange = (id, name) => {
+    let node = {};
+    node.id = id;
+    node.label = name;
+    selectedRows.splice(0, selectedRows.length);
+    selectedRows.push(node);
+    let event = new _Event.default(props.handle, props.viewId);
+
+    _Observable.default.fireEvent(_EventType.default.SELECTION_CHANGE, event);
+  };
+
+  const render = item => {
+    return /*#__PURE__*/_react.default.createElement(StyledTreeItem, {
+      nodeId: item.map.id.toString(),
+      label: item.map.name,
+      key: item.map.id,
+      onLabelClick: e => e.preventDefault(),
+      onClick: () => {
+        handleSelectionChange(item.map.id, item.map.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.map.id));
+
+    if (!_Utils.default.isNull(item.children)) {
+      var _iterator = _createForOfIteratorHelper(item.children),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          const child = _step.value;
+          expand(child);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '32px'
+    },
+    ref: ref
+  }, initializing === false && !_Utils.default.isNull(root) ? /*#__PURE__*/_react.default.createElement(_TreeView.default, {
+    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);
+});
+
+exports.Tree = Tree;