@agilemotion/oui-react-js 1.7.8 → 1.8.0

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/DocumentViewer.js

@@ -49,7 +49,7 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
             actionConfig = {};
           }
           actionConfig.service = service;
-          // TODO : Implement the invalid paramenter callback
+          // TODO : Implement the invalid parameter callback
           _ServiceCallActionHandler.default.execute(actionConfig, null, null, props.viewId, data => {
             let file = {};
             if (data.payloadBase64) {
@@ -68,6 +68,8 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
             console.error(e);
             setHasLoadingError(true);
             setLoading(false);
+          }, () => {
+            setLoading(false);
           });
         }
       } else {
@@ -127,7 +129,7 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
   }, "Error loading document"), !loading && !hasLoadingError && props.config.fileType === 'application/pdf' && !_Utils.default.isNull(value) && /*#__PURE__*/_react.default.createElement(_PDFViewer.default, {
     file: value,
     onDocumentLoadSuccess: () => {}
-  }), !loading && !hasLoadingError && props.config.fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && !_Utils.default.isNull(value) && /*#__PURE__*/_react.default.createElement(_WordDocumentViewer.default, {
+  }), !loading && !hasLoadingError && props.config.fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && (!_Utils.default.isNull(value) || props.config.enableUpload) && /*#__PURE__*/_react.default.createElement(_WordDocumentViewer.default, {
     file: value,
     onDocumentLoadSuccess: () => {},
     valueHandler: wordEditorValueHandler,
@@ -135,7 +137,9 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
     disableRejectChanges: props.config.disableRejectChanges,
     disableAcceptChanges: props.config.disableAcceptChanges,
     readOnly: props.config.readOnly,
-    commentsOnly: props.config.commentsOnly
+    commentsOnly: props.config.commentsOnly,
+    enableUpload: props.config.enableUpload,
+    trackChanges: props.config.trackChanges
   }));
 }));
 var _default = exports.default = DocumentViewer;

package/dist/components/TableCellContent.js

@@ -5,19 +5,16 @@ 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 [editor, setEditor] = _react.default.useState(null);
+  const editorValue = _react.default.useRef(null);
   const validate = value => {
     let validator = props.validator;
     let errors = props.row.errors;
@@ -33,7 +30,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,14 +58,30 @@ 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('.', '_');
-      if (_Utils.default.isNull(props.editor.attributes)) {
-        props.editor.attributes = {};
+      let e = {
+        ...props.editor,
+        id: props.editor.id.replace('.', '_')
+      };
+      if (_Utils.default.isNull(e.attributes)) {
+        e.attributes = {};
       }
-      props.editor.attributes['minWidth'] = 0;
-
+      if (_Utils.default.isNull(e.attributes.style)) {
+        e.attributes.style = {};
+      }
+      if (_Utils.default.isNull(e.attributes.containerStyle)) {
+        e.attributes.containerStyle = {};
+      }
+      e.attributes.style.minWidth = e.attributes.style.minWidth ? e.attributes.style.minWidth : 0;
+      e.attributes.style.width = e.attributes.style.width ? e.attributes.style.width : 'calc(100% - 8px)';
+      e.attributes.containerStyle.minWidth = e.attributes.containerStyle.minWidth ? e.attributes.containerStyle.minWidth : 0;
+      setEditor(e);
       // This forces the editable grid to validate its initial value
       let value = props.row[props.dataBinding];
       valueChangeHandler(_Utils.default.isNull(value) ? null : value);
@@ -115,84 +130,37 @@ 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%",
+                  "minWidth": "0"
+                }
+              },
+              fields: [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();
       }
@@ -234,6 +202,6 @@ const TableCellContent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
       }
     }
   };
-  return render();
+  return (!props.editor || props.editor && editor) && render();
 }));
 var _default = exports.default = TableCellContent;

package/dist/components/WordDocumentViewer.js

@@ -17,17 +17,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 _ej2ReactDocumenteditor.DocumentEditorContainerComponent.Inject(_ej2ReactDocumenteditor.Toolbar);
 const WordDocumentViewer = props => {
   const [container, setContainer] = _react.default.useState(null);
+  const [items, setItems] = _react.default.useState(null);
   const [json, setJson] = _react.default.useState(null);
   const [errorMessage, setErrorMessage] = _react.default.useState(null);
-  let items = ["Undo", "Redo", "Separator", {
-    tooltipText: 'Bold',
-    prefixIcon: 'e-icons e-bold',
-    command: 'Bold'
-  }, {
-    tooltipText: 'Italic',
-    prefixIcon: 'e-icons e-italic',
-    command: 'Italic'
-  }, "Separator", "Image", "Table", "Separator", "Header", "Footer", "PageSetup", "PageNumber", "Break", "InsertFootnote", "Separator", "Find", "Separator", "Comments"];
 
   /*let items = ['Bold', 'Italic', 'Underline', '|', 'Formats', '|', 'CreateLink', '|',
       {
@@ -50,7 +42,22 @@ const WordDocumentViewer = props => {
     props.valueHandler.api = api();
   });
   _react.default.useEffect(() => {
-    if (props.file.base64) {
+    let toolbarItems = ["Undo", "Redo", "Separator", {
+      tooltipText: 'Bold',
+      prefixIcon: 'e-icons e-bold',
+      command: 'Bold'
+    }, {
+      tooltipText: 'Italic',
+      prefixIcon: 'e-icons e-italic',
+      command: 'Italic'
+    }, "Separator", "Image", "Table", "Separator", "Header", "Footer", "PageSetup", "PageNumber", "Break", "InsertFootnote", "Separator", "Find", "Separator", "Comments"];
+    if (props.enableUpload) {
+      toolbarItems.unshift("Open");
+    }
+    setItems(toolbarItems);
+  }, []);
+  _react.default.useEffect(() => {
+    if (props.file?.base64) {
       let base64 = props.file.base64;
       const arrayBuffer = _Utils.default.base64ToArrayBuffer(base64);
       const file = new Blob([arrayBuffer], {
@@ -96,7 +103,7 @@ const WordDocumentViewer = props => {
   _react.default.useEffect(() => {
     if (container && json) {
       container.documentEditor.documentChange = () => {
-        container.documentEditor.enableTrackChanges = true;
+        container.documentEditor.enableTrackChanges = !_Utils.default.isNull(props.trackChanges) ? props.trackChanges : true;
         if (props.commentsOnly) {
           container.documentEditor.editor.enforceProtection('password', 'CommentsOnly');
         } else if (props.readOnly) {
@@ -118,7 +125,7 @@ const WordDocumentViewer = props => {
         }
       });
       container.documentEditor.open(json);
-      container.documentEditor.enableTrackChanges = true;
+      container.documentEditor.enableTrackChanges = !_Utils.default.isNull(props.trackChanges) ? props.trackChanges : true;
       //container.documentEditor.isReadOnly = (props.readOnly || props.commentsOnly);
     }
   }, [json, container]);
@@ -145,7 +152,7 @@ const WordDocumentViewer = props => {
     style: {
       color: 'rgba(255, 255, 255, 0.8)'
     }
-  }, errorMessage))), /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
+  }, errorMessage))), items && (_Utils.default.isNull(props.trackChanges) || props.trackChanges === true) && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
     id: "container",
     height: '690px',
     ref: scope => {
@@ -162,6 +169,22 @@ const WordDocumentViewer = props => {
     enableTrackChanges: true,
     serviceUrl: "https://services.syncfusion.com/react/production/api/documenteditor/",
     enableToolbar: !(props.readOnly || props.commentsOnly)
+  }), items && props.trackChanges === false && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
+    id: "container",
+    height: '690px',
+    ref: scope => {
+      setContainer(scope);
+    },
+    created: () => {
+      if (container) {
+        container.resize();
+        container.documentEditor.resize();
+      }
+    },
+    toolbarItems: items,
+    showPropertiesPane: false,
+    serviceUrl: "https://services.syncfusion.com/react/production/api/documenteditor/",
+    enableToolbar: !(props.readOnly || props.commentsOnly)
   }));
 };
 var _default = exports.default = WordDocumentViewer;

package/dist/components/dashboard/components/blackDashboard/sidebar/ModuleMenuSidebar.js

@@ -343,7 +343,8 @@ const ModuleMenuSidebar = props => {
         className: "logo-img",
         style: {
           paddingTop: '16px',
-          paddingBottom: '8px'
+          paddingBottom: '8px',
+          maxWidth: '140px'
         }
       }, /*#__PURE__*/_react.default.createElement("img", {
         src: logo.imgSrc,

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/FieldSet.js

@@ -498,7 +498,7 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
           }
         }
         width = colspan / fieldGrid.maxColPerRow * 100;
-        let columnStyle = {
+        let containerStyle = {
           paddingLeft: '0',
           paddingRight: '0',
           marginLeft: '0',
@@ -506,7 +506,7 @@ const FieldSet = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
           minWidth: '320px',
           width: width + '%'
         };
-        let style = field.attributes?.columnStyle ? _Utils.default.mergeObjects(field.attributes?.columnStyle, columnStyle) : columnStyle;
+        let style = field.attributes?.containerStyle ? _Utils.default.mergeObjects(field.attributes?.containerStyle, containerStyle) : containerStyle;
         return /*#__PURE__*/_react.default.createElement("div", {
           key: index,
           className: "col-*-*",

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

@@ -23,6 +23,8 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
   const [open, setOpen] = _react.default.useState(false);
   const width = props.config.attributes?.style?.width ? props.config.attributes.style.width : "100%";
   const minWidth = props.config.attributes?.style?.minWidth ? props.config.attributes.style.minWidth : "240px";
+  const height = !_Utils.default.isNull(props.config.attributes?.style?.height) ? props.config.attributes.style.height : '52px';
+  const margin = !_Utils.default.isNull(props.config.attributes?.style?.margin) ? props.config.attributes.style.margin : '4px 0';
   const defaultValue = _Utils.default.isNull(props.value) ? '' : props.value;
   const base = props.base;
   const handleClose = () => {
@@ -67,19 +69,43 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
     setOpen(true);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "w-100 lookup"
-  }, /*#__PURE__*/_react.default.createElement("table", {
-    className: "w-100"
-  }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
-    width: "90%"
+    className: "w-100 lookup row no-margin no-padding",
+    style: {
+      width: width,
+      minWidth: minWidth,
+      margin: margin,
+      height: height
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col-*-*',
+    style: {
+      width: '72px',
+      marginRight: '8px',
+      height: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    style: {
+      height: '100%'
+    },
+    variant: 'outlined',
+    onClick: openSearch,
+    disabled: base.disabled,
+    "aria-label": "search"
+  }, "...")), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col-*-* no-margin no-padding',
+    style: {
+      width: 'calc(100% - 80px)',
+      marginBottom: base.value ? '0' : '8px'
+    }
   }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
     InputProps: {
-      readOnly: true
+      readOnly: true,
+      disableUnderline: true
     },
     id: props.id,
     ref: ref,
     required: base.required,
-    disabled: base.disabled,
+    disabled: true,
     label: !_Utils.default.isNull(props.config.attributes) && !_Utils.default.isNull(props.config.attributes['label']) ? props.config.attributes['label'] : null,
     value: base.value?.__oui_label || base.value?.dataRecordDescription || defaultValue,
     className: props.className,
@@ -88,19 +114,12 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
     size: "small",
     margin: "dense",
     style: {
-      minWidth: minWidth,
-      width: width,
-      color: 'secondary'
-    },
-    variant: "outlined"
-  })), /*#__PURE__*/_react.default.createElement("td", {
-    valign: "middle",
-    align: "left"
-  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    onClick: openSearch,
-    disabled: base.disabled,
-    "aria-label": "search"
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)))))), /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+      height: '48px',
+      width: '100%',
+      color: 'secondary',
+      border: 'none'
+    }
+  })), /*#__PURE__*/_react.default.createElement(_Dialog.default, {
     open: open,
     onClose: handleClose,
     "aria-labelledby": "form-dialog-title",
@@ -155,6 +174,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/form/SelectItem.js

@@ -16,9 +16,9 @@ const SelectItemComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
   const base = props.base;
   const [optionsLoaded, setOptionsLoaded] = _react.default.useState(false);
   const [loadFullOptionList, setLoadFullOptionList] = _react.default.useState(false);
-  const minWidth = _Utils.default.getComponentAttribute(props.config, 'minWidth', '240px');
-  const maxWidth = _Utils.default.getComponentAttribute(props.config, 'maxWidth', null);
-  const width = _Utils.default.getComponentAttribute(props.config, 'width', '100%');
+  const width = !_Utils.default.isNull(props.config.attributes?.style?.width) ? props.config.attributes.style.width : "100%";
+  const maxWidth = !_Utils.default.isNull(props.config.attributes?.style?.maxWidth) ? props.config.attributes.style.maxWidth : null;
+  const minWidth = !_Utils.default.isNull(props.config.attributes?.style?.minWidth) ? props.config.attributes.style.minWidth : "240px";
   const defaultValue = _Utils.default.isNull(props.value) ? '' : props.value.id;
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(base.value) && !optionsLoaded) {

package/dist/components/form/TextField.js

@@ -15,10 +15,10 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const TextFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
   const [multiline] = _react.default.useState(props.multiline);
-  const width = props.config.attributes?.style?.width ? props.config.attributes.style.width : "100%";
-  const maxWidth = props.config.attributes?.style?.maxWidth ? props.config.attributes.style.maxWidth : null;
-  const minWidth = props.config.attributes?.style?.minWidth ? props.config.attributes.style.minWidth : "240px";
-  const height = props.config.attributes?.style?.height ? props.config.attributes.style.height : multiline ? '200px' : null;
+  const width = !_Utils.default.isNull(props.config.attributes?.style?.width) ? props.config.attributes.style.width : "100%";
+  const maxWidth = !_Utils.default.isNull(props.config.attributes?.style?.maxWidth) ? props.config.attributes.style.maxWidth : null;
+  const minWidth = !_Utils.default.isNull(props.config.attributes?.style?.minWidth) ? props.config.attributes.style.minWidth : "240px";
+  const height = !_Utils.default.isNull(props.config.attributes?.style?.height) ? props.config.attributes.style.height : multiline ? '200px' : null;
   const rows = height === null ? 4 : height.replace('px', '') / 20 - 1;
   const secondaryColor = (0, _reactRedux.useSelector)(state => state.dashboard.secondaryThemeColor);
   const ThemedTextField = (0, _styles.withStyles)({

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/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/package.json

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