@oracle/oraclejet 10.1.7 → 10.1.8

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

@@ -222,6 +222,34 @@ ComponentMessaging.prototype.close = function () {
   }
 };
 
+/**
+ * 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,
@@ -774,6 +802,20 @@ MessagingStrategy.prototype.deactivate = function () {
 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.
  *
@@ -2428,6 +2470,20 @@ const CustomElementBridge = {};
 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
@@ -2589,18 +2645,7 @@ oj.CollectionUtils.copyInto(CustomElementBridge.proto, {
     }
 
     // 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) {
@@ -2716,12 +2761,16 @@ oj.CollectionUtils.copyInto(CustomElementBridge.proto, {
     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();
     }
@@ -2912,7 +2961,24 @@ oj.CollectionUtils.copyInto(CustomElementBridge.proto, {
     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_esm/ojcore-base.js

@@ -45,12 +45,12 @@ const oj = {
    * @global
    * @member {string} version JET version numberr
    */
-  version: '10.1.7',
+  version: '10.1.8',
   /**
    * @global
    * @member {string} revision JET source code revision number
    */
-  revision: '2022-02-17_13-46-45',
+  revision: '2022-05-03_19-21-11',
 
   // 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/ojdatetimepicker.js

@@ -2687,7 +2687,12 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     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 () {
@@ -2783,13 +2788,10 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
       // Set display:block in place of inst._dpDiv.show() which won't work on disconnected elements
       // http://bugs.jqueryui.com/ticket/7552 - A Datepicker created on a detached div has zero height
       this._dpDiv.css('display', 'block');
-
-      this._registerSwipeHandler();
     } else {
       this._processReadOnlyKeyboardEdit();
       if (this.options.readOnly !== true) {
         this._attachTrigger();
-        this._registerSwipeHandler();
       }
     }
 
@@ -3064,6 +3066,11 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
         this._setupResizePopupBind();
       }
     }
+
+    if (this._dpDiv && (this._isInLine || (this.options.readOnly !== true))) {
+      this._registerSwipeHandler();
+    }
+
     return this._super();
   },
 
@@ -3110,6 +3117,8 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     // for non custom element, this is done as first step in destroy
     if (this._IsCustomElement()) {
       this._cleanUpListeners();
+
+      this._unregisterSwipeHandler();
     }
     return this._super();
   },
@@ -4221,6 +4230,12 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     }
   },
 
+  _unregisterSwipeHandler: function () {
+    if (this._dpDiv) {
+      this._dpDiv.off('swiperight swipeleft').ojHammer('destroy');
+    }
+  },
+
   /**
    * Generate the HTML for the current state of the date picker.
    *
@@ -8549,8 +8564,9 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
     },
 
     _getPrependNode: function () {
+      const independentPrependNode = this._IsCustomElement() ? $(this.OuterWrapper) : $('body');
       return this._isIndependentInput() ?
-        $('body') :
+        independentPrependNode :
         $('.oj-popup-content', this._datePickerComp.widget._popUpDpDiv.ojPopup('widget'));
     },
 
@@ -8976,6 +8992,8 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
         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();
         }
       }
@@ -9011,10 +9029,14 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
      * @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();
     },
 
@@ -9035,8 +9057,6 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
         this._triggerNode.remove();
       }
 
-      this._cleanUpListeners();
-      this._destroyHammer();
       if (this._wheelPicker) {
         this._wheelPicker.remove();
         this._clearWheelModels();
@@ -9050,7 +9070,7 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
    * @ignore
    * @private
    */
-    _cleanUpListeners: function () {
+   _removeResizePopupBind: function () {
       if (this._resizePopupBind) {
         window.removeEventListener('resize', this._resizePopupBind);
       }
@@ -11721,6 +11741,53 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
 
     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
@@ -11732,6 +11799,8 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
     return this._super();
   },
   /**
+   * Called from _destroy. This is for widgets. Cleaning up custom
+   * elements is done in ReleaseResources
    * @ignore
    * @private
    * @memberof oj.ojInputDateTime
@@ -11752,6 +11821,7 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
         this._switcherDiv.remove();
       }
   },
+
   /**
    * @ignore
    * @protected

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

@@ -11589,23 +11589,13 @@ TextUtils.getTextStringWidth = function (context, textString, cssStyle) {
       TextUtils._setSpacing(null, null);
       width = TextUtils._getCanvasTextWidth(context, textString, cssStyle);
     } else {
-      if (Agent.browser === 'chrome') {
-        if (TextUtils._letterSpacing != letterSpacing || (TextUtils._wordSpacing != wordSpacing)) {
-          TextUtils._clearCanvasContext();
-          TextUtils._setSpacing(wordSpacing, letterSpacing);
-        }
-        TextUtils._storeCanvasContext();
-        TextUtils._attachCanvas(context);
-        width = TextUtils._getCanvasTextWidth(context, textString, cssStyle);
-      } else {
-        var text = new (TextUtils._rep_text_constructor)(context, textString);
-        text.setCSSStyle(cssStyle);
-        // Add to the stage to obtain correct measurements
-        var stage = text.getCtx().getStage();
-        stage.addChild(text);
-        width = text.GetSvgDimensions().w;
-        stage.removeChild(text);
-      }
+      var text = new (TextUtils._rep_text_constructor)(context, textString);
+      text.setCSSStyle(cssStyle);
+      // Add to the stage to obtain correct measurements
+      var stage = text.getCtx().getStage();
+      stage.addChild(text);
+      width = text.GetSvgDimensions().w;
+      stage.removeChild(text);
     }
     TextUtils._cachedTextWidth[cacheKey] = width;
     return width;

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

@@ -2989,6 +2989,44 @@ oj.__registerWidget('oj.editableValue', $.oj.baseComponent,
       }
     },
 
+    /**
+     * Override to release resources held by this component.
+     * It is important to unregister Hammer events
+     * since they live outside of the component's DOM and would cause Detached Dom nodes
+     * when the component is removed.
+     * @memberof oj.editableValue
+     * @instance
+     * @protected
+     */
+    _ReleaseResources: function () {
+      this._super();
+      if (this._IsCustomElement()) {
+        // componentMessaging#releaseResources removes any resources that would
+        // otherwise cause a memory leak, like Hammer.
+        // We do not deactivate component messaging because that is a bigger change, and
+        // more risky to backport.
+        this._getComponentMessaging().releaseResources();
+        this._hammerIsUnregistered = true;
+      }
+    },
+    /**
+     * @memberof oj.editableValue
+     * @instance
+     * @protected
+     */
+    _SetupResources: function () {
+      this._super();
+      // Since initComponentMessaging gets called during component creation, and that activates
+      // all the component strategies which in turn sets up listeners, we only want to
+      // re-set up resources and when we have
+      // released them in ReleaseResources.
+      if (this._IsCustomElement() && (this._hammerIsUnregistered)) {
+        const messaging = this._getComponentMessaging();
+        messaging.setupResources();
+        this._hammerIsUnregistered = false;
+      }
+    },
+
     /**
      * If we have asynchronous converter loading, the input is readonly and a loading indicator
      * is shown to the user.
@@ -7426,8 +7464,7 @@ PopupMessagingStrategy.prototype._unregisterLauncherEvents = function () {
   jqLauncher[0].removeEventListener('change', this._eatChangeAndClickOnPress, true);
 
   if (isTouchSupported()) {
-    jqLauncher.ojHammer().off('press');
-    jqLauncher.ojHammer('destroy');
+    this.releaseResources();
     jqLauncher.off('contextmenu', this._eatContextMenuOnOpenPopupListener);
     this._eatContextMenuOnOpenPopupListener = null;
     this._inPressEvent = null;
@@ -7444,55 +7481,39 @@ PopupMessagingStrategy.prototype._unregisterLauncherEvents = function () {
 PopupMessagingStrategy.prototype._registerLauncherEvents = function () {
   var closeEvents;
   var closePopupCallback;
-  var compDefaults;
-  var events;
-  var hammerOptions;
   var jqLauncher = this.GetLauncher();
   var nonPressOpenEvents;
-  var openPopupCallback;
-  var pressEventIndex;
 
-  compDefaults = PopupMessagingStrategy._DEFAULTS_BY_COMPONENT[this.GetComponent().widgetName];
-  events = compDefaults ? compDefaults.events :
-           PopupMessagingStrategy._DEFAULTS_BY_COMPONENT.default.events;
+  const events = this._getPopupEventNamesToRegisterForComp();
 
   // 1. associate the ojPopup component to wrapper <div> for popup content
   // 2. wire up on() event handlers for registered events that open and close popup. E.g., focusin.
   // 3. autoDismissal happens automatically when focus leaves component. For other events like
   // mouseover it's required to call off()
   if (events.open) {
-    openPopupCallback = this._openPopupCallback;
-    if (!openPopupCallback) {
-      openPopupCallback = this._openPopup.bind(this);
-      this._openPopupCallback = openPopupCallback;
+    if (!this._openPopupCallback) {
+      this._openPopupCallback = this._openPopup.bind(this);
     }
 
     // separate out press event, namespace the events string, and attach event handler
-    pressEventIndex = events.open.indexOf('press');
+    const needsPressEvent = this._needsPressEvent(events);
     nonPressOpenEvents =
     this._getNamespacedEvents(events.open.replace('press', ''),
                               PopupMessagingStrategy._OPEN_NAMESPACE);
-    jqLauncher.on(nonPressOpenEvents, openPopupCallback);
+    jqLauncher.on(nonPressOpenEvents, this._openPopupCallback);
 
     // The pressHold gesture also fires a contextmenu event on Windows 10 touch.
     // Prevent that here for components that use 'press' for popup messaging as
     // the context menu causes the popup message window to close. Note that this
     // means the context menu will be disabled for these components.
-    if (isTouchSupported() && pressEventIndex !== -1) {
+    if (isTouchSupported() && needsPressEvent) {
       this._eatContextMenuOnOpenPopupListener = function () {
         return false;
       };
 
       jqLauncher.on('contextmenu', this._eatContextMenuOnOpenPopupListener);
 
-      // for radios and checkboxes, on ios, press hold brings up popup, but release closes it
-      // and checks it, so in this case we have to eat the click/change events. this happens
-      // in the openPopupCallback
-      hammerOptions = {
-        recognizers: [
-          [Press, { time: 750 }]
-        ] };
-      jqLauncher.ojHammer(hammerOptions).on('press', openPopupCallback);
+      this.registerHammerOpenCallbackOnLauncher();
     }
   }
 
@@ -7509,6 +7530,62 @@ PopupMessagingStrategy.prototype._registerLauncherEvents = function () {
   }
 };
 
+  /**
+   * Symmetrical method to releaseResources. Sets up resources that get
+   * removed in releaseResources.
+   * @private
+   * @memberof oj.PopupMessagingStrategy
+   * @instance
+   */
+  PopupMessagingStrategy.prototype.setupResources = function () {
+    const events = this._getPopupEventNamesToRegisterForComp();
+    const needsPressEvent = this._needsPressEvent(events);
+    if (isTouchSupported() && needsPressEvent) {
+      this.registerHammerOpenCallbackOnLauncher();
+    }
+  };
+
+  /**
+   * Register Hammer Press Event. Make sure you are on touch and you
+   * need the press event before calling this function.
+   * @private
+   * @memberof oj.PopupMessagingStrategy
+   * @instance
+   */
+  PopupMessagingStrategy.prototype.registerHammerOpenCallbackOnLauncher = function () {
+    const jqLauncher = this.GetLauncher();
+    if (jqLauncher == null) {
+      return;
+    }
+    // for radios and checkboxes, on ios, press hold brings up popup, but release closes it
+    // and checks it, so in this case we have to eat the click/change events. this happens
+    // in the openPopupCallback
+    const hammerOptions = {
+      recognizers: [
+        [Press, { time: 750 }]
+      ] };
+    jqLauncher.ojHammer(hammerOptions).on('press', this._openPopupCallback);
+  };
+
+  /**
+  * 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
+  * @memberof oj.PopupMessagingStrategy
+  * @instance
+  */
+  PopupMessagingStrategy.prototype.releaseResources = function () {
+    PopupMessagingStrategy.superclass.update.call(this);
+    const events = this._getPopupEventNamesToRegisterForComp();
+    const needsPressEvent = this._needsPressEvent(events);
+    if (isTouchSupported() && needsPressEvent) {
+      const jqLauncher = this.GetLauncher();
+      jqLauncher.off('press').ojHammer('destroy');
+    }
+  };
+
 /**
  * Turn the events string into an array, add namespace, and turn it back into a string.
  * @param {string} events e.g., "focusin mousedown"
@@ -7583,6 +7660,34 @@ PopupMessagingStrategy.prototype._getPopupPosition = function () {
   return popupPositionOptions;
 };
 
+/**
+ * Returns the events
+ *
+ * @private
+ * @memberof oj.PopupMessagingStrategy
+ * @instance
+ */
+PopupMessagingStrategy.prototype._getPopupEventNamesToRegisterForComp = function () {
+  const compDefaults =
+    PopupMessagingStrategy._DEFAULTS_BY_COMPONENT[this.GetComponent().widgetName];
+  return compDefaults ? compDefaults.events :
+    PopupMessagingStrategy._DEFAULTS_BY_COMPONENT.default.events;
+};
+
+/**
+ * Returns true if it needs a press event.
+ *
+ * @private
+ * @memberof oj.PopupMessagingStrategy
+ * @instance
+ */
+PopupMessagingStrategy.prototype._needsPressEvent = function (events) {
+   if (events && events.open) {
+    return events.open.indexOf('press') !== -1;
+   }
+   return false;
+};
+
 /**
  * Returns a jquery element that a messaging popup is bound to.
  *

package/dist/js/libs/oj/debug_esm/ojjquery-hammer.js

@@ -35,6 +35,7 @@ if (Hammer) {
             hammer.destroy();
             $el.removeData('ojHammer');
           }
+          $el.off('remove.ojHammer');
         });
 
       default:
@@ -42,7 +43,13 @@ if (Hammer) {
         return this.each(function () {
           var $el = $(this);
           if (!$el.data('ojHammer')) {
-            $el.data('ojHammer', new Manager($el[0], options));
+            const mgr = new Manager($el[0], options);
+            $el.on('remove.ojHammer', evt => {
+              if (evt.target === $el[0]) {
+                mgr.destroy();
+              }
+            });
+            $el.data('ojHammer', mgr);
           }
         });
     }

package/dist/js/libs/oj/main-template.js

@@ -24,9 +24,9 @@
       knockout: 'libs/knockout/knockout-3.5.1',
       jquery: 'libs/jquery/jquery-3.5.1.min',
       'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.13.0.min',
-      ojs: 'libs/oj/v10.1.7/min' + (_ojNeedsES5 ? '_es5' : ''),
-      ojL10n: 'libs/oj/v10.1.7/ojL10n',
-      ojtranslations: 'libs/oj/v10.1.7/resources',
+      ojs: 'libs/oj/v10.1.8/min' + (_ojNeedsES5 ? '_es5' : ''),
+      ojL10n: 'libs/oj/v10.1.8/ojL10n',
+      ojtranslations: 'libs/oj/v10.1.8/resources',
       text: 'libs/require/text',
       hammerjs: 'libs/hammer/hammer-2.0.8.min',
       signals: 'libs/js-signals/signals.min',