@agilemotion/oui-react-js 1.8.31 → 1.8.33

package/dist/ApplicationManager.js

@@ -61,6 +61,9 @@ class ApplicationManager {
         getUserDetails() {
           return instance.getUserDetails();
         },
+        closePopupView() {
+          return instance.closePopupView();
+        },
         fireEvent(eventType, event) {
           return _Observable.default.fireEvent(eventType, new _Event.default(event.source, event.viewId, event.data));
         },
@@ -195,6 +198,10 @@ class ApplicationManager {
   openPopupView(view) {
     this.props.confirmationDialogController.openPopupView(view);
   }
+  closePopupView() {
+    this.viewContext.popup.closeAllViews();
+    this.props.confirmationDialogController.closePopupView();
+  }
   openWindowView(view) {
     _Observable.default.emitContextChangeEvent(applicationContext, {
       windowView: view
@@ -359,6 +366,12 @@ class ApplicationManager {
         const view = viewContextElement.getView();
         if (view) {
           viewContextElement.closeView(viewId, forward);
+          if (key === 'window') {
+            _Observable.default.emitContextChangeEvent(applicationContext, {
+              windowView: null
+            });
+            applicationContext.windowView = null;
+          }
           break;
         }
       }

package/dist/DynamicJS.js

@@ -90,6 +90,7 @@ class DynamicJS {
       if (!_Utils.default.isNull(event)) {
         eventParam = {};
         eventParam.data = event.data;
+        eventParam.viewId = event.viewId;
       }
       try {
         // NB : The javascript serializer uses UCT for dates and it is 2 hours behind. TODO : use  DateUtils.makeDateReplacer

package/dist/RestService.js

@@ -114,6 +114,7 @@ class RestService {
       }
       if (requestBody !== null || service.method === 'POST') {
         this.fetchWithCustomConfig({
+          viewId: request.viewId,
           url,
           serviceType: request.service.type,
           method: 'POST',
@@ -131,6 +132,7 @@ class RestService {
         });
       } else if (contentType === 'application/pdf' || contentType === 'application/vnd.ms-excel') {
         this.fetchWithCustomConfig({
+          viewId: request.viewId,
           url,
           serviceType: request.service.type,
           secure: request.secure,
@@ -144,6 +146,7 @@ class RestService {
         });
       } else {
         this.fetchWithCustomConfig({
+          viewId: request.viewId,
           url,
           serviceType: request.service.type,
           secure: !service.url.startsWith('http://'),
@@ -208,6 +211,7 @@ class RestService {
         }
       }
       this.fetchWithCustomConfig({
+        viewId: request.viewId,
         url: location + _ApplicationManager.default.getContextRoot() + '/' + module + '/api/v1/rpc/invoke',
         serviceType: request.service.type,
         secure: true,

package/dist/ViewContext.js

@@ -101,7 +101,7 @@ class ViewContext {
         }
       }
     }
-    if (forward || view.parent) {
+    if ((forward || view.parent) && !view.graphId) {
       let historyElement = {};
       historyElement.viewId = view.config.id;
       historyElement.parent = view.parent;

package/dist/components/AlertBar.js

@@ -20,7 +20,7 @@ const AlertBar = /*#__PURE__*/_react.default.memo(props => {
     let defaultAction = {
       actionType: 'script',
       script: {
-        lines: [`@#{${props.config.id}}.message = $event.data.message`, `@#{${props.config.id}}.variant = $event.data.messageType === 'ERROR' ? 'danger' : $event.data.messageType === 'WARN' ? 'warning' : $event.data.messageType === 'SUCCESS' ? 'success' : 'info' `]
+        lines: [`if('${props.viewId}' === $event.viewId) {`, `   @#{${props.config.id}}.message = $event.data.message`, `   @#{${props.config.id}}.variant = $event.data.messageType === 'ERROR' ? 'danger' : $event.data.messageType === 'WARN' ? 'warning' : $event.data.messageType === 'SUCCESS' ? 'success' : 'info'`, `}`]
       }
     };
     if (_Utils.default.isNull(eventHandlingConfig.subscriptions)) {

package/dist/components/Button.css

@@ -0,0 +1,3 @@
+.oui button {
+  margin-right: 4px !important;
+}

package/dist/components/Button.js

@@ -15,6 +15,7 @@ var _Event = _interopRequireDefault(require("../event/Event"));
 var _EventType = _interopRequireDefault(require("../event/EventType"));
 var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
 var _DynamicJS = _interopRequireDefault(require("../DynamicJS"));
+require("./Button.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _styles.makeStyles)(theme => ({
   root: {
@@ -94,7 +95,7 @@ const Button = props => {
     };
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.root,
+    className: `${classes.root} oui button`,
     style: {
       width: props.attributes?.style?.width,
       display: visible ? 'block' : 'none'

package/dist/components/DataGrid.js

@@ -34,8 +34,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const MULTI_SELECT_CHECKBOX_COL_WIDTH = exports.MULTI_SELECT_CHECKBOX_COL_WIDTH = 64;
 function evaluateTableCellWidth(multiSelect, column, columnCount) {
-  let width = column.attributes['width'];
-  return multiSelect === true ? 'calc(' + (typeof width !== 'undefined' ? width : 100 / columnCount + '%') + ' - ' + MULTI_SELECT_CHECKBOX_COL_WIDTH / columnCount + 'px)' : typeof width !== 'undefined' ? width : 100 / columnCount + '%';
+  let width = _ApplicationManager.default.isExpression(column.attributes['width']) ? _DynamicJS.default.executeScript(`popupTitle_${column.id}`, column.attributes['width'], column) : column.attributes['width'];
+  return multiSelect === true ? 'calc(' + (!_Utils.default.isNull(width) ? width : 100 / columnCount + '%') + ' - ' + MULTI_SELECT_CHECKBOX_COL_WIDTH / columnCount + 'px)' : typeof width !== 'undefined' ? width : 100 / columnCount + '%';
 }
 function desc(a, b, orderBy) {
   if (b[orderBy] < a[orderBy]) {
@@ -137,14 +137,6 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
   const rowsRef = _react.default.useRef([]);
   let noteKey = 0;
   const columnWidths = _react.default.useRef({});
-  function updateColumnWidths() {
-    for (let col of config.columns) {
-      if (columnWidths.current[col.id]) {
-        col.attributes.width = columnWidths.current[col.id];
-      }
-    }
-    setRows([...rows]);
-  }
   const api = () => {
     return {
       get id() {
@@ -333,25 +325,26 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
     if (_Utils.default.isNull(props.config.disableRowSelection) || props.config.disableRowSelection === false) {
       _ApplicationManager.default.enableFormMarkers(true);
       const selectedIndex = -1;
-      selected.indexOf(id);
-      let newSelected = [];
-      if (props.multiSelect === true) {
-        if (selectedIndex === -1) {
-          newSelected = newSelected.concat(selected, id);
-        } else if (selectedIndex === 0) {
-          newSelected = newSelected.concat(selected.slice(1));
-        } else if (selectedIndex === selected.length - 1) {
-          newSelected = newSelected.concat(selected.slice(0, -1));
-        } else if (selectedIndex > 0) {
-          newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
+      if (selected.indexOf(id) < 0) {
+        let newSelected = [];
+        if (props.multiSelect === true) {
+          if (selectedIndex === -1) {
+            newSelected = newSelected.concat(selected, id);
+          } else if (selectedIndex === 0) {
+            newSelected = newSelected.concat(selected.slice(1));
+          } else if (selectedIndex === selected.length - 1) {
+            newSelected = newSelected.concat(selected.slice(0, -1));
+          } else if (selectedIndex > 0) {
+            newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
+          }
+        } else {
+          newSelected.push(id);
+        }
+        let selectedRows = getSelectedRows(newSelected);
+        setSelected(newSelected);
+        if (!_Utils.default.isNull(props.onSelectionChange)) {
+          props.onSelectionChange(selectedRows);
         }
-      } else {
-        newSelected.push(id);
-      }
-      let selectedRows = getSelectedRows(newSelected);
-      setSelected(newSelected);
-      if (!_Utils.default.isNull(props.onSelectionChange)) {
-        props.onSelectionChange(selectedRows);
       }
     }
   }
@@ -480,7 +473,10 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
         isEditable = true;
         setEditable(true);
       }
-      column.width = evaluateTableCellWidth(props.selectionMode === 'MULTIPLE', column, visibleColumnCount);
+      if (!column.attributes) {
+        column.attributes = {};
+      }
+      column.attributes.width = evaluateTableCellWidth(props.selectionMode === 'MULTIPLE', column, visibleColumnCount);
       if (!_Utils.default.isNull(column.attributes) && column.attributes['editable'] === true && _Utils.default.isNull(column.editor)) {
         let defaultEditor = {};
         defaultEditor.fieldType = 'TEXT_FIELD';

package/dist/components/HtmlPanel.js

@@ -85,8 +85,10 @@ const HtmlPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
       },
       loadData: (actionConfig, event) => {
         if (actionConfig && actionConfig.value) {
-          let data = _ApplicationManager.default.resolveExpressionValue(actionConfig.value, event?.data);
-          console.log("DATA : ", data);
+          let parameterConfig = {
+            value: actionConfig.value
+          };
+          let data = _ApplicationManager.default.resolveParameterConfigValue(parameterConfig, event?.data)?.value;
           let templateScript = Handlebars.compile(template);
           setContent(templateScript(data));
         }

package/dist/components/Icon.js

@@ -45,6 +45,7 @@ var _Help = _interopRequireDefault(require("@mui/icons-material/Help"));
 var _Link = _interopRequireDefault(require("@mui/icons-material/Link"));
 var _Visibility = _interopRequireDefault(require("@mui/icons-material/Visibility"));
 var _Done = _interopRequireDefault(require("@mui/icons-material/Done"));
+var _Phone = _interopRequireDefault(require("@mui/icons-material/Phone"));
 var _Cancel = _interopRequireDefault(require("@mui/icons-material/Cancel"));
 var _colors = require("@mui/material/colors");
 var _iconsMaterial = require("@mui/icons-material");
@@ -254,6 +255,12 @@ class Icon extends _react.Component {
           color: _colors.red[500]
         }
       });
+    } else if (this.props.id === 'PHONE') {
+      return /*#__PURE__*/_react.default.createElement(_Phone.default, {
+        style: {
+          color: '#2e7d32'
+        }
+      });
     }
     return null;
   }

package/dist/components/PopupView.js

@@ -12,11 +12,12 @@ var _Utils = _interopRequireDefault(require("../Utils"));
 var _styles = require("@mui/styles");
 var _View = require("./layout/View");
 var _DynamicJS = _interopRequireDefault(require("../DynamicJS"));
+var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function PopupViewDialog(props) {
-  const [title, setTitle] = _react.default.useState("");
-  const height = _Utils.default.getComponentStyleAttribute(props.view.config, 'height', '28vh');
-  const width = _Utils.default.getComponentStyleAttribute(props.view.config, 'width', '40vw');
+  const [title, setTitle] = _react.default.useState(null);
+  const height = _Utils.default.getComponentStyleAttribute(props.view.config, 'height', '38vh');
+  const width = _Utils.default.getComponentStyleAttribute(props.view.config, 'width', '60vw');
   const useStyles = (0, _styles.makeStyles)(theme => ({
     dialogPaper: {
       minHeight: height,
@@ -29,6 +30,7 @@ function PopupViewDialog(props) {
   const handler = result => {
     props.handler(result);
   };
+  let parsedConfig = _Utils.default.parseConfig(props.view.config, props.view.config.id);
   return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
     classes: {
       paper: classes.dialogPaper
@@ -36,7 +38,7 @@ function PopupViewDialog(props) {
     open: props.view !== null,
     "aria-labelledby": "alert-dialog-title",
     "aria-describedby": "alert-dialog-description"
-  }, /*#__PURE__*/_react.default.createElement(_DialogTitle.default, {
+  }, title && /*#__PURE__*/_react.default.createElement(_DialogTitle.default, {
     id: "alert-dialog-title"
   }, title), /*#__PURE__*/_react.default.createElement(_DialogContent.default, {
     style: {
@@ -49,7 +51,9 @@ function PopupViewDialog(props) {
     ref: props.view.ref,
     handle: props.view.handle,
     loadCallback: () => {
-      setTitle(_DynamicJS.default.executeScript(`popupTitle_${props.view.id}`, props.view.config.title, props.view.id));
+      if (parsedConfig.windowTitle) {
+        setTitle(_ApplicationManager.default.isExpression(parsedConfig.windowTitle) ? _DynamicJS.default.executeScript(`popupTitle_${props.view.id}`, parsedConfig.windowTitle, parsedConfig.id) : parsedConfig.windowTitle);
+      }
     }
   })));
 }

package/dist/components/SocketManager.js

@@ -123,6 +123,7 @@ class SocketManager {
         meetingId: meetingId
       }).catch(error => {});
     }
+    _ApplicationManager.default.setHasActiveMeeting(false);
   };
   endSession = meetingId => {
     if (this.socket) {
@@ -136,6 +137,7 @@ class SocketManager {
         }).catch(error => {});
       }).catch(error => {});
     }
+    _ApplicationManager.default.setHasActiveMeeting(false);
   };
   createEvent() {
     let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

package/dist/components/StepperTitleBar.js

@@ -28,6 +28,7 @@ const useStyles = (0, _styles.makeStyles)(theme => ({
 }));
 const StepperTitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [steps, setSteps] = _react.default.useState(null);
+  const [visible, setVisible] = _react.default.useState(false);
   const [activeSegmentPercentage, setActiveSegmentPercentage] = _react.default.useState(null);
   const currentIndex = _react.default.useRef(null);
   let keyCounter = 0;
@@ -84,23 +85,36 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.def
       get id() {
         return props.config.id;
       },
+      set visible(visible) {
+        setVisible(visible);
+      },
+      refresh() {
+        let parsedConfig = _Utils.default.parseConfig(props.config ? props.config : props.config, props.viewId);
+        setVisible(_Utils.default.isNull(parsedConfig.visible) || _Utils.default.evaluateBooleanExpression(parsedConfig.visible, parsedConfig.id));
+      },
       getChildren: () => {
         return [];
       },
       show() {
+        let graph;
         let graphs = [];
-        for (const key of Object.keys(this.viewContext)) {
-          let viewManager = this.viewContext[key];
-          for (const graph of viewManager.getGraphs()) {
-            graphs.push(graph);
+        let view = _ApplicationManager.default.getView(props.viewId);
+        if (view) {
+          for (const key of Object.keys(_ApplicationManager.default.viewContext)) {
+            let viewManager = _ApplicationManager.default.viewContext[key];
+            for (const viewManagerGraph of viewManager.getGraphs()) {
+              if (viewManagerGraph.id === view.graphId) {
+                graph = viewManagerGraph;
+              }
+            }
           }
         }
-
-        // TODO : Ensure this picks the graph from the correct view
-        let steps = graphs[graphs.length - 1].getTitleStack();
-        setSteps(steps);
-        currentIndex.current = graphs[graphs.length - 1].getCurrentNodeIndex();
-        setActiveSegmentPercentage(100 - 10 * (steps.length - 1));
+        if (graph) {
+          let steps = graph.getTitleStack();
+          setSteps(steps);
+          currentIndex.current = graph.getCurrentNodeIndex();
+          setActiveSegmentPercentage(100 - 10 * (steps.length - 1));
+        }
       }
     };
   };
@@ -110,7 +124,7 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.def
     }, graphicsCounter > 0 ? /*#__PURE__*/_react.default.createElement("div", {
       className: (graphicsCounter <= currentIndex.current ? `${classes.themeBorder} ` : '') + '' + (graphicsCounter === steps.length - 1 ? ' lastLine' : '')
     }) : null, /*#__PURE__*/_react.default.createElement("div", {
-      className: 'row flex' + (graphicsCounter === 0 ? ' firstBox' : ''),
+      className: 'row  flex-nowrap' + (graphicsCounter === 0 ? ' firstBox' : ''),
       style: {
         marginLeft: 'unset',
         marginRight: 'unset',
@@ -121,7 +135,7 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.def
       style: {
         whiteSpace: "nowrap"
       },
-      className: (graphicsCounter < currentIndex.current ? `${classes.secondary} box` : graphicsCounter === currentIndex.current ? `${classes.primary} box` : 'box-pending') + ' row no-margin no-padding'
+      className: (graphicsCounter < currentIndex.current ? `${classes.secondary} box  flex-nowrap` : graphicsCounter === currentIndex.current ? `${classes.primary} box` : 'box-pending') + ' row no-margin no-padding'
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: 'dot col-*-*',
       style: {
@@ -158,11 +172,10 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.def
   }
   function render() {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "w-100",
+      className: "w-100 flex-nowrap",
       style: {
         display: "flex",
-        width: "100%",
-        margin: "0 0 16px 0"
+        width: "100%"
       }
     }, steps.map(step => /*#__PURE__*/_react.default.createElement("div", {
       align: graphicsCounter === 0 ? "left" : graphicsCounter === steps.length - 1 ? "right" : "center",
@@ -176,12 +189,14 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.def
       id: "step-container-" + counter++
     }, renderStep(step))));
   }
-  return /*#__PURE__*/_react.default.createElement("div", null, !_Utils.default.isNull(props.config) ? /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", null, visible && !_Utils.default.isNull(props.config) ? /*#__PURE__*/_react.default.createElement("div", {
     style: _Utils.default.mergeStyles({
       fontSize: '24px',
       color: '#202124',
-      padding: "16px 0",
-      margin: "0"
+      padding: "0 0 32px 0",
+      display: 'flex',
+      justifyContent: 'center',
+      margin: "0 0 16px 0"
     }, props.config)
   }, !_Utils.default.isNull(steps) && !_Utils.default.isNull(activeSegmentPercentage) && !_Utils.default.isNull(currentIndex.current) ? render() : null) : null);
 }));

package/dist/components/TabPanel.js

@@ -143,19 +143,38 @@ const TabPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
   }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
     value: tabValue,
     onChange: handleTabChange,
-    indicatorColor: "primary",
+    variant: "scrollable" // enables horizontal scroll
+    ,
+    scrollButtons: "auto" // shows arrows when needed
+    ,
+    allowScrollButtonsMobile: true // show arrows on mobile too
+    ,
     textColor: "primary",
-    "aria-label": "tabs"
-  }, !_Utils.default.isNull(props.config) && !_Utils.default.isNull(props.config.tabPages) && props.config.tabPages.length > 0 ? props.config.tabPages.map((page, index) => {
-    return /*#__PURE__*/_react.default.createElement(_Tab.default, _extends({
-      label: page.attributes['label']
-    }, a11yProps(index), {
-      key: index,
-      style: {
-        color: _ApplicationManager.default.isFormMarkersEnabled() && errors !== null && errors[page.id] === true ? '#ed5249' : null
+    indicatorColor: "primary",
+    "aria-label": "tabs",
+    sx: {
+      // optional: reduce default min width so more tabs fit
+      '& .MuiTab-root': {
+        minWidth: 120
       }
-    }));
-  }) : null)), !_Utils.default.isNull(props.config) && !_Utils.default.isNull(props.config.tabPages) && props.config.tabPages.length > 0 ? props.config.tabPages.map((page, index) => {
+    }
+  }, props?.config?.tabPages?.length > 0 ? props.config.tabPages.map((page, index) => /*#__PURE__*/_react.default.createElement(_Tab.default, _extends({
+    key: index,
+    label: page.attributes['label'],
+    wrapped: true // allow multi-line label
+  }, a11yProps(index), {
+    sx: {
+      maxWidth: 240,
+      // constrain so wrapping can occur
+      whiteSpace: 'normal',
+      // allow wrap
+      wordBreak: 'break-word',
+      // break long words
+      textTransform: 'uppercase',
+      // keep original casing
+      color: _ApplicationManager.default.isFormMarkersEnabled() && errors !== null && errors[page.id] === true ? '#ed5249' : undefined
+    }
+  }))) : null)), !_Utils.default.isNull(props.config) && !_Utils.default.isNull(props.config.tabPages) && props.config.tabPages.length > 0 ? props.config.tabPages.map((page, index) => {
     if (_Utils.default.isNull(page.id)) {
       page.id = index + '-tab-page';
     }

package/dist/components/Toolbar.js

@@ -21,6 +21,7 @@ var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAway
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 var _MenuItem = _interopRequireDefault(require("./menu/MenuItem"));
+require("./Button.css");
 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; }
@@ -137,15 +138,11 @@ const Toolbar = props => {
     setOpen(prevOpen => !prevOpen);
   };
   function getDefaultStyle(item) {
-    return {
+    return _Utils.default.mergeStyles({
       height: item.type === 'toolbarSpacer' ? item.attributes?.style?.height ? item.attributes?.style?.height : '100%' : null,
       width: item.type === 'toolbarSpacer' ? '2' ? item.attributes?.style?.width : '100%' : null,
-      minWidth: item.type === 'toolbarSpacer' ? '2' : _Utils.default.isNull(item.attributes) || _Utils.default.isNull(item.attributes['label']) ? '60px' : null,
-      marginLeft: item.type === 'toolbarSpacer' ? '4px' : 0,
-      marginRight: 4,
-      marginBottom: 4,
-      marginTop: item.type === 'toolbarSpacer' ? '6px' : 0
-    };
+      minWidth: item.type === 'toolbarSpacer' ? '2' : _Utils.default.isNull(item.attributes) || _Utils.default.isNull(item.attributes['label']) ? '0px' : null
+    }, item);
   }
   function renderItem(item, defaultId) {
     if (_Utils.default.isNull(item.id)) {

package/dist/components/customInput/File.js

@@ -64,8 +64,7 @@ const File = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwar
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'col-*-*',
     style: {
-      marginLeft: '0',
-      width: '72px'
+      marginLeft: '0'
     }
   }, /*#__PURE__*/_react.default.createElement("input", {
     accept: "*/*",

package/dist/components/form/AutoComplete.js

@@ -28,7 +28,7 @@ const json = response => {
   return response.text();
 };
 const location = window.location.protocol + "//" + window.location.hostname;
-const AutoCompleteWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const AutoCompleteWrapper = props => {
   const base = props.base;
   const value = (0, _react.useRef)([]);
   const [inputValue, setInputValue] = (0, _react.useState)('');
@@ -139,12 +139,12 @@ const AutoCompleteWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react
       label: _Utils.default.getComponentAttribute(props.config, 'label', '')
     }))
   });
-}));
-const AutoComplete = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+};
+const AutoComplete = props => {
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle
   }), base => /*#__PURE__*/_react.default.createElement(AutoCompleteWrapper, _extends({
     base: base
   }, props)));
-}));
+};
 var _default = exports.default = AutoComplete;

package/dist/components/form/DatePicker.js

@@ -15,7 +15,7 @@ var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 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 CustomDatePickerComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const CustomDatePickerComponent = props => {
   const [minDate, setMinDate] = _react.default.useState(null);
   const [maxDate, setMaxDate] = _react.default.useState(null);
   const base = props.base;
@@ -107,7 +107,7 @@ const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/
     minDate: (0, _dayjs.default)(minDate),
     maxDate: (0, _dayjs.default)(maxDate)
   }));
-}));
+};
 const DatePicker = props => {
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,

package/dist/components/form/IconField.js

@@ -12,7 +12,9 @@ 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 base = props.base;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.config.attributes?.label && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, _Utils.default.getComponentAttribute(props.config, 'label', ''))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.config.attributes?.label && /*#__PURE__*/_react.default.createElement("div", {
+    style: _Utils.default.mergeStyles({}, props.config)
+  }, /*#__PURE__*/_react.default.createElement("label", null, _Utils.default.getComponentAttribute(props.config, 'label', ''))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: props.config.iconId,
     color: props.config.iconColor
   })));