@oracle/oraclejet 14.0.10 → 14.1.1

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

@@ -12,7 +12,7 @@ import 'ojs/ojlistview';
 import 'ojs/ojhighlighttext';
 import oj from 'ojs/ojcore-base';
 import $ from 'jquery';
-import { getReadingDirection, isAncestorOrSelf, isAncestor, recentPointer } from 'ojs/ojdomutils';
+import { getReadingDirection, isAncestorOrSelf, isAncestor } from 'ojs/ojdomutils';
 import { warn, error } from 'ojs/ojlogger';
 import { getDeviceType, getDeviceRenderMode, __getTemplateEngine } from 'ojs/ojconfig';
 import { getCachedCSSVarValues } from 'ojs/ojthemeutils';
@@ -932,6 +932,7 @@ LovDropdown.prototype.init = function (options) {
   this._isValueItemForPlaceholderFunc = options.isValueItemForPlaceholderFunc;
 
   this._currentFirstItem = null;
+  this._firstResultForKeyboardFocus = null;
   this._templateEngine = null;
   this._resultsCount = null;
   this._NO_RESULTS_FOUND_CLASSNAME = 'oj-listbox-searchselect-no-results';
@@ -1349,11 +1350,9 @@ LovDropdown.prototype._configureResults = function (searchText, selectedValue, i
   this._SetCurrentFirstItem(null);
 
   // JET-38215 - SELECT SINGLE - KEYBOARD NAVIGATION FOR COLLECTION TEMPLATE USAGE
-  // remove an existing focusin listener before deciding whether we need to add a new one
-  if (this._focusinListener) {
-    this._containerElem[0].removeEventListener('focusin', this._focusinListener);
-    this._focusListener = null;
-  }
+  // Original logic updated for JET-49906 - IN ACCESSIBILITY MODE, THE FIRST DROPDOWN VALUE IS READ TWICE
+  // remove the existing first result for keyboard focus
+  this._firstResultForKeyboardFocus = null;
 
   // This method is called only after the collection fetched the data
   // get the result count and store them
@@ -1839,11 +1838,9 @@ LovDropdown.prototype.close = function () {
   this._ClearSelection();
 
   // JET-38215 - SELECT SINGLE - KEYBOARD NAVIGATION FOR COLLECTION TEMPLATE USAGE
-  // remove the focusin listener now that we don't need it anymore
-  if (this._focusinListener) {
-    this._containerElem[0].removeEventListener('focusin', this._focusinListener);
-    this._focusListener = null;
-  }
+  // Original logic updated for JET-49906 - IN ACCESSIBILITY MODE, THE FIRST DROPDOWN VALUE IS READ TWICE
+  // remove the first result as we do not need it anymore
+  this._firstResultForKeyboardFocus = null;
 
   /** @type {!Object.<oj.PopupService.OPTION, ?>} */
   var psOptions = {};
@@ -2230,6 +2227,26 @@ LovDropdown.prototype.getResultsCount = function () {
   return this._resultsCount;
 };
 
+/**
+ * Focuses the collection component.
+ *
+ * @return {Promise} A promise indicating that focus has been set on the collection component
+ *
+ * @memberof LovDropdown
+ * @instance
+ * @public
+ * @ignore
+ */
+LovDropdown.prototype.focus = function () {
+  const resolveBusyState = this._addBusyStateFunc('LovDropdown focusing the collection component');
+  return this._handleCollectionFocus().then(
+    function () {
+      FocusUtils.focusFirstTabStop(this.getElement());
+      resolveBusyState();
+    }.bind(this)
+  );
+};
+
 /**
  * Sets the current first value item
  *
@@ -2267,6 +2284,7 @@ LovDropdown.prototype._addListenerForRowKeyProperty = function (currentRow) {
 };
 
 // JET-38215 - SELECT SINGLE - KEYBOARD NAVIGATION FOR COLLECTION TEMPLATE USAGE
+// Original logic updated for JET-49906 - IN ACCESSIBILITY MODE, THE FIRST DROPDOWN VALUE IS READ TWICE
 /**
  * Fetches the first result from the data provider and sets it as the current row if the
  * collection gets keyboard focus.
@@ -2279,13 +2297,13 @@ LovDropdown.prototype._addListenerForRowKeyProperty = function (currentRow) {
  */
 LovDropdown.prototype._FetchFirstResultForKeyboardFocus = function () {
   var busyContext = Context.getContext(this._containerElem[0]).getBusyContext();
+  this._firstResultForKeyboardFocus = null;
   return this._FetchFirstResult().then(
     function (data) {
       if (data != null) {
-        // if there are results, listen on focusin in order to set the first result as current so that
-        // the table header doesn't get focus
-        this._focusinListener = this._handleCollectionFocusinOnce.bind(this, data);
-        this._containerElem[0].addEventListener('focusin', this._focusinListener);
+        // if there are results, save the data so that it can be used for setting the
+        // current row when we need to focus the collection element.
+        this._firstResultForKeyboardFocus = data;
       }
       return busyContext.whenReady();
     }.bind(this)
@@ -2293,36 +2311,41 @@ LovDropdown.prototype._FetchFirstResultForKeyboardFocus = function () {
 };
 
 // JET-38215 - SELECT SINGLE - KEYBOARD NAVIGATION FOR COLLECTION TEMPLATE USAGE
+// Original logic updated for JET-49906 - IN ACCESSIBILITY MODE, THE FIRST DROPDOWN VALUE IS READ TWICE
 /**
- * Handle focusin on the collection in order to set the first result as the current row when
- * the collection receives focus via the keyboard.
+ * Setup collection component before focusing it. This sets the first result as the current row when
+ * the LovDropdown.focus is called.
  *
  * @memberof LovDropdown
  * @instance
  * @private
  */
-LovDropdown.prototype._handleCollectionFocusinOnce = function (data) {
-  this._containerElem[0].removeEventListener('focusin', this._focusinListener);
-  this._focusinListener = null;
-  // only focus the first row if focus was transferred via the keyboard
-  if (!recentPointer()) {
-    var resolveBusyState = this._addBusyStateFunc('LovDropdown setting selected KeySet on focusin');
+LovDropdown.prototype._handleCollectionFocus = function () {
+  var resolveBusyState = this._addBusyStateFunc('LovDropdown setting selected KeySet on focusin');
+
+  // ignore if we do not have first row data
+  if (!this._firstResultForKeyboardFocus) {
+    // Return a Promise to be consistent with the else path. Make sure to set and resolve the busy context.
+    return Promise.resolve().then(function () {
+      resolveBusyState();
+    });
+  }
 
-    // JET-39993 - Select2 options qunit tests fail using chrome and safari on Mac for master branch
-    // set flag while we're setting the collection current row and selected key set because we don't
-    // need to react to changes that we're pushing
-    this._handlingCollectionFocusinOnce = true;
+  // JET-39993 - Select2 options qunit tests fail using chrome and safari on Mac for master branch
+  // set flag while we're setting the collection current row and selected key set because we don't
+  // need to react to changes that we're pushing
+  this._handlingCollectionFocusinOnce = true;
 
-    this._SetCollectionCurrentRow({ rowKey: data.key });
+  this._SetCollectionCurrentRow({ rowKey: this._firstResultForKeyboardFocus.key });
 
-    var busyContext = Context.getContext(this._containerElem[0]).getBusyContext();
-    busyContext.whenReady().then(
-      function () {
-        this._handlingCollectionFocusinOnce = false;
-        resolveBusyState();
-      }.bind(this)
-    );
-  }
+  var busyContext = Context.getContext(this._containerElem[0]).getBusyContext();
+  return busyContext.whenReady().then(
+    function () {
+      this._handlingCollectionFocusinOnce = false;
+      this._firstResultForKeyboardFocus = null;
+      resolveBusyState();
+    }.bind(this)
+  );
 };
 
 /**
@@ -3777,17 +3800,23 @@ oj.__registerWidget('oj.ojSelectBase', $.oj.editableValue, {
 
     var abstractLovBase = this._abstractLovBase;
     var lovDropdown = this._lovDropdown;
+    var outerWrapper = this.OuterWrapper;
 
     switch (keyCode) {
       case LovUtils.KEYS.UP:
       case LovUtils.KEYS.DOWN:
         if (abstractLovBase.isDropdownOpen()) {
           // lovDropdown.transferHighlight((keyCode === LovUtils.KEYS.UP) ? -1 : 1);
-          FocusUtils.focusFirstTabStop(lovDropdown.getElement());
-
-          // keep oj-focus on root so that inside label is still shifted up and field looks focused
-          // while dropdown is open
-          this.OuterWrapper.classList.add('oj-focus');
+          lovDropdown.focus().then(function () {
+            // keep oj-focus on root so that inside label is still shifted up and field looks focused
+            // while dropdown is open.
+            // And since we are dealing with asynchronism here, make sure if the focus is still in the
+            // dropdown.
+            const dropdownElement = lovDropdown.getElement();
+            if (dropdownElement && dropdownElement.contains(document.activeElement)) {
+              outerWrapper.classList.add('oj-focus');
+            }
+          });
 
           // if tabbing into dropdown, continue showing filter field as it was before tabbing
           //  - ie11: filter field hidden when you arrow into dropdown

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

@@ -1115,6 +1115,12 @@ var __oj_table_metadata =
 /**
  * <p>Named slot for the Table's default row template. The slot content must be a &lt;template> element. The content of the template should include the &lt;tr> element.</p>
  *
+ * <p>If using a rowTemplate to configure the display of rows, the Table will handle any change in column reordering due
+ * to a dnd operation internally. Any application logic behind rowTemplate definitions should not dynamically respond to
+ * 'columns' change notifications pushed due to dnd reorder operations. Once an application or an external source updates
+ * the Table's 'columns' attribute though, the Table will no longer honor any previous user-performed dnd reorder operations,
+ * and any relevant changes in logic needed for the rowTemplate definitions must be handled by the application.</p>
+ *
  * @ojslot rowTemplate
  * @memberof oj.ojTable
  * @ojtemplateslotprops oj.ojTable.RowTemplateContext
@@ -1150,6 +1156,12 @@ var __oj_table_metadata =
  * <p>Named slot used to render add new row at the top of the table. The slot content must be a &lt;template> element.
  * The content of the template should include the &lt;tr> element.</p>
  *
+ * <p>If using an addRowTemplate to configure the display of rows, the Table will handle any change in column reordering due
+ * to a dnd operation internally. Any application logic behind addRowTemplate definitions should not dynamically respond to
+ * 'columns' change notifications pushed due to dnd reorder operations. Once an application or an external source updates
+ * the Table's 'columns' attribute though, the Table will no longer honor any previous user-performed dnd reorder operations,
+ * and any relevant changes in logic needed for the addRowTemplate definitions must be handled by the application.</p>
+ *
  * @ojslot addRowTemplate
  * @memberof oj.ojTable
  * @ojtemplateslotprops oj.ojTable.AddRowTemplateContext
@@ -2181,6 +2193,8 @@ Table.prototype._cleanComponent = function (isDestroy) {
   this._unregisterDomScroller();
   // clear the current layout manager, and any listeners it has setup
   this._clearLayoutManager();
+  // clear the current internal acc state
+  this._cleanAccStatus();
 
   if (isDestroy) {
     // cleanup needed for 'destroy()' call only
@@ -2472,6 +2486,12 @@ Table.prototype._refresh = function () {
   this._refreshTableStatusMessage();
   this._clearIdleCallback();
 
+  // update edit state based on row removals before rows are removed to ensure row context is available
+  if (this._hasEditableRow()) {
+    // exit edit mode if editable row is deleted - treat as cancelling the edit
+    this._setTableEditable(false, true);
+  }
+
   if (initFetch) {
     return this._initFetch();
   }
@@ -3256,6 +3276,14 @@ Table.prototype._refreshAddNewRowPlaceholder = function (docFrag, skipTopUpdate)
           // eslint-disable-next-line no-param-reassign
           placeHolderRow = docFrag.children[0];
         }
+        // make sure to honor any reordered columns when re-rendering the add row content from a row template
+        if (this._columnsDestMap != null) {
+          var renderedCells = this._getPlaceHolderRowCells(placeHolderRow);
+          for (let i = 0; i < this._columnsDestMap.length; i++) {
+            var moveAddRowCell = renderedCells[this._columnsDestMap[i]];
+            moveAddRowCell.parentNode.appendChild(moveAddRowCell); // @HTMLUpdateOK
+          }
+        }
       } else if (addRowCellTemplate !== null && this._isDefaultAddRowCellTemplateSlotValid()) {
         var columns = this._getColumnDefs();
         var columnsCount = columns.length;
@@ -6413,11 +6441,7 @@ TableDndContext.prototype.handleColumnReorderDrop = function (event) {
       columnIdx += 1;
     }
     if (this._dragStartColumnIdxs.indexOf(columnIdx) === -1) {
-      this.component._columnsDestMap = this.component._moveTableHeaderColumn(
-        this._dragStartColumnIdxs,
-        columnIdx,
-        event
-      );
+      this.component._moveTableHeaderColumn(this._dragStartColumnIdxs, columnIdx, event);
     }
   }
   event.preventDefault();
@@ -7432,16 +7456,23 @@ TableLayoutManager.prototype._isVerticalScrollBarHidden = function () {
   );
 };
 
+/**
+ * @private
+ */
+TableLayoutManager.prototype.initializeDefaultScrollBarSize = function (element) {
+  // cache browser scroll bar width for future sizing of table scrolling element
+  this._table._defaultScrollBarSize = getDefaultScrollBarWidth(element);
+};
+
 /**
  * Returns the default scrollbar size for the table when visible
  * @private
  */
 TableLayoutManager.prototype._getDefaultScrollBarSize = function () {
-  // cache browser scroll bar width for future sizing of table body element
-  if (this._defaultScrollBarSize == null) {
-    this._defaultScrollBarSize = getDefaultScrollBarWidth(this.getScroller());
+  if (this._table._defaultScrollBarSize == null) {
+    this.initializeDefaultScrollBarSize(this.getScroller());
   }
-  return this._defaultScrollBarSize;
+  return this._table._defaultScrollBarSize;
 };
 
 /**
@@ -11147,8 +11178,8 @@ Table.prototype._updateAccStatusInfo = function (columnHint) {
   var stateInfo = '';
   var tableHeaderColumn;
 
-  // status info only reflects an active element, and is not used for iOS voiceover
-  if (this._active == null || isIos()) {
+  // status info only reflects an active element, only applies if the table is focused, and is not used for iOS voiceover
+  if (this._active == null || !this._hasFocus() || isIos()) {
     return;
   }
 
@@ -11650,6 +11681,11 @@ Table.prototype._beforeDataRefresh = function (isSort) {
   if (this._lastSelectedRowIdxArray != null) {
     this._lastSelectedRowIdxArray = [];
   }
+  // update edit state based on row removals before rows are removed to ensure row context is available
+  if (this._hasEditableRow()) {
+    // exit edit mode if editable row is deleted - treat as cancelling the edit
+    this._setTableEditable(false, true);
+  }
   // reset selection validation state if data refreshed or changed
   this._initialSelectionStateValidated = false;
 };
@@ -11665,6 +11701,13 @@ Table.prototype._removeRowsAfterLastValidRow = function (lastValidKey) {
   }
   var lastValidItemIdx = this._getRowIdxForRowKey(lastValidKey);
   if (lastValidItemIdx >= 0) {
+    // update edit state based on row removals before rows are removed to ensure row context is available
+    if (this._hasEditableRow()) {
+      if (this._getEditableRowIdx() > lastValidItemIdx) {
+        // exit edit mode if editable row is deleted - treat as cancelling the edit
+        this._setTableEditable(false, true);
+      }
+    }
     var tableBodyRows = this._getTableBodyRows();
     var tableBodyRowsCount = tableBodyRows.length;
     for (var i = tableBodyRowsCount - 1; i > lastValidItemIdx; i--) {
@@ -13361,6 +13404,9 @@ Table.prototype._createTableScroller = function () {
   this.element[0].parentNode.replaceChild(tableScroller, this.element[0]);
   tableScroller.insertBefore(this.element[0], tableScroller.firstChild); // @HTMLUpdateOK
 
+  // determine default scrollbar size at initial creation time to avoid layout changes later on
+  this._getLayoutManager().initializeDefaultScrollBarSize(tableScroller);
+
   return tableScroller;
 };
 
@@ -16368,7 +16414,7 @@ Table.prototype._handleFocusin = function (event, isPopupFocusin) {
                 if (this._isGutterStartColumnEnabled()) {
                   targetColumnIndex -= 1;
                 }
-                this._scrollColumnIntoViewport(targetColumnIndex);
+                this._scrollColumnIntoViewport(targetColumnIndex, cell);
                 break;
               }
             }
@@ -16417,7 +16463,7 @@ Table.prototype._handleFocusin = function (event, isPopupFocusin) {
           for (let i = 0; i < focusedRowCells.length; i++) {
             const cell = focusedRowCells[i];
             if ($(cell).has(event.target).length > 0) {
-              this._scrollColumnIntoViewport(i);
+              this._scrollColumnIntoViewport(i, cell);
               break;
             }
           }
@@ -17915,28 +17961,35 @@ Table.prototype._scrollRowIntoViewport = function (rowIdx, includeStuckRows, tab
 /**
  * Scroll column into viewport
  * @param {number} columnIdx  row index
+ * @param {Element=} cellElement optional cell element that should be scrolled into view
  * @private
  */
-Table.prototype._scrollColumnIntoViewport = function (columnIdx) {
+Table.prototype._scrollColumnIntoViewport = function (columnIdx, cellElement) {
   var layoutManager = this._getLayoutManager();
   if (!layoutManager.hasRenderedSize()) {
     return;
   }
 
-  var tableHeaderColumn;
-  if (columnIdx === -1) {
-    tableHeaderColumn = this._getTableSelectorColumn();
+  // if cell is provided, then focus is really on a body cell that could have colspans
+  // otherwise, use the header cell corresponding to the column index value
+  var targetElement;
+  if (cellElement != null) {
+    targetElement = cellElement;
   } else {
-    tableHeaderColumn = this._getTableHeaderColumn(columnIdx);
-  }
-  if (!tableHeaderColumn) {
-    return;
+    if (columnIdx === -1) {
+      targetElement = this._getTableSelectorColumn();
+    } else {
+      targetElement = this._getTableHeaderColumn(columnIdx);
+    }
+    if (!targetElement) {
+      return;
+    }
   }
 
   var scrollingElement = layoutManager.getScroller();
   var $scrollingElement = $(scrollingElement);
 
-  var horOverflowDiff = layoutManager.getHorizontalOverflowDiff(tableHeaderColumn, columnIdx);
+  var horOverflowDiff = layoutManager.getHorizontalOverflowDiff(targetElement, columnIdx);
   var leftOverflowDiff = horOverflowDiff.left;
   var rightOverflowDiff = horOverflowDiff.right;
   var hasLeftOverflow = leftOverflowDiff >= 0;
@@ -18196,7 +18249,7 @@ Table.prototype._setCellFocus = function (rowIdx, columnIdx) {
       if (typeof firstElem.select === 'function') {
         firstElem.select();
       }
-      this._scrollColumnIntoViewport(columnIdx);
+      this._scrollColumnIntoViewport(columnIdx, tableBodyCell);
       return true;
     }
   }
@@ -21493,7 +21546,7 @@ Table.prototype._setSelected = function (selected, skipSelectionUpdate) {
       }
     }
     if (this._isDefaultSelectorEnabled()) {
-      this._updateSelector(selected.row);
+      this._updateSelectors(selected.row);
     }
     this._applySelected(selected);
 
@@ -22190,15 +22243,10 @@ Table.prototype._selectedKeysChangedListener = function (event) {
         Table.CSS_CLASSES._TABLE_HEADER_SELECTOR_CLASS
       )[0];
       if (headerSelectorElement) {
-        let tableBodyRows = this._getTableBodyRows();
         let keySetSize = rowSelectedKeySet.values
           ? rowSelectedKeySet.values().size
           : rowSelectedKeySet.deletedValues().size;
-        if (keySetSize !== 0 && tableBodyRows.length !== keySetSize) {
-          headerSelectorElement.indeterminate = true;
-        } else {
-          headerSelectorElement.indeterminate = false;
-        }
+        headerSelectorElement.indeterminate = keySetSize !== 0;
       }
       this._setSelected({ row: rowSelectedKeySet, column: new KeySetImpl() }, false, true);
     }
@@ -22210,52 +22258,38 @@ Table.prototype._selectedKeysChangedListener = function (event) {
  * @param {Object} selected the selected key set
  * @private
  */
-Table.prototype._updateSelector = function (selected) {
+Table.prototype._updateSelectors = function (selected) {
   let table = this._getTable();
   let headerSelectorElements = table.getElementsByClassName(
     Table.CSS_CLASSES._TABLE_HEADER_SELECTOR_CLASS
   );
   if (headerSelectorElements.length > 0) {
     headerSelectorElements[0].selectedKeys = selected;
-    let tableBodyRows = this._getTableBodyRows();
     let keySetSize = selected.values ? selected.values().size : selected.deletedValues().size;
-    if (keySetSize !== 0 && tableBodyRows.length !== keySetSize) {
-      headerSelectorElements[0].indeterminate = true;
-    } else {
-      headerSelectorElements[0].indeterminate = false;
-    }
+    headerSelectorElements[0].indeterminate = keySetSize !== 0;
   }
 
-  let selectedSelectorCells = table.querySelectorAll(`
-  .${Table.CSS_CLASSES._TABLE_DATA_ROW_CLASS}.${Table.MARKER_STYLE_CLASSES._SELECTED} >
-  .${Table.CSS_CLASSES._TABLE_SELECTOR_CELL}`);
-  if (!selected.isAddAll()) {
-    selectedSelectorCells.forEach((selectorCell) => {
-      let selector = selectorCell.firstChild;
-      if (selected.has(selector.rowKey)) {
-        selected.delete([selector.rowKey]);
-      } else {
-        selector.selectedKeys = new KeySetImpl([]);
-      }
-    });
-    let selectors = Array.from(
-      table.getElementsByClassName(Table.CSS_CLASSES._TABLE_DATA_ROW_SELECTOR_CLASS)
-    );
-    for (let i = 0; i < selectors.length; i++) {
-      if (selected.has(selectors[i].rowKey)) {
-        selectors[i].selectedKeys = new KeySetImpl([selectors[i].rowKey]);
-      }
-    }
-  } else {
-    let selectors = Array.from(
-      table.getElementsByClassName(Table.CSS_CLASSES._TABLE_DATA_ROW_SELECTOR_CLASS)
-    );
-    for (let i = 0; i < selectors.length; i++) {
-      if (selected.has(selectors[i].rowKey)) {
-        selectors[i].selectedKeys = new KeySetImpl([selectors[i].rowKey]);
-      } else {
-        selectors[i].selectedKeys = new KeySetImpl([]);
+  let selectedSelectors = [];
+  // this relies on the inner dom structure and selected state markup of oj-selector - would be better
+  // to avoid this internal knowledge in the future if possible
+  let selectedSelectorSpans = table.querySelectorAll(`
+    .${Table.CSS_CLASSES._TABLE_DATA_ROW_SELECTOR_CLASS} >
+    .${Table.MARKER_STYLE_CLASSES._SELECTED}`);
+  for (let i = 0; i < selectedSelectorSpans.length; i++) {
+    selectedSelectors.push(selectedSelectorSpans[i].parentElement);
+  }
+  let selectors = Array.from(
+    table.getElementsByClassName(Table.CSS_CLASSES._TABLE_DATA_ROW_SELECTOR_CLASS)
+  );
+  for (let i = 0; i < selectors.length; i++) {
+    let selector = selectors[i];
+    let hasSelectedState = selectedSelectors.indexOf(selector) !== -1;
+    if (selected.has(selector.rowKey)) {
+      if (!hasSelectedState) {
+        selector.selectedKeys = new KeySetImpl([selector.rowKey]);
       }
+    } else if (hasSelectedState) {
+      selector.selectedKeys = new KeySetImpl([]);
     }
   }
 };
@@ -22865,11 +22899,22 @@ Table.prototype.options = {
      * @ojsignature {target:"Type", value:"?"}
      */
     reorder: {
+      // in general it does not seem great that any rowTemplate, rowRenderer, and addRowTemplate logic shouldn't be dynamic
+      // and respond to dnd column reorder operations... the doc below concerning this is just to make it clear HOW things
+      // work today - at this point this is not something that can change without potentially breaking every single row-based
+      // content definition existing applications may already be using combined with the Table's internal column reordering...
+
       /**
        * Enable or disable reordering the columns within the same table using drag and drop.<br><br>
        * Re-ordering is supported one column at a time. In addition, re-ordering will not re-order
        * any cells which have the colspan attribute with value > 1. Such cells will need to be re-ordered manually by listening to
-       * the property change event on the columns property.
+       * the property change event on the columns property.<br><br>
+       * If using a rowTemplate, rowRenderer, or addRowTemplate to configure the display of rows, the Table will handle
+       * any change in column reordering due to a dnd operation internally. Any application logic behind rowTemplate,
+       * rowRenderer, or addRowTemplate definitions should not dynamically respond to 'columns' change notifications pushed
+       * due to dnd reorder operations. Once an application or an external source updates the Table's 'columns' attribute
+       * though, the Table will no longer honor any previous user-performed dnd reorder operations, and any relevant changes
+       * in logic needed for the rowTemplate, rowRenderer, or addRowTemplate definitions must be handled by the application.<br><br>
        *
        * <p>See the <a href="#dnd">dnd</a> attribute for usage examples.
        *
@@ -23137,7 +23182,14 @@ Table.prototype.options = {
    * The function returns either a String or
    * a DOM element of the content inside the row. If the developer chooses
    * to manipulate the row element directly, the function should return
-   * nothing.
+   * nothing.<br><br>
+   *
+   * <p>If using a rowRenderer to configure the display of rows, the Table will handle any change in column reordering due
+   * to a dnd operation internally. Any application logic behind rowRenderer definitions should not dynamically respond to
+   * 'columns' change notifications pushed due to dnd reorder operations. Once an application or an external source updates
+   * the Table's 'columns' attribute though, the Table will no longer honor any previous user-performed dnd reorder operations,
+   * and any relevant changes in logic needed for the rowRenderer definitions must be handled by the application.</p>
+   *
    * @expose
    * @public
    * @instance
@@ -24891,7 +24943,11 @@ Table.prototype._setOptions = function (options, flags) {
     var key = keys[i];
     var value = options[key];
     if (this._isTableRefreshNeeded(key, value, flags)) {
-      if (key === 'columns' || (key === 'selectionMode' && value.row !== undefined)) {
+      if (key === 'columns') {
+        // an external change in 'columns' must reset any previous column reorder operations
+        this._columnsDestMap = null;
+        requiresHeaderRefresh = true;
+      } else if (key === 'selectionMode' && value.row !== undefined) {
         requiresHeaderRefresh = true;
       } else if (key === 'data') {
         requiresDataRefresh = true;

package/dist/js/libs/oj/debug_esm/ojtemplateengine-utils.js

@@ -7,7 +7,8 @@
  */
 import { render } from 'preact';
 import oj from 'ojs/ojcore-base';
-import { CACHED_BINDING_PROVIDER, CustomElementUtils, transformPreactValue } from 'ojs/ojcustomelement-utils';
+import { CACHED_BINDING_PROVIDER, transformPreactValue } from 'ojs/ojcustomelement-utils';
+import { getPropertiesForElementTag } from 'ojs/ojcustomelement-registry';
 import { getPropertyMetadata } from 'ojs/ojmetadatautils';
 import { info } from 'ojs/ojlogger';
 
@@ -102,7 +103,7 @@ class PreactTemplate {
         };
     }
     static resolveVDomTemplateProps(template, renderer, elementTagName, propertySet, data, defaultValues, propertyValidator) {
-        const metadata = CustomElementUtils.getPropertiesForElementTag(elementTagName);
+        const metadata = getPropertiesForElementTag(elementTagName);
         const [cache, deleteEntry] = PreactTemplate.extendTemplate(template, PreactTemplate._COMPUTED_PROPS_CACHE_FACTORY, (recalc) => {
             for (const observable of cache) {
                 observable.recalculateValue(recalc);