@justeattakeaway/pie-webc-core 1.0.0 → 1.1.0

package/dist/index.js

@@ -1,28 +1,27 @@
 import { customElement as a } from "lit/decorators.js";
-import { isServer as u } from "lit";
-const f = (t, e, n) => function(i, s) {
-  const o = `#${s}`;
-  Object.defineProperty(i, s, {
+const d = (t, e, n) => function(i, r) {
+  const o = `#${r}`;
+  Object.defineProperty(i, r, {
     get() {
       return this[o];
     },
     set(c) {
       e.includes(c) ? this[o] = c : (console.error(
-        `<${t}> Invalid value "${c}" provided for property "${s}".`,
+        `<${t}> Invalid value "${c}" provided for property "${r}".`,
         `Must be one of: ${e.join(" | ")}.`,
         `Falling back to default value: "${n}"`
       ), this[o] = n);
     },
     configurable: !0
   });
-}, m = (t) => function(n, r) {
-  const i = `#${r}`;
-  Object.defineProperty(n, r, {
+}, l = (t) => function(n, s) {
+  const i = `#${s}`;
+  Object.defineProperty(n, s, {
     get() {
       return this[i];
     },
-    set(s) {
-      (s == null || typeof s == "string" && s.trim() === "") && console.error(`<${t}> Missing required attribute "${r}"`), this[i] = s;
+    set(r) {
+      (r == null || typeof r == "string" && r.trim() === "") && console.error(`<${t}> Missing required attribute "${s}"`), this[i] = r;
     },
     configurable: !0
   });
@@ -32,7 +31,7 @@ function h(t) {
     try {
       a(t)(e);
     } catch (n) {
-      const r = customElements.get(t), i = r == null ? void 0 : r.v;
+      const s = customElements.get(t), i = s == null ? void 0 : s.v;
       e.v !== i && console.warn(
         `PIE Web Component: "${t}" was already registered with version: ${i ?? "No version data found. Icon components do not contain version data. If the component is not an icon, please report the missing version data."}.`,
         n
@@ -40,7 +39,7 @@ function h(t) {
     }
   };
 }
-function p(t) {
+function b(t) {
   return new CustomEvent(t.type, {
     detail: {
       sourceEvent: t
@@ -49,32 +48,48 @@ function p(t) {
     cancelable: t.cancelable
   });
 }
-function b(t, e, n) {
+function m(t, e, n) {
   e.startsWith("pie-") || console.warn("A custom event name should start with `pie-`");
-  const r = new CustomEvent(e, {
+  const s = new CustomEvent(e, {
     bubbles: !0,
     composed: !0,
     detail: n
   });
-  t.dispatchEvent(r);
+  t.dispatchEvent(s);
 }
-const g = (t) => {
+const p = (t) => {
   class e extends t {
+    constructor() {
+      super(...arguments), this._isRTL = !1, this.observer = null;
+    }
+    get isRTL() {
+      return this._isRTL;
+    }
+    set isRTL(s) {
+      this._isRTL = s, this.requestUpdate();
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.handleWritingDirectionUpdate(), this.observer = new MutationObserver(() => {
+        this.handleWritingDirectionUpdate();
+      }), this.observer.observe(document.documentElement, {
+        attributeFilter: ["dir"],
+        subtree: !0
+      });
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this.observer && (this.observer.disconnect(), this.observer = null);
+    }
     /**
-     * A getter to determine whether the text direction is right-to-left (RTL).
      * If the `dir` property is present on the component, it will be used to determine the text direction.
-     * If running on the client-side (not SSR) and the `dir` property is not present, the text direction will be inferred
-     * from the document's root element. This inference is not available during SSR.
-     * In all other cases, it will return `false`, indicating a left-to-right (LTR) text direction.
-     *
-     * @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
+     * If the `dir` property is not present, the text direction will be inferred from the document's root element.
+     * otherwise the default value is `false`, indicating a left-to-right (LTR) text direction.
      */
-    get isRTL() {
-      return this.dir ? this.dir === "rtl" : !u && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
+    handleWritingDirectionUpdate() {
+      this.isRTL = this.dir === "rtl" || document.documentElement.getAttribute("dir") === "rtl";
     }
   }
   return e;
-}, v = (t) => {
+}, f = (t) => {
   const n = class n extends t {
     get form() {
       return this._internals.form;
@@ -89,11 +104,11 @@ const g = (t) => {
   return e;
 };
 export {
-  v as FormControlMixin,
-  g as RtlMixin,
-  b as dispatchCustomEvent,
-  m as requiredProperty,
+  f as FormControlMixin,
+  p as RtlMixin,
+  m as dispatchCustomEvent,
+  l as requiredProperty,
   h as safeCustomElement,
-  f as validPropertyValues,
-  p as wrapNativeEvent
+  d as validPropertyValues,
+  b as wrapNativeEvent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-webc-core",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "PIE design system base classes, mixins and utilities for web components",
   "type": "module",
   "main": "dist/index.js",
@@ -28,7 +28,7 @@
     "lit": "3.2.0"
   },
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.20.1"
+    "@justeattakeaway/pie-components-config": "0.21.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/mixins/formControl/formControlMixin.ts

@@ -50,6 +50,8 @@ export const FormControlMixin =
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             constructor (...args: any[]) {
                 super(...args);
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
                 this._internals = this.attachInternals();
             }
         }

package/src/mixins/rtl/rtlMixin.ts

@@ -1,4 +1,4 @@
-import { type LitElement, isServer } from 'lit';
+import { type LitElement } from 'lit';
 import { type GenericConstructor } from '../types/GenericConstructor';
 
 /**
@@ -63,26 +63,47 @@ export const RtlMixin =
        * @implements {RTLInterface}
        */
         class RTLElement extends superClass implements RTLInterface {
+            private _isRTL = false;
+
+            get isRTL () {
+                return this._isRTL;
+            }
+
+            set isRTL (val: boolean) {
+                this._isRTL = val;
+                this.requestUpdate();
+            }
+
+            private observer: MutationObserver | null = null;
+
+            connectedCallback () {
+                super.connectedCallback();
+                this.handleWritingDirectionUpdate();
+
+                this.observer = new MutationObserver(() => {
+                    this.handleWritingDirectionUpdate();
+                });
+
+                this.observer.observe(document.documentElement, {
+                    attributeFilter: ['dir'],
+                    subtree: true,
+                });
+            }
+
+            disconnectedCallback () {
+                super.disconnectedCallback();
+                if (!this.observer) return;
+                this.observer.disconnect();
+                this.observer = null;
+            }
+
             /**
-             * A getter to determine whether the text direction is right-to-left (RTL).
              * If the `dir` property is present on the component, it will be used to determine the text direction.
-             * If running on the client-side (not SSR) and the `dir` property is not present, the text direction will be inferred
-             * from the document's root element. This inference is not available during SSR.
-             * In all other cases, it will return `false`, indicating a left-to-right (LTR) text direction.
-             *
-             * @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
+             * If the `dir` property is not present, the text direction will be inferred from the document's root element.
+             * otherwise the default value is `false`, indicating a left-to-right (LTR) text direction.
              */
-            get isRTL (): boolean {
-                if (this.dir) {
-                    return this.dir === 'rtl';
-                }
-
-                // If running on client-side and `dir` is not present, infer from the document's root element.
-                if (!isServer && !this.dir) {
-                    return document.documentElement.getAttribute('dir') === 'rtl';
-                }
-
-                return false;
+            private handleWritingDirectionUpdate () {
+                this.isRTL = this.dir === 'rtl' || document.documentElement.getAttribute('dir') === 'rtl';
             }
         }