feat(esl-utils): RTL type detection removed as it is out of current browser support list (#2913)

All supported browsers now handle `scrollLeft` according to spec.
RTE type detection was deprecated, and the normalization method was simplified.
Affected components: esl-tabs, esl-scrollbar

Author: fshovchko

src/modules/esl-scrollbar/core/esl-scrollbar.ts

@@ -2,7 +2,7 @@ import {ESLBaseElement} from '../../esl-base-element/core';
 import {ExportNs} from '../../esl-utils/environment/export-ns';
 import {isElement} from '../../esl-utils/dom/api';
 import {isRelativeNode} from '../../esl-utils/dom/traversing';
-import {isRTL, RTLScroll, normalizeScrollLeft} from '../../esl-utils/dom/rtl';
+import {isRTL, normalizeScrollLeft} from '../../esl-utils/dom/rtl';
 import {getTouchPoint, getOffsetPoint} from '../../esl-utils/dom/events';
 import {bind, ready, attr, boolAttr, listen} from '../../esl-utils/decorators';
 import {rafDecorator} from '../../esl-utils/async/raf';
@@ -184,7 +184,7 @@ export class ESLScrollbar extends ESLBaseElement {
   protected normalizePosition(position: number): number {
     const relativePosition = Math.min(1, Math.max(0, position));
     if (!isRTL(this.$target) || !this.horizontal) return relativePosition;
-    return RTLScroll.type === 'negative' ? (relativePosition - 1) : (1 - relativePosition);
+    return relativePosition - 1;
   }
 
   /** Scrolls target element to passed position */

src/modules/esl-tab/core/esl-tabs.ts

@@ -2,7 +2,7 @@ import {ExportNs} from '../../esl-utils/environment/export-ns';
 import {ESLBaseElement} from '../../esl-base-element/core';
 import {rafDecorator} from '../../esl-utils/async/raf';
 import {memoize, attr, listen, decorate, ready} from '../../esl-utils/decorators';
-import {isRTL, RTLScroll} from '../../esl-utils/dom/rtl';
+import {isRTL} from '../../esl-utils/dom/rtl';
 import {debounce} from '../../esl-utils/async/debounce';
 import {ESLResizeObserverTarget} from '../../esl-event-listener/core';
 import {ESLMediaRuleList} from '../../esl-media-query/core/esl-media-rule-list';
@@ -103,7 +103,7 @@ export class ESLTabs extends ESLBaseElement {
 
     const {offsetWidth, scrollWidth, scrollLeft} = $scrollableTarget;
     const max = scrollWidth - offsetWidth;
-    const invert = direction === 'left' || (isRTL(this) && RTLScroll.type !== 'reverse');
+    const invert = direction === 'left' || isRTL(this);
     const offset = invert ? -offsetWidth : offsetWidth;
 
     const left = Math.max(0, Math.min(max, scrollLeft + offset));
@@ -130,35 +130,31 @@ export class ESLTabs extends ESLBaseElement {
 
   /** Get scroll offset position from the selected item rectangle */
   protected calcScrollOffset(itemRect: DOMRect, areaRect: DOMRect): number | undefined {
-    const isReversedRTL = isRTL(this) && RTLScroll.type === 'reverse';
-
     if (this.currentScrollableType === 'center') {
-      const shift = itemRect.left + itemRect.width / 2 - (areaRect.left + areaRect.width / 2);
-      return isReversedRTL ? -shift : shift;
+      return itemRect.left + itemRect.width / 2 - (areaRect.left + areaRect.width / 2);
     }
 
     // item is out of area from the right side
     // else item out is of area from the left side
     if (itemRect.right > areaRect.right) {
-      return isReversedRTL ? Math.floor(areaRect.right - itemRect.right) : Math.ceil(itemRect.right - areaRect.right);
+      return Math.ceil(itemRect.right - areaRect.right);
     } else if (itemRect.left < areaRect.left) {
-      return isReversedRTL ? Math.ceil(areaRect.left - itemRect.left) : Math.floor(itemRect.left - areaRect.left);
+      return Math.floor(itemRect.left - areaRect.left);
     }
   }
 
   protected updateArrows(): void {
     const $scrollableTarget = this.$scrollableTarget;
     if (!$scrollableTarget) return;
 
-    const swapSides = isRTL(this) && RTLScroll.type === 'default';
     const scrollStart = Math.abs($scrollableTarget.scrollLeft) > 1;
     const scrollEnd = Math.abs($scrollableTarget.scrollLeft) + $scrollableTarget.clientWidth + 1 < $scrollableTarget.scrollWidth;
 
     const $rightArrow = this.querySelector('[data-tab-direction="right"]');
     const $leftArrow = this.querySelector('[data-tab-direction="left"]');
 
-    $leftArrow && $leftArrow.toggleAttribute('disabled', !(swapSides ? scrollEnd : scrollStart));
-    $rightArrow && $rightArrow.toggleAttribute('disabled', !(swapSides ? scrollStart : scrollEnd));
+    $leftArrow && $leftArrow.toggleAttribute('disabled', !scrollStart);
+    $rightArrow && $rightArrow.toggleAttribute('disabled', !scrollEnd);
   }
 
   protected updateMarkers(): void {

src/modules/esl-utils/dom/rtl.ts

@@ -1,56 +1,25 @@
-// TODO: Revisit using https://caniuse.com/mdn-api_element_scrollleft in 5.0.0
-/** RTL scroll browser behaviors */
-export type ScrollType = 'default' | 'negative' | 'reverse';
+const DEFAULT_SCROLL_TYPE = 'negative';
+
+/** @deprecated RTL scroll browser behaviors now always returns `negative` value */
+export type ScrollType = typeof DEFAULT_SCROLL_TYPE;
 
 /** Checks if the element in a RTL direction context */
 export const isRTL = (el?: HTMLElement | null): boolean => getComputedStyle(el || document.body).direction === 'rtl';
 
-/** Creates the dummy test element with a horizontal scroll presented */
-const createDummyScroll = (): HTMLElement => {
-  const el = document.createElement('div');
-  el.appendChild(document.createTextNode('ESL!'));
-  el.dir = 'rtl';
-  Object.assign(el.style, {
-    position: 'absolute',
-    top: '-1000px',
-    width: '4px',
-    height: '1px',
-    fontSize: '14px',
-    overflow: 'scroll'
-  });
-  return el;
-};
-
+/** @deprecated scroll type is now consistent and always returns a `negative` value */
 export const testRTLScrollType = (): ScrollType => {
-  let scrollType: ScrollType = 'default';
-  const el = createDummyScroll();
-  document.body.appendChild(el);
-  if (el.scrollLeft <= 0) {
-    el.scrollLeft = 2;
-    scrollType = el.scrollLeft < 2 ? 'negative' : 'reverse';
-  }
-  document.body.removeChild(el);
-  return scrollType;
+  return DEFAULT_SCROLL_TYPE;
 };
 
-let type: ScrollType | null = null;
-
+/** @deprecated scroll type is now consistent and always returns a `negative` value */
 export const RTLScroll = {
   /** @returns RTL scroll type (lazy, memoized) */
   get type(): ScrollType {
-    if (typeof type === 'string') return type;
-    return type = testRTLScrollType();
+    return DEFAULT_SCROLL_TYPE;
   }
 };
 
 export const normalizeScrollLeft = (el: HTMLElement, value: number | null = null, isRtl: boolean = isRTL(el)): number => {
   value = (value === null) ? el.scrollLeft : value;
-  switch (isRtl ? RTLScroll.type : '') {
-    case 'negative':
-      return el.scrollWidth - el.clientWidth + value;
-    case 'reverse':
-      return el.scrollWidth - el.clientWidth - value;
-    default:
-      return value;
-  }
+  return isRtl ? el.scrollWidth - el.clientWidth + value : value;
 };

src/modules/esl-utils/dom/test/rtl.test.ts

@@ -1,4 +1,4 @@
-import {RTLScroll, isRTL, normalizeScrollLeft} from '../rtl';
+import {isRTL, normalizeScrollLeft} from '../rtl';
 
 describe('RTLUtils', () => {
   describe('isRtl', () => {
@@ -29,19 +29,13 @@ describe('RTLUtils', () => {
       jest.spyOn(el, 'scrollWidth', 'get').mockImplementation(() => 1000);
       jest.spyOn(el, 'clientWidth', 'get').mockImplementation(() => 100);
       jest.spyOn(el, 'scrollLeft', 'get').mockImplementation(() => 200);
-      jest.spyOn(RTLScroll, 'type', 'get').mockImplementation(() => 'negative');
 
       expect(normalizeScrollLeft(el)).toBe(200);
       expect(normalizeScrollLeft(el, 50)).toBe(50);
       expect(normalizeScrollLeft(el, 50, false)).toBe(50);
       expect(normalizeScrollLeft(el, null, false)).toBe(200);
       expect(normalizeScrollLeft(el, 50, true)).toBe(950);
       expect(normalizeScrollLeft(el, null, true)).toBe(1100);
-
-      jest.spyOn(RTLScroll, 'type', 'get').mockImplementation(() => 'reverse');
-
-      expect(normalizeScrollLeft(el, 50, true)).toBe(850);
-      expect(normalizeScrollLeft(el, null, true)).toBe(700);
     });
   });
 });