@agilemotion/oui-react-js 1.8.4 → 1.8.5

package/dist/components/TableCellContent.js

@@ -9,22 +9,22 @@ var _Utils = _interopRequireDefault(require("../Utils"));
 var _Error = _interopRequireDefault(require("@mui/icons-material/Error"));
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 var _Form = _interopRequireDefault(require("./form/Form"));
+var _DynamicJS = _interopRequireDefault(require("../DynamicJS"));
 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 formatter = new Intl.NumberFormat("en-ZA", {
+    style: "currency",
+    currency: "ZAR",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
   const validate = value => {
     if (props.editor) {
       let validator = props.validator;
-      let errors = props.row.errors;
-      if (!_Utils.default.isNull(errors)) {
-        errors = errors.filter(error => {
-          return error.column !== props.dataBinding;
-        });
-        props.row.errors = errors;
-      }
       if (!_Utils.default.isNull(validator)) {
         let required = false;
         if (!_Utils.default.isNull(validator.nullable)) {
@@ -32,25 +32,27 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
           required = !_Utils.default.evaluateBooleanExpression(nullableExpression, props.dataBinding);
         }
         let formValue = {};
-        formValue[props.editor.id] = value;
+        formValue[props.editor.dataBinding || props.editor.id] = value;
         let validation = _Utils.default.validateField(props.dataBinding, required, formValue, value, validator);
         if (!validation.valid) {
           let error = {};
           error.column = props.dataBinding;
           error.message = validation.message;
-          if (_Utils.default.isNull(errors)) {
-            errors = [];
-            props.row.errors = errors;
-          }
-          props.row.errors.push(error);
           return error;
         }
       }
     }
     return null;
   };
+  function updateErrors(error) {
+    if (error) {
+      props.onRowError(props.dataBinding, error, props.dataBinding);
+    } else {
+      props.onRowError(props.dataBinding, null, props.dataBinding);
+    }
+  }
   const valueChangeHandler = value => {
-    validate(value);
+    updateErrors(validate(value));
     props.valueChangeHandler(props.row.id, props.dataBinding, value);
   };
   _react.default.useEffect(() => {
@@ -62,7 +64,8 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
   }, [ref.current]);
   _react.default.useEffect(() => {
     if (props.editor && props.row) {
-      editorValue.current = props.row[props.dataBinding];
+      let value = _Utils.default.readNestedProperty(props.row, props.dataBinding);
+      editorValue.current = value;
     }
   }, [props.row, props.editor]);
   _react.default.useEffect(() => {
@@ -85,7 +88,7 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
       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];
+      let value = _Utils.default.readNestedProperty(props.row, props.dataBinding);
       valueChangeHandler(_Utils.default.isNull(value) ? null : value);
     }
   }, [props.editor]);
@@ -94,7 +97,7 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
     let contentValue;
     let tokens = props.dataBinding.split('.');
     if (tokens.length === 1) {
-      contentValue = props.row[props.dataBinding];
+      contentValue = _Utils.default.readNestedProperty(props.row, props.dataBinding);
     } else {
       let parent = props.row;
       for (let i = 0; i < tokens.length - 1; i++) {
@@ -107,8 +110,8 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
         contentValue = parent[tokens[tokens.length - 1]];
       }
     }
-    if (props.columnConfig.cellFormat === 'MONEY' || props.columnConfig.cellFormat === 'NUMBER') {
-      return _Utils.default.isNull(contentValue) ? '' : contentValue.toFixed(2);
+    if (props.columnConfig.cellFormat === 'CURRENCY' || props.columnConfig.cellFormat === 'NUMBER') {
+      return props.cellFormatter ? _DynamicJS.default.executeScriptFunction(props.cellFormatter, contentValue) : _Utils.default.isNull(contentValue) ? '' : props.columnConfig.cellFormat === 'CURRENCY' ? formatter.format(contentValue) : contentValue.toFixed(2);
     } else {
       if (_Utils.default.isNull(contentValue)) {
         displayValue = '';
@@ -128,6 +131,9 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
           displayValue = contentValue;
         }
       }
+      if (props.cellFormatter) {
+        displayValue = _DynamicJS.default.executeScriptFunction(props.cellFormatter, contentValue);
+      }
       return displayValue;
     }
   };
@@ -139,7 +145,7 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
         //props.formValues[props.editor.id] = props.row[props.dataBinding];
 
         let formValue = {};
-        formValue[props.editor.id] = editorValue.current;
+        formValue[props.editor.dataBinding || props.editor.id] = editorValue.current;
         let formConfig = {
           type: "form",
           id: props.editor.id + "_form",
@@ -162,7 +168,7 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
           handle: props.handle,
           values: formValue,
           valueChangeHandler: value => {
-            editorValue.current = value[editor.id];
+            editorValue.current = value[editor.dataBinding || editor.id];
             valueChangeHandler(editorValue.current);
           },
           viewId: props.viewId
@@ -173,7 +179,9 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
     }
   };
   const render = () => {
-    let error = validate(props.row[props.dataBinding]);
+    let value = _Utils.default.readNestedProperty(props.row, props.dataBinding);
+    let error = validate(value);
+    updateErrors(error);
     let hasError = !_Utils.default.isNull(error);
     return /*#__PURE__*/_react.default.createElement("table", {
       className: 'tableCellContentContainer',
@@ -200,10 +208,14 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
     }, doRender()))));
   };
   const api = {
+    set value(val) {
+      alert('Mbulu ya nga');
+    },
     refresh: () => {
       setRefresher(!refresher);
       if (_Utils.default.isNull(props.editor)) {
-        valueChangeHandler(props.row[props.dataBinding]);
+        let value = _Utils.default.readNestedProperty(props.row, props.dataBinding);
+        valueChangeHandler(value);
       }
     }
   };

package/dist/components/Toolbar.js

@@ -66,6 +66,7 @@ const Toolbar = props => {
   const [buttonVisibility, setButtonVisibility] = (0, _react.useState)({});
   const [allButtonsVisible, setAllButtonsVisible] = (0, _react.useState)(false);
   const [allItems] = (0, _react.useState)([]);
+  const [visible, setVisible] = _react.default.useState(true);
   const [open, setOpen] = _react.default.useState(false);
   const anchorRef = _react.default.useRef(null);
   const sectionContainerRef = (0, _react.useRef)();
@@ -227,6 +228,14 @@ const Toolbar = props => {
           children.push(itemHandle);
         }
         return children;
+      },
+      set visible(visible) {
+        setVisible(visible);
+      },
+      refresh() {
+        let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+        setVisible(_Utils.default.evaluateBooleanExpression(parsedConfig.visible, parsedConfig.id, true));
+        let requiredNewVal = !_Utils.default.isNull(parsedConfig.validator) ? !_Utils.default.evaluateBooleanExpression(parsedConfig.validator.nullable, parsedConfig.id, true) || _Utils.default.evaluateBooleanExpression(parsedConfig.validator.required, parsedConfig.id, false) : false;
       }
     };
   };
@@ -315,7 +324,7 @@ const Toolbar = props => {
       })))));
     }));
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return visible && /*#__PURE__*/_react.default.createElement("div", {
     id: props.config.id,
     style: _Utils.default.mergeStyles({
       borderBottom: '1px solid #e2e2e2',

package/dist/components/form/BaseField.js

@@ -28,6 +28,7 @@ const BaseField = props => {
   const [visible, setVisible] = _react.default.useState(false);
   const [required, setRequired] = _react.default.useState(null);
   const validateOnChange = _react.default.useRef();
+  const ref = _react.default.useRef(null);
   const valid = _react.default.useRef(false);
   _react.default.useEffect(() => {
     let value = valueObject[valueProperty];
@@ -48,31 +49,34 @@ const BaseField = props => {
   // Change the required value and re-validate field if necessary
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(config) && validateOnChange.current === true) {
-      props.form().validateParent(config.id, doValidation(props.values, value));
+      props.form().validateParent(config.dataBinding || config.id, doValidation(props.values, value));
     }
     validateOnChange.current = null;
   }, [required]);
   const doValidation = (values, currentValue) => {
-    let path = props.form().getValuePath(config.id);
-    let result = {
-      valid: true
-    };
-    if (!_Utils.default.isNull(config.validator) && !_Utils.default.isNull(config.validator.script)) {
-      result = _DynamicJS.default.executeScriptObject(`${config.id}Validator`, config.validator.script);
-      if (!result.valid) {
-        result.message = result.message ? result.message : config.validator.message;
+    if (config) {
+      let path = props.form().getValuePath(config.dataBinding || config.id);
+      let result = {
+        valid: true
+      };
+      if (!_Utils.default.isNull(config.validator) && !_Utils.default.isNull(config.validator.script)) {
+        result = _DynamicJS.default.executeScriptObject(`${config.id}Validator`, config.validator.script);
+        if (!result.valid) {
+          result.message = result.message ? result.message : config.validator.message;
+        }
       }
+      if (result.valid) {
+        result = _Utils.default.validateField(path.valueProperty, required, path.valueObject, currentValue, config.validator);
+      }
+      setErrorMessage(_ApplicationManager.default.isFormMarkersEnabled() || result.forceMarker ? result.message : '');
+      setHasError(!result.valid && (_ApplicationManager.default.isFormMarkersEnabled() || result.forceMarker));
+      valid.current = result.valid && (_ApplicationManager.default.isFormMarkersEnabled() || result.forceMarker);
+      if (_ApplicationManager.default.isFormMarkersEnabled()) {
+        props.form().setFieldError(config.id, typeof result.message === 'undefined' ? null : result.message);
+      }
+      return result.valid;
     }
-    if (result.valid) {
-      result = _Utils.default.validateField(path.valueProperty, required, path.valueObject, currentValue, config.validator);
-    }
-    setErrorMessage(_ApplicationManager.default.isFormMarkersEnabled() ? result.message : '');
-    setHasError(!result.valid && _ApplicationManager.default.isFormMarkersEnabled());
-    valid.current = result.valid && _ApplicationManager.default.isFormMarkersEnabled();
-    if (_ApplicationManager.default.isFormMarkersEnabled()) {
-      props.form().setFieldError(config.id, typeof result.message === 'undefined' ? null : result.message);
-    }
-    return result.valid;
+    return false;
   };
   _react.default.useEffect(() => {
     props.handle.api = api();
@@ -91,7 +95,7 @@ const BaseField = props => {
   }, []);
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(props.values) && !_Utils.default.isNull(config)) {
-      let path = props.form().getValuePath(config.id, props.values);
+      let path = props.form().getValuePath(config.dataBinding || config.id, props.values);
       if (!_Utils.default.isNull(path.valueObject)) {
         setValueObject(path.valueObject);
         setValueProperty(path.valueProperty);
@@ -103,14 +107,14 @@ const BaseField = props => {
           valueObject[valueProperty] = val;
           setValue(val);
           valueRef.current = val;
-          props.form().handleChange(config.id, val);
+          props.form().handleChange(config.dataBinding || config.id, val);
         }
       }
     }
   }, [props.values, config]);
   _react.default.useEffect(() => {
     if (loadingRef.current === true && !_Utils.default.isNull(config)) {
-      let field = props.form().addField(config.id, props.handle, props.parentId, props.bindValueToForm);
+      let field = props.form().addField(config.dataBinding || config.id, props.handle, props.parentId, props.bindValueToForm);
       if (!_Utils.default.isNull(field) && !_Utils.default.isNull(field.error)) {
         if (field.error.length > 0) {
           setHasError(true);
@@ -123,7 +127,7 @@ const BaseField = props => {
     return () => {
       if (!_Utils.default.isNull(props.form())) {
         _Observable.default.clearComponentEventListeners(props.handle);
-        props.form().removeField(props.config.id);
+        props.form().removeField(props.config.dataBinding || props.config.id);
       }
     };
   }, []);
@@ -152,8 +156,9 @@ const BaseField = props => {
       let id = props.config.dataBinding ? props.config.dataBinding : props.config.id;
       _ApplicationManager.default.enableFormMarkers(true);
       if (props.config.fieldType === 'SELECT') {
-        setValue(props.form().handleSelectItemChange(id, selectOptions, newValue));
-        valueRef.current = props.form().handleSelectItemChange(id, selectOptions, newValue);
+        let selectItemChange = props.form().handleSelectItemChange(id, selectOptions, newValue);
+        setValue(selectItemChange);
+        valueRef.current = selectItemChange;
         for (const selectOption of selectOptions) {
           if (selectOption.id === newValue) {
             newValue = selectOption;
@@ -175,6 +180,9 @@ const BaseField = props => {
   const api = () => {
     return {
       validate: (values, currentValue) => {
+        if (props.config.id === 'needAnalysisItems') {
+          console.log('\n\n\n==============Validate fireeee');
+        }
         return doValidation(values, currentValue);
       },
       parseValue: (value, inbound) => {
@@ -189,6 +197,9 @@ const BaseField = props => {
       get id() {
         return props.config.id;
       },
+      get rows() {
+        return props.rowsHandler ? props.rowsHandler() : null;
+      },
       getValidationGroup: () => {
         return !_Utils.default.isNull(config.validator) ? config.validator.group : null;
       },
@@ -198,6 +209,14 @@ const BaseField = props => {
           props.clearHandler();
         }
       },
+      scrollTo: () => {
+        if (ref.current) {
+          ref.current.scrollIntoView({
+            behavior: "smooth",
+            block: "center"
+          });
+        }
+      },
       get value() {
         if (!_Utils.default.isNull(valueObject) && !_Utils.default.isNull(valueProperty) && !_Utils.default.isNull(valueObject[valueProperty])) {
           return !_Utils.default.isNull(props.valueParser) ? props.valueParser(valueObject[valueProperty], false) : valueObject[valueProperty];
@@ -229,13 +248,16 @@ const BaseField = props => {
         let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
         setVisible(_Utils.default.evaluateBooleanExpression(parsedConfig.visible, parsedConfig.id, true));
         setDisabled(_Utils.default.evaluateBooleanExpression(parsedConfig.disabled, parsedConfig.id));
-        let requiredNewVal = !_Utils.default.isNull(parsedConfig.validator) ? !_Utils.default.evaluateBooleanExpression(parsedConfig.validator.nullable, parsedConfig.id, true) : false;
+        let requiredNewVal = !_Utils.default.isNull(parsedConfig.validator) ? !_Utils.default.evaluateBooleanExpression(parsedConfig.validator.nullable, parsedConfig.id, true) || _Utils.default.evaluateBooleanExpression(parsedConfig.validator.required, parsedConfig.id, false) : false;
         validateOnChange.current = required !== null && required !== requiredNewVal && loadingRef.current === false;
         setRequired(requiredNewVal);
       },
       get required() {
         return required;
       },
+      set required(isRequired) {
+        setRequired(isRequired);
+      },
       setFieldRequired(newVal) {
         let validate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
         validateOnChange.current = validate;
@@ -255,11 +277,12 @@ const BaseField = props => {
     };
   };
   return config ? /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
     className: "col-*-*",
     key: config.id,
     style: {
       textAlign: 'left',
-      marginLeft: !_Utils.default.isNull(props.config.attributes?.style?.marginLeft) ? props.config.attributes?.style?.marginLeft : '15px',
+      marginLeft: !_Utils.default.isNull(props.config.attributes?.style?.marginLeft) ? props.config.attributes?.style?.marginLeft : props.config.index === 0 ? 0 : '8px',
       display: !visible || _Utils.default.getComponentAttribute(config, 'hidden', false) === true ? 'none' : 'block'
     }
   }, /*#__PURE__*/_react.default.createElement("span", null, props.children({

package/dist/components/form/Checkbox.js

@@ -14,6 +14,9 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const CheckboxWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
   return /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
+    style: {
+      marginBottom: 0
+    },
     control: /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
       checked: base.value || false,
       style: _Utils.default.mergeStyles({}, props.config),

package/dist/components/form/CurrencyField.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
+var _BaseField = require("./BaseField");
+var _Utils = _interopRequireDefault(require("../../Utils"));
+var _reactRedux = require("react-redux");
+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; }
+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 base = props.base;
+  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 : null;
+  const currency = !_Utils.default.isNull(props.config.attributes?.currency) ? props.config.attributes.currency : "ZAR";
+  const currencySymbol = !_Utils.default.isNull(props.config.attributes?.currencySymbol) ? props.config.attributes.currencySymbol : "R";
+  const textRef = (0, _react.useRef)(null);
+  const [displayValue, setDisplayValue] = (0, _react.useState)("");
+  const formatter = new Intl.NumberFormat("en-ZA", {
+    style: "currency",
+    currency: currency,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+  function formatNumberWithCommas(input) {
+    return input.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  }
+  (0, _react.useEffect)(() => {
+    if (base.value === null || base.value === undefined) {
+      setDisplayValue("");
+    } else {
+      setDisplayValue(currencySymbol + formatNumberWithCommas(base.value));
+    }
+  }, [base.value]);
+  const handleInputChange = event => {
+    const raw = event.target.value.replace(/[^\d.-]/g, "");
+    const parts = raw.split('.');
+    if (parts.length === 2 && parts[1].length > 2 || _Utils.default.isNull(raw.match("^\\d+(\\.\\d{0,2})?$"))) {
+      event.preventDefault();
+    } else {
+      const numeric = parseFloat(raw);
+      if (!isNaN(numeric)) {
+        base.handleValueChange(numeric);
+      } else {
+        base.handleValueChange(0);
+      }
+      console.log("TARGET VAL : " + event.target.value);
+      setDisplayValue(event.target.value);
+    }
+  };
+  const handleBlur = () => {
+    if (base.value) {
+      setDisplayValue(formatter.format(base.value));
+    } else {
+      setDisplayValue("");
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    id: props.id,
+    type: props.type,
+    required: base.required,
+    inputRef: textRef,
+    label: !_Utils.default.isNull(props.config.attributes) ? props.config.attributes['label'] : null,
+    onKeyUp: props.keyHandler,
+    error: base.hasError,
+    helperText: base.errorMessage,
+    margin: "dense",
+    disabled: base.disabled,
+    size: "small",
+    style: {
+      minWidth: minWidth,
+      width: width,
+      maxWidth: maxWidth,
+      height: height,
+      color: 'secondary'
+    },
+    variant: "outlined",
+    value: displayValue,
+    onChange: handleInputChange,
+    onBlur: handleBlur
+  });
+}));
+const CurrencyField = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
+    handle: props.handle,
+    valueParser: (value, inbound) => {
+      if (value === null || value === undefined || value === '') {
+        return null;
+      }
+      if (inbound) {
+        const numValue = parseFloat(value);
+        return isNaN(numValue) ? null : numValue;
+      } else {
+        return value;
+      }
+    }
+  }), base => /*#__PURE__*/_react.default.createElement(CurrencyFieldWrapper, _extends({
+    base: base
+  }, props)));
+}));
+var _default = exports.default = CurrencyField;

package/dist/components/form/DatePicker.js

@@ -76,6 +76,7 @@ const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/
   }, /*#__PURE__*/_react.default.createElement(_demo.DemoContainer, {
     components: ['DatePicker', 'DatePicker']
   }, /*#__PURE__*/_react.default.createElement(_xDatePickers.DatePicker, {
+    disabled: base.disabled,
     label: props.config.attributes['label'],
     value: base.value ? (0, _dayjs.default)(base.value) : null,
     className: props.className,

package/dist/components/form/FieldSet.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _Utils = _interopRequireDefault(require("../../Utils"));
 var _Observable = _interopRequireDefault(require("../../event/Observable"));
 var _TextField = _interopRequireDefault(require("./TextField"));
+var _CurrencyField = _interopRequireDefault(require("./CurrencyField"));
 var _AddressSearch = _interopRequireDefault(require("./AddressSearch"));
 var _LookupField = _interopRequireDefault(require("./LookupField"));
 var _SelectItem = _interopRequireDefault(require("./SelectItem"));
@@ -80,7 +81,9 @@ const FieldSet = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
     let properties = Object.getOwnPropertyNames(componentHandles);
     for (const property of properties) {
       let componentHandle = componentHandles[property];
-      componentHandle.api.refresh();
+      if (componentHandle.api) {
+        componentHandle.api.refresh();
+      }
     }
   }
   function renderComponent(component) {
@@ -119,6 +122,17 @@ const FieldSet = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
           values: props.values,
           viewId: props.viewId
         });
+      case 'CURRENCY':
+        return /*#__PURE__*/_react.default.createElement(_CurrencyField.default, {
+          keyHandler: props.keyHandler,
+          config: component,
+          valueChangeHandler: () => fireChangeEvent(),
+          form: props.form,
+          parentId: props.parentId,
+          handle: createComponentHandle(component),
+          values: props.values,
+          viewId: props.viewId
+        });
       case 'PASSWORD':
         return /*#__PURE__*/_react.default.createElement(_TextField.default, {
           keyHandler: props.keyHandler,
@@ -484,12 +498,13 @@ const FieldSet = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
           minWidth: '320px',
           width: width + '%'
         };
+        field.index = index;
         let style = field.attributes?.containerStyle ? _Utils.default.mergeObjects(field.attributes?.containerStyle, containerStyle) : containerStyle;
         return /*#__PURE__*/_react.default.createElement("div", {
-          key: index,
+          key: (i + 1) * index,
           className: "col-*-*",
           style: style
-        }, renderComponent(field, index));
+        }, renderComponent(field));
       }));
     }));
   }

package/dist/components/form/Form.js

@@ -131,12 +131,16 @@ const Form = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwar
           if (_Utils.default.isNull(map.id)) {
             map.id = values.current.id;
           }
+          let firstInvalidField = null;
           for (const field of fields) {
             if (field.bindValueToForm === false) {
               continue;
             }
             let fieldValid = field.handle.api.validate(values.current, null);
-            if (fieldValid === false) {
+            if (fieldValid === false || _Utils.default.isNull(fieldValid)) {
+              if (firstInvalidField == null) {
+                firstInvalidField = field;
+              }
               doValidateParent(field, !fieldValid, false);
               valid = false;
             } else if (valid) {
@@ -145,6 +149,9 @@ const Form = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwar
               path.valueObject[path.valueProperty] = field.handle.api.parseValue(path.valueObject[path.valueProperty], false);
             }
           }
+          if (firstInvalidField) {
+            firstInvalidField.handle.api.scrollTo();
+          }
           data = values.current;
           if (!_Utils.default.isNull(containerErrorCallback.current) && _ApplicationManager.default.isFormMarkersEnabled()) {
             containerErrorCallback.current(fieldParentErrors);
@@ -576,10 +583,13 @@ const Form = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwar
     }
     return field;
   };
-  const handleSelectItemChange = (name, options, selectedId) => {
+  const handleSelectItemChange = (name, options, selection) => {
+    if (typeof selection === 'object' && (_Utils.default.isNull(options) || options.length === 0)) {
+      return selection;
+    }
     let selectedValue = null;
     for (let i = 0; i < options.length; i++) {
-      if (options[i].id === selectedId) {
+      if (options[i].id === selection) {
         selectedValue = options[i];
       }
     }
@@ -615,6 +625,7 @@ const Form = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwar
   }
   return visible && /*#__PURE__*/_react.default.createElement("div", {
     className: props.className,
+    id: props.config.id,
     style: props.className === 'defaultForm' ? _Utils.default.mergeStyles({
       padding: '16px 0',
       margin: '0',