@justeattakeaway/pie-button - npm Package Compare versions

Comparing version 0.38.1-next.0 to 0.39.0

dist/index.js

 import { unsafeCSS as wt, LitElement as xt, html as N, nothing as O } from "lit";
-import { property as p } from "lit/decorators.js";
+import { property as m } from "lit/decorators.js";
 import { ifDefined as Et } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-spinner";
-const R = (d, n, a) => function(b, y) {
-  const u = `#${y}`;
-  Object.defineProperty(b, y, {
+const R = (d, n, a) => function(u, y) {
+  const b = `#${y}`;
+  Object.defineProperty(u, y, {
     get() {
-      return this[u];
+      return this[b];
     },
     set(f) {
-      n.includes(f) ? this[u] = f : (console.error(
+      const k = this[b];
+      n.includes(f) ? this[b] = f : (console.error(
         `<${d}> Invalid value "${f}" provided for property "${y}".`,
         `Must be one of: ${n.join(" | ")}.`,
         `Falling back to default value: "${a}"`
-      ), this[u] = a);
-    },
-    configurable: !0
+      ), this[b] = a), this.requestUpdate(y, k);
+    }
   });
@@ -37,3 +37,3 @@ };
 (function() {
-  const d = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), A = {
+  const d = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), A = {
     ariaAtomic: "aria-atomic",
@@ -90,3 +90,3 @@ ariaAutoComplete: "aria-autocomplete",
         set(l) {
-          r = l, i.isConnected ? i.setAttribute(o, l) : k.set(i, t);
+          r = l, i.isConnected ? i.setAttribute(o, l) : z.set(i, t);
         }
@@ -96,7 +96,7 @@ });
   };
-  function j(i) {
+  function q(i) {
     const t = c.get(i), { form: e } = t;
     X(i, e, t), Q(i, t.labels);
   }
-  const q = (i, t = !1) => {
+  const U = (i, t = !1) => {
     const e = document.createTreeWalker(i, NodeFilter.SHOW_ELEMENT, {
@@ -111,7 +111,7 @@ acceptNode(l) {
       r.formDisabledCallback && o && $(r, i.disabled), r = e.nextNode();
-  }, U = { attributes: !0, attributeFilter: ["disabled", "name"] }, z = T() ? new MutationObserver((i) => {
+  }, j = { attributes: !0, attributeFilter: ["disabled", "name"] }, M = T() ? new MutationObserver((i) => {
     for (const t of i) {
       const e = t.target;
-      if (t.attributeName === "disabled" && (e.constructor.formAssociated ? $(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && q(e)), t.attributeName === "name" && e.constructor.formAssociated) {
-        const r = c.get(e), o = M.get(e);
+      if (t.attributeName === "disabled" && (e.constructor.formAssociated ? $(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && U(e)), t.attributeName === "name" && e.constructor.formAssociated) {
+        const r = c.get(e), o = k.get(e);
         r.setFormValue(o);
@@ -126,7 +126,7 @@ }
         var g;
-        if (c.has(s) && s.constructor.formAssociated && j(s), k.has(s)) {
-          const v = k.get(s);
+        if (c.has(s) && s.constructor.formAssociated && q(s), z.has(s)) {
+          const v = z.get(s);
           Object.keys(A).filter((w) => v[w] !== null).forEach((w) => {
             s.setAttribute(A[w], v[w]);
-          }), k.delete(s);
+          }), z.delete(s);
         }
@@ -145,8 +145,8 @@ if (F.has(s)) {
           for (; w; )
-            j(w), w = E.nextNode();
+            q(w), w = E.nextNode();
         }
-        s.localName === "fieldset" && ((g = z.observe) == null || g.call(z, s, U), q(s, !0));
+        s.localName === "fieldset" && ((g = M.observe) == null || g.call(M, s, j), U(s, !0));
       }), l.forEach((s) => {
         const g = c.get(s);
-        g && a.get(g) && G(g), u.has(s) && u.get(s).disconnect();
+        g && a.get(g) && G(g), b.has(s) && b.get(s).disconnect();
       });
@@ -184,3 +184,3 @@ });
     var e;
-    a.set(t, []), (e = z.observe) == null || e.call(z, i, U);
+    a.set(t, []), (e = M.observe) == null || e.call(M, i, j);
   }, Q = (i, t) => {
@@ -252,3 +252,3 @@ if (t.length) {
   }
-  const pt = (i) => (i.badInput = !1, i.customError = !1, i.patternMismatch = !1, i.rangeOverflow = !1, i.rangeUnderflow = !1, i.stepMismatch = !1, i.tooLong = !1, i.tooShort = !1, i.typeMismatch = !1, i.valid = !0, i.valueMissing = !1, i), mt = (i, t, e) => (i.valid = bt(t), Object.keys(t).forEach((r) => i[r] = t[r]), e && S(e), i), bt = (i) => {
+  const mt = (i) => (i.badInput = !1, i.customError = !1, i.patternMismatch = !1, i.rangeOverflow = !1, i.rangeUnderflow = !1, i.stepMismatch = !1, i.tooLong = !1, i.tooShort = !1, i.typeMismatch = !1, i.valid = !0, i.valueMissing = !1, i), pt = (i, t, e) => (i.valid = bt(t), Object.keys(t).forEach((r) => i[r] = t[r]), e && S(e), i), bt = (i) => {
     let t = !0;
@@ -414,3 +414,3 @@ for (let e in i)
         });
-      M.set(e, t);
+      k.set(e, t);
     }
@@ -425,9 +425,9 @@ setValidity(t, e, r) {
         s[E] = t[E];
-      Object.keys(s).length === 0 && pt(l);
+      Object.keys(s).length === 0 && mt(l);
       const g = { ...l, ...s };
       delete g.valid;
-      const { valid: v } = mt(l, g, this.form);
+      const { valid: v } = pt(l, g, this.form);
       if (!v && !e)
         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.");
-      b.set(this, v ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !v), o.toggleAttribute("internals-valid", v), o.setAttribute("aria-invalid", `${!v}`)) : F.set(o, this);
+      u.set(this, v ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !v), o.toggleAttribute("internals-valid", v), o.setAttribute("aria-invalid", `${!v}`)) : F.set(o, this);
     }
@@ -440,3 +440,3 @@ get shadowRoot() {
       const t = d.get(this);
-      return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), b.get(this);
+      return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), u.get(this);
     }
@@ -512,3 +512,3 @@ get validity() {
           const o = new MutationObserver(P);
-          window.ShadyDOM ? o.observe(this, _) : o.observe(r, _), u.set(this, o);
+          window.ShadyDOM ? o.observe(this, _) : o.observe(r, _), b.set(this, o);
         }
@@ -523,6 +523,6 @@ return r;
 })();
-var At = Object.defineProperty, St = Object.getOwnPropertyDescriptor, m = (d, n, a, c) => {
-  for (var b = c > 1 ? void 0 : c ? St(n, a) : n, y = d.length - 1, u; y >= 0; y--)
-    (u = d[y]) && (b = (c ? u(n, a, b) : u(b)) || b);
-  return c && b && At(n, a, b), b;
+var At = Object.defineProperty, St = Object.getOwnPropertyDescriptor, p = (d, n, a, c) => {
+  for (var u = c > 1 ? void 0 : c ? St(n, a) : n, y = d.length - 1, b; y >= 0; y--)
+    (b = d[y]) && (u = (c ? b(n, a, u) : b(u)) || u);
+  return c && u && At(n, a, u), u;
 };
@@ -593,8 +593,8 @@ const L = "pie-button";
       isFullWidth: c,
-      variant: b,
+      variant: u,
       size: y,
-      isLoading: u,
+      isLoading: b,
       isResponsive: f,
-      iconPlacement: M,
-      responsiveSize: k
+      iconPlacement: k,
+      responsiveSize: z
     } = this;
@@ -606,13 +606,13 @@ return N`
                 type=${n}
-                variant=${b}
+                variant=${u}
                 size=${y}
-                responsiveSize=${Et(k)}
+                responsiveSize=${Et(z)}
                 ?disabled=${a}
                 ?isFullWidth=${c}
                 ?isResponsive=${f}
-                ?isLoading=${u}>
-                    ${u ? this.renderSpinner() : O}
-                    ${M === "leading" ? N`<slot name="icon"></slot>` : O}
+                ?isLoading=${b}>
+                    ${b ? this.renderSpinner() : O}
+                    ${k === "leading" ? N`<slot name="icon"></slot>` : O}
                     <slot></slot>
-                    ${M === "trailing" ? N`<slot name="icon"></slot>` : O}
+                    ${k === "trailing" ? N`<slot name="icon"></slot>` : O}
             </button>`;
@@ -627,53 +627,53 @@ }
 h.styles = wt(Ft);
-m([
-  p(),
+p([
+  m(),
   R(L, zt, "medium")
 ], h.prototype, "size", 2);
-m([
-  p(),
+p([
+  m(),
   R(L, Mt, "submit")
 ], h.prototype, "type", 2);
-m([
-  p(),
+p([
+  m(),
   R(L, Ct, "primary")
 ], h.prototype, "variant", 2);
-m([
-  p({ type: String }),
+p([
+  m({ type: String }),
   R(L, Lt, "leading")
 ], h.prototype, "iconPlacement", 2);
-m([
-  p({ type: Boolean })
+p([
+  m({ type: Boolean })
 ], h.prototype, "disabled", 2);
-m([
-  p({ type: Boolean, reflect: !0 })
+p([
+  m({ type: Boolean, reflect: !0 })
 ], h.prototype, "isLoading", 2);
-m([
-  p({ type: Boolean })
+p([
+  m({ type: Boolean })
 ], h.prototype, "isFullWidth", 2);
-m([
-  p({ type: Boolean })
+p([
+  m({ type: Boolean })
 ], h.prototype, "isResponsive", 2);
-m([
-  p({ type: String })
+p([
+  m({ type: String })
 ], h.prototype, "name", 2);
-m([
-  p({ type: String })
+p([
+  m({ type: String })
 ], h.prototype, "value", 2);
-m([
-  p()
+p([
+  m()
 ], h.prototype, "formaction", 2);
-m([
-  p()
+p([
+  m()
 ], h.prototype, "formenctype", 2);
-m([
-  p()
+p([
+  m()
 ], h.prototype, "formmethod", 2);
-m([
-  p({ type: Boolean })
+p([
+  m({ type: Boolean })
 ], h.prototype, "formnovalidate", 2);
-m([
-  p()
+p([
+  m()
 ], h.prototype, "formtarget", 2);
-m([
-  p({ type: String })
+p([
+  m({ type: String })
 ], h.prototype, "responsiveSize", 2);
@@ -680,0 +680,0 @@ kt(L, h);

dist/react.d.ts

 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
-import type { ReactWebComponent } from '@lit/react';
+import type { ReactWebComponent } from '@lit-labs/react';
 import type { TemplateResult } from 'lit';
@@ -6,0 +6,0 @@

dist/react.js

@@ -1,4 +0,4 @@
-import * as y from "react";
+import * as w from "react";
 import { PieButton as E } from "./index.js";
-import { formEncodingtypes as k, formMethodTypes as C, formTargetTypes as S, iconPlacements as j, responsiveSizes as x, sizes as z, types as A, variants as H } from "./index.js";
+import { formEncodingtypes as k, formMethodTypes as z, formTargetTypes as A, iconPlacements as D, responsiveSizes as G, sizes as H, types as O, variants as W } from "./index.js";
 import "lit";
@@ -13,33 +13,56 @@ import "lit/decorators.js";
  */
-const N = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), v = /* @__PURE__ */ new WeakMap(), g = (t, c, a, l, u) => {
-  const m = u == null ? void 0 : u[c];
-  m === void 0 || a === l ? (t[c] = a, a == null && c in HTMLElement.prototype && t.removeAttribute(c)) : ((i, n, o) => {
-    let s = v.get(i);
-    s === void 0 && v.set(i, s = /* @__PURE__ */ new Map());
-    let r = s.get(n);
-    o !== void 0 ? r === void 0 ? (s.set(n, r = { handleEvent: o }), i.addEventListener(n, r)) : r.handleEvent = o : r !== void 0 && (s.delete(n), i.removeEventListener(n, r));
-  })(t, m, a);
-}, h = ({ react: t, tagName: c, elementClass: a, events: l, displayName: u }) => {
-  const m = new Set(Object.keys(l ?? {})), i = t.forwardRef((n, o) => {
-    const s = t.useRef(null), r = t.useRef(null), p = {}, d = {};
-    for (const [e, f] of Object.entries(n))
-      N.has(e) ? p[e === "className" ? "class" : e] = f : m.has(e) || e in a.prototype ? d[e] = f : p[e] = f;
-    return t.useLayoutEffect(() => {
-      if (r.current !== null) {
-        for (const e in d)
-          g(r.current, e, n[e], s.current ? s.current[e] : void 0, l);
-        s.current = n;
-      }
-    }), t.useLayoutEffect(() => {
+const b = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), g = /* @__PURE__ */ new WeakMap(), M = (t, o, m, c, d) => {
+  const n = d == null ? void 0 : d[o];
+  n === void 0 || m === c ? m == null && o in HTMLElement.prototype ? t.removeAttribute(o) : t[o] = m : ((r, s, u) => {
+    let a = g.get(r);
+    a === void 0 && g.set(r, a = /* @__PURE__ */ new Map());
+    let l = a.get(s);
+    u !== void 0 ? l === void 0 ? (a.set(s, l = { handleEvent: u }), r.addEventListener(s, l)) : l.handleEvent = u : l !== void 0 && (a.delete(s), r.removeEventListener(s, l));
+  })(t, n, m);
+}, P = (t, o) => {
+  typeof t == "function" ? t(o) : t.current = o;
+};
+function B(t = window.React, o, m, c, d) {
+  let n, r, s;
+  if (o === void 0) {
+    const p = t;
+    ({ tagName: r, elementClass: s, events: c, displayName: d } = p), n = p.react;
+  } else
+    n = t, s = m, r = o;
+  const u = n.Component, a = n.createElement, l = new Set(Object.keys(c ?? {}));
+  class f extends u {
+    constructor() {
+      super(...arguments), this.o = null;
+    }
+    t(e) {
+      if (this.o !== null)
+        for (const h in this.i)
+          M(this.o, h, this.props[h], e ? e[h] : void 0, c);
+    }
+    componentDidMount() {
       var e;
-      (e = r.current) == null || e.removeAttribute("defer-hydration");
-    }, []), p.suppressHydrationWarning = !0, t.createElement(c, { ...p, ref: t.useCallback((e) => {
-      r.current = e, typeof o == "function" ? o(e) : o !== null && (o.current = e);
-    }, [o]) });
-  });
-  return i.displayName = u ?? a.name, i;
-}, M = h({
+      this.t(), (e = this.o) === null || e === void 0 || e.removeAttribute("defer-hydration");
+    }
+    componentDidUpdate(e) {
+      this.t(e);
+    }
+    render() {
+      const { _$Gl: e, ...h } = this.props;
+      this.h !== e && (this.u = (i) => {
+        e !== null && P(e, i), this.o = i, this.h = e;
+      }), this.i = {};
+      const v = { ref: this.u };
+      for (const [i, y] of Object.entries(h))
+        b.has(i) ? v[i === "className" ? "class" : i] = y : l.has(i) || i in s.prototype ? this.i[i] = y : v[i] = y;
+      return v.suppressHydrationWarning = !0, a(r, v);
+    }
+  }
+  f.displayName = d ?? s.name;
+  const N = n.forwardRef((p, e) => a(f, { ...p, _$Gl: e }, p == null ? void 0 : p.children));
+  return N.displayName = f.displayName, N;
+}
+const S = B({
   displayName: "PieButton",
   elementClass: E,
-  react: y,
+  react: w,
   tagName: "pie-button",
@@ -49,11 +72,11 @@ events: {}
 export {
-  M as PieButton,
+  S as PieButton,
   k as formEncodingtypes,
-  C as formMethodTypes,
-  S as formTargetTypes,
-  j as iconPlacements,
-  x as responsiveSizes,
-  z as sizes,
-  A as types,
-  H as variants
+  z as formMethodTypes,
+  A as formTargetTypes,
+  D as iconPlacements,
+  G as responsiveSizes,
+  H as sizes,
+  O as types,
+  W as variants
 };

package.json

 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.38.1-next.0",
+  "version": "0.39.0",
   "description": "PIE design system button built using web components",
@@ -40,6 +40,6 @@ "type": "module",
   "dependencies": {
-    "@justeattakeaway/pie-spinner": "0.2.2-next.0",
-    "@justeattakeaway/pie-webc-core": "0.12.0-next.0",
+    "@justeattakeaway/pie-spinner": "0.2.1",
+    "@justeattakeaway/pie-webc-core": "0.11.0",
     "element-internals-polyfill": "1.3.8"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

87858

increased by0.54%

Lines of code

1402

increased by1.67%

Dependency changes

• + Added@justeattakeaway/pie-spinner@0.2.1(transitive)

• + Added@justeattakeaway/pie-webc-core@0.11.0(transitive)

• - Removed@justeattakeaway/pie-spinner@0.2.2-next.0(transitive)

• - Removed@justeattakeaway/pie-webc-core@0.12.0-next.0(transitive)

• Updated@justeattakeaway/pie-spinner@0.2.1

• Updated@justeattakeaway/pie-webc-core@0.11.0