@justeattakeaway/pie-webc-core - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20240404085438 to 0.0.0-snapshot-release-20240404092836

CHANGELOG.md

 # Changelog
 
-## 0.0.0-snapshot-release-20240404085438
+## 0.0.0-snapshot-release-20240404092836
 
@@ -5,0 +5,0 @@ ### Minor Changes

dist/index.js

@@ -1,3 +0,3 @@
-import { isServer as d } from "lit";
-const u = (t, e, r) => function(s, i) {
+import { isServer as c } from "lit";
+const m = (t, e, n) => function(s, i) {
   const o = `#${i}`;
@@ -12,10 +12,10 @@ Object.defineProperty(s, i, {
         `Must be one of: ${e.join(" | ")}.`,
-        `Falling back to default value: "${r}"`
-      ), this[o] = r);
+        `Falling back to default value: "${n}"`
+      ), this[o] = n);
     },
     configurable: !0
   });
-}, m = (t) => function(r, n) {
-  const s = `#${n}`;
-  Object.defineProperty(r, n, {
+}, f = (t) => function(n, r) {
+  const s = `#${r}`;
+  Object.defineProperty(n, r, {
     get() {
@@ -25,3 +25,3 @@ return this[s];
     set(i) {
-      (i == null || typeof i == "string" && i.trim() === "") && console.error(`<${t}> Missing required attribute "${n}"`), this[s] = i;
+      (i == null || typeof i == "string" && i.trim() === "") && console.error(`<${t}> Missing required attribute "${r}"`), this[s] = i;
     },
@@ -31,6 +31,6 @@ configurable: !0
 };
-function f(t, e) {
+function h(t, e) {
   customElements.get(t) ? console.warn(`PIE Web Component: "${t}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(t, e);
 }
-function h(t) {
+function p(t) {
   return new CustomEvent(t.type, {
@@ -44,10 +44,10 @@ detail: {
 }
-function p(t, e, r) {
+function g(t, e, n) {
   e.startsWith("pie-") || console.warn("A custom event name should start with `pie-`");
-  const n = new CustomEvent(e, {
+  const r = new CustomEvent(e, {
     bubbles: !0,
     composed: !0,
-    detail: r
+    detail: n
   });
-  t.dispatchEvent(n);
+  t.dispatchEvent(r);
 }
@@ -66,3 +66,3 @@ const b = (t) => {
     get isRTL() {
-      return this.dir ? this.dir === "rtl" : !d && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
+      return this.dir ? this.dir === "rtl" : !c && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
     }
@@ -72,33 +72,51 @@ }
 };
-class c {
+function d(t) {
+  const e = t.querySelectorAll("pie-input"), n = Array.from(e).find((r) => !r.validity.valid);
+  n == null || n.focus();
+}
+class l {
   constructor() {
-    this.forms = /* @__PURE__ */ new WeakMap();
+    this._forms = /* @__PURE__ */ new WeakMap();
   }
+  /**
+   * Performs any necessary operations when a form is submitted.
+   */
   handleSubmit(e) {
-    const n = e.target.querySelectorAll("pie-input"), s = Array.from(n).find((i) => !i.validity.valid);
-    s == null || s.focus();
+    const n = e.target;
+    d(n);
   }
+  /**
+   * Adds a form to the form manager and attaches a submit event listener to it.
+   */
   addForm(e) {
-    const r = this.forms.get(e);
-    if (r && r.listener)
+    if (this._forms.get(e))
       return;
-    const n = {
+    const r = {
       listener: this.handleSubmit,
       form: e
     };
-    e.addEventListener("submit", this.handleSubmit), this.forms.set(e, n);
+    e.addEventListener("submit", r.listener), this._forms.set(e, r);
   }
+  /**
+   * Removes a form from the form manager and the submit event listener from it.
+   * @param form - The form to remove from the form manager.
+   */
   deleteForm(e) {
-    const r = this.forms.get(e);
-    r != null && r.listener && e.removeEventListener("submit", this.handleSubmit), this.forms.delete(e);
+    const n = this._forms.get(e);
+    n != null && n.listener && e.removeEventListener("submit", n.listener), this._forms.delete(e);
   }
+  /**
+   * Retreives the PieFormData object associated with a form.
+   * @param form - The form to retrieve the PieFormData object of.
+   * @returns the PieFormData object associated with the form.
+   */
   getForm(e) {
-    return this.forms.get(e);
+    return this._forms.get(e);
   }
 }
-const g = (t) => {
+const F = (t) => {
   class e extends t {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(...n) {
-      super(...n), this._internals = this.attachInternals();
+    constructor(...r) {
+      super(...r), this._internals = this.attachInternals();
     }
@@ -109,4 +127,4 @@ get form() {
     connectedCallback() {
-      var n;
-      super.connectedCallback(), this.form && (window.pieFormManager || (window.pieFormManager = new c()), window.pieFormManager && (window.pieFormManager.addForm(this.form), this._managedForm = (n = window.pieFormManager.getForm(this.form)) == null ? void 0 : n.form));
+      var r;
+      super.connectedCallback(), this.form && (window.pieFormManager || (window.pieFormManager = new l()), window.pieFormManager && (window.pieFormManager.addForm(this.form), this._managedForm = (r = window.pieFormManager.getForm(this.form)) == null ? void 0 : r.form));
     }
@@ -120,10 +138,10 @@ disconnectedCallback() {
 export {
-  g as FormControlMixin,
-  c as PieFormManager,
+  F as FormControlMixin,
+  l as PieFormManager,
   b as RtlMixin,
-  f as defineCustomElement,
-  p as dispatchCustomEvent,
-  m as requiredProperty,
-  u as validPropertyValues,
-  h as wrapNativeEvent
+  h as defineCustomElement,
+  g as dispatchCustomEvent,
+  f as requiredProperty,
+  m as validPropertyValues,
+  p as wrapNativeEvent
 };

package.json

 {
   "name": "@justeattakeaway/pie-webc-core",
-  "version": "0.0.0-snapshot-release-20240404085438",
+  "version": "0.0.0-snapshot-release-20240404092836",
   "description": "PIE design system base classes, mixins and utilities for web components",
@@ -5,0 +5,0 @@ "type": "module",

src/forms/PieFormManager.ts

 import { PIEInputElement } from '../interfaces';
 
+/**
+ * Focuses the first invalid input of a form. The validity state of each input in the form is read and the first with `ValidityState.valid === false` is focused.
+ * @param form - The form element to focus the first invalid input of.
+ */
+function focusFirstInvalidInput (form: HTMLFormElement): void {
+    const allPieInputs = form.querySelectorAll('pie-input');
+    const firstInvalidInput = Array.from(allPieInputs).find((input) => !(input as ElementWithValidityState).validity.valid) as PIEInputElement | undefined;
+
+    firstInvalidInput?.focus();
+}
+
+/**
+ * Should be used as a singleton instance, attached to the Window object.
+ * Manages forms and their submit event listeners to perform operations such as focusing invalid input fields.
+ */
 export class PieFormManager {
-    private forms: WeakMap<HTMLFormElement, PieFormData> = new WeakMap();
+    // The forms are held in a WeakMap, so that they can be garbage collected if removed from the DOM.
+    private _forms: WeakMap<HTMLFormElement, PieFormData> = new WeakMap();
 
+    /**
+     * Performs any necessary operations when a form is submitted.
+     */
     private handleSubmit (event: Event) : void {
         const submittedForm = event.target as HTMLFormElement;
-        const allPieInputs = submittedForm.querySelectorAll('pie-input');
-        const firstInvalidInput = Array.from(allPieInputs).find((input) => !(input as ValidityElement).validity.valid) as PIEInputElement | undefined;
-
-        firstInvalidInput?.focus();
+        focusFirstInvalidInput(submittedForm);
     }
 
+    /**
+     * Adds a form to the form manager and attaches a submit event listener to it.
+     */
     public addForm (form: HTMLFormElement): void {
-        const existingEntry = this.forms.get(form);
+        const existingEntry = this._forms.get(form);
 
-        if (existingEntry && existingEntry.listener) {
+        if (existingEntry) {
             return;
@@ -26,23 +45,32 @@ }
 
-        form.addEventListener('submit', this.handleSubmit);
+        form.addEventListener('submit', data.listener as EventListener);
 
-        this.forms.set(form, data);
+        this._forms.set(form, data);
     }
 
+    /**
+     * Removes a form from the form manager and the submit event listener from it.
+     * @param form - The form to remove from the form manager.
+     */
     public deleteForm (form: HTMLFormElement): void {
-        const data = this.forms.get(form);
+        const data = this._forms.get(form);
 
         if (data?.listener) {
-            form.removeEventListener('submit', this.handleSubmit);
+            form.removeEventListener('submit', data.listener);
         }
 
-        this.forms.delete(form);
+        this._forms.delete(form);
     }
 
+    /**
+     * Retreives the PieFormData object associated with a form.
+     * @param form - The form to retrieve the PieFormData object of.
+     * @returns the PieFormData object associated with the form.
+     */
     public getForm (form: HTMLFormElement): PieFormData | undefined {
-        return this.forms.get(form);
+        return this._forms.get(form);
     }
 }
 
-type ValidityElement = Element & PIEInputElement;
+type ElementWithValidityState = Element & PIEInputElement;
 
@@ -49,0 +77,0 @@ type PieFormData = {

src/mixins/formControl/formControlMixin.ts

@@ -71,2 +71,3 @@ import type { LitElement } from 'lit';
                         window.pieFormManager.addForm(this.form);
+                        // Storing a reference to the form to be used in disconnectedCallback when this.form will be unavailable.
                         this._managedForm = window.pieFormManager.getForm(this.form)?.form;
@@ -73,0 +74,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

51100

increased by3.77%

Lines of code

1028

increased by4.68%

No dependency changes