@oracle/oraclejet 15.0.3 → 15.0.5

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

@@ -6252,10 +6252,17 @@ var __oj_tab_bar_metadata =
    * @ignore
    * @private
    */
-  var _HorizontalNavListOverflowHandler = function (items, overflow, truncation, navlistHandler) {
+  var _HorizontalNavListOverflowHandler = function (
+    items,
+    overflow,
+    truncation,
+    display,
+    navlistHandler
+  ) {
     this._overflow = overflow;
     this._truncation = truncation;
     this._items = items;
+    this._display = display;
     this._navlistHandler = navlistHandler;
   };
 
@@ -6273,6 +6280,8 @@ var __oj_tab_bar_metadata =
       return;
     }
 
+    var display = this.m_widget.GetOption('display');
+
     if (!overflow) {
       // eslint-disable-next-line no-param-reassign
       overflow = this.m_widget.GetOption('overflow');
@@ -6282,7 +6291,13 @@ var __oj_tab_bar_metadata =
       truncation = this.m_widget.GetOption('truncation');
     }
 
-    var overflowHandler = new _HorizontalNavListOverflowHandler(items, overflow, truncation, this);
+    var overflowHandler = new _HorizontalNavListOverflowHandler(
+      items,
+      overflow,
+      truncation,
+      display,
+      this
+    );
 
     // Return if there is no truncation or overflow handling needed
     if (!overflowHandler.shouldHandleOverflow()) {
@@ -6717,7 +6732,7 @@ var __oj_tab_bar_metadata =
   _HorizontalNavListOverflowHandler.prototype.getOverflowThreshold = function () {
     var threshold = -1;
     if (this._overflow === 'popup') {
-      threshold = this._calculateThreshold(this._overflowData) - 1;
+      threshold = this._calculateThreshold(this._overflowData);
     }
     return threshold;
   };
@@ -6725,7 +6740,8 @@ var __oj_tab_bar_metadata =
   _HorizontalNavListOverflowHandler.prototype._collectOverflowData = function () {
     var itemNonTextWidth;
     var overflowItemWidth;
-    var edge = DomUtils.getReadingDirection() === 'ltr' ? 'right' : 'left';
+    var readingDirection = DomUtils.getReadingDirection();
+    var edge = readingDirection === 'ltr' ? 'right' : 'left';
     var container = this._getWidget().ojContext.element;
 
     var item = this._items.last();
@@ -6740,14 +6756,23 @@ var __oj_tab_bar_metadata =
     if (this._overflow === 'popup') {
       var overFlowMenuButton = this._getOverflowMenuButton()[0];
       var rect = overFlowMenuButton.getBoundingClientRect();
+      const overFlowMenuButtonComputedStyle = window.getComputedStyle(overFlowMenuButton);
       let margin = 0;
-      if (DomUtils.getReadingDirection() === 'ltr') {
-        margin = window.getComputedStyle(overFlowMenuButton).marginRight;
-      } else {
-        margin = window.getComputedStyle(overFlowMenuButton).marginLeft;
+      // NavigationList overflow icon has a left margin in ltr and right margin in rtl
+      // NavigationList overflow "more" item has no margin in any case so this calculated margin= 0px.
+      if (!this._navlistHandler._isTabBar() && this._display === 'icons') {
+        margin =
+          readingDirection === 'ltr'
+            ? overFlowMenuButtonComputedStyle.marginLeft
+            : overFlowMenuButtonComputedStyle.marginRight;
+      }
+      // TabBar overflow menu cases (icon and "more" item) has a right margin only in rtl
+      if (this._navlistHandler._isTabBar() && readingDirection === 'rtl') {
+        margin = overFlowMenuButtonComputedStyle.marginRight;
       }
       overflowItemWidth = rect.width + parseInt(margin, 10);
     }
+    // Since this is last item it does not have a margin added to item edge
     var itemEdge = item[0].getBoundingClientRect()[edge];
 
     return {
@@ -6811,7 +6836,8 @@ var __oj_tab_bar_metadata =
 
   _HorizontalNavListOverflowHandler.prototype._calculateThreshold = function (overflowData) {
     var items = this._items;
-    var edge = DomUtils.getReadingDirection() === 'ltr' ? 'right' : 'left';
+    var readingDirection = DomUtils.getReadingDirection();
+    var edge = readingDirection === 'ltr' ? 'right' : 'left';
     var index = items.length - 1;
     var itemEdge = items[index].getBoundingClientRect()[edge];
 
@@ -6821,7 +6847,22 @@ var __oj_tab_bar_metadata =
       index > 0
     ) {
       index -= 1;
-      itemEdge = items[index].getBoundingClientRect()[edge];
+      // NavigationList item icons have a left margin hence for icon-only cases item edge is sufficient
+      if (!this._navlistHandler._isTabBar() && this._display === 'icons') {
+        itemEdge = items[index].getBoundingClientRect()[edge];
+      } else {
+        // Non icon-only case items have a right margin except for the last one.
+        const itemComputedStyle = window.getComputedStyle(items[index]);
+        let itemMargin = 0;
+        // TabBar has right margin for all items in ltr and rtl mode.
+        if (this._navlistHandler._isTabBar() || readingDirection === 'ltr') {
+          itemMargin = itemComputedStyle.marginRight;
+        } else {
+          // Navigationlist non icon-only case items have a right margin (covered by if above) in ltr and left margin in rtl
+          itemMargin = itemComputedStyle.marginLeft;
+        }
+        itemEdge = items[index].getBoundingClientRect()[edge] + parseInt(itemMargin, 10);
+      }
     }
 
     return index + 1;

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

@@ -37,12 +37,12 @@ const oj = {
    * @global
    * @member {string} version JET version numberr
    */
-  version: '15.0.3',
+  version: '15.0.5',
   /**
    * @global
    * @member {string} revision JET source code revision number
    */
-  revision: '2023-08-22_09-07-29',
+  revision: '2023-09-28_04-37-00',
 
   // This function is only meant to be used outside the library, so quoting the name
   // to avoid renaming is appropriate

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

@@ -16544,7 +16544,7 @@ DvtDataGrid.prototype._handleInsertRangeCellFetchSuccess = function (
     }
     if (hasHeaders) {
       this.m_endRowHeader += count;
-      if (offset > this.m_frozenRowIndex + 1) {
+      if (!this._hasFrozenRows() || (this._hasFrozenRows() && offset > this.m_frozenRowIndex + 1)) {
         this.m_endRowHeaderPixel += totalDimension;
       }
       this.m_stopRowHeaderFetch = false;
@@ -16575,7 +16575,10 @@ DvtDataGrid.prototype._handleInsertRangeCellFetchSuccess = function (
     }
     if (hasHeaders) {
       this.m_endColHeader += count;
-      if (offset > this.m_frozenColIndex + 1) {
+      if (
+        !this._hasFrozenColumns() ||
+        (this._hasFrozenColumns() && offset > this.m_frozenColIndex + 1)
+      ) {
         this.m_endColHeaderPixel += totalDimension;
       }
       this.m_stopColumnHeaderFetch = false;

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

@@ -2103,6 +2103,10 @@ IteratingDataProviderContentHandler.prototype.renderInitialSkeletons = function
     this.m_root = this.m_superRoot;
     this.m_superRoot = null;
   }
+  if (this.m_engine && this.m_root.querySelector('.oj-listview-item-element') != null) {
+    // we need to clean the items before emptying them
+    this.cleanItems(this.m_engine);
+  }
   $(this.m_root).empty();
 
   // determines how many items needed to fill the viewport

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

@@ -2001,6 +2001,8 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
   _KEYBOARD_EDIT_OPTION_ENABLED: 'enabled',
   _KEYBOARD_EDIT_OPTION_DISABLED: 'disabled',
 
+  _INPUTDATE_CLEAR_ICON_LABEL_KEY: 'accessibleClearIconAltText',
+
   options: {
     /**
      * <p>
@@ -2914,7 +2916,7 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     this._triggerNode = null;
     this._inputContainer = null;
     this._redirectFocusToInputContainer = false;
-    this._isMobile = false;
+    this._hasTouch = false;
 
     // only case is when of showOn of focus and one hides the element [need to avoid showing]
     this._ignoreDatePickerShow = false;
@@ -2934,6 +2936,7 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     this._nativePickerConverter = null;
 
     this._labelValueWrapper = null;
+    this._isMobile = getDeviceRenderMode() === 'phone';
 
     var nodeName = this.element[0].nodeName.toLowerCase();
     this._isInLine = nodeName === 'div' || nodeName === 'span';
@@ -3251,6 +3254,9 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
         this._resolveDateConverterBusyState();
         delete this._resolveDateConverterBusyState;
       }
+      if (this.options.readOnly !== true) {
+        this._attachClearIcon();
+      }
     }.bind(this);
 
     if (this._dateConverterPromise) {
@@ -3393,6 +3399,31 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     return retVal;
   },
 
+  /**
+   * Performs post processing after _SetOption() calls _superApply(). Different options, when changed, perform
+   * different tasks.
+   *
+   * @param {string} option
+   * @param {Object=} flags
+   * @protected
+   * @memberof oj.ojInputDate
+   * @instance
+   */
+  _AfterSetOption: function (option, flags) {
+    this._super(option, flags);
+
+    switch (option) {
+      case 'disabled':
+      case 'readOnly':
+      case 'value':
+        this._attachClearIcon();
+        break;
+
+      default:
+        break;
+    }
+  },
+
   /**
    * @ignore
    */
@@ -3719,6 +3750,73 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     }
   },
 
+  /**
+   * Render or remove the clear icon
+   * We don't render the clear icon for non-mobile or required fields.
+   * @ignore
+   * @private
+   * @memberof oj.ojInputDate
+   * @instance
+   */
+  _attachClearIcon: function () {
+    if (this._isMobile && !this.options.required) {
+      var contentWrapper = this._GetContentWrapper();
+      // content wrapper is undefined when the component is inline or is not a
+      // custom element, so we don't need a clear icon in that case.
+      if (contentWrapper) {
+        var wrapperElem = contentWrapper.parentElement;
+        var clearIconBtn = wrapperElem.querySelector('a.oj-inputdatetime-clear-icon-btn');
+
+        if (this.options.disabled || this.options.readOnly) {
+          // remove the icon if it is there
+          if (clearIconBtn) {
+            wrapperElem.removeChild(clearIconBtn);
+          }
+
+          // if the clearIcon is not rendered, we shouldn't have this class
+          wrapperElem.classList.remove('oj-inputdatetime-clearicon-mobile');
+        } else {
+          // Only add the clear icon for mobile
+          if (clearIconBtn === null) {
+            var clearIcon;
+            clearIconBtn = document.createElement('a');
+            clearIconBtn.className =
+              'oj-inputdatetime-clear-icon-btn oj-component-icon oj-clickable-icon-nocontext';
+            clearIconBtn.setAttribute('tabindex', '-1');
+            clearIconBtn.setAttribute(
+              'aria-label',
+              this.getTranslatedString(this._INPUTDATE_CLEAR_ICON_LABEL_KEY)
+            );
+
+            clearIconBtn.setAttribute('target', '_blank');
+            clearIcon = document.createElement('span');
+            clearIcon.className = 'oj-inputdatetime-clear-icon';
+
+            clearIconBtn.appendChild(clearIcon);
+            wrapperElem.insertBefore(clearIconBtn, this._labelValueWrapper.nextElementSibling); // @HTMLUpdateOK
+
+            clearIconBtn.addEventListener(
+              this._CLICK_HANDLER_KEY,
+              this._onClearIconClickHandler.bind(this)
+            );
+          }
+
+          // clear icon is only rendered for mobile at this time.
+          // For mobile, we render oj-form-control-empty-clearicon if the input doesn't
+          // have a value, as we always want the clear icon hidden for this case.
+          wrapperElem.classList.add('oj-inputdatetime-clearicon-mobile');
+
+          var val = this._GetDisplayValue();
+
+          if (val && val !== '') {
+            wrapperElem.classList.remove('oj-form-control-empty-clearicon');
+          } else {
+            wrapperElem.classList.add('oj-form-control-empty-clearicon');
+          }
+        }
+      }
+    }
+  },
   /**
    * This function will create the necessary calendar trigger container [i.e. image to launch the calendar]
    * and perform any attachment to events
@@ -3748,7 +3846,7 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     var self = this;
 
     this._datepickerWrapperTouchStartListener = function () {
-      self._isMobile = true;
+      self._hasTouch = true;
     };
     this._wrapper[0].addEventListener('touchstart', this._datepickerWrapperTouchStartListener, {
       passive: true
@@ -4453,6 +4551,15 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     }
 
     this._setDisplayAndValue(value, {});
+    // remove this class, since we have a value now.
+    // Only do this for oj-input-date, since oj-input-date-time doesn't
+    // update its value until done is pressed.
+    if (this.OuterWrapper.tagName === 'OJ-INPUT-DATE') {
+      let contentWrapper = this._GetContentWrapper();
+      if (contentWrapper) {
+        contentWrapper.parentElement.classList.remove('oj-form-control-empty-clearicon');
+      }
+    }
 
     if (this._isDateTimeSwitcher()) {
       this._placeFocusOnCalendar();
@@ -5948,6 +6055,50 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     }
   },
 
+  /**
+   * Invoked when the input event happens
+   *
+   * @ignore
+   * @protected
+   * @memberof! oj.ojInputDate
+   * @param {Event} event
+   */
+  _onInputHandler: function (event) {
+    this._super(event);
+    var inputNode = event.target;
+    let contentWrapper = this._GetContentWrapper();
+
+    if (contentWrapper && this._isMobile) {
+      if (inputNode.value !== '') {
+        contentWrapper.parentElement.classList.remove('oj-form-control-empty-clearicon');
+      } else {
+        contentWrapper.parentElement.classList.add('oj-form-control-empty-clearicon');
+      }
+    }
+  },
+
+  /**
+   * The handler clears the value of the input element and sets the focus on the input container
+   * since this is only used for mobile.
+   *
+   * @ignore
+   * @private
+   * @memberof! oj.ojInputDate
+   * @param {Event} event
+   */
+  _onClearIconClickHandler: function (event) {
+    var elem = this.element[0];
+
+    elem.value = '';
+    // we need to update the raw value to keep it in sync
+    this._SetRawValue('', event);
+    elem.focus();
+    let contentWrapper = this._GetContentWrapper();
+    if (contentWrapper) {
+      contentWrapper.parentElement.classList.add('oj-form-control-empty-clearicon');
+    }
+  },
+
   /**
    * This handler will set the value from the input text element.
    *
@@ -6399,7 +6550,7 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     this._closeInProgress = true;
     try {
       const showOnIsFocusOrUserFocus = this._showOnIsFocusOrUserFocus();
-      if (this._isMobile && showOnIsFocusOrUserFocus) {
+      if (this._hasTouch && showOnIsFocusOrUserFocus) {
         this._inputContainer.focus();
       } else {
         if (showOnIsFocusOrUserFocus) {
@@ -8951,6 +9102,8 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase, {
   _KEYBOARD_EDIT_OPTION_ENABLED: 'enabled',
   _KEYBOARD_EDIT_OPTION_DISABLED: 'disabled',
 
+  _INPUTTIME_CLEAR_ICON_LABEL_KEY: 'accessibleClearIconAltText',
+
   options: {
     /**
      * A datetime converter instance or a Promise to a datetime converter instance
@@ -9690,6 +9843,7 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase, {
       if (this.options.readOnly !== true) {
         if (this._isIndependentInput()) {
           this._attachTrigger();
+          this._attachClearIcon();
         }
       }
 
@@ -9862,6 +10016,31 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase, {
     return retVal;
   },
 
+  /**
+   * Performs post processing after _SetOption() calls _superApply(). Different options, when changed, perform
+   * different tasks.
+   *
+   * @param {string} option
+   * @param {Object=} flags
+   * @protected
+   * @memberof oj.ojInputTime
+   * @instance
+   */
+  _AfterSetOption: function (option, flags) {
+    this._super(option, flags);
+
+    switch (option) {
+      case 'disabled':
+      case 'readOnly':
+      case 'value':
+        this._attachClearIcon();
+        break;
+
+      default:
+        break;
+    }
+  },
+
   /**
    * @ignore
    * @protected
@@ -10192,6 +10371,76 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase, {
     }
   },
 
+  /**
+   * Render or remove the clear icon
+   * @ignore
+   * @private
+   * @memberof oj.ojInputTime
+   * @instance
+   */
+  _attachClearIcon: function () {
+    var labelValueWrapper = this.element[0].parentNode;
+    let wrapperElem = labelValueWrapper.parentNode;
+    var clearIconBtn = wrapperElem.querySelector('a.oj-inputdatetime-clear-icon-btn');
+
+    let isMobile = getDeviceRenderMode() === 'phone';
+
+    if (!isMobile || this.options.disabled || this.options.readOnly || this.options.required) {
+      // remove the icon if it is there
+      if (clearIconBtn) {
+        wrapperElem.removeChild(clearIconBtn);
+      }
+
+      // if the clearIcon is not rendered, we shouldn't have this class
+      wrapperElem.classList.remove('oj-inputdatetime-clearicon-mobile');
+    } else {
+      // Only add the clear icon for mobile
+      if (clearIconBtn === null) {
+        var clearIcon;
+        clearIconBtn = document.createElement('a');
+        clearIconBtn.className =
+          'oj-inputdatetime-clear-icon-btn oj-component-icon oj-clickable-icon-nocontext';
+        clearIconBtn.setAttribute('tabindex', '-1');
+        clearIconBtn.setAttribute(
+          'aria-label',
+          this.getTranslatedString(this._INPUTTIME_CLEAR_ICON_LABEL_KEY)
+        );
+
+        clearIconBtn.setAttribute('target', '_blank');
+        clearIcon = document.createElement('span');
+        clearIcon.className = 'oj-inputdatetime-clear-icon';
+
+        clearIconBtn.appendChild(clearIcon);
+        wrapperElem.insertBefore(clearIconBtn, labelValueWrapper.nextElementSibling); // @HTMLUpdateOK
+
+        clearIconBtn.addEventListener(
+          this._CLICK_HANDLER_KEY,
+          this._onClearIconClickHandler.bind(this)
+        );
+      }
+
+      // clear icon is only rendered for mobile at this time.
+      // For mobile, we render oj-form-control-empty-clearicon if the input doesn't
+      // have a value, as we always want the clear icon hidden for this case.
+      wrapperElem.classList.add('oj-inputdatetime-clearicon-mobile');
+
+      var val;
+
+      // if the component is not fully rendered, then we need to use the value option's value
+      // instead of the input element's value
+      if (wrapperElem.classList.contains('oj-complete')) {
+        val = this.element[0].value;
+      } else {
+        val = this.options.value;
+      }
+
+      if (val && val !== '') {
+        wrapperElem.classList.remove('oj-form-control-empty-clearicon');
+      } else {
+        wrapperElem.classList.add('oj-form-control-empty-clearicon');
+      }
+    }
+  },
   /**
    * This function will create the necessary time trigger container [i.e. image to launch the time drop down]
    * and perform any attachment to events
@@ -10282,6 +10531,50 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase, {
       : this.options.value;
   },
 
+  /**
+   * Invoked when the input event happens
+   *
+   * @ignore
+   * @protected
+   * @memberof! oj.ojInputTime
+   * @param {Event} event
+   */
+  _onInputHandler: function (event) {
+    this._super(event);
+    var inputNode = event.target;
+    let contentWrapper = this._GetContentWrapper();
+
+    if (contentWrapper && this._isMobile) {
+      if (inputNode.value !== '') {
+        contentWrapper.parentElement.classList.remove('oj-form-control-empty-clearicon');
+      } else {
+        contentWrapper.parentElement.classList.add('oj-form-control-empty-clearicon');
+      }
+    }
+  },
+
+  /**
+   * The handler clears the value of the input element and sets the focus on the input container
+   * since this is only used for mobile.
+   *
+   * @ignore
+   * @private
+   * @memberof! oj.ojInputTime
+   * @param {Event} event
+   */
+  _onClearIconClickHandler: function (event) {
+    var elem = this.element[0];
+
+    elem.value = '';
+    // we need to update the raw value to keep it in sync
+    this._SetRawValue('', event);
+    elem.focus();
+    let contentWrapper = this._GetContentWrapper();
+    if (contentWrapper) {
+      contentWrapper.parentElement.classList.add('oj-form-control-empty-clearicon');
+    }
+  },
+
   /**
    * Invoked when blur is triggered of the this.element
    *
@@ -10514,12 +10807,20 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase, {
    * @instance
    * @memberof! oj.ojInputTime
    */
-  // eslint-disable-next-line no-unused-vars
   _SetDisplayValue: function (displayValue) {
     // When not part of datePickerComp or of inline should update input element
     if (this._isIndependentInput()) {
       this._superApply(arguments);
     }
+    // remove this class, since we have a value now.
+    let elem = this.element[0];
+    if (elem) {
+      if (displayValue) {
+        elem.parentElement.parentElement.classList.remove('oj-form-control-empty-clearicon');
+      } else {
+        elem.parentElement.parentElement.classList.add('oj-form-control-empty-clearicon');
+      }
+    }
 
     // so this is a change in behavior from original design. Previously it was decided that app developer
     // would have to invoke refresh to render the calendar after setting the new value programatically; however now it is
@@ -12589,6 +12890,11 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
             self._switcherPrevYear = null;
             self._switcherPrevValue = null;
             self._hide(self._ON_CLOSE_REASON_SELECTION);
+            // remove this class, since we have a value now.
+            let contentWrapper = self._GetContentWrapper();
+            if (contentWrapper) {
+              contentWrapper.parentElement.classList.remove('oj-form-control-empty-clearicon');
+            }
             return false;
           }
           return undefined;

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

@@ -70,7 +70,17 @@ let DrawerPopup = DrawerPopup_1 = class DrawerPopup extends Component {
         this.handleOnBlur = (event) => {
             if (this.props.modality === 'modal') {
                 const zorderLayer = this.rootRef.current.parentNode;
-                const isTargetWithin = this.isTargetDescendantOfOwnZorderLayerOrItsNextSiblings(zorderLayer, event.relatedTarget);
+                let isTargetWithin = false;
+                if (event.relatedTarget) {
+                    if (this.isTargetDescendantOfOwnZorderLayerOrItsNextSiblings(zorderLayer, event.relatedTarget)) {
+                        isTargetWithin = true;
+                    }
+                }
+                else {
+                    if (this.isTargetDescendantOfOwnZorderLayerOrItsNextSiblings(zorderLayer, document.activeElement)) {
+                        isTargetWithin = true;
+                    }
+                }
                 if (!isTargetWithin && this.props.opened) {
                     const focusables = DrawerUtils.getFocusables(this.rootRef.current);
                     event.preventDefault();
@@ -312,7 +322,9 @@ let DrawerPopup = DrawerPopup_1 = class DrawerPopup extends Component {
             popupServiceInstance.open(popupServiceOptions);
         }
         else if (!this.wasDrawerOpenedInPrevState()) {
-            this.forceUpdate();
+            window.queueMicrotask(() => {
+                this.forceUpdate();
+            });
         }
     }
     getDrawerSurrogateLayerSelectors() {