@oracle/oraclejet 15.0.3 → 15.0.5

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.5"}' !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/icu-l10n/package.json

@@ -5,9 +5,8 @@
   "main": "l10nBundleBuilder.js",
   "scripts": {
     "clean": "rimraf test/built test_results",
-    "build:types": "tsc --declaration --emitDeclarationOnly --allowJs --skipLibCheck Bundler.js",
-    "test": "jest -c test/jest.config.js",
-    "test:debug": "yarn run --inspect jest -i"
+    "build-types": "tsc --declaration --emitDeclarationOnly --allowJs --skipLibCheck Bundler.js",
+    "test": "jest -c test/jest.config.js"
   },
   "author": "",
   "license": "ISC",

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.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/ojdatagrid.js

@@ -16528,7 +16528,7 @@ var __oj_data_grid_metadata =
       }
       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;
@@ -16559,7 +16559,10 @@ var __oj_data_grid_metadata =
       }
       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/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

@@ -65,7 +65,17 @@ define(['exports', 'preact/jsx-runtime', 'ojs/ojvcomponent', 'preact', 'jquery',
             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 = ojdrawerutils.DrawerUtils.getFocusables(this.rootRef.current);
                         event.preventDefault();
@@ -307,7 +317,9 @@ define(['exports', 'preact/jsx-runtime', 'ojs/ojvcomponent', 'preact', 'jquery',
                 popupServiceInstance.open(popupServiceOptions);
             }
             else if (!this.wasDrawerOpenedInPrevState()) {
-                this.forceUpdate();
+                window.queueMicrotask(() => {
+                    this.forceUpdate();
+                });
             }
         }
         getDrawerSurrogateLayerSelectors() {