@oracle/oraclejet 11.0.1 → 11.0.5

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

@@ -5300,6 +5300,12 @@ var __oj_select_many_metadata =
 
         //  - 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;
       },
 
 
@@ -7140,7 +7146,6 @@ var __oj_select_many_metadata =
             this._focusSearch();
           }
         }
-        event.preventDefault();
       },
 
       /**

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

@@ -10582,7 +10582,10 @@ var __oj_table_metadata =
    * @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/ojthemeutils.js

@@ -269,7 +269,7 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojlogger'], function (exports, oj, Lo
       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/ojvcollection.js

@@ -51,6 +51,10 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojlogger', 'ojs/ojdatacollection-comm
                 this.dataProvider.removeEventListener('refresh', this.modelEventHandler);
             }
         }
+        renderNoData() {
+            this.setFetching(false);
+            return [];
+        }
         render(data) {
             return this.renderFetchedData(data);
         }

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

@@ -5,7 +5,7 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcspexpressionevaluator', 'ojs/ojcustomelement-utils', 'preact', 'ojs/ojvcomponent-template', 'ojs/ojcontext', 'ojs/ojdataproviderhandler'], function (exports, Logger, HtmlUtils, CspExpressionEvaluator, ojcustomelementUtils, preact, VComponentTemplate, Context, ojdataproviderhandler) { 'use strict';
+define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcspexpressionevaluator', 'ojs/ojcustomelement-utils', 'preact', 'ojs/ojvcomponent-template', 'ojs/ojcontext', 'ojs/ojdataproviderhandler', 'ojs/ojbindpropagation'], function (exports, Logger, HtmlUtils, CspExpressionEvaluator, ojcustomelementUtils, preact, VComponentTemplate, Context, ojdataproviderhandler, ojbindpropagation) { 'use strict';
 
     CspExpressionEvaluator = CspExpressionEvaluator && Object.prototype.hasOwnProperty.call(CspExpressionEvaluator, 'default') ? CspExpressionEvaluator['default'] : CspExpressionEvaluator;
     Context = Context && Object.prototype.hasOwnProperty.call(Context, 'default') ? Context['default'] : Context;
@@ -88,6 +88,16 @@ define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcspexpressionevalua
     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();
@@ -316,9 +326,11 @@ define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcspexpressionevalua
                 };
             });
         }
-        _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 = ojcustomelementUtils.CustomElementUtils.getPropertiesForElementTag(tagName);
             return {
                 type: 4,
                 callee: {
@@ -328,16 +340,96 @@ define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcspexpressionevalua
                 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 = ojbindpropagation.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(ojcustomelementUtils.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 = ojcustomelementUtils.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 = ojcustomelementUtils.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>");
@@ -401,7 +493,8 @@ define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcspexpressionevalua
         _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;
@@ -438,12 +531,33 @@ define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcspexpressionevalua
                         acc.push(this._createPropertyNode(engineContext, ojcustomelementUtils.AttributeUtils.getGlobalPropForAttr(name), value));
                     }
                     else {
-                        const hasDottedProps = name.indexOf('.') >= 0;
                         if (expValue.expr) {
-                            acc.push({
-                                key: hasDottedProps ? name : ojcustomelementUtils.AttributeUtils.attributeToPropertyName(name),
-                                value: this._createExpressionEvaluator(engineContext, expValue.expr)
-                            });
+                            const propName = ojcustomelementUtils.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({
@@ -452,9 +566,6 @@ define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcspexpressionevalua
                             });
                         }
                     }
-                    if (expValue.expr && !expValue.downstreamOnly) {
-                        writebacks.push({ name, value: expValue.expr });
-                    }
                 }
                 return acc;
             }, []);
@@ -476,14 +587,17 @@ define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcspexpressionevalua
                     }
                 });
             }
-            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 = ojcustomelementUtils.AttributeUtils.getExpressionInfo(callbackPropExpr)) === null || _a === void 0 ? void 0 : _a.expr));
+                attrNodes.push(this._createWritebackPropertyNode(engineContext, propName, valuesArray, (_a = ojcustomelementUtils.AttributeUtils.getExpressionInfo(callbackPropExpr)) === null || _a === void 0 ? void 0 : _a.expr));
             });
             listeners.forEach((value, name) => {
                 const info = ojcustomelementUtils.AttributeUtils.getExpressionInfo(value);
@@ -493,29 +607,65 @@ define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcspexpressionevalua
             });
             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;
@@ -556,29 +706,28 @@ define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcspexpressionevalua
         _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/ojvcomponent.js

@@ -1332,6 +1332,11 @@ define(['require', 'exports', 'preact', 'ojs/ojmetadatautils', 'ojs/ojcustomelem
             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[ojpreactPatch.OJ_SLOT];
@@ -1347,9 +1352,13 @@ define(['require', 'exports', 'preact', 'ojs/ojmetadatautils', 'ojs/ojcustomelem
         }
     }
     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++;
@@ -1359,9 +1368,14 @@ define(['require', 'exports', 'preact', 'ojs/ojmetadatautils', 'ojs/ojcustomelem
                 _activeReplacer = slotNode[ojpreactPatch.OJ_REPLACER] = replacerElem;
                 const parent = replacerElem.parentElement;
                 ojpreactPatch.patchSlotParent(parent);
-                parent.replaceChild(slotNode, replacerElem);
-                handleSlotMount(slotNode);
                 replacerElem[ojpreactPatch.OJ_SLOT] = slotNode;
+                if (replacerElem.isConnected) {
+                    parent.replaceChild(slotNode, replacerElem);
+                    onInitialInsert();
+                }
+                else {
+                    replacerElem[_ON_FIRST_INSERT] = onInitialInsert;
+                }
             }
             else {
                 _count--;
@@ -1571,8 +1585,8 @@ define(['require', 'exports', 'preact', 'ojs/ojmetadatautils', 'ojs/ojcustomelem
                 this._element[name] = value;
             }
             else {
-                value = ojcustomelementUtils.CustomElementUtils.convertEmptyStringToUndefined(this._element, meta, value);
                 if (this._state.allowPropertySets()) {
+                    value = ojcustomelementUtils.CustomElementUtils.convertEmptyStringToUndefined(this._element, meta, value);
                     this._updatePropsAndQueueRenderAsNeeded(name, value, meta);
                 }
                 else {
@@ -1706,12 +1720,8 @@ define(['require', 'exports', 'preact', 'ojs/ojmetadatautils', 'ojs/ojcustomelem
             if (needRendering && !this._isRenderQueued) {
                 this._isRenderQueued = true;
                 window.queueMicrotask(() => {
-                    try {
-                        this._render();
-                    }
-                    finally {
-                        this._isRenderQueued = false;
-                    }
+                    this._isRenderQueued = false;
+                    this._render();
                 });
             }
         }
@@ -1862,9 +1872,12 @@ define(['require', 'exports', 'preact', 'ojs/ojmetadatautils', 'ojs/ojcustomelem
             }
         }
         _playbackEarlyPropertySets() {
+            var _a;
             while (this._earlySets.length) {
                 const setObj = this._earlySets.shift();
-                this.setProperty(setObj.property, setObj.value);
+                const meta = MetadataUtils.getPropertyMetadata(setObj.property, (_a = this._metadata) === null || _a === void 0 ? void 0 : _a.properties);
+                const updatedValue = ojcustomelementUtils.CustomElementUtils.convertEmptyStringToUndefined(this._element, meta, setObj.value);
+                this.setProperty(setObj.property, updatedValue);
             }
         }
         _patchRootElement(newVNode) {

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

@@ -91,6 +91,7 @@ define(['exports', 'preact', 'ojs/ojthemeutils', 'ojs/ojlabel', 'ojs/ojcustomele
     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';
 
@@ -142,7 +143,7 @@ define(['exports', 'preact', 'ojs/ojthemeutils', 'ojs/ojlabel', 'ojs/ojcustomele
             if (this.props.contentType === 'formLayout') {
                 rootClassName += ' oj-formlayout-nested-formlayout';
             }
-            return (preact.h("div", { class: rootClassName, style: wrapperStyle },
+            return (preact.h("div", { class: rootClassName, style: wrapperStyle, key: props.cellKey },
                 preact.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) {
@@ -197,7 +198,7 @@ define(['exports', 'preact', 'ojs/ojthemeutils', 'ojs/ojlabel', 'ojs/ojcustomele
                     }
                     labelEdge = this._themeDefault.labelEdge;
                 }
-                rowContent = (preact.h(VCellGenerator, { totalColumns: totalCols, labelText: item.labelText, labelEdge: labelEdge, labelWidth: item.labelWidth, contentType: item.contentType }, content));
+                rowContent = (preact.h(VCellGenerator, { totalColumns: totalCols, labelText: item.labelText, labelEdge: labelEdge, labelWidth: item.labelWidth, contentType: item.contentType, cellKey: item.key }, content));
                 formContent.push(preact.h("div", { class: 'oj-flex', "data-oj-internal": true }, rowContent));
             }
             const styling = this._getColumnStyling(columns);
@@ -244,53 +245,78 @@ define(['exports', 'preact', 'ojs/ojthemeutils', 'ojs/ojlabel', 'ojs/ojcustomele
             this.formDivRef = preact.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 (preact.h("div", { class: rootClassNames, ref: this.formDivRef }, emptyFormContent));
-            }
-            else {
-                const formContent = this._getRowFormContent(this.props.formControls);
-                return (preact.h("div", { class: rootClassNames, ref: this.formDivRef }, formContent));
-            }
+            const rootClassNames = ROOTCLASSNAMES + cssColumnClasses;
+            const formContent = this._getRowFormContent(this.props.formControls);
+            return (preact.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)
+                });
+            }
+            DomUtils.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
                 });
-                DomUtils.addResizeListener(this.formDivRef.current, this._resizeListener, 25);
             }
         }
         componentWillUnmount() {
             DomUtils.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;
                     }
                 }
             }
@@ -299,7 +325,10 @@ define(['exports', 'preact', 'ojs/ojthemeutils', 'ojs/ojlabel', 'ojs/ojcustomele
         _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;
@@ -338,7 +367,7 @@ define(['exports', 'preact', 'ojs/ojthemeutils', 'ojs/ojlabel', 'ojs/ojcustomele
                     }
                     labelEdge = this._themeDefault.labelEdge;
                 }
-                rowContent.push(preact.h(VCellGenerator, { colspan: colspan, totalColumns: totalCols, labelText: item.labelText, labelEdge: labelEdge, labelWidth: item.labelWidth, contentType: item.contentType }, content));
+                rowContent.push(preact.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);
@@ -356,7 +385,7 @@ define(['exports', 'preact', 'ojs/ojthemeutils', 'ojs/ojlabel', 'ojs/ojcustomele
             formContent.push(preact.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/ojwaterfalllayout.js

@@ -575,8 +575,8 @@ define(['exports', 'preact', 'ojs/ojvcomponent', 'ojs/ojcore-base', 'ojs/ojdatac
                 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()) {