@oracle/oraclejet 11.0.6 → 11.1.1

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

@@ -1333,7 +1333,7 @@ var __oj_gantt_row_metadata =
    *    See <a href="#formats-section">Date and Time Formats</a> for more details on required string formats, and see type for more details.
    * @property {string=} shortDesc The description of this object.
    *    This is used for accessibility and also for customizing the tooltip text.
-   * @ojsignature [{target: "Type", value: "?CSSStyleDeclaration", for: "svgStyle", jsdocOverride: true}]
+   * @ojsignature [{target: "Type", value: "?Partial<CSSStyleDeclaration>", for: "svgStyle", jsdocOverride: true}]
    */
   /**
    * @typedef {Object} oj.ojGantt.Row
@@ -3242,7 +3242,7 @@ var __oj_gantt_row_metadata =
            * @memberof! oj.ojGantt
            * @instance
            * @type {Object}
-           * @ojsignature {target: "Type", value: "?CSSStyleDeclaration", jsdocOverride: true}
+           * @ojsignature {target: "Type", value: "?Partial<CSSStyleDeclaration>", jsdocOverride: true}
            * @default {}
            */
           svgStyle: {},
@@ -3330,7 +3330,7 @@ var __oj_gantt_row_metadata =
              * @memberof! oj.ojGantt
              * @instance
              * @type {Object}
-             * @ojsignature {target: "Type", value: "?CSSStyleDeclaration", jsdocOverride: true}
+             * @ojsignature {target: "Type", value: "?Partial<CSSStyleDeclaration>", jsdocOverride: true}
              * @default {}
              */
             svgStyle: {}
@@ -3397,7 +3397,7 @@ var __oj_gantt_row_metadata =
              * @memberof! oj.ojGantt
              * @instance
              * @type {Object}
-             * @ojsignature {target: "Type", value: "?CSSStyleDeclaration", jsdocOverride: true}
+             * @ojsignature {target: "Type", value: "?Partial<CSSStyleDeclaration>", jsdocOverride: true}
              * @default {}
              */
             svgStyle: {}
@@ -4149,7 +4149,8 @@ var __oj_gantt_row_metadata =
           dependencyLineCustom: 'oj-gantt-dependency-line-custom',
           nodata: 'oj-gantt-no-data-message',
           hgridline: 'oj-gantt-horizontal-gridline',
-          vgridline: 'oj-gantt-vertical-gridline',
+          majorvgridline: 'oj-gantt-major-vertical-gridline',
+          minorvgridline: 'oj-gantt-minor-vertical-gridline',
           majorAxis: 'oj-gantt-major-axis',
           majorAxisTicks: 'oj-gantt-major-axis-separator',
           majorAxisLabels: 'oj-gantt-major-axis-label',
@@ -4161,8 +4162,10 @@ var __oj_gantt_row_metadata =
           task: 'oj-gantt-task',
           taskCustom: 'oj-gantt-task-custom',
           taskBar: 'oj-gantt-task-bar',
+          taskBackdrop: 'oj-gantt-task-backdrop',
           taskMilestone: 'oj-gantt-task-milestone',
           taskSummary: 'oj-gantt-task-summary',
+          taskSummaryProgress: 'oj-gantt-task-summary-progress',
           taskDragImage: 'oj-gantt-task-drag-image',
           taskResizeHandle: 'oj-gantt-task-resize-handle',
           baseline: 'oj-gantt-baseline',
@@ -4258,6 +4261,9 @@ var __oj_gantt_row_metadata =
 
       // @inheritdoc
       _GetChildStyleClasses: function () {
+        // border-radius temporarily replaced with border-top-left-radius due to the same reason tracked by
+        // JET-44647: Border-color css styles not being picked up through style bridge in Firefox
+
         var styleClasses = this._super();
 
         // animation duration
@@ -4366,18 +4372,23 @@ var __oj_gantt_row_metadata =
           },
           {
             path: 'taskDefaults/borderRadius',
-            property: 'border-radius'
+            property: 'border-top-left-radius'
           }
         ];
 
         styleClasses['oj-gantt-task-progress'] = {
           path: 'taskDefaults/progress/borderRadius',
-          property: 'border-radius'
+          property: 'border-top-left-radius'
         };
 
         styleClasses['oj-gantt-baseline'] = {
           path: 'taskDefaults/baseline/borderRadius',
-          property: 'border-radius'
+          property: 'border-top-left-radius'
+        };
+
+        styleClasses['oj-gantt-baseline-milestone'] = {
+          path: '_resources/milestoneBaselineBorderRadius',
+          property: 'border-top-left-radius'
         };
 
         styleClasses['oj-gantt-baseline-bar'] = [
@@ -4406,9 +4417,8 @@ var __oj_gantt_row_metadata =
 
         // expand/collapse icon images
         // Add images
-        var rtl = this._GetReadingDirection() === 'rtl';
-        resources.closed = `oj-fwk-icon oj-fwk-icon-arrow-${rtl ? 'w' : 'e'}`;
-        resources.open = `oj-fwk-icon oj-fwk-icon-arrow-${rtl ? 'sw' : 'se'}`;
+        resources.closed = 'oj-fwk-icon oj-fwk-icon-caret-end';
+        resources.open = 'oj-fwk-icon oj-fwk-icon-caret-s';
 
         // progress value converter for task tooltip
         resources.percentConverter = new ojconverterNumber.IntlNumberConverter({ style: 'percent' });

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

@@ -1462,7 +1462,7 @@ var __oj_status_meter_gauge_metadata =
            * @memberof! oj.ojLedGauge
            * @instance
            * @type {Object=}
-           * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+           * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
            * @default {}
            */
           style: {},
@@ -1545,7 +1545,7 @@ var __oj_status_meter_gauge_metadata =
            * @memberof! oj.ojLedGauge
            * @instance
            * @type {Object=}
-           * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+           * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
            * @default {}
            */
           style: {},
@@ -1650,7 +1650,7 @@ var __oj_status_meter_gauge_metadata =
          * @ojshortdesc The inline style to apply to the gauge. See the Help documentation for more information.
          * @instance
          * @type {Object=}
-         * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+         * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
          * @default {}
          */
         svgStyle: {},
@@ -1952,7 +1952,7 @@ var __oj_status_meter_gauge_metadata =
            * @ojshortdesc The inline style to apply to the changed state. See the Help documentation for more information.
            * @instance
            * @type {Object=}
-           * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+           * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
            * @default {}
            */
           svgStyle: {}
@@ -2041,7 +2041,7 @@ var __oj_status_meter_gauge_metadata =
            * @ojshortdesc The inline style to apply to the hover state. See the Help documentation for more information.
            * @instance
            * @type {Object=}
-           * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+           * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
            * @default {}
            */
           svgStyle: {}
@@ -2283,7 +2283,7 @@ var __oj_status_meter_gauge_metadata =
            * @ojshortdesc The inline style to apply to the selected state. See the Help documentation for more information.
            * @instance
            * @type {Object=}
-           * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+           * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
            * @default {}
            */
           svgStyle: {}
@@ -2426,7 +2426,7 @@ var __oj_status_meter_gauge_metadata =
            * @ojshortdesc The inline style to apply to the unselected state. See the Help documentation for more information.
            * @instance
            * @type {Object=}
-           * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+           * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
            * @default {}
            */
           svgStyle: {}
@@ -2830,7 +2830,7 @@ var __oj_status_meter_gauge_metadata =
            * @memberof! oj.ojStatusMeterGauge
            * @instance
            * @type {Object=}
-           * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+           * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
            * @default {}
            */
           style: {},
@@ -2991,7 +2991,7 @@ var __oj_status_meter_gauge_metadata =
            * @memberof! oj.ojStatusMeterGauge
            * @instance
            * @type {Object=}
-           * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+           * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
            * @default {}
            */
           style: {},
@@ -3134,7 +3134,7 @@ var __oj_status_meter_gauge_metadata =
            * @ojshortdesc The inline style to apply to the plot area. See the Help documentation for more information.
            * @instance
            * @type {Object=}
-           * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+           * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
            * @default {}
            */
           svgStyle: {}
@@ -3229,7 +3229,7 @@ var __oj_status_meter_gauge_metadata =
          * @ojshortdesc The inline style to apply to the gauge indicator. See the Help documentation for more information.
          * @instance
          * @type {Object=}
-         * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+         * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
          * @default {}
          */
         svgStyle: {},

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

@@ -530,6 +530,7 @@ define(['exports', 'ojs/ojdomutils', 'ojs/ojlistdataproviderview', 'ojs/ojcore-b
                 fetchedData: null,
                 labelIds: [],
                 fetchedInitial: false,
+                fetching: false,
                 loading: false,
                 focusedSuggestionIndex: -1,
                 activeDescendantId: null,
@@ -892,10 +893,19 @@ define(['exports', 'ojs/ojdomutils', 'ojs/ojlistdataproviderview', 'ojs/ojcore-b
             const dropdown = state.dropdownOpen
                 ? this._renderDropdown(props, state, displayValue, inputClasses, ariaLabel, listboxId, inputType, autocompleteFloatingElem)
                 : null;
+            const ariaLiveRegion = this._dataProvider ? this._renderAriaLiveRegion(state) : null;
             return (preact.h(ojvcomponent.Root, { id: id, ref: this._setRootElem, class: rootClasses, "aria-label": ariaLabel, onMouseDown: this._handleMousedown, onMouseEnter: this._handleMouseenter, onMouseLeave: this._handleMouseleave },
+                ariaLiveRegion,
                 textFieldContainer,
                 dropdown));
         }
+        _renderAriaLiveRegion(state) {
+            var _a;
+            const text = state.fetchedInitial && !state.fetching && ((_a = state.fetchedData) === null || _a === void 0 ? void 0 : _a.length) == 0
+                ? Translations.getTranslatedString('oj-ojInputSearch2.noSuggestionsFound')
+                : '\xa0';
+            return (preact.h("div", { id: 'oj-listbox-live-' + this._uniqueId, class: 'oj-helper-hidden-accessible oj-listbox-liveregion', "aria-live": 'polite' }, text));
+        }
         _renderDesktopMainTextFieldContainer(props, state, searchIcon, displayValue, inputClasses, ariaLabel, listboxId, inputType, autocompleteFloatingElem) {
             const containerClasses = 'oj-text-field-container oj-text-field-has-start-slot';
             return (preact.h("div", { role: 'presentation', class: containerClasses, id: this._getMainInputContainerId(), ref: this._setMainInputContainerElem },
@@ -1029,6 +1039,7 @@ define(['exports', 'ojs/ojdomutils', 'ojs/ojlistdataproviderview', 'ojs/ojcore-b
                     filterDef: { text: searchText }
                 });
             }
+            this._updateState({ fetching: true });
             if (!this._loadingTimer) {
                 const timer = TimerUtils.getTimer(this._showIndicatorDelay);
                 timer.getPromise().then(function (pending) {
@@ -1143,6 +1154,7 @@ define(['exports', 'ojs/ojdomutils', 'ojs/ojlistdataproviderview', 'ojs/ojcore-b
             if (this.state.loading) {
                 this._updateState({ loading: false });
             }
+            this._updateState({ fetching: false });
         }
         static _formatItemText(suggestionItemText, suggestionItemContext) {
             var _a;

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

@@ -898,6 +898,7 @@ var __oj_text_area_metadata =
       _TEXT_FIELD_MAX_LENGTH_REMAINING_KEY: 'accessibleMaxLengthRemaining',
       _TEXT_FIELD_MAX_LENGTH_EXCEEDED_KEY: 'accessibleMaxLengthExceeded',
       _counterSpanEl: null,
+      _ariaLiveTimer: null,
 
       options:
       {
@@ -2601,8 +2602,21 @@ var __oj_text_area_metadata =
 
         // Update the aria live element if it exists and the new content is different
         if (hiddenAriaLiveEl) {
-          var politeDiv = hiddenAriaLiveEl.children[0];
-          politeDiv.textContent = newAriaLiveContent;
+          // Only update the aria-live div when the user has paused for more than
+          // 500 milliseconds. That way, we avoid queued up aria-live messages which
+          // would be annoying and not helpful. The 500ms was agreed upon in the
+          // accessibility review meeting.
+          // We're going to do this in a cancellable setTimeout and only update
+          // this when the timeout resolves.  If new aria live content is available
+          // before the timeout resolves, cancel the timeout and start a new setTimeout.
+          if (this._ariaLiveTimer) {
+            clearTimeout(this._ariaLiveTimer);
+          }
+          this._ariaLiveTimer = setTimeout(() => {
+            var politeDiv = hiddenAriaLiveEl.children[0];
+            politeDiv.textContent = newAriaLiveContent;
+            this._ariaLiveTimer = null;
+          }, 500); // wait 500 milliseconds before updating aria live polite div
         }
       },
 

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

@@ -472,7 +472,7 @@ var __oj_legend_section_metadata =
   * @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},
-  *               {target: "Type", value: "CSSStyleDeclaration", for: "titleStyle", jsdocOverride: true},
+  *               {target: "Type", value: "Partial<CSSStyleDeclaration>", for: "titleStyle", jsdocOverride: true},
   *               {target: "Type", value: "<K>", for: "genericTypeParameters"}]
   */
 
@@ -499,8 +499,8 @@ var __oj_legend_section_metadata =
    * @property {"image"|"line"|"lineWithMarker"|"marker"} [symbolType="marker"] The type of legend symbol to display.
    * @property {string} text The legend item text.
    * @ojsignature [{target: "Type", value: "K", for: "id"},
-   *               {target: "Type", value: "CSSStyleDeclaration", for: "svgStyle", jsdocOverride: true},
-   *               {target: "Type", value: "CSSStyleDeclaration", for: "markerSvgStyle", jsdocOverride: true},
+   *               {target: "Type", value: "Partial<CSSStyleDeclaration>", for: "svgStyle", jsdocOverride: true},
+   *               {target: "Type", value: "Partial<CSSStyleDeclaration>", for: "markerSvgStyle", jsdocOverride: true},
    *               {target: "Type", value: "<K>", for: "genericTypeParameters"}]
    */
 
@@ -586,6 +586,11 @@ var __oj_legend_section_metadata =
     * @property {any} key The key of the current node
     * @property {Array} parentData  An array of data objects of the outermost to innermost parents of the node
     * @property {any} parentKey  The key of the parent node
+    * @ojsignature [{target:"Type", value:"<K = any, D = any>", for:"genericTypeParameters"},
+    * {target:"Type", value:"D", for:"data", jsdocOverride: true},
+    * {target:"Type", value:"K", for:"key", jsdocOverride: true},
+    * {target:"Type", value:"K", for:"parentKey", jsdocOverride: true},
+    * {target:"Type", value:"Array<D>", for:"parentData", jsdocOverride: true}]
     */
 
    /**
@@ -1118,7 +1123,7 @@ var __oj_legend_section_metadata =
          * @instance
          * @type {Object=}
          * @default  {}
-         * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+         * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
          *
          * @example <caption>Initialize the Legend with the <code class="prettyprint">text-style</code> attribute specified:</caption>
          * &lt;oj-legend text-style='{"fontSize":"12px"}'>&lt;/oj-legend>
@@ -1673,7 +1678,7 @@ var __oj_legend_section_metadata =
    * @ojshortdesc The inline style to apply to the legend item. The style class and inline style will override any other styling specified through the options. See the Help documentation for more information.
    * @instance
    * @type {Object=}
-   * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+   * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
    */
   /**
    * The CSS style class to apply to the marker of the legend item symbol. This style class and <code> marker-svg-style </code> will override any other styling specified for the marker. For tooltips and hover interactivity, it's recommended to also pass a representative color to the markerColor attribute.
@@ -1694,7 +1699,7 @@ var __oj_legend_section_metadata =
    * @ojshortdesc The inline style to apply to the marker. The style class and inline style will override any other styling specified through the options. See the Help documentation for more information.
    * @instance
    * @type {Object=}
-   * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+   * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
    */
   /**
    * The shape of the marker. Only applies if symbolType is "marker" or "lineWithMarker". Can take the name of a built-in shape or the SVG path commands for a custom shape. Does not apply if a custom image is specified.
@@ -1811,7 +1816,7 @@ var __oj_legend_section_metadata =
    * @memberof! oj.ojLegendSection
    * @instance
    * @type {Object=}
-   * @ojsignature {target: "Type", value: "CSSStyleDeclaration", jsdocOverride: true}
+   * @ojsignature {target: "Type", value: "Partial<CSSStyleDeclaration>", jsdocOverride: true}
    * @default {}
    */
   /**

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

@@ -1845,6 +1845,7 @@ var __oj_list_view_metadata =
       this.DestroyContentHandler(true);
       this._unregisterResizeListener(this.getListContainer());
       this._unregisterScrollHandler();
+      this.SetRootElementTabIndex();
       this._resetState();
     },
 
@@ -4925,14 +4926,22 @@ var __oj_list_view_metadata =
         this._setFocusoutBusyState();
         // set timeout to stay in editable/actionable mode if focus comes back into the listview
         this._focusoutTimeout = setTimeout(function () { // @HTMLUpdateOK
-          this._doBlur();
+          if (this.m_active == null || !this.m_active.elem.get(0).contains(document.activeElement)) {
+            this._doBlur();
+          }
           this._clearFocusoutBusyState();
         }.bind(this), 100);
 
         // event.relatedTarget would be null if focus out of page
         // the other check is to make sure the blur is not caused by shifting focus within listview
       } else if (!this._isFocusBlurTriggeredByDescendent(event) && !this.m_preActive) {
-        this._doBlur();
+        // when a blur is triggered by switching windows for example
+        // the activeElement remains the same, in such case, we don't want to
+        // change tabindex to ul as well otherwise when switched back to document
+        // the focus will get lost and assigned to body
+        if (this.m_active == null || !this.m_active.elem.get(0).contains(document.activeElement)) {
+          this._doBlur();
+        }
       }
     },
 
@@ -9704,8 +9713,8 @@ var __oj_list_view_metadata =
       },
       /**
        * Specifies the behavior when ListView needs to scroll to a position based on an item key.  This includes the case where 1) a value of
-       * scrollPosition attribute is specified with a key property, 2) ListView scrolls to the selection anchor during initial fetch and after
-       * a refresh has occurred.
+       * scrollPosition attribute is specified with a key property, 2) ListView scrolls to the selection anchor after a refresh has
+       occurred.
        *
        * @ojshortdesc Specifies the behavior when ListView needs to scroll to a position based on an item key.
        * @expose

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

@@ -3058,9 +3058,12 @@ define(['jquery', 'ojs/ojjquery-hammer', 'ojs/ojpopupcore', 'ojs/ojoption', 'ojs
             var openOptionsPosition =
               oj.PositionUtils.normalizeHorizontalAlignment(menuOpenOptions.position, this.isRtl);
 
-            const verticalOffset =
+            if (!openOptionsPosition.of && openOptionsPosition.offset &&
+                openOptionsPosition.offset.x === 0 && openOptionsPosition.offset.y === 0) {
+              const verticalOffset =
               ThemeUtils.getCachedCSSVarValues(['--oj-private-core-global-dropdown-offset'])[0] || 0;
-            openOptionsPosition.offset = { x: 0, y: verticalOffset };
+              openOptionsPosition.offset = { x: 0, y: verticalOffset };
+            }
 
             // convert the position option back to JQuery format if custom element menu or submenu
             if (this._IsCustomElement()) {

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

@@ -129,25 +129,82 @@ define(['ojs/ojcore-base', 'ojs/ojmap', 'ojs/ojset', 'ojs/ojdataprovider', 'ojs/
      */
 
     /**
-    * @typedef {Object} MutableArrayDataProvider.Options
-    * @property {MutableArrayDataProvider.SortComparators=} sortComparators - Optional sortComparators to use for sort.
-    * @property {SortCriterion=} implicitSort - Optional array of {@link SortCriterion} used to specify sort information when the data loaded into the dataprovider is already sorted.
-    * This is used for cases where we would like display some indication that the data is already sorted.
-    * For example, ojTable will display the column sort indicator for the corresponding column in either ascending or descending order upon initial render.
-    * This option is not used for cases where we want the MutableArrayDataProvider to apply a sort on initial fetch.
-    * For those cases, please wrap in a ListDataProviderView and set the sortCriteria property on it.
-    * @property {string=} keyAttributes - Optionally the field name which stores the key in the data. Can be a string denoting a single key attribute or an array
-    *                                                  of strings for multiple key attributes. Please note that the ids in MutableArrayDataProvider must always be unique. Please do not introduce duplicate ids, even during temporary mutation operations. @index causes MutableArrayDataProvider to use index as key and @value will cause MutableArrayDataProvider to
-    *                                                  use all attributes as key. @index is the default.
-    * @property {string=} textFilterAttributes - Optionally specify which attributes the filter should be applied on when a TextFilter filterCriteria is specified. If this option is not specified then the filter will be applied to all attributes.
-    * @ojsignature [
-    *  {target: "Type", value: "<D>", for: "genericTypeParameters"},
-    *  {target: "Type", value: "MutableArrayDataProvider.SortComparators<D>", for: "sortComparators"},
-    *  {target: "Type", value: "Array<SortCriterion<D>>", for: "implicitSort"},
-    *  {target: "Type", value: "string | string[]", for: "keyAttributes"},
-    *  {target: "Type", value: "string[]", for: "textFilterAttributes"},
-    * ]
-    */
+     * @typedef {Object} MutableArrayDataProvider.Options
+     * @property {MutableArrayDataProvider.SortComparators=} sortComparators - Optional sortComparator for custom sort.
+     * <p>
+     * Sort follows JavaScript's localeCompare <code>{numeric: true}</code>.
+     * Please check {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare#numeric_sorting|String.prototype.localeCompare()} for details.
+     * </p>
+     * <p>
+     * For numbers, we convert them into strings then compare them with localeCompare.
+     * If you want to sort floating point numbers correctly, sortComparator can be used to do a custom sort.
+     * </p>
+     * <p>
+     * For null and undefined values, we convert them into string which is 'null' and 'undefined'.
+     * The sorting behavior for undefined and null values will be changed in version 12.0.0.
+     * </p>
+     * <p>
+     * In version 12.0.0, null and undefined values will be considered as the largest values during sorting.
+     * </p>
+     * @property {SortCriterion=} implicitSort - Optional array of {@link SortCriterion} used to specify sort information when the data loaded into the dataprovider is already sorted.
+     * This is used for cases where we would like display some indication that the data is already sorted.
+     * For example, ojTable will display the column sort indicator for the corresponding column in either ascending or descending order upon initial render.
+     * This option is not used for cases where we want the MutableArrayDataProvider to apply a sort on initial fetch.
+     * For those cases, please wrap in a ListDataProviderView and set the sortCriteria property on it.
+     * @property {string=} keyAttributes - Optionally the field name which stores the key in the data. Can be a string denoting a single key attribute or an array
+     *                                                  of strings for multiple key attributes. Please note that the ids in MutableArrayDataProvider must always be unique. Please do not introduce duplicate ids, even during temporary mutation operations. @index causes MutableArrayDataProvider to use index as key and @value will cause MutableArrayDataProvider to
+     *                                                  use all attributes as key. @index is the default.
+     * @property {string=} textFilterAttributes - Optionally specify which attributes the filter should be applied on when a TextFilter filterCriteria is specified. If this option is not specified then the filter will be applied to all attributes.
+     * @ojsignature [
+     *  {target: "Type", value: "<D>", for: "genericTypeParameters"},
+     *  {target: "Type", value: "MutableArrayDataProvider.SortComparators<D>", for: "sortComparators"},
+     *  {target: "Type", value: "Array<SortCriterion<D>>", for: "implicitSort"},
+     *  {target: "Type", value: "string | string[]", for: "keyAttributes"},
+     *  {target: "Type", value: "string[]", for: "textFilterAttributes"},
+     * ]
+     * @ojtsexample <caption>Examples for sortComparator</caption>
+     * // Custom comparator for date
+     * let comparator = function (a, b) {
+     *    if (a === b) {
+     *      return 0;
+     *    }
+     *
+     *    var dateA = new Date(a).getTime();
+     *    var dateB = new Date(b).getTime();
+     *    return dateA > dateB ? 1 : -1;
+     * };
+     * // Then create an MutableArrayDataProvider object and set Date field to use the this comparator
+     * this.dataprovider = new MutableArrayDataProvider(JSON.parse(deptArray), {
+     *    keyAttributes: "DepartmentId",
+     *    sortComparators: { comparators: new Map().set("Date", comparator) },
+     * });
+     * @ojtsexample
+     * // Custom comparator for number
+     * let comparator = function (a, b) {
+     *    return a - b;
+     *  };
+     * // Then create an MutableArrayDataProvider object and set Date field to use the this comparator
+     * this.dataprovider = new MutableArrayDataProvider(JSON.parse(deptArray), {
+     *    keyAttributes: "DepartmentId",
+     *    sortComparators: { comparators: new Map().set("Date", comparator) },
+     * });
+     * @ojtsexample
+     * // Custom comparator for numnbers with null/undefined
+     * let comparator = function (a, b) {
+     *     if (a === null || a === undefined) {
+     *       return 1;
+     *     }
+     *     if (b === null || b === undefined) {
+     *       return -1;
+     *     }
+     *     return a - b;
+     *  };
+     * // Then create an MutableArrayDataProvider object and set Date field to use the this comparator
+     * this.dataprovider = new MutableArrayDataProvider(JSON.parse(deptArray), {
+     *    keyAttributes: "DepartmentId",
+     *    sortComparators: { comparators: new Map().set("Date", comparator) },
+     * });
+     */
 
     /**
      * @inheritdoc