@oracle/oraclejet 12.1.1 → 12.1.4

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'));
     },
 
@@ -8947,8 +8963,16 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
       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 (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);
@@ -9350,6 +9374,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 +9411,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 +9439,6 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
         this._triggerNode.remove();
       }
 
-      this._cleanUpListeners();
-      this._destroyHammer();
       if (this._wheelPicker) {
         this._wheelPicker.remove();
         this._clearWheelModels();
@@ -9424,7 +9452,7 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
    * @ignore
    * @private
    */
-    _cleanUpListeners: function () {
+   _removeResizePopupBind: function () {
       if (this._resizePopupBind) {
         window.removeEventListener('resize', this._resizePopupBind);
       }
@@ -12194,6 +12222,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 +12280,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 +12302,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);
     }

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

@@ -91,6 +91,11 @@ let DrawerPopup = DrawerPopup_1 = class DrawerPopup extends Component {
                 }
             }
         };
+        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');
         };
@@ -183,9 +188,7 @@ let DrawerPopup = DrawerPopup_1 = class DrawerPopup extends Component {
             [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;
     }

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

@@ -2982,6 +2982,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.
@@ -7500,8 +7538,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;
@@ -7518,55 +7555,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();
     }
   }
 
@@ -7583,6 +7604,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"
@@ -7657,6 +7734,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/ojformlayout.js

@@ -659,6 +659,38 @@ function ojFormLayout(context) {
     element.appendChild(ojForm); // @HTMLUpdateOK appending internally created DOM element
   };
 
+  /**
+   * In Chrome 103 - the relative/absolute positioning inside a multi-col layout is broken
+   * https://bugs.chromium.org/p/chromium/issues/detail?id=1338997
+   * This is to workaround this bug and make things render correctly for chromium browsers.
+   * This bug will be fixed in 104 and later.
+   */
+  // data-oj- attributes used to identify the workaround DOM
+  const _WORKAROUND_DOM_ATTR = 'data-oj-formlayout-workaround-dom';
+  // Form layout can have nested oj-form-layout, so query only for the direct child
+  const _WORKAROUND_DOM_SELECTOR = `:scope > [${_WORKAROUND_DOM_ATTR}]`;
+
+  /**
+   * Applies the workaround for the Chromium v103 bug
+   */
+  function _applyChromium103Workaround() {
+    const workaroundDiv = document.createElement('div');
+    workaroundDiv.style.display = 'table';
+    workaroundDiv.style.visibility = 'hidden';
+    workaroundDiv.setAttribute(_WORKAROUND_DOM_ATTR, ''); // @HTMLUpdateOK
+    ojForm.appendChild(workaroundDiv);
+  }
+
+  /**
+   * Removes the workaround for the Chromium v103 bug
+   */
+  function _removeChromium103Workaround() {
+    const workaroundDiv = ojForm.querySelector(_WORKAROUND_DOM_SELECTOR);
+    if (workaroundDiv) {
+      ojForm.removeChild(workaroundDiv);
+    }
+  }
+
   /**
    * Register event listeners for resize the container DOM element.
    * @param {Element} domElem  DOM element
@@ -797,6 +829,7 @@ function ojFormLayout(context) {
         self._rootElementMutationObserver.disconnect();
 
         _unregisterResizeListener(ojForm);
+        _removeChromium103Workaround();
 
         _updateOjFormDiv();
 
@@ -828,6 +861,7 @@ function ojFormLayout(context) {
         // we need to do this before the mutation observer is activated because this can add divs which
         // would fire the mutation observer and send it into a refresh->mutation loop.
         _registerResizeListener(ojForm);
+        _applyChromium103Workaround();
 
         // We are done making modifications to dom subtree elements so we should start paying attention
         // to mutations of the oj-form DIV subtree.  The mutations we care about are added elements and

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

@@ -9806,7 +9806,7 @@ DvtGanttTaskNode.prototype._setSelected = function(selected, enforceDOMLayering,
   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 });
   }
 };
 
@@ -12597,12 +12597,13 @@ DvtGanttDataLayoutManager.prototype.getLayoutObjectsInBBox = function(bbox)
  * 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) {
@@ -12612,40 +12613,42 @@ DvtGanttDataLayoutManager.prototype._getSelectionDependencies = function (action
   } 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 };
 };
@@ -12689,9 +12692,10 @@ DvtGanttDataLayoutManager.prototype.highlightTasks = function(taskObjs)
  * 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();
@@ -12701,7 +12705,7 @@ DvtGanttDataLayoutManager.prototype.renderViewportDependencyLines = function (vi
   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 {