chore: refactor dir management in SpectrumElement

Author: rubencarvalho

1st-gen/tools/base/test/base.test.ts

@@ -21,16 +21,16 @@ describe('Base', () => {
     after(() => {
         document.dir = '';
     });
-    it('sets `dir` from `document`', async () => {
+    it('component understands `dir` from `document`', async () => {
         document.dir = 'rtl';
         const el = await fixture<DirElement>(html`
             <dir-element></dir-element>
         `);
 
         await elementUpdated(el);
 
-        expect(el.dir).to.equal('rtl');
-        expect(el.isLTR).to.be.false;
+        const dir = getComputedStyle(el).direction;
+        expect(dir).to.equal('rtl');
     });
     it('has a static VERSION property', () => {
         expect(DirElement.VERSION).to.equal(version);

2nd-gen/packages/core/shared/base/Base.ts

@@ -13,10 +13,6 @@
 import { LitElement, ReactiveElement } from 'lit';
 
 import { version } from './version.js';
-type ThemeRoot = HTMLElement & {
-    startManagingContentDirection: (el: HTMLElement) => void;
-    stopManagingContentDirection: (el: HTMLElement) => void;
-};
 
 type Constructor<T = Record<string, unknown>> = {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -28,36 +24,8 @@ export interface SpectrumInterface {
     shadowRoot: ShadowRoot;
     isLTR: boolean;
     hasVisibleFocusInTree(): boolean;
-    dir: 'ltr' | 'rtl';
 }
 
-const observedForElements: Set<HTMLElement> = new Set();
-
-const updateRTL = (): void => {
-    const dir =
-        document.documentElement.dir === 'rtl'
-            ? document.documentElement.dir
-            : 'ltr';
-    observedForElements.forEach((el) => {
-        el.setAttribute('dir', dir);
-    });
-};
-
-const rtlObserver = new MutationObserver(updateRTL);
-
-rtlObserver.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ['dir'],
-});
-
-type ContentDirectionManager = HTMLElement & {
-    startManagingContentDirection?(): void;
-};
-
-const canManageContentDirection = (el: ContentDirectionManager): boolean =>
-    typeof el.startManagingContentDirection !== 'undefined' ||
-    el.tagName === 'SP-THEME';
-
 export function SpectrumMixin<T extends Constructor<ReactiveElement>>(
     constructor: T
 ): T & Constructor<SpectrumInterface> {
@@ -66,12 +34,6 @@ export function SpectrumMixin<T extends Constructor<ReactiveElement>>(
          * @private
          */
         public override shadowRoot!: ShadowRoot;
-        private _dirParent?: HTMLElement;
-
-        /**
-         * @private
-         */
-        public override dir!: 'ltr' | 'rtl';
 
         /**
          * @private
@@ -126,68 +88,16 @@ export function SpectrumMixin<T extends Constructor<ReactiveElement>>(
                 return activeElement.matches('.focus-visible');
             }
         }
-
-        public override connectedCallback(): void {
-            if (!this.hasAttribute('dir')) {
-                let dirParent = ((this as HTMLElement).assignedSlot ||
-                    this.parentNode) as HTMLElement;
-                while (
-                    dirParent !== document.documentElement &&
-                    !canManageContentDirection(
-                        dirParent as ContentDirectionManager
-                    )
-                ) {
-                    dirParent = ((dirParent as HTMLElement).assignedSlot || // step into the shadow DOM of the parent of a slotted node
-                        dirParent.parentNode || // DOM Element detected
-                        (dirParent as unknown as ShadowRoot)
-                            .host) as HTMLElement;
-                }
-                this.dir =
-                    dirParent.dir === 'rtl' ? dirParent.dir : this.dir || 'ltr';
-                if (dirParent === document.documentElement) {
-                    observedForElements.add(this);
-                } else {
-                    const { localName } = dirParent;
-                    if (
-                        localName.search('-') > -1 &&
-                        !customElements.get(localName)
-                    ) {
-                        /* c8 ignore next 5 */
-                        customElements.whenDefined(localName).then(() => {
-                            (
-                                dirParent as ThemeRoot
-                            ).startManagingContentDirection(this);
-                        });
-                    } else {
-                        (dirParent as ThemeRoot).startManagingContentDirection(
-                            this
-                        );
-                    }
-                }
-                this._dirParent = dirParent as HTMLElement;
-            }
-            super.connectedCallback();
-        }
-
-        public override disconnectedCallback(): void {
-            super.disconnectedCallback();
-            if (this._dirParent) {
-                if (this._dirParent === document.documentElement) {
-                    observedForElements.delete(this);
-                } else {
-                    (this._dirParent as ThemeRoot).stopManagingContentDirection(
-                        this
-                    );
-                }
-                this.removeAttribute('dir');
-            }
-        }
     }
     return SpectrumMixinElement;
 }
 
 export class SpectrumElement extends SpectrumMixin(LitElement) {
     static VERSION = version;
+
+    public override get dir(): CSSStyleDeclaration['direction'] {
+        return getComputedStyle(this).direction ?? 'ltr';
+    }
 }
 
 if (process.env.NODE_ENV === 'development') {