@oracle/oraclejet 12.0.1 → 12.1.0

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

@@ -1173,11 +1173,7 @@ var __oj_checkboxset_metadata =
           }
 
           // if readonly, set tabindex on the wrapper
-          if (this.options.readOnly) {
-            let domElem = this.element[0];
-            let wrapperDom = domElem.querySelector('.oj-checkboxset-wrapper');
-            wrapperDom.setAttribute('tabindex', this._externalTabIndex);
-          }
+          this._updateReadonlyState();
           this._on(this._events);
           this._setup();
         },
@@ -1228,11 +1224,33 @@ var __oj_checkboxset_metadata =
      * @since 5.0.0
      */
         GetFocusElement: function () {
+          // JET-48463 - oj-table issue where focus is lost
+          // GetFocusElement() needs to return the correct readonly element
+          // If _GetReadonlyFocusElement() returns null, fallback to the
+          // enabled element logic.
+          if (this.options.readOnly === true) {
+            const readonlyFocusElement = this._GetReadonlyFocusElement();
+            if (readonlyFocusElement) {
+              return readonlyFocusElement;
+            }
+          }
           // We need :disabled here so that we don't try to focus on an element that isn't focusable.
           // :focusable doesn't work because this is called before the custom element is fully upgraded
           // and is still hidden in the DOM.
           return this._GetContentElement().not(':disabled').first()[0];
         },
+        /**
+         * oj-checkboxset doesn't use .oj-text-field-readonly for the focusable readonly content,
+         * so we need to use a different selector.
+         * @memberof oj.ojCheckboxset
+         * @instance
+         * @override
+         * @protected
+         * @return {Element|null}
+         */
+        _GetReadonlyFocusElement: function () {
+          return this.widget()[0].querySelector('.oj-form-control-container');
+        },
     /**
      * Sets the disabled option onto the dom.
      * This is a no-op for checkboxset since its root dom element is a div, and disabled is
@@ -2058,6 +2076,43 @@ var __oj_checkboxset_metadata =
 
           this.$checkboxes._ojRadioCheckbox('refreshDisabled'); // re-render disabled
         },
+
+        /**
+         * Updates the component's state based on whether or not it is in the readonly
+         * state.
+         * @private
+         * @memberof! oj.ojCheckboxSet
+         */
+         _updateReadonlyState: function () {
+          const wrapperDom = this.element[0].querySelector('.oj-checkboxset-wrapper');
+          if (this.options.readOnly) {
+            wrapperDom.setAttribute('tabindex', this._externalTabIndex);
+            this.element.addClass('oj-read-only');
+
+            // JET-49297 - reassess accessibility implementation of 'readonly' checkboxset
+            // In readonly mode, we will not have any checkbox input in the visible DOM. Thus,
+            // in this state it will just be showing generic text based on the value selected.
+            // So, we need to clean up the role along with the aria-labelledby attributes we added
+            // for that role to make things accessible.
+            this.element.removeAttr('role').removeAttr('aria-labelledby');
+            return;
+          }
+
+          // remove tabindex and role
+          wrapperDom.removeAttribute('tabindex');
+          this.element.removeClass('oj-read-only');
+
+          // JET-49297 - reassess accessibility implementation of 'readonly' checkboxset
+          // add back the role and aria attributes removed before
+          this.element.attr('role', 'group');
+          this._labelledByUpdatedForSet(
+            this.widget()[0].id,
+            null,
+            this.options.labelledBy,
+            this.widget()
+          );
+        },
+
     /**
      * @override
      * @private
@@ -2073,17 +2128,8 @@ var __oj_checkboxset_metadata =
               break;
             case 'readOnly':
               this.options.readOnly = !!value;
-              var wrapperDom = this.element[0].querySelector('.oj-checkboxset-wrapper');
               var val = this.options.value;
-              if (this.options.readOnly) {
-                wrapperDom.setAttribute('tabindex', this._externalTabIndex);
-                this.element.addClass('oj-read-only');
-              } else {
-                // remove tabindex and role
-                wrapperDom.removeAttribute('tabindex');
-                // remove oj-read-only class
-                this.element.removeClass('oj-read-only');
-              }
+              this._updateReadonlyState();
               this._ResetComponentState();
               // when toggle readonly to false, we need to check the initial set values.
               if (val != null) {

package/dist/js/libs/oj/debug/ojconverter-datetime.js

@@ -501,7 +501,8 @@ define(['exports', 'ojs/ojconverterutils-i18n', 'ojs/ojconverter', 'ojs/ojlocale
           'year';
       }
       var intlRelativeCnv = new Intl.RelativeTimeFormat(ojconfig.getLocale(), { numeric: style });
-      var format = intlRelativeCnv.format(units[field], field);
+      var val = diff >= 0 ? units[field] : -units[field];
+      var format = intlRelativeCnv.format(val, field);
       return format;
     }
 

package/dist/js/libs/oj/debug/ojconverter-nativedatetime.js

@@ -572,10 +572,10 @@ define(['exports', 'ojs/ojlogger', 'ojs/ojconfig', 'ojs/ojlocaledata', 'ojs/ojco
             short: { year: 'y', month_s: 'M', month_m: 'MMM', day: 'd' }
         },
         timeStyle: {
-            full: { hour: 'h', minute: 'm', second: 's', timeZoneName: 'zzzz' },
-            long: { hour: 'h', minute: 'm', second: 's', timeZoneName: 'z' },
-            medium: { hour: 'h', minute: 'm', second: 's' },
-            short: { hour: 'h', minute: 'm' }
+            full: { hour: 'h', minute: 'mm', second: 'ss', timeZoneName: 'zzzz' },
+            long: { hour: 'h', minute: 'mm', second: 'ss', timeZoneName: 'z' },
+            medium: { hour: 'h', minute: 'mm', second: 'ss' },
+            short: { hour: 'h', minute: 'mm' }
         }
     };
     NativeDateTimeConstants._ALPHA_REGEXP = /([a-zA-Z]+)/;

package/dist/js/libs/oj/debug/ojconverterutils-i18n.js

@@ -5,7 +5,7 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-define(['exports', 'ojs/ojcore-base', 'ojs/ojtranslation', 'jquery', 'ojs/ojconverterutils', 'ojs/ojvalidation-error', 'ojs/ojlogger'], function (exports, oj, Translations, $, ConverterUtils, ojvalidationError, Logger) { 'use strict';
+define(['exports', 'ojs/ojcore-base', 'ojs/ojtranslation', 'jquery', 'ojs/ojconverterutils', 'ojs/ojvalidation-error'], function (exports, oj, Translations, $, ConverterUtils, ojvalidationError) { 'use strict';
 
   oj = oj && Object.prototype.hasOwnProperty.call(oj, 'default') ? oj['default'] : oj;
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
@@ -1212,44 +1212,10 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojtranslation', 'jquery', 'ojs/ojconv
     return OraI18nUtils.getISOStrFormatType(isoStr);
   };
 
-  /**
-   * Will issue a warning if the ISO string value has a time portion specified.  For input date, we only
-   * want the date portion of the ISO string specified.  We pass in a logger function so that this function
-   * can be tested by providing an alternate function.  See pattern library for useControlledVariantWarning
-   * @param {string} name The name is used for logging purposes only
-   * @param {string} value The iSO string value to be tested
-   * @param {function} logger The method used to log the warning
-   * @memberof oj.IntlConverterUtils
-   * @method _warnIfISOFormatHasTime
-   * @private
-   */
-  IntlConverterUtils._warnIfISOFormatHasTime = function (name, value, logger = Logger.warn) {
-    if (value && value.indexOf('T') !== -1) {
-      logger(`${name} iso string value should not include a time value for oj-input-date component.`);
-    }
-  };
 
   /**
-   * This method will verify that the value, min, and max iso strings
-   * contain no time component, and issue warnings if they do, and then
-   * call _verifyValueMinMax to verify the time portion if the iso string.
-   * @param {string} value iso string value for the component value
-   * @param {string} min iso string value for the min property
-   * @param {string} max iso string value for the max property
-   */
-  IntlConverterUtils._verifyValueMinMaxNoTime = function (value, min, max) {
-    // call _warnIfISOFormatHasTime for each parameter
-    Object.entries({ value, min, max }).forEach(
-      ([k, v]) => IntlConverterUtils._warnIfISOFormatHasTime(k, v));
-
-    IntlConverterUtils._verifyValueMinMax(value, min, max);
-  };
-
-  /**
-   * Checks that min and max are parseable isoStrings, and that they
-   * are the same type as each other and as the value option.
-   * Logs a warning if value, min, max are not all iso strings, or are not of the same type.
-   * In a future release this will throw an error.
+   * Checks that min and max and value are parseable isoStrings,
+   * Logs a warning if value, min, max are not all iso strings.
    *
    * @throws {Error} if value, min, max are not all iso strings, or are not of the same type.
    * @param {string} value
@@ -1263,10 +1229,6 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojtranslation', 'jquery', 'ojs/ojconv
    * @private
    */
    IntlConverterUtils._verifyValueMinMax = function (value, min, max) {
-    let valueIsoFormat;
-    let minIsoFormat;
-    let maxIsoFormat;
-
     // If value or min or max is not an iso string (say 'abc' or '2021/03/03'),
     // the datepicker renders, but you see an inline converter error meant only for an application
     // developer under the field, 'Please provide valid ISO 8601 string'.
@@ -1274,54 +1236,18 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojtranslation', 'jquery', 'ojs/ojconv
     // ** e.g., set oj-input-number value='abc' and an error is thrown in the console.
     // In v11 we logged the warning and monitored FA tests for this warning. After six months or so
     // we saw no warnings and so now in v12 we will throw an error.
-    if (value) {
-      try {
-        valueIsoFormat = IntlConverterUtils._getISOStrFormatType(value);
-      } catch (e) {
-        // We weren't checking this in pre-v11.
-        throw new Error('value must be an iso string: ' + e);
-      }
-    }
 
-    if (min) {
-      try {
-        minIsoFormat = IntlConverterUtils._getISOStrFormatType(min);
-      } catch (e) {
-        throw new Error('min must be an iso string: ' + e);
-      }
-    }
-
-    if (max) {
-      try {
-        maxIsoFormat = IntlConverterUtils._getISOStrFormatType(max);
-      } catch (e) {
-        throw new Error('max must be an iso string: ' + e);
-      }
-    }
-
-    // Issue two is.
-    // If value and min and max are not of the same iso string type: zulu, offset, or local,
-    // we coerced to the same type so that we could easily compare them,
-    // like min <= value <= max. In v11, we warned. In v12 we throw an error
-    // if they are not of the same type,
-
-    if (value && min && max &&
-      !(valueIsoFormat === minIsoFormat && valueIsoFormat === maxIsoFormat)) {
-      throw new Error(`min and max must be in the same iso string format as value.
-    value is in ${valueIsoFormat} format.`);
-    }
-    if (value && min && !(valueIsoFormat === minIsoFormat)) {
-      throw new Error(`min must be in the same iso string format as value.
-    value is in ${valueIsoFormat} format.`);
-    }
-    if (value && max && !(valueIsoFormat === maxIsoFormat)) {
-      throw new Error(`max must be in the same iso string format as value.
-      value is in ${valueIsoFormat} format.`);
-    }
-    if (min && max && !(minIsoFormat === maxIsoFormat)) {
-      throw new Error(`min and max must be in the same iso string format.
-      min is in ${minIsoFormat} format and max is in ${maxIsoFormat} format.`);
-    }
+    Object.entries({ value, min, max }).forEach(
+      ([k, v]) => {
+        if (v) {
+          try {
+            IntlConverterUtils._getISOStrFormatType(v);
+          } catch (e) {
+            // We weren't checking this in pre-v11.
+            throw new Error(`${k} must be an iso string: ${e}`);
+          }
+        }
+      });
   };
 
   /**

package/dist/js/libs/oj/debug/ojcore-base.js

@@ -37,12 +37,12 @@ define(['ojs/ojlogger'], function (Logger) { 'use strict';
      * @global
      * @member {string} version JET version numberr
      */
-    version: '12.0.1',
+    version: '12.1.0',
     /**
      * @global
      * @member {string} revision JET source code revision number
      */
-    revision: '2022-02-16_11-15-51',
+    revision: '2022-04-09_00-30-04',
 
     // This function is only meant to be used outside the library, so quoting the name
     // to avoid renaming is appropriate

package/dist/js/libs/oj/debug/ojcustomelement-utils.js

@@ -803,8 +803,8 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcontext', 'ojs/ojlogger', 'ojs/ojth
         return value;
     };
     const convertEmptyStringToUndefined = (element, propertyMeta, value) => {
-        const elementState = CustomElementUtils.getElementState(element);
-        if (elementState.getBindingProviderType() === 'preact') {
+        if (!element ||
+            CustomElementUtils.getElementState(element).getBindingProviderType() === 'preact') {
             const types = ElementUtils.getSupportedTypes(propertyMeta.type);
             if (!types.string || propertyMeta.enumValues) {
                 return undefined;

package/dist/js/libs/oj/debug/ojdatacollection-common.js

@@ -25,11 +25,6 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojdomutils', 'ojs/ojlogger', 'ojs/ojk
    */
   DataCollectionUtils._DATA_OJ_TABMOD = 'data-oj-tabmod';
 
-  /**
-   * @private
-   */
-  DataCollectionUtils._FOCUSABLE_ELEMENTS_QUERY = "input, select, button, a[href], textarea, object, [tabIndex]:not([tabIndex='-1'])";
-
   /**
    * @private
    */
@@ -107,21 +102,13 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojdomutils', 'ojs/ojlogger', 'ojs/ojk
   };
 
   /**
-   * Finds all the focusable elements in a node including ones with tabmod on them (disabled by us)
+   * Finds all the actionable elements in a node including ones with tabmod on them (disabled by us)
    * @param {Element} element
    * @return {Element[]} An array of the enabled elements
    * @private
    */
-  DataCollectionUtils.getFocusableElementsIncludingDisabled = function (element) {
-    var inputElems = [];
-    let nodes = element.querySelectorAll(DataCollectionUtils._FOCUSABLE_ELEMENTS_QUERY + ',[' + DataCollectionUtils._DATA_OJ_TABMOD + ']');
-    for (var i = 0; i < nodes.length; i++) {
-      var elem = nodes[i];
-      if (!elem.disabled && elem.style.display !== 'none') {
-        inputElems.push(elem);
-      }
-    }
-    return inputElems;
+  DataCollectionUtils.getActionableElementsInNode = function (element) {
+    return ojkeyboardfocusUtils.getActionableElementsInNode(element);
   };
 
   /**
@@ -780,9 +767,9 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojdomutils', 'ojs/ojlogger', 'ojs/ojk
   const disableAllFocusableElements = DataCollectionUtils.disableAllFocusableElements;
   const disableDefaultBrowserStyling = DataCollectionUtils.disableDefaultBrowserStyling;
   const enableAllFocusableElements = DataCollectionUtils.enableAllFocusableElements;
+  const getActionableElementsInNode = DataCollectionUtils.getActionableElementsInNode;
   const getAddEventKeysResult = DataCollectionUtils.getAddEventKeysResult;
   const getDefaultScrollBarWidth = DataCollectionUtils.getDefaultScrollBarWidth;
-  const getFocusableElementsIncludingDisabled = DataCollectionUtils.getFocusableElementsIncludingDisabled;
   const isElementOrAncestorFocusable = DataCollectionUtils.isElementOrAncestorFocusable;
   const isIterateAfterDoneNotAllowed = DataCollectionUtils.isIterateAfterDoneNotAllowed;
   const getFocusableElementsInNode = DataCollectionUtils.getFocusableElementsInNode;
@@ -826,11 +813,11 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojdomutils', 'ojs/ojlogger', 'ojs/ojk
   exports.disableDefaultBrowserStyling = disableDefaultBrowserStyling;
   exports.disableElement = disableElement;
   exports.enableAllFocusableElements = enableAllFocusableElements;
+  exports.getActionableElementsInNode = getActionableElementsInNode;
   exports.getAddEventKeysResult = getAddEventKeysResult;
   exports.getDefaultScrollBarWidth = getDefaultScrollBarWidth;
   exports.getEventDetail = getEventDetail;
   exports.getFocusableElementsInNode = getFocusableElementsInNode;
-  exports.getFocusableElementsIncludingDisabled = getFocusableElementsIncludingDisabled;
   exports.getLogicalChildPopup = getLogicalChildPopup;
   exports.getNoJQFocusHandlers = getNoJQFocusHandlers;
   exports.handleActionablePrevTab = handleActionablePrevTab;

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

@@ -16021,7 +16021,7 @@ var __oj_data_grid_metadata =
       }
     }
 
-    let focusableElems = DataCollectionUtils.getFocusableElementsIncludingDisabled(element);
+    let focusableElems = DataCollectionUtils.getActionableElementsInNode(element);
     if (focusableElems && focusableElems.length > 0) {
       statesArray.push({ key: 'accessibleContainsControls' });
     }
@@ -20603,7 +20603,8 @@ var __oj_data_grid_metadata =
       allowResizeWithinSelection = true;
     }
     let selectedHeaders;
-    if (this.m_selection && this.m_selection.length && allowResizeWithinSelection) {
+    if (this.m_selection && this.m_selection.length && allowResizeWithinSelection &&
+        !this.m_discontiguousSelection) {
       selectedHeaders = this._getHeadersWithinSelection(this.m_selection[0],
                                     resizingElementIndex, resizingElementAxis);
     }
@@ -20616,10 +20617,9 @@ var __oj_data_grid_metadata =
           } else {
             this.resizeRowHeight(this.getElementDir(selectedHeaders[i], 'height'), newHeight);
           }
-          // set the information we want to callback with in the resize event and callback
-
-          this._fireResizeEvent(event, oldWidth, oldHeight, newWidth, newHeight, size);
         }
+        // set the information we want to callback with in the resize event and callback
+        this._fireResizeEvent(event, oldWidth, oldHeight, newWidth, newHeight, size);
       }
     } else {
       if (resizeHeaderMode === 'column') {
@@ -20668,10 +20668,7 @@ var __oj_data_grid_metadata =
       if (newWidth !== this.m_orginalResizeDimensions.width ||
           newHeight !== this.m_orginalResizeDimensions.height) {
         if (this.m_cursor === 'col-resize' || this.m_cursor === 'row-resize') {
-          if (this._isSelectionEnabled() && this.isMultipleSelection() &&
-            this.m_selection.length && !this.m_discontiguousSelection) {
-            this._resizeSelectedHeaders(event, oldWidth, oldHeight, newWidth, newHeight, size);
-          }
+          this._resizeSelectedHeaders(event, oldWidth, oldHeight, newWidth, newHeight, size);
         }
       }
 
@@ -22220,6 +22217,11 @@ var __oj_data_grid_metadata =
         if (this._getResizeHeaderMode(this.m_resizingElement) === 'column') {
           if (this._isDOMElementResizable(this.m_resizingElement)) {
             if (isHeaderLabel) {
+              if (this.m_utils.containsCSSClassName(this.m_resizingElement,
+                this.getMappedStyle('columnendheaderlabel'))) {
+                  // as resizing width on colEndHeaderLabel essentially changes rowHeader width and not rowEndHeader.
+                  end = false;
+              }
               this.resizeRowWidth(value, value - initialWidth, end, isHeaderLabel);
               this._fireResizeEvent(event, initialWidth, initialHeight, value, initialHeight, value);
             } else {
@@ -22243,6 +22245,11 @@ var __oj_data_grid_metadata =
         } else if (this._isDOMElementResizable(this.m_resizingElement)) {
           let newElementHeight = this.getNewElementHeight('row', initialHeight, end, deltaHeight, isHeaderLabel);
           if (isHeaderLabel) {
+            if (this.m_utils.containsCSSClassName(this.m_resizingElement,
+              this.getMappedStyle('rowendheaderlabel'))) {
+                // as resizing height on rowEndHeaderLabel essentially changes columnHeader height and not columnEndHeader.
+                end = false;
+            }
             this.resizeColHeight(newElementHeight, newElementHeight - initialHeight, end);
             this._fireResizeEvent(event, initialWidth, initialHeight, initialWidth, value, value);
           } else {
@@ -22803,14 +22810,18 @@ var __oj_data_grid_metadata =
   };
 
   /**
-   * Clear all header highlight
-   */
-   DvtDataGrid.prototype._clearHeaderHighLight = function () {
-    const someSelectedHeaders = this.m_root.querySelectorAll('.' + this.getMappedStyle('headerPartialSelected'));
+  * Clear all header highlight
+  */
+  DvtDataGrid.prototype._clearHeaderHighLight = function () {
+    const someSelectedSelector = '.' + this.getMappedStyle('headerPartialSelected')
+    + '.' + this.getMappedStyle('headercell');
+    const someSelectedHeaders = this.m_root.querySelectorAll(someSelectedSelector);
     for (let i = 0; i < someSelectedHeaders.length; i++) {
       someSelectedHeaders[i].classList.remove(this.getMappedStyle('headerPartialSelected'));
     }
-    const allSelectedHeaders = this.m_root.querySelectorAll('.' + this.getMappedStyle('headerAllSelected'));
+    const allSelectedSelector = '.' + this.getMappedStyle('headerAllSelected')
+      + '.' + this.getMappedStyle('headercell');
+    const allSelectedHeaders = this.m_root.querySelectorAll(allSelectedSelector);
     for (let i = 0; i < allSelectedHeaders.length; i++) {
       allSelectedHeaders[i].classList.remove(this.getMappedStyle('headerAllSelected'));
     }