@agilemotion/oui-react-js 1.8.76 → 1.8.78

package/dist/components/WordDocumentViewer.js

@@ -14,58 +14,14 @@ var _ej2Base = require("@syncfusion/ej2-base");
 var _Alert = _interopRequireDefault(require("react-bootstrap/Alert"));
 var _LottieIcon = _interopRequireDefault(require("./LottieIcon"));
 require("./WordDocumentViewer.css");
+var _useResizeObserver = require("./observers/useResizeObserver");
+var _useOnFullyVisible = require("./observers/useOnFullyVisible");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const KEY = exports.KEY = 'Ngo9BigBOggjHTQxAR8/V1JGaF5cXGpCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdlWX5ceHVRQ2BYUUdwX0NWYEs=';
 (0, _ej2Base.registerLicense)(KEY);
 const DOCSVC = exports.DOCSVC = "https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/";
 _ej2ReactDocumenteditor.DocumentEditorContainerComponent.Inject(_ej2ReactDocumenteditor.Toolbar);
-function useOnFullyVisible(callback) {
-  let {
-    threshold = 0.1
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const ref = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    const el = ref.current;
-    if (!el) return;
-    const nextPaint = () => new Promise(res => requestAnimationFrame(() => requestAnimationFrame(res)));
-    const waitImages = () => {
-      const imgs = Array.from(el.querySelectorAll('img'));
-      const pending = imgs.filter(img => !(img.complete && img.naturalWidth > 0));
-      if (!pending.length) return Promise.resolve();
-      return Promise.all(pending.map(img => new Promise(r => {
-        const done = () => {
-          img.removeEventListener('load', done);
-          img.removeEventListener('error', done);
-          r();
-        };
-        img.addEventListener('load', done, {
-          once: true
-        });
-        img.addEventListener('error', done, {
-          once: true
-        });
-      })));
-    };
-    const waitFonts = () => 'fonts' in document && document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
-    const io = new IntersectionObserver(async entries => {
-      const entry = entries[0];
-      const fullyVisible = entry.intersectionRatio >= threshold || entry.intersectionRatio >= 0.99;
-      if (fullyVisible) {
-        io.disconnect();
-        await waitImages();
-        await waitFonts();
-        await nextPaint();
-        callback(el);
-      }
-    }, {
-      threshold: [threshold, 0.99]
-    });
-    io.observe(el);
-    return () => io.disconnect();
-  }, [callback, threshold]);
-  return ref;
-}
 const LEVEL_FMT = ['%1.', '%1.%2.', '%1.%2.%3.'];
 function applyLevel(ed) {
   let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -73,6 +29,34 @@ function applyLevel(ed) {
   ed.selection.paragraphFormat.listLevelNumber = depth;
   ed.applyNumbering(LEVEL_FMT[depth], 'Arabic');
 }
+function useDynamicSyncfusionHeight(parentRef, containerRef) {
+  const [height, setHeight] = (0, _react.useState)(0);
+  const measure = (0, _react.useCallback)(() => {
+    if (!parentRef.current) return;
+    const rect = parentRef.current.getBoundingClientRect();
+    const newHeight = Math.floor(rect.height);
+    if (newHeight > 0 && newHeight !== height) {
+      console.log("MEASURE : ", newHeight);
+      setHeight(newHeight);
+    }
+  }, [parentRef, height]);
+
+  // 🔁 Resize observer
+  (0, _useResizeObserver.useResizeObserver)(parentRef, measure);
+
+  // ⚡ Syncfusion resize trigger
+  (0, _react.useEffect)(() => {
+    if (containerRef.current && height > 0) {
+      try {
+        containerRef.current.resize();
+        containerRef.current.documentEditor.resize();
+      } catch (e) {
+        // silent
+      }
+    }
+  }, [height, containerRef]);
+  return height;
+}
 const WordDocumentViewer = props => {
   const [container, setContainer] = _react.default.useState(null);
   const [items, setItems] = _react.default.useState(null);
@@ -85,12 +69,14 @@ const WordDocumentViewer = props => {
   const anchorEnd = (0, _react.useRef)(false);
   const deleteLockRef = (0, _react.useRef)(false);
   const loading = (0, _react.useRef)(true);
-  const ref = useOnFullyVisible(el => {
+  const parentRef = (0, _useOnFullyVisible.useOnFullyVisible)(el => {
     if (!reRendering) {
       setVisible(false);
       setReRendering(true);
     }
   });
+  const containerRef = (0, _react.useRef)(null);
+  const editorHeight = useDynamicSyncfusionHeight(parentRef, containerRef);
   function isPointInsideElement(x, y, el) {
     if (!el) return false;
     const rect = el.getBoundingClientRect();
@@ -557,7 +543,7 @@ const WordDocumentViewer = props => {
       height: '100%'
     },
     id: "parent-container",
-    ref: ref
+    ref: parentRef
   }, !visible && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       height: '100%',
@@ -588,9 +574,10 @@ const WordDocumentViewer = props => {
     }
   }, errorMessage))), visible && items && (_Utils.default.isNull(props.trackChanges) || props.trackChanges === true) && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
     id: "".concat(props.id, "-container"),
-    height: props.height || '1200px',
+    height: editorHeight > 0 ? "".concat(editorHeight, "px") : '1200px',
     ref: scope => {
       setContainer(scope);
+      containerRef.current = scope;
     },
     created: () => {
       if (container) {
@@ -609,9 +596,10 @@ const WordDocumentViewer = props => {
     enableToolbar: !props.readOnly || props.commentsOnly
   }), visible && items && props.trackChanges === false && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
     id: "".concat(props.id, "-container"),
-    height: props.height || '1200px',
+    height: editorHeight > 0 ? "".concat(editorHeight, "px") : '1200px',
     ref: scope => {
       setContainer(scope);
+      containerRef.current = scope;
     },
     created: () => {
       if (container) {

package/dist/components/dashboard/FoldingSideTabDashboard.js

@@ -82,6 +82,7 @@ function normalizeLogo(src) {
   return DATA_URL_PREFIX + s;
 }
 function FoldingSideTabDashboard(props) {
+  var _props$appLogoPath;
   const [open, setOpen] = React.useState(true);
   const [navDrawerOpen, setNavDrawerOpen] = React.useState(true);
   const [loading, setLoading] = React.useState(true);
@@ -407,7 +408,7 @@ function FoldingSideTabDashboard(props) {
     dashboardLauncher: () => {
       launchDashboard();
     },
-    appLogoPath: props.appLogoPath,
+    appLogoPath: (_props$appLogoPath = props.appLogoPath) !== null && _props$appLogoPath !== void 0 ? _props$appLogoPath : '',
     logo: {
       outterLink: '',
       text: '',
@@ -455,7 +456,7 @@ FoldingSideTabDashboard.propTypes = {
   showDashboardMenu: _propTypes.default.bool,
   logo: _propTypes.default.string,
   logoStyle: _propTypes.default.object,
-  appLogoPath: _propTypes.default.string,
+  appLogoPath: _propTypes.default.object,
   avatar: _propTypes.default.string,
   logoutCallBack: _propTypes.default.func
 };

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

@@ -130,8 +130,8 @@ function FoldingTabSidebar(props) {
   });
   const activeRoute = routeName => activeRouteMenu.id === routeName;
   const getLiClassName = prop => 'li-' + prop.level;
-  const fallbackIcon = prop => {
-    var _prop$name;
+  const fallbackIcon = (prop, iconNode) => {
+    var _prop$name, _prop$name$charAt, _prop$name2, _prop$name$charAt2, _prop$name3;
     if (prop.icon) return iconNode;
     if (prop.level === 0) {
       return /*#__PURE__*/_react.default.createElement(_MoreHoriz.default, {
@@ -139,8 +139,11 @@ function FoldingTabSidebar(props) {
       });
     }
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "mini-avatar"
-    }, ((_prop$name = prop.name) === null || _prop$name === void 0 ? void 0 : _prop$name.charAt(0)) + '...');
+      className: "mini-avatar",
+      style: {
+        fontSize: '10px'
+      }
+    }, ((_prop$name = prop.name) === null || _prop$name === void 0 ? void 0 : _prop$name.charAt(0)) + ((_prop$name$charAt = (_prop$name2 = prop.name) === null || _prop$name2 === void 0 ? void 0 : _prop$name2.charAt(1)) !== null && _prop$name$charAt !== void 0 ? _prop$name$charAt : '') + ((_prop$name$charAt2 = (_prop$name3 = prop.name) === null || _prop$name3 === void 0 ? void 0 : _prop$name3.charAt(2)) !== null && _prop$name$charAt2 !== void 0 ? _prop$name$charAt2 : '') + '...');
   };
 
   /* ----------------- createLinks with dynamic classes + theme colors ----------------- */
@@ -226,7 +229,7 @@ function FoldingTabSidebar(props) {
               marginTop: 0
             }
           }))
-        }) : !iconNode ? fallbackIcon(prop) : null);
+        }) : !iconNode ? fallbackIcon(prop, iconNode) : null);
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
           key: key
         }, shouldShowTooltip ? /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
@@ -246,6 +249,22 @@ function FoldingTabSidebar(props) {
           className: "nav"
         }, createLinks(prop.views))));
       }
+      let menuLink = /*#__PURE__*/_react.default.createElement(_MenuLink.default, {
+        config: prop.item,
+        clickCallback: prop.name === 'Dashboard' ? item => {
+          props.dashboardLauncher && props.dashboardLauncher();
+          setActiveRouteMenu(item);
+        } : item => setActiveRouteMenu(item),
+        autoClick: prop.name === 'My Work Items' || prop.item && prop.item.defaultItem,
+        viewId: "menuBar",
+        icon: prop.icon,
+        content: open ? null : fallbackIcon(prop, iconNode),
+        iconColor: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && isActive ? props.secondaryThemeColor : null,
+        name: prop.name,
+        id: prop.id,
+        level: prop.level,
+        tab: TAB
+      });
       const content = /*#__PURE__*/_react.default.createElement(_material.ListItemButton, {
         key: key,
         className: prop.name === 'Dashboard' || prop.name === 'My Work Items' ? isActive ? 'dashboard-link-active' : 'dashboard-link' : leafClassName,
@@ -267,22 +286,8 @@ function FoldingTabSidebar(props) {
           color: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && isActive ? secondaryThemeColor : 'inherit'
         }
       }, iconNode), open ? /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
-        primary: /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_MenuLink.default, {
-          config: prop.item,
-          clickCallback: prop.name === 'Dashboard' ? item => {
-            props.dashboardLauncher && props.dashboardLauncher();
-            setActiveRouteMenu(item);
-          } : item => setActiveRouteMenu(item),
-          autoClick: prop.name === 'My Work Items' || prop.item && prop.item.defaultItem,
-          viewId: "menuBar",
-          icon: prop.icon,
-          iconColor: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && isActive ? props.secondaryThemeColor : null,
-          name: prop.name,
-          id: prop.id,
-          level: prop.level,
-          tab: TAB
-        }))
-      }) : !iconNode ? fallbackIcon(prop) : null);
+        primary: /*#__PURE__*/_react.default.createElement("span", null, menuLink)
+      }) : !iconNode ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, menuLink) : null);
 
       // leaf
       return !open ? /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
@@ -403,7 +408,7 @@ FoldingTabSidebar.propTypes = {
     text: _propTypes.default.string.isRequired
   })]),
   heading: _propTypes.default.string,
-  appLogoPath: _propTypes.default.string,
+  appLogoPath: _propTypes.default.object,
   closeSidebar: _propTypes.default.func,
   dashboardLauncher: _propTypes.default.func,
   logoStyle: _propTypes.default.object,

package/dist/components/form/AddressSearch.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-const AddressSearchWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const AddressSearchWrapper = /*#__PURE__*/_react.default.memo(props => {
   const base = props.base;
   const getAddressProp = (components, id) => {
     for (const component of components) {
@@ -75,8 +75,8 @@ const AddressSearchWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_reac
       }));
     }
   });
-}));
-const AddressSearch = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+});
+const AddressSearch = /*#__PURE__*/_react.default.memo(props => {
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,
     valueParser: (value, inbound) => {
@@ -90,5 +90,5 @@ const AddressSearch = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defau
   }), base => /*#__PURE__*/_react.default.createElement(AddressSearchWrapper, _extends({
     base: base
   }, props)));
-}));
+});
 var _default = exports.default = AddressSearch;

package/dist/components/form/Checkbox.js

@@ -11,7 +11,7 @@ var _BaseField = require("./BaseField");
 var _Utils = _interopRequireDefault(require("../../Utils"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const CheckboxWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const CheckboxWrapper = /*#__PURE__*/_react.default.memo(props => {
   const base = props.base;
   return /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
     style: {
@@ -32,12 +32,12 @@ const CheckboxWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.def
     }),
     label: props.config.attributes['label']
   });
-}));
-const Checkbox = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+});
+const Checkbox = /*#__PURE__*/_react.default.memo(props => {
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle
   }), base => /*#__PURE__*/_react.default.createElement(CheckboxWrapper, _extends({
     base: base
   }, props)));
-}));
+});
 var _default = exports.default = Checkbox;

package/dist/components/form/CurrencyField.js

@@ -13,7 +13,7 @@ var _reactRedux = require("react-redux");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const CurrencyFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const CurrencyFieldWrapper = /*#__PURE__*/_react.default.memo(props => {
   var _props$config$attribu, _props$config$attribu2, _props$config$attribu3, _props$config$attribu4, _props$config$attribu5, _props$config$attribu6;
   const base = props.base;
   const width = !_Utils.default.isNull((_props$config$attribu = props.config.attributes) === null || _props$config$attribu === void 0 || (_props$config$attribu = _props$config$attribu.style) === null || _props$config$attribu === void 0 ? void 0 : _props$config$attribu.width) ? props.config.attributes.style.width : "100%";
@@ -86,8 +86,8 @@ const CurrencyFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_reac
     onChange: handleInputChange,
     onBlur: handleBlur
   });
-}));
-const CurrencyField = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+});
+const CurrencyField = /*#__PURE__*/_react.default.memo(props => {
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,
     valueParser: (value, inbound) => {
@@ -104,5 +104,5 @@ const CurrencyField = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defau
   }), base => /*#__PURE__*/_react.default.createElement(CurrencyFieldWrapper, _extends({
     base: base
   }, props)));
-}));
+});
 var _default = exports.default = CurrencyField;

package/dist/components/form/FieldSet.js

@@ -37,7 +37,7 @@ var _IconField = _interopRequireDefault(require("./IconField"));
 var _DocumentTemplateDesigner = _interopRequireDefault(require("../DocumentTemplateDesigner"));
 var _DynamicJS = _interopRequireDefault(require("../../DynamicJS"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const FieldSet = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const FieldSet = /*#__PURE__*/_react.default.memo(props => {
   const [fieldGrid] = _react.default.useState(_Utils.default.getFieldGrid(props.config.attributes, props.config.fields));
   const [componentHandles] = _react.default.useState({});
   const [visible, setVisible] = _react.default.useState(false);
@@ -64,14 +64,14 @@ const FieldSet = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
   }, []);
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(props.disabled)) {
-      setDisabled(props.disabled);
+      updateComponentDisabledState(props.disabled);
     }
   }, [props.disabled]);
   function fireChangeEvent() {
     let event = new _Event.default(props.handle, props.viewId);
     _Observable.default.fireEvent(_EventType.default.VALUE_CHANGE, event);
   }
-  function setDisabled(disabled) {
+  function updateComponentDisabledState(disabled) {
     let properties = Object.getOwnPropertyNames(componentHandles);
     for (const property of properties) {
       let componentHandle = componentHandles[property];
@@ -389,7 +389,7 @@ const FieldSet = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
         return fieldNames;
       },
       set disabled(disabled) {
-        setDisabled(disabled);
+        updateComponentDisabledState(disabled);
       },
       clear() {
         let properties = Object.getOwnPropertyNames(componentHandles);
@@ -463,7 +463,7 @@ const FieldSet = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
           setVisible(true);
         }
         if (!_Utils.default.isNull(props.config) && !_Utils.default.isNull(props.config.disabled)) {
-          setDisabled(_Utils.default.evaluateBooleanExpression(props.config.disabled, props.config.id));
+          updateComponentDisabledState(_Utils.default.evaluateBooleanExpression(props.config.disabled, props.config.id));
         }
         refreshComponents();
       }
@@ -520,5 +520,5 @@ const FieldSet = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
   }, !_Utils.default.isNull(props.config.attributes) && !_Utils.default.isNull(props.config.attributes['label']) ? /*#__PURE__*/_react.default.createElement("div", {
     className: 'fieldSetTitle'
   }, props.config.attributes['label']) : null, !_Utils.default.isNull(fieldGrid) ? render(props.config) : null);
-}));
+});
 var _default = exports.default = FieldSet;

package/dist/components/form/Form.js

@@ -43,7 +43,7 @@ const useStyles = (0, _styles.makeStyles)(theme => ({
   },
   root: {}
 }));
-const Form = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Form = /*#__PURE__*/_react.default.memo(props => {
   const values = _react.default.useRef(!_Utils.default.isNull(props.values) ? props.values : {});
   const [masterValues, setMasterValues] = _react.default.useState(null);
   const [config, setConfig] = _react.default.useState(_Utils.default.parseConfig(props.config, props.viewId));
@@ -635,7 +635,6 @@ const Form = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwar
         config: section,
         disabled: props.disabled,
         handle: createSectionHandle(section),
-        ref: /*#__PURE__*/_react.default.createRef(),
         form: () => {
           return !_Utils.default.isNull(props.handle.api) ? props.handle.api : api();
         },
@@ -654,5 +653,5 @@ const Form = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwar
       maxHeight: '70vh'
     }, props.config) : null
   }, !_Utils.default.isNull(props.config.id) ? render(props.config) : /*#__PURE__*/_react.default.createElement("div", null, "ERROR: A form must have an ID"));
-}));
+});
 var _default = exports.default = Form;

package/dist/components/form/GridField.js

@@ -12,41 +12,35 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
 var _Toolbar = _interopRequireDefault(require("../Toolbar"));
-var _Observable = _interopRequireDefault(require("../../event/Observable"));
 var _DynamicJS = _interopRequireDefault(require("../../DynamicJS"));
 var _FormHelperText = _interopRequireDefault(require("@mui/material/FormHelperText"));
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function getEditorType(columnName, gridConfig) {
-  for (const column of gridConfig.columns) {
-    if ((column.id === columnName || column.dataBinding === columnName) && !_Utils.default.isNull(column.editor)) {
-      return column.editor.fieldType;
-    }
-  }
-  return null;
-}
 function createRecord(row, gridConfig, inbound) {
   let record = {};
   for (const column of gridConfig.columns) {
     let property = !_Utils.default.isNull(column.dataBinding) ? column.dataBinding : column.id;
     let val = _Utils.default.readNestedProperty(row, property);
-    _Utils.default.updateNestedProperty(record, property, val);
+    _Utils.default.updateNestedProperty(record, property, val !== null && val !== void 0 ? val : null);
   }
 
   //record.id = row.id >= 0 ? row.id : null;
   record.id = row.id;
   return record;
 }
-const GridFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const GridFieldWrapper = /*#__PURE__*/_react.default.memo(props => {
   const base = props.base;
   const newRowIdCounter = _react.default.useRef(-1);
   const [selection, setSelection] = _react.default.useState([]);
   const [label, setLabel] = _react.default.useState();
-  const [rows, setRows] = _react.default.useState([]);
+  const loaded = _react.default.useRef(false);
+  const [rowModel, setRowModel] = _react.default.useState([]);
+  const [latestAddedRow, setLatestAddedRow] = _react.default.useState([]);
+  const hasErrors = _react.default.useRef(false);
   const [crudToolstripWidth, setCrudToolstripWidth] = _react.default.useState(null);
+  const editing = _react.default.useRef(false);
   const [hasButtons] = _react.default.useState(_Utils.default.isNull(props.config.attributes) || _Utils.default.isNull(props.config.attributes.addDisabled) || _Utils.default.evaluateBooleanExpression(props.config.attributes.addDisabled, props.config.id) === false || _Utils.default.isNull(props.config.attributes.removeDisabled) || _Utils.default.evaluateBooleanExpression(props.config.attributes.removeDisabled, props.config.id) === false);
-  const initialValueSet = _react.default.useRef(false);
   _react.default.useEffect(() => {
     var _props$config$attribu, _props$config$attribu2;
     let numCrudButtons = 0;
@@ -67,26 +61,16 @@ const GridFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
       setLabel(_Utils.default.getComponentAttribute(props.config, 'label', ''));
     }
   }, []);
-  function setNewRows(values) {
-    if (Array.isArray(values)) {
-      let newRows = [];
-      for (const value of values) {
-        if (value) {
-          newRows.push(value);
-        }
-      }
-      setRows(newRows);
-    }
-  }
   _react.default.useEffect(() => {
-    if (!_Utils.default.isNull(base.value) && !initialValueSet.current) {
-      setNewRows(!_Utils.default.isNull(base.value) ? base.value : []);
+    if (editing.current) {
+      editing.current = false;
+      return;
     }
+    setRowModel(base.value);
   }, [base.value]);
   _react.default.useEffect(() => {
-    initialValueSet.current = false;
-    setNewRows(!_Utils.default.isNull(base.valueObject[base.valueProperty]) ? base.valueObject[base.valueProperty] : []);
-  }, [base.valueObject[base.valueProperty]]);
+    props.gridHandle.api.select([latestAddedRow.id]);
+  }, [latestAddedRow]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "MuiFormControl-root MuiTextField-root MuiFormControl-marginDense",
     style: _Utils.default.mergeStyles({}, props.config)
@@ -124,9 +108,11 @@ const GridFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
     "aria-controls": "menu-list-grow",
     "aria-haspopup": "true",
     onClick: () => {
-      props.gridHandle.api.addRows([{
+      let row = {
         id: newRowIdCounter.current--
-      }]);
+      };
+      setRowModel(props.gridHandle.api.addRows([row]));
+      setLatestAddedRow(row);
     }
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'ADD'
@@ -146,31 +132,27 @@ const GridFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
   }, /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
     config: props.config.toolstrip,
     handle: props.toolstripHandle,
-    ref: /*#__PURE__*/_react.default.createRef(),
     viewId: props.viewId
   })) : null)) : null, /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {
     config: props.config.grid,
     handle: props.gridHandle,
-    ref: /*#__PURE__*/_react.default.createRef(),
     viewId: props.viewId,
+    loaded: loaded,
     disabled: base.disabled,
-    rows: rows,
+    rows: rowModel,
     formValues: props.values,
-    valueChangeHandler: newRows => {
-      let value = null;
-      if (!_Utils.default.isNull(newRows)) {
-        value = [];
-        for (const row of newRows) {
-          let record = createRecord(row, props.config.grid, false);
-          value.push(record);
-        }
+    valueChangeHandler: (newRows, hasRowErrors) => {
+      if (!_Utils.default.isNull(newRows) && !hasRowErrors) {
+        editing.current = true;
+        let value = newRows.map(row => createRecord(row, props.config.grid, false));
+        base.handleValueChange(value);
+      } else {
+        base.handleValueChange(null);
       }
-      base.handleValueChange(value);
     },
     pagination: false,
     onSelectionChange: selection => {
       setSelection(selection);
-      initialValueSet.current = true;
     },
     filterWrapperClass: 'transferListFilterWrapper',
     hasBorder: false
@@ -180,8 +162,8 @@ const GridFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
       color: "rgb(244, 67, 54)"
     }
   }, base.errorMessage)));
-}));
-const GridField = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+});
+const GridField = /*#__PURE__*/_react.default.memo(props => {
   const [gridHandle] = _react.default.useState({});
   const [toolHandle] = _react.default.useState(!_Utils.default.isNull(props.config.toolstrip) ? {} : null);
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
@@ -231,5 +213,5 @@ const GridField = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
     toolstripHandle: toolHandle,
     base: base
   }, props)));
-}));
+});
 var _default = exports.default = GridField;

package/dist/components/form/IconField.js

@@ -10,7 +10,7 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 var _Utils = _interopRequireDefault(require("../../Utils"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const IconWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const IconWrapper = /*#__PURE__*/_react.default.memo(props => {
   var _props$config$attribu;
   const base = props.base;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ((_props$config$attribu = props.config.attributes) === null || _props$config$attribu === void 0 ? void 0 : _props$config$attribu.label) && /*#__PURE__*/_react.default.createElement("div", {
@@ -19,12 +19,12 @@ const IconWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default
     id: props.config.iconId,
     color: props.config.iconColor
   })));
-}));
-const IconField = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+});
+const IconField = /*#__PURE__*/_react.default.memo(props => {
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle
   }), base => /*#__PURE__*/_react.default.createElement(IconWrapper, _extends({
     base: base
   }, props)));
-}));
+});
 var _default = exports.default = IconField;