@oracle/oraclejet 12.1.0 → 12.1.3

package/dist/js/libs/oj/debug/ojgantt-toolkit.js

@@ -9804,7 +9804,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
     if (!isInitial && options.selectionBehavior === 'highlightDependencies') {
       var viewport = this._gantt.getViewPort();
       var dataLayoutManager = this._gantt.getDataLayoutManager();
-      dataLayoutManager.renderViewportDependencyLines(viewport, 'vpc_translate', selected ? this.getLayoutObject() : null);
+      dataLayoutManager.renderViewportDependencyLines(viewport, 'vpc_translate', { taskObj: this.getLayoutObject(), isSelected: selected });
     }
   };
 
@@ -12595,12 +12595,13 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
    * Based on current task selection, return a set of tasks connected to them
    * via dependencies. If targetTaskObj is specified, then that task is ensured to be included in the selection.
    * @param {string} action The action that triggered the viewport change. One of the DvtGanttDataLayoutManager.VPC_X strings.
-   * @param {Object=} targetTaskObj The target selected task. This should only be specified if the target task
-   *    is not in the selectionHandler's current selection (yet), i.e. this rendering is triggered by a task selection gesture
+   * @param {Object=} targetTask The target selected (or de-selected) task, of the shape { taskObj: taskObj, isSelected: boolean }.
+   *    This should only be specified if the target task is not in the selectionHandler's current selection (yet),
+   *    i.e. this rendering is triggered by a task selection/deselection gesture.
    * @returns {Object} { taskObjs: Array(taskObjs), dependencyObjs: Set(depObjs) }
    * @private
    */
-  DvtGanttDataLayoutManager.prototype._getSelectionDependencies = function (action, targetTaskObj) {
+  DvtGanttDataLayoutManager.prototype._getSelectionDependencies = function (action, targetTask) {
     var idTaskObjMap = this._createIdObjMap(this._rowObjs, 'taskObjs');
     var taskObjsSelected;
     if (action === DvtGanttDataLayoutManager.VPC_REFRESH) {
@@ -12610,40 +12611,42 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
     } else {
       taskObjsSelected = this._gantt.getSelectionHandler().getSelection().map(taskNode => taskNode.getLayoutObject());
     }
-    if (targetTaskObj) {
-      // targetTaskObj is specified if this rendering is triggered by a task selection gesture
-      // and so it's not in the selectionHandler's current selection (yet)
-      taskObjsSelected.push(targetTaskObj);
+
+    if (targetTask) {
+      // targetTask is specified if this rendering is triggered by a task selection (or de-selection) gesture
+      // The selectionHandler's selection is not up to date at this point yet.
+      if (targetTask.isSelected) {
+        taskObjsSelected.push(targetTask.taskObj);
+      } else {
+        taskObjsSelected = taskObjsSelected.filter(t => t !== targetTask.taskObj);
+      }
     }
 
-    var visitedTaskObjs = new Set();
-    var visitedDependencyObjs = new Set();
-    // Traverse dependencies to find connected tasks
-    var dfs = (taskObj) => {
+    var traverse = (taskObj, direction, visitedTaskObjs, visitedDependencyObjs) => {
       if (taskObj == null || visitedTaskObjs.has(taskObj) || !idTaskObjMap.has(taskObj['id'])) {
         return;
       }
-
       visitedTaskObjs.add(taskObj);
-      var taskObjNeighbors = new Set(taskObj.predecessorDepObjs.map(d => d.predecessorTaskObj).concat(
-        taskObj.successorDepObjs.map(d => d.successorTaskObj)
-      ));
-      taskObjNeighbors.forEach(t => dfs(t));
+      var taskObjNeighbors;
+      if (direction === 'up') {
+        taskObjNeighbors = taskObj.predecessorDepObjs.map(d => d.predecessorTaskObj);
+        taskObj.predecessorDepObjs.forEach(d => visitedDependencyObjs.add(d));
+      } else {
+        taskObjNeighbors = taskObj.successorDepObjs.map(d => d.successorTaskObj);
+        taskObj.successorDepObjs.forEach(d => visitedDependencyObjs.add(d));
+      }
+      taskObjNeighbors.forEach(t => traverse(t, direction, visitedTaskObjs, visitedDependencyObjs));
     };
 
-    // Start with each selected task and traverse its dependencies
-    taskObjsSelected.forEach(taskObj => dfs(taskObj));
-
-    visitedTaskObjs.forEach(taskObj => {
-      var predecessorDepObjs = taskObj.predecessorDepObjs;
-      predecessorDepObjs.forEach(depObj => {
-        visitedDependencyObjs.add(depObj);
-      });
-      var successorDepObjs = taskObj.successorDepObjs;
-      successorDepObjs.forEach(depObj => {
-        visitedDependencyObjs.add(depObj);
-      });
-    });
+    // Start with each selected task and traverse its dependencies upstream and downstream
+    var visitedTaskObjs = new Set();
+    var visitedDependencyObjs = new Set();
+    taskObjsSelected.forEach(taskObj => traverse(taskObj, 'up', visitedTaskObjs, visitedDependencyObjs));
+    // New set for tracking visited downstream tasks
+    var visitedDownstreamTaskObjs = new Set();
+    taskObjsSelected.forEach(taskObj => traverse(taskObj, 'down', visitedDownstreamTaskObjs, visitedDependencyObjs));
+    // merge upstream and downstream tasks objs
+    visitedDownstreamTaskObjs.forEach(t => visitedTaskObjs.add(t));
 
     return { taskObjs: Array.from(visitedTaskObjs), dependencyObjs: visitedDependencyObjs };
   };
@@ -12687,9 +12690,10 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
    * Renders viewport related dependency lines
    * @param {Object} viewport Object describing the viewport, of shape {minRowInd: number, maxRowInd: number, viewStartTime: number, viewEndTime: number}
    * @param {string} action The action that triggered the viewport change. One of the DvtGanttDataLayoutManager.VPC_X strings.
-   * @param {Object=} targetTaskObj The task that got selected by the user that triggered this call (optional)
+   * @param {Object=} targetTask The task that got selected (or de-selected) by the user that triggered this call (optional).
+   *     This should be of the shape { taskObj: taskObj, isSelected: boolean }
    */
-  DvtGanttDataLayoutManager.prototype.renderViewportDependencyLines = function (viewport, action, targetTaskObj) {
+  DvtGanttDataLayoutManager.prototype.renderViewportDependencyLines = function (viewport, action, targetTask) {
     var dependenciesContainer = this._gantt.getDependenciesContainer();
     if (dependenciesContainer) {
       dependenciesContainer.removeChildren();
@@ -12699,7 +12703,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
     if (this._gantt.getOptions()['selectionBehavior'] === 'highlightDependencies') {
       // "highlightDependencies" selection behavior: only dependencies related to the selected tasks are shown
       // and dim all other tasks
-      var selectionDeps = this._getSelectionDependencies(action, targetTaskObj);
+      var selectionDeps = this._getSelectionDependencies(action, targetTask);
       this.highlightTasks(selectionDeps.taskObjs);
       dependencyObjs = selectionDeps.dependencyObjs;
     } else {

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

@@ -26,6 +26,7 @@ define(['ojs/ojlogger', 'hammerjs', 'jquery'], function (Logger, Hammer, $) { 'u
               hammer.destroy();
               $el.removeData('ojHammer');
             }
+            $el.off('remove.ojHammer');
           });
 
         default:
@@ -33,7 +34,13 @@ define(['ojs/ojlogger', 'hammerjs', 'jquery'], function (Logger, Hammer, $) { 'u
           return this.each(function () {
             var $el = $(this);
             if (!$el.data('ojHammer')) {
-              $el.data('ojHammer', new Hammer.Manager($el[0], options));
+              const mgr = new Hammer.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/debug/ojlistview.js

@@ -8582,7 +8582,7 @@ var __oj_list_view_metadata =
       scrollElem[0].addEventListener('scroll', this._scrollListener);
 
       // only do this for high-water mark scrolling, other cases we have (and should not care) no knowledge about the scroller
-      if (this.isLoadMoreOnScroll()) {
+      if (this.isLoadMoreOnScroll() && this._getScroller() !== document.documentElement) {
         this._wheelListener = function (event) {
           // add originalEvent for downstream code expecting it
           if (!event.originalEvent) {

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

@@ -708,7 +708,7 @@ define(['exports', 'preact/hooks', 'preact', 'ojs/ojanimation', 'ojs/ojtranslati
     const combineClassNames = (key, l, r) => key === "class" ? classNames([l, r]) : r;
     const mergeInterpolations = (interpolations) => (props) => interpolations.reduce((acc, fn) => mergeDeepWithKey$1(combineClassNames, acc, fn(props)), {});
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any

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

@@ -8198,6 +8198,25 @@ var __oj_select_many_metadata =
         return $(contentStructure.join(''));
       },
 
+      // _OjMultiCombobox
+      _initContainer: function () {
+        _OjMultiCombobox.superclass._initContainer.apply(this, arguments);
+
+        // JET-50535 - focus lost from component when mouse down on dropdown (Similar to JET-47442)
+        // The editable table relies on the focus events from the popup to determine whether
+        // or not the table should be edit mode. Initially when clicking on the combobox,
+        // the initial focus is on the input element. At this point, when one clicks on
+        // an option item, the focus will be lost on mousedown. Since, none of the other elements
+        // in the dropdown are focusable, the focus is transferred to the first focusable ancestor
+        // which in this case happens to be the body element. This results in the focusout event
+        // on the popup. As the selection only happens on the mouseup event, if one keeps the mouse
+        // pressed long enough, the table will exit the edit mode before the selection happens.
+        // Since, we are not relying on the physical focus anyway for selection mechanism, a patchy
+        // solution here would be to prevent the focus transfer when one clicks in the results area.
+        // This way the table would stay in edit mode.
+        this.dropdown.on('mousedown', _ComboUtils.killEvent);
+      },
+
       _opening: function (event, dontUpdateResults) {
         // if beforeExpand is not cancelled
         // beforeExpand event will be triggered in base class _shouldOpen method
@@ -9431,6 +9450,25 @@ var __oj_select_many_metadata =
         this._endSlot = null;
       },
 
+      // _OjSingleCombobox
+      _initContainer: function () {
+        _OjSingleCombobox.superclass._initContainer.apply(this, arguments);
+
+        // JET-50535 - focus lost from component when mouse down on dropdown (Similar to JET-47442)
+        // The editable table relies on the focus events from the popup to determine whether
+        // or not the table should be edit mode. Initially when clicking on the combobox,
+        // the initial focus is on the input element. At this point, when one clicks on
+        // an option item, the focus will be lost on mousedown. Since, none of the other elements
+        // in the dropdown are focusable, the focus is transferred to the first focusable ancestor
+        // which in this case happens to be the body element. This results in the focusout event
+        // on the popup. As the selection only happens on the mouseup event, if one keeps the mouse
+        // pressed long enough, the table will exit the edit mode before the selection happens.
+        // Since, we are not relying on the physical focus anyway for selection mechanism, a patchy
+        // solution here would be to prevent the focus transfer when one clicks in the results area.
+        // This way the table would stay in edit mode.
+        this.dropdown.on('mousedown', _ComboUtils.killEvent);
+      },
+
       _triggerValueUpdatedEvent: function (data, previousValue) {
         if (!this.ojContext._IsCustomElement()) {
           return;

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

@@ -88,7 +88,7 @@ define(['exports', 'preact', 'ojs/ojvcomponent', 'ojs/ojtranslation', 'ojs/ojdat
             }
             const vnodes = this.renderItem(key, index, data);
             this.decorateItem(vnodes, key, index, initialFetch, visible);
-            return vnodes;
+            return vnodes[0];
         }
         renderItem(key, index, data) {
             const renderer = this.callback.getItemRenderer();
@@ -220,7 +220,7 @@ define(['exports', 'preact', 'ojs/ojvcomponent', 'ojs/ojtranslation', 'ojs/ojdat
             }
             const vnodes = this.renderItem(metadata, index, data);
             this.decorateItem(vnodes, metadata, index, initialFetch, visible);
-            return vnodes;
+            return vnodes[0];
         }
         renderItem(metadata, index, data) {
             const key = metadata.key;

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

@@ -212,6 +212,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,
@@ -764,6 +792,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.
  *
@@ -2449,6 +2491,21 @@ 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
   // when knockout is used for the component
@@ -2616,18 +2673,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) {
@@ -2750,12 +2796,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();
     }
@@ -2950,6 +3000,25 @@ oj.CollectionUtils.copyInto(CustomElementBridge.proto, {
       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_esm/ojcore-base.js

@@ -37,12 +37,12 @@ const oj = {
    * @global
    * @member {string} version JET version numberr
    */
-  version: '12.1.0',
+  version: '12.1.3',
   /**
    * @global
    * @member {string} revision JET source code revision number
    */
-  revision: '2022-04-09_00-30-04',
+  revision: '2022-06-14_18-08-53',
 
   // 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/ojdataproviderscroller.js

@@ -1304,9 +1304,18 @@ DataProviderContentHandler.prototype.animateShowContent =
               }
             });
 
-            window.requestAnimationFrame(function () {
-              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 () {
+              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_esm/ojdatetimepicker.js

@@ -2793,7 +2793,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 () {
@@ -2899,8 +2904,6 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
       // 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');
@@ -2910,7 +2913,6 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
       this._processReadOnlyKeyboardEdit();
       if (this.options.readOnly !== true) {
         this._attachTrigger();
-        this._registerSwipeHandler();
       }
     }
 
@@ -3263,6 +3265,11 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
         this._setupResizePopupBind();
       }
     }
+
+    if (this._dpDiv && (this._isInLine || (this.options.readOnly !== true))) {
+      this._registerSwipeHandler();
+    }
+
     return this._super();
   },
 
@@ -3309,6 +3316,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();
   },
@@ -4466,6 +4475,12 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     }
   },
 
+  _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
@@ -8888,8 +8903,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'));
     },
 
@@ -9350,6 +9366,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();
         }
       }
@@ -9385,10 +9403,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();
     },
 
@@ -9409,8 +9431,6 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
         this._triggerNode.remove();
       }
 
-      this._cleanUpListeners();
-      this._destroyHammer();
       if (this._wheelPicker) {
         this._wheelPicker.remove();
         this._clearWheelModels();
@@ -9424,7 +9444,7 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
    * @ignore
    * @private
    */
-    _cleanUpListeners: function () {
+   _removeResizePopupBind: function () {
       if (this._resizePopupBind) {
         window.removeEventListener('resize', this._resizePopupBind);
       }
@@ -12194,6 +12214,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
@@ -12205,6 +12272,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
@@ -12225,6 +12294,7 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
         this._switcherDiv.remove();
       }
   },
+
   /**
    * @ignore
    * @protected

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

@@ -100,6 +100,15 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
                 }, DrawerConstants.animationDuration + 50);
             }
         };
+        this.refreshHandler = (edge) => {
+            const $drawerElement = $(this.getDrawerRef(edge).current);
+            $drawerElement.position(this.getDrawerPosition(edge));
+            if ([DrawerConstants.stringStart, 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;
@@ -409,7 +418,7 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
             this.getStateToChangeTo(edge)) {
             this.animateClose(edge)
                 .then(() => {
-                removeResizeListener(this.rootRef.current, this.reflowDrawerResizeListener);
+                removeResizeListener(this.getDrawerRef(edge).current, this.reflowDrawerResizeListener);
                 this.reflowDrawerResizeListener === null;
                 if (this.getStateToChangeTo(edge)) {
                     const updatedState = {};
@@ -525,13 +534,7 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
             [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 ([DrawerConstants.stringStart, DrawerConstants.stringEnd].indexOf(edge) > -1) {
-                    this.setStartEndOverlayDrawersHeight();
-                }
-                this.setBottomOverlayDrawerWidth();
-            }
+            [PSEvent.POPUP_REFRESH]: () => this.refreshHandler(edge)
         };
         return PSOptions;
     }
@@ -583,7 +586,7 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
     }
     beforeCloseHandler(edge) {
         DrawerUtils.disableBodyOverflow();
-        removeResizeListener(this.rootRef.current, this.overlayDrawerResizeListener);
+        removeResizeListener(this.getDrawerRef(edge).current, this.overlayDrawerResizeListener);
         this.overlayDrawerResizeListener === null;
         return this.animateClose(edge);
     }