@oracle/oraclejet 15.0.5 → 15.1.0

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

@@ -2946,7 +2946,17 @@ define(['exports', 'ojs/ojcore-base', 'jquery', 'ojs/ojcontext', 'ojs/ojdatacoll
       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/ojdiagram-toolkit.js

@@ -1231,10 +1231,11 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-panzoomcanvas', 'ojs/ojkeyboa
      * ["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,
@@ -6500,11 +6501,11 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-panzoomcanvas', 'ojs/ojkeyboa
       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 == dvt.KeyboardEvent.OPEN_ANGLED_BRACKET && linkCenterX <= nodeCenterX) ||
@@ -12168,7 +12169,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-panzoomcanvas', 'ojs/ojkeyboa
           .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) {
@@ -12203,7 +12204,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-panzoomcanvas', 'ojs/ojkeyboa
             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/ojdiagram.js

@@ -4530,7 +4530,7 @@ var __oj_diagram_link_metadata =
    *     </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/ojdvt-base.js

@@ -214,6 +214,9 @@ define(['ojs/ojcore-base', 'ojs/ojdvt-toolkit', 'ojs/ojcontext', 'ojs/ojconfig',
         } 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/ojdvt-timecomponent.js

@@ -186,16 +186,22 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojtimeaxis-toolkit'], function (exp
         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/ojdvt-treeview.js

@@ -2044,6 +2044,9 @@ define(['exports', 'ojs/ojdvt-toolkit'], function (exports, dvt) { 'use strict';
 
       // 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 @@ define(['exports', 'ojs/ojdvt-toolkit'], function (exports, dvt) { 'use strict';
 
       // Create the shape object
       this._shape = this._createShapeNode();
+      if (!this._shape) {
+        return;
+      }
       container.addChild(this._shape);
 
       if (this.hasChildren()) {
@@ -3455,7 +3461,6 @@ define(['exports', 'ojs/ojdvt-toolkit'], function (exports, dvt) { 'use strict';
           }
         }
       }
-
       // WAI-ARIA
       if (this.hasChildren()) this._shape.setAriaRole('group');
       else this._shape.setAriaRole('img');

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

@@ -4225,9 +4225,16 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
      */
     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();
@@ -6719,6 +6726,30 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       }
       this._content = new dvt.Container(this._gantt.getCtx());
       this._content.setClassName(this._gantt.GetStyleClass('taskCustom'));
+
+      var isRTL = dvt.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 dvt.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
@@ -6734,10 +6765,8 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
         }
       }
 
-      const cp = new dvt.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
@@ -6820,6 +6849,17 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       }
     }
 
+    /**
+     * 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 = dvt.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
@@ -6830,22 +6870,50 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       const dim = refDim || {};
       const mainShape = this._task.getShape('main');
       const isRTL = dvt.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 = dvt.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 dvt.ClipPath();
+        cp.addPath(pathCmd);
+        this.setClipPath(cp);
+      }
     }
 
     /**
@@ -6853,10 +6921,8 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
      * @param {number} width The new width.
      */
     setWidth(width) {
-      const cp = new dvt.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);
     }
 
     /**
@@ -6864,10 +6930,8 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
      * @param {number} height The new height.
      */
     setHeight(height) {
-      const cp = new dvt.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);
     }
 
     /**
@@ -6877,10 +6941,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
     setX(x) {
       const cpDim = this._getClipPathDim({ x: x });
       this.setTranslateX(cpDim.translateX);
-
-      const cp = new dvt.ClipPath();
-      cp.addRect(cpDim.x, cpDim.y, cpDim.w, cpDim.h, cpDim.r, cpDim.r);
-      this.setClipPath(cp);
+      this._applyClipPath(cpDim);
     }
 
     /**
@@ -6890,10 +6951,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
     setY(y) {
       const cpDim = this._getClipPathDim({ y: y });
       this.setTranslateY(cpDim.translateY);
-
-      const cp = new dvt.ClipPath();
-      cp.addRect(cpDim.x, cpDim.y, cpDim.w, cpDim.h, cpDim.r, cpDim.r);
-      this.setClipPath(cp);
+      this._applyClipPath(cpDim);
     }
 
     /**
@@ -6901,10 +6959,8 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
      * @param {number} r The new border radius.
      */
     setBorderRadius(r) {
-      const cp = new dvt.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);
     }
 
     /**
@@ -6918,10 +6974,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
     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 dvt.ClipPath();
-      cp.addRect(cpDim.x, cpDim.y, cpDim.w, cpDim.h, cpDim.r, cpDim.r);
-      this.setClipPath(cp);
+      this._applyClipPath(cpDim);
     }
   }
 
@@ -7479,15 +7532,6 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
             );
             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') {
@@ -7517,6 +7561,22 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
             }
           }
 
+          // 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.
@@ -7556,13 +7616,6 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
             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)
@@ -7767,6 +7820,19 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       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 = dvt.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
@@ -7788,6 +7854,9 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       if (this._mainContainer) {
         this._applyMainContainerClippath();
       }
+      if (this._mainContainerSupport) {
+        this._setMainContainerSupportWidth(width);
+      }
     }
 
     /**
@@ -7819,6 +7888,9 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       if (this._mainContainer) {
         this._applyMainContainerClippath();
       }
+      if (this._mainContainerSupport) {
+        this._mainContainerSupport.setHeight(height);
+      }
     }
 
     /**
@@ -7939,6 +8011,10 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       if (this._mainContainer) {
         this._applyMainContainerClippath();
       }
+      if (this._mainContainerSupport) {
+        this._setMainContainerSupportWidth(w);
+        this._mainContainerSupport.setHeight(h);
+      }
     }
 
     /**
@@ -11434,6 +11510,11 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
         }
         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/ojknockout.js

@@ -5,7 +5,7 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-define(['jqueryui-amd/widget', 'ojs/ojkoshared', 'ojs/ojcore', 'ojs/ojlogger', 'knockout', 'ojs/ojdomutils', 'jquery', 'ojs/ojcustomelement-registry', 'ojs/ojcustomelement-utils', 'ojs/ojbindpropagation', 'ojs/ojkeysetimpl', 'ojs/ojcontext', 'ojs/ojtemplateengine-ko', 'ojs/ojcore-base', 'ojs/ojknockouttemplateutils', 'ojs/ojresponsiveknockoututils'], function (widget, BindingProviderImpl, oj$1, Logger, ko, DomUtils, $, ojcustomelementRegistry, ojcustomelementUtils, ojbindpropagation, KeySetImpl, Context, templateEngine, oj$2, KnockoutTemplateUtils, ResponsiveKnockoutUtils) { 'use strict';
+define(['jqueryui-amd/widget', 'ojs/ojkoshared', 'ojs/ojcore', 'ojs/ojlogger', 'knockout', 'ojs/ojdomutils', 'jquery', 'ojs/ojcustomelement-registry', 'ojs/ojcustomelement-utils', 'ojs/ojmonitoring', 'ojs/ojbindpropagation', 'ojs/ojkeysetimpl', 'ojs/ojcontext', 'ojs/ojtemplateengine-ko', 'ojs/ojcore-base', 'ojs/ojknockouttemplateutils', 'ojs/ojresponsiveknockoututils'], function (widget, BindingProviderImpl, oj$1, Logger, ko, DomUtils, $, ojcustomelementRegistry, ojcustomelementUtils, ojmonitoring, ojbindpropagation, KeySetImpl, Context, templateEngine, oj$2, KnockoutTemplateUtils, ResponsiveKnockoutUtils) { 'use strict';
 
   BindingProviderImpl = BindingProviderImpl && Object.prototype.hasOwnProperty.call(BindingProviderImpl, 'default') ? BindingProviderImpl['default'] : BindingProviderImpl;
   oj$1 = oj$1 && Object.prototype.hasOwnProperty.call(oj$1, 'default') ? oj$1['default'] : oj$1;
@@ -2194,8 +2194,8 @@ define(['jqueryui-amd/widget', 'ojs/ojkoshared', 'ojs/ojcore', 'ojs/ojlogger', '
       var topProp = splitProps[0];
       var listener = function (evt) {
         if (!_isSettingProperty(topProp)) {
-          var written = false;
-          var reason;
+          let failure;
+          let writer;
           ko.ignoreDependencies(function () {
             var value = evt.detail.value;
             // If the propName has '.' we need to walk the top level value and writeback
@@ -2209,34 +2209,40 @@ define(['jqueryui-amd/widget', 'ojs/ojkoshared', 'ojs/ojcore', 'ojs/ojlogger', '
 
             if (ko.isObservable(target)) {
               if (ko.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) {
-              Logger.info(
-                "The expression '%s' for property '%s' was not updated because %s.",
-                expr,
+            if (!writer) {
+              if (failure) {
+                Logger.info(
+                  "The expression '%s' for property '%s' was not updated because %s.",
+                  expr,
+                  propName,
+                  failure
+                );
+              }
+            } else {
+              ojmonitoring.performMonitoredWriteback(
                 propName,
-                reason
+                writer,
+                evt,
+                ComponentBinding.__cloneIfArray(value)
               );
             }
-          }
+          });
         }
       };
 

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

@@ -53,6 +53,10 @@ define(['exports', 'ojs/ojdvt-toolkit'], function (exports, dvt) { 'use strict';
         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 @@ define(['exports', 'ojs/ojdvt-toolkit'], function (exports, dvt) { 'use strict';
         _sectionTitleStyle: new dvt.CSSStyle(
           dvt.BaseComponentDefaults.FONT_FAMILY_ALTA_11 + 'color: #737373;'
         ),
-        titleHalign: 'start',
+        titleHalign: '',
         hiddenCategories: [],
         hideAndShowBehavior: 'off',
         hoverBehavior: 'none',
@@ -1334,9 +1338,13 @@ define(['exports', 'ojs/ojdvt-toolkit'], function (exports, dvt) { 'use strict';
       // Create the title object and add to legend
       var title = new dvt.OutputText(context, titleStr, availSpace.x, availSpace.y);
       var titleStyle = options['titleStyle'];
+      const isEmptySectionTitleStyle = DvtLegendUtils.isEmpty(options.sectionTitleStyle);
+
+      if (!isEmptySectionTitleStyle) titleStyle = new dvt.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 dvt.CSSStyle(section['titleStyle']))
           : defaultStyle;
@@ -1366,7 +1374,9 @@ define(['exports', 'ojs/ojdvt-toolkit'], function (exports, dvt) { 'use strict';
           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);