From 56dc07e30dfb899c64fe54cf447c5aee02864cd6 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 4 Dec 2024 12:39:03 -0500 Subject: [PATCH] backport SL-2189 --- docs/docs/resources/changelog.md | 1 + src/components/carousel/carousel.ts | 6 +++--- src/components/details/details.ts | 8 +++++--- src/components/image-comparer/image-comparer.ts | 9 ++++++--- src/components/menu-item/menu-item.ts | 4 +++- src/components/menu-item/submenu-controller.ts | 4 ++-- src/components/popup/popup.ts | 4 +++- src/components/range/range.ts | 2 +- src/components/rating/rating.ts | 9 ++++++--- src/components/split-panel/split-panel.ts | 4 ++-- src/components/tab-group/tab-group.ts | 7 +++---- src/components/tree-item/tree-item.ts | 2 +- src/components/tree/tree.ts | 4 +++- 13 files changed, 39 insertions(+), 25 deletions(-) diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md index db5eb7cd0..f4662d9d8 100644 --- a/docs/docs/resources/changelog.md +++ b/docs/docs/resources/changelog.md @@ -32,6 +32,7 @@ During the alpha period, things might break! We take breaking changes very serio - Fixed a bug with certain bundlers when using dynamic imports - Improved alignment of the play icon in `` - Improved behavior of link buttons to not set `noreferrer noopener` by default +- Updated all checks for directionality to use `this.localize.dir()` instead of `el.matches(:dir(rtl))` so older browsers don't error out ## 3.0.0-alpha.3 diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts index 18efc9a78..48e363441 100644 --- a/src/components/carousel/carousel.ts +++ b/src/components/carousel/carousel.ts @@ -176,7 +176,7 @@ export default class WaCarousel extends WebAwesomeElement { private handleKeyDown(event: KeyboardEvent) { if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) { const target = event.target as HTMLElement; - const isRtl = this.matches(':dir(rtl)'); + const isRtl = this.localize.dir() === 'rtl'; const isFocusInPagination = target.closest('[part~="pagination-item"]') !== null; const isNext = event.key === 'ArrowDown' || (!isRtl && event.key === 'ArrowRight') || (isRtl && event.key === 'ArrowLeft'); @@ -501,7 +501,7 @@ export default class WaCarousel extends WebAwesomeElement { : clamp(index, 0, slides.length - slidesPerPage); this.activeSlide = newActiveSlide; - const isRtl = this.matches(':dir(rtl)'); + const isRtl = this.localize.dir() === 'rtl'; // Get the index of the next slide. For looping carousel it adds `slidesPerPage` // to normalize the starting index in order to ignore the first nth clones. @@ -552,7 +552,7 @@ export default class WaCarousel extends WebAwesomeElement { } // We can't rely on `this.matches()` on the server. - const isRTL = isServer ? this.dir === 'rtl' : this.matches(':dir(rtl)'); + const isRTL = isServer ? this.dir === 'rtl' : this.localize.dir() === 'rtl'; return html`
diff --git a/src/components/details/details.ts b/src/components/details/details.ts index fbeadd35e..a37558d2d 100644 --- a/src/components/details/details.ts +++ b/src/components/details/details.ts @@ -3,6 +3,7 @@ import { animate, parseDuration } from '../../internal/animate.js'; import { classMap } from 'lit/directives/class-map.js'; import { customElement, property, query } from 'lit/decorators.js'; import { html } from 'lit'; +import { LocalizeController } from '../../utilities/localize.js'; import { WaAfterHideEvent } from '../../events/after-hide.js'; import { WaAfterShowEvent } from '../../events/after-show.js'; import { WaHideEvent } from '../../events/hide.js'; @@ -52,13 +53,14 @@ import type { CSSResultGroup } from 'lit'; export default class WaDetails extends WebAwesomeElement { static styles: CSSResultGroup = [componentStyles, styles]; + private detailsObserver: MutationObserver; + private readonly localize = new LocalizeController(this); + @query('.details') details: HTMLDetailsElement; @query('.details__header') header: HTMLElement; @query('.details__body') body: HTMLElement; @query('.details__expand-icon-slot') expandIconSlot: HTMLSlotElement; - detailsObserver: MutationObserver; - /** * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state. @@ -208,7 +210,7 @@ export default class WaDetails extends WebAwesomeElement { } render() { - const isRtl = !this.hasUpdated ? this.dir === 'rtl' : this.matches(':dir(rtl)'); + const isRtl = !this.hasUpdated ? this.dir === 'rtl' : this.localize.dir() === 'rtl'; return html`
{ const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector("slot[name='submenu']"); const menu = submenuSlot?.assignedElements({ flatten: true }).filter(el => el.localName === 'wa-menu')[0]; - const isRtl = this.host.hasUpdated ? this.host.matches(':dir(rtl)') : this.host.dir === 'rtl'; + const isRtl = getComputedStyle(this.host).direction === 'rtl'; if (!menu) { return; @@ -265,7 +265,7 @@ export class SubmenuController implements ReactiveController { return html` `; } - const isRtl = this.host.matches(':dir(rtl)'); + const isRtl = getComputedStyle(this.host).direction === 'rtl'; return html` | undefined; + private readonly localize = new LocalizeController(this); /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */ @query('.popup') popup: HTMLElement; @@ -418,7 +420,7 @@ export default class WaPopup extends WebAwesomeElement { // // Source: https://github.com/floating-ui/floating-ui/blob/cb3b6ab07f95275730d3e6e46c702f8d4908b55c/packages/dom/src/utils/getDocumentRect.ts#L31 // - const isRtl = this.matches(':dir(rtl)'); + const isRtl = this.localize.dir() === 'rtl'; const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[placement.split('-')[0]]!; this.setAttribute('data-current-placement', placement); diff --git a/src/components/range/range.ts b/src/components/range/range.ts index 8eea5ad3c..962ebba1d 100644 --- a/src/components/range/range.ts +++ b/src/components/range/range.ts @@ -202,7 +202,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement { const inputWidth = this.input.offsetWidth; const tooltipWidth = this.output.offsetWidth; const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size'); - const isRtl = this.matches(':dir(rtl)'); + const isRtl = this.localize.dir() === 'rtl'; const percentAsWidth = inputWidth * percent; // The calculations are used to "guess" where the thumb is located. Since we're using the native range control diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts index e2ac7974b..c15624f3f 100644 --- a/src/components/rating/rating.ts +++ b/src/components/rating/rating.ts @@ -3,6 +3,7 @@ import { clamp } from '../../internal/math.js'; import { classMap } from 'lit/directives/class-map.js'; import { customElement, eventOptions, property, query, state } from 'lit/decorators.js'; import { html } from 'lit'; +import { LocalizeController } from '../../utilities/localize.js'; import { styleMap } from 'lit/directives/style-map.js'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import { WaChangeEvent } from '../../events/change.js'; @@ -37,6 +38,8 @@ import type { CSSResultGroup } from 'lit'; export default class WaRating extends WebAwesomeElement { static styles: CSSResultGroup = [componentStyles, styles]; + private readonly localize = new LocalizeController(this); + @query('.rating') rating: HTMLElement; @state() private hoverValue = 0; @@ -80,7 +83,7 @@ export default class WaRating extends WebAwesomeElement { } private getValueFromXCoordinate(coordinate: number) { - const isRtl = this.matches(':dir(rtl)'); + const isRtl = this.localize.dir() === 'rtl'; const { left, right, width } = this.rating.getBoundingClientRect(); const value = isRtl ? this.roundToPrecision(((right - coordinate) / width) * this.max, this.precision) @@ -109,7 +112,7 @@ export default class WaRating extends WebAwesomeElement { private handleKeyDown(event: KeyboardEvent) { const isLtr = this.matches(':dir(ltr)'); - const isRtl = this.matches(':dir(rtl)'); + const isRtl = this.localize.dir() === 'rtl'; const oldValue = this.value; if (this.disabled || this.readonly) { @@ -214,7 +217,7 @@ export default class WaRating extends WebAwesomeElement { } render() { - const isRtl = this.hasUpdated ? this.matches(':dir(rtl)') : this.dir; + const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir; const counter = Array.from(Array(this.max).keys()); let displayValue = 0; diff --git a/src/components/split-panel/split-panel.ts b/src/components/split-panel/split-panel.ts index 6454dd753..2929c4388 100644 --- a/src/components/split-panel/split-panel.ts +++ b/src/components/split-panel/split-panel.ts @@ -107,7 +107,7 @@ export default class WaSplitPanel extends WebAwesomeElement { } private handleDrag(event: PointerEvent) { - const isRtl = this.hasUpdated ? this.matches(':dir(rtl)') : this.dir === 'rtl'; + const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir === 'rtl'; if (this.disabled) { return; @@ -248,7 +248,7 @@ export default class WaSplitPanel extends WebAwesomeElement { render() { const gridTemplate = this.vertical ? 'gridTemplateRows' : 'gridTemplateColumns'; const gridTemplateAlt = this.vertical ? 'gridTemplateColumns' : 'gridTemplateRows'; - const isRtl = this.hasUpdated ? this.matches(':dir(rtl)') : this.dir === 'rtl'; + const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir === 'rtl'; const primary = ` clamp( 0%, diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts index cc3d1709c..80f2e3498 100644 --- a/src/components/tab-group/tab-group.ts +++ b/src/components/tab-group/tab-group.ts @@ -50,14 +50,13 @@ import type WaTabPanel from '../tab-panel/tab-panel.js'; export default class WaTabGroup extends WebAwesomeElement { static styles: CSSResultGroup = [componentStyles, styles]; - private readonly localize = new LocalizeController(this); - private activeTab?: WaTab; private mutationObserver: MutationObserver; private resizeObserver: ResizeObserver; private tabs: WaTab[] = []; private focusableTabs: WaTab[] = []; private panels: WaTabPanel[] = []; + private readonly localize = new LocalizeController(this); @query('.tab-group') tabGroup: HTMLElement; @query('.tab-group__body') body: HTMLSlotElement; @@ -196,7 +195,7 @@ export default class WaTabGroup extends WebAwesomeElement { // Move focus left or right if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) { const activeEl = this.tabs.find(t => t.matches(':focus')); - const isRtl = this.matches(':dir(rtl)'); + const isRtl = this.localize.dir() === 'rtl'; let nextTab: null | WaTab = null; if (activeEl?.tagName.toLowerCase() === 'wa-tab') { @@ -371,7 +370,7 @@ export default class WaTabGroup extends WebAwesomeElement { } render() { - const isRtl = this.hasUpdated ? this.matches(':dir(rtl)') : this.dir === 'rtl'; + const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir === 'rtl'; return html`
0) { event.preventDefault();