@agilemotion/oui-react-js 1.8.18 → 1.8.19

package/dist/components/Toolbar.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Observable = _interopRequireDefault(require("../event/Observable"));
 var _styles = require("@mui/styles");
-var _ToggleButtonGroup = _interopRequireDefault(require("@mui/lab/ToggleButtonGroup"));
+var _ToggleButtonGroup = _interopRequireDefault(require("@mui/material/ToggleButtonGroup"));
 var _MenuButton = _interopRequireDefault(require("./menu/MenuButton"));
 var _Button = _interopRequireDefault(require("./Button"));
 var _Utils = _interopRequireDefault(require("../Utils"));

package/dist/components/form/BaseField.js

@@ -33,18 +33,18 @@ const BaseField = props => {
   const ref = _react.default.useRef(null);
   const valid = _react.default.useRef(false);
   _react.default.useEffect(() => {
-    let value = valueObject[valueProperty];
+    let boundValue = valueObject[valueProperty];
     if (props.config.fieldType === 'SELECT' || props.config.fieldType === 'LOOKUP') {
-      if (!value || _Utils.default.isNull(value.id)) {
+      if (!boundValue || _Utils.default.isNull(boundValue.id)) {
         setValue(null);
         valueRef.current = null;
       } else {
-        setValue(value);
-        valueRef.current = value;
+        setValue(boundValue);
+        valueRef.current = boundValue;
       }
     } else {
-      setValue(value);
-      valueRef.current = value;
+      setValue(boundValue);
+      valueRef.current = boundValue;
     }
   }, [valueObject[valueProperty]]);
 

package/dist/components/form/CurrencyField.js

@@ -52,7 +52,6 @@ const CurrencyFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_reac
       } else {
         base.handleValueChange(0);
       }
-      console.log("TARGET VAL : " + event.target.value);
       setDisplayValue(event.target.value);
     }
   };

package/dist/components/form/LookupField.js

@@ -27,12 +27,19 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
   const height = !_Utils.default.isNull(props.config.attributes?.style?.height) ? props.config.attributes.style.height : '41px';
   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 [value, setValue] = _react.default.useState(_Utils.default.isNull(props.value) ? null : props.value.id);
   const base = props.base;
   const handleClose = () => {
     setOpen(false);
     setCurrentSelection(null);
     _Observable.default.clearComponentEventListeners(props.gridHandle.api.id);
   };
+  _react.default.useEffect(() => {
+    // Initial binding
+    if (_Utils.default.isNull(value)) {
+      setValue(base.value);
+    }
+  }, [base.value]);
   _react.default.useEffect(() => {
     if (props.config && props.config.grid) {
       if (!props.config.grid.attributes) {
@@ -62,6 +69,7 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
   const setSelectionAsValue = () => {
     if (currentSelection.length > 0) {
       let val = setupVal();
+      setValue(val);
       base.handleValueChange(val);
       handleClose();
     }
@@ -100,7 +108,7 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
     className: 'col-*-* no-margin no-padding',
     style: {
       width: 'calc(100% - 72px)',
-      marginBottom: base.value ? '0' : '8px',
+      marginBottom: value ? '0' : '8px',
       position: 'relative'
     }
   }, !base.required && /*#__PURE__*/_react.default.createElement("div", {
@@ -124,10 +132,10 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
     },
     id: props.id,
     required: base.required,
-    readonly: true,
+    readOnly: true,
     disabled: base.disabled,
     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,
+    value: value?.__oui_label || value?.dataRecordDescription || defaultValue,
     className: props.className || 'lookup-field-input',
     error: base.hasError,
     helperText: base.errorMessage,

package/dist/components/form/SelectItem.js

@@ -5,24 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _Utils = _interopRequireDefault(require("../../Utils"));
 var _BaseField = require("./BaseField");
 var _RestService = require("../../RestService");
-var _Event = _interopRequireDefault(require("../../event/Event"));
-var _Observable = _interopRequireDefault(require("../../event/Observable"));
-var _EventType = _interopRequireDefault(require("../../event/EventType"));
+var _material = require("@mui/material");
 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 SelectItemComponent = props => {
   const base = props.base;
   const [optionsLoaded, setOptionsLoaded] = _react.default.useState(false);
   const [loadFullOptionList, setLoadFullOptionList] = _react.default.useState(false);
+  const [value, setValue] = _react.default.useState(_Utils.default.isNull(props.value) ? '' : props.value.id);
+  const initialValue = _react.default.useRef(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 defaultValue = _Utils.default.isNull(props.value) ? '' : props.value.id;
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(base.value) && !optionsLoaded) {
       let defaultOptions = [];
@@ -30,7 +27,17 @@ const SelectItemComponent = props => {
       base.setSelectOptions(defaultOptions);
       setOptionsLoaded(true);
     }
+    if (_Utils.default.isNull(initialValue.current) && !_Utils.default.isNull(base.value)) {
+      initialValue.current = base.value;
+    }
   }, [base.value]);
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(base.selectOptions) && base.selectOptions.length > 0) {
+      if (initialValue.current) {
+        setValue(initialValue.current.id);
+      }
+    }
+  }, [base.selectOptions]);
   _react.default.useEffect(() => {
     if (loadFullOptionList && !_Utils.default.isNull(props.config.dataService)) {
       let method = props.config.dataService.type === 'rpc' ? _RestService.invokeRpc : _RestService.invokeRest;
@@ -57,42 +64,45 @@ const SelectItemComponent = props => {
       setOptionsLoaded(true);
     }
   }, [loadFullOptionList, props.refreshData]);
-  return /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    select: true,
-    InputProps: props.InputProps,
-    id: props.id,
-    disabled: base.disabled,
+  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+    fullWidth: true,
+    margin: "dense",
+    size: "small",
     required: base.required,
-    label: !_Utils.default.isNull(props.config.attributes) ? props.config.attributes['label'] : null,
+    disabled: base.disabled,
+    error: base.hasError,
     style: _Utils.default.mergeStyles({
       minWidth: minWidth,
       width: width,
       maxWidth: maxWidth
-    }, props.config),
-    SelectProps: {
-      onOpen: () => {
-        if (!loadFullOptionList) {
-          setLoadFullOptionList(true);
-        }
+    }, props.config)
+  }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
+    id: `${props.id}-label`
+  }, !_Utils.default.isNull(props.config.attributes) ? props.config.attributes['label'] : ''), /*#__PURE__*/_react.default.createElement(_material.Select, {
+    labelId: `${props.id}-label`,
+    id: props.id,
+    variant: "outlined",
+    value: value,
+    input: /*#__PURE__*/_react.default.createElement(_material.OutlinedInput, {
+      label: props.config.attributes?.label || ''
+    }),
+    onOpen: () => {
+      if (!loadFullOptionList) {
+        setLoadFullOptionList(true);
       }
     },
-    value: !_Utils.default.isNull(base.value) && base.selectOptions && base.selectOptions.length > 0 ? base.value.id : defaultValue,
-    className: props.className,
     onChange: e => {
       base.handleValueChange(e.target.value);
+      setValue(e.target.value);
     },
-    error: base.hasError,
-    helperText: base.errorMessage,
-    margin: "dense",
-    size: "small",
-    variant: "outlined"
-  }, base.selectOptions.map(option => option.id === '_EMPTY_VALUE' ? /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+    className: props.className
+  }, base.selectOptions.map(option => option.id === '_EMPTY_VALUE' ? /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     value: "",
     key: option.id
-  }, /*#__PURE__*/_react.default.createElement("em", null, "\xA0")) : /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+  }, /*#__PURE__*/_react.default.createElement("em", null, "\xA0")) : /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     key: option.id,
     value: option.id
-  }, _Utils.default.isNull(option.dataRecordDescription) ? '' : option.dataRecordDescription.trim())));
+  }, _Utils.default.isNull(option.dataRecordDescription) ? '' : option.dataRecordDescription.trim()))), base.hasError && /*#__PURE__*/_react.default.createElement(_material.FormHelperText, null, base.errorMessage));
 };
 const SelectItem = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [refreshData, setRefreshData] = _react.default.useState(false);

package/dist/components/signatures/Toolbar.js

@@ -9,7 +9,7 @@ var _styles = require("@mui/styles");
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
 var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _ToggleButton = _interopRequireDefault(require("@mui/lab/ToggleButton"));
-var _ToggleButtonGroup = _interopRequireDefault(require("@mui/lab/ToggleButtonGroup"));
+var _ToggleButtonGroup = _interopRequireDefault(require("@mui/material/ToggleButtonGroup"));
 var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
 var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
 var _Save = _interopRequireDefault(require("@mui/icons-material/Save"));

package/package.json

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