@oracle/oraclejet 12.0.1 → 12.0.4

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

@@ -1287,10 +1287,11 @@ function coerceIsoString(value) {
 
 /**
  * Placed here to avoid duplicate code for ojdatepicker + ojtimepicker
- *
+ * @static
  * @ignore
  */
-function getImplicitDateTimeRangeValidator(options, converter, defaultStyleClass) {
+function getImplicitDateTimeRangeValidator(options, converter,
+  defaultStyleClass) {
   var translationKeys = {
     'oj-inputdatetime': 'datetime',
     'oj-inputtime': 'time',
@@ -1302,6 +1303,7 @@ function getImplicitDateTimeRangeValidator(options, converter, defaultStyleClass
     { category: 'messageDetail', entries: ['rangeUnderflow', 'rangeOverflow'] },
     { category: 'messageSummary', entries: ['rangeUnderflow', 'rangeOverflow'] }
   ];
+
   var dateTimeRangeOptions = {
     min: options.min,
     max: options.max,
@@ -1398,6 +1400,33 @@ function _getMetaData(dayMetaData, position, params) {
   return new IntlDateTimeConverter({ day: '2-digit', month: '2-digit', year: _yearFormat });
 }
 
+/**
+ * @static
+ * @private
+ */
+  function _getConverterTimezone(converter) {
+  const converterOptions =
+    converter && converter.resolvedOptions ? converter.resolvedOptions() : null;
+  return converterOptions && converterOptions.timeZone ? converterOptions.timeZone : null;
+}
+
+/**
+ * This takes an isoDate and returns the iso date that is local to the place of the timezone,
+ * but without the timezone.
+ * This is useful when you want to show a date of the place in the timezone, like right now
+ * in Hong Kong it may be 1/12/2021 2AM.
+ * @static
+ * @private
+ */
+  function _convertIsoStrFormatLocalWithTimezone(isoDate, converterTimeZone) {
+  // Set up a temporary converter to return an ISO string in converterOptions.timeZone timezone
+    const _localTZConverter = new IntlDateTimeConverter({
+      timeZone: converterTimeZone,
+      isoStrFormat: 'local'
+    });
+  return _localTZConverter.parse(isoDate);
+}
+
 /**
  * Bind hover events for datepicker elements.
  * Done via delegate so the binding only occurs once in the lifetime of the parent div.
@@ -2183,10 +2212,13 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
      * @ojextension {_COPY_TO_INNER_ELEM: true}
      */
     /**
-     * The maximum selectable date, in ISO string format. For ojDatePicker, this should not contain
-     * a time portion in the ISO string.  If it does, a warning is issued. When set to null, there
-     * is no maximum. min and max must be in the same ISO string format as value (local,
-     * zulu, or offset).
+     * The maximum selectable date, in ISO string format.
+     * <p>
+     * For ojDatePicker, this should be a local
+     * date and not contain a time portion in the ISO string so it can be compared with the value
+     * the user selects. value becomes a local date once the user interacts with the component.
+     * When set to null, there is no minimum.
+     * </p>
      *
      * @expose
      * @instance
@@ -2207,11 +2239,10 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
      * myInputDate.max = '2018-09-25';
      */
     /**
-     * The maximum selectable date, in ISO string format. For ojInputDate, this should not contain
-     * a time portion in the ISO string.  If it does, a warning is issued. When set to null, there
-     * is no maximum. min and max must be in the same ISO string format as value (local,
-
-     * zulu, or offset).
+     * The maximum selectable date, in ISO string format. When set to null, there
+     * is no maximum. Since the value becomes a local date with no time once the
+     * user interacts with the component, min/max should be a local date with no time
+     * so they can be compared.
      *
      * @expose
      * @instance
@@ -2233,10 +2264,12 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     max: undefined,
 
     /**
-     * The minium selectable date, in ISO string format. For ojDatePicker, this should not contain
-     * a time portion in the ISO string.  If it does, a warning is issued. When set to null, there
-     * is no minimum. min and max must be in the same ISO string format as value (local,
-     * zulu, or offset).
+     * The minimum selectable date, in ISO string format.
+     * <p> For ojDatePicker, this should be a local
+     * date and not contain a time portion in the ISO string so it can be compared with the value
+     * the user selects. value becomes a local date once the user interacts with the component.
+     * When set to null, there is no minimum.
+     * </p>
      *
      * @expose
      * @instance
@@ -2257,10 +2290,13 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
      * myInputDate.min = '2014-08-25';
      */
     /**
-     * The minimum selectable date, in ISO string format. For ojInputDate, this should not contain
-     * a time portion in the ISO string.  If it does, a warning is issued. When set to null, there
-     * is no minimum. min and max must be in the same ISO string format as value (local,
-     * zulu, or offset).
+     * The minimum selectable date, in ISO string format.
+     * <p>
+     * For oj-input-date, this should be a local
+     * date and not contain a time portion in the ISO string so it can be compared with the value
+     * the user selects. value becomes a local date once the user interacts with the component.
+     * When set to null, there is no minimum.
+     * </p>
      *
      * @expose
      * @instance
@@ -2627,8 +2663,6 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
      * If needed, use IntlConverterUtils.dateToLocalIsoDateString to convert a Date to
      * a local iso string that contains only the date to set as the initial value.
      * IntlConverterUtils.dateToLocalIsoDateString(new Date(2014, 1, 1)));
-
-     * If a time is provided in the ISOString value, a warning will be issued.
      * </p>
      *
      *
@@ -2759,7 +2793,12 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     childDiv.className = 'oj-datepicker-content';
     dpDiv.appendChild(childDiv);
     this._dpDiv = bindHover($(dpDiv));
-    document.body.appendChild(dpDiv); // @HTMLUpdateOK
+    // Append the dpDiv to the CE wrapper and for widgets simply to the body
+    if (this._IsCustomElement()) {
+      this._dpDiv.appendTo(this.OuterWrapper); // @HTMLUpdateOK
+    } else {
+      this._dpDiv.appendTo(document.body); // @HTMLUpdateOK
+    }
   },
 
   _createPopupDpDiv: function () {
@@ -2825,9 +2864,9 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
   _ComponentCreate: function () {
     // verify that the options are set correctly. If they are not an error is thrown
     // and the component will not render.
-    IntlConverterUtils._verifyValueMinMaxNoTime(this.options.value,
-                                                this.options.min,
-                                                this.options.max);
+    IntlConverterUtils._verifyValueMinMax(this.options.value,
+                                          this.options.min,
+                                          this.options.max);
 
     // Create all the default converters we need first
     this._CreateConverters();
@@ -2865,8 +2904,6 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
       // http://bugs.jqueryui.com/ticket/7552 - A Datepicker created on a detached div has zero height
       this._dpDiv.css('display', 'block');
 
-      this._registerSwipeHandler();
-
       // For this to be accessible, the root dom element needs role/aria-labelledby.
       const rootDomElem = this.widget();
       rootDomElem[0].setAttribute('role', 'group');
@@ -2876,7 +2913,6 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
       this._processReadOnlyKeyboardEdit();
       if (this.options.readOnly !== true) {
         this._attachTrigger();
-        this._registerSwipeHandler();
       }
     }
 
@@ -2885,11 +2921,21 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     // passing in true to indicate that we want to show the popup of showOn is set
     // to 'focus'. If this isn't a custom element, we don't want to override the
     // focus functions.
+    // Also, when readonly is true, we just want to focus on the readonly element,
+    // as the popup isn't an issue.
     if (this._IsCustomElement()) {
       let comp = this._getRootElement();
-      let inputElem = this.GetFocusElement();
-      comp.focus = function () {
-        inputElem.focus(true);
+      // We need the input element here regardless of readonly state.
+      let inputElem = this._GetContentElement()[0];
+      comp.focus = () => {
+        const focusElem = this.GetFocusElement();
+        // we only want to call .focus(true) if it's the input elem that we added
+        // the custom focus callback on.
+        if (focusElem === inputElem) {
+          inputElem.focus(true);
+        } else {
+          focusElem.focus();
+        }
       };
 
       let proto = Object.getPrototypeOf(inputElem);
@@ -3034,9 +3080,6 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
         // eslint-disable-next-line no-param-reassign
         value = null;
       }
-      IntlConverterUtils._verifyValueMinMaxNoTime(this.options.value,
-                                                  this.options.min,
-                                                  this.options.max);
 
       retVal = this._super(key, value, flags);
       this._setCurrentDate(value);
@@ -3068,9 +3111,6 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     if (key === 'disabled') {
       this._disableEnable(value);
     } else if (key === 'max' || key === 'min') {
-      IntlConverterUtils._verifyValueMinMaxNoTime(this.options.value,
-                                                  this.options.min,
-                                                  this.options.max);
       // since validators are immutable, they will contain min + max as local values. B/c of this will need to recreate
       this._setValidatorOption('dateTimeRange',
         this._createDateTimeRangeValidator(this._GetConverter()));
@@ -3225,6 +3265,11 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
         this._setupResizePopupBind();
       }
     }
+
+    if (this._dpDiv && (this._isInLine || (this.options.readOnly !== true))) {
+      this._registerSwipeHandler();
+    }
+
     return this._super();
   },
 
@@ -3271,6 +3316,8 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     // for non custom element, this is done as first step in destroy
     if (this._IsCustomElement()) {
       this._cleanUpListeners();
+
+      this._unregisterSwipeHandler();
     }
     return this._super();
   },
@@ -4019,39 +4066,22 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
    * @private
    */
   _getCurrentDate: function (converter = this._GetConverter()) {
-    let date = new Date();
-
-    const converterOptions =
-      converter && converter.resolvedOptions ? converter.resolvedOptions() : null;
-    if (converterOptions && converterOptions.timeZone) {
+    const date = new Date();
+    const timeZone = _getConverterTimezone(converter);
+    if (timeZone) {
       // toISOString,
       // A string representing the given date in the ISO 8601 format according to universal time
       // so this will always end in a Z.
       const isoZuluOfCurrentDate = date.toISOString();
-      const localToTheTimezonePlaceWithNoTimezone =
-        this._convertIsoStrFormatLocalWithTimezone(isoZuluOfCurrentDate, converterOptions.timeZone);
-      date = IntlConverterUtils.isoToLocalDate(localToTheTimezonePlaceWithNoTimezone);
+      const localToTheTimezonePlaceWithNoTimezone = _convertIsoStrFormatLocalWithTimezone(
+        isoZuluOfCurrentDate,
+        timeZone
+      );
+      return IntlConverterUtils.isoToLocalDate(localToTheTimezonePlaceWithNoTimezone);
     }
     return date;
   },
 
-  /**
-   * This takes an isoDate and returns the iso date that is local to the place of the timezone,
-   * but without the timezone.
-   * This is useful when you want to show a date of the place in the timezone, like right now
-   * in Hong Kong it may be 1/12/2021 2AM.
-   *
-   * @private
-   */
-  _convertIsoStrFormatLocalWithTimezone(isoDate, converterTimeZone) {
-    // Set up a temporary converter to return an ISO string in converterOptions.timeZone timezone
-    if (this._localTZConverter == null) {
-      this._localTZConverter =
-        new IntlDateTimeConverter({ timeZone: converterTimeZone, isoStrFormat: 'local' });
-    }
-    return this._localTZConverter.parse(isoDate);
-  },
-
   /**
    * Retrieve the component's value in iso format in timezone local time.
    * If value is null, then it uses the current date as the value and
@@ -4060,20 +4090,12 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
    * @private
    */
   _calculateValueDateIso: function (converter) {
-    let valueDateIso;
     // dateIso: this.options.value if it exists
-    // or currentDate from the perspective of the timezone but with no timezone info, if any,
+    // or currentDate from the perspective of the local system's timezone but with no timezone info, if any,
     // with no time portion filtered back through IntlConverterUtils.dateToLocalIso()
     const dateIso = this._getDateIso();
-    const converterOptions =
-    converter && converter.resolvedOptions ? converter.resolvedOptions() : null;
-    if (converterOptions && converterOptions.timeZone) {
-      valueDateIso =
-      this._convertIsoStrFormatLocalWithTimezone(dateIso, converterOptions.timeZone);
-    } else {
-      valueDateIso = dateIso;
-    }
-    return valueDateIso;
+    const timeZone = _getConverterTimezone(converter);
+    return timeZone ? _convertIsoStrFormatLocalWithTimezone(dateIso, timeZone) : dateIso;
   },
 
   /**
@@ -4453,6 +4475,12 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     }
   },
 
+  _unregisterSwipeHandler: function () {
+    if (this._dpDiv) {
+      this._dpDiv.off('swiperight swipeleft').ojHammer('destroy');
+    }
+  },
+
   /**
    * If min or max lacks date portion and value contains it, then min + max should use
    * value's date portion
@@ -4622,7 +4650,8 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
       if (!(converter instanceof Promise)) {
         // TODO: need to fix this for when converters return Promises.
         // All this does is check that the parsed minDateIso is an isoString.
-        // I'm not sure this is necessary
+        // I'm not sure this is necessary. It is necessary to get it in the
+        // same format as the value.
         minDateIso = converter.parse(minDateIso);
         minDateParams = this._validateDatetime(minDateIso, dateParams, true);
       }
@@ -5679,7 +5708,7 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
 
     if (this.options.min != null || this.options.max != null) {
       var rangeValidator = getImplicitDateTimeRangeValidator(this.options, this._GetConverter(),
-        this._GetDefaultStyleClass());
+      this._GetDefaultStyleClass());
       this._datePickerDefaultValidators.dateTimeRange = rangeValidator;
     }
 
@@ -8874,8 +8903,9 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
     },
 
     _getPrependNode: function () {
+      const independentPrependNode = this._IsCustomElement() ? $(this.OuterWrapper) : $('body');
       return this._isIndependentInput() ?
-        $('body') :
+        independentPrependNode :
         $('.oj-popup-content', this._datePickerComp.widget._popUpDpDiv.ojPopup('widget'));
     },
 
@@ -9057,11 +9087,18 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
       // passing in true to indicate that we want to show the popup of showOn is set
       // to 'focus'.  If this isn't a custom element, we don't want to override the
       // focus functions.
+      // Also, when readonly is true, we just want to focus on the readonly element,
+      // as the popup isn't an issue.
       if (this._IsCustomElement()) {
         let comp = this._getRootElement();
-        let inputElem = this.GetFocusElement();
-        comp.focus = function () {
-          inputElem.focus(true);
+        // We need the input element here regardless of readonly state.
+        let inputElem = this._GetContentElement()[0];
+        comp.focus = () => {
+          if (this.options.readOnly === true) {
+            this.GetFocusElement().focus(); // This should be the readonly focus element.
+          } else {
+            inputElem.focus(true);
+          }
         };
 
         let proto = Object.getPrototypeOf(inputElem);
@@ -9329,6 +9366,8 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
         var children = group.children;
         for (var index = 0; index < children.length; index++) {
           wheel = children[index];
+          // This calls Wheel#destroy() and this calls off on each
+          // event listener and destroys Hammer.
           wheel.ojDestroy();
         }
       }
@@ -9364,10 +9403,14 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
      * @override
      */
     _ReleaseResources: function () {
-      // for non custom element, this is done as first step in destroy
-      if (this._IsCustomElement()) {
-        this._cleanUpListeners();
-      }
+      // Since destroy calls _ReleaseResources, we do here for both CustomElement and non CustomElement
+      // instead of doing it here for CustomElement and in destroy which is only for non CustomElements.
+      this._removeResizePopupBind();
+      // Note: We do not have a symmetrical 'createHammer' call in SetupResources.
+      // We create the timepicker wheels that have the Hammer events
+      // when the user clicks on the timepicker icon, or when
+      // the component's options change.
+      this._destroyHammer();
       return this._super();
     },
 
@@ -9388,8 +9431,6 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
         this._triggerNode.remove();
       }
 
-      this._cleanUpListeners();
-      this._destroyHammer();
       if (this._wheelPicker) {
         this._wheelPicker.remove();
         this._clearWheelModels();
@@ -9403,7 +9444,7 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase,
    * @ignore
    * @private
    */
-    _cleanUpListeners: function () {
+   _removeResizePopupBind: function () {
       if (this._resizePopupBind) {
         window.removeEventListener('resize', this._resizePopupBind);
       }
@@ -11522,6 +11563,9 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
 
     /**
      * The maximum selectable datetime, in ISO string format. When set to null, there is no maximum.
+     * <p>So it can be properly compared with the value the user selects, this should be in the same format
+     * as the converter's isoStrFormat since the value the user selects is parsed with the converter. By default, value is a local isostring for oj-date-time-picker.
+     * </p>
      *
      * @example <caption>Initialize the element with the <code class="prettyprint">max</code> attribute:</caption>
      * &lt;oj-date-time-picker max='2014-09-25T13:30:00.000-08:00'&gt;&lt;/oj-date-time-picker&gt;
@@ -11536,7 +11580,9 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
      */
     /**
      * The maximum selectable datetime, in ISO string format. When set to null, there is no maximum.
-     *
+     * <p>So it can be properly compared with the value the user selects, this should be in the same format
+     * as the converter's isoStrFormat. By default, value is a local isostring for oj-input-date-time.
+     * </p>
      * @example <caption>Initialize the element with the <code class="prettyprint">max</code> attribute:</caption>
      * &lt;oj-input-date-time max='2014-09-25T13:30:00.000-08:00'&gt;&lt;/oj-input-date-time&gt;
      *
@@ -11551,6 +11597,9 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
 
     /**
      * The minimum selectable datetime, in ISO string format. When set to null, there is no minimum.
+     * <p>So it can be properly compared with the value the user selects, this should be in the same format
+     * as the converter's isoStrFormat. By default, value is a local isostring for oj-date-time-picker.
+     * </p>
      *
      * @example <caption>Initialize the element with the <code class="prettyprint">min</code> attribute:</caption>
      * &lt;oj-date-time-picker min='2014-08-25T08:00:00.000-08:00'&gt;&lt;/oj-date-time-picker&gt;
@@ -11565,6 +11614,9 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
      */
     /**
      * The minimum selectable datetime, in ISO string format. When set to null, there is no minimum.
+     * <p>So it can be properly compared with the value the user selects, this should be in the same format
+     * as the converter's isoStrFormat since the value the user selects is parsed with the converter. By default, value is a local isostring for oj-input-date-time.
+     * </p>
      *
      * @example <caption>Initialize the element with the <code class="prettyprint">min</code> attribute:</caption>
      * &lt;oj-input-date-time min='2014-08-25T08:00:00.000-08:00'&gt;&lt;/oj-input-date-time&gt;
@@ -12162,6 +12214,53 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
 
     return retVal;
   },
+
+  /**
+   * @ignore
+   * @protected
+   * @override
+   * @memberof oj.ojInputDateTime
+   */
+  _ReleaseResources: function () {
+    if (this._IsCustomElement()) {
+      // Trigger the ojInputTime's _ReleaseResources() using the ojInputTime instance.
+      // this._timePicker.ojInputTime('destroy') will not work.
+      // jqueryui-base#destroy will throw an error because IsCustomElement() is true
+      // and you cannot call destroy when IsCustomElement is true.
+      if (this._timePicker) {
+        const timePickerInstance = this._timePicker.ojInputTime('instance');
+        if (timePickerInstance) {
+          timePickerInstance._ReleaseResources();
+          this._timePickerResourcesReleased = true;
+        }
+      }
+    }
+    return this._super();
+  },
+
+  /**
+   * @protected
+   * @override
+   * @instance
+   * @memberof! oj.ojInputDateTime
+   */
+  _SetupResources: function () {
+    var ret = this._superApply(arguments);
+    if (this._IsCustomElement()) {
+      // oj-input-date-time's AfterCreate calls createTimepicker, which creates ojInputTime() which
+      // calls InputTime's _SetupResources.
+      // Then oj-input-date-time's SetupResources is called. Only call ojInputTime's _SetupResources
+      // if they were released in ReleaseResources, so check the flag.
+      if (this._timePickerResourcesReleased && this._timePicker) {
+        const timePickerInstance = this._timePicker.ojInputTime('instance');
+        if (timePickerInstance) {
+          timePickerInstance._SetupResources();
+          this._timePickerResourcesReleased = false;
+        }
+      }
+    }
+    return ret;
+  },
   /**
    * @ignore
    * @protected
@@ -12173,6 +12272,8 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
     return this._super();
   },
   /**
+   * Called from _destroy. This is for widgets. Cleaning up custom
+   * elements is done in ReleaseResources
    * @ignore
    * @private
    * @memberof oj.ojInputDateTime
@@ -12193,6 +12294,7 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
         this._switcherDiv.remove();
       }
   },
+
   /**
    * @ignore
    * @protected

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

@@ -3293,22 +3293,13 @@ import { getDeviceRenderMode } from 'ojs/ojconfig';
     },
 
     _disableBodyOverflow: function () {
-      var body = $(document.body);
-      this._origBodyOverflow = {
-        x: body.css('overflow-x'),
-        y: body.css('overflow-y')
-      };
-      body.css('overflow-x', 'hidden');
-      body.css('overflow-y', 'hidden');
+      var body = document.body;
+      body.classList.add('oj-dialog-sheet-animating');
     },
 
     _restoreBodyOverflow: function () {
-      if (this._origBodyOverflow) {
-        var body = $(document.body);
-        body.css('overflow-x', this._origBodyOverflow.x);
-        body.css('overflow-y', this._origBodyOverflow.y);
-        this._origBodyOverflow = null;
-      }
+      var body = document.body;
+      body.classList.remove('oj-dialog-sheet-animating');
     },
 
     _destroyCloseButton: function () {

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

@@ -5,7 +5,7 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-import { CSSStyle, BaseComponent, Agent, JsonUtils, Container, ClipPath, ToolkitUtils, TransientButton, EventManager, Rectangle, Rect, SvgDocumentUtils, MouseEvent, Point, KeyboardHandler, KeyboardEvent } from 'ojs/ojdvt-toolkit';
+import { CSSStyle, BaseComponent, Agent, Container, ClipPath, ToolkitUtils, TransientButton, EventManager, Rectangle, Rect, SvgDocumentUtils, MouseEvent, Point, KeyboardHandler, KeyboardEvent } from 'ojs/ojdvt-toolkit';
 import { TimeAxisUtils } from 'ojs/ojtimeaxis-toolkit';
 
 /**
@@ -179,38 +179,41 @@ class TimeComponent extends BaseComponent {
    * @param {string} type The raw data object type. Must be either 'series', 'item', 'row', or 'task'
    * @return {object} The sanitized data
    */
-  static sanitizeData(data, type) {
-    var seriesCopy;
-    var itemCopy;
-    var isSeriesData = type === 'series' || type === 'row';
+   static sanitizeData(data, type) {
+    const sanitizeNoTemplateItemData = (item) => {
+      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);
+        itemCopy.id = itemCopy.taskId;
+        delete itemCopy.taskId;
+        return itemCopy;
+      }
+      return item._itemData;
+    };
+    const sanitizeItemData = (item) => {
+      const itemCopy = Object.assign({}, item);
+      delete itemCopy._itemData;
+      return itemCopy;
+    };
+    const isSeriesData = type === 'series' || type === 'row';
     if (isSeriesData) {
-      var itemProp = type === 'series' ? 'items' : 'tasks';
-      if (data[itemProp].length > 0) {
-        if (data[itemProp][0]._noTemplate) {
-          seriesCopy = JsonUtils.clone(data, null, {itemProp: true});
-          seriesCopy[itemProp] = seriesCopy[itemProp].map((item) => {
-            return item._itemData;
-          });
-          return seriesCopy;
-        } else if (data[itemProp][0]._itemData) {
-          seriesCopy = JsonUtils.clone(data, null, {itemProp: true});
-          seriesCopy[itemProp] = seriesCopy[itemProp].map((item) => {
-            itemCopy = JsonUtils.clone(item);
-            delete itemCopy._itemData;
-            return itemCopy;
-          });
-          return seriesCopy;
+      const itemProp = type === 'series' ? 'items' : 'tasks';
+      const items = data[itemProp];
+      if (items.length > 0) {
+        const seriesCopy = Object.assign({}, data._noTemplate ? data._itemData : data);
+        if (items[0]._noTemplate) {
+          seriesCopy[itemProp] = data[itemProp].map(sanitizeNoTemplateItemData);
+        } else if (items[0]._itemData) {
+          seriesCopy[itemProp] = data[itemProp].map(sanitizeItemData);
         }
-        return data;
+        return seriesCopy;
       }
-    }
-    else {
+    } else {
       if (data._noTemplate) {
-        return data._itemData;
+        return sanitizeNoTemplateItemData(data);
       } else if (data._itemData) {
-        itemCopy = JsonUtils.clone(data);
-        delete itemCopy._itemData;
-        return itemCopy;
+        return sanitizeItemData(data);
       }
     }
     return data;
@@ -481,7 +484,7 @@ class TimeComponent extends BaseComponent {
           event.wheelDeltaX = -wheelEvent.deltaX / TimeComponent.SCROLL_LINE_HEIGHT; // number of lines scrolled per mouse wheel click
       }
 
-      if (wheelDelta) { // if vertical mouse wheel amount is defined, non null, non zero 
+      if (wheelDelta) { // if vertical mouse wheel amount is defined, non null, non zero
         var compPagePos = this.getCtx().getStageAbsolutePosition();
         if (this._isVertical)
           var compLoc = event.pageY - compPagePos.y - this.getStartYOffset();

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

@@ -11292,19 +11292,10 @@ TextUtils.getTextStringWidth = function (context, textString, cssStyle) {
       width = TextUtils._getCanvasTextWidth(context, textString, cssStyle);
     } else {
       // Properties that are supported in <canvas> elements by browser
-      // Chrome supports letterSpacing, wordSpacing, and fontVariantNumeric
-      // Safari supports only supports fontVariantNumeric
+      // Chrome and Safari supports only supports fontVariantNumeric
       // Firefox supports none
-      if (Agent.browser === 'chrome') {
-        if (TextUtils._letterSpacing != letterSpacing || (TextUtils._wordSpacing != wordSpacing) || (TextUtils._fontVariantNumeric != fontVariantNumeric)) {
-          TextUtils._clearCanvasContext();
-          TextUtils._setSpacing(wordSpacing, letterSpacing, fontVariantNumeric);
-        }
-        TextUtils._storeCanvasContext();
-        TextUtils._attachCanvas(context);
-        width = TextUtils._getCanvasTextWidth(context, textString, cssStyle);
-      } else if (Agent.browser === 'safari' && isLetterSpacingNormal && isWordSpacingNormal) {
-        if (TextUtils._fontVariantNumeric != fontVariantNumeric) {
+      if ((Agent.browser === 'safari' || Agent.browser === 'chrome') && isLetterSpacingNormal && isWordSpacingNormal) {
+          if (TextUtils._fontVariantNumeric != fontVariantNumeric) {
           TextUtils._clearCanvasContext();
           TextUtils._setSpacing(wordSpacing, letterSpacing, fontVariantNumeric);
         }