@justeattakeaway/pie-checkbox - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20240530121907 to 0.0.0-snapshot-release-20240610111539

custom-elements.json

@@ -21,3 +21,3 @@ {
           },
-          "default": "{\n    // a default value for the html <input type=\"checkbox\" /> value attribute.\n    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n    value: 'on',\n    required: false,\n    indeterminate: false,\n    checked: false,\n}"
+          "default": "{\r\n    // a default value for the html <input type=\"checkbox\" /> value attribute.\r\n    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\r\n    value: 'on',\r\n    required: false,\r\n    defaultChecked: false,\r\n    indeterminate: false,\r\n    checked: false,\r\n}"
         }
@@ -87,2 +87,9 @@ ],
               "kind": "field",
+              "name": "defaultChecked",
+              "privacy": "public",
+              "attribute": "defaultChecked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
               "name": "disabled",
@@ -129,5 +136,5 @@ "type": {
               "type": {
-                "text": "HTMLInputElement | undefined"
+                "text": "HTMLInputElement"
               },
-              "privacy": "private"
+              "privacy": "public"
             },
@@ -141,3 +148,3 @@ {
               "privacy": "public",
-              "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
+              "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
               "readonly": true
@@ -174,3 +181,3 @@ },
               ],
-              "description": "Called after the disabled state of the element changes,\neither because the disabled attribute of this element was added or removed;\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
+              "description": "Called after the disabled state of the element changes,\r\neither because the disabled attribute of this element was added or removed;\r\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
             },
@@ -191,2 +198,13 @@ {
               "description": "Captures the native change event and wraps it in a custom event."
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Called when the form that owns this component is reset.\r\nSets the checked state to the default value."
             }
@@ -227,2 +245,6 @@ ],
             {
+              "name": "defaultChecked",
+              "fieldName": "defaultChecked"
+            },
+            {
               "name": "disabled",
@@ -229,0 +251,0 @@ "type": {

dist/index.d.ts

@@ -34,4 +34,8 @@ import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
     /**
-     * Indicates whether or not the checkbox is checked.
+     * The default checked state of the checkbox.
      */
+    defaultChecked?: boolean;
+    /**
+     * The checked state of the checkbox.
+     */
     checked?: boolean;
@@ -53,3 +57,3 @@ /**
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked'>;
+export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' | 'defaultChecked'>;
 
@@ -72,2 +76,3 @@ export declare const defaultProps: DefaultProps;
     checked: boolean;
+    defaultChecked: boolean;
     disabled?: CheckboxProps['disabled'];
@@ -77,3 +82,3 @@ required?: CheckboxProps['required'];
     aria: CheckboxProps['aria'];
-    private checkbox?;
+    checkbox: HTMLInputElement;
     /**
@@ -102,2 +107,7 @@ * (Read-only) returns a ValidityState with the validity states that this element is in.
     private handleChange;
+    /**
+     * Called when the form that owns this component is reset.
+     * Sets the checked state to the default value.
+     */
+    formResetCallback(): void;
     render(): TemplateResult<1>;
@@ -104,0 +114,0 @@ static styles: CSSResult;

dist/index.js

@@ -1,8 +0,8 @@
-import { LitElement as u, html as b, nothing as d, unsafeCSS as f } from "lit";
-import { FormControlMixin as y, RtlMixin as v, wrapNativeEvent as g, defineCustomElement as k } from "@justeattakeaway/pie-webc-core";
-import { live as x } from "lit/directives/live.js";
-import { property as a, query as $ } from "lit/decorators.js";
-import { ifDefined as C } from "lit/directives/if-defined.js";
+import { LitElement as u, html as f, nothing as h, unsafeCSS as b } from "lit";
+import { FormControlMixin as y, RtlMixin as k, wrapNativeEvent as v, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
+import { live as g } from "lit/directives/live.js";
+import { property as s, query as x } from "lit/decorators.js";
+import { ifDefined as $ } from "lit/directives/if-defined.js";
 const F = `*,*:after,*:before{box-sizing:inherit}
-`, p = {
+`, d = {
   // a default value for the html <input type="checkbox" /> value attribute.
@@ -12,14 +12,15 @@ // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
   required: !1,
+  defaultChecked: !1,
   indeterminate: !1,
   checked: !1
 };
-var _ = Object.defineProperty, q = Object.getOwnPropertyDescriptor, i = (h, e, n, s) => {
-  for (var o = s > 1 ? void 0 : s ? q(e, n) : e, l = h.length - 1, c; l >= 0; l--)
-    (c = h[l]) && (o = (s ? c(e, n, o) : c(o)) || o);
-  return s && o && _(e, n, o), o;
+var q = Object.defineProperty, A = Object.getOwnPropertyDescriptor, r = (p, e, l, a) => {
+  for (var o = a > 1 ? void 0 : a ? A(e, l) : e, n = p.length - 1, c; n >= 0; n--)
+    (c = p[n]) && (o = (a ? c(e, l, o) : c(o)) || o);
+  return a && o && q(e, l, o), o;
 };
 const O = "pie-checkbox";
-class t extends y(v(u)) {
+class t extends y(k(u)) {
   constructor() {
-    super(...arguments), this.value = p.value, this.checked = p.checked, this.required = p.required, this.indeterminate = p.indeterminate;
+    super(...arguments), this.value = d.value, this.checked = d.checked, this.defaultChecked = d.defaultChecked, this.required = d.required, this.indeterminate = d.indeterminate;
   }
@@ -37,3 +38,3 @@ /**
   handleFormAssociation() {
-    !!this._internals.form && !!this.name && this._internals.setFormValue(this.checked ? this.value : null);
+    !!this.form && !!this.name && this._internals.setFormValue(this.checked ? this.value : null);
   }
@@ -60,31 +61,38 @@ /**
   handleChange(e) {
-    const { checked: n } = e == null ? void 0 : e.currentTarget;
-    this.checked = n;
-    const s = g(e);
-    this.dispatchEvent(s), this.handleFormAssociation();
+    const { checked: l } = e == null ? void 0 : e.currentTarget;
+    this.checked = l;
+    const a = v(e);
+    this.dispatchEvent(a), this.handleFormAssociation();
   }
+  /**
+   * Called when the form that owns this component is reset.
+   * Sets the checked state to the default value.
+   */
+  formResetCallback() {
+    this.checked = this.defaultChecked, this.handleFormAssociation();
+  }
   render() {
     const {
       checked: e,
-      value: n,
-      name: s,
+      value: l,
+      name: a,
       label: o,
-      disabled: l,
+      disabled: n,
       required: c,
       indeterminate: m,
-      aria: r
+      aria: i
     } = this;
-    return b`
+    return f`
         <label data-test-id="checkbox-component">
             <input
                 type="checkbox"
-                .value=${n}
-                ?checked=${x(e)}
-                name=${C(s)}
-                ?disabled=${l}
+                .value=${l}
+                .checked=${g(e)}
+                name=${$(a)}
+                ?disabled=${n}
                 ?required=${c}
-                .indeterminate=${m}
-                aria-label=${(r == null ? void 0 : r.label) || d}
-                aria-labelledby=${o ? d : (r == null ? void 0 : r.labelledby) || d}
-                aria-describedby= ${(r == null ? void 0 : r.describedby) || d}
+                .indeterminate=${!!m}
+                aria-label=${(i == null ? void 0 : i.label) || h}
+                aria-labelledby=${o ? h : (i == null ? void 0 : i.labelledby) || h}
+                aria-describedby= ${(i == null ? void 0 : i.describedby) || h}
                 @change=${this.handleChange}
@@ -98,34 +106,37 @@ data-test-id="checkbox-input"
 t.shadowRootOptions = { ...u.shadowRootOptions, delegatesFocus: !0 };
-t.styles = f(F);
-i([
-  a({ type: String })
+t.styles = b(F);
+r([
+  s({ type: String })
 ], t.prototype, "value", 2);
-i([
-  a({ type: String })
+r([
+  s({ type: String })
 ], t.prototype, "label", 2);
-i([
-  a({ type: String })
+r([
+  s({ type: String })
 ], t.prototype, "name", 2);
-i([
-  a({ type: Boolean, reflect: !0 })
+r([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "checked", 2);
-i([
-  a({ type: Boolean, reflect: !0 })
+r([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "defaultChecked", 2);
+r([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled", 2);
-i([
-  a({ type: Boolean, reflect: !0 })
+r([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "required", 2);
-i([
-  a({ type: Boolean, reflect: !0 })
+r([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "indeterminate", 2);
-i([
-  a({ type: Object })
+r([
+  s({ type: Object })
 ], t.prototype, "aria", 2);
-i([
-  $('input[type="checkbox"]')
+r([
+  x('input[type="checkbox"]')
 ], t.prototype, "checkbox", 2);
-k(O, t);
+C(O, t);
 export {
   t as PieCheckbox,
-  p as defaultProps
+  d as defaultProps
 };

dist/react.d.ts

@@ -35,4 +35,8 @@ import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
     /**
-     * Indicates whether or not the checkbox is checked.
+     * The default checked state of the checkbox.
      */
+    defaultChecked?: boolean;
+    /**
+     * The checked state of the checkbox.
+     */
     checked?: boolean;
@@ -54,3 +58,3 @@ /**
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked'>;
+export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' | 'defaultChecked'>;
 
@@ -75,2 +79,3 @@ export declare const defaultProps: DefaultProps;
     checked: boolean;
+    defaultChecked: boolean;
     disabled?: CheckboxProps['disabled'];
@@ -80,3 +85,3 @@ required?: CheckboxProps['required'];
     aria: CheckboxProps['aria'];
-    private checkbox?;
+    checkbox: HTMLInputElement;
     /**
@@ -105,2 +110,7 @@ * (Read-only) returns a ValidityState with the validity states that this element is in.
     private handleChange;
+    /**
+     * Called when the form that owns this component is reset.
+     * Sets the checked state to the default value.
+     */
+    formResetCallback(): void;
     render(): TemplateResult<1>;
@@ -107,0 +117,0 @@ static styles: CSSResult;

package.json

 {
   "name": "@justeattakeaway/pie-checkbox",
   "description": "PIE Design System Checkbox built using Web Components",
-  "version": "0.0.0-snapshot-release-20240530121907",
+  "version": "0.0.0-snapshot-release-20240610111539",
   "type": "module",
@@ -6,0 +6,0 @@ "main": "dist/index.js",

README.md

@@ -33,7 +33,5 @@ <p align="center">
 ```bash
-# npm
-$ npm i @justeattakeaway/pie-checkbox
+npm i @justeattakeaway/pie-checkbox
 
-# yarn
-$ yarn add @justeattakeaway/pie-checkbox
+yarn add @justeattakeaway/pie-checkbox
 ```
@@ -84,3 +82,4 @@
 | `disabled` | `boolean` | `false` | Indicates whether or not the checkbox is disabled. |
-| `checked` | `boolean` | `false` | Indicates whether or not the checkbox is checked by default (when the page loads). |
+| `checked` | `boolean` | `false` | Controls whether or not the checkbox is checked. |
+| `defaultChecked` | `boolean` | `false` | Sets the default checked state for the checkbox. This does not directly set the initial checked state when the page loads, use `checked` for that. If the checkbox is inside a form which is reset, the `checked` state will be updated to match `defaultChecked`. |
 | `indeterminate` | `boolean` | `false` | Indicates whether the checkbox visually shows a horizontal line in the box instead of a check/tick. It has no impact on whether the checkbox's value is used in a form submission. That is decided by the checked state, regardless of the indeterminate state. |
@@ -112,2 +111,2 @@ | `aria` | `object` | {} | accepts `label`, `labeledby` and `describedby` keys with string values. |
 
-Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

src/defs.ts

@@ -30,4 +30,9 @@ import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
     /**
-     * Indicates whether or not the checkbox is checked.
+     * The default checked state of the checkbox.
      */
+    defaultChecked?: boolean;
+
+    /**
+     * The checked state of the checkbox.
+     */
     checked?: boolean;
@@ -52,3 +57,3 @@
 
-export type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' >;
+export type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' | 'defaultChecked'>;
 
@@ -60,5 +65,5 @@ export const defaultProps: DefaultProps = {
     required: false,
+    defaultChecked: false,
     indeterminate: false,
     checked: false,
 };
-

src/index.ts

@@ -42,2 +42,5 @@ import {
     @property({ type: Boolean, reflect: true })
+    public defaultChecked = defaultProps.defaultChecked;
+
+    @property({ type: Boolean, reflect: true })
     public disabled?: CheckboxProps['disabled'];
@@ -55,3 +58,3 @@
     @query('input[type="checkbox"]')
-    private checkbox?: HTMLInputElement;
+    public checkbox!: HTMLInputElement;
 
@@ -70,3 +73,3 @@ /**
     private handleFormAssociation () : void {
-        const isFormAssociated = !!this._internals.form && !!this.name;
+        const isFormAssociated = !!this.form && !!this.name;
         if (isFormAssociated) {
@@ -114,2 +117,12 @@ this._internals.setFormValue(this.checked ? this.value : null);
 
+    /**
+     * Called when the form that owns this component is reset.
+     * Sets the checked state to the default value.
+     */
+    public formResetCallback () : void {
+        this.checked = this.defaultChecked;
+
+        this.handleFormAssociation();
+    }
+
     render () {
@@ -132,7 +145,7 @@ const {
                 .value=${value}
-                ?checked=${live(checked)}
+                .checked=${live(checked)}
                 name=${ifDefined(name)}
                 ?disabled=${disabled}
                 ?required=${required}
-                .indeterminate=${indeterminate}
+                .indeterminate=${!!indeterminate}
                 aria-label=${aria?.label || nothing}
@@ -139,0 +152,0 @@ aria-labelledby=${label ? nothing : aria?.labelledby || nothing}

No alert changes

Improved metrics

Total package byte prevSize

38006

increased by6.94%

Lines of code

912

increased by8.19%

No dependency changes