@oracle/oraclejet 15.0.3 → 15.0.4

package/dist/css/stable/oj-stable.css

@@ -333,7 +333,7 @@
   visibility: hidden; }
 
 .oj-theme-json {
-  font-family: '{"name":"stable","targetPlatform":"all","behavior":"redwood","jetReleaseVersion":"v15.0.3"}' !important; }
+  font-family: '{"name":"stable","targetPlatform":"all","behavior":"redwood","jetReleaseVersion":"v15.0.4"}' !important; }
 
 .oj-helper-hidden-accessible {
   border: 0;
@@ -4762,7 +4762,7 @@ html.oj-agent-os-windows {
 .oj-fwk-icon-cross:before, .oj-combobox-clear-entry-icon:before, .oj-panel-remove-icon:before, .oj-select-clear-entry-icon:before, .oj-tabbar-remove-icon:before {
   content: "\f133"; }
 
-.oj-fwk-icon-cross02:before, .oj-inputtext-clear-icon:before, .oj-inputsearch-clear-icon:before, .oj-menu-option-start-icon .oj-menu-cancel-icon:before, .oj-searchselect-clear-value-icon:before {
+.oj-fwk-icon-cross02:before, .oj-inputdatetime-clear-icon:before, .oj-inputtext-clear-icon:before, .oj-inputsearch-clear-icon:before, .oj-menu-option-start-icon .oj-menu-cancel-icon:before, .oj-searchselect-clear-value-icon:before {
   content: "\f134"; }
 
 .oj-fwk-icon-cross03:before {
@@ -12758,6 +12758,24 @@ oj-calendar:not(.oj-complete) {
 .oj-inputdatetime-time-icon.oj-disabled {
   cursor: default; }
 
+.oj-inputdatetime-clear-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--oj-text-field-height);
+  width: 1.5625rem;
+  text-decoration: none;
+  cursor: var(--oj-core-cursor-clickable); }
+
+a.oj-inputdatetime-clear-icon-btn:active {
+  background-color: transparent; }
+
+.oj-inputdatetime-clear-icon {
+  color: inherit; }
+
+.oj-text-field-container.oj-form-control-empty-clearicon .oj-inputdatetime-clear-icon-btn {
+  display: none; }
+
 .oj-datepicker-popup {
   min-width: 17.5rem;
   min-height: 21.5rem; }
@@ -15416,7 +15434,7 @@ oj-input-password:not(.oj-complete) {
   align-items: center;
   justify-content: center;
   height: var(--oj-text-field-height);
-  width: 25px;
+  width: 1.5625rem;
   text-decoration: none;
   cursor: var(--oj-core-cursor-clickable); }
 
@@ -16767,7 +16785,8 @@ a.oj-navigationlist-item-content .oj-navigationlist-item-label {
   color: var(--oj-navigation-list-item-label-color);
   flex: 0 0 auto;
   font-size: var(--oj-navigation-list-icon-size);
-  margin: var(--oj-navigation-list-icon-margin); }
+  margin: var(--oj-navigation-list-icon-margin);
+  width: var(--oj-navigation-list-icon-size); }
 
 .oj-navigationlist-group-item {
   display: flex;
@@ -20623,7 +20642,8 @@ a.oj-tabbar-item-content .oj-tabbar-item-label {
 .oj-tabbar-item-icon {
   color: var(--oj-tab-bar-item-label-color);
   flex: 0 0 auto;
-  font-size: var(--oj-tab-bar-icon-size); }
+  font-size: var(--oj-tab-bar-icon-size);
+  width: var(--oj-tab-bar-icon-size); }
 
 /* Disabled node */
 .oj-tabbar-item.oj-disabled > .oj-tabbar-item-content,

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

@@ -37,12 +37,12 @@ define(['ojs/ojlogger'], function (Logger) { 'use strict';
      * @global
      * @member {string} version JET version numberr
      */
-    version: '15.0.3',
+    version: '15.0.4',
     /**
      * @global
      * @member {string} revision JET source code revision number
      */
-    revision: '2023-08-22_09-07-29',
+    revision: '2023-09-08_06-09-49',
 
     // 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/ojdataproviderscroller.js

@@ -2101,6 +2101,10 @@ define(['exports', 'ojs/ojcore-base', 'jquery', 'ojs/ojcontext', 'ojs/ojdatacoll
       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/ojdatetimepicker.js

@@ -1987,6 +1987,8 @@ var __oj_input_date_time_metadata =
     _KEYBOARD_EDIT_OPTION_ENABLED: 'enabled',
     _KEYBOARD_EDIT_OPTION_DISABLED: 'disabled',
 
+    _INPUTDATE_CLEAR_ICON_LABEL_KEY: 'accessibleClearIconAltText',
+
     options: {
       /**
        * <p>
@@ -2900,7 +2902,7 @@ var __oj_input_date_time_metadata =
       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;
@@ -2920,6 +2922,7 @@ var __oj_input_date_time_metadata =
       this._nativePickerConverter = null;
 
       this._labelValueWrapper = null;
+      this._isMobile = Config.getDeviceRenderMode() === 'phone';
 
       var nodeName = this.element[0].nodeName.toLowerCase();
       this._isInLine = nodeName === 'div' || nodeName === 'span';
@@ -3237,6 +3240,9 @@ var __oj_input_date_time_metadata =
           this._resolveDateConverterBusyState();
           delete this._resolveDateConverterBusyState;
         }
+        if (this.options.readOnly !== true) {
+          this._attachClearIcon();
+        }
       }.bind(this);
 
       if (this._dateConverterPromise) {
@@ -3379,6 +3385,31 @@ var __oj_input_date_time_metadata =
       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
      */
@@ -3705,6 +3736,73 @@ var __oj_input_date_time_metadata =
       }
     },
 
+    /**
+     * 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
@@ -3734,7 +3832,7 @@ var __oj_input_date_time_metadata =
       var self = this;
 
       this._datepickerWrapperTouchStartListener = function () {
-        self._isMobile = true;
+        self._hasTouch = true;
       };
       this._wrapper[0].addEventListener('touchstart', this._datepickerWrapperTouchStartListener, {
         passive: true
@@ -4439,6 +4537,15 @@ var __oj_input_date_time_metadata =
       }
 
       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();
@@ -5934,6 +6041,50 @@ var __oj_input_date_time_metadata =
       }
     },
 
+    /**
+     * 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.
      *
@@ -6385,7 +6536,7 @@ var __oj_input_date_time_metadata =
       this._closeInProgress = true;
       try {
         const showOnIsFocusOrUserFocus = this._showOnIsFocusOrUserFocus();
-        if (this._isMobile && showOnIsFocusOrUserFocus) {
+        if (this._hasTouch && showOnIsFocusOrUserFocus) {
           this._inputContainer.focus();
         } else {
           if (showOnIsFocusOrUserFocus) {
@@ -8937,6 +9088,8 @@ var __oj_input_date_time_metadata =
     _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
@@ -9676,6 +9829,7 @@ var __oj_input_date_time_metadata =
         if (this.options.readOnly !== true) {
           if (this._isIndependentInput()) {
             this._attachTrigger();
+            this._attachClearIcon();
           }
         }
 
@@ -9848,6 +10002,31 @@ var __oj_input_date_time_metadata =
       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
@@ -10178,6 +10357,76 @@ var __oj_input_date_time_metadata =
       }
     },
 
+    /**
+     * 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 = Config.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
@@ -10268,6 +10517,50 @@ var __oj_input_date_time_metadata =
         : 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
      *
@@ -10500,12 +10793,20 @@ var __oj_input_date_time_metadata =
      * @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
@@ -12575,6 +12876,11 @@ var __oj_input_date_time_metadata =
               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/ojdrawerpopup.js

@@ -307,7 +307,9 @@ define(['exports', 'preact/jsx-runtime', 'ojs/ojvcomponent', 'preact', 'jquery',
                 popupServiceInstance.open(popupServiceOptions);
             }
             else if (!this.wasDrawerOpenedInPrevState()) {
-                this.forceUpdate();
+                window.queueMicrotask(() => {
+                    this.forceUpdate();
+                });
             }
         }
         getDrawerSurrogateLayerSelectors() {

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.4',
   /**
    * @global
    * @member {string} revision JET source code revision number
    */
-  revision: '2023-08-22_09-07-29',
+  revision: '2023-09-08_06-09-49',
 
   // This function is only meant to be used outside the library, so quoting the name
   // to avoid renaming is appropriate