@oracle/oraclejet 12.0.1 → 12.1.0

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

@@ -1177,11 +1177,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();
       },
@@ -1232,11 +1228,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
@@ -2062,6 +2080,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
@@ -2077,17 +2132,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_esm/ojconverter-datetime.js

@@ -504,7 +504,8 @@ const RelativeDateTimeFormatter = (function () {
         'year';
     }
     var intlRelativeCnv = new Intl.RelativeTimeFormat(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_esm/ojconverter-nativedatetime.js

@@ -578,10 +578,10 @@ NativeDateTimeConstants._dateTimeFormats = {
         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_esm/ojconverterutils-i18n.js

@@ -10,7 +10,6 @@ import { getTranslatedString } from 'ojs/ojtranslation';
 import $ from 'jquery';
 import ConverterUtils from 'ojs/ojconverterutils';
 import { ConverterError } from 'ojs/ojvalidation-error';
-import { warn } from 'ojs/ojlogger';
 
 /*
  DESCRIPTION
@@ -1213,44 +1212,10 @@ IntlConverterUtils._getISOStrFormatType = function (isoStr) {
   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 = 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
@@ -1264,10 +1229,6 @@ IntlConverterUtils._verifyValueMinMaxNoTime = function (value, min, max) {
  * @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'.
@@ -1275,54 +1236,18 @@ IntlConverterUtils._verifyValueMinMaxNoTime = function (value, min, max) {
   // ** 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_esm/ojcore-base.js

@@ -37,12 +37,12 @@ const oj = {
    * @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_esm/ojcustomelement-utils.js

@@ -803,8 +803,8 @@ const fromSymbolizedValue = (value) => {
     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_esm/ojdatacollection-common.js

@@ -8,7 +8,7 @@
 import oj from 'ojs/ojcore-base';
 import { getNoJQFocusHandlers as getNoJQFocusHandlers$1 } from 'ojs/ojdomutils';
 import { error } from 'ojs/ojlogger';
-import { getFocusableElementsInNode as getFocusableElementsInNode$1, checkVisibility, disableElement as disableElement$1, disableAllFocusableElements as disableAllFocusableElements$1, enableAllFocusableElements as enableAllFocusableElements$1, getLogicalChildPopup as getLogicalChildPopup$1 } from 'ojs/ojkeyboardfocus-utils';
+import { getFocusableElementsInNode as getFocusableElementsInNode$1, checkVisibility, disableElement as disableElement$1, disableAllFocusableElements as disableAllFocusableElements$1, enableAllFocusableElements as enableAllFocusableElements$1, getActionableElementsInNode as getActionableElementsInNode$1, getLogicalChildPopup as getLogicalChildPopup$1 } from 'ojs/ojkeyboardfocus-utils';
 
 /**
  * This class contains utility methods used by the data collection components (DataGrid, Listview, and Table).
@@ -26,11 +26,6 @@ DataCollectionUtils._TAB_INDEX = 'tabIndex';
  */
 DataCollectionUtils._DATA_OJ_TABMOD = 'data-oj-tabmod';
 
-/**
- * @private
- */
-DataCollectionUtils._FOCUSABLE_ELEMENTS_QUERY = "input, select, button, a[href], textarea, object, [tabIndex]:not([tabIndex='-1'])";
-
 /**
  * @private
  */
@@ -108,21 +103,13 @@ DataCollectionUtils.isFromDefaultSelector = function (event) {
 };
 
 /**
- * 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 getActionableElementsInNode$1(element);
 };
 
 /**
@@ -781,9 +768,9 @@ const disableElement = DataCollectionUtils.disableElement;
 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;
@@ -815,4 +802,4 @@ const isElementInScrollerBounds = DataCollectionUtils.isElementInScrollerBounds;
 const getEventDetail = DataCollectionUtils.getEventDetail;
 const isRequestIdleCallbackSupported = DataCollectionUtils.isRequestIdleCallbackSupported;
 
-export { CHECKVIEWPORT_THRESHOLD, KEYBOARD_KEYS, applyMergedInlineStyles, applyStyleObj, areKeySetsEqual, calculateOffsetTop, containsKey, convertStringToStyleObj, disableAllFocusableElements, disableDefaultBrowserStyling, disableElement, enableAllFocusableElements, getAddEventKeysResult, getDefaultScrollBarWidth, getEventDetail, getFocusableElementsInNode, getFocusableElementsIncludingDisabled, getLogicalChildPopup, getNoJQFocusHandlers, handleActionablePrevTab, handleActionableTab, isArrowDownKeyEvent, isArrowLeftKeyEvent, isArrowRightKeyEvent, isArrowUpKeyEvent, isClickthroughDisabled, isElementInScrollerBounds, isElementOrAncestorFocusable, isEndKeyEvent, isEnterKeyEvent, isEscapeKeyEvent, isEventClickthroughDisabled, isF2KeyEvent, isFromDefaultSelector, isHomeKeyEvent, isIterateAfterDoneNotAllowed, isLetterAKeyEvent, isMobileTouchDevice, isNumberFiveKeyEvent, isRequestIdleCallbackSupported, isSpaceBarKeyEvent, isTabKeyEvent };
+export { CHECKVIEWPORT_THRESHOLD, KEYBOARD_KEYS, applyMergedInlineStyles, applyStyleObj, areKeySetsEqual, calculateOffsetTop, containsKey, convertStringToStyleObj, disableAllFocusableElements, disableDefaultBrowserStyling, disableElement, enableAllFocusableElements, getActionableElementsInNode, getAddEventKeysResult, getDefaultScrollBarWidth, getEventDetail, getFocusableElementsInNode, getLogicalChildPopup, getNoJQFocusHandlers, handleActionablePrevTab, handleActionableTab, isArrowDownKeyEvent, isArrowLeftKeyEvent, isArrowRightKeyEvent, isArrowUpKeyEvent, isClickthroughDisabled, isElementInScrollerBounds, isElementOrAncestorFocusable, isEndKeyEvent, isEnterKeyEvent, isEscapeKeyEvent, isEventClickthroughDisabled, isF2KeyEvent, isFromDefaultSelector, isHomeKeyEvent, isIterateAfterDoneNotAllowed, isLetterAKeyEvent, isMobileTouchDevice, isNumberFiveKeyEvent, isRequestIdleCallbackSupported, isSpaceBarKeyEvent, isTabKeyEvent };

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

@@ -16,7 +16,7 @@ import 'ojs/ojbutton';
 import oj$1 from 'ojs/ojcore-base';
 import { _OJ_CONTAINER_ATTR, subtreeAttached, __GetWidgetConstructor } from 'ojs/ojcomponentcore';
 import Context from 'ojs/ojcontext';
-import { isMobileTouchDevice, applyMergedInlineStyles, disableAllFocusableElements, enableAllFocusableElements, getFocusableElementsInNode, getFocusableElementsIncludingDisabled, handleActionableTab, handleActionablePrevTab, disableDefaultBrowserStyling } from 'ojs/ojdatacollection-common';
+import { isMobileTouchDevice, applyMergedInlineStyles, disableAllFocusableElements, enableAllFocusableElements, getFocusableElementsInNode, getActionableElementsInNode, handleActionableTab, handleActionablePrevTab, disableDefaultBrowserStyling } from 'ojs/ojdatacollection-common';
 import { setScrollLeft, getCSSTimeUnitAsMillis, isTouchSupported, removeResizeListener, addResizeListener } from 'ojs/ojdomutils';
 import { __getTemplateEngine } from 'ojs/ojconfig';
 import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
@@ -16035,7 +16035,7 @@ DvtDataGrid.prototype.getLabelledBy = function (activeObject, prevActiveObject,
     }
   }
 
-  let focusableElems = getFocusableElementsIncludingDisabled(element);
+  let focusableElems = getActionableElementsInNode(element);
   if (focusableElems && focusableElems.length > 0) {
     statesArray.push({ key: 'accessibleContainsControls' });
   }
@@ -20617,7 +20617,8 @@ DvtDataGrid.prototype._resizeSelectedHeaders = function (event, oldWidth, oldHei
     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);
   }
@@ -20630,10 +20631,9 @@ DvtDataGrid.prototype._resizeSelectedHeaders = function (event, oldWidth, oldHei
         } 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') {
@@ -20682,10 +20682,7 @@ DvtDataGrid.prototype.handleResizeMouseUp = function (event) {
     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);
       }
     }
 
@@ -22234,6 +22231,11 @@ DvtDataGrid.prototype.handleContextMenuResize = function (event, id, val, target
       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 {
@@ -22257,6 +22259,11 @@ DvtDataGrid.prototype.handleContextMenuResize = function (event, id, val, target
       } 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 {
@@ -22817,14 +22824,18 @@ DvtDataGrid.prototype._isHeaderSelected = function (context, axis) {
 };
 
 /**
- * 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'));
   }