@oracle/oraclejet 15.0.4 → 15.1.0

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

@@ -99,6 +99,18 @@ var __oj_legend_metadata =
       ],
       "value": "asNeeded"
     },
+    "sectionTitleHalign": {
+      "type": "string",
+      "enumValues": [
+        "center",
+        "end",
+        "start"
+      ]
+    },
+    "sectionTitleStyle": {
+      "type": "object",
+      "value": {}
+    },
     "sections": {
       "type": "Array<Object>"
     },
@@ -378,8 +390,7 @@ var __oj_legend_section_metadata =
         "center",
         "end",
         "start"
-      ],
-      "value": "start"
+      ]
     },
     "textStyle": {
       "type": "object",
@@ -520,6 +531,8 @@ var __oj_legend_section_metadata =
    * @property {"center"|"end"|"start"} [titleHalign="start"] The horizontal alignment of the section title. If the section is collapsible or nested, only start alignment is supported.
    * @property {Object=} titleStyle The CSS style object defining the style of the section title. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
    * @ojdeprecated {since: '14.1.0', description: 'This attribute is deprecated. Applications should use the expanded API on oj-legend instead', target: 'property', for: 'expanded' }
+   * @ojdeprecated {since: '15.1.0', description: 'Individual section title alignment is no longer supported. Use section-title-halign in oj-legend to align all section titles', target: 'property', for: 'titleHalign' }
+   * @ojdeprecated {since: '15.1.0', description: 'Individual section title style is no longer supported. Use section-title-style in oj-legend to style all section titles', target: 'property', for: 'titleStyle' }
    * @ojsignature [{target: "Type", value: "K", for: "id"},
    *               {target: "Type", value: "Array.<oj.ojLegend.Item<K>>", for: "items", jsdocOverride: true},
    *               {target: "Type", value: "Array.<oj.ojLegend.Section<K>>", for: "sections", jsdocOverride: true},
@@ -781,15 +794,6 @@ var __oj_legend_section_metadata =
    * </pre>
    *
    * {@ojinclude "name":"migrationDoc"}
-   * To migrate from oj-legend-section to oj-c-legend-section, you need to revise the import statement and references to oj-legend-section in your app. Please note the changes between the two components below.
-   * <h5>oj-legend-section's text-align attribute</h5>
-   * <p>
-   * Individual section title alignment is no longer supported. Use title-align in oj-c-legend to align all section titles.
-   * </p>
-   * <h5>oj-legend-section's text-style attribute</h5>
-   * <p>
-   * Individual section title style is no longer supported. Use title-style in oj-c-legend to style all section titles.
-   * </p>
    * To migrate from oj-legend-item to oj-c-legend-item, you need to revise the import statement and references to oj-legend-item in your app. Please note the changes between the two components below.
    * <h5> oj-legend-item's marker-shape attribute</h5>
    * <p>
@@ -1267,7 +1271,35 @@ var __oj_legend_section_metadata =
        * // setter
        * myComponent.trackResize="off";
        */
-      trackResize: 'on'
+      trackResize: 'on',
+
+      /**
+       * The CSS style object defining the style of the section titles' text.
+       * The following style properties are supported: color, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
+       * @expose
+       * @name sectionTitleStyle
+       * @ojshortdesc The CSS style object defining the style of the section titles' text.
+       * @memberof oj.ojLegend
+       * @instance
+       * @type {Object=}
+       * @default  {}
+       * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
+       */
+      sectionTitleStyle: {},
+
+      /**
+       * The horizontal alignment of the section titles.
+       * @expose
+       * @name sectionTitleHalign
+       * @ojshortdesc The horizontal alignment of the section titles.
+       * @memberof oj.ojLegend
+       * @instance
+       * @type {string=}
+       * @ojvalue {string} "center" The section title will be center aligned.
+       * @ojvalue {string} "end" The section title will be end aligned.
+       * @ojvalue {string} "start" The section title will be start aligned.
+       */
+      sectionTitleHalign: 'start'
     },
 
     _CreateDvtComponent: function (context, callback, callbackObj) {
@@ -1907,14 +1939,6 @@ var __oj_legend_section_metadata =
    * <p>
    * For the initial versions of oj-c-legend and oj-c-legend-section, collapsible attribute is not supported.
    * </p>
-   * <h5>text-align attribute</h5>
-   * <p>
-   * Individual section title alignment is no longer supported. Use title-align in oj-c-legend to align all section titles. Currently not supported in corepack.
-   * </p>
-   * <h5>text-style attribute</h5>
-   * <p>
-   * Individual section title style is no longer supported. Use title-style in oj-c-legend to style all section titles. Currently not supported in corepack.
-   * </p>
    * <h5>sectionTemplate slot</h5>
    * <p>
    * For the initial version of oj-c-legend, nested section is not supported. $current of sectionTemplate context will not contain parentKey and parentData properties.
@@ -1936,11 +1960,11 @@ var __oj_legend_section_metadata =
    * @name textHalign
    * @memberof! oj.ojLegendSection
    * @instance
+   * @ojdeprecated {since: '15.1.0', description: 'Individual section title alignment is no longer supported. Use section-title-halign in oj-legend to align all section titles'}
    * @type {string=}
    * @ojvalue {string} "center" The section title will be center aligned.
    * @ojvalue {string} "end" The section title will be end aligned.
    * @ojvalue {string} "start" The section title will be start aligned.
-   * @default "start"
    */
   /**
    * The CSS style object defining the style of the section title.
@@ -1949,6 +1973,7 @@ var __oj_legend_section_metadata =
    * @name textStyle
    * @memberof! oj.ojLegendSection
    * @instance
+   * @ojdeprecated {since: '15.1.0', description: 'Individual section title style is no longer supported. Use section-title-style in oj-legend to style all section titles'}
    * @type {Object=}
    * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
    * @default {}

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

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright (c) 2014, 2023, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+define(['exports'], function (exports) { 'use strict';
+
+    const _MONITORS = {};
+    const _WRITEBACK_MONITOR = Symbol();
+    function getWritebackMonitor() {
+        return _MONITORS[_WRITEBACK_MONITOR];
+    }
+    function setWritebackMonitor(monitor) {
+        _MONITORS[_WRITEBACK_MONITOR] = monitor;
+    }
+    function performMonitoredWriteback(propName, writer, event, newValue) {
+        if (writer) {
+            const monitor = getWritebackMonitor();
+            if (monitor) {
+                monitor(propName, event, writer.bind(null, newValue));
+            }
+            else {
+                writer(newValue);
+            }
+        }
+    }
+
+    exports.getWritebackMonitor = getWritebackMonitor;
+    exports.performMonitoredWriteback = performMonitoredWriteback;
+    exports.setWritebackMonitor = setWritebackMonitor;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+});

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

@@ -6770,6 +6770,7 @@ var __oj_tab_bar_metadata =
       if (this._navlistHandler._isTabBar() && readingDirection === 'rtl') {
         margin = overFlowMenuButtonComputedStyle.marginRight;
       }
+
       overflowItemWidth = rect.width + parseInt(margin, 10);
     }
     // Since this is last item it does not have a margin added to item edge

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

@@ -190,13 +190,14 @@ define(['exports', 'ojs/ojeventtarget', 'ojs/ojdataprovider', 'ojs/ojset', 'ojs/
      * @property {string} fetchType - Type of fetch that was made
      * @property {Object} options - Options passed in to RESTDataProvider
      * @property {TypeError} error - TypeError returned from fetch call
-     * @property {TypeError} err - TypeError returned from fetch call
+     * @property {TypeError} err - TypeError returned from fetch call (Deprecated use error instead)
      * @property {Object} fetchParameters - FetchParams passed into the fetch call
      * @ojsignature [
      *  {target: "Type", value: "<K, D>", for: "genericTypeParameters"},
      *  {target: "Type", value: "'fetchFirst' | 'fetchByKeys' | 'fetchByOffset'", for: "fetchType"},
      *  {target: "Type", value: "RESTDataProvider.Options<K, D>", for: "options"},
      *  {target: "Type", value: "FetchListParameters<D> | FetchByKeysParameters<K> | FetchByOffsetParameters<D>", for: "fetchParameters"}]
+     * @ojdeprecated [{target:'propertyValue', for:"err", since: "15.1.0", description: "Use Error instead."}]
      */
 
     /**
@@ -495,7 +496,7 @@ define(['exports', 'ojs/ojeventtarget', 'ojs/ojdataprovider', 'ojs/ojset', 'ojs/
             const signal = this.options.fetchParameters.signal;
             try {
                 const response = await fetch(request, { signal: signal });
-                return this._parseResponse(response);
+                return await this._parseResponse(response);
             }
             catch (err) {
                 if (this.options.errorHandler) {
@@ -513,9 +514,14 @@ define(['exports', 'ojs/ojeventtarget', 'ojs/ojdataprovider', 'ojs/ojset', 'ojs/
                             fetchType: this.options.fetchType,
                             fetchParameters: this.options.fetchParameters,
                             options: this.options.options,
-                            error: err,
-                            err: err
+                            error: err
                         };
+                        Object.defineProperty(errorContext, 'err', {
+                            get() {
+                                return errorContext.error;
+                            },
+                            enumerable: true
+                        });
                         this.options.errorHandler(errorContext);
                     }
                 }

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

@@ -7918,14 +7918,25 @@ var __oj_table_metadata =
           this._applyForcedColumnWidth(bufferCell, bufferCellWidth);
         }
 
-        // if first row is in edit mode then fetching cell style from second row
-        if (this._table._editableRowIdx === 0 && tableBodyRows.length > 1) {
-          tableBodyCell = this._table._getTableBodyCell(1, i, null);
-        } else {
-          tableBodyCell = this._table._getTableBodyCell(0, i, null);
+        // update 'add row' cell widths
+        var addRowRow = this._table._getPlaceHolderRow();
+        if (addRowRow != null) {
+          var addRowCell = this._table._getColspanLogicalElements(
+            this._table._getPlaceHolderRowCells(addRowRow)
+          )[i];
+          if (addRowCell != null) {
+            var addRowCellWidth = this._getForcedColumnWidth(
+              addRowCell,
+              window.getComputedStyle(addRowCell),
+              columnWidth
+            );
+            this._applyForcedColumnWidth(addRowCell, addRowCellWidth);
+          }
         }
-        if (tableBodyCell != null) {
-          if (!this._table._hasRowOrCellRendererOrTemplate(i)) {
+
+        if (!this._table._hasRowOrCellRendererOrTemplate(i)) {
+          tableBodyCell = this._table._getTableBodyCell(0, i);
+          if (tableBodyCell != null) {
             columnCellCompStyle = window.getComputedStyle(tableBodyCell);
             forcedColumnCellWidth = this._getForcedColumnWidth(
               tableBodyCell,
@@ -7933,20 +7944,20 @@ var __oj_table_metadata =
               columnWidth
             );
           }
-          for (var j = 0; j < tableBodyRows.length; j++) {
-            tableBodyCell = this._table._getTableBodyCell(j, i, null);
-            if (tableBodyCell != null) {
-              if (columnCellCompStyle == null) {
-                var cellCompStyle = window.getComputedStyle(tableBodyCell);
-                var forcedCellWidth = this._getForcedColumnWidth(
-                  tableBodyCell,
-                  cellCompStyle,
-                  columnWidth
-                );
-                this._applyForcedColumnWidth(tableBodyCell, forcedCellWidth);
-              } else {
-                this._applyForcedColumnWidth(tableBodyCell, forcedColumnCellWidth);
-              }
+        }
+        for (var j = 0; j < tableBodyRows.length; j++) {
+          tableBodyCell = this._table._getTableBodyLogicalCells(j)[i];
+          if (tableBodyCell != null) {
+            if (columnCellCompStyle == null) {
+              var cellCompStyle = window.getComputedStyle(tableBodyCell);
+              var forcedCellWidth = this._getForcedColumnWidth(
+                tableBodyCell,
+                cellCompStyle,
+                columnWidth
+              );
+              this._applyForcedColumnWidth(tableBodyCell, forcedCellWidth);
+            } else {
+              this._applyForcedColumnWidth(tableBodyCell, forcedColumnCellWidth);
             }
           }
         }
@@ -8013,12 +8024,7 @@ var __oj_table_metadata =
       : this._getPixelStyleEquivalent(columns[columnIndex].maxWidth);
     if (colTestWidth != null) {
       headerCell = this._table._getTableHeaderColumn(columnIndex);
-      // if first row is in edit mode then fetching cell style from second row
-      if (this._table._editableRowIdx === 0 && rowsCount > 1) {
-        tableBodyCell = this._table._getTableBodyCell(1, columnIndex, null);
-      } else if (rowsCount > 0) {
-        tableBodyCell = this._table._getTableBodyCell(0, columnIndex, null);
-      }
+      tableBodyCell = this._table._getTableBodyLogicalCells(0)[columnIndex];
       footerCell = this._table._getTableFooterCell(columnIndex);
 
       if (headerCell != null) {
@@ -8054,30 +8060,43 @@ var __oj_table_metadata =
           this._applyForcedColumnWidth(bufferCell, bufferCellWidth);
         }
 
-        // update column table body cell widths
-        if (tableBodyCell != null) {
-          if (!this._table._hasRowOrCellRendererOrTemplate(columnIndex)) {
-            columnCellCompStyle = window.getComputedStyle(tableBodyCell);
-            forcedColumnCellWidth = this._getForcedColumnWidth(
-              tableBodyCell,
-              columnCellCompStyle,
+        // update 'add row' cell widths
+        var addRowRow = this._table._getPlaceHolderRow();
+        if (addRowRow != null) {
+          var addRowCell = this._table._getColspanLogicalElements(
+            this._table._getPlaceHolderRowCells(addRowRow)
+          )[columnIndex];
+          if (addRowCell != null) {
+            var addRowCellWidth = this._getForcedColumnWidth(
+              addRowCell,
+              window.getComputedStyle(addRowCell),
               colTestWidth
             );
+            this._applyForcedColumnWidth(addRowCell, addRowCellWidth);
           }
-          for (var i = 0; i < rowsCount; i++) {
-            tableBodyCell = this._table._getTableBodyCell(i, columnIndex, null);
-            if (tableBodyCell != null) {
-              if (columnCellCompStyle == null) {
-                var cellCompStyle = window.getComputedStyle(tableBodyCell);
-                var forcedCellWidth = this._getForcedColumnWidth(
-                  tableBodyCell,
-                  cellCompStyle,
-                  colTestWidth
-                );
-                this._applyForcedColumnWidth(tableBodyCell, forcedCellWidth);
-              } else {
-                this._applyForcedColumnWidth(tableBodyCell, forcedColumnCellWidth);
-              }
+        }
+
+        if (!this._table._hasRowOrCellRendererOrTemplate(columnIndex) && tableBodyCell != null) {
+          columnCellCompStyle = window.getComputedStyle(tableBodyCell);
+          forcedColumnCellWidth = this._getForcedColumnWidth(
+            tableBodyCell,
+            columnCellCompStyle,
+            colTestWidth
+          );
+        }
+        for (var i = 0; i < rowsCount; i++) {
+          tableBodyCell = this._table._getTableBodyLogicalCells(i)[columnIndex];
+          if (tableBodyCell != null) {
+            if (columnCellCompStyle == null) {
+              var cellCompStyle = window.getComputedStyle(tableBodyCell);
+              var forcedCellWidth = this._getForcedColumnWidth(
+                tableBodyCell,
+                cellCompStyle,
+                colTestWidth
+              );
+              this._applyForcedColumnWidth(tableBodyCell, forcedCellWidth);
+            } else {
+              this._applyForcedColumnWidth(tableBodyCell, forcedColumnCellWidth);
             }
           }
         }
@@ -11023,12 +11042,14 @@ var __oj_table_metadata =
         isResetTableElemStyle = true;
         var headerSelector = this._table._getTableSelectorColumn();
         if (headerSelector != null) {
-          this._selectorColWidth = headerSelector.offsetWidth;
+          // offsetWidth does not include partial px values, so bounding rect should be used
+          this._selectorColWidth = headerSelector.getBoundingClientRect().width;
         } else {
           var tableBodyRow = this._table._getTableBodyRow(0);
           var selectorCell = this._table._getTableBodySelectorCell(tableBodyRow);
           if (selectorCell != null) {
-            this._selectorColWidth = selectorCell.offsetWidth;
+            // offsetWidth does not include partial px values, so bounding rect should be used
+            this._selectorColWidth = selectorCell.getBoundingClientRect().width;
           }
         }
       }
@@ -11101,12 +11122,14 @@ var __oj_table_metadata =
         // find column header cell width
         var headerCell = this._table._getTableHeaderColumn(i);
         if (headerCell != null) {
-          this._columnInitWidths[i] = headerCell.offsetWidth;
+          // offsetWidth does not include partial px values, so bounding rect should be used
+          this._columnInitWidths[i] = headerCell.getBoundingClientRect().width;
         } else {
           // find column table body cell widths
           var tableBodyCell = this._table._getTableBodyCell(0, i, null);
           if (tableBodyCell != null) {
-            this._columnInitWidths[i] = tableBodyCell.offsetWidth;
+            // offsetWidth does not include partial px values, so bounding rect should be used
+            this._columnInitWidths[i] = tableBodyCell.getBoundingClientRect().width;
           }
         }
       }

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

@@ -42,6 +42,52 @@ define(['ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojdvt-base', 'o
    *
    */
 
+  /**
+   * <h3 id="migration-section">
+   *   Migration
+   *   <a class="bookmarkable-link" title="Bookmarkable Link" href="#migration-section"></a>
+   * </h3>
+   * To migrate from oj-tagcloud to oj-c-tagcloud, you need to revise the import statement and references to oj-tagcloud in your app.
+   * <h5>componentElement in ItemTemplateContext</h5>
+   * <p>
+   * componentElement is not support in oj-c-tag-cloud.
+   * </p>
+   * <h5>animaton-on-data-change attribute</h5>
+   * <p>
+   * For the initial version of oj-c-tagcloud, animaton-on-data-change attribute is not supported. We plan on supporting this use case in a future release.
+   * </p>
+   * <h5>animation-on-diaplay attribute</h5>
+   * <p>
+   * For the initial version of oj-c-tagcloud, animation-on-diaplay attribute is not supported. We plan on supporting this use case in a future release.
+   * </p>
+   * <h5>style-defaults.animation-duration attribute</h5>
+   * <p>
+   * For the initial version of oj-c-tagcloud, animation-duration attribute is not supported. We plan on supporting this use case in a future release.
+   * </p>
+   * <h5>tooltip attribute</h5>
+   * <p>
+   * For initial version of oj-c-tagcloud, use datatip instead of tooltip. Support of complex datatip usecase will be handled in a future release.
+   * </p>
+   * <h5>touch-response attribute</h5>
+   * <p>
+   * For the initial version of oj-c-tagcloud, touch-response attribute is not supported. We plan on supporting this use case in a future release.
+   * </p>
+   * <h5>contextMenu slot</h5>
+   * <p>
+   * For the initial version of oj-c-tag-cloud, contextMenu slot is not supported. We plan on supporting this use case in a future release.
+   * </p>
+   * <h5>getContextByNode method</h5>
+   * <p>
+   * For the initial version of oj-c-tag-cloud, getContextByNode method is not supported. We plan on supporting this use case in a future release.
+   * </p>
+   * <h5>oj-tag-cloud-item's svg-class-name attribute</h5>
+   * <p>
+   * For the inital version of oj-c-tag-cloud-item, svg-class-name is not supported. We plan on supporting this use case in a future release.
+   * </p>
+   * @ojfragment migrationDoc
+   * @memberof oj.ojTagCloud
+   */
+
   /**
    * <table class="keyboard-table">
    *   <thead>
@@ -341,6 +387,15 @@ define(['ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojdvt-base', 'o
    * &lt;/oj-tag-cloud>
    * </code>
    * </pre>
+   * <h3 id="migration-section">
+   *   Migration
+   *   <a class="bookmarkable-link" title="Bookmarkable Link" href="#migration-section"></a>
+   * </h3>
+   * To migrate from oj-tag-cloud-item to oj-c-tag-cloud-item, you need to revise the import statement and references to oj-tag-cloud-item in your app. Please note the changes between the two components below.
+   * <h5>svg-class-name attribute</h5>
+   * <p>
+   * For the inital version of oj-c-tag-cloud-item, svg-class-name is not supported. We plan on supporting this use case in a future release.
+   * </p>
    */
   /**
    * An array of category strings corresponding to the tag cloud items. This allows highlighting and filtering of items.
@@ -798,6 +853,8 @@ var __oj_tag_cloud_item_metadata =
    * in the default value ramp provided by oj.ColorAttributeGroupHandler
    * will meet minimum contrast requirements.</p>
    *
+   * {@ojinclude "name":"migrationDoc"}
+   *
    * <h3 id="touch-section">
    *   Touch End User Information
    *   <a class="bookmarkable-link" title="Bookmarkable Link" href="#touch-section"></a>

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

@@ -3506,6 +3506,8 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
         if (titleText) {
           maxWidth = Math.min(titleDim.w, maxWidth);
           dvt.TextUtils.fitText(titleText, maxTextWidth, Infinity, container);
+        } else {
+          maxWidth = 0;
         }
         if (descText) {
           maxWidth = Math.min(Math.max(descDim.w, maxWidth), maxTextWidth);
@@ -3554,6 +3556,8 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
         if (title) {
           offsetX = Math.min(titleDim.w, offsetX);
           dvt.TextUtils.fitText(titleText, maxTextWidth, Infinity, container);
+        } else {
+          offsetX = Math.min(0, offsetX);
         }
 
         if (desc) {

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

@@ -169,12 +169,12 @@ define(['ojs/ojcore-base', 'jquery', 'ojs/ojthemeutils', 'ojs/ojcomponentcore',
     //                   Slots
     //-----------------------------------------------------
     /**
-     * <p>The &lt;oj-toolbar> element accepts <code class="prettyprint">oj-button</code>, <code class="prettyprint">oj-buttonset-many</code>,
+     * <p>The &lt;oj-toolbar> element accepts <code class="prettyprint">oj-button</code>, <code class="prettyprint">oj-c-button</code>, <code class="prettyprint">oj-buttonset-many</code>,
      * <code class="prettyprint">oj-buttonset-one</code>, <code class="prettyprint">oj-menu-button</code> and non-focusable content such as separator icon elements as children.</p>
      *
      * @ojchild Default
      * @memberof oj.ojToolbar
-     * @ojpreferredcontent ["ButtonElement","ButtonsetManyElement","ButtonsetOneElement","MenuButtonElement"]
+     * @ojpreferredcontent ["ButtonElement", "CButtonElement", "ButtonsetManyElement","ButtonsetOneElement","MenuButtonElement"]
      *
      * @example <caption>Initialize the Toolbar with child content specified:</caption>
      * &lt;oj-toolbar>
@@ -296,6 +296,11 @@ define(['ojs/ojcore-base', 'jquery', 'ojs/ojthemeutils', 'ojs/ojcomponentcore',
       const _OJ_TOOLBAR = 'oj-toolbar';
       const _OJ_MENU_BUTTON = 'OJ-MENU-BUTTON';
       const _OJ_BUTTON = 'OJ-BUTTON';
+      const _OJ_C_BUTTON = 'OJ-C-BUTTON';
+      const _ELEM_LIST =
+        'oj-button, oj-menu-button, oj-buttonset-one, oj-buttonset-many, oj-c-button';
+      const _BUTTON_LIST =
+        'oj-button, oj-menu-button, oj-buttonset-one .oj-button, oj-buttonset-many .oj-button, oj-c-button, oj-buttonset-one .oj-c-button, oj-buttonset-many .oj-c-button';
 
       oj.__registerWidget('oj.ojToolbar', $.oj.baseComponent, {
         widgetEventPrefix: 'oj',
@@ -493,9 +498,7 @@ define(['ojs/ojcore-base', 'jquery', 'ojs/ojthemeutils', 'ojs/ojcomponentcore',
             }
 
             // find any current supported children to refresh in case they were already initialized and need to update their 'chroming' values
-            this.topLevelChildren = elem.querySelectorAll(
-              'oj-button, oj-menu-button, oj-buttonset-one, oj-buttonset-many'
-            );
+            this.topLevelChildren = elem.querySelectorAll(_ELEM_LIST);
 
             // refresh the top-level buttons, and refresh the buttonsets to make them refresh their buttons, so that all toolbar buttons are refreshed.
             // Reason: to make them re-fetch their chroming option, in case it's still set to the default dynamic getter,
@@ -553,12 +556,16 @@ define(['ojs/ojcore-base', 'jquery', 'ojs/ojthemeutils', 'ojs/ojcomponentcore',
         },
 
         // For custom element only, return if a button with oj-button class is disabled.
-        // This can either be an oj-button, oj-menu-button, or a span inside oj-buttonset-*.
+        // This can either be an oj-button, oj-c-button, oj-menu-button, or a span inside oj-buttonset-*.
         // We check the disabled property on custom elements instead of oj-disabled class because
         // there is delay between setting the property and having the class updated.
         _isButtonDisabled: function (button) {
           var disabled;
-          if (button.tagName === _OJ_BUTTON || button.tagName === _OJ_MENU_BUTTON) {
+          if (
+            button.tagName === _OJ_BUTTON ||
+            button.tagName === _OJ_C_BUTTON ||
+            button.tagName === _OJ_MENU_BUTTON
+          ) {
             disabled = button.disabled;
           } else {
             // "button" is a span around an oj-option that represents a button in oj-buttonset-one or oj-buttonset-many
@@ -583,14 +590,13 @@ define(['ojs/ojcore-base', 'jquery', 'ojs/ojthemeutils', 'ojs/ojcomponentcore',
           elem.removeEventListener('focusin', this._focusinListener, true);
           this._hasInitialFocusHandler = false;
 
-          this.topLevelChildren = elem.querySelectorAll(
-            'oj-button, oj-menu-button, oj-buttonset-one, oj-buttonset-many'
-          );
+          this.topLevelChildren = elem.querySelectorAll(_ELEM_LIST);
 
           // Add a MutationObserver to handle add and remove of descendants
           if (!this._mutationObserver) {
             var ojElementNames = [
               _OJ_BUTTON,
+              _OJ_C_BUTTON,
               _OJ_MENU_BUTTON,
               'OJ-BUTTONSET-ONE',
               'OJ-BUTTONSET-MANY',
@@ -630,18 +636,14 @@ define(['ojs/ojcore-base', 'jquery', 'ojs/ojthemeutils', 'ojs/ojcomponentcore',
           }
 
           // Toolbar custom element can listen to disabledChanged event on descendants to refresh itself
-          var ojElements = elem.querySelectorAll(
-            'oj-button, oj-menu-button, oj-buttonset-one, oj-buttonset-many, oj-option'
-          );
+          var ojElements = elem.querySelectorAll(_ELEM_LIST);
           ojElements.forEach(function (ojElement) {
             // This can be called on the same element more than once, so try to remove any listener first
             ojElement.removeEventListener(disabledChangedEventType, self._disabledChangedListener);
             ojElement.addEventListener(disabledChangedEventType, self._disabledChangedListener);
           });
 
-          var buttons = elem.querySelectorAll(
-            'oj-button, oj-menu-button, oj-buttonset-one .oj-button, oj-buttonset-many .oj-button'
-          );
+          var buttons = elem.querySelectorAll(_BUTTON_LIST);
           this.$buttons = $(buttons)
             .off('keydown' + this.eventNamespace)
             .on('keydown' + this.eventNamespace, function (event) {
@@ -698,11 +700,7 @@ define(['ojs/ojcore-base', 'jquery', 'ojs/ojthemeutils', 'ojs/ojcomponentcore',
           var self = this;
           // We need to re-select buttons because with refresh buttons in toolbar may be added/deleted.
           if (this._IsCustomElement()) {
-            this.$buttons = $(
-              this.element[0].querySelectorAll(
-                'oj-button, oj-menu-button, oj-buttonset-one .oj-button, oj-buttonset-many .oj-button'
-              )
-            );
+            this.$buttons = $(this.element[0].querySelectorAll(_BUTTON_LIST));
           } else {
             this.$buttons = this.element.find(':oj-button');
           }
@@ -867,6 +865,7 @@ define(['ojs/ojcore-base', 'jquery', 'ojs/ojthemeutils', 'ojs/ojcomponentcore',
 
         // No return value.
         _handleKeyDown: function (event, $button) {
+          var self = this;
           // Private, not an override (not in base class).  Method name unquoted so will be safely optimized (renamed) by GCC as desired.
           switch (event.which) {
             case $.ui.keyCode.UP: // up arrow
@@ -882,7 +881,7 @@ define(['ojs/ojcore-base', 'jquery', 'ojs/ojthemeutils', 'ojs/ojcomponentcore',
               // reselect enabled buttons
               if (this._IsCustomElement()) {
                 this.$enabledButtons = this.$buttons.filter(function () {
-                  return !$(this).hasClass('oj-disabled') && $(this).is(':visible');
+                  return !self._isButtonDisabled(this) && $(this).is(':visible');
                 });
               } else {
                 this.$enabledButtons = this.$buttons.filter(function () {
@@ -956,7 +955,11 @@ define(['ojs/ojcore-base', 'jquery', 'ojs/ojthemeutils', 'ojs/ojcomponentcore',
             // This relies on the button and buttonset components being implemented with JQUI - this will need to be revisited once that is no longer the case
             for (var i = 0; i < this.topLevelChildren.length; i++) {
               var child = this.topLevelChildren[i];
-              if (child.tagName === _OJ_BUTTON || child.tagName === _OJ_MENU_BUTTON) {
+              if (
+                child.tagName === _OJ_BUTTON ||
+                child.tagName === _OJ_C_BUTTON ||
+                child.tagName === _OJ_MENU_BUTTON
+              ) {
                 // must check to make sure the child button element has been initialized
                 if (Components.__GetWidgetConstructor(this._getButtonFocusElem(child), 'ojButton')) {
                   child.refresh();

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

@@ -3272,9 +3272,7 @@ define(['require', 'ojs/ojcore-base', 'jquery', 'ojs/ojcontext', 'ojs/ojthemeuti
         return item.getAttribute('id');
       },
       _getUniqueItemId: function () {
-        return ojcustomelementUtils.ElementUtils.getUniqueId(this.element[0].getAttribute('id')).concat(
-          '_' + this._getTreeViewItemCount()
-        );
+        return ojcustomelementUtils.ElementUtils.getUniqueId() + '_' + this.element[0].getAttribute('id');
       },
       _getTreeViewItemCount: function () {
         return this._getItems().length;