@vaadin/grid 23.3.3 → 24.0.0-alpha10

package/src/vaadin-grid-drag-and-drop-mixin.js

@@ -1,8 +1,10 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { iterateChildren, updateRowStates } from './vaadin-grid-helpers.js';
+
 const DropMode = {
   BETWEEN: 'between',
   ON_TOP: 'on-top',
@@ -126,7 +128,7 @@ export const DragAndDropMixin = (superClass) =>
           // Safari doesn't position drag images from transformed
           // elements properly so we need to switch to use top temporarily
           const transform = row.style.transform;
-          row.style.top = /translateY\((.*)\)/.exec(transform)[1];
+          row.style.top = /translateY\((.*)\)/u.exec(transform)[1];
           row.style.transform = 'none';
           requestAnimationFrame(() => {
             row.style.top = '';
@@ -154,13 +156,14 @@ export const DragAndDropMixin = (superClass) =>
         // Set the default transfer data
         e.dataTransfer.setData('text', this.__formatDefaultTransferData(rows));
 
-        row.setAttribute('dragstart', rows.length > 1 ? rows.length : '');
+        updateRowStates(row, { dragstart: rows.length > 1 ? `${rows.length}` : '' });
         this.style.setProperty('--_grid-drag-start-x', `${e.clientX - rowRect.left + 20}px`);
         this.style.setProperty('--_grid-drag-start-y', `${e.clientY - rowRect.top + 10}px`);
 
         requestAnimationFrame(() => {
-          row.removeAttribute('dragstart');
-          this.updateStyles({ '--_grid-drag-start-x': '', '--_grid-drag-start-y': '' });
+          updateRowStates(row, { dragstart: null });
+          this.style.setProperty('--_grid-drag-start-x', '');
+          this.style.setProperty('--_grid-drag-start-y', '');
         });
 
         const event = new CustomEvent('grid-dragstart', {
@@ -252,7 +255,7 @@ export const DragAndDropMixin = (superClass) =>
         } else if (row) {
           this._dragOverItem = row._item;
           if (row.getAttribute('dragover') !== this._dropLocation) {
-            row.setAttribute('dragover', this._dropLocation);
+            updateRowStates(row, { dragover: this._dropLocation }, true);
           }
         } else {
           this._clearDragStyles();
@@ -306,7 +309,9 @@ export const DragAndDropMixin = (superClass) =>
     /** @protected */
     _clearDragStyles() {
       this.removeAttribute('dragover');
-      Array.from(this.$.items.children).forEach((row) => row.removeAttribute('dragover'));
+      iterateChildren(this.$.items, (row) => {
+        updateRowStates(row, { dragover: null }, true);
+      });
     }
 
     /** @private */
@@ -368,11 +373,11 @@ export const DragAndDropMixin = (superClass) =>
      * the conditions change.
      */
     filterDragAndDrop() {
-      Array.from(this.$.items.children)
-        .filter((row) => !row.hidden)
-        .forEach((row) => {
+      iterateChildren(this.$.items, (row) => {
+        if (!row.hidden) {
           this._filterDragAndDrop(row, this.__getRowModel(row));
-        });
+        }
+      });
     }
 
     /**
@@ -385,18 +390,18 @@ export const DragAndDropMixin = (superClass) =>
       const dragDisabled = !this.rowsDraggable || loading || (this.dragFilter && !this.dragFilter(model));
       const dropDisabled = !this.dropMode || loading || (this.dropFilter && !this.dropFilter(model));
 
-      const draggableElements = Array.from(row.children).map((cell) => cell._content);
-
-      draggableElements.forEach((e) => {
+      iterateChildren(row, (cell) => {
         if (dragDisabled) {
-          e.removeAttribute('draggable');
+          cell._content.removeAttribute('draggable');
         } else {
-          e.setAttribute('draggable', true);
+          cell._content.setAttribute('draggable', true);
         }
       });
 
-      row.toggleAttribute('drag-disabled', !!dragDisabled);
-      row.toggleAttribute('drop-disabled', !!dropDisabled);
+      updateRowStates(row, {
+        'drag-disabled': !!dragDisabled,
+        'drop-disabled': !!dropDisabled,
+      });
     }
 
     /**

package/src/vaadin-grid-dynamic-columns-mixin.js

@@ -1,12 +1,13 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { updateCellState } from './vaadin-grid-helpers.js';
 
 function arrayEquals(arr1, arr2) {
   if (!arr1 || !arr2 || arr1.length !== arr2.length) {
@@ -160,8 +161,8 @@ export const DynamicColumnsMixin = (superClass) =>
           return a._column._order - b._column._order;
         })
         .forEach((cell, cellIndex, children) => {
-          cell.toggleAttribute('first-column', cellIndex === 0);
-          cell.toggleAttribute('last-column', cellIndex === children.length - 1);
+          updateCellState(cell, 'first-column', cellIndex === 0);
+          updateCellState(cell, 'last-column', cellIndex === children.length - 1);
         });
     }
 
@@ -171,6 +172,6 @@ export const DynamicColumnsMixin = (superClass) =>
      * @protected
      */
     _isColumnElement(node) {
-      return node.nodeType === Node.ELEMENT_NODE && /\bcolumn\b/.test(node.localName);
+      return node.nodeType === Node.ELEMENT_NODE && /\bcolumn\b/u.test(node.localName);
     }
   };

package/src/vaadin-grid-event-context-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-event-context-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/vaadin-grid-filter-column.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { GridDefaultItem } from './vaadin-grid.js';

package/src/vaadin-grid-filter-column.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-filter.js';
@@ -60,7 +60,6 @@ class GridFilterColumn extends GridColumn {
     if (!filter) {
       filter = document.createElement('vaadin-grid-filter');
       textField = document.createElement('vaadin-text-field');
-      textField.setAttribute('slot', 'filter');
       textField.setAttribute('theme', 'small');
       textField.setAttribute('style', 'max-width: 100%;');
       textField.setAttribute('focus-target', '');

package/src/vaadin-grid-filter-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/vaadin-grid-filter.d.ts

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 
 /**
  * Fired when the `value` property changes.
@@ -40,7 +41,7 @@ export interface GridFilterEventMap extends HTMLElementEventMap, GridFilterCusto
  *
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class GridFilter extends HTMLElement {
+declare class GridFilter extends ControllerMixin(HTMLElement) {
   /**
    * JS Path of the property in the item used for filtering the data.
    */

package/src/vaadin-grid-filter.js

@@ -1,12 +1,14 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/text-field/src/vaadin-text-field.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * `<vaadin-grid-filter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
@@ -35,7 +37,7 @@ import { Debouncer } from '@vaadin/component-base/src/debounce.js';
  *
  * @extends HTMLElement
  */
-class GridFilter extends class extends PolymerElement {} {
+class GridFilter extends ControllerMixin(PolymerElement) {
   static get template() {
     return html`
       <style>
@@ -44,14 +46,12 @@ class GridFilter extends class extends PolymerElement {} {
           max-width: 100%;
         }
 
-        #filter {
+        ::slotted(*) {
           width: 100%;
           box-sizing: border-box;
         }
       </style>
-      <slot name="filter">
-        <vaadin-text-field id="filter" value="{{value}}"></vaadin-text-field>
-      </slot>
+      <slot></slot>
     `;
   }
 
@@ -75,39 +75,42 @@ class GridFilter extends class extends PolymerElement {} {
       },
 
       /** @private */
-      _connected: Boolean,
+      _textField: {
+        type: Object,
+      },
     };
   }
 
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    this._connected = true;
-  }
-
   static get observers() {
-    return ['_filterChanged(path, value, _connected)'];
+    return ['_filterChanged(path, value, _textField)'];
   }
 
   /** @protected */
   ready() {
     super.ready();
 
-    const child = this.firstElementChild;
-    if (child && child.getAttribute('slot') !== 'filter') {
-      console.warn('Make sure you have assigned slot="filter" to the child elements of <vaadin-grid-filter>');
-      child.setAttribute('slot', 'filter');
-    }
+    this._filterController = new SlotController(this, '', 'vaadin-text-field', {
+      initializer: (field) => {
+        field.addEventListener('value-changed', (e) => {
+          this.value = e.detail.value;
+        });
+
+        this._textField = field;
+      },
+    });
+    this.addController(this._filterController);
   }
 
   /** @private */
-  _filterChanged(path, value, connected) {
-    if (path === undefined || value === undefined || !connected) {
+  _filterChanged(path, value, textField) {
+    if (path === undefined || value === undefined || !textField) {
       return;
     }
     if (this._previousValue === undefined && value === '') {
       return;
     }
+
+    textField.value = value;
     this._previousValue = value;
 
     this._debouncerFilterChanged = Debouncer.debounce(this._debouncerFilterChanged, timeOut.after(200), () => {
@@ -116,7 +119,9 @@ class GridFilter extends class extends PolymerElement {} {
   }
 
   focus() {
-    this.$.filter.focus();
+    if (this._textField) {
+      this._textField.focus();
+    }
   }
 }
 

package/src/vaadin-grid-helpers.js

@@ -1,8 +1,25 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
+
+/**
+ * @param {HTMLTableRowElement} row the table row
+ * @return {HTMLTableCellElement[]} array of cells
+ */
+export function getBodyRowCells(row) {
+  return Array.from(row.querySelectorAll('[part~="cell"]:not([part~="details-cell"])'));
+}
+
+/**
+ * @param {HTMLElement} container the DOM element with children
+ * @param {Function} callback function to call on each child
+ */
+export function iterateChildren(container, callback) {
+  [...container.children].forEach(callback);
+}
 
 /**
  * @param {Array<Object>} columns array of columns to be modified
@@ -21,3 +38,89 @@ export function updateColumnOrders(columns, scope, baseOrder) {
     c += 1;
   });
 }
+
+/**
+ * @param {!HTMLElement} element
+ * @param {string} attribute
+ * @param {boolean | string | null | undefined} value
+ */
+export function updateState(element, attribute, value) {
+  switch (typeof value) {
+    case 'boolean':
+      element.toggleAttribute(attribute, value);
+      break;
+    case 'string':
+      element.setAttribute(attribute, value);
+      break;
+    default:
+      // Value set to null / undefined
+      element.removeAttribute(attribute);
+      break;
+  }
+}
+
+/**
+ * @param {!HTMLElement} element
+ * @param {boolean | string | null | undefined} value
+ * @param {string} part
+ */
+export function updatePart(element, value, part) {
+  if (value || value === '') {
+    addValueToAttribute(element, 'part', part);
+  } else {
+    removeValueFromAttribute(element, 'part', part);
+  }
+}
+
+/**
+ * @param {HTMLTableCellElement[]} cells
+ * @param {string} part
+ * @param {boolean | string | null | undefined} value
+ */
+export function updateCellsPart(cells, part, value) {
+  cells.forEach((cell) => {
+    updatePart(cell, value, part);
+  });
+}
+
+/**
+ * @param {!HTMLElement} row
+ * @param {Object} states
+ * @param {boolean} appendValue
+ */
+export function updateRowStates(row, states, appendValue) {
+  const cells = getBodyRowCells(row);
+
+  Object.entries(states).forEach(([state, value]) => {
+    // Row state attribute
+    updateState(row, state, value);
+
+    const rowPart = appendValue ? `${state}-${value}-row` : `${state}-row`;
+
+    // Row part attribute
+    updatePart(row, value, rowPart);
+
+    // Cells part attribute
+    updateCellsPart(cells, `${rowPart}-cell`, value);
+  });
+}
+
+/**
+ * @param {!HTMLElement} cell
+ * @param {string} attribute
+ * @param {boolean | string | null | undefined} value
+ * @param {string} part
+ * @param {?string} oldPart
+ */
+export function updateCellState(cell, attribute, value, part, oldPart) {
+  // Toggle state attribute on the cell
+  updateState(cell, attribute, value);
+
+  // Remove old part from the attribute
+  if (oldPart) {
+    updatePart(cell, false, oldPart);
+  }
+
+  // Add new part to the cell attribute
+  updatePart(cell, value, part || `${attribute}-cell`);
+}

package/src/vaadin-grid-keyboard-navigation-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
@@ -77,6 +77,33 @@ export const KeyboardNavigationMixin = (superClass) =>
       };
     }
 
+    /** @private */
+    get __rowFocusMode() {
+      return (
+        this.__isRow(this._itemsFocusable) || this.__isRow(this._headerFocusable) || this.__isRow(this._footerFocusable)
+      );
+    }
+
+    set __rowFocusMode(value) {
+      ['_itemsFocusable', '_footerFocusable', '_headerFocusable'].forEach((prop) => {
+        const focusable = this[prop];
+        if (value) {
+          const parent = focusable && focusable.parentElement;
+          if (this.__isCell(focusable)) {
+            // Cell itself focusable (default)
+            this[prop] = parent;
+          } else if (this.__isCell(parent)) {
+            // Focus button mode is enabled for the column,
+            // button element inside the cell is focusable.
+            this[prop] = parent.parentElement;
+          }
+        } else if (!value && this.__isRow(focusable)) {
+          const cell = focusable.firstElementChild;
+          this[prop] = cell._focusButton || cell;
+        }
+      });
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -108,33 +135,6 @@ export const KeyboardNavigationMixin = (superClass) =>
       });
     }
 
-    /** @private */
-    get __rowFocusMode() {
-      return (
-        this.__isRow(this._itemsFocusable) || this.__isRow(this._headerFocusable) || this.__isRow(this._footerFocusable)
-      );
-    }
-
-    set __rowFocusMode(value) {
-      ['_itemsFocusable', '_footerFocusable', '_headerFocusable'].forEach((prop) => {
-        const focusable = this[prop];
-        if (value) {
-          const parent = focusable && focusable.parentElement;
-          if (this.__isCell(focusable)) {
-            // Cell itself focusable (default)
-            this[prop] = parent;
-          } else if (this.__isCell(parent)) {
-            // Focus button mode is enabled for the column,
-            // button element inside the cell is focusable.
-            this[prop] = parent.parentElement;
-          }
-        } else if (!value && this.__isRow(focusable)) {
-          const cell = focusable.firstElementChild;
-          this[prop] = cell._focusButton || cell;
-        }
-      });
-    }
-
     /** @private */
     _focusableChanged(focusable, oldFocusable) {
       if (oldFocusable) {
@@ -300,6 +300,7 @@ export const KeyboardNavigationMixin = (superClass) =>
       e.preventDefault();
 
       const visibleItemsCount = this._lastVisibleIndex - this._firstVisibleIndex - 1;
+      const isRTL = this.__isRTL;
 
       // Handle keyboard interaction as defined in:
       // https://w3c.github.io/aria-practices/#keyboard-interaction-24
@@ -308,10 +309,10 @@ export const KeyboardNavigationMixin = (superClass) =>
         dy = 0;
       switch (key) {
         case 'ArrowRight':
-          dx = this.__isRTL ? -1 : 1;
+          dx = isRTL ? -1 : 1;
           break;
         case 'ArrowLeft':
-          dx = this.__isRTL ? 1 : -1;
+          dx = isRTL ? 1 : -1;
           break;
         case 'Home':
           if (this.__rowFocusMode) {
@@ -361,8 +362,8 @@ export const KeyboardNavigationMixin = (superClass) =>
         return;
       }
 
-      const forwardsKey = this.__isRTL ? 'ArrowLeft' : 'ArrowRight';
-      const backwardsKey = this.__isRTL ? 'ArrowRight' : 'ArrowLeft';
+      const forwardsKey = isRTL ? 'ArrowLeft' : 'ArrowRight';
+      const backwardsKey = isRTL ? 'ArrowRight' : 'ArrowLeft';
       if (key === forwardsKey) {
         // "Right Arrow:"
         if (this.__rowFocusMode) {
@@ -585,7 +586,7 @@ export const KeyboardNavigationMixin = (superClass) =>
       const localTarget = e.composedPath()[0];
       const localTargetIsTextInput =
         localTarget.localName === 'input' &&
-        !/^(button|checkbox|color|file|image|radio|range|reset|submit)$/i.test(localTarget.type);
+        !/^(button|checkbox|color|file|image|radio|range|reset|submit)$/iu.test(localTarget.type);
 
       let wantInteracting;
       switch (key) {
@@ -723,7 +724,7 @@ export const KeyboardNavigationMixin = (superClass) =>
 
     /** @private */
     _onKeyUp(e) {
-      if (!/^( |SpaceBar)$/.test(e.key) || this.interacting) {
+      if (!/^( |SpaceBar)$/u.test(e.key) || this.interacting) {
         return;
       }
 

package/src/vaadin-grid-row-details-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-row-details-mixin.js

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { iterateChildren } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
@@ -78,7 +79,7 @@ export const RowDetailsMixin = (superClass) =>
 
       if (this._columnTree) {
         // Only update the rows if the column tree has already been initialized
-        Array.from(this.$.items.children).forEach((row) => {
+        iterateChildren(this.$.items, (row) => {
           if (!row.querySelector('[part~=details-cell]')) {
             this._updateRow(row, this._columnTree[this._columnTree.length - 1]);
             const isDetailsOpened = this._isDetailsOpened(row._item);
@@ -95,7 +96,7 @@ export const RowDetailsMixin = (superClass) =>
         return;
       }
 
-      [...this.$.items.children].forEach((row) => {
+      iterateChildren(this.$.items, (row) => {
         // Re-renders the row to possibly close the previously opened details.
         if (row.hasAttribute('details-opened')) {
           this._updateItem(row, row._item);
@@ -162,7 +163,7 @@ export const RowDetailsMixin = (superClass) =>
 
     /** @protected */
     _updateDetailsCellHeights() {
-      [...this.$.items.children].forEach((row) => {
+      iterateChildren(this.$.items, (row) => {
         this._updateDetailsCellHeight(row);
       });
     }

package/src/vaadin-grid-scroll-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-scroll-mixin.js

@@ -1,10 +1,11 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { animationFrame, microTask, timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { getNormalizedScrollLeft } from '@vaadin/component-base/src/dir-utils.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 
 const timeouts = {
@@ -41,6 +42,11 @@ export const ScrollMixin = (superClass) =>
       };
     }
 
+    /** @private */
+    get _scrollLeft() {
+      return this.$.table.scrollLeft;
+    }
+
     /** @private */
     get _scrollTop() {
       return this.$.table.scrollTop;
@@ -54,11 +60,6 @@ export const ScrollMixin = (superClass) =>
       this.$.table.scrollTop = top;
     }
 
-    /** @private */
-    get _scrollLeft() {
-      return this.$.table.scrollLeft;
-    }
-
     /** @protected */
     ready() {
       super.ready();
@@ -157,7 +158,7 @@ export const ScrollMixin = (superClass) =>
         overflow += ' top';
       }
 
-      const scrollLeft = this.__getNormalizedScrollLeft(table);
+      const scrollLeft = getNormalizedScrollLeft(table, this.getAttribute('dir'));
       if (scrollLeft > 0) {
         overflow += ' start';
       }
@@ -167,7 +168,7 @@ export const ScrollMixin = (superClass) =>
       }
 
       if (this.__isRTL) {
-        overflow = overflow.replace(/start|end/gi, (matched) => {
+        overflow = overflow.replace(/start|end/giu, (matched) => {
           return matched === 'start' ? 'end' : 'start';
         });
       }
@@ -255,7 +256,7 @@ export const ScrollMixin = (superClass) =>
       const scrollWidth = this.$.table.scrollWidth;
       const clientWidth = this.$.table.clientWidth;
       const scrollLeft = Math.max(0, this.$.table.scrollLeft);
-      const normalizedScrollLeft = this.__getNormalizedScrollLeft(this.$.table);
+      const normalizedScrollLeft = getNormalizedScrollLeft(this.$.table, this.getAttribute('dir'));
 
       // Position header, footer and items container
       const transform = `translate(${-scrollLeft}px, 0)`;