@justeattakeaway/pie-button 1.6.7 → 1.7.0

package/custom-elements.json

@@ -328,6 +328,15 @@
               },
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
+            },
             {
               "kind": "method",
               "name": "_simulateNativeButtonClick",
@@ -386,10 +395,6 @@
                   }
                 }
               ]
-            },
-            {
-              "kind": "method",
-              "name": "focus"
             }
           ],
           "mixins": [

package/dist/index.d.ts

@@ -144,6 +144,12 @@ export declare class PieButton extends PieButton_base implements ButtonProps {
     href: ButtonProps['href'];
     rel: ButtonProps['rel'];
     target: ButtonProps['target'];
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     /**
      * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
      * This is done so that we trigger native form actions, such as submit and reset in the browser. The performance impact of adding and removing a single button to the DOM
@@ -164,7 +170,6 @@ export declare class PieButton extends PieButton_base implements ButtonProps {
     renderAnchor(classes: ClassInfo): TemplateResult<1>;
     renderButton(classes: ClassInfo): TemplateResult<1>;
     render(): TemplateResult<1>;
-    focus(): void;
     static styles: CSSResult;
 }
 

package/dist/index.js

@@ -1,4 +1,4 @@
-import { LitElement as It, html as z, nothing as S, unsafeCSS as Lt } from "lit";
+import { LitElement as pt, html as z, nothing as S, unsafeCSS as Lt } from "lit";
 import { classMap as mt } from "lit/directives/class-map.js";
 import { ifDefined as U } from "lit/directives/if-defined.js";
 import { property as m } from "lit/decorators.js";
@@ -6,7 +6,7 @@ import { FormControlMixin as Tt, validPropertyValues as C, safeCustomElement as
 import "@justeattakeaway/pie-spinner";
 (function() {
   (function(l) {
-    const r = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), _ = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), L = {
+    const r = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), _ = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), L = {
       ariaAtomic: "aria-atomic",
       ariaAutoComplete: "aria-autocomplete",
       ariaBusy: "aria-busy",
@@ -49,7 +49,7 @@ import "@justeattakeaway/pie-spinner";
       ariaValueNow: "aria-valuenow",
       ariaValueText: "aria-valuetext",
       role: "role"
-    }, pt = (e, t) => {
+    }, ht = (e, t) => {
       for (let i in L) {
         t[i] = null;
         let o = null;
@@ -59,7 +59,7 @@ import "@justeattakeaway/pie-spinner";
             return o;
           },
           set(n) {
-            o = n, e.isConnected ? e.setAttribute(a, n) : F.set(e, t);
+            o = n, e.isConnected ? e.setAttribute(a, n) : A.set(e, t);
           }
         });
       }
@@ -78,7 +78,7 @@ import "@justeattakeaway/pie-spinner";
       const a = !t || e.disabled;
       for (; o; )
         o.formDisabledCallback && a && D(o, e.disabled), o = i.nextNode();
-    }, tt = { attributes: !0, attributeFilter: ["disabled", "name"] }, T = P() ? new MutationObserver((e) => {
+    }, tt = { attributes: !0, attributeFilter: ["disabled", "name"] }, T = O() ? new MutationObserver((e) => {
       for (const t of e) {
         const i = t.target;
         if (t.attributeName === "disabled" && (i.constructor.formAssociated ? D(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && Z(i)), t.attributeName === "name" && i.constructor.formAssociated) {
@@ -92,11 +92,11 @@ import "@justeattakeaway/pie-spinner";
         const { addedNodes: i, removedNodes: o } = t, a = Array.from(i), n = Array.from(o);
         a.forEach((s) => {
           var u;
-          if (d.has(s) && s.constructor.formAssociated && Y(s), F.has(s)) {
-            const h = F.get(s);
+          if (d.has(s) && s.constructor.formAssociated && Y(s), A.has(s)) {
+            const h = A.get(s);
             Object.keys(L).filter((y) => h[y] !== null).forEach((y) => {
               s.setAttribute(L[y], h[y]);
-            }), F.delete(s);
+            }), A.delete(s);
           }
           if (I.has(s)) {
             const h = I.get(s);
@@ -119,7 +119,7 @@ import "@justeattakeaway/pie-spinner";
         });
       });
     }
-    function ht(e) {
+    function ut(e) {
       e.forEach((t) => {
         const { removedNodes: i } = t;
         i.forEach((o) => {
@@ -128,12 +128,12 @@ import "@justeattakeaway/pie-spinner";
         });
       });
     }
-    const ut = (e) => {
+    const gt = (e) => {
       var t, i;
-      const o = new MutationObserver(ht);
+      const o = new MutationObserver(ut);
       !((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (i = o.observe) === null || i === void 0 || i.call(o, e, { childList: !0 }), Q.set(e, o);
     };
-    P() && new MutationObserver(R);
+    O() && new MutationObserver(R);
     const $ = {
       childList: !0,
       subtree: !0
@@ -146,7 +146,7 @@ import "@justeattakeaway/pie-spinner";
     }, it = (e, t) => {
       const i = document.createElement("input");
       return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), p.get(t).push(i), i;
-    }, gt = (e, t) => {
+    }, ft = (e, t) => {
       var i;
       p.set(t, []), (i = T.observe) === null || i === void 0 || i.call(T, e, tt);
     }, ot = (e, t) => {
@@ -158,11 +158,11 @@ import "@justeattakeaway/pie-spinner";
     }, V = (e) => {
       const t = Array.from(e.elements).filter((n) => !n.tagName.includes("-") && n.validity).map((n) => n.validity.valid), i = E.get(e) || [], o = Array.from(i).filter((n) => n.isConnected).map((n) => d.get(n).validity.valid), a = [...t, ...o].includes(!1);
       e.toggleAttribute("internals-invalid", a), e.toggleAttribute("internals-valid", !a);
-    }, ft = (e) => {
-      V(N(e.target));
     }, yt = (e) => {
       V(N(e.target));
     }, xt = (e) => {
+      V(N(e.target));
+    }, wt = (e) => {
       const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${e.id ? `,${i}[form='${e.id}']` : ""}`).join(",");
       e.addEventListener("click", (i) => {
         if (i.target.closest(t)) {
@@ -172,7 +172,7 @@ import "@justeattakeaway/pie-spinner";
           a.size && Array.from(a).reverse().map((u) => d.get(u).reportValidity()).includes(!1) && i.preventDefault();
         }
       });
-    }, wt = (e) => {
+    }, kt = (e) => {
       const t = E.get(e.target);
       t && t.size && t.forEach((i) => {
         i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
@@ -184,7 +184,7 @@ import "@justeattakeaway/pie-spinner";
           o.add(e);
         else {
           const a = /* @__PURE__ */ new Set();
-          a.add(e), E.set(t, a), xt(t), t.addEventListener("reset", wt), t.addEventListener("input", ft), t.addEventListener("change", yt);
+          a.add(e), E.set(t, a), wt(t), t.addEventListener("reset", kt), t.addEventListener("input", yt), t.addEventListener("change", xt);
         }
         k.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
           e.formAssociatedCallback.apply(e, [t]);
@@ -207,15 +207,15 @@ import "@justeattakeaway/pie-spinner";
         ot(e, i), rt(e, o, t);
       }
     };
-    function P() {
+    function O() {
       return typeof MutationObserver < "u";
     }
-    class kt {
+    class Et {
       constructor() {
         this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
       }
     }
-    const Et = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), zt = (e, t, i) => (e.valid = Mt(t), Object.keys(t).forEach((o) => e[o] = t[o]), i && V(i), e), Mt = (e) => {
+    const zt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), Mt = (e, t, i) => (e.valid = St(t), Object.keys(t).forEach((o) => e[o] = t[o]), i && V(i), e), St = (e) => {
       let t = !0;
       for (let i in e)
         i !== "valid" && e[i] !== !1 && (t = !1);
@@ -257,14 +257,14 @@ import "@justeattakeaway/pie-spinner";
       if (typeof t == "function" ? e !== t || !o : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
       return i === "m" ? o : i === "a" ? o.call(e) : o ? o.value : t.get(e);
     }
-    function St(e, t, i, o, a) {
+    function Ct(e, t, i, o, a) {
       if (typeof t == "function" ? e !== t || !0 : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
       return t.set(e, i), i;
     }
     var M;
-    class Ct {
+    class Ft {
       constructor(t) {
-        M.set(this, void 0), St(this, M, t);
+        M.set(this, void 0), Ct(this, M, t);
         for (let i = 0; i < t.length; i++) {
           let o = t[i];
           this[i] = o, o.hasAttribute("name") && (this[o.getAttribute("name")] = o);
@@ -304,7 +304,7 @@ import "@justeattakeaway/pie-spinner";
           if (u.length === 0)
             return s;
           const h = Array.from(s).concat(u).sort((w, y) => w.compareDocumentPosition ? w.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
-          return new Ct(h);
+          return new Ft(h);
         }
       });
     }
@@ -315,8 +315,8 @@ import "@justeattakeaway/pie-spinner";
       constructor(t) {
         if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
           throw new TypeError("Illegal constructor");
-        const i = t.getRootNode(), o = new kt();
-        this.states = new H(t), r.set(this, t), b.set(this, o), d.set(t, this), pt(t, this), gt(t, this), Object.seal(this), i instanceof DocumentFragment && ut(i);
+        const i = t.getRootNode(), o = new Et();
+        this.states = new H(t), r.set(this, t), b.set(this, o), d.set(t, this), ht(t, this), ft(t, this), Object.seal(this), i instanceof DocumentFragment && gt(i);
       }
       checkValidity() {
         const t = r.get(this);
@@ -377,10 +377,10 @@ import "@justeattakeaway/pie-spinner";
         const n = b.get(this), s = {};
         for (const w in t)
           s[w] = t[w];
-        Object.keys(s).length === 0 && Et(n);
+        Object.keys(s).length === 0 && zt(n);
         const u = Object.assign(Object.assign({}, n), s);
         delete u.valid;
-        const { valid: h } = zt(n, u, this.form);
+        const { valid: h } = Mt(n, u, this.form);
         if (!h && !i)
           throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
         f.set(this, h ? "" : i), a.isConnected ? (a.toggleAttribute("internals-invalid", !h), a.toggleAttribute("internals-valid", h), a.setAttribute("aria-invalid", `${!h}`)) : I.set(a, this);
@@ -402,7 +402,7 @@ import "@justeattakeaway/pie-spinner";
         return x(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
       }
     }
-    function Ft() {
+    function It() {
       if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
         return !1;
       class e extends HTMLElement {
@@ -458,7 +458,7 @@ import "@justeattakeaway/pie-spinner";
         }), typeof Element < "u") {
           let t = function(...o) {
             const a = i.apply(this, o);
-            if (G.set(this, a), P()) {
+            if (G.set(this, a), O()) {
               const n = new MutationObserver(R);
               window.ShadyDOM ? n.observe(this, $) : n.observe(a, $), _.set(this, n);
             }
@@ -467,20 +467,20 @@ import "@justeattakeaway/pie-spinner";
           const i = Element.prototype.attachShadow;
           Element.prototype.attachShadow = t;
         }
-        P() && typeof document < "u" && new MutationObserver(R).observe(document.documentElement, $), typeof HTMLFormElement < "u" && At(), (e || typeof window < "u" && !window.CustomStateSet) && B();
+        O() && typeof document < "u" && new MutationObserver(R).observe(document.documentElement, $), typeof HTMLFormElement < "u" && At(), (e || typeof window < "u" && !window.CustomStateSet) && B();
       }
     }
-    return !!customElements.polyfillWrapFlushCallback || (Ft() ? typeof window < "u" && !window.CustomStateSet && B(HTMLElement.prototype.attachInternals) : vt(!1)), l.forceCustomStateSetPolyfill = B, l.forceElementInternalsPolyfill = vt, Object.defineProperty(l, "__esModule", { value: !0 }), l;
+    return !!customElements.polyfillWrapFlushCallback || (It() ? typeof window < "u" && !window.CustomStateSet && B(HTMLElement.prototype.attachInternals) : vt(!1)), l.forceCustomStateSetPolyfill = B, l.forceElementInternalsPolyfill = vt, Object.defineProperty(l, "__esModule", { value: !0 }), l;
   })({});
 })();
-const O = class O extends It {
+const P = class P extends pt {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", O.v);
+    this.getAttribute("v") || this.setAttribute("v", P.v);
   }
 };
-O.v = "1.6.7";
-let j = O;
-const Nt = ["button", "a"], Pt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Jt = ["productive", "expressive"], Ot = ["submit", "button", "reset"], _t = [
+P.v = "1.7.0";
+let j = P;
+const Nt = ["button", "a"], Ot = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Jt = ["productive", "expressive"], Pt = ["submit", "button", "reset"], _t = [
   "primary",
   "primary-alternative",
   "secondary",
@@ -507,7 +507,7 @@ var Dt = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, v = (l, r,
     (k = l[f]) && (d = (p ? k(r, b, d) : k(d)) || d);
   return p && d && Dt(r, b, d), d;
 };
-const A = "pie-button";
+const F = "pie-button";
 let c = class extends Tt(j) {
   constructor() {
     super(...arguments), this.tag = g.tag, this.size = g.size, this.type = g.type, this.variant = g.variant, this.iconPlacement = g.iconPlacement, this.disabled = g.disabled, this.isLoading = g.isLoading, this.isFullWidth = g.isFullWidth, this.isResponsive = g.isResponsive, this._handleFormKeyDown = (l) => {
@@ -621,31 +621,28 @@ let c = class extends Tt(j) {
     };
     return d === "a" ? this.renderAnchor(k) : this.renderButton(k);
   }
-  focus() {
-    var l, r;
-    (r = (l = this.shadowRoot) == null ? void 0 : l.querySelector("button")) == null || r.focus();
-  }
 };
+c.shadowRootOptions = { ...pt.shadowRootOptions, delegatesFocus: !0 };
 c.styles = Lt($t);
 v([
   m({ type: String }),
-  C(A, Nt, g.tag)
+  C(F, Nt, g.tag)
 ], c.prototype, "tag", 2);
 v([
   m({ type: String }),
-  C(A, Pt, g.size)
+  C(F, Ot, g.size)
 ], c.prototype, "size", 2);
 v([
   m({ type: String }),
-  C(A, Ot, g.type)
+  C(F, Pt, g.type)
 ], c.prototype, "type", 2);
 v([
   m({ type: String }),
-  C(A, _t, g.variant)
+  C(F, _t, g.variant)
 ], c.prototype, "variant", 2);
 v([
   m({ type: String }),
-  C(A, Rt, g.iconPlacement)
+  C(F, Rt, g.iconPlacement)
 ], c.prototype, "iconPlacement", 2);
 v([
   m({ type: Boolean })
@@ -703,8 +700,8 @@ export {
   Yt as formTargetTypes,
   Rt as iconPlacements,
   Jt as responsiveSizes,
-  Pt as sizes,
+  Ot as sizes,
   Nt as tags,
-  Ot as types,
+  Pt as types,
   _t as variants
 };

package/dist/react.d.ts

@@ -147,6 +147,12 @@ declare class PieButton_2 extends PieButton_base implements ButtonProps {
     href: ButtonProps['href'];
     rel: ButtonProps['rel'];
     target: ButtonProps['target'];
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     /**
      * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
      * This is done so that we trigger native form actions, such as submit and reset in the browser. The performance impact of adding and removing a single button to the DOM
@@ -167,7 +173,6 @@ declare class PieButton_2 extends PieButton_base implements ButtonProps {
     renderAnchor(classes: ClassInfo): TemplateResult<1>;
     renderButton(classes: ClassInfo): TemplateResult<1>;
     render(): TemplateResult<1>;
-    focus(): void;
     static styles: CSSResult;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "1.6.7",
+  "version": "1.7.0",
   "description": "PIE design system button built using web components",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.19.0",
+    "@justeattakeaway/pie-css": "0.21.0",
     "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.3",
     "cem-plugin-module-file-extensions": "0.0.5"

package/src/index.ts

@@ -1,5 +1,6 @@
 import {
     html, unsafeCSS, nothing, type PropertyValues, type TemplateResult,
+    LitElement,
 } from 'lit';
 import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -121,6 +122,8 @@ export class PieButton extends FormControlMixin(PieElement) implements ButtonPro
     @property({ type: String })
     public target: ButtonProps['target'];
 
+    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+
     /**
      * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
      * This is done so that we trigger native form actions, such as submit and reset in the browser. The performance impact of adding and removing a single button to the DOM
@@ -298,10 +301,6 @@ export class PieButton extends FormControlMixin(PieElement) implements ButtonPro
         return this.renderButton(classes);
     }
 
-    focus () {
-        this.shadowRoot?.querySelector('button')?.focus();
-    }
-
     // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);
 }