@agilemotion/oui-react-js 1.8.43 → 1.8.44

package/dist/components/dashboard/components/blackDashboard/sidebar/FoldingTabSidebar.js

@@ -16,11 +16,6 @@ require("./FoldingTabSidebar.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*eslint-disable*/
 
-// javascript plugin used to create scrollbars on windows
-
-// reactstrap components
-
-let ps;
 const TAB = 16;
 class FoldingTabSidebar extends _react.default.Component {
   constructor(props) {
@@ -29,21 +24,25 @@ class FoldingTabSidebar extends _react.default.Component {
       ...this.getCollapseStates(props.routes),
       isLoading: false,
       error: false,
+      routes: undefined,
       activeRouteMenu: {
         id: 'dashboard',
         name: 'Dashboard'
       }
     };
   }
+
+  /* ----------------- menu building helpers ----------------- */
   getViews = (menus, level) => {
-    let newViews = [];
+    const newViews = [];
     for (let i = 0; i < menus.length; i++) {
-      let createView = {};
-      createView.name = menus[i].attributes.label;
-      createView.id = menus[i].id;
-      createView.mini = 'SS';
-      createView.layout = '/admin';
-      createView.level = level;
+      const createView = {
+        name: menus[i].attributes.label,
+        id: menus[i].id,
+        mini: 'SS',
+        layout: '/admin',
+        level
+      };
       if (menus[i].subMenu) {
         createView.collapse = true;
         createView.state = menus[i].id + 'Collapse';
@@ -53,19 +52,19 @@ class FoldingTabSidebar extends _react.default.Component {
       }
       newViews.push(createView);
     }
-    console.log('VIEWS : ', newViews, menus);
     return newViews;
   };
   getItems = (items, level) => {
-    let newItems = [];
+    const newItems = [];
     for (let i = 0; i < items.length; i++) {
-      let createItem = {};
-      createItem.name = items[i].attributes.label;
-      createItem.id = items[i].id;
-      createItem.mini = 'SS';
-      createItem.layout = '/admin';
-      createItem.item = items[i];
-      createItem.level = level;
+      const createItem = {
+        name: items[i].attributes.label,
+        id: items[i].id,
+        mini: 'SS',
+        layout: '/admin',
+        item: items[i],
+        level
+      };
       if (!_Utils.default.isNull(items[i].subMenu)) {
         createItem.collapse = true;
         createItem.state = items[i].id + 'SubMenuCollapse';
@@ -75,13 +74,10 @@ class FoldingTabSidebar extends _react.default.Component {
     }
     return newItems;
   };
-
-  // this creates the intial state of this component based on the collapse routes
-  // that it gets through this.state.routes
   getCollapseStates = routes => {
     let initialState = {};
     if (routes) {
-      routes.map((prop, key) => {
+      routes.forEach(prop => {
         if (prop.collapse) {
           initialState = {
             [prop.state]: this.getCollapseInitialState(prop.views),
@@ -89,22 +85,14 @@ class FoldingTabSidebar extends _react.default.Component {
             ...initialState
           };
         }
-        return null;
       });
     }
     return initialState;
   };
-  // this verifies if any of the collapses should be default opened on a rerender of this component
-  // for example, on the refresh of the page,
-  // while on the src/views/forms/RegularForms.js - route /admin/regular-forms
   getCollapseInitialState(routes) {
-    if (!routes) {
-      return false;
-    }
+    if (!routes) return false;
     for (let i = 0; i < routes.length; i++) {
-      if (!routes[i].views) {
-        return true;
-      }
+      if (!routes[i].views) return true;
       if (routes[i].collapse && this.getCollapseInitialState(routes[i].views)) {
         return true;
       } else if (window.location.href.indexOf(routes[i].path) !== -1) {
@@ -113,52 +101,44 @@ class FoldingTabSidebar extends _react.default.Component {
     }
     return false;
   }
-  getMenu = route => {
-    return new Promise(resolve => {
-      let service = {
-        url: '/ui/api/v1/menu/get',
-        parameters: [{
-          name: 'id',
-          value: route.menu,
-          httpParameterType: 'QUERY_PARAMETER'
-        }, {
-          name: 'version',
-          value: 1.0,
-          httpParameterType: 'QUERY_PARAMETER'
-        }],
-        contentType: 'application/json'
-      };
-      (0, _RestUtils.invokeRest)(service, {
-        api: {
-          get id() {
-            return 'dashboard-sidebar';
-          }
+  getMenu = route => new Promise(resolve => {
+    const service = {
+      url: '/ui/api/v1/menu/get',
+      parameters: [{
+        name: 'id',
+        value: route.menu,
+        httpParameterType: 'QUERY_PARAMETER'
+      }, {
+        name: 'version',
+        value: 1.0,
+        httpParameterType: 'QUERY_PARAMETER'
+      }],
+      contentType: 'application/json'
+    };
+    (0, _RestUtils.invokeRest)(service, {
+      api: {
+        get id() {
+          return 'dashboard-sidebar';
         }
-      }, 'dashboard-sidebar', result => {
-        resolve(this.getViews(result.menus, route.level + 1));
-      }, e => {
-        console.error(e);
-        resolve(null);
-      }, null);
-    });
-  };
-  getLiClassName = prop => {
-    return "li-" + prop.level;
-  };
+      }
+    }, 'dashboard-sidebar', result => resolve(this.getViews(result.menus, route.level + 1)), e => {
+      console.error(e);
+      resolve(null);
+    }, null);
+  });
+  getLiClassName = prop => 'li-' + prop.level;
 
-  // this function creates the links and collapses that appear in the sidebar (left menu)
+  /* ----------------- link rendering ----------------- */
   createLinks = routes => {
     const {
-      rtlActive,
       secondaryThemeColor
     } = this.props;
     return routes.map((prop, key) => {
-      if (prop.redirect) {
-        return null;
-      }
+      if (prop.redirect) return null;
       if ((prop.collapse || prop.isParent) && prop.name !== 'Dashboard' && prop.name !== 'My Work Items') {
-        var st = {};
-        st[prop['state']] = !this.state[prop.state];
+        const st = {
+          [prop.state]: !this.state[prop.state]
+        };
         return /*#__PURE__*/_react.default.createElement("li", {
           className: prop.collapse ? this.getCollapseInitialState(prop.views) + '-' + prop.level ? 'active ' + this.getLiClassName(prop) : this.getLiClassName(prop) : this.getLiClassName(prop),
           key: key
@@ -175,7 +155,6 @@ class FoldingTabSidebar extends _react.default.Component {
               this.getMenu(prop).then(views => {
                 if (views) {
                   prop.views = views;
-                  //this.getCollapseInitialState(views);
                   this.setState(st);
                 }
               });
@@ -189,29 +168,29 @@ class FoldingTabSidebar extends _react.default.Component {
           style: {
             width: '28px'
           }
-        }), ' ', /*#__PURE__*/_react.default.createElement("span", null, ' ', prop.name, ' ', prop.collapse ? /*#__PURE__*/_react.default.createElement("span", {
+        }), ' ', /*#__PURE__*/_react.default.createElement("span", null, prop.name, " ", prop.collapse ? /*#__PURE__*/_react.default.createElement("span", {
           className: "caret",
           style: {
-            marginTop: '0'
+            marginTop: 0
           }
-        }) : null), ' ', ' ') : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+        }) : null)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
           className: "sidebar-normal",
           style: {
             paddingLeft: '4px'
           }
-        }, ' ', prop.name, ' ', /*#__PURE__*/_react.default.createElement("b", {
+        }, prop.name, " ", /*#__PURE__*/_react.default.createElement("b", {
           className: "caret"
-        })), ' '), ' '), ' ', prop.collapse && prop.views ? /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
+        })))), prop.collapse && prop.views ? /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
           isOpen: this.state[prop.state]
         }, /*#__PURE__*/_react.default.createElement("ul", {
           className: "nav"
-        }, " ", this.createLinks(prop.views), " "), ' ') : null);
+        }, this.createLinks(prop.views))) : null);
       }
       return /*#__PURE__*/_react.default.createElement("li", {
         className: `${'menu-link-li' + (this.activeRoute(prop.id) ? '-active' : '') + (prop.name === 'Dashboard' ? ' dashboard-link' : '')}`,
         key: key,
         style: this.activeRoute(prop.id) ? {
-          backgroundColor: (0, _material.lighten)(secondaryThemeColor, .9),
+          backgroundColor: (0, _material.lighten)(secondaryThemeColor, 0.9),
           borderRadius: '16px',
           color: secondaryThemeColor,
           fontWeight: 500
@@ -231,30 +210,21 @@ class FoldingTabSidebar extends _react.default.Component {
         autoClick: prop.name === 'My Work Items' || prop.item && prop.item.defaultItem,
         viewId: "menuBar",
         icon: prop.icon,
-        iconColor: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && this.activeRoute(prop.id) ? secondaryThemeColor : null,
-        backgroundColor: this.activeRoute(prop.id) ? (0, _material.lighten)(secondaryThemeColor, .9) : null,
+        iconColor: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && this.activeRoute(prop.id) ? this.props.secondaryThemeColor : null,
+        backgroundColor: this.activeRoute(prop.id) ? (0, _material.lighten)(this.props.secondaryThemeColor, 0.9) : null,
         name: prop.name,
         id: prop.id,
         level: prop.level,
         tab: TAB,
-        color: this.activeRoute(prop.id) ? secondaryThemeColor : null
-      }), ' ');
+        color: this.activeRoute(prop.id) ? this.props.secondaryThemeColor : null
+      }));
     });
   };
-  // verifies if routeName is the one active (in browser input)
-  activeRoute = routeName => {
-    // return this.props.location.pathname.indexOf(routeName) > -1 ? "active" : "";
-    return this.state.activeRouteMenu.id === routeName;
-  };
+  activeRoute = routeName => this.state.activeRouteMenu.id === routeName;
+
+  /* ----------------- lifecycle ----------------- */
   componentDidMount() {
-    // if you are using a Windows Machine, the scrollbars will have a Mac look
-    if (navigator.platform.indexOf('Win') > -1) {
-      /*ps = new PerfectScrollbar(this.refs.sidebar, {
-          suppressScrollX: true,
-          suppressScrollY: false,
-      });*/
-    }
-    let service = {
+    const service = {
       url: '/ui/api/v1/menu/filter',
       parameters: [{
         value: this.props.routes,
@@ -269,128 +239,64 @@ class FoldingTabSidebar extends _react.default.Component {
           return 'dashboard-sidebar';
         }
       }
-    }, 'dashboard-sidebar', result => {
-      this.setState({
-        ...this.state,
-        routes: result
-      });
-    }, e => {
-      console.error(e);
-    }, null);
+    }, 'dashboard-sidebar', result => this.setState({
+      ...this.state,
+      routes: result
+    }), e => console.error(e), null);
   }
   componentWillUnmount() {
-    // we need to destroy the false scrollbar when we navigate
-    // to a page that doesn't have this component rendered
-    if (navigator.platform.indexOf('Win') > -1) {
-      //ps.destroy();
-    }
+    /* cleanup any custom scroll plugins if you add them */
   }
+
+  /* ----------------- render ----------------- */
   render() {
     const {
       activeColor,
-      logo
+      logo,
+      className,
+      heading,
+      appLogoPath
     } = this.props;
+    const routes = this.state.routes;
     let logoImg = null;
-    let logoText = null;
     if (!_Utils.default.isNull(logo)) {
       logoImg = /*#__PURE__*/_react.default.createElement("a", {
         href: logo.outterLink,
-        className: "logo-normal",
-        onClick: this.props.closeSidebar
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "logo-img",
-        style: {
-          paddingTop: '16px',
-          paddingBottom: '8px'
-        }
+        className: "sidebar__brand",
+        onClick: this.props.closeSidebar,
+        "aria-label": "Home",
+        style: this.props.logoStyle
       }, /*#__PURE__*/_react.default.createElement("img", {
         src: logo.imgSrc,
-        alt: "logo"
-      })), ' ');
-      logoText = /*#__PURE__*/_react.default.createElement("a", {
-        href: logo.outterLink,
-        className: "simple-text ",
-        onClick: this.props.closeSidebar
-      }, logo.text, ' ');
+        alt: "logo",
+        className: "sidebar__brand-img"
+      }));
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: this.props.className,
-      data: activeColor,
-      style: {
-        overflow: 'hidden',
-        maxHeight: '100vh'
-      }
-    }, /*#__PURE__*/_react.default.createElement("table", {
-      style: {
-        height: '96%',
-        maxHeight: '100%',
-        width: '100%'
-      }
-    }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
-      style: {
-        height: '10%'
-      }
-    }, ' ', logoImg !== null ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "logo",
-      style: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100%'
-      }
-    }, ' ', logoImg, ' ') : null, ' ', !_Utils.default.isNull(this.props.heading) ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "logo",
-      style: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100%',
-        fontSize: '20px',
-        fontWeight: 600
-      }
-    }, this.props.heading) : null)), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
-      style: {
-        height: '70%'
-      },
-      valign: 'top'
-    }, this.state.routes && /*#__PURE__*/_react.default.createElement(_reactstrap.Nav, {
-      style: {
-        margin: '8px',
-        padding: '16px'
-      },
-      className: 'nav-wrapper'
-    }, this.createLinks(this.state.routes)))), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
-      className: 'sidebar-app-logo-wrapper',
-      style: {
-        height: '10%'
-      },
-      valign: 'top'
+    return /*#__PURE__*/_react.default.createElement("aside", {
+      className: `${className || ''} sidebar`,
+      data: activeColor
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: 'sidebar-app-logo',
-      style: {
-        justifyContent: 'center',
-        height: '92px'
-      }
-    }, !_Utils.default.isNull(this.props.appLogoPath) ? /*#__PURE__*/_react.default.createElement("div", {
-      className: 'product-logo',
-      style: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      }
+      className: "sidebar__top"
+    }, logoImg ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "sidebar__logo"
+    }, logoImg) : null, !_Utils.default.isNull(heading) ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "sidebar__heading"
+    }, heading) : null), /*#__PURE__*/_react.default.createElement("div", {
+      className: "sidebar__scroll"
+    }, routes ? /*#__PURE__*/_react.default.createElement(_reactstrap.Nav, {
+      className: "nav-wrapper"
+    }, this.createLinks(routes)) : null), /*#__PURE__*/_react.default.createElement("div", {
+      className: "sidebar__bottom"
+    }, !_Utils.default.isNull(appLogoPath) ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "sidebar__app-logo"
     }, /*#__PURE__*/_react.default.createElement(_CardAvatar.default, {
       plain: true
     }, /*#__PURE__*/_react.default.createElement("img", {
-      src: this.props.appLogoPath,
-      alt: "..."
+      src: appLogoPath,
+      alt: ""
     }))) : null, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginTop: '8px'
-      }
-    }, "Copyrights \xA9 ", 1900 + new Date().getYear(), " ", ' ')))))));
+      className: "sidebar__copyright"
+    }, "\xA9 ", new Date().getFullYear())));
   }
 }
 FoldingTabSidebar.propTypes = {
@@ -407,7 +313,9 @@ FoldingTabSidebar.propTypes = {
     imgSrc: _propTypes.default.string.isRequired,
     text: _propTypes.default.string.isRequired
   })]),
-  // this is used on responsive to close the sidebar on route navigation
-  closeSidebar: _propTypes.default.func
+  heading: _propTypes.default.string,
+  appLogoPath: _propTypes.default.string,
+  closeSidebar: _propTypes.default.func,
+  dashboardLauncher: _propTypes.default.func
 };
 var _default = exports.default = FoldingTabSidebar;

package/dist/components/form/BaseField.js

@@ -169,7 +169,7 @@ const BaseField = props => {
     }
     if (valueChanged) {
       let id = props.config.dataBinding ? props.config.dataBinding : props.config.id;
-      _ApplicationManager.default.enableFormMarkers(true);
+      //applicationManager.enableFormMarkers(true);
       if (props.config.fieldType === 'SELECT') {
         let selectItemChange = props.form().handleSelectItemChange(id, selectOptions, newValue);
         setValue(selectItemChange);

package/dist/components/form/Form.css

@@ -1,8 +1,7 @@
 .defaultForm {
     max-height: inherit;
-    padding-top: 16px;
-    padding-left: 48px;
-    padding-right: 32px;
+    padding: 16px 32px 64px 32px;
+    height: auto;
 }
 
 .defaultForm .col{

package/dist/components/form/Form.js

@@ -17,6 +17,7 @@ var _ServiceCallActionHandler = _interopRequireDefault(require("../../event/Serv
 var _DynamicJS = _interopRequireDefault(require("../../DynamicJS"));
 var _EventType = _interopRequireDefault(require("../../event/EventType"));
 var _Event = _interopRequireDefault(require("../../event/Event"));
+var _clear = require("@testing-library/user-event/dist/clear");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _styles.makeStyles)(theme => ({
   container: {
@@ -138,7 +139,7 @@ const Form = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwar
             }
             let fieldValid = field.handle.api.validate(values.current, null);
             if (fieldValid === false || _Utils.default.isNull(fieldValid)) {
-              console.log("Invalid form field [" + field.handle.api.id + "]");
+              //console.log("Invalid form field [" + field.handle.api.id + "]");
               if (firstInvalidField == null) {
                 firstInvalidField = field;
               }
@@ -234,6 +235,7 @@ const Form = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwar
     let service = !_Utils.default.isNull(componentConfig.dataService) ? componentConfig.dataService : eventConfig !== null ? eventConfig.dataService : null;
     let componentValue = !_Utils.default.isNull(componentConfig.value) ? _ApplicationManager.default.resolveParameterConfigValue(componentConfig.value, eventData) : eventConfig !== null ? _ApplicationManager.default.resolveParameterConfigValue(eventConfig.value, eventData) : null;
     if (!_Utils.default.isNull(service)) {
+      doClear();
       if (service.type === 'rpc') {
         (0, _RestService.invokeRpc)({
           service: service,
@@ -411,6 +413,7 @@ const Form = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwar
     return formValues;
   };
   function doClear() {
+    _ApplicationManager.default.enableFormMarkers(false);
     for (let i = 0; i < fields.length; i++) {
       let field = fields[i];
       field.handle.api.clear();
@@ -419,6 +422,7 @@ const Form = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwar
     if (!_Utils.default.isNull(props.valueChangeHandler)) {
       props.valueChangeHandler({});
     }
+    _ApplicationManager.default.enableFormMarkers(true);
   }
   function doBindData(data) {
     if (!_Utils.default.isNull(data)) {

package/dist/components/layout/Layout.css

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

package/dist/components/layout/Layout.js

@@ -33,6 +33,8 @@ var _Chart = _interopRequireDefault(require("../Chart"));
 var _FacialRegistration = _interopRequireDefault(require("../facialRecognition/FacialRegistration"));
 var _FacialVerification = _interopRequireDefault(require("../facialRecognition/FacialVerification"));
 var _Spinner = _interopRequireDefault(require("../Spinner"));
+require("./Layout.css");
+var _Chat = _interopRequireDefault(require("../media/Chat"));
 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; }
@@ -132,7 +134,7 @@ const Layout = props => {
             handle: createComponentHandle(component),
             key: index,
             viewId: props.viewId,
-            className: 'defaultForm'
+            className: _Utils.default.getComponentAttribute(component, 'className', 'defaultForm')
           });
         case 'htmlPanel':
           return /*#__PURE__*/_react.default.createElement(_HtmlPanel.default, {
@@ -196,6 +198,13 @@ const Layout = props => {
             key: index,
             viewId: props.viewId
           });
+        case 'chat':
+          return /*#__PURE__*/_react.default.createElement(_Chat.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            key: index,
+            viewId: props.viewId
+          });
         case 'userVideo':
           return /*#__PURE__*/_react.default.createElement(_Video.default, {
             config: component,

package/dist/components/layout/View.css

@@ -1,11 +1,29 @@
-.view {
+:root { --header-h: 72px; --view-header-h: 112px; --view-header-min: 112px}
+
+.view {
     padding: 0 32px;
     background-color: #ffffff;
     border-radius: 4px;
 }
 
+.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;
+}
+
+.view .scrolling-body {
+    block-size: calc(100dvh - var(--header-h) - var(--view-header-h, var(--view-header-min)) - 64px) !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-block-size: 0;
+    padding: 0 0 16px 0 !important;
+}
+
 .window-unpinned .view {
-    width: 0 !important;;
+    width: 0 !important;
 }
 
 .window-pinned .view {
@@ -71,10 +89,6 @@
         padding: 0 !important;
     }
 
-    .defaultForm {
-        margin: 0;
-    }
-
     .oui-form-item {
         min-width: 232px !important;
     }

package/dist/components/layout/View.js

@@ -23,6 +23,7 @@ const View = props => {
   const [model] = _react.default.useState({});
   const loadingRef = _react.default.useRef(true);
   const paramsLoaded = _react.default.useRef(false);
+  const viewRef = _react.default.useRef(null);
   function registerInlineScriptLibraries() {
     if (!_Utils.default.isNull(props.config.lib)) {
       let libName = props.config.id + '_lib';
@@ -104,8 +105,37 @@ const View = props => {
     if (props.loadCallback) {
       props.loadCallback();
     }
+    const el = viewRef.current;
+    let ro;
+    if (el) {
+      let componentAttribute = _Utils.default.getComponentAttribute(props.config, 'headerHeight', null);
+      if (componentAttribute != null) {
+        const val = _Utils.default.normalizeCssSize(componentAttribute, "0");
+        el.style.setProperty("--view-header-h", val);
+        el.style.setProperty("--view-header-min", val);
+      }
+      const headerEl = el.querySelector('.sticky-header');
+      if (headerEl) {
+        // initialize the var to the floor so layout is valid before first callback
+        const floor = getComputedStyle(el).getPropertyValue('--view-header-min')?.trim() || '112px';
+        el.style.setProperty('--view-header-h', floor);
+        ro = new ResizeObserver(_ref => {
+          let [entry] = _ref;
+          // prefer borderBoxSize when available
+          const h = entry.borderBoxSize?.[0]?.blockSize ?? entry.borderBoxSize?.blockSize ?? entry.contentBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
+          el.style.setProperty('--view-header-h', `${h}px`);
+        });
+        ro.observe(headerEl);
+      }
+    }
     return () => {
       _Observable.default.clearEventListeners(props.config.id);
+      if (el) {
+        el.style.removeProperty("--view-header-h");
+      }
+      if (ro) {
+        ro.disconnect();
+      }
     };
   }, []);
   function render(layout) {
@@ -174,7 +204,8 @@ const View = props => {
     style: _Utils.default.mergeStyles({
       minWidth: '128px',
       height: '100%'
-    }, props.config)
+    }, props.config),
+    ref: viewRef
   }, render(props.config.layout));
 };
 exports.View = View;