@agilemotion/oui-react-js 1.6.0 → 1.6.2

package/dist/components/TemplateTable.js

@@ -5,47 +5,75 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+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(_e) { throw _e; }, 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(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-const boundCheck = (pos, mousePos) => {
+var boundCheck = function boundCheck(pos, mousePos) {
   return pos - 8 < mousePos && pos + 8 > mousePos;
 };
 
-const parse = val => {
+var parse = function parse(val) {
   return parseFloat(val.replace('px', ''));
 };
 
-const DEFAULT_COL_WIDTH = 32;
+var DEFAULT_COL_WIDTH = 32;
 
-class TemplateTable {
-  constructor(config, parent) {
-    _defineProperty(this, "handleMouseMove", event => {
-      if (this.currentResizeCol && this.mouseDown) {}
+var TemplateTable = /*#__PURE__*/function () {
+  function TemplateTable(config, parent) {
+    var _this2 = this;
+
+    _classCallCheck(this, TemplateTable);
+
+    _defineProperty(this, "handleMouseMove", function (event) {
+      if (_this2.currentResizeCol && _this2.mouseDown) {}
     });
 
-    _defineProperty(this, "getElementWidth", el => {
+    _defineProperty(this, "getElementWidth", function (el) {
       return el ? parseFloat(el.style.width.replace("px", "")) : null;
     });
 
-    _defineProperty(this, "build", (colResizeHandler, parentSelectionChecker) => {
-      let tableConfig = this.config;
-      let tableHeight = tableConfig.defaultRowHeight * tableConfig.defaultNumRows;
-      let tableWidth = 0;
+    _defineProperty(this, "build", function (colResizeHandler, parentSelectionChecker) {
+      var tableConfig = _this2.config;
+      var tableHeight = tableConfig.defaultRowHeight * tableConfig.defaultNumRows;
+      var tableWidth = 0;
+
+      var _iterator = _createForOfIteratorHelper(tableConfig.columns),
+          _step;
 
-      for (const column of tableConfig.columns) {
-        tableWidth += column.defaultWidth;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var column = _step.value;
+          tableWidth += column.defaultWidth;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
 
-      let table = document.createElement("div");
+      var table = document.createElement("div");
       table['data-num-cols'] = tableConfig.columns.length;
       table.className = '_item_table';
       table.style.border = '1px solid #aaa';
       table.style.width = tableWidth + 'px';
       table.style.height = tableHeight + 'px';
-      let sortedCols = tableConfig.columns.sort((a, b) => a.id - b.id);
+      var sortedCols = tableConfig.columns.sort(function (a, b) {
+        return a.id - b.id;
+      });
 
-      for (let i = 0; i < tableConfig.defaultNumRows; i++) {
-        table.appendChild(this.createRow(tableConfig, sortedCols, tableWidth, i, colResizeHandler, parentSelectionChecker));
+      for (var i = 0; i < tableConfig.defaultNumRows; i++) {
+        table.appendChild(_this2.createRow(tableConfig, sortedCols, tableWidth, i, colResizeHandler, parentSelectionChecker));
       }
 
       return table;
@@ -54,10 +82,12 @@ class TemplateTable {
     this.config = config;
     this.parent = parent;
 
-    const _this = this;
+    var _this = this;
 
     document.addEventListener("mousemove", this.handleMouseMove);
-    document.addEventListener("mousedown", e => this.mouseDown = true);
+    document.addEventListener("mousedown", function (e) {
+      return _this2.mouseDown = true;
+    });
     document.addEventListener('mouseup', function (e) {
       _this.currentClientX = null;
       _this.curResizeColWidth = null;
@@ -68,119 +98,154 @@ class TemplateTable {
     });
   }
 
-  addColMouseMoveEvent(col, colResizeHandler, parentSelectionChecker, first, last) {
-    col.addEventListener("mousemove", e => {
-      const _this = this;
-
-      let parentOffset = this.parent.offsetLeft + this.parent.parentElement.offsetLeft;
-
-      if (boundCheck(parentOffset + e.target.offsetLeft + parse(e.target.style.width), e.clientX)) {
-        if (parentSelectionChecker(this.parent)) {
-          e.target.style.cursor = 'ew-resize';
-          this.currentResizeCol = e.target;
-          colResizeHandler(true, last || first);
-        }
-      } else {
-        if (!this.mouseDown) {
-          e.target.style.cursor = 'default';
-          this.currentResizeCol = null;
-          colResizeHandler(false, last || first);
-        }
-      } //console.log(this.currentResizeCol + " : " + this.mouseDown + " : " + this.currentClientX + " : " + this.curResizeNxtColWidth);
-
-
-      if (this.currentResizeCol && this.mouseDown && this.currentClientX && this.curResizeNxtColWidth) {
-        let diffX = e.clientX - _this.currentClientX;
-        let width = _this.curResizeColWidth + diffX;
-        let nextWidth = _this.curResizeNxtColWidth - diffX;
-        let index = this.currentResizeCol['data-index'];
-
-        if (width >= DEFAULT_COL_WIDTH && nextWidth >= DEFAULT_COL_WIDTH) {
-          //console.log(width + " : " + nextWidth + " : " + DEFAULT_COL_WIDTH);
-          this.resizeColumn(index, width);
-          this.resizeColumn(index + 1, nextWidth);
+  _createClass(TemplateTable, [{
+    key: "addColMouseMoveEvent",
+    value: function addColMouseMoveEvent(col, colResizeHandler, parentSelectionChecker, first, last) {
+      var _this3 = this;
+
+      col.addEventListener("mousemove", function (e) {
+        var _this = _this3;
+        var parentOffset = _this3.parent.offsetLeft + _this3.parent.parentElement.offsetLeft;
+
+        if (boundCheck(parentOffset + e.target.offsetLeft + parse(e.target.style.width), e.clientX)) {
+          if (parentSelectionChecker(_this3.parent)) {
+            e.target.style.cursor = 'ew-resize';
+            _this3.currentResizeCol = e.target;
+            colResizeHandler(true, last || first);
+          }
+        } else {
+          if (!_this3.mouseDown) {
+            e.target.style.cursor = 'default';
+            _this3.currentResizeCol = null;
+            colResizeHandler(false, last || first);
+          }
+        } //console.log(this.currentResizeCol + " : " + this.mouseDown + " : " + this.currentClientX + " : " + this.curResizeNxtColWidth);
+
+
+        if (_this3.currentResizeCol && _this3.mouseDown && _this3.currentClientX && _this3.curResizeNxtColWidth) {
+          var diffX = e.clientX - _this.currentClientX;
+          var width = _this.curResizeColWidth + diffX;
+          var nextWidth = _this.curResizeNxtColWidth - diffX;
+          var index = _this3.currentResizeCol['data-index'];
+
+          if (width >= DEFAULT_COL_WIDTH && nextWidth >= DEFAULT_COL_WIDTH) {
+            //console.log(width + " : " + nextWidth + " : " + DEFAULT_COL_WIDTH);
+            _this3.resizeColumn(index, width);
+
+            _this3.resizeColumn(index + 1, nextWidth);
+          }
         }
-      }
-    });
-  }
-
-  resizeColumn(index, width) {
-    let elements = this.currentResizeCol.parentElement.parentElement.getElementsByClassName("_item_table_col_".concat(index));
-
-    if (elements && elements.length > 0) {
-      for (const element of elements) {
-        element.style.width = width + 'px';
-      }
+      });
     }
-  }
-
-  setResizingBorderWidth(width) {
-    if (this.currentResizeCol) {
-      this.currentResizeCol.style.borderWidth = width;
-      let index = this.currentResizeCol['data-index'];
-      let elements = this.currentResizeCol.parentElement.parentElement.getElementsByClassName("_item_table_col_".concat(index));
+  }, {
+    key: "resizeColumn",
+    value: function resizeColumn(index, width) {
+      var elements = this.currentResizeCol.parentElement.parentElement.getElementsByClassName("_item_table_col_".concat(index));
 
       if (elements && elements.length > 0) {
-        for (const element of elements) {
-          element.style.borderWidth = width;
+        var _iterator2 = _createForOfIteratorHelper(elements),
+            _step2;
+
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var element = _step2.value;
+            element.style.width = width + 'px';
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
         }
       }
     }
-  }
+  }, {
+    key: "setResizingBorderWidth",
+    value: function setResizingBorderWidth(width) {
+      if (this.currentResizeCol) {
+        this.currentResizeCol.style.borderWidth = width;
+        var index = this.currentResizeCol['data-index'];
+        var elements = this.currentResizeCol.parentElement.parentElement.getElementsByClassName("_item_table_col_".concat(index));
 
-  createRow(tableConfig, cols, tableWidth, index, colResizeHandler, parentSelectionChecker) {
-    let row = document.createElement("div");
-    row.className = '_item_table_tr row';
-    row.style.width = '100%';
-    row.style.margin = '0';
-    row.style.height = tableConfig.defaultRowHeight + 'px';
-    let last = tableConfig.defaultNumRows.length - 1 === index;
-
-    if (!last) {
-      row.style.borderBottom = '1px solid #aaa';
+        if (elements && elements.length > 0) {
+          var _iterator3 = _createForOfIteratorHelper(elements),
+              _step3;
+
+          try {
+            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+              var element = _step3.value;
+              element.style.borderWidth = width;
+            }
+          } catch (err) {
+            _iterator3.e(err);
+          } finally {
+            _iterator3.f();
+          }
+        }
+      }
     }
-
-    for (let i = 0; i < cols.length; i++) {
-      let col = cols[i];
-      let colEl = document.createElement("div");
-      colEl.style.width = col.defaultWidth - 1 + 'px';
-
-      if (i !== cols.length - 1) {
-        colEl.style.borderRight = '1px solid #aaa';
+  }, {
+    key: "createRow",
+    value: function createRow(tableConfig, cols, tableWidth, index, colResizeHandler, parentSelectionChecker) {
+      var _this4 = this;
+
+      var row = document.createElement("div");
+      row.className = '_item_table_tr row';
+      row.style.width = '100%';
+      row.style.margin = '0';
+      row.style.height = tableConfig.defaultRowHeight + 'px';
+      var last = tableConfig.defaultNumRows.length - 1 === index;
+
+      if (!last) {
+        row.style.borderBottom = '1px solid #aaa';
       }
 
-      colEl.className = "_item_table_td _item_table_col_".concat(i, " col-*-*");
-      colEl['data-index'] = i;
-      colEl.style.minWidth = DEFAULT_COL_WIDTH + 'px';
-      colEl.style.height = '100%';
-      colEl.style.whiteSpace = 'nowrap';
-      colEl.style.overflow = 'hidden';
-      colEl.style.textOverflow = 'ellipsis';
-      colEl.style.display = 'inline-block';
-      colEl.style.float = 'none';
-      colEl.innerText = col.columnId;
-      this.addColMouseMoveEvent(colEl, colResizeHandler, parentSelectionChecker, i === 0, i === cols.length - 1);
-
-      const _this = this;
-
-      colEl.addEventListener('mousedown', function (e) {
-        _this.currentClientX = e.clientX;
-        _this.curResizeColWidth = _this.getElementWidth(colEl);
-        let index = e.target['data-index'];
-        let elements = row.parentElement.getElementsByClassName("_item_table_col_".concat(index + 1));
+      var _loop = function _loop(i) {
+        var col = cols[i];
+        var colEl = document.createElement("div");
+        colEl.style.width = col.defaultWidth - 1 + 'px';
 
-        if (elements && elements.length > 0) {
-          _this.curResizeNxtColWidth = _this.getElementWidth(elements[0]);
+        if (i !== cols.length - 1) {
+          colEl.style.borderRight = '1px solid #aaa';
         }
 
-        _this.setResizingBorderWidth('2px');
-      });
-      row.appendChild(colEl);
-    }
+        colEl.className = "_item_table_td _item_table_col_".concat(i, " col-*-*");
+        colEl['data-index'] = i;
+        colEl.style.minWidth = DEFAULT_COL_WIDTH + 'px';
+        colEl.style.height = '100%';
+        colEl.style.whiteSpace = 'nowrap';
+        colEl.style.overflow = 'hidden';
+        colEl.style.textOverflow = 'ellipsis';
+        colEl.style.display = 'inline-block';
+        colEl.style.float = 'none';
+        colEl.innerText = col.columnId;
+
+        _this4.addColMouseMoveEvent(colEl, colResizeHandler, parentSelectionChecker, i === 0, i === cols.length - 1);
+
+        var _this = _this4;
+        colEl.addEventListener('mousedown', function (e) {
+          _this.currentClientX = e.clientX;
+          _this.curResizeColWidth = _this.getElementWidth(colEl);
+          var index = e.target['data-index'];
+          var elements = row.parentElement.getElementsByClassName("_item_table_col_".concat(index + 1));
+
+          if (elements && elements.length > 0) {
+            _this.curResizeNxtColWidth = _this.getElementWidth(elements[0]);
+          }
+
+          _this.setResizingBorderWidth('2px');
+        });
+        row.appendChild(colEl);
+      };
+
+      for (var i = 0; i < cols.length; i++) {
+        _loop(i);
+      }
 
-    return row;
-  }
+      return row;
+    }
+  }]);
 
-}
+  return TemplateTable;
+}();
 
 exports.default = TemplateTable;

package/dist/components/TitleBar.js

@@ -19,29 +19,44 @@ var _reactHtmlRenderer = _interopRequireDefault(require("react-html-renderer"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const TitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const [title, setTitle] = _react.default.useState('');
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-  _react.default.useLayoutEffect(() => {
+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; }
+
+var TitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _React$useState = _react.default.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      title = _React$useState2[0],
+      setTitle = _React$useState2[1];
+
+  _react.default.useLayoutEffect(function () {
     props.handle.api = api();
   }, []);
 
-  _react.default.useEffect(() => {
+  _react.default.useEffect(function () {
     props.handle.api = api();
   });
 
-  _react.default.useEffect(() => {
+  _react.default.useEffect(function () {
     console.log('TITLE BAR RENDERED : ' + props.config.id);
 
-    let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+    var parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
 
-    let eventHandlingConfig = _Utils.default.isNull(parsedConfig.eventHandlingConfig) ? {} : parsedConfig.eventHandlingConfig;
+    var eventHandlingConfig = _Utils.default.isNull(parsedConfig.eventHandlingConfig) ? {} : parsedConfig.eventHandlingConfig;
     eventHandlingConfig.subscriptions = _Utils.default.isNull(eventHandlingConfig.subscriptions) ? [] : eventHandlingConfig.subscriptions;
 
-    let titleValue = _Utils.default.getComponentAttribute(props.config, 'title', null);
+    var titleValue = _Utils.default.getComponentAttribute(props.config, 'title', null);
 
     if (_Utils.default.isNull(titleValue)) {
-      let subscription = {
+      var subscription = {
         publisher: 'applicationManager',
         eventType: _EventType.default.APPLICATION_CONTEXT_CHANGE,
         actions: [{
@@ -59,13 +74,13 @@ const TitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     }
   }, []);
 
-  const api = () => {
+  var api = function api() {
     return {
       get id() {
         return props.config.id;
       },
 
-      getChildren: () => {
+      getChildren: function getChildren() {
         return [];
       },
 

package/dist/components/Toolbar.js

@@ -25,47 +25,76 @@ var _Icon = _interopRequireDefault(require("./Icon"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    spacer: {
+      borderLeft: '2px solid' + theme.palette.secondary.main,
+      height: '100%'
     }
-  }
-}))(_ToggleButtonGroup.default);
+  };
+});
+var StyledToggleButtonGroup = (0, _core.withStyles)(function (theme) {
+  return {
+    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();
+var Toolbar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var classes = useStyles();
 
-  const [itemHandles] = _react.default.useState([]);
+  var _React$useState = _react.default.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 1),
+      itemHandles = _React$useState2[0];
 
-  const [alignment] = _react.default.useState(_Utils.default.getComponentAttribute(props.config, 'alignment', 'left'));
+  var _React$useState3 = _react.default.useState(_Utils.default.getComponentAttribute(props.config, 'alignment', 'left')),
+      _React$useState4 = _slicedToArray(_React$useState3, 1),
+      alignment = _React$useState4[0];
 
-  const [config, setConfig] = _react.default.useState(null);
+  var _React$useState5 = _react.default.useState(null),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      config = _React$useState6[0],
+      setConfig = _React$useState6[1];
 
-  let itemKeyCounter = 0;
-  let sectionKeyCounter = 0;
+  var itemKeyCounter = 0;
+  var sectionKeyCounter = 0;
 
-  _react.default.useEffect(() => {
+  _react.default.useEffect(function () {
     props.handle.api = api();
   });
 
-  _react.default.useEffect(() => {
+  _react.default.useEffect(function () {
     if (config) {
       props.handle.api = api();
 
-      let parsedConfig = _Utils.default.parseConfig(config, props.viewId);
+      var parsedConfig = _Utils.default.parseConfig(config, props.viewId);
 
       _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
 
@@ -73,16 +102,16 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     }
   }, [config]);
 
-  _react.default.useEffect(() => {
+  _react.default.useEffect(function () {
     var _props$tableRow$id;
 
-    setConfig(props.tableRow ? { ...props.config,
+    setConfig(props.tableRow ? _objectSpread(_objectSpread({}, props.config), {}, {
       id: props.config.id + '_' + ((_props$tableRow$id = props.tableRow.id) === null || _props$tableRow$id === void 0 ? void 0 : _props$tableRow$id.replaceAll('-', ''))
-    } : props.config);
+    }) : props.config);
   }, []);
 
   function createItemHandle() {
-    let handle = {};
+    var handle = {};
     itemHandles.push(handle);
     return handle;
   }
@@ -126,7 +155,7 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   }
 
   function renderSection(section, counter) {
-    let itemCounter = 0;
+    var itemCounter = 0;
     return /*#__PURE__*/_react.default.createElement(StyledToggleButtonGroup, {
       size: "small",
       exclusive: true,
@@ -140,7 +169,7 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       }, section)
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "row"
-    }, section.items.map((item, index) => {
+    }, section.items.map(function (item, index) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: 'col-*-*',
         key: index,
@@ -149,7 +178,7 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     })));
   }
 
-  const api = () => {
+  var api = function api() {
     return {
       get id() {
         // Toolbar
@@ -160,18 +189,18 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         return props.tableRow;
       },
 
-      getChildren: () => {
+      getChildren: function getChildren() {
         return itemHandles;
       }
     };
   };
 
   function render(toolbar) {
-    let counter = 0;
+    var counter = 0;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "row no-margin no-padding",
       ref: ref
-    }, toolbar.sections.map((section, index) => {
+    }, toolbar.sections.map(function (section, index) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "col no-margin no-padding",
         key: index,