@justeattakeaway/pie-webc-core 1.0.0 → 2.0.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, s) => function(r, i) {
+  const o = `#${i}`;
+  Object.defineProperty(r, i, {
     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 "${i}".`,
         `Must be one of: ${e.join(" | ")}.`,
-        `Falling back to default value: "${n}"`
-      ), this[o] = n);
+        `Falling back to default value: "${s}"`
+      ), this[o] = s);
     },
     configurable: !0
   });
-}, m = (t) => function(n, r) {
-  const i = `#${r}`;
-  Object.defineProperty(n, r, {
+}, l = (t) => function(s, n) {
+  const r = `#${n}`;
+  Object.defineProperty(s, n, {
     get() {
-      return this[i];
+      return this[r];
     },
-    set(s) {
-      (s == null || typeof s == "string" && s.trim() === "") && console.error(`<${t}> Missing required attribute "${r}"`), this[i] = s;
+    set(i) {
+      (i == null || typeof i == "string" && i.trim() === "") && console.error(`<${t}> Missing required attribute "${n}"`), this[r] = i;
     },
     configurable: !0
   });
@@ -31,16 +30,16 @@ function h(t) {
   return (e) => {
     try {
       a(t)(e);
-    } catch (n) {
-      const r = customElements.get(t), i = r == null ? void 0 : r.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
+    } catch (s) {
+      const n = customElements.get(t), r = n == null ? void 0 : n.v;
+      e.v !== r && console.warn(
+        `PIE Web Component: "${t}" was already registered with version: ${r ?? "No version data found. Icon components do not contain version data. If the component is not an icon, please report the missing version data."}.`,
+        s
       );
     }
   };
 }
-function p(t) {
+function b(t) {
   return new CustomEvent(t.type, {
     detail: {
       sourceEvent: t
@@ -49,51 +48,81 @@ function p(t) {
     cancelable: t.cancelable
   });
 }
-function b(t, e, n) {
+function p(t, e, s) {
   e.startsWith("pie-") || console.warn("A custom event name should start with `pie-`");
-  const r = new CustomEvent(e, {
+  const n = new CustomEvent(e, {
     bubbles: !0,
     composed: !0,
-    detail: n
+    detail: s
   });
-  t.dispatchEvent(r);
+  t.dispatchEvent(n);
 }
-const g = (t) => {
+const m = (t) => {
   class e extends t {
+    constructor() {
+      super(...arguments), this._isRTL = !1, this.observer = null;
+    }
+    get isRTL() {
+      return this._isRTL;
+    }
+    set isRTL(n) {
+      this._isRTL = n, 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) => {
-  const n = class n extends t {
+}, f = (t) => {
+  const s = class s extends t {
     get form() {
       return this._internals.form;
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(...i) {
-      super(...i), this._internals = this.attachInternals();
+    constructor(...r) {
+      super(...r), this._internals = this.attachInternals();
     }
   };
-  n.formAssociated = !0;
-  let e = n;
+  s.formAssociated = !0;
+  let e = s;
+  return e;
+}, v = (t) => {
+  const s = class s extends t {
+  };
+  s.shadowRootOptions = {
+    // The `as any` cast is a safe way to access the static property
+    // from the generic superclass constructor. LitElement provides a default.
+    // This is unfortunately unavoidable and a common issue with mixins in TS.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ...t.shadowRootOptions,
+    delegatesFocus: !0
+  };
+  let e = s;
   return e;
 };
 export {
-  v as FormControlMixin,
-  g as RtlMixin,
-  b as dispatchCustomEvent,
-  m as requiredProperty,
+  v as DelegatesFocusMixin,
+  f as FormControlMixin,
+  m as RtlMixin,
+  p 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": "2.0.0",
   "description": "PIE design system base classes, mixins and utilities for web components",
   "type": "module",
   "main": "dist/index.js",
@@ -27,8 +27,11 @@
   "dependencies": {
     "lit": "3.2.0"
   },
+  "peerDependencies": {
+    "@justeattakeaway/pie-css": "0.22.0"
+  },
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.20.1"
+    "@justeattakeaway/pie-components-config": "0.21.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/mixins/delegatesFocus/delegatesFocusMixin.ts

@@ -0,0 +1,51 @@
+import type { LitElement } from 'lit';
+import type { GenericConstructor } from '../types/GenericConstructor';
+
+/**
+ * Mixin to add `delegatesFocus: true` to a LitElement's shadow root options.
+ * This is useful for custom elements that act like form controls, allowing focus
+ * to be automatically delegated to the first focusable element inside the shadow DOM.
+ *
+ * @param superClass - The LitElement class to extend.
+ * @returns A class extending the provided LitElement with the delegatesFocus behaviour.
+ *
+ * @example
+ * ```typescript
+ * import { LitElement, html } from 'lit';
+ * import { DelegatesFocusMixin } from './path-to-DelegatesFocusMixin'; // Update the import path
+ *
+ * // Create a new component using the DelegatesFocusMixin
+ * class MyCustomInput extends DelegatesFocusMixin(LitElement) {
+ *   render() {
+ *     // The focus will automatically go to the input when the component is focused
+ *     return html`<input>`;
+ *   }
+ * }
+ *
+ * customElements.define('my-custom-input', MyCustomInput);
+ * ```
+ */
+export const DelegatesFocusMixin =
+    <T extends GenericConstructor<LitElement>>(superClass: T) => {
+        /**
+         * A LitElement with `delegatesFocus` enabled on its shadow root.
+         * @extends {LitElement}
+         */
+        class DelegatesFocusElement extends superClass {
+            /**
+             * Overrides shadow root options to include `delegatesFocus: true`, ensuring
+             * focus is passed into the component's shadow DOM to the first focusable element. It preserves
+             * any existing shadowRootOptions from the superclass.
+             */
+            static shadowRootOptions = {
+                // The `as any` cast is a safe way to access the static property
+                // from the generic superclass constructor. LitElement provides a default.
+                // This is unfortunately unavoidable and a common issue with mixins in TS.
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                ...(superClass as any).shadowRootOptions,
+                delegatesFocus: true,
+            };
+        }
+
+        return DelegatesFocusElement as T;
+    };

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/index.ts

@@ -1,4 +1,5 @@
 export * from './rtl/rtlMixin';
 export * from './formControl/formControlMixin';
+export * from './delegatesFocus/delegatesFocusMixin';
 
 export * from './types/GenericConstructor';

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';
             }
         }