@oracle/oraclejet 12.0.2 → 12.0.3

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

@@ -16,7 +16,7 @@ import 'ojs/ojbutton';
 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, getActionableElementsInNode, 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';
@@ -16035,7 +16035,7 @@ DvtDataGrid.prototype.getLabelledBy = function (activeObject, prevActiveObject,
     }
   }
 
-  let focusableElems = getFocusableElementsIncludingDisabled(element);
+  let focusableElems = getActionableElementsInNode(element);
   if (focusableElems && focusableElems.length > 0) {
     statesArray.push({ key: 'accessibleContainsControls' });
   }
@@ -22814,14 +22814,18 @@ DvtDataGrid.prototype._isHeaderSelected = function (context, axis) {
 };
 
 /**
- * Clear all header highlight
- */
- DvtDataGrid.prototype._clearHeaderHighLight = function () {
-  const someSelectedHeaders = this.m_root.querySelectorAll('.' + this.getMappedStyle('headerPartialSelected'));
+* Clear all header highlight
+*/
+DvtDataGrid.prototype._clearHeaderHighLight = function () {
+  const someSelectedSelector = '.' + this.getMappedStyle('headerPartialSelected')
+  + '.' + this.getMappedStyle('headercell');
+  const someSelectedHeaders = this.m_root.querySelectorAll(someSelectedSelector);
   for (let i = 0; i < someSelectedHeaders.length; i++) {
     someSelectedHeaders[i].classList.remove(this.getMappedStyle('headerPartialSelected'));
   }
-  const allSelectedHeaders = this.m_root.querySelectorAll('.' + this.getMappedStyle('headerAllSelected'));
+  const allSelectedSelector = '.' + this.getMappedStyle('headerAllSelected')
+    + '.' + this.getMappedStyle('headercell');
+  const allSelectedHeaders = this.m_root.querySelectorAll(allSelectedSelector);
   for (let i = 0; i < allSelectedHeaders.length; i++) {
     allSelectedHeaders[i].classList.remove(this.getMappedStyle('headerAllSelected'));
   }

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

@@ -2919,11 +2919,21 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     // passing in true to indicate that we want to show the popup of showOn is set
     // to 'focus'. If this isn't a custom element, we don't want to override the
     // focus functions.
+    // Also, when readonly is true, we just want to focus on the readonly element,
+    // as the popup isn't an issue.
     if (this._IsCustomElement()) {
       let comp = this._getRootElement();
-      let inputElem = this.GetFocusElement();
-      comp.focus = function () {
-        inputElem.focus(true);
+      // We need the input element here regardless of readonly state.
+      let inputElem = this._GetContentElement()[0];
+      comp.focus = () => {
+        const focusElem = this.GetFocusElement();
+        // we only want to call .focus(true) if it's the input elem that we added
+        // the custom focus callback on.
+        if (focusElem === inputElem) {
+          inputElem.focus(true);
+        } else {
+          focusElem.focus();
+        }
       };
 
       let proto = Object.getPrototypeOf(inputElem);
@@ -9061,11 +9071,18 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
       // passing in true to indicate that we want to show the popup of showOn is set
       // to 'focus'.  If this isn't a custom element, we don't want to override the
       // focus functions.
+      // Also, when readonly is true, we just want to focus on the readonly element,
+      // as the popup isn't an issue.
       if (this._IsCustomElement()) {
         let comp = this._getRootElement();
-        let inputElem = this.GetFocusElement();
-        comp.focus = function () {
-          inputElem.focus(true);
+        // We need the input element here regardless of readonly state.
+        let inputElem = this._GetContentElement()[0];
+        comp.focus = () => {
+          if (this.options.readOnly === true) {
+            this.GetFocusElement().focus(); // This should be the readonly focus element.
+          } else {
+            inputElem.focus(true);
+          }
         };
 
         let proto = Object.getPrototypeOf(inputElem);

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

@@ -3293,22 +3293,13 @@ import { getDeviceRenderMode } from 'ojs/ojconfig';
     },
 
     _disableBodyOverflow: function () {
-      var body = $(document.body);
-      this._origBodyOverflow = {
-        x: body.css('overflow-x'),
-        y: body.css('overflow-y')
-      };
-      body.css('overflow-x', 'hidden');
-      body.css('overflow-y', 'hidden');
+      var body = document.body;
+      body.classList.add('oj-dialog-sheet-animating');
     },
 
     _restoreBodyOverflow: function () {
-      if (this._origBodyOverflow) {
-        var body = $(document.body);
-        body.css('overflow-x', this._origBodyOverflow.x);
-        body.css('overflow-y', this._origBodyOverflow.y);
-        this._origBodyOverflow = null;
-      }
+      var body = document.body;
+      body.classList.remove('oj-dialog-sheet-animating');
     },
 
     _destroyCloseButton: function () {

package/dist/js/libs/oj/debug_esm/ojdvt-timecomponent.js

@@ -5,7 +5,7 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-import { CSSStyle, BaseComponent, Agent, JsonUtils, Container, ClipPath, ToolkitUtils, TransientButton, EventManager, Rectangle, Rect, SvgDocumentUtils, MouseEvent, Point, KeyboardHandler, KeyboardEvent } from 'ojs/ojdvt-toolkit';
+import { CSSStyle, BaseComponent, Agent, Container, ClipPath, ToolkitUtils, TransientButton, EventManager, Rectangle, Rect, SvgDocumentUtils, MouseEvent, Point, KeyboardHandler, KeyboardEvent } from 'ojs/ojdvt-toolkit';
 import { TimeAxisUtils } from 'ojs/ojtimeaxis-toolkit';
 
 /**
@@ -179,38 +179,41 @@ class TimeComponent extends BaseComponent {
    * @param {string} type The raw data object type. Must be either 'series', 'item', 'row', or 'task'
    * @return {object} The sanitized data
    */
-  static sanitizeData(data, type) {
-    var seriesCopy;
-    var itemCopy;
-    var isSeriesData = type === 'series' || type === 'row';
+   static sanitizeData(data, type) {
+    const sanitizeNoTemplateItemData = (item) => {
+      if (item._itemData.taskId) {
+        // Specifically for Gantt with row data supplied and no task template,
+        // _itemData does not have the task's id prop (it has the taskId prop)
+        const itemCopy = Object.assign({}, item._itemData);
+        itemCopy.id = itemCopy.taskId;
+        delete itemCopy.taskId;
+        return itemCopy;
+      }
+      return item._itemData;
+    };
+    const sanitizeItemData = (item) => {
+      const itemCopy = Object.assign({}, item);
+      delete itemCopy._itemData;
+      return itemCopy;
+    };
+    const isSeriesData = type === 'series' || type === 'row';
     if (isSeriesData) {
-      var itemProp = type === 'series' ? 'items' : 'tasks';
-      if (data[itemProp].length > 0) {
-        if (data[itemProp][0]._noTemplate) {
-          seriesCopy = JsonUtils.clone(data, null, {itemProp: true});
-          seriesCopy[itemProp] = seriesCopy[itemProp].map((item) => {
-            return item._itemData;
-          });
-          return seriesCopy;
-        } else if (data[itemProp][0]._itemData) {
-          seriesCopy = JsonUtils.clone(data, null, {itemProp: true});
-          seriesCopy[itemProp] = seriesCopy[itemProp].map((item) => {
-            itemCopy = JsonUtils.clone(item);
-            delete itemCopy._itemData;
-            return itemCopy;
-          });
-          return seriesCopy;
+      const itemProp = type === 'series' ? 'items' : 'tasks';
+      const items = data[itemProp];
+      if (items.length > 0) {
+        const seriesCopy = Object.assign({}, data._noTemplate ? data._itemData : data);
+        if (items[0]._noTemplate) {
+          seriesCopy[itemProp] = data[itemProp].map(sanitizeNoTemplateItemData);
+        } else if (items[0]._itemData) {
+          seriesCopy[itemProp] = data[itemProp].map(sanitizeItemData);
         }
-        return data;
+        return seriesCopy;
       }
-    }
-    else {
+    } else {
       if (data._noTemplate) {
-        return data._itemData;
+        return sanitizeNoTemplateItemData(data);
       } else if (data._itemData) {
-        itemCopy = JsonUtils.clone(data);
-        delete itemCopy._itemData;
-        return itemCopy;
+        return sanitizeItemData(data);
       }
     }
     return data;
@@ -481,7 +484,7 @@ class TimeComponent extends BaseComponent {
           event.wheelDeltaX = -wheelEvent.deltaX / TimeComponent.SCROLL_LINE_HEIGHT; // number of lines scrolled per mouse wheel click
       }
 
-      if (wheelDelta) { // if vertical mouse wheel amount is defined, non null, non zero 
+      if (wheelDelta) { // if vertical mouse wheel amount is defined, non null, non zero
         var compPagePos = this.getCtx().getStageAbsolutePosition();
         if (this._isVertical)
           var compLoc = event.pageY - compPagePos.y - this.getStartYOffset();

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

@@ -10,6 +10,7 @@ import { __GetWidgetConstructor, setDefaultOptions, createDynamicPropertyGetter,
 import $ from 'jquery';
 import 'ojs/ojlabel';
 import { parseJSONFromFontFamily } from 'ojs/ojthemeutils';
+import FocusUtils from 'ojs/ojfocusutils';
 import Context from 'ojs/ojcontext';
 import { error, info, warn } from 'ojs/ojlogger';
 import RequiredValidator from 'ojs/ojvalidator-required';
@@ -23,7 +24,6 @@ import { Press } from 'hammerjs';
 import 'ojs/ojjquery-hammer';
 import { isTouchSupported, isHTMLContent, cleanHtml, validateURL, makeFocusable } from 'ojs/ojdomutils';
 import { startAnimation } from 'ojs/ojanimation';
-import FocusUtils from 'ojs/ojfocusutils';
 
 /**
  * Base class for rendering the 'inside' labels. This is so InsideLabelStrategy
@@ -3078,6 +3078,20 @@ oj.__registerWidget('oj.editableValue', $.oj.baseComponent,
           this._placeholderOptionChanged(flags);
           break;
 
+        case 'readOnly':
+          if (this._retainFocusOnReadonlyChange) {
+            // This setTimeout call is needed to allow the dom to update before we
+            // get the focus element (or the element will still be hidden).
+            setTimeout(() => {
+              this.GetFocusElement().focus();
+              if (this._resolveBusyStateFocusRestore) {
+                this._resolveBusyStateFocusRestore();
+                delete this._resolveBusyStateFocusRestore;
+              }
+            }, 0);
+          }
+          break;
+
         case 'title':
           // Ignore title attribute for custom element components.
           if (!this._IsCustomElement()) {
@@ -3237,6 +3251,9 @@ oj.__registerWidget('oj.editableValue', $.oj.baseComponent,
     },
 
     /**
+     * JET-48463 - If we are in readonly mode, we call _GetReadonlyFocusElement, and fall back to
+     * _GetContentElement()[0] if _GetReadonlyFocusElement happens to return null.
+     * If not readonly, we just return _GetContentElement()[0]
      * @memberof oj.editableValue
      * @instance
      * @override
@@ -3244,7 +3261,20 @@ oj.__registerWidget('oj.editableValue', $.oj.baseComponent,
      * @since 5.0.0
      */
     GetFocusElement: function () {
-      return this._GetContentElement()[0];
+      return this.options.readOnly === true ?
+        this._GetReadonlyFocusElement() || this._GetContentElement()[0] :
+        this._GetContentElement()[0];
+    },
+
+    /**
+     * Returns the readonly focus element if there is a readonly specific element, otherwise null
+     * @memberof oj.editableValue
+     * @instance
+     * @protected
+     * @return {Element|null}
+     */
+    _GetReadonlyFocusElement: function () {
+      return this._getReadonlyDiv();
     },
 
     /**
@@ -3298,6 +3328,21 @@ oj.__registerWidget('oj.editableValue', $.oj.baseComponent,
           }
           break;
         case 'readOnly':
+          this._retainFocusOnReadonlyChange = FocusUtils.containsFocus(this.widget()[0]);
+          if (this._retainFocusOnReadonlyChange) {
+            if (!this._resolveBusyStateFocusRestore) {
+              var domElem = this.element[0];
+              var busyContext = Context.getContext(domElem).getBusyContext();
+              var description = 'Waiting for focus on the component ';
+
+              if (domElem && domElem.id) {
+                description += `with id="${domElem.id}" `;
+              }
+              description += 'to be restored.';
+              this._resolveBusyStateFocusRestore =
+                busyContext.addBusyState({ description: description });
+            }
+          }
           this._addRemoveOjReadOnlyClassOnLabel(document.getElementById(this.options.labelledBy),
             value);
           break;

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

@@ -52,13 +52,28 @@ const checkVisibility = function (element) {
   return !(element.offsetHeight === 0 || element.offsetWidth === 0);
 };
 
+/**
+ * @export
+ */
+const getActionableElementsInNode = function (element) {
+  var actionableElems = [];
+  let nodes = element.querySelectorAll(_ACTIONABLE_ELEMENTS_QUERY);
+  for (var i = 0; i < nodes.length; i++) {
+    var elem = nodes[i];
+    if (!elem.disabled && elem.style.display !== 'none') {
+      actionableElems.push(elem);
+    }
+  }
+  return actionableElems;
+};
+
 /**
  * @export
  */
 const isActionableElement = function (node) {
   var parentNode = node.parentNode;
   if (parentNode != null) {
-    var nodes = parentNode.querySelectorAll(_ACTIONABLE_ELEMENTS_QUERY);
+    var nodes = getActionableElementsInNode(parentNode);
     for (var i = 0; i < nodes.length; i++) {
       if (nodes[0] === node) {
         return true;
@@ -208,4 +223,4 @@ const getLogicalChildPopup = function (componentElement) {
   return null;
 };
 
-export { checkVisibility, disableAllFocusableElements, disableElement, enableAllFocusableElements, getFocusableElementsInNode, getLogicalChildPopup, isActionableElement };
+export { checkVisibility, disableAllFocusableElements, disableElement, enableAllFocusableElements, getActionableElementsInNode, getFocusableElementsInNode, getLogicalChildPopup, isActionableElement };

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

@@ -1202,6 +1202,16 @@ var __oj_radioset_metadata =
        * @since 5.0.0
        */
       GetFocusElement: function () {
+        // JET-48463 - oj-table issue where focus is lost
+        // GetFocusElement() needs to return the correct readonly element
+        // If _GetReadonlyFocusElement() returns null, fallback to the
+        // enabled element logic.
+        if (this.options.readOnly === true) {
+          const readonlyFocusElement = this._GetReadonlyFocusElement();
+          if (readonlyFocusElement) {
+            return readonlyFocusElement;
+          }
+        }
         // JET-43430 - dynamic form focus issue for radio buttonset
         // When tabbing through, the input element that is currently checked will be focused if
         // one is available. Otherwise the first input element will be given focus. We need to
@@ -1217,6 +1227,18 @@ var __oj_radioset_metadata =
         // If there is no checked inputs, simply return the first enabled input
         return this._GetContentElement().not(':disabled').first()[0];
       },
+      /**
+       * oj-radioset doesn't use .oj-text-field-readonly for the focusable readonly content,
+       * so we need to use a different selector.
+       * @memberof oj.ojRadioset
+       * @instance
+       * @override
+       * @protected
+       * @return {Element|null}
+       */
+      _GetReadonlyFocusElement: function () {
+        return this.widget()[0].querySelector('.oj-form-control-container');
+      },
       /**
        * Whether the component is required.
        *

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

@@ -12754,6 +12754,25 @@ oj$1.__registerWidget('oj.ojCombobox', $.oj.editableValue,
       }
     },
 
+    /**
+     * combobox-many doesn't use .oj-text-field-readonly for the focusable readonly content,
+     * so we need to use a different selector.  Combobox-one doesn't need this override,
+     * so we just return the default readonly element.
+     * @memberof! _OjMultiCombobox
+     * @instance
+     * @override
+     * @protected
+     * @return {Element|null}
+     */
+    _GetReadonlyFocusElement: function () {
+      if (this.multiple) {
+        return this.widget()[0].querySelector('.oj-combobox-accessible-container');
+      }
+
+      // For oj-combobox-one return the default element
+      return this._super();
+    },
+
     // 19670748, dropdown popup should be closed on subtreeDetached notification.
     _NotifyDetached: function () {
       this._superApply(arguments);

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

@@ -8,7 +8,7 @@
 import { Component, h } from 'preact';
 import { Root, customElement } from 'ojs/ojvcomponent';
 import { getTranslatedString } from 'ojs/ojtranslation';
-import { KEYBOARD_KEYS, handleActionablePrevTab, handleActionableTab, getNoJQFocusHandlers, getFocusableElementsIncludingDisabled, disableAllFocusableElements, enableAllFocusableElements } from 'ojs/ojdatacollection-common';
+import { KEYBOARD_KEYS, handleActionablePrevTab, handleActionableTab, getNoJQFocusHandlers, getActionableElementsInNode, disableAllFocusableElements, enableAllFocusableElements } from 'ojs/ojdatacollection-common';
 import Context from 'ojs/ojcontext';
 import { IteratingDataProviderContentHandler, IteratingTreeDataProviderContentHandler } from 'ojs/ojvcollection';
 import oj from 'ojs/ojcore-base';
@@ -522,11 +522,11 @@ let StreamList = StreamList_1 = class StreamList extends Component {
         }
         if (data == null) {
             return (h(Root, { ref: this.setRootElement },
-                h("div", { role: 'list', "data-oj-context": true, tabIndex: 0, "aria-label": getTranslatedString('oj-ojStreamList.msgFetchingData') }, content)));
+                h("div", { role: "list", "data-oj-context": true, tabIndex: 0, "aria-label": getTranslatedString('oj-ojStreamList.msgFetchingData') }, content)));
         }
         else {
             return (h(Root, { ref: this.setRootElement },
-                h("div", { role: 'list', "data-oj-context": true, onClick: this._handleClick, onKeyDown: this._handleKeyDown, onfocusin: this._handleFocusIn, onfocusout: this._handleFocusOut }, content)));
+                h("div", { role: "list", "data-oj-context": true, onClick: this._handleClick, onKeyDown: this._handleKeyDown, onfocusin: this._handleFocusIn, onfocusout: this._handleFocusOut }, content)));
         }
     }
     _doBlur() {
@@ -577,7 +577,7 @@ let StreamList = StreamList_1 = class StreamList extends Component {
             className += ' oj-stream-list-child-skeleton';
         }
         return (h("div", { class: className, key: key },
-            h("div", { class: 'oj-stream-list-skeleton-content oj-animation-skeleton' })));
+            h("div", { class: "oj-stream-list-skeleton-content oj-animation-skeleton" })));
     }
     _applySkeletonExitAnimation(skeletons) {
         const resolveFunc = this.addBusyState('apply skeleton exit animations');
@@ -1077,7 +1077,7 @@ let StreamList = StreamList_1 = class StreamList extends Component {
     }
     _isInFocusableElementsList(target, item) {
         let found = false;
-        const nodes = getFocusableElementsIncludingDisabled(item);
+        const nodes = getActionableElementsInNode(item);
         nodes.forEach(function (node) {
             if (node === target) {
                 found = true;

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

@@ -675,6 +675,19 @@ const ARIA_DISABLED = 'aria-disabled';
 
     // P R O T E C T E D    C O N S T A N T S   A N D   M E T H O D S
 
+    /**
+     * oj-switch doesn't use .oj-text-field-readonly for the focusable readonly content,
+     * so we need to use a different selector.
+     * @memberof oj.ojSwitch
+     * @instance
+     * @override
+     * @protected
+     * @return {Element|null}
+     */
+    _GetReadonlyFocusElement: function () {
+      return this.widget()[0].querySelector('.oj-switch-thumb');
+    },
+
     /**
      * @private
      * @const