@oracle/oraclejet 12.1.1 → 12.1.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":"v12.1.1"}' !important; }
+  font-family: '{"name":"stable","targetPlatform":"all","behavior":"redwood","jetReleaseVersion":"v12.1.4"}' !important; }
 
 .oj-helper-hidden-accessible {
   border: 0;
@@ -12912,6 +12912,10 @@ html .oj-inputdatetime-inline .oj-inputdatetime-time-only {
   min-width: 17.25rem;
   width: 18.75rem; }
 
+.oj-timepicker-datetime-mobile-content {
+  min-width: 17.25rem;
+  width: 18.75rem; }
+
 .oj-timepicker-header,
 .oj-timepicker-footer {
   color: var(--oj-core-text-color-primary);

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

@@ -200,6 +200,34 @@ define(['exports', 'jqueryui-amd/widget', 'jqueryui-amd/unique-id', 'jqueryui-am
     }
   };
 
+  /**
+   * Releases resources that would otherwise leak memory if they were not released
+   * when the component's dom is removed.
+   * For example, Hammer events are put on the document and will result in
+   * detached dom memory leak if not removed.
+   * @private
+   */
+   ComponentMessaging.prototype.releaseResources = function () {
+    if (this._activated) {
+      $.each(this._strategies, function (i, strategy) {
+        strategy.releaseResources();
+      });
+    }
+  };
+
+  /**
+   * Symmetrical method to releaseResources. Sets up resources that get
+   * removed in releaseResources.
+   * @private
+   */
+   ComponentMessaging.prototype.setupResources = function () {
+    if (this._activated) {
+      $.each(this._strategies, function (i, strategy) {
+        strategy.setupResources();
+      });
+    }
+  };
+
   /**
    * Creates a messaging strategy for the specified type, initializing it with the options provided.
    * @param {string|number} type defined by oj.ComponentMessaging._STRATEGY_TYPE. For example,
@@ -752,6 +780,20 @@ define(['exports', 'jqueryui-amd/widget', 'jqueryui-amd/unique-id', 'jqueryui-am
   MessagingStrategy.prototype.close = function () {
   };
 
+  /**
+   *
+   * @private
+   */
+   MessagingStrategy.prototype.setupResources = function () {
+  };
+
+  /**
+   *
+   * @private
+   */
+   MessagingStrategy.prototype.releaseResources = function () {
+  };
+
   /**
    * Reinitializes with the new display options and updates component messaging using the new content.
    *
@@ -2437,6 +2479,21 @@ define(['exports', 'jqueryui-amd/widget', 'jqueryui-amd/unique-id', 'jqueryui-am
   CustomElementBridge.proto = Object.create(oj.BaseCustomElementBridge.proto);
   oj._registerLegacyNamespaceProp('CustomElementBridge', CustomElementBridge);
 
+  const getFocusEventPropagator = function (element, type) {
+    return function (event) {
+      // Ensure that the target is the custom element, not the inner element, so create
+      // a new event and dispatch on the custom element.
+      element.dispatchEvent(new FocusEvent(type, { relatedTarget: event.relatedTarget }));
+    };
+  };
+
+  const getTeardownFunction = function (element, focusPropagator, blurPropagator) {
+    return function () {
+      element.removeEventListener('focus', focusPropagator);
+      element.removeEventListener('blur', blurPropagator);
+    };
+  };
+
   oj.CollectionUtils.copyInto(CustomElementBridge.proto, {
     // Provides a promise for JET's Knockout throttling timeout
     // when knockout is used for the component
@@ -2604,18 +2661,7 @@ define(['exports', 'jqueryui-amd/widget', 'jqueryui-amd/unique-id', 'jqueryui-am
       }
 
       // Setup blur/focus listeners on inner element so we can trigger on the root custom element for 
-      var getFocusEventPropagator = function (type) {
-        return function (event) {
-          // Ensure that the target is the custom element, not the inner element, so create
-          // a new event and dispatch on the custom element.
-          element.dispatchEvent(new FocusEvent(type, { relatedTarget: event.relatedTarget }));
-        };
-      };
-      var focusElem = this._WIDGET_INSTANCE.__getFocusElement();
-      if (focusElem && focusElem !== element) {
-        focusElem.addEventListener('focus', getFocusEventPropagator('focus'));
-        focusElem.addEventListener('blur', getFocusEventPropagator('blur'));
-      }
+      this._setupFocusPropagation(element);
     },
 
     DefineMethodCallback: function (proto, method, methodMeta) {
@@ -2738,12 +2784,16 @@ define(['exports', 'jqueryui-amd/widget', 'jqueryui-amd/unique-id', 'jqueryui-am
       if (Components.__GetWidgetConstructor(this._WIDGET_ELEM) && this._WIDGET_INSTANCE) {
         this._WIDGET_INSTANCE.__handleDisconnected();
       }
+
+      this._teardownFocusPropagation(element);
     },
 
     HandleReattached: function (element) {
       // Invoke callback on the superclass
       oj.BaseCustomElementBridge.proto.HandleReattached.call(this, element);
 
+      this._setupFocusPropagation(element);
+
       if (this._WIDGET_INSTANCE) {
         this._WIDGET_INSTANCE.__handleConnected();
       }
@@ -2938,6 +2988,25 @@ define(['exports', 'jqueryui-amd/widget', 'jqueryui-amd/unique-id', 'jqueryui-am
         elem[prop] = value;
       }
       return isEvent;
+    },
+
+    _setupFocusPropagation: function (element) {
+      // Setup blur/focus listeners on inner element so we can trigger on the root custom element for 
+      const focusElem = this._WIDGET_INSTANCE.__getFocusElement();
+      if (focusElem && focusElem !== element) {
+        const focusPropagator = getFocusEventPropagator(element, 'focus');
+        const blurPropagator = getFocusEventPropagator(element, 'blur');
+        focusElem.addEventListener('focus', focusPropagator);
+        focusElem.addEventListener('blur', blurPropagator);
+        this._teardownFocus = getTeardownFunction(focusElem, focusPropagator, blurPropagator);
+      }
+    },
+
+    _teardownFocusPropagation: function () {
+      if (this._teardownFocus) {
+        this._teardownFocus();
+        this._teardownFocus = null;
+      }
     }
   });
 

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: '12.1.1',
+    version: '12.1.4',
     /**
      * @global
      * @member {string} revision JET source code revision number
      */
-    revision: '2022-04-29_18-31-21',
+    revision: '2022-07-05_18-07-33',
 
     // 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

@@ -1302,9 +1302,18 @@ define(['exports', 'ojs/ojcore-base', 'jquery', 'ojs/ojcontext', 'ojs/ojconfig',
                 }
               });
 
-              window.requestAnimationFrame(function () {
-                AnimationUtils.fadeIn(parentElem, { duration: '150ms', persist: 'all' });
-              });
+              // use setTimeout instead of requestAnimationFrame since that might not invoke by some browser
+              // if the tab/page is hidden for example
+              setTimeout(function () {
+                AnimationUtils.fadeIn(parentElem, { duration: '150ms', persist: 'all' }).then(function () {
+                  // force opacity to be 1 in case if CSS transition did not happen
+                  if (parseInt(parentElem.style.opacity, 10) === 0) {
+                    // eslint-disable-next-line no-param-reassign
+                    parentElem.style.opacity = 1;
+                  }
+                });
+              }, 0);
+
               // can resolve immediately instead of waiting for fade in
               resolve(false);
             }.bind(this));

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

@@ -2778,7 +2778,12 @@ var __oj_input_date_time_metadata =
       childDiv.className = 'oj-datepicker-content';
       dpDiv.appendChild(childDiv);
       this._dpDiv = bindHover($(dpDiv));
-      document.body.appendChild(dpDiv); // @HTMLUpdateOK
+      // Append the dpDiv to the CE wrapper and for widgets simply to the body
+      if (this._IsCustomElement()) {
+        this._dpDiv.appendTo(this.OuterWrapper); // @HTMLUpdateOK
+      } else {
+        this._dpDiv.appendTo(document.body); // @HTMLUpdateOK
+      }
     },
 
     _createPopupDpDiv: function () {
@@ -2884,8 +2889,6 @@ var __oj_input_date_time_metadata =
         // http://bugs.jqueryui.com/ticket/7552 - A Datepicker created on a detached div has zero height
         this._dpDiv.css('display', 'block');
 
-        this._registerSwipeHandler();
-
         // For this to be accessible, the root dom element needs role/aria-labelledby.
         const rootDomElem = this.widget();
         rootDomElem[0].setAttribute('role', 'group');
@@ -2895,7 +2898,6 @@ var __oj_input_date_time_metadata =
         this._processReadOnlyKeyboardEdit();
         if (this.options.readOnly !== true) {
           this._attachTrigger();
-          this._registerSwipeHandler();
         }
       }
 
@@ -3248,6 +3250,11 @@ var __oj_input_date_time_metadata =
           this._setupResizePopupBind();
         }
       }
+
+      if (this._dpDiv && (this._isInLine || (this.options.readOnly !== true))) {
+        this._registerSwipeHandler();
+      }
+
       return this._super();
     },
 
@@ -3294,6 +3301,8 @@ var __oj_input_date_time_metadata =
       // for non custom element, this is done as first step in destroy
       if (this._IsCustomElement()) {
         this._cleanUpListeners();
+
+        this._unregisterSwipeHandler();
       }
       return this._super();
     },
@@ -4451,6 +4460,12 @@ var __oj_input_date_time_metadata =
       }
     },
 
+    _unregisterSwipeHandler: function () {
+      if (this._dpDiv) {
+        this._dpDiv.off('swiperight swipeleft').ojHammer('destroy');
+      }
+    },
+
     /**
      * If min or max lacks date portion and value contains it, then min + max should use
      * value's date portion
@@ -8873,8 +8888,9 @@ var __oj_input_date_time_metadata =
       },
 
       _getPrependNode: function () {
+        const independentPrependNode = this._IsCustomElement() ? $(this.OuterWrapper) : $('body');
         return this._isIndependentInput() ?
-          $('body') :
+          independentPrependNode :
           $('.oj-popup-content', this._datePickerComp.widget._popUpDpDiv.ojPopup('widget'));
       },
 
@@ -8932,8 +8948,16 @@ var __oj_input_date_time_metadata =
         var div = document.createElement('div');
         div.id = this._GetSubId(this._TIME_PICKER_ID);
         var cssClasses = 'oj-timepicker-content';
+        // JET-51605 - done and cancel buttons are not accessible when trying to input time
+        // setting the oj-timepicker-mobile-content makes the wheel picker 100vh. But we do not
+        // want this for oj-input-date-time as the popup includes the buttons to set the selected
+        // time as well as to switch to the date picker. These controls are outside the wheel picker
+        // so setting this to 100vh completely hides this. So, set the css style classes based on
+        // where this timepicker is being used.
         if (ojconfig.getDeviceRenderMode() === 'phone') {
-          cssClasses += ' oj-timepicker-mobile-content';
+          const mobileCSSStlyeClass = this._isContainedInDateTimePicker() ?
+            ' oj-timepicker-datetime-mobile-content' : ' oj-timepicker-mobile-content';
+          cssClasses += mobileCSSStlyeClass;
         }
         div.className = cssClasses;
         wheelPicker.appendChild(div);
@@ -9335,6 +9359,8 @@ var __oj_input_date_time_metadata =
           var children = group.children;
           for (var index = 0; index < children.length; index++) {
             wheel = children[index];
+            // This calls Wheel#destroy() and this calls off on each
+            // event listener and destroys Hammer.
             wheel.ojDestroy();
           }
         }
@@ -9370,10 +9396,14 @@ var __oj_input_date_time_metadata =
        * @override
        */
       _ReleaseResources: function () {
-        // for non custom element, this is done as first step in destroy
-        if (this._IsCustomElement()) {
-          this._cleanUpListeners();
-        }
+        // Since destroy calls _ReleaseResources, we do here for both CustomElement and non CustomElement
+        // instead of doing it here for CustomElement and in destroy which is only for non CustomElements.
+        this._removeResizePopupBind();
+        // Note: We do not have a symmetrical 'createHammer' call in SetupResources.
+        // We create the timepicker wheels that have the Hammer events
+        // when the user clicks on the timepicker icon, or when
+        // the component's options change.
+        this._destroyHammer();
         return this._super();
       },
 
@@ -9394,8 +9424,6 @@ var __oj_input_date_time_metadata =
           this._triggerNode.remove();
         }
 
-        this._cleanUpListeners();
-        this._destroyHammer();
         if (this._wheelPicker) {
           this._wheelPicker.remove();
           this._clearWheelModels();
@@ -9409,7 +9437,7 @@ var __oj_input_date_time_metadata =
      * @ignore
      * @private
      */
-      _cleanUpListeners: function () {
+     _removeResizePopupBind: function () {
         if (this._resizePopupBind) {
           window.removeEventListener('resize', this._resizePopupBind);
         }
@@ -12179,6 +12207,53 @@ var __oj_input_date_time_metadata =
 
       return retVal;
     },
+
+    /**
+     * @ignore
+     * @protected
+     * @override
+     * @memberof oj.ojInputDateTime
+     */
+    _ReleaseResources: function () {
+      if (this._IsCustomElement()) {
+        // Trigger the ojInputTime's _ReleaseResources() using the ojInputTime instance.
+        // this._timePicker.ojInputTime('destroy') will not work.
+        // jqueryui-base#destroy will throw an error because IsCustomElement() is true
+        // and you cannot call destroy when IsCustomElement is true.
+        if (this._timePicker) {
+          const timePickerInstance = this._timePicker.ojInputTime('instance');
+          if (timePickerInstance) {
+            timePickerInstance._ReleaseResources();
+            this._timePickerResourcesReleased = true;
+          }
+        }
+      }
+      return this._super();
+    },
+
+    /**
+     * @protected
+     * @override
+     * @instance
+     * @memberof! oj.ojInputDateTime
+     */
+    _SetupResources: function () {
+      var ret = this._superApply(arguments);
+      if (this._IsCustomElement()) {
+        // oj-input-date-time's AfterCreate calls createTimepicker, which creates ojInputTime() which
+        // calls InputTime's _SetupResources.
+        // Then oj-input-date-time's SetupResources is called. Only call ojInputTime's _SetupResources
+        // if they were released in ReleaseResources, so check the flag.
+        if (this._timePickerResourcesReleased && this._timePicker) {
+          const timePickerInstance = this._timePicker.ojInputTime('instance');
+          if (timePickerInstance) {
+            timePickerInstance._SetupResources();
+            this._timePickerResourcesReleased = false;
+          }
+        }
+      }
+      return ret;
+    },
     /**
      * @ignore
      * @protected
@@ -12190,6 +12265,8 @@ var __oj_input_date_time_metadata =
       return this._super();
     },
     /**
+     * Called from _destroy. This is for widgets. Cleaning up custom
+     * elements is done in ReleaseResources
      * @ignore
      * @private
      * @memberof oj.ojInputDateTime
@@ -12210,6 +12287,7 @@ var __oj_input_date_time_metadata =
           this._switcherDiv.remove();
         }
     },
+
     /**
      * @ignore
      * @protected

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

@@ -95,6 +95,15 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
                     }, ojdrawerutils.DrawerConstants.animationDuration + 50);
                 }
             };
+            this.refreshHandler = (edge) => {
+                const $drawerElement = $(this.getDrawerRef(edge).current);
+                $drawerElement.position(this.getDrawerPosition(edge));
+                if ([ojdrawerutils.DrawerConstants.stringStart, ojdrawerutils.DrawerConstants.stringEnd].indexOf(edge) > -1) {
+                    this.setStartEndOverlayDrawersHeight();
+                }
+                this.setBottomOverlayDrawerWidth();
+                PopupService.getInstance().triggerOnDescendents($drawerElement, PopupService.EVENT.POPUP_REFRESH);
+            };
             this.resizeHandler = () => {
                 if (this.handleResize) {
                     const prevViewportResolvedDisplayMode = this.state.viewportResolvedDisplayMode;
@@ -404,7 +413,7 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
                 this.getStateToChangeTo(edge)) {
                 this.animateClose(edge)
                     .then(() => {
-                    DomUtils.removeResizeListener(this.rootRef.current, this.reflowDrawerResizeListener);
+                    DomUtils.removeResizeListener(this.getDrawerRef(edge).current, this.reflowDrawerResizeListener);
                     this.reflowDrawerResizeListener === null;
                     if (this.getStateToChangeTo(edge)) {
                         const updatedState = {};
@@ -520,13 +529,7 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
                 [PSEvent.POPUP_AFTER_OPEN]: () => this.afterOpenHandler(edge, prevState),
                 [PSEvent.POPUP_BEFORE_CLOSE]: () => this.beforeCloseHandler(edge),
                 [PSEvent.POPUP_AFTER_CLOSE]: () => this.afterCloseHandler(edge, prevState),
-                [PSEvent.POPUP_REFRESH]: () => {
-                    $drawerElement.position(this.getDrawerPosition(edge));
-                    if ([ojdrawerutils.DrawerConstants.stringStart, ojdrawerutils.DrawerConstants.stringEnd].indexOf(edge) > -1) {
-                        this.setStartEndOverlayDrawersHeight();
-                    }
-                    this.setBottomOverlayDrawerWidth();
-                }
+                [PSEvent.POPUP_REFRESH]: () => this.refreshHandler(edge)
             };
             return PSOptions;
         }
@@ -578,7 +581,7 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
         }
         beforeCloseHandler(edge) {
             ojdrawerutils.DrawerUtils.disableBodyOverflow();
-            DomUtils.removeResizeListener(this.rootRef.current, this.overlayDrawerResizeListener);
+            DomUtils.removeResizeListener(this.getDrawerRef(edge).current, this.overlayDrawerResizeListener);
             this.overlayDrawerResizeListener === null;
             return this.animateClose(edge);
         }

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

@@ -86,6 +86,11 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
                     }
                 }
             };
+            this.refreshHandler = (edge) => {
+                const $drawerElement = $(this.rootRef.current);
+                $drawerElement.position(this.getDrawerPosition(edge));
+                PopupService.getInstance().triggerOnDescendents($drawerElement, PopupService.EVENT.POPUP_REFRESH);
+            };
             this.getFocusables = () => {
                 return this.rootRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), video');
             };
@@ -178,9 +183,7 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
                 [PSEvent.POPUP_BEFORE_CLOSE]: () => this.beforeCloseHandler(edge),
                 [PSEvent.POPUP_AFTER_CLOSE]: () => this.afterCloseHandler(prevState),
                 [PSEvent.POPUP_AUTODISMISS]: (event) => this.autoDismissHandler(event),
-                [PSEvent.POPUP_REFRESH]: () => {
-                    $drawerElement.position(this.getDrawerPosition(edge));
-                }
+                [PSEvent.POPUP_REFRESH]: () => this.refreshHandler(edge)
             };
             return PSOptions;
         }