@oracle/oraclejet 11.0.6 → 11.1.1

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

@@ -942,7 +942,7 @@ import { Chart, SparkChart } from 'ojs/ojchart-toolkit';
  * @ojshortdesc The CSS style object defining the style of the label.
  * @memberof! oj.ojChart.PieCenter
  * @type {Object=}
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
  * @default {}
  */
 /**
@@ -1140,7 +1140,7 @@ import { Chart, SparkChart } from 'ojs/ojchart-toolkit';
  * @property {string} label The pieCenter label.
  * @property {number} totalValue The total of all values in the pie chart.
  * @property {Element} componentElement The chart element.
- * @ojsignature [{target: "Type", value: "CSSStyleDeclaration=", for: "labelStyle", jsdocOverride: true}]
+ * @ojsignature [{target: "Type", value: "Partial<CSSStyleDeclaration>=", for: "labelStyle", jsdocOverride: true}]
  */
 
 /**
@@ -1305,6 +1305,9 @@ import { Chart, SparkChart } from 'ojs/ojchart-toolkit';
  * @property {number} index The zero-based index of the current item
  * @property {Object} data The data object for the current item
  * @property {any} key The key of the current item
+ * @ojsignature [{target:"Type", value:"<K = any,D = any>", for:"genericTypeParameters"},
+ * {target:"Type", value:"D", for:"data", jsdocOverride: true},
+ * {target:"Type", value:"K", for:"key", jsdocOverride: true}]
  */
 
  // Slots
@@ -2429,7 +2432,7 @@ import { Chart, SparkChart } from 'ojs/ojchart-toolkit';
  * @ojshortdesc The CSS style object defining the style of the legend text.
  * @memberof! oj.ojChart.Legend
  * @type {Object=}
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
  * @default {}
  */
 /**
@@ -2473,7 +2476,7 @@ import { Chart, SparkChart } from 'ojs/ojchart-toolkit';
  * @ojshortdesc The CSS style object defining the style of the title.
  * @memberof! oj.ojChart.Legend
  * @type {Object=}
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
  * @default {}
  */
 /**
@@ -2603,7 +2606,7 @@ import { Chart, SparkChart } from 'ojs/ojchart-toolkit';
  * @ojshortdesc The CSS inline style to apply to the whisker stems.
  * @memberof! oj.ojChart.BoxPlotDefaults
  * @type {Object=}
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
  * @default {}
  */
 /**
@@ -2624,7 +2627,7 @@ import { Chart, SparkChart } from 'ojs/ojchart-toolkit';
  * @ojtypedefmember
  * @memberof! oj.ojChart.BoxPlotDefaults
  * @type {Object=}
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
  * @default {}
  */
 /**
@@ -2653,7 +2656,7 @@ import { Chart, SparkChart } from 'ojs/ojchart-toolkit';
  * @ojtypedefmember
  * @memberof! oj.ojChart.BoxPlotDefaults
  * @type {Object=}
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
  * @default {}
  */
 
@@ -3014,7 +3017,7 @@ import { Chart, SparkChart } from 'ojs/ojchart-toolkit';
  * @ojshortdesc The CSS style object defining the style of the data label. See the Help documentation for more information.
  * @memberof! oj.ojChart.StyleDefaults
  * @type {(Object|Array.<Object>)=}
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration|Array.<CSSStyleDeclaration>", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>|Array.<Partial<CSSStyleDeclaration>>", jsdocOverride: true}
  * @default null
  */
 /**
@@ -3038,7 +3041,7 @@ import { Chart, SparkChart } from 'ojs/ojchart-toolkit';
  * @ojshortdesc The CSS style object defining the style of the stack label.
  * @memberof! oj.ojChart.StyleDefaults
  * @type {Object=}
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
  * @default {}
  */
 /**
@@ -3082,7 +3085,7 @@ import { Chart, SparkChart } from 'ojs/ojchart-toolkit';
  * @ojshortdesc The CSS style object defining the style of the labels in the tooltip.
  * @memberof! oj.ojChart.StyleDefaults
  * @type {Object=}
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
  * @default {}
  */
 /**
@@ -3094,7 +3097,7 @@ import { Chart, SparkChart } from 'ojs/ojchart-toolkit';
  * @ojshortdesc The CSS style object defining the style of the values in the tooltip.
  * @memberof! oj.ojChart.StyleDefaults
  * @type {Object=}
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
  * @default {}
  */
 /**
@@ -3389,7 +3392,7 @@ import { Chart, SparkChart } from 'ojs/ojchart-toolkit';
  * @property {string=} svgClassName The CSS style class to apply to the data item. The style class and inline style will override any other styling specified through the properties. For tooltips and hover interactivity, it's recommended to also pass a representative color to the item color attribute.
  * @property {Object=} svgStyle The inline style to apply to the data item. The style class and inline style will override any other styling specified through the properties. For tooltips and hover interactivity, it's recommended to also pass a representative color to the item color attribute. Only SVG CSS style properties are supported.
  * @property {number=} value The value of the data item.
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", for: "svgStyle", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", for: "svgStyle", jsdocOverride: true}
  */
 
  // Slots
@@ -3460,7 +3463,7 @@ import { Chart, SparkChart } from 'ojs/ojchart-toolkit';
  * @property {Object=} svgStyle The inline style to apply to the reference object. The style class and inline style will override any other styling specified through the properties. Only SVG CSS style properties are supported.
  * @property {("area"|"line")=} type="line" The type of reference object being shown.
  * @property {number=} value The value of a reference line.
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", for: "svgStyle", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", for: "svgStyle", jsdocOverride: true}
  */
 
 /**
@@ -3476,6 +3479,9 @@ import { Chart, SparkChart } from 'ojs/ojchart-toolkit';
  * @property {Object} data The data object for the current item.
  * @property {number} index The zero-based index of the current item.
  * @property {any} key The key of the current item.
+ * @ojsignature [{target:"Type", value:"<K = any,D = any>", for:"genericTypeParameters"},
+ * {target:"Type", value:"D", for:"data", jsdocOverride: true},
+ * {target:"Type", value:"K", for:"key", jsdocOverride: true}]
  */
 
 // METHOD TYPEDEFS
@@ -3666,7 +3672,7 @@ import { Chart, SparkChart } from 'ojs/ojchart-toolkit';
  * @memberof! oj.ojSparkChartItem
  * @instance
  * @type {Object=}
- * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+ * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
  * @default {}
  *
  * @example <caption>Initialize the spark chart item with the
@@ -8364,7 +8370,7 @@ oj.__registerWidget('oj.ojSparkChart', $.oj.dvtBaseComponent,
      * @memberof oj.ojSparkChart
      * @instance
      * @type {Object=}
-     * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+     * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
      * @default {}
      *
      * @example <caption>Initialize the spark chart with the <code class="prettyprint">area-svg-style</code> attribute specified:</caption>
@@ -8410,7 +8416,7 @@ oj.__registerWidget('oj.ojSparkChart', $.oj.dvtBaseComponent,
      * @memberof oj.ojSparkChart
      * @instance
      * @type {Object=}
-     * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+     * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
      * @default {}
      *
      * @example <caption>Initialize the spark chart with the <code class="prettyprint">svg-style</code> attribute specified:</caption>

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

@@ -1133,6 +1133,11 @@ var __oj_checkboxset_metadata =
     // attribute of the rendered chekcboxes, let's make sure the checkboxset
     // has an ID
         $element.uniqueId();
+        // Retrieve the tabindex from the container and store it in an instance variable.
+        // Also we need to remove the tabindex from the container so that it will not receive
+        // focus
+        this._externalTabIndex = this.element.attr('tabindex') || 0;
+        this.element.removeAttr('tabindex');
         // Async step that generates oj-option if DateProvider is used.
         // RadioCheckboxUtils will set this._optionsDataProvider, this._optionsDataListener
         // and this._optionsDataArray.
@@ -1170,7 +1175,7 @@ var __oj_checkboxset_metadata =
         if (this.options.readOnly) {
           let domElem = this.element[0];
           let wrapperDom = domElem.querySelector('.oj-checkboxset-wrapper');
-          wrapperDom.setAttribute('tabindex', 0);
+          wrapperDom.setAttribute('tabindex', this._externalTabIndex);
         }
         this._on(this._events);
         this._setup();
@@ -1421,6 +1426,9 @@ var __oj_checkboxset_metadata =
           // The value is needed for accessibiliy of the image used for the checkbox
           checkbox.setAttribute('value', ojoption.value);
           checkbox.setAttribute('id', checkboxId);
+          // Need to transfer the tabindex to the input element
+          // All the input element will have the same tabindex
+          checkbox.setAttribute('tabindex', this._externalTabIndex);
           // in readonly mode, if a option is selected, the <oj-option> will be surrounded by <label> tag
           // if a option is selected, we can set attribute for the previous label and there is no need to create a new label
           // if a option is not selected, we need to create a new label.
@@ -2067,7 +2075,7 @@ var __oj_checkboxset_metadata =
             var wrapperDom = this.element[0].querySelector('.oj-checkboxset-wrapper');
             var val = this.options.value;
             if (this.options.readOnly) {
-              wrapperDom.setAttribute('tabindex', 0);
+              wrapperDom.setAttribute('tabindex', this._externalTabIndex);
               this.element.addClass('oj-read-only');
             } else {
               // remove tabindex and role

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

@@ -3892,13 +3892,26 @@ var _OJ_COMPONENT_EVENT_OVERRIDES = {
           }
 
           for (i = 0, j = removeAttr.length; i < j; i++) {
-            element.removeAttr(removeAttr[i]);
+            // csp error to removeAttribute('style') (which element.removeAttr will do),
+            // so instead set it to null
+            if (removeAttr[i] === 'style') {
+              element[0].style = null;
+            } else {
+              element.removeAttr(removeAttr[i]);
+            }
           }
 
           var attributeKeys = Object.keys(attributes);
           for (i = 0; i < attributeKeys.length; i++) {
             var attribute = attributeKeys[i];
-            element.attr(attribute, attributes[attribute].attr); // @HTMLUpdateOK
+            var emptyStyle = attribute === 'style' && attributes[attribute].attr === '';
+            if (!emptyStyle) {
+              element.attr(attribute, attributes[attribute].attr); // @HTMLUpdateOK
+            } else {
+              // csp error to setAttribute('style', '') (which element.attr will do),
+              // so instead set it to null
+              element[0].style = null;
+            }
           }
         }
       });

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

@@ -72,7 +72,7 @@ Config.getLocale = function () {
  * Changes the current locale
  * @method setLocale
  * @param {string} locale (language code and subtags separated by dash)
- * @param {function(): void} callback this optional callback will be invoked when the framework is done loading
+ * @param {function(): void} [callback] this optional callback will be invoked when the framework is done loading
  * its translated resources and Locale Elements for the newly specified locale.
  * @return {undefined}
  * @export

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

@@ -190,6 +190,7 @@ BusyState._getTs = function () {
  * <b>This constructor should never be invoked by the application code directly.</b>
  * @hideconstructor
  * @param {Element=} hostNode DOM element associated with this busy context
+ * @param {Context} context The oj.Context instance
  * @export
  * @constructor oj.BusyContext
  * @ojtsmodule
@@ -198,8 +199,8 @@ BusyState._getTs = function () {
  * @since 2.1.0
  * @classdesc Framework service for querying the busy state of components on the page.
  */
-const BusyContext = function (hostNode) {
-  this.Init(hostNode);
+const BusyContext = function (hostNode, context) {
+  this.Init(hostNode, context);
 };
 
 oj.Object.createSubclass(BusyContext, oj.Object, 'oj.BusyContext');
@@ -254,13 +255,15 @@ function getNextTickPromise() {
 
 /**
  * @param {Element=} hostNode DOM element associated with this busy context
+ * @param {Context=} context The oj.Context object
  * @instance
  * @protected
  */
-BusyContext.prototype.Init = function (hostNode) {
+BusyContext.prototype.Init = function (hostNode, context) {
   BusyContext.superclass.Init.call(this);
 
   this._hostNode = hostNode;
+  this._context = context;
 
   /**
    * Busy states cache.
@@ -862,11 +865,9 @@ BusyContext.prototype.applicationBootstrapComplete = function () {
  * @return {oj.BusyContext} returns the nearest parent context
  */
 BusyContext.prototype._getParentBusyContext = function () {
-  if (this._hostNode) {
-    var parentContext = oj.Context.getContext(oj.Context.getParentElement(this._hostNode));
-    if (parentContext) {
-      return parentContext.getBusyContext();
-    }
+  var parentContext = this._context.getParentContext();
+  if (parentContext) {
+    return parentContext.getBusyContext();
   }
 
   return null;
@@ -1099,6 +1100,20 @@ Context.prototype.Init = function (node) {
   this._node = node;
 };
 
+/**
+ * Get the parent context given the element
+ * @ignore
+ * @private
+ * @param {Element} element
+ * @return Context The parent context
+ */
+Context.prototype.getParentContext = function () {
+  if (this._node) {
+    return Context.getContext(Context.getParentElement(this._node));
+  }
+  return null;
+};
+
 /**
  * Returns the closest enclosing JET context for a node.
  * Any DOM element may be designated by the page author as a host of JET context.
@@ -1170,7 +1185,9 @@ Context.getPageContext = function () {
  * @returns {oj.BusyContext} busy state context
  */
 Context.prototype.getBusyContext = function () {
-  if (!this._busyContext) { this._busyContext = new BusyContext(this._node); }
+  if (!this._busyContext) {
+    this._busyContext = new BusyContext(this._node, this);
+  }
 
   return this._busyContext;
 };
@@ -1219,7 +1236,7 @@ Context._OJ_SURROGATE_ATTR = 'data-oj-surrogate-id';
 
 /**
  * @ignore
- * @public
+ * @private
  * @param {Element} element target
  * @return {Element} the logical parent of an element accounting for open popups
  * @memberof oj.Context

package/dist/js/libs/oj/debug_esm/ojcore-base.js

@@ -5,7 +5,7 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-import { error, info } from 'ojs/ojlogger';
+import { error, warn, info } from 'ojs/ojlogger';
 
 /**
  * Defines the oj namespace
@@ -37,12 +37,12 @@ const oj = {
    * @global
    * @member {string} version JET version numberr
    */
-  version: '11.0.6',
+  version: '11.1.1',
   /**
    * @global
    * @member {string} revision JET source code revision number
    */
-  revision: '2021-09-29_09-41-08',
+  revision: '2021-10-20_11-25-28',
 
   // This function is only meant to be used outside the library, so quoting the name
   // to avoid renaming is appropriate
@@ -1875,8 +1875,11 @@ OjObject.compareValues = function (obj1, obj2) {
     if (Array.isArray(obj1)) {
       return OjObject._compareArrayValues(obj1, obj2);
     } else if (obj1.constructor === Object) {
+      // create new Set for cyclic detection. This may also be passed in from
+      // __innerEquals
+      const set = arguments[2] || new Set();
       // for now invoke innerEquals and in the future if there are issues then resolve them
-      return OjObject.__innerEquals(obj1, obj2);
+      return OjObject.__innerEquals(obj1, obj2, set);
     } else if (obj1.valueOf && typeof obj1.valueOf === 'function') {
       // test cases for Boolean, String, Number, Date
       // Note if some future JavaScript constructors
@@ -1966,11 +1969,19 @@ OjObject._compareArrayIdIndexObject = function (array1, array2) {
 };
 
 
-OjObject.__innerEquals = function (obj1, obj2) {
+OjObject.__innerEquals = function (obj1, obj2, set = new Set()) {
   if (obj1 === obj2) {
     return true;
   }
 
+  // Catch cyclic comparisons
+  if (set.has(obj1) || set.has(obj2)) {
+    warn('cyclic dependency detected', obj1, obj2);
+    return false;
+  }
+  set.add(obj1);
+  set.add(obj2);
+
   if (!(obj1 instanceof Object) || !(obj2 instanceof Object)) {
     return false;
   }
@@ -1997,7 +2008,7 @@ OjObject.__innerEquals = function (obj1, obj2) {
           return false;
         }
 
-        if (!OjObject.compareValues(obj1[prop], obj2[prop])) {
+        if (!OjObject.compareValues(obj1[prop], obj2[prop], set)) {
           return false;
         }
       }

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

@@ -14,7 +14,7 @@ import 'ojs/ojpopup';
 import oj$1 from 'ojs/ojcore-base';
 import { _OJ_CONTAINER_ATTR, subtreeAttached, __GetWidgetConstructor } from 'ojs/ojcomponentcore';
 import Context from 'ojs/ojcontext';
-import { isMobileTouchDevice, applyMergedInlineStyles, disableAllFocusableElements, enableAllFocusableElements, getFocusableElementsInNode, getFocusableElementsIncludingDisabled, handleActionableTab, handleActionablePrevTab, disableDefaultBrowserStyling } from 'ojs/ojdatacollection-common';
+import { isMobileTouchDevice, applyMergedInlineStyles, disableAllFocusableElements, enableAllFocusableElements, getFocusableElementsInNode, getFocusableElementsIncludingDisabled, getLogicalChildPopup, handleActionableTab, handleActionablePrevTab, disableDefaultBrowserStyling } from 'ojs/ojdatacollection-common';
 import { setScrollLeft, getCSSTimeUnitAsMillis, isTouchSupported, removeResizeListener, addResizeListener } from 'ojs/ojdomutils';
 import { __getTemplateEngine } from 'ojs/ojconfig';
 import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
@@ -17956,47 +17956,57 @@ DvtDataGrid.prototype._manageMoveCursor = function () {
  * Handles focus on the root and its children by setting focus class on the root
  * @param {Event} event
  */
-DvtDataGrid.prototype.handleRootFocus = function (event) {
+DvtDataGrid.prototype.handleRootFocus = function (event, isPopupFocusin) {
   this.m_utils.addCSSClassName(this.m_root, this.getMappedStyle('focus'));
   this._clearFocusoutTimeout();
   this._clearFocusoutBusyState();
   // if nothing is active, and came from the outside of the datagrid, activate first cell
-  if (!this.m_root.contains(document.activeElement) ||
-      (document.activeElement === this.m_root &&
-       this.m_root.tabIndex === 0) ||
-      (document.activeElement === this.m_databody &&
-       this.m_scrollbarFocus &&
-       this.m_root.tabIndex === 0)) {
-    this.m_externalFocus = true;
+  if (!isPopupFocusin) {
+    this._clearOpenPopupListeners();
+    if (!this.m_root.contains(document.activeElement) ||
+        (document.activeElement === this.m_root &&
+        this.m_root.tabIndex === 0) ||
+        (document.activeElement === this.m_databody &&
+        this.m_scrollbarFocus &&
+        this.m_root.tabIndex === 0)) {
+      this.m_externalFocus = true;
 
-    if (this._isCellEditable()) {
-      this._setAccInfoText('accessibleEditableMode');
-    } else if (this._isGridEditable()) {
-      this._setAccInfoText('accessibleNavigationMode');
-    }
+      if (this._isCellEditable()) {
+        this._setAccInfoText('accessibleEditableMode');
+      } else if (this._isGridEditable()) {
+        this._setAccInfoText('accessibleNavigationMode');
+      }
 
-    var shouldNotScroll = false;
-    if (this.m_scrollbarFocus === true) {
-      this.m_shouldFocus = false;
-      this.m_scrollbarFocus = false;
-      shouldNotScroll = true;
-    }
+      var shouldNotScroll = false;
+      if (this.m_scrollbarFocus === true) {
+        this.m_shouldFocus = false;
+        this.m_scrollbarFocus = false;
+        shouldNotScroll = true;
+      }
 
-    if (this.m_active == null && !this._databodyEmpty()) {
-      var newCellIndex = this.createIndex(0, 0);
+      if (this.m_active == null && !this._databodyEmpty()) {
+        var newCellIndex = this.createIndex(0, 0);
 
-      if (!shouldNotScroll) {
-        // make sure it's visible
-        this.scrollToIndex(newCellIndex);
+        if (!shouldNotScroll) {
+          // make sure it's visible
+          this.scrollToIndex(newCellIndex);
+        }
+        // focus a cell, do not select it unless user actively selects something
+        this._setActiveByIndex(newCellIndex, event, null, null, shouldNotScroll);
+      } else if (this.m_active != null) {
+        this._highlightActive();
       }
-
-      // focus a cell, do not select it unless user actively selects something
-      this._setActiveByIndex(newCellIndex, event, null, null, shouldNotScroll);
-    } else if (this.m_active != null) {
-      this._highlightActive();
     }
+    this.m_root.tabIndex = -1;
   }
-  this.m_root.tabIndex = -1;
+};
+
+DvtDataGrid.prototype._handlePopupFocusout = function (event) {
+  this.handleRootBlur(event, true);
+};
+
+DvtDataGrid.prototype._handlePopupFocusin = function (event) {
+  this.handleRootFocus(event, true);
 };
 
 /**
@@ -18004,22 +18014,40 @@ DvtDataGrid.prototype.handleRootFocus = function (event) {
  * @param {Event} event
  */
 // eslint-disable-next-line no-unused-vars
-DvtDataGrid.prototype.handleRootBlur = function (event) {
+DvtDataGrid.prototype.handleRootBlur = function (event, isPopupFocusout) {
   // There is no cross-browser way to tell if the whole grid is out of focus on blur today.
   // document.activeElement returns null in chrome and firefox on blur events.
   // relatedTarget doesn't return a value in firefox and IE though there a tickets to fix.
   // We could implement a non-timeout solution that exiting and re-entering
   // the grid via tab key would not read the summary text upon re-entry (initial would work)
   this._clearFocusoutTimeout();
+  if (!isPopupFocusout) {
+    // Components that open popups (such as ojSelect, ojCombobox, ojInputDate, etc.) will trigger
+    // focusout, but we don't want to change mode in those cases since the user is still editing.
+    this._clearOpenPopupListeners();
+    var openPopup = getLogicalChildPopup(this.m_root);
+    if (openPopup != null) {
+      // setup focus listeners on popup
+      this._openPopup = openPopup;
+      // eslint-disable-next-line no-param-reassign
+      isPopupFocusout = false;
+      this._handlePopupFocusinListener = this._handlePopupFocusin.bind(this);
+      this._handlePopupFocusoutListener = this._handlePopupFocusout.bind(this);
+      openPopup.addEventListener('focusin', this._handlePopupFocusinListener);
+      openPopup.addEventListener('focusout', this._handlePopupFocusoutListener);
+      return;
+    }
+  }
   this._setFocusoutBusyState();
-  setTimeout(function () { // @HTMLUpdateOK
-    if (!this.m_root.contains(document.activeElement)) {
+  this.m_focusoutTimeout = setTimeout(function () { // @HTMLUpdateOK
+    if (!this.m_root.contains(document.activeElement) ||
+      isPopupFocusout === true) {
       this.m_root.tabIndex = 0;
       var active = this._getActiveElement();
       if (active != null) {
         this._unsetAriaProperties(active);
         if (this._isEditOrEnter()) {
-          this._leaveEditing(event, active, false);
+          this._leaveEditing(event, active, false, false);
         }
       }
     }
@@ -18032,6 +18060,30 @@ DvtDataGrid.prototype.handleRootBlur = function (event) {
   }
 };
 
+DvtDataGrid.prototype._clearOpenPopupListeners = function () {
+  if (this._openPopup != null) {
+    this._openPopup.removeEventListener('focusin', this._handlePopupFocusinListener);
+    this._openPopup.removeEventListener('focusout', this._handlePopupFocusoutListener);
+    this._openPopup = null;
+  }
+  this._handlePopupFocusinListener = null;
+  this._handlePopupFocusoutListener = null;
+};
+
+/**
+ * @private
+ */
+DvtDataGrid.prototype._handlePopupFocusout = function (event) {
+  this.handleRootBlur(event, true);
+};
+
+/**
+ * @private
+ */
+DvtDataGrid.prototype._handlePopupFocusin = function (event) {
+  this.handleRootFocus(event, true);
+};
+
 DvtDataGrid.prototype._clearFocusoutTimeout = function () {
   if (this.m_focusoutTimeout) {
     clearTimeout(this.m_focusoutTimeout);
@@ -18817,9 +18869,11 @@ DvtDataGrid.prototype._handleCancelEdit = function (event, element) {
  * Leave editing
  * @param {Event} event the event triggering actionable mode
  * @param {Element|undefined|null} element
+ * @param {boolean} cancel
+ * @param {boolean} shouldFocus
  * @returns {boolean} false
  */
-DvtDataGrid.prototype._leaveEditing = function (event, element, cancel) {
+DvtDataGrid.prototype._leaveEditing = function (event, element, cancel, shouldFocus) {
   var details = {
     event: event,
     ui: {
@@ -18830,15 +18884,21 @@ DvtDataGrid.prototype._leaveEditing = function (event, element, cancel) {
   };
   if (!cancel) {
     disableAllFocusableElements(element);
+    if (shouldFocus === false) {
+      this.m_shouldFocus = shouldFocus;
+    }
     this._highlightActive();
   }
   var rerender = this.fireEvent('beforeEditEnd', details);
   if (rerender) {
     this.m_currentMode = 'navigation';
     disableAllFocusableElements(element);
-      this._highlightActive();
-      this._reRenderCell(element, 'navigation',
-                       this.getMappedStyle('cellEdit'), this.m_editableClone);
+    if (shouldFocus === false) {
+      this.m_shouldFocus = shouldFocus;
+    }
+    this._highlightActive();
+    this._reRenderCell(element, 'navigation',
+                      this.getMappedStyle('cellEdit'), this.m_editableClone);
   } else {
     rerender = false;
     this._scrollToActive(this.m_active);
@@ -24272,7 +24332,7 @@ DataGridProviderCellSet.prototype.getMetadata = function (indexes) {
     metadata: item.metadata,
     keys: {
       row: this.rowKeyMap.get(item.rowIndex),
-      column: this.rowKeyMap.get(item.columnIndex)
+      column: this.columnKeyMap.get(item.columnIndex)
     }
   };
 };

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

@@ -124,6 +124,22 @@ import { GenericEvent } from 'ojs/ojeventtarget';
  *     </tr>
  *     <tr>
  *       <td>
+ *         {@link RESTDataProvider}
+ *       </td>
+ *       <td>
+ *         DataProvider implementation that fetches data from a JSON-based REST API.
+ *       </td>
+ *     </tr>
+ *     <tr>
+ *       <td>
+ *         {@link RESTTreeDataProvider}
+ *       </td>
+ *       <td>
+ *         TreeDataProvider implementation that fetches hierarchical data from a JSON-based REST API.
+ *       </td>
+ *     </tr>
+ *     <tr>
+ *       <td>
  *         {@link TreeDataProviderView}
  *       </td>
  *       <td>
@@ -144,10 +160,12 @@ import { GenericEvent } from 'ojs/ojeventtarget';
  *     <li>{@link FlattenedTreeDataProviderView}</li>
  *     <li>{@link ListDataProviderView}</li>
  *     <li>{@link PagingDataProviderView}</li>
+ *     <li>{@link RESTDataProvider}</li>
  *     <li><b>Interface {@link TreeDataProvider}</b></li>
  *       <ul>
  *         <li>{@link ArrayTreeDataProvider}</li>
  *         <li>{@link IndexerModelTreeDataProvider}</li>
+ *         <li>{@link RESTTreeDataProvider}</li>
  *         <li>{@link TreeDataProviderView}</li>
  *       </ul>
  *     </li>