@oracle/oraclejet 11.0.1 → 11.0.5

package/dist/js/libs/oj/debug_esm/ojselectcombobox.js

@@ -5310,6 +5310,12 @@ const _AbstractOjChoice = _ComboUtils.clazz(Object,
 
       //  - press escape after search in select causes select to become unresponsive
       $.removeData(this.container, this._classNm + '-last-term');
+
+      // JET-46223 - search field is not displayed after entering text with no search results
+      // When the dropdown is closed, the ojContext._resultsCount property need to be reseted.
+      // This way we can make sure that the stale value is not used when the dropdown is opened
+      // again and we need to figure out whether or not to show the search field.
+      delete this.ojContext._resultCount;
     },
 
 
@@ -7150,7 +7156,6 @@ const _AbstractMultiChoice = _ComboUtils.clazz(_AbstractOjChoice,
           this._focusSearch();
         }
       }
-      event.preventDefault();
     },
 
     /**

package/dist/js/libs/oj/debug_esm/ojtable.js

@@ -10600,7 +10600,10 @@ Table.prototype._createTableBodyMessageRow = function (columnCount, message) {
  * @private
  */
 Table.prototype._createTableBodyRow = function () {
-  return document.createElement(Table.DOM_ELEMENT._TR); // @HTMLUpdateOK
+  var row = document.createElement(Table.DOM_ELEMENT._TR); // @HTMLUpdateOK
+  // need to ensure we wait for child busy states of deferred contents to clear properly
+  row._ojReportBusy = this._getTableBody();
+  return row;
 };
 
 /**

package/dist/js/libs/oj/debug_esm/ojthemeutils.js

@@ -268,7 +268,7 @@ const getRootCssVarValue = ((key) => {
     ThemeUtils._rootCSSStyles = window.getComputedStyle(document.documentElement);
   }
   // remove inconsistent quotes
-  return ThemeUtils._rootCSSStyles.getPropertyValue(key).replace(/^['"\s]+|\s+|\\|(;\s?})+|['"]$/g, '');
+  return ThemeUtils._rootCSSStyles.getPropertyValue(key).replace(/^['"\s]+|\s+|\\|(;\s?})+|['"\s]$/g, '');
   });
 /**
  * Returns the css var values

package/dist/js/libs/oj/debug_esm/ojvcollection.js

@@ -51,6 +51,10 @@ class DataProviderContentHandler {
             this.dataProvider.removeEventListener('refresh', this.modelEventHandler);
         }
     }
+    renderNoData() {
+        this.setFetching(false);
+        return [];
+    }
     render(data) {
         return this.renderFetchedData(data);
     }

package/dist/js/libs/oj/debug_esm/ojvcomponent-template.js

@@ -13,6 +13,7 @@ import { Component, h, Fragment, render } from 'preact';
 import { executeFragment as executeFragment$1 } from 'ojs/ojvcomponent-template';
 import Context from 'ojs/ojcontext';
 import { withDataProvider } from 'ojs/ojdataproviderhandler';
+import { getPropagationMetadataViaCache } from 'ojs/ojbindpropagation';
 
 class Props {
 }
@@ -92,6 +93,16 @@ class BindForEachWithArray extends Component {
 const BINDING_PROVIDER = Symbol();
 const COMPONENT_ELEMENT = Symbol();
 const UNWRAP_EXTRAS = Symbol();
+const _DEFAULT_UNWRAP = function (target) {
+    return target;
+};
+const _PROVIDED_KEY = '$provided';
+const _CONTEXT_PARAM = [
+    {
+        type: 1,
+        name: '$context'
+    }
+];
 class VTemplateEngine {
     constructor() {
         this._templateAstCache = new WeakMap();
@@ -320,9 +331,11 @@ class VTemplateEngine {
             };
         });
     }
-    _createElementNode(engineContext, node, name, extraProps) {
+    _createElementNode(engineContext, node) {
         var props = this._getElementProps(engineContext, node);
-        props = extraProps ? props.concat(extraProps) : props;
+        const tagName = node.tagName;
+        const localName = tagName.toLowerCase();
+        const metadataProps = CustomElementUtils.getPropertiesForElementTag(tagName);
         return {
             type: 4,
             callee: {
@@ -332,16 +345,96 @@ class VTemplateEngine {
             arguments: [
                 {
                     type: 3,
-                    value: name || node.tagName.toLowerCase()
-                },
-                {
-                    type: 10,
-                    properties: props
+                    value: localName
                 },
+                this._createPossiblyProvidedAndConsumedProperties(localName, engineContext, metadataProps, props),
                 this._createAst(engineContext, Array.from(node.childNodes))
             ]
         };
     }
+    _createPossiblyProvidedAndConsumedProperties(localTagName, engineContext, metadataProps, props) {
+        const propertyObjectNode = {
+            type: 10,
+            properties: props
+        };
+        const provideConsumeMeta = getPropagationMetadataViaCache(localTagName, metadataProps);
+        if (!provideConsumeMeta) {
+            return propertyObjectNode;
+        }
+        const specifiedProps = new Set();
+        props.reduce((acc, def) => acc.add(def.key), specifiedProps);
+        const consumingProps = [];
+        for (const [pName, meta] of provideConsumeMeta) {
+            const consumeMeta = meta[1];
+            if (consumeMeta) {
+                if (!(specifiedProps.has(pName) ||
+                    specifiedProps.has(AttributeUtils.propertyNameToAttribute(pName).toUpperCase()))) {
+                    const unwrap = this._getUnwrapObservable(engineContext);
+                    consumingProps.push({
+                        key: pName,
+                        value: this._createCallNodeWithContext(($ctx) => { var _a, _b; return unwrap((_b = (_a = unwrap($ctx)) === null || _a === void 0 ? void 0 : _a[_PROVIDED_KEY]) === null || _b === void 0 ? void 0 : _b[consumeMeta.name]); })
+                    });
+                }
+            }
+        }
+        const propertyObjNodeWithConsumers = consumingProps.length === 0
+            ? propertyObjectNode
+            : { type: 10, properties: propertyObjectNode.properties.concat(consumingProps) };
+        return this._createCallNodeWithContext(($ctx, resolvedProps) => {
+            let provided = {};
+            let hasProvided;
+            for (const [pName, [provideMeta]] of provideConsumeMeta) {
+                if (provideMeta) {
+                    provideMeta.forEach((info) => {
+                        var _a;
+                        let propVal;
+                        let isSet = true;
+                        if (resolvedProps.hasOwnProperty(pName)) {
+                            propVal = resolvedProps[pName];
+                        }
+                        else {
+                            const attr = AttributeUtils.propertyNameToAttribute(pName);
+                            const uppercaseAttr = attr.toUpperCase();
+                            if (resolvedProps.hasOwnProperty(uppercaseAttr)) {
+                                propVal = resolvedProps[uppercaseAttr];
+                                const type = (_a = metadataProps === null || metadataProps === void 0 ? void 0 : metadataProps[pName]) === null || _a === void 0 ? void 0 : _a.type;
+                                if (type && propVal != null) {
+                                    propVal = AttributeUtils.parseAttributeValue(localTagName, attr, propVal, type);
+                                }
+                            }
+                            else {
+                                isSet = false;
+                            }
+                        }
+                        const defaultKey = 'default';
+                        if (!isSet) {
+                            if (info.hasOwnProperty(defaultKey)) {
+                                propVal = info[defaultKey];
+                                isSet = true;
+                            }
+                        }
+                        else {
+                            const transform = info.transform;
+                            propVal =
+                                transform && transform.hasOwnProperty(propVal) ? transform[propVal] : propVal;
+                        }
+                        if (isSet) {
+                            hasProvided = true;
+                            provided[info.name] = propVal;
+                        }
+                    });
+                }
+            }
+            if (hasProvided) {
+                const oldProvided = $ctx[_PROVIDED_KEY];
+                if (oldProvided !== undefined) {
+                    provided = Object.assign({}, oldProvided, provided);
+                }
+                $ctx[_PROVIDED_KEY] = provided;
+            }
+            return resolvedProps;
+        }, [propertyObjNodeWithConsumers]);
+    }
     _createBindDomExpressionNode(engineContext, node) {
         if (!node.hasAttribute('config')) {
             throw new Error("Missing the required 'config' attribute on <oj-bind-dom>");
@@ -405,7 +498,8 @@ class VTemplateEngine {
     _getElementProps(engineContext, node) {
         let styleValue;
         const dotStyleValues = [];
-        const writebacks = [];
+        const dottedExpressions = [];
+        const writebacks = new Map();
         const listeners = new Map();
         const attrNodes = Array.prototype.reduce.call(node.attributes, (acc, attr) => {
             let name = attr.name;
@@ -442,12 +536,33 @@ class VTemplateEngine {
                     acc.push(this._createPropertyNode(engineContext, AttributeUtils.getGlobalPropForAttr(name), value));
                 }
                 else {
-                    const hasDottedProps = name.indexOf('.') >= 0;
                     if (expValue.expr) {
-                        acc.push({
-                            key: hasDottedProps ? name : AttributeUtils.attributeToPropertyName(name),
-                            value: this._createExpressionEvaluator(engineContext, expValue.expr)
-                        });
+                        const propName = AttributeUtils.attributeToPropertyName(name);
+                        if (propName.indexOf('.') >= 0) {
+                            dottedExpressions.push({ subProps: propName, expr: expValue.expr });
+                        }
+                        else {
+                            acc.push({
+                                key: propName,
+                                value: this._createExpressionEvaluator(engineContext, expValue.expr)
+                            });
+                        }
+                        if (!expValue.downstreamOnly) {
+                            let subProps = propName.split('.');
+                            const topProp = subProps.shift();
+                            let valuesArray = writebacks.get(topProp);
+                            if (valuesArray) {
+                                let newValuesArray = [
+                                    ...valuesArray,
+                                    { expr: expValue.expr, subProps: subProps }
+                                ];
+                                valuesArray = newValuesArray;
+                            }
+                            else {
+                                valuesArray = [{ expr: expValue.expr, subProps: subProps }];
+                            }
+                            writebacks.set(topProp, valuesArray);
+                        }
                     }
                     else {
                         acc.push({
@@ -456,9 +571,6 @@ class VTemplateEngine {
                         });
                     }
                 }
-                if (expValue.expr && !expValue.downstreamOnly) {
-                    writebacks.push({ name, value: expValue.expr });
-                }
             }
             return acc;
         }, []);
@@ -480,14 +592,17 @@ class VTemplateEngine {
                 }
             });
         }
-        writebacks.forEach((writebackProp) => {
+        if (dottedExpressions.length > 0) {
+            this._createRefPropertyNodeForNestedProps(engineContext, dottedExpressions, attrNodes);
+        }
+        writebacks.forEach((valuesArray, name) => {
             var _a;
-            const propName = `on${writebackProp.name}Changed`;
+            const propName = `on${name}Changed`;
             const callbackPropExpr = listeners.get(propName);
             if (callbackPropExpr) {
                 listeners.delete(propName);
             }
-            attrNodes.push(this._createWritebackPropertyNode(engineContext, propName, writebackProp.value, (_a = AttributeUtils.getExpressionInfo(callbackPropExpr)) === null || _a === void 0 ? void 0 : _a.expr));
+            attrNodes.push(this._createWritebackPropertyNode(engineContext, propName, valuesArray, (_a = AttributeUtils.getExpressionInfo(callbackPropExpr)) === null || _a === void 0 ? void 0 : _a.expr));
         });
         listeners.forEach((value, name) => {
             const info = AttributeUtils.getExpressionInfo(value);
@@ -497,29 +612,65 @@ class VTemplateEngine {
         });
         return attrNodes;
     }
-    _createWritebackPropertyNode(engineContext, propName, propExpr, existingCallbackExpr) {
-        let propExprEvaluator;
+    _createRefPropertyNodeForNestedProps(engineContext, dottedExpressions, attrNodes) {
+        const bp = engineContext[BINDING_PROVIDER];
+        const propExprEvaluators = [];
+        attrNodes.push({
+            key: 'ref',
+            value: this._createCallNodeWithContext((bindingContext) => {
+                const resolvedSubPropValues = [];
+                dottedExpressions.forEach((item, index) => {
+                    let propExprEvaluator = propExprEvaluators[index];
+                    if (!propExprEvaluator) {
+                        propExprEvaluator = this._cspEvaluator.createEvaluator(item.expr).evaluate;
+                        propExprEvaluators.push(propExprEvaluator);
+                    }
+                    const propValue = propExprEvaluator([bindingContext, bindingContext.$data]);
+                    const unwrappedValue = bp ? bp.__UnwrapObservable(propValue) : propValue;
+                    resolvedSubPropValues.push({ [item.subProps]: unwrappedValue });
+                });
+                return (refObj) => {
+                    if (refObj && refObj.setProperties) {
+                        const updatedProps = Object.assign({}, ...resolvedSubPropValues);
+                        refObj.setProperties(updatedProps);
+                    }
+                };
+            })
+        });
+    }
+    _createWritebackPropertyNode(engineContext, propName, valuesArray, existingCallbackExpr) {
+        const propExprEvaluators = [];
         let callbackExprEvaluator;
         return {
             key: propName,
             value: this._createCallNodeWithContext((bindingContext) => {
                 return (event) => {
-                    if (!propExprEvaluator) {
-                        propExprEvaluator = this._cspEvaluator.createEvaluator(propExpr).evaluate;
-                    }
-                    const value = propExprEvaluator([bindingContext, bindingContext.$data]);
-                    if (engineContext[BINDING_PROVIDER] &&
-                        engineContext[BINDING_PROVIDER].__IsObservable(value)) {
-                        value(event.detail.value);
-                    }
-                    else {
-                        const writerExpr = this._getPropertyWriterExpression(propExpr);
-                        if (writerExpr !== null) {
-                            const writerEvaluator = this._cspEvaluator.createEvaluator(writerExpr).evaluate;
-                            const func = this._getWriter(writerEvaluator([bindingContext.$data || {}, bindingContext]));
-                            func(event.detail.value);
+                    valuesArray.forEach((propItem, index) => {
+                        let newValue = event.detail.value;
+                        var subProps = propItem.subProps;
+                        var propExpr = propItem.expr;
+                        if (subProps.length > 0 && typeof newValue === 'object') {
+                            newValue = subProps.reduce((acc, cur) => acc[cur], newValue);
                         }
-                    }
+                        let propExprEvaluator = propExprEvaluators[index];
+                        if (!propExprEvaluator) {
+                            propExprEvaluator = this._cspEvaluator.createEvaluator(propExpr).evaluate;
+                            propExprEvaluators.push(propExprEvaluator);
+                        }
+                        const value = propExprEvaluator([bindingContext, bindingContext.$data]);
+                        if (engineContext[BINDING_PROVIDER] &&
+                            engineContext[BINDING_PROVIDER].__IsObservable(value)) {
+                            value(newValue);
+                        }
+                        else {
+                            const writerExpr = this._getPropertyWriterExpression(propExpr);
+                            if (writerExpr !== null) {
+                                const writerEvaluator = this._cspEvaluator.createEvaluator(writerExpr).evaluate;
+                                const func = this._getWriter(writerEvaluator([bindingContext.$data || {}, bindingContext]));
+                                func(newValue);
+                            }
+                        }
+                    });
                     if (existingCallbackExpr && !callbackExprEvaluator) {
                         callbackExprEvaluator = this._cspEvaluator.createEvaluator(existingCallbackExpr)
                             .evaluate;
@@ -560,29 +711,28 @@ class VTemplateEngine {
     _createExpressionEvaluator(engineContext, exp, postprocess) {
         const delegateEvaluator = this._cspEvaluator.createEvaluator(exp).evaluate;
         return this._createCallNodeWithContext(($context) => {
-            const bp = engineContext[BINDING_PROVIDER];
-            const context = bp ? bp.__UnwrapObservable($context) : $context;
+            const unwrap = this._getUnwrapObservable(engineContext);
+            const context = unwrap($context);
             const value = delegateEvaluator([context, context.$data]);
-            let unwrapped = bp ? bp.__UnwrapObservable(value) : value;
+            let unwrapped = unwrap(value);
             if (engineContext[UNWRAP_EXTRAS]) {
                 unwrapped = engineContext[UNWRAP_EXTRAS](exp, unwrapped);
             }
             return postprocess ? postprocess(unwrapped) : unwrapped;
         });
     }
-    _createCallNodeWithContext(callback) {
+    _getUnwrapObservable(engineContext) {
+        const bp = engineContext[BINDING_PROVIDER];
+        return bp ? bp.__UnwrapObservable : _DEFAULT_UNWRAP;
+    }
+    _createCallNodeWithContext(callback, extaArgs) {
         return {
             type: 4,
             callee: {
                 type: 3,
                 value: callback
             },
-            arguments: [
-                {
-                    type: 1,
-                    name: '$context'
-                }
-            ]
+            arguments: extaArgs ? _CONTEXT_PARAM.concat(extaArgs) : _CONTEXT_PARAM
         };
     }
     _getWriter(evaluator) {

package/dist/js/libs/oj/debug_esm/ojvcomponent.js

@@ -1316,6 +1316,11 @@ class SlotReplacerElement extends HTMLElement {
         if (slot) {
             this.parentElement.replaceChild(slot, this);
         }
+        const once = this[_ON_FIRST_INSERT];
+        if (once) {
+            once();
+            this[_ON_FIRST_INSERT] = null;
+        }
     }
     get parentNode() {
         const delegate = this[OJ_SLOT];
@@ -1331,9 +1336,13 @@ class SlotReplacerElement extends HTMLElement {
     }
 }
 customElements.define('oj-slot-replacer', SlotReplacerElement);
+const _ON_FIRST_INSERT = Symbol();
 function _getReplacerRef(slotNode, handleSlotMount, handleSlotUnmount) {
     let _activeReplacer;
     let _count = 0;
+    const onInitialInsert = () => {
+        handleSlotMount(slotNode);
+    };
     return (replacerElem) => {
         if (replacerElem != null) {
             _count++;
@@ -1343,9 +1352,14 @@ function _getReplacerRef(slotNode, handleSlotMount, handleSlotUnmount) {
             _activeReplacer = slotNode[OJ_REPLACER] = replacerElem;
             const parent = replacerElem.parentElement;
             patchSlotParent(parent);
-            parent.replaceChild(slotNode, replacerElem);
-            handleSlotMount(slotNode);
             replacerElem[OJ_SLOT] = slotNode;
+            if (replacerElem.isConnected) {
+                parent.replaceChild(slotNode, replacerElem);
+                onInitialInsert();
+            }
+            else {
+                replacerElem[_ON_FIRST_INSERT] = onInitialInsert;
+            }
         }
         else {
             _count--;
@@ -1555,8 +1569,8 @@ class IntrinsicElement {
             this._element[name] = value;
         }
         else {
-            value = CustomElementUtils.convertEmptyStringToUndefined(this._element, meta, value);
             if (this._state.allowPropertySets()) {
+                value = CustomElementUtils.convertEmptyStringToUndefined(this._element, meta, value);
                 this._updatePropsAndQueueRenderAsNeeded(name, value, meta);
             }
             else {
@@ -1690,12 +1704,8 @@ class IntrinsicElement {
         if (needRendering && !this._isRenderQueued) {
             this._isRenderQueued = true;
             window.queueMicrotask(() => {
-                try {
-                    this._render();
-                }
-                finally {
-                    this._isRenderQueued = false;
-                }
+                this._isRenderQueued = false;
+                this._render();
             });
         }
     }
@@ -1846,9 +1856,12 @@ class IntrinsicElement {
         }
     }
     _playbackEarlyPropertySets() {
+        var _a;
         while (this._earlySets.length) {
             const setObj = this._earlySets.shift();
-            this.setProperty(setObj.property, setObj.value);
+            const meta = getPropertyMetadata(setObj.property, (_a = this._metadata) === null || _a === void 0 ? void 0 : _a.properties);
+            const updatedValue = CustomElementUtils.convertEmptyStringToUndefined(this._element, meta, setObj.value);
+            this.setProperty(setObj.property, updatedValue);
         }
     }
     _patchRootElement(newVNode) {

package/dist/js/libs/oj/debug_esm/ojvformgenerator.js

@@ -95,6 +95,7 @@ const LABELEDGE_INSIDE = 'inside';
 const LABELEDGE_NONE = 'none';
 const LABELEDGE_START = 'start';
 const LABELEDGE_TOP = 'top';
+const INITIAL_ROOTCLASSNAMES = 'oj-form-layout';
 const ROOTCLASSNAMES = 'oj-form-layout oj-formlayout-max-cols-';
 const NO_MIN_COLUMN_WIDTH = ' oj-form-layout-no-min-column-width';
 
@@ -146,7 +147,7 @@ class VCellGenerator extends Component {
         if (this.props.contentType === 'formLayout') {
             rootClassName += ' oj-formlayout-nested-formlayout';
         }
-        return (h("div", { class: rootClassName, style: wrapperStyle },
+        return (h("div", { class: rootClassName, style: wrapperStyle, key: props.cellKey },
             h(VLabeler, { labelText: this.props.labelText, labelEdge: this.props.labelEdge, labelWidth: this.props.labelWidth, colspan: this.props.colspan, totalColumns: this.props.totalColumns }, this.props.children)));
     }
     _getFullFlexItemWidth(colspan, columns) {
@@ -201,7 +202,7 @@ class VColumnFormGenerator extends Component {
                 }
                 labelEdge = this._themeDefault.labelEdge;
             }
-            rowContent = (h(VCellGenerator, { totalColumns: totalCols, labelText: item.labelText, labelEdge: labelEdge, labelWidth: item.labelWidth, contentType: item.contentType }, content));
+            rowContent = (h(VCellGenerator, { totalColumns: totalCols, labelText: item.labelText, labelEdge: labelEdge, labelWidth: item.labelWidth, contentType: item.contentType, cellKey: item.key }, content));
             formContent.push(h("div", { class: 'oj-flex', "data-oj-internal": true }, rowContent));
         }
         const styling = this._getColumnStyling(columns);
@@ -248,53 +249,78 @@ class VRowFormGenerator extends Component {
         this.formDivRef = createRef();
         this._resizeListener = this._resizeHandler.bind(this);
         this.state = {
-            columns: this.props.columns
+            availableColumns: 0
         };
     }
     render(props) {
         const cssColumnClasses = props.columns > 0 ? props.columns + NO_MIN_COLUMN_WIDTH : props.maxColumns;
-        let rootClassNames = ROOTCLASSNAMES + cssColumnClasses;
-        if (this.state.columns === 0) {
-            const emptyFormContent = this._getRowFormContent([]);
-            return (h("div", { class: rootClassNames, ref: this.formDivRef }, emptyFormContent));
-        }
-        else {
-            const formContent = this._getRowFormContent(this.props.formControls);
-            return (h("div", { class: rootClassNames, ref: this.formDivRef }, formContent));
-        }
+        const rootClassNames = ROOTCLASSNAMES + cssColumnClasses;
+        const formContent = this._getRowFormContent(this.props.formControls);
+        return (h("div", { class: rootClassNames, ref: this.formDivRef }, formContent));
     }
     componentDidMount() {
-        if (this.state.columns === 0) {
+        if (this._calculateColumns(0) === 0) {
             this.setState({
-                columns: this._calculateColumns(this.formDivRef.current)
+                availableColumns: this._calculateAvailableColumns(this.formDivRef.current)
+            });
+        }
+        addResizeListener(this.formDivRef.current, this._resizeListener, 25);
+    }
+    componentDidUpdate() {
+        if (this.state.availableColumns === 0 && this._calculateColumns(0) === 0) {
+            const form = this.formDivRef.current;
+            const rootClassNames = form.class;
+            form.class = INITIAL_ROOTCLASSNAMES;
+            const availCols = this._calculateAvailableColumns(form);
+            form.class = rootClassNames;
+            this.setState({
+                availableColumns: availCols
             });
-            addResizeListener(this.formDivRef.current, this._resizeListener, 25);
         }
     }
     componentWillUnmount() {
         removeResizeListener(this.formDivRef.current, this._resizeListener);
     }
     _resizeHandler() {
-        const newColumns = this._calculateColumns(this.formDivRef.current);
-        if (this.state.columns !== newColumns) {
-            this.setState({
-                columns: newColumns
-            });
+        if (this._calculateColumns(0) > 0) {
+            if (this.state.availableColumns > 0) {
+                this.setState({
+                    availableColumns: 0
+                });
+            }
+        }
+        else {
+            const form = this.formDivRef.current;
+            const rootClassNames = form.class;
+            form.class = INITIAL_ROOTCLASSNAMES;
+            const availCols = this._calculateAvailableColumns(form);
+            form.class = rootClassNames;
+            if (this.state.availableColumns !== availCols) {
+                this.setState({
+                    availableColumns: availCols
+                });
+            }
         }
     }
-    _calculateColumns(form) {
+    _calculateAvailableColumns(form) {
+        let availableCols = Math.max(this.props.maxColumns, 1);
+        let colWidth = parseFloat(window.getComputedStyle(form.querySelector('.oj-form')).columnWidth);
+        if (!isNaN(colWidth)) {
+            let totalWidth = this.formDivRef.current.getBoundingClientRect().width;
+            availableCols = Math.max(Math.floor(totalWidth / colWidth), 1);
+        }
+        return availableCols;
+    }
+    _calculateColumns(availableColumns) {
         let calculatedCols = Math.max(this.props.maxColumns, 1);
         const cols = this.props.columns;
         if (cols > 0) {
             calculatedCols = cols;
         }
-        else if (calculatedCols > 1) {
-            let colWidth = parseFloat(window.getComputedStyle(form.querySelector('.oj-form')).columnWidth);
-            if (!isNaN(colWidth)) {
-                let totalWidth = form.getBoundingClientRect().width;
-                let computedMaxCols = Math.max(Math.floor(totalWidth / colWidth), 1);
-                if (computedMaxCols < calculatedCols) {
-                    calculatedCols = computedMaxCols;
+        else {
+            if (calculatedCols > 1) {
+                if (availableColumns < calculatedCols) {
+                    calculatedCols = availableColumns;
                 }
             }
         }
@@ -303,7 +329,10 @@ class VRowFormGenerator extends Component {
     _getRowFormContent(childArray) {
         let formContent = [];
         let rowContent;
-        const cols = this.state.columns;
+        const cols = this._calculateColumns(this.state.availableColumns);
+        if (cols === 0) {
+            childArray = [];
+        }
         let cellCount = 0;
         let colspan;
         let totalCols;
@@ -342,7 +371,7 @@ class VRowFormGenerator extends Component {
                 }
                 labelEdge = this._themeDefault.labelEdge;
             }
-            rowContent.push(h(VCellGenerator, { colspan: colspan, totalColumns: totalCols, labelText: item.labelText, labelEdge: labelEdge, labelWidth: item.labelWidth, contentType: item.contentType }, content));
+            rowContent.push(h(VCellGenerator, { colspan: colspan, totalColumns: totalCols, labelText: item.labelText, labelEdge: labelEdge, labelWidth: item.labelWidth, contentType: item.contentType, cellKey: item.key }, content));
             cellCount += colspan;
             if (cellCount % cols !== 0) {
                 this._addColumnGutter(rowContent);
@@ -360,7 +389,7 @@ class VRowFormGenerator extends Component {
         formContent.push(h("div", { class: 'oj-flex', "data-oj-internal": true }, rowContent));
     }
     _addPaddingCells(rowContent, count) {
-        const cols = this.state.columns;
+        const cols = this._calculateColumns(this.state.availableColumns) || this.props.maxColumns;
         const last = count % cols;
         if (rowContent && last > 0) {
             for (let i = last; i < cols; i++) {

package/dist/js/libs/oj/debug_esm/ojwaterfalllayout.js

@@ -581,8 +581,8 @@ let WaterfallLayout = WaterfallLayout_1 = class WaterfallLayout extends Componen
             const data = this.getData();
             const positions = this.state.skeletonPositions;
             if (data) {
-                if (data && data.value && data.value.data.length === 0) {
-                    content = [];
+                if (data.value && data.value.data.length === 0) {
+                    content = this.contentHandler.renderNoData();
                 }
                 else {
                     if (positions != null && this.contentHandler.isInitialFetch()) {

package/dist/js/libs/oj/main-template.js

@@ -15,9 +15,9 @@
   requirejs.config({
     // Path mappings for the logical module names
     paths: {
-      'ojs': 'libs/oj/v11.0.1/min@insertESLevelPath@',
-      'ojL10n': 'libs/oj/v11.0.1/ojL10n',
-      'ojtranslations': 'libs/oj/v11.0.1/resources',
+      'ojs': 'libs/oj/v11.0.5/min@insertESLevelPath@',
+      'ojL10n': 'libs/oj/v11.0.5/ojL10n',
+      'ojtranslations': 'libs/oj/v11.0.5/resources',
       
   'knockout': 'libs/knockout/knockout-3.5.1',
   'knockout-mapping': 'libs/knockout/knockout.mapping-latest',