@agilemotion/oui-react-js 1.8.2 → 1.8.3

package/dist/components/form/TextField.js

@@ -4,52 +4,51 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-var _styles = require("@material-ui/core/styles");
+var _react = _interopRequireWildcard(require("react"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _styles = require("@mui/styles");
 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 TextFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+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 = !_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)({
-    root: {
-      '& label.Mui-focused': {
-        color: secondaryColor
-      },
-      '& .MuiInput-underline:after': {
-        borderBottomColor: secondaryColor
-      },
-      '& .MuiOutlinedInput-root': {
-        '&.Mui-focused fieldset': {
-          borderColor: secondaryColor
-        }
-      }
+  const textRef = (0, _react.useRef)(null);
+  const [rows, setRows] = (0, _react.useState)(1);
+  _react.default.useEffect(() => {
+    if (textRef.current) {
+      const computedStyle = window.getComputedStyle(textRef.current);
+      const lineHeight = parseFloat(computedStyle.lineHeight) || 20;
+      const calculatedRows = Math.floor(height === null ? 20 : height.replace('px', '') / lineHeight);
+      setRows(calculatedRows);
     }
-  })(_TextField.default);
+  }, [textRef.current]);
   return /*#__PURE__*/_react.default.createElement(_TextField.default, {
     id: props.id,
-    ref: ref,
     type: props.type,
     required: base.required,
+    inputRef: textRef,
     label: !_Utils.default.isNull(props.config.attributes) ? props.config.attributes['label'] : null,
     value: !_Utils.default.isNull(base.value) || base.value === 0 ? base.value : '',
     onChange: e => {
       base.handleValueChange(e.target.value);
     },
-    inputProps: {
-      autocomplete: "new-password"
+    slotProps: {
+      input: {
+        autoComplete: "new-password",
+        sx: {}
+      }
     },
-    onKeyPress: props.keyHandler,
+    onKeyUp: props.keyHandler,
     error: base.hasError,
     helperText: base.errorMessage,
     margin: "dense",
@@ -61,20 +60,19 @@ const TextFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
       minWidth: minWidth,
       width: width,
       maxWidth: maxWidth,
-      height: height,
+      height: multiline ? null : height,
       color: 'secondary'
     },
     variant: "outlined"
   });
 }));
-const TextField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const TextField = /*#__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) => {
       return value ? value.toString().trim() : value;
     }
   }), base => /*#__PURE__*/_react.default.createElement(TextFieldWrapper, _extends({
-    ref: ref,
     base: base
   }, props)));
 }));

package/dist/components/form/TimePicker.js

@@ -7,15 +7,17 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 require("date-fns");
 var _Utils = _interopRequireDefault(require("../../Utils"));
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 var _BaseField = require("./BaseField");
-var _dateFns2 = _interopRequireDefault(require("@date-io/date-fns"));
-var _pickers = require("@material-ui/pickers");
-var _styles = require("@material-ui/core/styles");
+var _TimePicker = require("@mui/x-date-pickers/TimePicker");
+var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
+var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
 var _reactRedux = require("react-redux");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _demo = require("@mui/x-date-pickers/internals/demo");
 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 CustomTimePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const CustomTimePickerComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
   const defaultDate = !_Utils.default.isNull(base.valueObject[base.valueProperty]) ? new Date(base.valueObject[base.valueProperty]) : null;
   let minWidth = _Utils.default.getComponentAttribute(props.config, 'minWidth', '240px');
@@ -28,67 +30,56 @@ const CustomTimePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     base.setValue(defaultDate);
   }, [props.base.valueObject[props.base.valueProperty]]);
   const secondaryColor = (0, _reactRedux.useSelector)(state => state.dashboard.secondaryThemeColor);
-  const ThemedKeyboardTimePicker = (0, _styles.withStyles)({
-    root: {
-      '& label.Mui-focused': {
-        color: secondaryColor
-      },
-      '& .MuiInput-underline:after': {
-        borderBottomColor: secondaryColor
-      },
-      '& .MuiOutlinedInput-root': {
-        '&.Mui-focused fieldset': {
-          borderColor: secondaryColor
-        }
-      }
-    }
-  })(_pickers.KeyboardTimePicker);
-  return /*#__PURE__*/_react.default.createElement(_pickers.MuiPickersUtilsProvider, {
-    utils: _dateFns2.default
-  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    container: true,
-    ref: ref
-  }, /*#__PURE__*/_react.default.createElement(_pickers.KeyboardTimePicker, {
-    id: props.id,
-    InputProps: props.InputProps,
-    disabled: base.disabled,
-    required: base.required,
-    ampm: false,
+  const style = {
+    minWidth: minWidth,
+    width: width,
+    textAlign: 'left'
+  };
+  return /*#__PURE__*/_react.default.createElement(_LocalizationProvider.LocalizationProvider, {
+    dateAdapter: _AdapterDayjs.AdapterDayjs
+  }, /*#__PURE__*/_react.default.createElement(_demo.DemoContainer, {
+    components: ['TimePicker', 'TimePicker']
+  }, /*#__PURE__*/_react.default.createElement(_TimePicker.TimePicker, {
     label: props.config.attributes['label'],
-    value: base.value,
     className: props.className,
     error: base.hasError,
     helperText: base.errorMessage,
-    margin: "dense",
-    inputVariant: "outlined",
-    style: {
-      minWidth: minWidth,
-      width: width,
-      textAlign: 'left'
-    },
-    onChange: handleDateChange,
-    size: "small",
-    KeyboardButtonProps: {
-      'aria-label': 'change time',
-      'disabled': props.disabled
+    ampm: false,
+    slotProps: {
+      textField: {
+        variant: "outlined",
+        margin: "dense",
+        size: "small",
+        style: style,
+        disabled: base.disabled,
+        required: base.required,
+        error: base.hasError,
+        helperText: base.errorMessage
+      }
     },
-    readOnly: props.readOnly
+    onChange: newValue => handleDateChange(newValue.toDate()),
+    value: base.value ? (0, _dayjs.default)(base.value) : null
   })));
 }));
-const TimePicker = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const TimePicker = /*#__PURE__*/_react.default.memo((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,
     valueParser: (value, inbound) => {
       if (!_Utils.default.isNull(value)) {
         if (!value.toString().includes("T")) {
+          if (typeof value === 'string') {
+            const [hours, minutes] = value.split(":").map(Number);
+            const dateObject = new Date();
+            dateObject.setHours(hours, minutes, 0, 0);
+            return inbound ? dateObject : dateObject.toLocaleTimeString('it-IT');
+          }
           return value;
         }
       }
       return !_Utils.default.isNull(value) ? inbound ? new Date(value) : new Date(value).toLocaleTimeString('it-IT') : null;
     }
   }), base => /*#__PURE__*/_react.default.createElement(CustomTimePickerComponent, _extends({
-    ref: ref,
     base: base
   }, props)));
-}));
+});
 var _default = exports.default = TimePicker;

package/dist/components/form/TransferList.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/styles");
 var _DataGrid = require("./../DataGrid");
 var _Utils = _interopRequireDefault(require("../../Utils"));
 require("./TransferList.css");
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 var _BaseField = require("./BaseField");
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
-var _RestUtils = require("../../RestUtils");
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _RestService = require("../../RestService");
 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 useStyles = (0, _styles.makeStyles)(theme => ({
@@ -33,7 +33,7 @@ const useStyles = (0, _styles.makeStyles)(theme => ({
     margin: theme.spacing(0.5, 0)
   }
 }));
-const TransferListComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const TransferListComponent = /*#__PURE__*/_react.default.memo((props, ref) => {
   const classes = useStyles();
   const base = props.base;
   const [leftSelection, setLeftSelection] = _react.default.useState([]);
@@ -81,9 +81,7 @@ const TransferListComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
     updateValue(props.selectionListHandle.api.deleteSelectedRows());
     props.optionsListHandle.api.addRows(rightSelection);
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref
-  }, /*#__PURE__*/_react.default.createElement("div", null, label !== null ? /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, label !== null ? /*#__PURE__*/_react.default.createElement("div", {
     style: {
       margin: '8px 0 8px 16px'
     }
@@ -114,7 +112,7 @@ const TransferListComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
     viewId: props.viewId,
     data: !_Utils.default.isNull(data) ? data[optionsDataBinding] : null,
     onSelectionChange: selection => setLeftSelection(selection),
-    filterWrapperClass: 'transferListFilterWraper',
+    filterWrapperClass: 'transferListFilterWrapper',
     hasBorder: false
   })), /*#__PURE__*/_react.default.createElement(_Grid.default, {
     item: true,
@@ -156,28 +154,28 @@ const TransferListComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
     viewId: props.viewId,
     data: !_Utils.default.isNull(data) ? data[selectionDataBinding] : null,
     onSelectionChange: selection => setRightSelection(selection),
-    filterWrapperClass: 'transferListFilterWraper',
+    filterWrapperClass: 'transferListFilterWrapper',
     hasBorder: false
   })), /*#__PURE__*/_react.default.createElement("p", {
     className: 'error'
   }, base.errorMessage))));
-}));
-const TransferList = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+});
+const TransferList = /*#__PURE__*/_react.default.memo((props, ref) => {
   const [optionsListHandle] = _react.default.useState({});
   const [selectionListHandle] = _react.default.useState({});
   const [data, setData] = _react.default.useState(null);
   const loadData = () => {
-    let method = props.config.dataService.type === 'rpc' ? _RestUtils.invokeRpc : _RestUtils.invokeRest;
-    return new Promise((resolve, reject) => {
-      method(props.config.dataService, props.handle, props.viewId, result => {
-        let data = props.config.dataService.type === 'rpc' ? result.data : result;
-        setData(data);
-        resolve(data);
-      }, e => {
-        console.error(e);
-        _Utils.default.publishErrorMessage(e, props.viewId);
-        reject(e);
-      });
+    let method = props.config.dataService.type === 'rpc' ? _RestService.invokeRpc : _RestService.invokeRest;
+    method({
+      service: props.config.dataService,
+      component: props.handle,
+      viewId: props.viewId
+    }).then(result => {
+      let data = props.config.dataService.type === 'rpc' ? result.data : result;
+      setData(data);
+    }).catch(e => {
+      console.error(e);
+      _Utils.default.publishErrorMessage(e, props.viewId);
     });
   };
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
@@ -204,11 +202,10 @@ const TransferList = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     },
     loadDataHandler: () => loadData()
   }), base => /*#__PURE__*/_react.default.createElement(TransferListComponent, _extends({
-    ref: ref,
     base: base,
     data: data,
     optionsListHandle: optionsListHandle,
     selectionListHandle: selectionListHandle
   }, props)));
-}));
+});
 var _default = exports.default = TransferList;

package/dist/components/form/UploadField.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.UploadField = exports.DocumentUpload = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _BaseField = require("./BaseField");
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/styles");
 var _DocumentViewer = _interopRequireDefault(require("../DocumentViewer"));
 var _Utils = _interopRequireDefault(require("../../Utils"));
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _reactPromiseTracker = require("react-promise-tracker");
 var _Event = _interopRequireDefault(require("../../event/Event"));
@@ -45,7 +45,7 @@ const json = response => {
   return response.text();
 };
 const location = window.location.protocol + "//" + window.location.hostname;
-const DocumentUpload = exports.DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const DocumentUpload = exports.DocumentUpload = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [viewerFile, setViewerFile] = _react.default.useState(!_Utils.default.isNull(props.initialFile) ? props.initialFile : null);
   const [payloadStorageMode, setPayloadStorageMode] = _react.default.useState(props.config.payloadStorageMode || 'base64');
   const [files, setFiles] = _react.default.useState(!_Utils.default.isNull(props.initialFile) ? [props.initialFile] : null);
@@ -92,7 +92,8 @@ const DocumentUpload = exports.DocumentUpload = /*#__PURE__*/_react.default.memo
         headers: {
           'Accept': 'application/json',
           'Authorization': 'Bearer ' + accessToken,
-          'idToken': idToken
+          'idToken': idToken,
+          'tenant': _ApplicationManager.default.getActiveTenant()
         },
         body: data
       };
@@ -128,7 +129,8 @@ const DocumentUpload = exports.DocumentUpload = /*#__PURE__*/_react.default.memo
         headers: {
           'Accept': 'application/json',
           'Authorization': 'Bearer ' + accessToken,
-          'idToken': idToken
+          'idToken': idToken,
+          'tenant': _ApplicationManager.default.getActiveTenant()
         }
       };
       let url = location + _ApplicationManager.default.getContextRoot() + '/docs/api/v1/manager/upload/remove/' + cacheId.current;
@@ -259,7 +261,6 @@ const DocumentUpload = exports.DocumentUpload = /*#__PURE__*/_react.default.memo
     target: '_blank'
   }, base.value.name) : null), !base.disabled && nullable && base.value ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     "aria-controls": "menu-list-grow",
-    ref: ref,
     "aria-haspopup": "true",
     onClick: () => {
       base.handleValueChange(null);
@@ -277,7 +278,7 @@ const DocumentUpload = exports.DocumentUpload = /*#__PURE__*/_react.default.memo
     className: classes.errorMessageDisplay
   }, errorMessage) : "");
 }));
-const UploadField = exports.UploadField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const UploadField = exports.UploadField = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [file, setFile] = _react.default.useState(null);
   const clearTrigger = _react.default.useRef(false);
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
@@ -291,7 +292,6 @@ const UploadField = exports.UploadField = /*#__PURE__*/_react.default.memo( /*#_
       }
     }
   }), base => /*#__PURE__*/_react.default.createElement(DocumentUpload, _extends({
-    ref: ref,
     base: base,
     initialFile: file,
     clearTrigger: clearTrigger.current

package/dist/components/grid/GridContainer.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = GridContainer;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@material-ui/core/styles");
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _styles = require("@mui/styles");
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 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 styles = {

package/dist/components/grid/GridItem.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = GridItem;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@material-ui/core/styles");
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _styles = require("@mui/styles");
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 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 styles = {

package/dist/components/layout/Layout.js

@@ -89,7 +89,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(Layout, {
             handle: createComponentHandle(component),
             config: component,
-            ref: /*#__PURE__*/_react.default.createRef(),
             tableRow: props.tableRow,
             key: index,
             viewId: props.viewId
@@ -100,7 +99,6 @@ const Layout = props => {
             handle: createComponentHandle(component),
             tableRow: props.tableRow,
             key: index,
-            ref: /*#__PURE__*/_react.default.createRef(),
             viewId: props.viewId
           });
         case 'tab':
@@ -109,14 +107,12 @@ const Layout = props => {
             handle: createComponentHandle(component),
             tableRow: props.tableRow,
             key: index,
-            ref: /*#__PURE__*/_react.default.createRef(),
             viewId: props.viewId
           });
         case 'dataGrid':
           return /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -124,7 +120,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_Form.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId,
             className: 'defaultForm'
@@ -134,21 +129,18 @@ const Layout = props => {
             config: component,
             handle: createComponentHandle(component),
             viewId: props.viewId,
-            key: index,
-            ref: /*#__PURE__*/_react.default.createRef()
+            key: index
           });
         case 'portlet':
           return /*#__PURE__*/_react.default.createElement(_Portlet.default, {
             config: component,
             handle: createComponentHandle(component),
-            viewId: props.viewId,
-            ref: /*#__PURE__*/_react.default.createRef()
+            viewId: props.viewId
           });
         case 'tree':
           return /*#__PURE__*/_react.default.createElement(_Tree.Tree, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -156,7 +148,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_TitleBar.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -164,7 +155,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_StepperTitleBar.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -172,7 +162,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_AlertBar.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -180,7 +169,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_SignatureTemplateDesigner.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -188,7 +176,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_DocumentViewer.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -196,7 +183,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_VCRoom.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -204,7 +190,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_Video.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -212,7 +197,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -220,7 +204,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_SignaturePanel.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -228,7 +211,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -243,7 +225,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_TemplateDesigner.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -251,7 +232,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_DocumentTemplateDesigner.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -259,7 +239,6 @@ const Layout = props => {
           return /*#__PURE__*/_react.default.createElement(_ChatRoomWrapper.default, {
             config: component,
             handle: createComponentHandle(component),
-            ref: /*#__PURE__*/_react.default.createRef(),
             key: index,
             viewId: props.viewId
           });
@@ -350,7 +329,7 @@ const Layout = props => {
         component.attributes.style = {};
       }
       if (component.type !== 'layout') {
-        component.attributes.style.width = '100%;';
+        component.attributes.style.width = '100%';
       }
       return component.type === 'layout' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderComponent(component, index)) : /*#__PURE__*/_react.default.createElement("div", {
         key: index,

package/dist/components/layout/View.js

@@ -18,7 +18,7 @@ require("./VC.css");
 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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const View = exports.View = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const View = props => {
   const [layoutHandle] = _react.default.useState({});
   const [model] = _react.default.useState({});
   const loadingRef = _react.default.useRef(true);
@@ -161,12 +161,10 @@ const View = exports.View = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: 'view',
-    ref: ref,
     style: _Utils.default.mergeStyles({
       minWidth: '128px',
       height: '100%'
     }, props.config)
   }, render(props.config.layout));
-}), () => {
-  return true;
-});
+};
+exports.View = View;