@agilemotion/oui-react-js 1.8.69 → 1.8.71

package/dist/Utils.js

@@ -326,6 +326,12 @@ class Utils {
     }
     return current[keys[keys.length - 1]];
   }
+  static stripHtml(html) {
+    if (!html) return '';
+    const temp = document.createElement('div');
+    temp.innerHTML = html;
+    return temp.textContent.replace(/\s+/g, ' ').trim();
+  }
 }
 exports.default = Utils;
 _Utils = Utils;

package/dist/components/AlertBar.js

@@ -9,6 +9,8 @@ var _Utils = _interopRequireDefault(require("../Utils"));
 var _Alert = _interopRequireDefault(require("react-bootstrap/Alert"));
 var _EventType = _interopRequireDefault(require("../event/EventType"));
 var _Observable = _interopRequireDefault(require("../event/Observable"));
+var _OverlayTrigger = _interopRequireDefault(require("react-bootstrap/OverlayTrigger"));
+var _Tooltip = _interopRequireDefault(require("react-bootstrap/Tooltip"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const AlertBar = /*#__PURE__*/_react.default.memo(props => {
   const [message, setMessage] = _react.default.useState(props.config.message);
@@ -77,8 +79,14 @@ const AlertBar = /*#__PURE__*/_react.default.memo(props => {
       width: '100%'
     }
   }, /*#__PURE__*/_react.default.createElement("p", {
+    title: message,
     style: {
-      color: 'rgba(255, 255, 255, 0.8)'
+      color: 'rgba(255, 255, 255, 0.8)',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      maxWidth: 'calc(100% - 32px)',
+      margin: 0
     }
   }, message))) : null;
 });

package/dist/components/TabPage.js

@@ -42,11 +42,14 @@ const TabPage = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.for
   let componentKey = 0;
   return /*#__PURE__*/_react.default.createElement("div", {
     style: _Utils.default.mergeStyles({
-      width: "100%"
+      width: "100%",
+      height: '100%',
+      borderRadius: '4px',
+      padding: '8px'
     }, props.config)
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, _extends({
     component: "div",
-    className: "w-100",
+    className: "w-100 h-100",
     role: "tabpanel",
     hidden: value !== index,
     id: "simple-tabpanel-".concat(index),
@@ -56,7 +59,8 @@ const TabPage = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.for
     className: classes.formTabPanel,
     style: {
       margin: 0,
-      padding: 0
+      padding: 0,
+      height: '100%'
     }
   }, children)));
 }));

package/dist/components/TabPanel.js

@@ -105,9 +105,6 @@ const TabPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
   }
   function renderPage(page, pageIndex) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        margin: '16px'
-      },
       className: 'tab-page-container'
     }, page.components.map((component, index) => {
       return renderTabPageComponent(component, page.id, pageIndex + index);
@@ -150,16 +147,18 @@ const TabPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
     };
   };
   return !_Utils.default.isNull(visibleTabPages) && /*#__PURE__*/_react.default.createElement("div", {
-    style: _Utils.default.mergeStyles({
-      width: '100%'
-    }, props.config)
+    style: {
+      width: '100%',
+      height: '100%',
+      borderBottom: '1px solid #d1d1d1'
+    }
   }, /*#__PURE__*/_react.default.createElement(_AppBar.default, {
     position: "static",
     color: "default",
     style: {
       background: 'transparent',
       boxShadow: 'none',
-      borderBottom: '1px solid #d1d1d1'
+      borderBottom: '1px solid #e1e1e1'
     }
   }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
     value: tabValue,
@@ -186,6 +185,7 @@ const TabPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
   }, a11yProps(index), {
     sx: {
       maxWidth: 240,
+      height: '100%',
       // constrain so wrapping can occur
       whiteSpace: 'normal',
       // allow wrap
@@ -195,13 +195,23 @@ const TabPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
       // keep original casing
       color: _ApplicationManager.default.isFormMarkersEnabled() && errors !== null && errors[page.id] === true ? '#ed5249' : undefined
     }
-  }))))), visibleTabPages.map((page, index) => {
-    return /*#__PURE__*/_react.default.createElement(_TabPage.default, {
+  }))))), /*#__PURE__*/_react.default.createElement("div", {
+    style: _Utils.default.mergeStyles({
+      width: '100%',
+      height: 'calc(100% - 64px)'
+    }, props.config)
+  }, visibleTabPages.map((page, index) => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: '100%',
+        display: tabValue === index ? null : 'none'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_TabPage.default, {
       value: tabValue,
       key: index,
       index: index,
       config: page
-    }, renderPage(page, index));
-  }));
+    }, renderPage(page, index)));
+  })));
 }));
 var _default = exports.default = TabPanel;

package/dist/components/TitleBar.js

@@ -57,13 +57,10 @@ const TitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
   return /*#__PURE__*/_react.default.createElement("div", {
     className: 'title-bar'
   }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      padding: '4px 0 4px 0',
-      fontSize: '24px',
-      color: '#202124'
-    }
+    className: "title-bar-content",
+    title: _Utils.default.stripHtml(title)
   }, /*#__PURE__*/_react.default.createElement(_reactHtmlRenderer.default, {
-    html: "<p>".concat(title, "</p>")
+    html: title
   })));
 }));
 var _default = exports.default = TitleBar;

package/dist/components/Toolbar.js

@@ -119,6 +119,8 @@ const Toolbar = props => {
     setConfig(props.tableRow ? _objectSpread(_objectSpread({}, props.config), {}, {
       id: props.config.id + '_' + ((_props$tableRow$id = props.tableRow.id) === null || _props$tableRow$id === void 0 ? void 0 : _props$tableRow$id.replaceAll('-', ''))
     }) : props.config);
+    let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+    setVisible(_Utils.default.evaluateBooleanExpression(parsedConfig.visible, parsedConfig.id, true));
   }, []);
   function createButtonItemHandle(id) {
     var _props$tableRow$id2;

package/dist/components/form/SelectItem.js

@@ -14,7 +14,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const SelectItemComponent = props => {
   var _props$config$attribu, _props$config$attribu2, _props$config$attribu3, _props$config$attribu4;
   const base = props.base;
-  const [optionsLoaded, setOptionsLoaded] = _react.default.useState(false);
+  const optionsLoaded = _react.default.useRef(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);
@@ -26,7 +26,7 @@ const SelectItemComponent = props => {
       let defaultOptions = [];
       defaultOptions.push(newValue);
       base.setSelectOptions(defaultOptions);
-      setOptionsLoaded(true);
+      optionsLoaded.current = true;
       console.log("DEFAULT SETTINGS SET");
     }
     if (_Utils.default.isNull(initialValue.current) && !_Utils.default.isNull(newValue)) {
@@ -35,11 +35,12 @@ const SelectItemComponent = props => {
     setValue(newValue ? newValue.id : '');
   }
   _react.default.useEffect(() => {
-    processValueChange(base.value, optionsLoaded);
+    processValueChange(base.value, optionsLoaded.current);
   }, [base.value]);
   _react.default.useEffect(() => {
-    initialValue.current = null;
-    processValueChange(base.valueObject[base.valueProperty], false);
+    if (!initialValue.current) {
+      processValueChange(base.valueObject[base.valueProperty], optionsLoaded.current);
+    }
   }, [base.valueObject[base.valueProperty]]);
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(base.selectOptions) && base.selectOptions.length > 0) {
@@ -75,7 +76,7 @@ const SelectItemComponent = props => {
           _Utils.default.publishErrorMessage(e, props.viewId);
         }
       });
-      setOptionsLoaded(true);
+      optionsLoaded.current = true;
     }
   }, [loadFullOptionList, props.refreshData]);
   return /*#__PURE__*/_react.default.createElement(_material.FormControl, {

package/dist/components/layout/Layout.css

@@ -1,8 +1,8 @@
 .parent-layout {
     overflow: hidden;
-    block-size: 100dvh;
     display: flex;
     flex-direction: column;
-    height: auto !important;
-    padding: 16px !important;
+    height: 100% !important;
+    width: 100% !important;
+    padding: 8px 0 0 0 !important;
 }

package/dist/components/layout/View.css

@@ -1,4 +1,4 @@
-:root { --header-h: 72px; --view-header-h: 112px; --view-header-min: 112px}
+:root { --header-h: 72px; --view-header-h: 104px; --view-header-min: 104px}
 
 .view {
     padding: 16px 8px 16px 32px;
@@ -31,12 +31,48 @@
     font-weight: bold;
 }
 
+.title-bar {
+    height: 36px;
+    display: flex;
+    align-items: center;
+}
+
+.title-bar-content {
+    font-size: 24px;
+    color: #202124;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    width: 100%;
+}
+
+.title-bar-content p {
+    display: inline;
+    margin: 0;
+    padding: 0;
+}
+
+.default-oui-layout {
+    min-height: 0;
+}
+
 .view .sticky-header {
-    position: sticky; top: 0; z-index: 1;
-    box-sizing: border-box;
-    block-size: auto;                             /* allow both grow & shrink */
-    min-block-size: var(--view-header-min); /* constant floor only */
-    overflow: visible;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+
+    height: var(--view-header-h);
+    min-height: var(--view-header-h);
+    max-height: var(--view-header-h);
+
+    overflow: hidden !important;
+    background: #fff;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;   /* pushes content to the bottom */
 }
 
 .view .scrolling-body {
@@ -74,6 +110,10 @@
 .max-h-40 {
 }
 
+.tab-page-container {
+    height: 100%;
+}
+
 /* 150% zoom res */
 @media (max-width: 1512px) and (max-height: 982px) and (min-resolution: 2dppx) {
     .max-h-40 {

package/dist/js/ProcurementMeetings.js

@@ -17,7 +17,7 @@ class ProcurementMeetings {
     _defineProperty(this, "emitSocketEvent", (viewId, systemEventType, data, meeting) => {
       return new Promise((resolve, reject) => {
         let recipientIds = [];
-        if (meeting) {
+        if (meeting && meeting.attendees) {
           for (const attendee of meeting.attendees) {
             let username = attendee.username;
             if (username !== _ApplicationManager.default.getUserDetails().username) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.8.69",
+  "version": "1.8.71",
   "description": "AgileMotion React UI Component Library - A comprehensive collection of dashboard components, forms, media controls, and more",
   "license": "ISC",
   "author": "",