@oracle/oraclejet 15.0.4 → 15.1.0

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

@@ -2948,7 +2948,17 @@ IteratingDataProviderContentHandler.prototype._handleFetchSuccess = function (
     index += 1;
   }
 
-  return this.animateShowContent(this.m_root, parent, isInitialFetch);
+  const animateShowContentPromise = this.animateShowContent(this.m_root, parent, isInitialFetch);
+  if (doneOrMaxLimitReached) {
+    animateShowContentPromise.then(() => {
+      if (this.m_root && this.m_widget && this.shouldUseGridRole() && this._isLoadMoreOnScroll()) {
+        // update aria rowcount once all data is loaded
+        this.m_root.setAttribute('aria-rowcount', this.getItems(this.m_root).length);
+      }
+    });
+  }
+
+  return animateShowContentPromise;
 };
 
 /**

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

@@ -1235,10 +1235,11 @@ class DvtDiagramLink extends Container {
    * ["M", x1, y1, "L", x2, y2, ..., "L", xn, yn].  The points are in the
    * coordinate system of the link's container.
    * @param {array} points array of points to use for rendering this link
+   * @param {boolean} forceDefault if true, will use the default renderer
    */
-  setPoints(points) {
+  setPoints(points, forceDefault) {
     var renderer = this._getCustomRenderer('renderer');
-    if (renderer) {
+    if (renderer && !forceDefault) {
       this._customPoints = points;
       var prevState = {
         hovered: false,
@@ -6504,11 +6505,11 @@ class DvtDiagramKeyboardHandler extends PanZoomCanvasKeyboardHandler {
     var direction = event.keyCode;
     if (!listOfLinks || listOfLinks.length < 1 || !node) return null;
     var link = listOfLinks[0];
-    var nodeBB = node.getKeyboardBoundingBox();
+    var nodeBB = node.getKeyboardBoundingBox(node.getCtx().getStage());
     var nodeCenterX = nodeBB.x + nodeBB.w / 2;
     for (var i = 0; i < listOfLinks.length; i++) {
       var object = listOfLinks[i];
-      var linkBB = object.getKeyboardBoundingBox();
+      var linkBB = object.getKeyboardBoundingBox(object.getCtx().getStage());
       var linkCenterX = linkBB.x + linkBB.w / 2;
       if (
         (direction == KeyboardEvent.OPEN_ANGLED_BRACKET && linkCenterX <= nodeCenterX) ||
@@ -12172,7 +12173,7 @@ class Diagram extends PanZoomComponent {
         .stageToLocal({ x: stagePos.x, y: stagePos.y });
       if (this._linkCreationFeedBack) {
         var points = this._linkCreationFeedBack.GetCreationFeedbackPoints(localPos);
-        this._linkCreationFeedBack.setPoints(points);
+        this._linkCreationFeedBack.setPoints(points, true);
       } else {
         var obj = this.getEventManager().DragSource.getDragObject();
         if (obj instanceof DvtDiagramNode) {
@@ -12207,7 +12208,7 @@ class Diagram extends PanZoomComponent {
           var link = new DvtDiagramLink(this.getCtx(), this, linkData, false);
           this.getNodesPane().addChild(link);
           link.setMouseEnabled(false);
-          link.setPoints([startLocalPos.x, startLocalPos.y, localPos.x, localPos.y]);
+          link.setPoints([startLocalPos.x, startLocalPos.y, localPos.x, localPos.y], true);
           this._linkCreationFeedBack = link;
         }
       }

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

@@ -4536,7 +4536,7 @@ setDefaultOptions({
  *     </tr>
  *     <tr>
  *       <td><kbd>Alt + &lt; or Alt + &gt;</kbd></td>
- *       <td>Move focus from the node to a link.</td>
+ *       <td>When focus is on a node, move focus and selection to nearest link left/right.</td>
  *     </tr>
  *     <tr>
  *       <td><kbd>UpArrow or DownArrow</kbd></td>

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

@@ -70,7 +70,17 @@ let DrawerPopup = DrawerPopup_1 = class DrawerPopup extends Component {
         this.handleOnBlur = (event) => {
             if (this.props.modality === 'modal') {
                 const zorderLayer = this.rootRef.current.parentNode;
-                const isTargetWithin = this.isTargetDescendantOfOwnZorderLayerOrItsNextSiblings(zorderLayer, event.relatedTarget);
+                let isTargetWithin = false;
+                if (event.relatedTarget) {
+                    if (this.isTargetDescendantOfOwnZorderLayerOrItsNextSiblings(zorderLayer, event.relatedTarget)) {
+                        isTargetWithin = true;
+                    }
+                }
+                else {
+                    if (this.isTargetDescendantOfOwnZorderLayerOrItsNextSiblings(zorderLayer, document.activeElement)) {
+                        isTargetWithin = true;
+                    }
+                }
                 if (!isTargetWithin && this.props.opened) {
                     const focusables = DrawerUtils.getFocusables(this.rootRef.current);
                     event.preventDefault();

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

@@ -223,6 +223,9 @@ DvtStyleProcessor.styleTypes = {
       } else if (cssDiv.hasClass('oj-treemap-node-header')) {
         // Ignored because the weight is automatically determined based on the layer of the header.
         ignoreProperties[DvtStyleProcessor._FONT_WEIGHT] = true;
+      } else if (cssDiv.hasClass('oj-legend-title')) {
+        // JET-58104: Ignored in order to determine the user set font family from default font family. Legend title will inherit font family from sectionTitleStyle.
+        ignoreProperties[DvtStyleProcessor._FONT_FAMILY] = true;
       }
     }
     return DvtStyleProcessor._buildTextCssPropertiesObject(cssDiv, ignoreProperties);

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

@@ -187,16 +187,22 @@ class TimeComponent extends BaseComponent {
       if (item._itemData.taskId) {
         // Specifically for Gantt with row data supplied and no task template,
         // _itemData does not have the task's id prop (it has the taskId prop)
-        const itemCopy = Object.assign({}, item._itemData);
+        // Note that the spread operation below is much faster than using Object.assign,
+        // and much faster than a simple rest operation "const { taskId, ...itemCopy } = item._itemData"
+        // delete is also much slower than just setting value to undefined
+        const itemCopy = { ...item._itemData };
         itemCopy.id = itemCopy.taskId;
-        delete itemCopy.taskId;
+        itemCopy.taskId = undefined;
         return itemCopy;
       }
       return item._itemData;
     };
     const sanitizeItemData = (item) => {
-      const itemCopy = Object.assign({}, item);
-      delete itemCopy._itemData;
+      // Note that the spread operation below is much faster than using Object.assign,
+      // and much faster than a simple rest operation "const { _itemData, ...itemCopy } = item"
+      // delete is also much slower than just setting value to undefined
+      const itemCopy = { ...item };
+      itemCopy._itemData = undefined;
       return itemCopy;
     };
     const isSeriesData = type === 'series' || type === 'row';

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

@@ -2044,6 +2044,9 @@ class DvtSunburstNode extends DvtTreeNode {
 
     // Create the shape object
     this._shape = this._createShapeNode();
+    if (!this._shape) {
+      return;
+    }
     container.addChild(this._shape);
 
     if (!(this.isRootNode() && this._createRootNodeContent())) {
@@ -3421,6 +3424,9 @@ class DvtTreemapNode extends DvtTreeNode {
 
     // Create the shape object
     this._shape = this._createShapeNode();
+    if (!this._shape) {
+      return;
+    }
     container.addChild(this._shape);
 
     if (this.hasChildren()) {
@@ -3455,7 +3461,6 @@ class DvtTreemapNode extends DvtTreeNode {
         }
       }
     }
-
     // WAI-ARIA
     if (this.hasChildren()) this._shape.setAriaRole('group');
     else this._shape.setAriaRole('img');

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

@@ -4227,9 +4227,16 @@ class DvtGanttEventManager extends TimeComponentEventManager {
    */
   getFocus() {
     var navigable = super.getFocus(this);
+    var isTaskNavigable = navigable && navigable.nodeType === 'task';
+
+    // Task is not in the DOM, e.g. due to a programmatic removal from the data
+    // Related to JET-57646
+    if (isTaskNavigable && navigable.getParent() == null) {
+      return null;
+    }
 
     // If tasks's parent row is collapsed such that the task is no longer visible, the first visible task of the closest ancestor row is focused and returned
-    if (navigable && navigable.nodeType === 'task' && navigable.getRowNode().getParent() == null) {
+    if (isTaskNavigable && navigable.getRowNode().getParent() == null) {
       var navigableObj = navigable.getLayoutObject();
       var rowObj = navigableObj['rowObj'];
       var dataLayoutManager = this._comp.getDataLayoutManager();
@@ -6721,6 +6728,30 @@ class DvtGanttTaskContent extends Container {
     }
     this._content = new Container(this._gantt.getCtx());
     this._content.setClassName(this._gantt.GetStyleClass('taskCustom'));
+
+    var isRTL = Agent.isRightToLeft(this._gantt.getCtx());
+    var clipPathCoordSystem = this._getClipPathCoordSystem();
+
+    // for CSS clip-path to work as expected, this._content's bounding box need to match the mainShape's bounding box.
+    // To ensure this for, render a hidden rect that matches the expected bounding box dimension
+    if (clipPathCoordSystem === 'css') {
+      var mainShape = this._task.getShape('main');
+      var width =
+        mainShape.getWidth() +
+        mainShape.getPhysicalStartOffset() +
+        mainShape.getPhysicalEndOffset();
+      var height = mainShape.getHeight();
+      var containerSupport = new Rect(
+        this._gantt.getCtx(),
+        isRTL ? -width : 0,
+        0,
+        width,
+        height
+      );
+      containerSupport.setVisible(false);
+      this._content.addChild(containerSupport);
+    }
+
     this.addChild(this._content);
     const parentElem = this._content.getContainerElem();
     const renderer = options.taskContent.renderer; // must have been defined if reached here
@@ -6736,10 +6767,8 @@ class DvtGanttTaskContent extends Container {
       }
     }
 
-    const cp = new ClipPath();
     const cpDim = this._getClipPathDim();
-    cp.addRect(cpDim.x, cpDim.y, cpDim.w, cpDim.h, cpDim.r, cpDim.r);
-    this.setClipPath(cp);
+    this._applyClipPath(cpDim);
 
     // render is triggered again upon interactions e.g. on hover/focus
     // which clears highlighted classname, so ensure content shows up highlighted
@@ -6822,6 +6851,17 @@ class DvtGanttTaskContent extends Container {
     }
   }
 
+  /**
+   * Gets the clippath coordinate system. If clippath is to be applied via CSS, then
+   * 'css' is returned. Otherwise 'svg' if SVG clippath is to be applied.
+   * @returns {string} 'css' | 'svg'
+   * @private
+   */
+  _getClipPathCoordSystem() {
+    const isRTL = Agent.isRightToLeft(this._gantt.getCtx());
+    return !isRTL ? 'css' : 'svg';
+  }
+
   /**
    * Returns the clippath rect dimension around the content
    * @param {object} refDim Any dimensions to be merged and processed
@@ -6832,22 +6872,50 @@ class DvtGanttTaskContent extends Container {
     const dim = refDim || {};
     const mainShape = this._task.getShape('main');
     const isRTL = Agent.isRightToLeft(this._gantt.getCtx());
+    const coordSystem = this._getClipPathCoordSystem();
 
     const refX = 0;
     const refW = dim.w != null ? dim.w : mainShape.getWidth();
-    return {
-      x: isRTL
-        ? refX - refW - mainShape.getPhysicalEndOffset()
-        : refX - mainShape.getPhysicalStartOffset(),
-      translateX: isRTL
-        ? refX + mainShape.getPhysicalStartOffset()
-        : refX - mainShape.getPhysicalStartOffset(),
+
+    const result = {
       y: 0,
       translateY: 0,
       w: refW + mainShape.getPhysicalStartOffset() + mainShape.getPhysicalEndOffset(),
       h: dim.h != null ? dim.h : mainShape.getHeight(),
-      r: dim.r != null ? dim.r : mainShape.getBorderRadius()
+      r: dim.r != null ? dim.r : mainShape.getBorderRadius(),
+      _coordSystem: coordSystem
     };
+    if (coordSystem === 'svg') {
+      result.x = isRTL
+        ? refX - refW - mainShape.getPhysicalEndOffset()
+        : refX - mainShape.getPhysicalStartOffset();
+      result.translateX = isRTL
+        ? refX + mainShape.getPhysicalStartOffset()
+        : refX - mainShape.getPhysicalStartOffset();
+    } else {
+      result.x = 0;
+      result.translateX = refX - mainShape.getPhysicalStartOffset();
+    }
+    return result;
+  }
+
+  /**
+   * Applies the clippath rect around the content
+   * @param {object} cpDim Of shape { x: number, y: number, w: number, h: number, r: string }
+   * @private
+   */
+  _applyClipPath(cpDim) {
+    const { x, y, w, h, r } = cpDim;
+    const pathCmd = PathUtils.rectangleWithBorderRadius(x, y, w, h, r, Math.min(w, h), '0');
+
+    if (cpDim._coordSystem === 'css') {
+      // this.setStyle() triggers a CSP violation on Safari (16.0 at the time of writing)
+      this.getElem().style.clipPath = `path('${pathCmd}')`;
+    } else {
+      const cp = new ClipPath();
+      cp.addPath(pathCmd);
+      this.setClipPath(cp);
+    }
   }
 
   /**
@@ -6855,10 +6923,8 @@ class DvtGanttTaskContent extends Container {
    * @param {number} width The new width.
    */
   setWidth(width) {
-    const cp = new ClipPath();
     const cpDim = this._getClipPathDim({ w: width });
-    cp.addRect(cpDim.x, cpDim.y, cpDim.w, cpDim.h, cpDim.r, cpDim.r);
-    this.setClipPath(cp);
+    this._applyClipPath(cpDim);
   }
 
   /**
@@ -6866,10 +6932,8 @@ class DvtGanttTaskContent extends Container {
    * @param {number} height The new height.
    */
   setHeight(height) {
-    const cp = new ClipPath();
     const cpDim = this._getClipPathDim({ h: height });
-    cp.addRect(cpDim.x, cpDim.y, cpDim.w, cpDim.h, cpDim.r, cpDim.r);
-    this.setClipPath(cp);
+    this._applyClipPath(cpDim);
   }
 
   /**
@@ -6879,10 +6943,7 @@ class DvtGanttTaskContent extends Container {
   setX(x) {
     const cpDim = this._getClipPathDim({ x: x });
     this.setTranslateX(cpDim.translateX);
-
-    const cp = new ClipPath();
-    cp.addRect(cpDim.x, cpDim.y, cpDim.w, cpDim.h, cpDim.r, cpDim.r);
-    this.setClipPath(cp);
+    this._applyClipPath(cpDim);
   }
 
   /**
@@ -6892,10 +6953,7 @@ class DvtGanttTaskContent extends Container {
   setY(y) {
     const cpDim = this._getClipPathDim({ y: y });
     this.setTranslateY(cpDim.translateY);
-
-    const cp = new ClipPath();
-    cp.addRect(cpDim.x, cpDim.y, cpDim.w, cpDim.h, cpDim.r, cpDim.r);
-    this.setClipPath(cp);
+    this._applyClipPath(cpDim);
   }
 
   /**
@@ -6903,10 +6961,8 @@ class DvtGanttTaskContent extends Container {
    * @param {number} r The new border radius.
    */
   setBorderRadius(r) {
-    const cp = new ClipPath();
     const cpDim = this._getClipPathDim({ r: r });
-    cp.addRect(cpDim.x, cpDim.y, cpDim.w, cpDim.h, cpDim.r, cpDim.r);
-    this.setClipPath(cp);
+    this._applyClipPath(cpDim);
   }
 
   /**
@@ -6920,10 +6976,7 @@ class DvtGanttTaskContent extends Container {
   setDimensions(x, y, w, h, r) {
     const cpDim = this._getClipPathDim({ x: x, y: y, w: w, h: h, r: r });
     this.setTranslate(cpDim.translateX, cpDim.translateY);
-
-    const cp = new ClipPath();
-    cp.addRect(cpDim.x, cpDim.y, cpDim.w, cpDim.h, cpDim.r, cpDim.r);
-    this.setClipPath(cp);
+    this._applyClipPath(cpDim);
   }
 }
 
@@ -7481,15 +7534,6 @@ class DvtGanttTask {
           );
           this._container.addChild(this._mainShape);
           this._mainShape.setRenderState('add');
-
-          // render any custom content
-          if (this.isMainCustomContent()) {
-            if (this._mainCustomContent) {
-              this._mainCustomContent.destroy();
-            }
-            this._mainCustomContent = new DvtGanttTaskContent(this._gantt, this);
-            this._mainCustomContent.render(false);
-          }
         } else {
           this._mainShape.setRenderState('exist');
           if (theme !== 'alta') {
@@ -7519,6 +7563,22 @@ class DvtGanttTask {
           }
         }
 
+        // Since final dimensions are not applied until after animations (if any), store
+        // them so that they can be retrieved for calculating final dimensions for other elements
+        this._mainShape.setFinalWidth(width);
+        this._mainShape.setFinalHeight(height);
+        this._mainShape.setFinalX(x);
+        this._mainShape.setFinalY(y);
+
+        // render any custom content
+        if (this.isMainCustomContent() && this._mainShape.getRenderState() === 'add') {
+          if (this._mainCustomContent) {
+            this._mainCustomContent.destroy();
+          }
+          this._mainCustomContent = new DvtGanttTaskContent(this._gantt, this);
+          this._mainCustomContent.render(false);
+        }
+
         // Construct container for task elements such as progress, downtime, overtime, attribute bar, etc.
         // with a clippath of the main shape.
         // Only do this if applicable; otherwise the empty containers aggravate performance.
@@ -7558,13 +7618,6 @@ class DvtGanttTask {
           this._mainContainerSupport = null;
         }
 
-        // Since final dimensions are not applied until after animations (if any), store
-        // them so that they can be retrieved for calculating final dimensions for other elements
-        this._mainShape.setFinalWidth(width);
-        this._mainShape.setFinalHeight(height);
-        this._mainShape.setFinalX(x);
-        this._mainShape.setFinalY(y);
-
         // Called at the end of animation (if any)
         onRenderEnd = () => {
           // Apply styles (default classes handled by DvtGanttTaskShape instance)
@@ -7769,6 +7822,19 @@ class DvtGanttTask {
     return this._mainShape.getWidth();
   }
 
+  /**
+   * Sets the width of the main container clippath support bar.
+   * @param {number} width The new width.
+   * @private
+   */
+  _setMainContainerSupportWidth(width) {
+    const isRTL = Agent.isRightToLeft(this._gantt.getCtx());
+    if (isRTL) {
+      this._mainContainerSupport.setX(-width);
+    }
+    this._mainContainerSupport.setWidth(width);
+  }
+
   /**
    * Sets the width of the main shape
    * @param {number} width The width of the main shape
@@ -7790,6 +7856,9 @@ class DvtGanttTask {
     if (this._mainContainer) {
       this._applyMainContainerClippath();
     }
+    if (this._mainContainerSupport) {
+      this._setMainContainerSupportWidth(width);
+    }
   }
 
   /**
@@ -7821,6 +7890,9 @@ class DvtGanttTask {
     if (this._mainContainer) {
       this._applyMainContainerClippath();
     }
+    if (this._mainContainerSupport) {
+      this._mainContainerSupport.setHeight(height);
+    }
   }
 
   /**
@@ -7941,6 +8013,10 @@ class DvtGanttTask {
     if (this._mainContainer) {
       this._applyMainContainerClippath();
     }
+    if (this._mainContainerSupport) {
+      this._setMainContainerSupportWidth(w);
+      this._mainContainerSupport.setHeight(h);
+    }
   }
 
   /**
@@ -11436,6 +11512,11 @@ class DvtGanttRowNode extends Container {
       }
       container.addChild(this);
     }
+
+    // If there are no selected tasks in the row, remove any row selection effects
+    if (!this.getTaskObjs().some((taskObj) => taskObj.node && taskObj.node.isSelected())) {
+      this.removeEffect('selected');
+    };
   }
 
   /**

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

@@ -16,6 +16,7 @@ import { setInKoCleanExternal, isTouchSupported } from 'ojs/ojdomutils';
 import $ from 'jquery';
 import { isElementRegistered, isComposite, isVComponent, getMetadata } from 'ojs/ojcustomelement-registry';
 import { AttributeUtils, CustomElementUtils, JetElementError, OJ_BIND_CONVERTED_NODE, ElementUtils } from 'ojs/ojcustomelement-utils';
+import { performMonitoredWriteback } from 'ojs/ojmonitoring';
 import { CONSUMED_CONTEXT, getPropagationMetadataViaCache, STATIC_PROPAGATION } from 'ojs/ojbindpropagation';
 import KeySetImpl from 'ojs/ojkeysetimpl';
 import Context from 'ojs/ojcontext';
@@ -2203,8 +2204,8 @@ const ExpressionPropertyUpdater = function (element, bindingContext, skipThrottl
     var topProp = splitProps[0];
     var listener = function (evt) {
       if (!_isSettingProperty(topProp)) {
-        var written = false;
-        var reason;
+        let failure;
+        let writer;
         ignoreDependencies(function () {
           var value = evt.detail.value;
           // If the propName has '.' we need to walk the top level value and writeback
@@ -2218,34 +2219,40 @@ const ExpressionPropertyUpdater = function (element, bindingContext, skipThrottl
 
           if (isObservable(target)) {
             if (isWriteableObservable(target)) {
-              target(ComponentBinding.__cloneIfArray(value));
-              written = true;
+              writer = target;
             } else {
-              reason = 'the observable is not writeable';
+              failure = 'the observable is not writeable';
             }
           } else {
             var writerExpr = __ExpressionUtils.getPropertyWriterExpression(expr);
             if (writerExpr != null) {
-              var wrirerEvaluator = BindingProviderImpl.createEvaluator(writerExpr, bindingContext);
-              var func = __ExpressionUtils.getWriter(wrirerEvaluator(bindingContext));
-              func(ComponentBinding.__cloneIfArray(value));
-              written = true;
+              const writerEvaluator = BindingProviderImpl.createEvaluator(
+                writerExpr,
+                bindingContext
+              );
+              writer = __ExpressionUtils.getWriter(writerEvaluator(bindingContext));
             } else {
-              reason = 'the expression is not a valid update target';
+              failure = 'the expression is not a valid update target';
             }
           }
-        });
-
-        if (!written) {
-          if (reason) {
-            info(
-              "The expression '%s' for property '%s' was not updated because %s.",
-              expr,
+          if (!writer) {
+            if (failure) {
+              info(
+                "The expression '%s' for property '%s' was not updated because %s.",
+                expr,
+                propName,
+                failure
+              );
+            }
+          } else {
+            performMonitoredWriteback(
               propName,
-              reason
+              writer,
+              evt,
+              ComponentBinding.__cloneIfArray(value)
             );
           }
-        }
+        });
       }
     };
 

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

@@ -53,6 +53,10 @@ const DvtLegendUtils = {
       section['expanded'] == false ||
       (options.expanded && options.expanded.has(section.id) == false)
     );
+  },
+
+  isEmpty: (inputObject) => {
+    return inputObject ? Object.keys(inputObject).length === 0 : true;
   }
 };
 
@@ -644,7 +648,7 @@ class DvtLegendDefaults extends BaseComponentDefaults {
       _sectionTitleStyle: new CSSStyle(
         BaseComponentDefaults.FONT_FAMILY_ALTA_11 + 'color: #737373;'
       ),
-      titleHalign: 'start',
+      titleHalign: '',
       hiddenCategories: [],
       hideAndShowBehavior: 'off',
       hoverBehavior: 'none',
@@ -1334,9 +1338,13 @@ const DvtLegendRenderer = {
     // Create the title object and add to legend
     var title = new OutputText(context, titleStr, availSpace.x, availSpace.y);
     var titleStyle = options['titleStyle'];
+    const isEmptySectionTitleStyle = DvtLegendUtils.isEmpty(options.sectionTitleStyle);
+
+    if (!isEmptySectionTitleStyle) titleStyle = new CSSStyle(options.sectionTitleStyle); // titleStyle is deprecated
 
     if (section) {
       var defaultStyle = options['_sectionTitleStyle'].clone();
+      if (!isEmptySectionTitleStyle) defaultStyle = defaultStyle.merge(titleStyle);
       titleStyle = section['titleStyle']
         ? defaultStyle.merge(new CSSStyle(section['titleStyle']))
         : defaultStyle;
@@ -1366,7 +1374,9 @@ const DvtLegendRenderer = {
         if (isAligned) {
           // title alignment will be deferred until we know the total width of the legend content
           var titleHalign =
-            section && section['titleHalign'] ? section['titleHalign'] : options['titleHalign'];
+            section && section['titleHalign']
+              ? section['titleHalign']
+              : options['titleHalign'] || options.sectionTitleHalign;
           legend.__registerTitle({ text: title, halign: titleHalign });
         }
       } else container.removeChild(title);