@justeattakeaway/pie-text-input 0.27.2 → 0.27.4

package/custom-elements.json

@@ -153,7 +153,8 @@
                 "text": "TextInputProps['name']"
               },
               "privacy": "public",
-              "attribute": "name"
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",

package/dist/index.js

@@ -1,18 +1,18 @@
-import { LitElement as ht, nothing as Nt, html as pt, unsafeCSS as Lt } from "lit";
-import { property as u, query as ft } from "lit/decorators.js";
-import { ifDefined as f } from "lit/directives/if-defined.js";
+import { LitElement as ft, nothing as Nt, html as pt, unsafeCSS as Lt } from "lit";
+import { property as u, query as ht } from "lit/decorators.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
 import { classMap as $t } from "lit/directives/class-map.js";
 import { live as mt } from "lit/directives/live.js";
 import { FormControlMixin as Ot, RtlMixin as Rt, wrapNativeEvent as Pt, validPropertyValues as Z, defineCustomElement as _t } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-assistive-text";
-var Ht = Object.defineProperty, Dt = (v, l, h, x) => {
+var Ht = Object.defineProperty, Dt = (v, l, f, x) => {
   for (var s = void 0, g = v.length - 1, E; g >= 0; g--)
-    (E = v[g]) && (s = E(l, h, s) || s);
-  return s && Ht(l, h, s), s;
+    (E = v[g]) && (s = E(l, f, s) || s);
+  return s && Ht(l, f, s), s;
 };
-class gt extends ht {
+class gt extends ft {
   constructor() {
-    super(...arguments), this.v = "0.27.2";
+    super(...arguments), this.v = "0.27.4";
   }
 }
 Dt([
@@ -28,7 +28,7 @@ const zt = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
 };
 (function() {
   (function(v) {
-    const l = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), V = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), C = {
+    const l = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), V = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), C = {
       ariaAtomic: "aria-atomic",
       ariaAutoComplete: "aria-autocomplete",
       ariaBusy: "aria-busy",
@@ -338,13 +338,13 @@ const zt = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
         if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
           throw new TypeError("Illegal constructor");
         const a = t.getRootNode(), i = new Mt();
-        this.states = new J(t), l.set(this, t), h.set(this, i), s.set(t, this), B(t, this), bt(t, this), Object.seal(this), a instanceof DocumentFragment && yt(a);
+        this.states = new J(t), l.set(this, t), f.set(this, i), s.set(t, this), B(t, this), bt(t, this), Object.seal(this), a instanceof DocumentFragment && yt(a);
       }
       checkValidity() {
         const t = l.get(this);
         if (M(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
           return !0;
-        const a = h.get(this);
+        const a = f.get(this);
         if (!a.valid) {
           const i = new Event("invalid", {
             bubbles: !1,
@@ -396,7 +396,7 @@ const zt = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
         if (M(n, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
           throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
         L.set(this, i);
-        const o = h.get(this), r = {};
+        const o = f.get(this), r = {};
         for (const k in t)
           r[k] = t[k];
         Object.keys(r).length === 0 && kt(o);
@@ -417,7 +417,7 @@ const zt = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
       }
       get validity() {
         const t = l.get(this);
-        return M(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), h.get(this);
+        return M(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), f.get(this);
       }
       get willValidate() {
         const t = l.get(this);
@@ -495,18 +495,18 @@ const zt = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
     return !!customElements.polyfillWrapFlushCallback || (Vt() ? typeof window < "u" && !window.CustomStateSet && Q(HTMLElement.prototype.attachInternals) : ut(!1)), v.forceCustomStateSetPolyfill = Q, v.forceElementInternalsPolyfill = ut, Object.defineProperty(v, "__esModule", { value: !0 }), v;
   })({});
 })();
-var Ut = Object.defineProperty, d = (v, l, h, x) => {
+var Ut = Object.defineProperty, d = (v, l, f, x) => {
   for (var s = void 0, g = v.length - 1, E; g >= 0; g--)
-    (E = v[g]) && (s = E(l, h, s) || s);
-  return s && Ut(l, h, s), s;
+    (E = v[g]) && (s = E(l, f, s) || s);
+  return s && Ut(l, f, s), s;
 };
 const q = "pie-text-input", Y = "assistive-text", W = class W extends Ot(Rt(gt)) {
   constructor() {
     super(...arguments), this.type = w.type, this.value = w.value, this.disabled = w.disabled, this.readonly = w.readonly, this.status = w.status, this.size = w.size, this.required = !1, this.handleInput = (l) => {
       this.value = l.target.value, this._internals.setFormValue(this.value);
     }, this.handleChange = (l) => {
-      const h = Pt(l);
-      this.dispatchEvent(h);
+      const f = Pt(l);
+      this.dispatchEvent(f);
     };
   }
   /**
@@ -541,7 +541,7 @@ const q = "pie-text-input", Y = "assistive-text", W = class W extends Ot(Rt(gt))
   render() {
     const {
       assistiveText: l,
-      autocomplete: h,
+      autocomplete: f,
       autoFocus: x,
       disabled: s,
       inputmode: g,
@@ -577,25 +577,25 @@ const q = "pie-text-input", Y = "assistive-text", W = class W extends Ot(Rt(gt))
                 <slot name="leadingIcon"></slot>
                 <slot name="leadingText"></slot>
                 <input
-                    type=${f(C)}
+                    type=${h(C)}
                     .value=${mt(B)}
-                    name=${f(S)}
+                    name=${h(S)}
                     ?disabled=${mt(s)}
-                    pattern=${f(N)}
-                    step=${f(L)}
-                    minlength=${f(F)}
-                    maxlength=${f(E)}
-                    min=${f(y)}
-                    max=${f(V)}
-                    autocomplete=${f(h)}
+                    pattern=${h(N)}
+                    step=${h(L)}
+                    minlength=${h(F)}
+                    maxlength=${h(E)}
+                    min=${h(y)}
+                    max=${h(V)}
+                    autocomplete=${h(f)}
                     ?autofocus=${x}
-                    inputmode=${f(g)}
-                    placeholder=${f($)}
+                    inputmode=${h(g)}
+                    placeholder=${h($)}
                     ?readonly=${T}
                     ?required=${R}
-                    aria-describedby=${f(l ? Y : void 0)}
+                    aria-describedby=${h(l ? Y : void 0)}
                     aria-invalid=${I === "error" ? "true" : "false"}
-                    aria-errormessage="${f(I === "error" ? Y : void 0)}"
+                    aria-errormessage="${h(I === "error" ? Y : void 0)}"
                     @input=${this.handleInput}
                     @change=${this.handleChange}
                     data-test-id="pie-text-input">
@@ -609,14 +609,14 @@ const q = "pie-text-input", Y = "assistive-text", W = class W extends Ot(Rt(gt))
             ${l ? pt`
                 <pie-assistive-text
                     id="${Y}"
-                    variant=${f(I)}
+                    variant=${h(I)}
                     data-test-id="pie-text-input-assistive-text">
                     ${l}
                 </pie-assistive-text>
             ` : Nt}`;
   }
 };
-W.shadowRootOptions = { ...ht.shadowRootOptions, delegatesFocus: !0 }, W.styles = Lt(zt);
+W.shadowRootOptions = { ...ft.shadowRootOptions, delegatesFocus: !0 }, W.styles = Lt(zt);
 let c = W;
 d([
   u({ type: String, reflect: !0 }),
@@ -626,7 +626,7 @@ d([
   u({ type: String })
 ], c.prototype, "value");
 d([
-  u({ type: String })
+  u({ type: String, reflect: !0 })
 ], c.prototype, "name");
 d([
   u({ type: Boolean, reflect: !0 })
@@ -682,10 +682,10 @@ d([
   u({ type: Boolean })
 ], c.prototype, "required");
 d([
-  ft("input")
+  ht("input")
 ], c.prototype, "input");
 d([
-  ft("input")
+  ht("input")
 ], c.prototype, "focusTarget");
 _t(q, c);
 export {

package/dist/react.d.ts

@@ -100,7 +100,7 @@ declare type PieTextInputEvents = {
     onChange?: (event: CustomEvent) => void;
 };
 
-declare type ReactBaseType = React_2.InputHTMLAttributes<HTMLInputElement>;
+declare type ReactBaseType = Omit<React_2.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInput' | 'size'>;
 
 export declare const sizes: readonly ["small", "medium", "large"];
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-text-input",
   "description": "PIE Design System Input built using Web Components",
-  "version": "0.27.2",
+  "version": "0.27.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",

package/src/defs-react.ts

@@ -1,3 +1,4 @@
 import type React from 'react';
 
-export type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>
+// Omit `size` and event types to avoid conflicting with PieTextInput's type definition
+export type ReactBaseType = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInput' | 'size'>

package/src/index.ts

@@ -44,7 +44,7 @@ export class PieTextInput extends FormControlMixin(RtlMixin(PieElement)) impleme
     @property({ type: String })
     public value = defaultProps.value;
 
-    @property({ type: String })
+    @property({ type: String, reflect: true })
     public name: TextInputProps['name'];
 
     @property({ type: Boolean, reflect: true })

package/src/react.ts

@@ -16,7 +16,7 @@ const PieTextInputReact = createComponent({
     },
 });
 
-type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>
+type ReactBaseType = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInput' | 'size'>
 
 type PieTextInputEvents = {
     onInput?: (event: InputEvent) => void;