@oracle/oraclejet 20.1.0 → 20.1.2

package/dist/js/libs/oj/debug_esm/ojcore-base.js

@@ -38,12 +38,12 @@ const oj = {
    * @global
    * @member {string} version JET version numberr
    */
-  version: '20.1.0',
+  version: '20.1.2',
   /**
    * @global
    * @member {string} revision JET source code revision number
    */
-  revision: '2026-05-13_10-54-19',
+  revision: '2026-06-01_10-24-08',
 
   // This function is only meant to be used outside the library, so quoting the name
   // to avoid renaming is appropriate
@@ -931,6 +931,17 @@ if (_assertSetting !== undefined) {
 const CollectionUtils = {};
 oj._registerLegacyNamespaceProp('CollectionUtils', CollectionUtils);
 
+/**
+ * Returns true if the key provided should be blocked from merge utilities.
+ * Specifically keys that could cause prototype pollution issues are included.
+ * @param {string} key
+ * @return {boolean}
+ * @private
+ */
+CollectionUtils._isBlockedKey = function (key) {
+  return key === '__proto__' || key === 'constructor' || key === 'prototype';
+};
+
 /**
  * Copies all of the properties of source into the target and returns the target
  *
@@ -960,11 +971,13 @@ CollectionUtils.mergeDeep = function (target, ...sources) {
   const source = sources.shift();
   if (isPlain(target) && isPlain(source)) {
     Object.keys(source).forEach((key) => {
-      if (isPlain(source[key])) {
-        if (!target[key]) Object.assign(target, { [key]: {} });
-        merge(target[key], source[key]);
-      } else {
-        Object.assign(target, { [key]: source[key] });
+      if (!CollectionUtils._isBlockedKey(key)) {
+        if (isPlain(source[key])) {
+          if (!target[key]) Object.assign(target, { [key]: {} });
+          merge(target[key], source[key]);
+        } else {
+          Object.assign(target, { [key]: source[key] });
+        }
       }
     });
   }
@@ -1023,34 +1036,35 @@ CollectionUtils._copyIntoImpl = function (
       } else {
         targetKey = k;
       }
-
-      var sourceVal = source[k];
-
-      var recursed = false;
-
-      if (recurse && currentLevel < maxRecursionDepth) {
-        var targetVal = target[targetKey];
-        if (
-          CollectionUtils.isPlainObject(sourceVal) &&
-          (targetVal == null || CollectionUtils.isPlainObject(targetVal))
-        ) {
-          recursed = true;
+      if (!CollectionUtils._isBlockedKey(k) && !CollectionUtils._isBlockedKey(targetKey)) {
+        var sourceVal = source[k];
+
+        var recursed = false;
+
+        if (recurse && currentLevel < maxRecursionDepth) {
+          var targetVal = target[targetKey];
+          if (
+            CollectionUtils.isPlainObject(sourceVal) &&
+            (targetVal == null || CollectionUtils.isPlainObject(targetVal))
+          ) {
+            recursed = true;
+            // eslint-disable-next-line no-param-reassign
+            target[targetKey] = targetVal || {};
+            CollectionUtils._copyIntoImpl(
+              target[targetKey],
+              sourceVal,
+              keyConverter,
+              true,
+              maxRecursionDepth,
+              currentLevel + 1
+            );
+          }
+        }
+        if (!recursed) {
           // eslint-disable-next-line no-param-reassign
-          target[targetKey] = targetVal || {};
-          CollectionUtils._copyIntoImpl(
-            target[targetKey],
-            sourceVal,
-            keyConverter,
-            true,
-            maxRecursionDepth,
-            currentLevel + 1
-          );
+          target[targetKey] = sourceVal;
         }
       }
-      if (!recursed) {
-        // eslint-disable-next-line no-param-reassign
-        target[targetKey] = sourceVal;
-      }
     }
   }
 
@@ -1297,6 +1311,11 @@ CollectionUtils._copyIntoImpl = function (
 
   // postMessage "message" event listener for the setImmediate impl
   function _nextTickHandler(event) {
+    // Only process messages posted by this window from the same origin.
+    if (event.source !== window || event.origin !== window.location.origin) {
+      return;
+    }
+
     var data = event.data;
     if (!data || data.message !== 'oj-setImmediate') {
       return;
@@ -1332,7 +1351,7 @@ CollectionUtils._copyIntoImpl = function (
       window.addEventListener('message', _nextTickHandler);
     }
 
-    window.postMessage({ id: id, message: 'oj-setImmediate' }, '*');
+    window.postMessage({ id: id, message: 'oj-setImmediate' }, '/');
     return id;
   }
 

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

@@ -478,7 +478,7 @@ CoreRouter.prototype._configure = function (routes = []) {
     let match = path;
     // If path is string, match it entirely
     if (typeof path === 'string') {
-      match = new RegExp('^' + path + '$');
+      match = new RegExp('^' + RegExp.escape(path) + '$');
     } else if (!(path instanceof RegExp)) {
       throw Error('Router path must be a string or RegExp');
     }

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

@@ -2175,6 +2175,9 @@ class FilterImpl {
         if (filter) {
             let op = filter.op;
             let filterValue;
+            const textFilterValue = filter['text'] == null
+                ? null
+                : String(filter['text']).substring(0, FilterImpl._MAX_TEXT_FILTER_LENGTH);
             const collationOptions = filter.collationOptions;
             if (op === '$exists' && filter['attribute'] && filter['criterion']) {
                 // NestedFilter
@@ -2183,7 +2186,7 @@ class FilterImpl {
                 transformedExpr['criterion'] = FilterImpl._transformFilter(FilterFactory.getFilter({ filterDef: filter['criterion'] }));
                 return transformedExpr;
             }
-            if (filter['text']) {
+            if (textFilterValue !== null) {
                 op = '$regex';
             }
             else {
@@ -2199,24 +2202,27 @@ class FilterImpl {
                 }
             }
             if (op !== '$and' && op !== '$or') {
-                if (filter['text']) {
+                if (textFilterValue !== null) {
                     if (filter['matchBy'] === 'phrase') {
                         // 1. Escape special characters
                         // 2. Remove single and double quotes
                         // 3. Add word boundary and wild cards for phrase matching
                         filterValue = new RegExp(`${'\\b' +
-                            filter['text']
+                            textFilterValue
                                 .replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&')
                                 .replace(/('|")/g, '')
-                                .replace(/(\s|\t)/g, '(.*)((\\s|\\t|\\r|\\n)*)')}`, 'i');
+                                // Avoid nested quantifiers that can trigger ReDoS.
+                                // Equivalent to original "(.*)((\\s|\\t|\\r|\\n)*)" with JS-dot behavior:
+                                // non-newline chars followed by optional whitespace/newlines.
+                                .replace(/(\s|\t)/g, '[^\\r\\n]*[\\s\\t\\r\\n]*')}`, 'i');
                     }
                     else if (filter['matchBy'] === 'startsWith') {
-                        filterValue = new RegExp(`^${filter['text'].replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&')}`, 'i');
+                        filterValue = new RegExp(`^${textFilterValue.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&')}`, 'i');
                     }
                     else {
                         // 'contains' | 'fuzzy' | 'unknown'
                         // Escape special characters without change filter['text'] which is the original filter string by default
-                        filterValue = new RegExp(filter['text'].replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'), 'i');
+                        filterValue = new RegExp(textFilterValue.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'), 'i');
                     }
                 }
                 else {
@@ -2235,7 +2241,7 @@ class FilterImpl {
                     operatorExpr[op] = filterValue;
                     transformedExpr[attributeExpr] = operatorExpr;
                 }
-                else if (filter['text']) {
+                else if (textFilterValue !== null) {
                     // handle TextFilterDef
                     const operatorExpr = {};
                     operatorExpr[op] = filterValue;
@@ -2322,6 +2328,8 @@ class FilterImpl {
         return value;
     }
 }
+// Bound text-filter input size to reduce regex amplification risks
+FilterImpl._MAX_TEXT_FILTER_LENGTH = 512;
 class FilterFactory {
     static getFilter(options) {
         return new FilterImpl(options);

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

@@ -67,14 +67,14 @@ DomUtils._cleanElementHtml = function (node) {
   for (var count = children.length - 1; count >= 0; count--) {
     var child = children.item(count);
     if (child && child.nodeType === 1) {
-      if (DomUtils._LEGAL_ELEMENTS[child.nodeName]) {
+      if (Object.hasOwn(DomUtils._LEGAL_ELEMENTS, child.nodeName)) {
         var attrs = child.attributes;
         for (var i = attrs.length - 1; i >= 0; i--) {
           var attr = attrs[i];
           // jquery - the .attr() method returns undefined for attributes that have not been set.
           var childHasAttr = $(child).attr(attr.name) !== undefined;
           if (childHasAttr) {
-            if (!DomUtils._LEGAL_ATTRIBUTES[attr.name]) {
+            if (!Object.hasOwn(DomUtils._LEGAL_ATTRIBUTES, attr.name)) {
               child.removeAttribute(attr.nodeName);
             }
           }

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

@@ -1554,9 +1554,7 @@ TemplateHandler.prototype.processTemplates = function (
                 }
               });
             } else {
-              processedDatum = Object.create(nodeData);
-              processedDatum._noTemplate = true;
-              processedDatum._dvtNoClone = true;
+              processedDatum = { ...nodeData, _noTemplate: true, _dvtNoClone: true };
             }
             nodeDataMap.set(nodeKey, { data: processedDatum, context: context });
           }

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

@@ -962,6 +962,32 @@ ToolkitUtils._IMAGE_URL_CACHE = {};
 /** @private **/
 ToolkitUtils._ICON_CACHE = {};
 
+/**
+ * Validates link URL protocol before browser navigation.
+ * Copied from DomUtils.validateURL to avoid adding an ojdomutils dependency to DVT toolkit.
+ * @param {string} href URL to validate.
+ * @param {Array=} whitelist optional list of the allowed protocols.
+ * @throws {Error} if the URL uses an invalid protocol.
+ * @private
+ */
+const _validateURL = function (href, whitelist) {
+  var allowed = whitelist || ['http:', 'https:'];
+
+  var link = document.createElement('a');
+  link.href = href;
+
+  var protocol = link.protocol;
+  if (protocol != null) {
+    protocol = protocol.toLowerCase();
+  }
+  // if it isn't on the allowed list and it isn't '', throw an error.
+  // IE11 returns '' for hrefs like 'abc', other browsers return 'https'
+  // and we want to allow hrefs like 'abc' since those are relative urls.
+  if (allowed.indexOf(protocol) < 0 && protocol !== '') {
+    throw new Error(protocol + ' is not a valid URL protocol');
+  }
+};
+
 /**
  * Creates and returns a new SVG document with the specified id.
  * @param {string} id The id for the new SVG document.
@@ -1208,6 +1234,10 @@ ToolkitUtils.getLinkCallback = function (target, dest) {
     // DVT ES6 TODO: Added missing 'self' ref - Trung
     var self = this;
     var callback = function () {
+      if (dest) {
+        _validateURL(dest);
+      }
+
       if (target == null) {
         self.location = dest;
       } else {
@@ -10689,7 +10719,7 @@ HtmlTooltipManager.prototype.getCustomTooltip = function (tooltipFunc, dataConte
 /**
  * Restores a supported HTML tag.
  * All HTML brackets are converted into &gt; and &lt; for security reasons, to prevent people from adding unsupported
- * elements. This method restores the brackets for the supported element only.
+ * elements. JET-79039: This method restores the brackets for the supported element only, discarding all attributes.
  * @param {string} text The HTML string.
  * @param {string} tag The tag name to be restored.
  * @return {string} The updated HTML string.
@@ -10698,7 +10728,7 @@ HtmlTooltipManager.prototype.getCustomTooltip = function (tooltipFunc, dataConte
 HtmlTooltipManager._restoreTag = function (text, tag) {
   // Match the following: <tag...>, </tag...>, and <tag.../>
   var regExp = new RegExp('&lt;(/?)(' + tag + ')(?=[\\s&/])([^&]*)(/?)&gt;', 'g');
-  return text.replace(regExp, '<$1' + tag + '$3$4>');
+  return text.replace(regExp, '<$1' + tag + '>');
 };
 
 /**
@@ -15528,6 +15558,17 @@ const JsonUtils = new Object();
 
 Obj.createSubclass(JsonUtils, Obj);
 
+/**
+ * Returns true if the key provided should be blocked from merge utilities.
+ * Specifically keys that could cause prototype pollution issues are included.
+ * @param {string} key
+ * @return {boolean}
+ * @private
+ */
+JsonUtils._isBlockedKey = function (key) {
+  return key === '__proto__' || key === 'constructor' || key === 'prototype';
+};
+
 /**
  * Returns a deep clone of the object.
  * @param {object} obj The object to clone.
@@ -15559,8 +15600,10 @@ JsonUtils.clone = function (obj, keyFunc, noClone) {
     ret = {};
 
     // Loop through all properties of the object
-    for (var key in obj) {
-      if (!keyFunc || keyFunc(key)) {
+    var keys = Object.keys(obj);
+    for (var i = 0; i < keys.length; i++) {
+      var key = keys[i];
+      if (!JsonUtils._isBlockedKey(key) && (!keyFunc || keyFunc(key))) {
         var value = obj[key];
         if (
           !(noClone && noClone[key] == true) &&
@@ -15611,25 +15654,32 @@ JsonUtils.merge = function (a, b, noClone) {
  * @private
  */
 JsonUtils._copy = function (a, b) {
-  for (var key in a) {
-    var value = a[key];
-    // Treat an 'undefined' value as if the key were not set and ignore
-    if (value === undefined) continue;
-
-    if ((value && value instanceof Array) || key == '_widgetConstructor') {
-      // Copy the array over, since we don't want arrays to be merged
-      // We also don't want the widget constructor to be copied/cloned
-      b[key] = value;
-    } else if (b[key] && b[key] instanceof CSSStyle) {
-      // If an object is defined as CSS in the base object, merge the CSS
-      if (value instanceof CSSStyle) b[key].merge(value);
-      // value is String
-      else b[key].merge(new CSSStyle(value));
-    } else if (JsonUtils._isDeepClonable(value)) {
-      // Deep clone if object exists in b, copy otherwise
-      if (b[key]) JsonUtils._copy(value, b[key]);
-      else b[key] = value;
-    } else b[key] = value;
+  var keys = Object.keys(a);
+  for (var i = 0; i < keys.length; i++) {
+    var key = keys[i];
+    if (!JsonUtils._isBlockedKey(key)) {
+      var value = a[key];
+      var hasOwnKey = Object.hasOwn(b, key);
+      var targetValue = hasOwnKey ? b[key] : undefined;
+      // Treat an 'undefined' value as if the key were not set and ignore
+      if (value === undefined) continue;
+
+      if ((value && value instanceof Array) || key == '_widgetConstructor') {
+        // Copy the array over, since we don't want arrays to be merged
+        // We also don't want the widget constructor to be copied/cloned
+        b[key] = value;
+      } else if (hasOwnKey && targetValue && targetValue instanceof CSSStyle) {
+        // If an object is defined as CSS in the base object, merge the CSS
+        if (value instanceof CSSStyle) targetValue.merge(value);
+        // value is String
+        else targetValue.merge(new CSSStyle(value));
+      } else if (JsonUtils._isDeepClonable(value)) {
+        // Deep clone if object exists in b, copy otherwise
+        if (hasOwnKey && JsonUtils._isDeepClonable(targetValue))
+          JsonUtils._copy(value, targetValue);
+        else b[key] = value;
+      } else b[key] = value;
+    }
   }
 };
 

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

@@ -8992,6 +8992,31 @@ const InlineHelpHintsStrategy = function (displayOptions, parentElement) {
 
 const OJ_HAS_HELPHINTS_STYLECLASS = 'oj-has-helphints';
 
+/**
+ * Builds HTML for unformatted hints by escaping each hint and inserting <br> nodes
+ * between hint lines.
+ *
+ * @param {Array<string>} hints
+ * @return {string} escaped hint HTML
+ * @private
+ */
+function _getUnformattedHintsHtml(hints) {
+  if (!hints || hints.length < 1) {
+    return '';
+  }
+  let hintsDom = document.createElement('div');
+  hints.forEach(function (hint, index) {
+    let hintDom = PopupMessagingStrategyUtils.GetTextDom(document, hint, false);
+    if (hintDom) {
+      if (index > 0) {
+        hintsDom.appendChild(document.createElement('br'));
+      }
+      hintsDom.appendChild(hintDom);
+    }
+  });
+  return hintsDom.innerHTML;
+}
+
 /**
  * Registers the InlineHelpHintsStrategy constructor function with ComponentMessaging.
  * No need to register since we are not creating this strategy on from ComponentMessaging.
@@ -9263,7 +9288,7 @@ InlineHelpHintsStrategy.prototype._addHelpHintsContent = function (component) {
     // we do the same thing that we do in PopupComponentMessages
     let hints = this.GetValidatorHints();
     if (hints.length > 0) {
-      hintsHtml = hints.join('<br/>');
+      hintsHtml = _getUnformattedHintsHtml(hints);
     }
   }
   if (!hintsHtml) {
@@ -9272,14 +9297,16 @@ InlineHelpHintsStrategy.prototype._addHelpHintsContent = function (component) {
     // InlineHelpHintsStrategy.prototype._createHelpHintsAttributeEventHandlers
     let definition = helpHints ? helpHints.definition : null;
     if (definition) {
-      hintsHtml = definition;
+      // helpHints.definition does not allow formatted text, unlike help.instruction above which does.
+      let definitionDom = PopupMessagingStrategyUtils.GetTextDom(document, definition, false);
+      hintsHtml = definitionDom ? definitionDom.outerHTML : '';
     }
   }
   // try to get the converterHint
   if (!hintsHtml && this.ShowConverterHint()) {
     let hints = this.GetConverterHint();
     if (hints.length > 0) {
-      hintsHtml = hints.join('<br/>');
+      hintsHtml = _getUnformattedHintsHtml(hints);
     }
   }
 

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

@@ -5,8 +5,9 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-import { getExpressionEvaluator } from 'ojs/ojconfig';
+import { getExpressionEvaluator, getFallbackExpressionEvaluator } from 'ojs/ojconfig';
 import { AttributeUtils } from 'ojs/ojcustomelement-utils';
+import { CspExpressionEvaluatorInternal } from 'ojs/ojcspexpressionevaluator-internal';
 
 /**
  * @namespace
@@ -50,15 +51,17 @@ ExpressionUtils.createGenericExpressionEvaluator = function (expressionText) {
     };
   }
 
-  var evaluator;
-  try {
-    /* jslint evil:true */
-    // eslint-disable-next-line no-new-func
-    evaluator = new Function('context', 'with(context){return ' + expressionText + ';}'); // @HTMLUpdateOK binding expression evaluation
-  } catch (e) {
-    throw new Error(e.message + ' in expression "' + expressionText + '"');
+  var fallbackEvaluator = getFallbackExpressionEvaluator();
+  if (fallbackEvaluator) {
+    return fallbackEvaluator.createGenericExpressionEvaluator(expressionText);
   }
-  return evaluator;
+
+  var defaultEvaluate = new CspExpressionEvaluatorInternal().createEvaluator(
+    expressionText
+  ).evaluate;
+  return function (context) {
+    return defaultEvaluate([context]);
+  };
 };
 
 const getExpressionInfo = ExpressionUtils.getExpressionInfo;

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

@@ -5,7 +5,7 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-import { BaseComponentDefaults, CSSStyle, Agent, Container, ToolkitUtils, Path, Stroke, PathUtils, KeyboardEvent, MouseEvent, Rect, OutputText, IconButton, Displayable, Obj, SelectionEffectUtils, ColorUtils, ResourceUtils, TouchEvent, Rectangle, AriaUtils, EventFactory, Point, EventManager, ClipPath, TextUtils, SolidFill, JsonUtils, Line, AnimFadeIn, Easing, AnimFadeOut, CustomAnimation, ParallelPlayable, Playable, Animator, Automation, SvgShapeUtils, SimpleScrollbar, LayoutUtils, Dimension, MarqueeHandler, Matrix, SelectionHandler } from 'ojs/ojdvt-toolkit';
+import { BaseComponentDefaults, CSSStyle, Agent, Container, ToolkitUtils, Path, Stroke, PathUtils, KeyboardEvent, MouseEvent, Rect, OutputText, IconButton, Displayable, Obj, SelectionEffectUtils, ColorUtils, ResourceUtils, HtmlTooltipManager, TouchEvent, Rectangle, AriaUtils, EventFactory, Point, EventManager, ClipPath, TextUtils, SolidFill, JsonUtils, Line, AnimFadeIn, Easing, AnimFadeOut, CustomAnimation, ParallelPlayable, Playable, Animator, Automation, SvgShapeUtils, SimpleScrollbar, LayoutUtils, Dimension, MarqueeHandler, Matrix, SelectionHandler } from 'ojs/ojdvt-toolkit';
 import { TimeComponent, TimeComponentEventManager, TimeComponentKeyboardHandler } from 'ojs/ojdvt-timecomponent';
 import { TimeAxisUtils as TimeAxisUtils$1, TimeAxis } from 'ojs/ojtimeaxis-toolkit';
 
@@ -3640,7 +3640,7 @@ var DvtGanttTooltipUtils = {
       var defaultNavigationLabel =
         gantt.getEventManager().getKeyboardDnDMode() === 'move' ? 'MoveBy' : 'ResizeBy';
       var navigationScaleDesc = DvtGanttTooltipUtils._addDatatipRow(
-        '',
+        isTabular ? [] : '',
         gantt,
         '',
         defaultNavigationLabel,
@@ -3761,7 +3761,7 @@ var DvtGanttTooltipUtils = {
     }
 
     // Default Tooltip Support
-    var datatip = '';
+    var datatip = isTabular ? [] : '';
     datatip = DvtGanttTooltipUtils._addRowDatatip(datatip, taskNode, isTabular);
     datatip = DvtGanttTooltipUtils._addTaskDatatip(datatip, taskNode, isTabular);
 
@@ -3770,39 +3770,32 @@ var DvtGanttTooltipUtils = {
 
   /**
    * Final processing for the datatip.
-   * @param {string} datatip The current datatip.
+   * @param {string|Array<Node>} datatip The current datatip.
    * @param {Gantt} gantt The owning gantt instance.
    * @param {boolean} isTabular Whether the datatip is in a table format.
-   * @return {string} The updated datatip.
+   * @return {string|Node} The updated datatip.
    * @private
    */
   _processDatatip: (datatip, gantt, isTabular) => {
     // Don't render tooltip if empty
-    if (datatip === '') return null;
-
-    // Add outer table tags
-    // Note: Unlike Charts, we're not going to create a table start tag with
-    // dvt.HtmlTooltipManager.createElement(). That method applies parsed styles
-    // to the element, but for gantt we want to directly apply the class to the element:
-    //
-    // Security note: gantt.GetStyleClass('tooltipTable') returns an internally generated class string
-    // defined in ojgantt.js (in this case, returns the string 'oj-gantt-tooltip-table')
-    //
-    // datatip contains externally provided strings, but this entire value is eventually passed to
-    // dvt.HtmlTooltipManager._showTextAtPosition(),
-    // and that method makes sure all parsable HTML tags are disabled/handled
+    if (isTabular && datatip.length === 0) return null;
+    if (!isTabular && datatip === '') return null;
+
+    // Add outer table element
     if (isTabular)
-      return '<table class="' + gantt.GetStyleClass('tooltipTable') + '">' + datatip + '</table>';
+      return HtmlTooltipManager.createElement('table', null, datatip, [
+        gantt.GetStyleClass('tooltipTable')
+      ]);
 
     return datatip;
   },
 
   /**
-   * Adds the row string to the datatip.
-   * @param {string} datatip The current datatip.
+   * Adds the row to the datatip.
+   * @param {string|Array<Node>} datatip The current datatip.
    * @param {DvtGanttTaskNode} taskNode The task node.
    * @param {boolean} isTabular Whether the datatip is in a table format.
-   * @return {string} The updated datatip.
+   * @return {string|Array<Node>} The updated datatip.
    * @private
    */
   _addRowDatatip: (datatip, taskNode, isTabular) => {
@@ -3820,11 +3813,11 @@ var DvtGanttTooltipUtils = {
   },
 
   /**
-   * Adds the task strings to the datatip.
-   * @param {string} datatip The current datatip.
+   * Adds the task rows to the datatip.
+   * @param {string|Array<Node>} datatip The current datatip.
    * @param {DvtGanttTaskNode} taskNode The task node.
    * @param {boolean} isTabular Whether the datatip is in a table format.
-   * @return {string} The updated datatip.
+   * @return {string|Array<Node>} The updated datatip.
    * @private
    */
   _addTaskDatatip: (datatip, taskNode, isTabular) => {
@@ -4061,15 +4054,15 @@ var DvtGanttTooltipUtils = {
   },
 
   /**
-   * Adds a row of item to the datatip string.
-   * @param {string} datatip The current datatip.
+   * Adds a row of item to the datatip.
+   * @param {string|Array<Node>} datatip The current datatip.
    * @param {Gantt} gantt The gantt instance.
    * @param {string} type The item type, e.g. row, start, end, label
    * @param {string} defaultLabel The bundle resource string for the default label.
    * @param {string|number} value The item value.
    * @param {boolean} isTabular Whether the datatip is in a table format.
    * @param {number} index (optional) The index of the tooltipLabel string to be used
-   * @return {string} The updated datatip.
+   * @return {string|Array<Node>} The updated datatip.
    * @private
    */
   _addDatatipRow: (datatip, gantt, type, defaultLabel, value, isTabular, index) => {
@@ -4093,35 +4086,16 @@ var DvtGanttTooltipUtils = {
     value = DvtGanttTooltipUtils.formatValue(gantt, type, valueFormat, value);
 
     if (isTabular) {
-      // Note: Unlike Charts, we're not going to create a td start tag with
-      // dvt.HtmlTooltipManager.createElement(). That method applies parsed styles
-      // to the element, but for gantt we want to directly apply the class to the element:
-      //
-      // Security note: gantt.GetStyleClass returns an internally generated class string
-      // defined in ojgantt.js (in this case, returns the strings 'oj-gantt-tooltip-label'
-      // and 'oj-gantt-tooltip-value' respectively in the two calls below).
-      //
-      // tooltipLabel and value contains externally provided strings, but these values are eventually passed to
-      // DvtGanttTooltipUtils._processDatatip(), which concatenates more strings to it, and the entire value is passed to
-      // dvt.HtmlTooltipManager._showTextAtPosition(),
-      // and that last method makes sure all parsable HTML tags are disabled/handled
-      var tooltipLabelClass = gantt.GetStyleClass('tooltipLabel');
-      var tooltipValueClass = gantt.GetStyleClass('tooltipValue');
-      return (
-        datatip +
-        '<tr>' +
-        '<td class="' +
-        tooltipLabelClass +
-        '">' +
-        tooltipLabel +
-        '</td>' +
-        '<td class="' +
-        tooltipValueClass +
-        '">' +
-        value +
-        '</td>' +
-        '</tr>'
-      );
+      var tds = [
+        HtmlTooltipManager.createElement('td', null, tooltipLabel, [
+          gantt.GetStyleClass('tooltipLabel')
+        ]),
+        HtmlTooltipManager.createElement('td', null, value, [
+          gantt.GetStyleClass('tooltipValue')
+        ])
+      ];
+      datatip.push(HtmlTooltipManager.createElement('tr', null, tds));
+      return datatip;
     } else {
       if (datatip.length > 0) datatip += '<br>';