@agilemotion/oui-react-js 1.8.32 → 1.8.34

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

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/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/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/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/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,