@agilemotion/oui-react-js 1.7.7 → 1.7.9

package/dist/ApplicationManager.js

@@ -336,7 +336,7 @@ class ApplicationManager {
     if (!view.popUp && !view.window) {
       let topView = this.getTopAnchorView();
       if (topView) {
-        this.closeView(topView?.config.id);
+        this.closeView(topView?.config.id, forward);
       }
     } else {
       if (view.popUp) {
@@ -345,7 +345,7 @@ class ApplicationManager {
       if (view.window) {
         let topView = this.getTopWindowView();
         if (topView) {
-          this.closeView(topView?.config.id);
+          this.closeView(topView?.config.id, forward);
         }
       }
     }
@@ -358,11 +358,13 @@ class ApplicationManager {
         }
       }
     }
-    let historyElement = {};
-    historyElement.viewId = view.config.id;
-    historyElement.parent = view.parent;
-    historyElement.path = path;
-    this.navHistory.push(historyElement);
+    if (forward || view.parent) {
+      let historyElement = {};
+      historyElement.viewId = view.config.id;
+      historyElement.parent = view.parent;
+      historyElement.path = path;
+      this.navHistory.push(historyElement);
+    }
     this.views.push(view);
     if (view.window) {
       _Observable.default.emitContextChangeEvent(applicationContext, {

package/dist/RestService.js

@@ -68,7 +68,11 @@ class RestService {
           }
           if (httpParameterType === 'PATH_VARIABLE') {
             if (!_Utils.default.isNull(parameterValue)) {
-              pathParameters += '/' + (typeof parameterValue.value === 'object' ? encodeURIComponent(JSON.stringify(parameterValue.value)) : parameterValue.instanceType === 'TypedValue' ? encodeURIComponent(parameterValue.value) : encodeURIComponent(parameterValue));
+              if (parameter.encode) {
+                pathParameters += '/' + (typeof parameterValue.value === 'object' ? encodeURIComponent(JSON.stringify(parameterValue.value)) : parameterValue.instanceType === 'TypedValue' ? encodeURIComponent(parameterValue.value) : encodeURIComponent(parameterValue));
+              } else {
+                pathParameters += '/' + (typeof parameterValue.value === 'object' ? JSON.stringify(parameterValue.value) : parameterValue.instanceType === 'TypedValue' ? parameterValue.value : parameterValue);
+              }
             }
           }
           if (httpParameterType === 'HEADER') {

package/dist/RestUtils.js

@@ -69,7 +69,11 @@ class RestUtils {
         }
         if (httpParameterType === 'PATH_VARIABLE') {
           if (!_Utils.default.isNull(parameterValue)) {
-            pathParameters += '/' + (typeof parameterValue.value === 'object' ? encodeURIComponent(JSON.stringify(parameterValue.value)) : parameterValue.instanceType === 'TypedValue' ? encodeURIComponent(parameterValue.value) : encodeURIComponent(parameterValue));
+            if (parameter.encode) {
+              pathParameters += '/' + (typeof parameterValue.value === 'object' ? encodeURIComponent(JSON.stringify(parameterValue.value)) : parameterValue.instanceType === 'TypedValue' ? encodeURIComponent(parameterValue.value) : encodeURIComponent(parameterValue));
+            } else {
+              pathParameters += '/' + (typeof parameterValue.value === 'object' ? JSON.stringify(parameterValue.value) : parameterValue.instanceType === 'TypedValue' ? parameterValue.value : parameterValue);
+            }
           }
         }
         if (httpParameterType === 'HEADER') {

package/dist/components/Button.js

@@ -36,11 +36,6 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   _react.default.useEffect(() => {
     props.handle.api = api();
   });
-  _react.default.useEffect(() => {
-    return () => {
-      props.handle.api = null;
-    };
-  }, []);
   _react.default.useEffect(() => {
     if (config) {
       props.handle.api = api();
@@ -58,6 +53,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     } : props.config);
     return () => {
       _Observable.default.clearComponentEventListeners(props.handle);
+      props.handle.api = null;
     };
   }, []);
   const handleClick = e => {
@@ -68,7 +64,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const api = () => {
     return {
       get id() {
-        return config ? config.id : props.config.id;
+        return props.tableRow ? props.config.id + '_' + props.tableRow.id?.replaceAll('-', '') : props.config.id;
       },
       get tableRow() {
         return props.tableRow;

package/dist/components/DataGrid.js

@@ -127,7 +127,8 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
   const [cells] = _react.default.useState([]);
   const [headingHandle] = _react.default.useState({});
   const [filterHandle] = _react.default.useState({});
-  const [columnLayoutHandles] = _react.default.useState([]);
+  const [columnLayoutHandles] = _react.default.useState({});
+  const [editorHandles] = _react.default.useState({});
   const rowCount = _react.default.useRef(-1);
   const rowsRef = _react.default.useRef([]);
   let noteKey = 0;
@@ -185,6 +186,19 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
             }
           }
         }
+        properties = Object.getOwnPropertyNames(editorHandles);
+        for (const property of properties) {
+          let editorHandle = editorHandles[property];
+          children.push(editorHandle);
+          if (!_Utils.default.isNull(editorHandle.api) && !_Utils.default.isNull(editorHandle.api.getChildren)) {
+            let moreChildren = editorHandle.api.getChildren();
+            if (!_Utils.default.isNull(moreChildren)) {
+              for (const child of moreChildren) {
+                children.push(child);
+              }
+            }
+          }
+        }
         return children;
       },
       loadData: actionConfig => {
@@ -249,6 +263,13 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
       }
     };
   };
+  const formApi = () => {
+    return {
+      get id() {
+        return props.config.id + "_edit_form";
+      }
+    };
+  };
   function updateScrollBarPadding() {
     var tbody = document.getElementById('mainTableBody');
     if (tbody !== null && typeof tbody !== 'undefined') {
@@ -345,15 +366,20 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
     setPage(0);
   }
   const observeRow = row => {
-    let observableRow = (0, _mobx.observable)(row);
-    (0, _mobx.observe)(observableRow, change => {
-      let newValue = change.newValue;
-      let oldValue = change.oldValue;
-      if (newValue !== oldValue) {
-        refreshCell(row.id, change.name);
-      }
-    });
-    return observableRow;
+    /*let observableRow = observable(row);
+    observe(
+        observableRow,
+        change => {
+            let newValue = change.newValue;
+            let oldValue = change.oldValue;
+             if (newValue !== oldValue) {
+                refreshCell(row.id, change.name);
+            }
+        }
+    );
+     return observableRow;*/
+
+    return row;
   };
   function processData(data, conf) {
     setTotalNumberOfRows(data.totalNumberOfRecords ? data.totalNumberOfRecords : data.records.length);
@@ -620,6 +646,14 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
     }
     return columnLayoutHandles[column.id + index];
   }
+  function createCellEditorHandle(column) {
+    if (_Utils.default.isNull(editorHandles[column.id + "_editor"])) {
+      let handle = {};
+      editorHandles[column.id + "_editor"] = handle;
+      return handle;
+    }
+    return editorHandles[column.id + "_editor"];
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     style: _Utils.default.isNull(props.hasBorder) || props.hasBorder === true ? _Utils.default.mergeStyles({
@@ -734,11 +768,12 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
       },
       align: "left",
       className: isItemSelected && !_Utils.default.isNull(props.form) && !_Utils.default.isNull(column.editor) ? 'editCell' : null,
-      key: column.id
+      key: index + "_" + column.id
     }, /*#__PURE__*/_react.default.createElement(_Layout.Layout, {
-      ref: /*#__PURE__*/_react.default.createRef(),
       handle: createColumnLayoutHandle(column, index),
-      tableRow: row,
+      key: index + "_" + column.id + "_layout",
+      tableRow: rows.find(r => r.id === row.id),
+      rowIndex: index,
       config: JSON.parse(JSON.stringify(props.config.columns.find(col => col.id === column.id).layout)),
       viewId: props.viewId,
       parent: false
@@ -747,13 +782,12 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
         width: column.attributes.width ? column.attributes.width : 100 / config.columns.length + '%'
       },
       align: "left",
-      className: isItemSelected && !_Utils.default.isNull(props.form) && !_Utils.default.isNull(column.editor) ? 'editCell' : null,
-      key: column.id,
+      className: isItemSelected && !_Utils.default.isNull(column.editor) ? 'editCell' : null,
+      key: index + "_" + column.id,
       onClick: event => handleCellClick(event, row.id, column)
     }, /*#__PURE__*/_react.default.createElement(_TableCellContent.default, {
+      handle: createCellEditorHandle(column),
       viewId: props.viewId,
-      form: props.form,
-      formValues: props.formValues,
       editor: column.editor,
       ref: /*#__PURE__*/_react.default.createRef(),
       refCallback: createCell,

package/dist/components/DocumentTemplateDesignerComponent.js

@@ -396,7 +396,6 @@ const DocumentTemplateDesignerComponent = props => {
     toolbarItems: items,
     toolbarClick: onToolbarClick,
     contentChange: onContentChange,
-    enableTrackChanges: false,
     serviceUrl: "https://services.syncfusion.com/react/production/api/documenteditor/",
     enableToolbar: true
   })));

package/dist/components/ElementResizeHandler.js

@@ -32,16 +32,13 @@ class ElementResizeHandler {
     this.ghostPane.style.opacity = 0;
   };
   onTouchDown = e => {
-    alert(1);
     this.onDown(e.touches[0]);
     e.preventDefault();
   };
   onTouchMove = e => {
-    alert(1);
     this.onMove(e.touches[0]);
   };
   onTouchEnd = e => {
-    alert(1);
     if (e.touches.length === 0) {
       this.onUp(e.changedTouches[0]);
     }

package/dist/components/TableCellContent.js

@@ -5,19 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _TextField = _interopRequireDefault(require("./form/TextField"));
-var _DatePicker = _interopRequireDefault(require("./form/DatePicker"));
-var _SelectItem = _interopRequireDefault(require("./form/SelectItem"));
 var _Utils = _interopRequireDefault(require("../Utils"));
-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"));
+var _Form = _interopRequireDefault(require("./form/Form"));
 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);
   const [refresher, setRefresher] = _react.default.useState(true);
+  const editorValue = _react.default.useRef(null);
   const validate = value => {
     let validator = props.validator;
     let errors = props.row.errors;
@@ -33,7 +29,9 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
         let nullableExpression = validator.nullable.replace(/\[#i]/g, `[${props.row.index}]`);
         required = !_Utils.default.evaluateBooleanExpression(nullableExpression, props.dataBinding);
       }
-      let validation = _Utils.default.validateField(props.dataBinding, required, props.formValues, value, validator);
+      let formValue = {};
+      formValue[props.editor.id] = value;
+      let validation = _Utils.default.validateField(props.dataBinding, required, formValue, value, validator);
       if (!validation.valid) {
         let error = {};
         error.column = props.dataBinding;
@@ -59,6 +57,11 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
       });
     }
   }, [ref.current]);
+  _react.default.useEffect(() => {
+    if (props.editor && props.row) {
+      editorValue.current = props.row[props.dataBinding];
+    }
+  }, [props.row, props.editor]);
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(props.editor)) {
       props.editor.id = props.editor.id.replace('.', '_');
@@ -115,84 +118,36 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
       return getStaticDisplayValue();
     } else {
       if (!_Utils.default.isNull(props.editor)) {
-        props.formValues[props.editor.id] = props.row[props.dataBinding];
-        if (props.editor.fieldType === 'TEXT_FIELD') {
-          return /*#__PURE__*/_react.default.createElement(_TextField.default, {
-            valueChangeHandler: valueChangeHandler,
-            config: props.editor,
-            form: props.form,
-            handle: {},
-            ref: /*#__PURE__*/_react.default.createRef(),
-            bindValueToForm: false,
-            values: props.formValues,
-            viewId: props.viewId
-          });
-        } else if (props.editor.fieldType === 'DATE') {
-          return /*#__PURE__*/_react.default.createElement(_DatePicker.default, {
-            valueChangeHandler: valueChangeHandler,
-            config: props.editor,
-            form: props.form,
-            handle: {},
-            ref: /*#__PURE__*/_react.default.createRef(),
-            bindValueToForm: false,
-            values: props.formValues,
-            viewId: props.viewId
-          });
-        } else if (props.editor.fieldType === 'SELECT') {
-          let objectReference = props.row[props.dataBinding];
-          if (!_Utils.default.isNull(objectReference)) {
-            objectReference.toString = () => {
-              return objectReference.label;
-            };
-          }
-          return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
-            valueChangeHandler: valueChangeHandler,
-            config: props.editor,
-            form: props.form,
-            handle: {},
-            ref: /*#__PURE__*/_react.default.createRef(),
-            bindValueToForm: false,
-            values: props.formValues,
-            value: objectReference,
-            viewId: props.viewId
-          });
-        } else if (props.editor.fieldType === 'LOOKUP') {
-          let data = props.row[props.dataBinding];
-          if (!_Utils.default.isNull(data)) {
-            data.toString = () => {
-              return data.label;
-            };
-          }
-          return /*#__PURE__*/_react.default.createElement(_LookupField.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 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
-          });
-        }
+        //props.formValues[props.editor.id] = props.row[props.dataBinding];
+
+        let formValue = {};
+        formValue[props.editor.id] = editorValue.current;
+        let formConfig = {
+          type: "form",
+          id: props.editor.id + "_form",
+          sections: [{
+            type: "formSection",
+            components: [{
+              type: "fieldSet",
+              attributes: {
+                style: {
+                  "width": "100%"
+                }
+              },
+              fields: [props.editor]
+            }]
+          }]
+        };
+        return /*#__PURE__*/_react.default.createElement(_Form.default, {
+          config: formConfig,
+          handle: props.handle,
+          values: formValue,
+          valueChangeHandler: value => {
+            editorValue.current = value[props.editor.id];
+            valueChangeHandler(value[props.editor.id]);
+          },
+          viewId: props.viewId
+        });
       } else {
         return getStaticDisplayValue();
       }

package/dist/components/form/BaseField.js

@@ -136,6 +136,14 @@ const BaseField = props => {
         valueChanged = JSON.stringify(valueRef.current) !== JSON.stringify(newValue);
       }
     }
+    if (props.config.fieldType === 'GRID' && valueObject[valueProperty]) {
+      valueObject[valueProperty].splice(0, valueObject[valueProperty].length);
+      for (const newValueElement of newValue) {
+        valueObject[valueProperty].push(newValueElement);
+      }
+      let id = props.config.dataBinding ? props.config.dataBinding : props.config.id;
+      props.form().handleChange(!_Utils.default.isNull(props.config.dataBinding) ? props.config.dataBinding : id, newValue);
+    }
     if (valueChanged) {
       let id = props.config.dataBinding ? props.config.dataBinding : props.config.id;
       _ApplicationManager.default.enableFormMarkers(true);

package/dist/components/form/Form.js

@@ -113,11 +113,16 @@ const Form = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
         return values.current;
       },
       set model(model) {
-        parseValues(transformDataObject(model));
-        setMasterValues(model);
+        if (_Utils.default.isNull(model)) {
+          parseValues({});
+          setMasterValues({});
+        } else {
+          parseValues(transformDataObject(model));
+          setMasterValues(model);
+        }
       },
       get value() {
-        if (loadingRef.current === false) {
+        if (loadingRef.current === false && values.current) {
           let data = null;
           let valid = true;
           data = {};
@@ -222,8 +227,8 @@ const Form = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
             if (!_Utils.default.isNull(result)) {
               parseValues(transformDataObject(result));
               setMasterValues(result);
-              loadingRef.current = false;
             }
+            loadingRef.current = false;
           } catch (e) {
             console.error(e);
           }
@@ -241,8 +246,10 @@ const Form = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
         eventConfig.service = service;
         // TODO : Implement the invalid paramenter callback
         _ServiceCallActionHandler.default.execute(eventConfig, null, null, props.viewId, data => {
-          parseValues(transformDataObject(data));
-          setMasterValues(data);
+          if (data) {
+            parseValues(transformDataObject(data));
+            setMasterValues(data);
+          }
           loadingRef.current = false;
         }, () => {}, parameter => {
           loadingRef.current = false;

package/dist/components/form/GridField.js

@@ -130,7 +130,6 @@ const GridFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
     ref: /*#__PURE__*/_react.default.createRef(),
     viewId: props.viewId,
     rows: rows,
-    form: props.form,
     formValues: props.values,
     valueChangeHandler: rows => {
       let value = null;
@@ -157,7 +156,7 @@ const GridFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
 const GridField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [gridHandle] = _react.default.useState({});
   const [toolHandle] = _react.default.useState(!_Utils.default.isNull(props.config.toolstrip) ? {} : null);
-  const [initialValueSet, setInitialValueSet] = _react.default.useState(false);
+  const initialValueSet = _react.default.useRef(false);
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,
     getChildren: () => {
@@ -181,7 +180,6 @@ const GridField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.
         let objectArray = value;
         let val = [];
         if (objectArray.length > 0) {
-          let type = objectArray[0].type;
           let nullIdRecords = 1;
           for (const objectArrayElement of objectArray) {
             if (inbound && _Utils.default.isNull(objectArrayElement.id)) {
@@ -193,7 +191,7 @@ const GridField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.
             val.push(objectArrayElement);
           }
         }
-        setInitialValueSet(false);
+        initialValueSet.current = false;
         return val;
       }
       return value;
@@ -203,9 +201,9 @@ const GridField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.
     ref: ref,
     gridHandle: gridHandle,
     toolstripHandle: toolHandle,
-    initialValueSet: initialValueSet,
+    initialValueSet: initialValueSet.current,
     loadCallback: () => {
-      setInitialValueSet(true);
+      initialValueSet.current = true;
     },
     base: base
   }, props)));

package/dist/components/form/LookupField.js

@@ -155,6 +155,9 @@ const LookupField = exports.LookupField = /*#__PURE__*/_react.default.memo( /*#_
     },
     valueParser: (value, inbound) => {
       if (!value || !value.id) {
+        if (value) {
+          console.warn("LOOKUP VALUE WITH NO ID FOR : " + props.config.id, value);
+        }
         return null;
       }
       if (!_Utils.default.isNull(value)) {

package/dist/components/form/Section.js

@@ -113,17 +113,18 @@ const Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
   function render(section) {
     let counter = 0;
     return _Utils.default.isNull(section.components) || section.components.length === 0 ? /*#__PURE__*/_react.default.createElement("div", null, " Error: A form section must have components") : /*#__PURE__*/_react.default.createElement("div", {
-      style: {
+      style: _Utils.default.mergeStyles({
         overflow: 'hidden'
-      }
+      }, props.config),
+      className: "oui-form-section"
     }, fieldGrid.rows.map((row, index) => {
       return /*#__PURE__*/_react.default.createElement(_Grid.default, {
         container: true,
-        style: _Utils.default.mergeStyles({
+        style: {
           margin: '0',
           textAlign: 'left',
           width: '100%'
-        }, section),
+        },
         key: index
       }, row.fields.map(field => {
         if (_Utils.default.isNull(field.id)) {

package/dist/components/layout/Layout.js

@@ -31,7 +31,7 @@ var _ChatRoomWrapper = _interopRequireDefault(require("../media/chat/ChatRoomWra
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Layout = exports.Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Layout = props => {
   const [componentHandles] = _react.default.useState({});
   const [loadedComponents] = _react.default.useState([]);
   const [visible, setVisible] = _react.default.useState(true);
@@ -278,12 +278,10 @@ const Layout = exports.Layout = /*#__PURE__*/_react.default.forwardRef((props, r
         setVisible(val);
       },
       getChildren: () => {
-        //console.log("\n\n\n\nGETTING LAYOUT KIDS : ", componentHandles);
         let children = [];
         let properties = Object.getOwnPropertyNames(componentHandles);
         for (const property of properties) {
           let componentHandle = componentHandles[property];
-          //console.log(property, componentHandle);
           children.push(componentHandle);
           if (!_Utils.default.isNull(componentHandle.api) && !_Utils.default.isNull(componentHandle.api.getChildren)) {
             let moreChildren = componentHandle.api.getChildren();
@@ -364,9 +362,10 @@ const Layout = exports.Layout = /*#__PURE__*/_react.default.forwardRef((props, r
       }, renderComponent(component, null));
     }));
   }
-  return visible && /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     id: props.config.id,
     style: getLayoutStyle(props.config, 'transparent'),
     className: `${_Utils.default.getComponentAttribute(props.config, 'className', '') + (props.config.orientation === 'HORIZONTAL' ? ' row' : '')}`
   }, render(props.config));
-});
+};
+exports.Layout = Layout;

package/dist/components/media/TrainingRoom.js

@@ -106,7 +106,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
             break;
           case _VCEventType.VCEventType.CONSUMER_TRANSPORT_FAILED:
             hangUp();
-            alert('Connection error - Please check your network connection and re-join the meeting');
+            console.log('Connection error - Please check your network connection and re-join the meeting');
             break;
         }
       }

package/dist/components/menu/MenuButton.js

@@ -78,7 +78,7 @@ const MenuButton = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const api = () => {
     return {
       get id() {
-        return config ? config.id : props.config.id;
+        return props.tableRow ? props.config.id + '_' + props.tableRow.id?.replaceAll('-', '') : props.config.id;
       },
       get tableRow() {
         return props.tableRow;

package/dist/components/menu/MenuItem.js

@@ -46,7 +46,7 @@ const MenuItem = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const api = () => {
     return {
       get id() {
-        return config ? config.id : props.config.id;
+        return props.tableRow ? props.config.id + '_' + props.tableRow.id?.replaceAll('-', '') : props.config.id;
       },
       get tableRow() {
         return props.tableRow;

package/dist/components/signatures/ResponsiveTable.js

@@ -191,7 +191,6 @@ function EnhancedTable(props) {
     if (fetchEnabled && !utils.isNull(props.searchParameters) && !(utils.isNull(props.dataUrl) || utils.isNull(props.dataService))) {
       setSearchParameters(props.searchParameters);
       if (!utils.isNull(props.dataService)) {
-        alert(props.dataService);
         (0, _RestUtils.invokeRpc)(props.dataService, null, "", result => {
           setRows(result.data.records);
           setTotalNumberOfRows(result.data.totalNumberOfRecords);
@@ -199,9 +198,7 @@ function EnhancedTable(props) {
             props.onDataArrive(result.data);
           }
           updateScrollBarPadding();
-        }, e => {
-          alert(e.message);
-        });
+        }, e => {});
       } else {
         utils.invokeUrl(props.dataUrl, JSON.stringify(utils.getRequest(page + 1, rowsPerPage, props.searchParameters, props.paged)), data => {
           var result;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.7.7",
+  "version": "1.7.9",
   "files": [
     "dist"
   ],