@justeattakeaway/pie-webc-core 1.1.0 → 2.0.0

package/dist/index.js

@@ -1,27 +1,27 @@
 import { customElement as a } from "lit/decorators.js";
-const d = (t, e, n) => function(i, r) {
-  const o = `#${r}`;
-  Object.defineProperty(i, r, {
+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 "${r}".`,
+        `<${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
   });
-}, l = (t) => function(n, s) {
-  const i = `#${s}`;
-  Object.defineProperty(n, s, {
+}, l = (t) => function(s, n) {
+  const r = `#${n}`;
+  Object.defineProperty(s, n, {
     get() {
-      return this[i];
+      return this[r];
     },
-    set(r) {
-      (r == null || typeof r == "string" && r.trim() === "") && console.error(`<${t}> Missing required attribute "${s}"`), this[i] = r;
+    set(i) {
+      (i == null || typeof i == "string" && i.trim() === "") && console.error(`<${t}> Missing required attribute "${n}"`), this[r] = i;
     },
     configurable: !0
   });
@@ -30,11 +30,11 @@ function h(t) {
   return (e) => {
     try {
       a(t)(e);
-    } catch (n) {
-      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
+    } 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
       );
     }
   };
@@ -48,16 +48,16 @@ function b(t) {
     cancelable: t.cancelable
   });
 }
-function m(t, e, n) {
+function p(t, e, s) {
   e.startsWith("pie-") || console.warn("A custom event name should start with `pie-`");
-  const s = new CustomEvent(e, {
+  const n = new CustomEvent(e, {
     bubbles: !0,
     composed: !0,
-    detail: n
+    detail: s
   });
-  t.dispatchEvent(s);
+  t.dispatchEvent(n);
 }
-const p = (t) => {
+const m = (t) => {
   class e extends t {
     constructor() {
       super(...arguments), this._isRTL = !1, this.observer = null;
@@ -65,8 +65,8 @@ const p = (t) => {
     get isRTL() {
       return this._isRTL;
     }
-    set isRTL(s) {
-      this._isRTL = s, this.requestUpdate();
+    set isRTL(n) {
+      this._isRTL = n, this.requestUpdate();
     }
     connectedCallback() {
       super.connectedCallback(), this.handleWritingDirectionUpdate(), this.observer = new MutationObserver(() => {
@@ -90,23 +90,37 @@ const p = (t) => {
   }
   return e;
 }, f = (t) => {
-  const n = class n extends 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 DelegatesFocusMixin,
   f as FormControlMixin,
-  p as RtlMixin,
-  m as dispatchCustomEvent,
+  m as RtlMixin,
+  p as dispatchCustomEvent,
   l as requiredProperty,
   h as safeCustomElement,
   d as validPropertyValues,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-webc-core",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "PIE design system base classes, mixins and utilities for web components",
   "type": "module",
   "main": "dist/index.js",
@@ -27,6 +27,9 @@
   "dependencies": {
     "lit": "3.2.0"
   },
+  "peerDependencies": {
+    "@justeattakeaway/pie-css": "0.22.0"
+  },
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.0"
   },

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

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