@justeattakeaway/pie-checkbox - npm Package Compare versions

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

custom-elements.json

@@ -174,3 +174,4 @@ {
               "kind": "method",
-              "name": "onChange",
+              "name": "handleChange",
+              "privacy": "private",
               "parameters": [
@@ -188,2 +189,11 @@ {
           ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "when checked state is changed.",
+              "name": "change"
+            }
+          ],
           "attributes": [
@@ -190,0 +200,0 @@ {

dist/index.d.ts

@@ -58,3 +58,3 @@ import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
  * @tagname pie-checkbox
- *  * @event {CustomEvent} change - when checked state is changed.
+ * @event {CustomEvent} change - when checked state is changed.
  */
@@ -98,3 +98,3 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxProps {
      */
-    onChange(event: Event): void;
+    private handleChange;
     render(): TemplateResult<1>;
@@ -101,0 +101,0 @@ static styles: CSSResult;

dist/index.js

 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 n, query as $ } from "lit/decorators.js";
+import { property as a, query as $ } from "lit/decorators.js";
 import { ifDefined as C } from "lit/directives/if-defined.js";
@@ -15,6 +15,6 @@ const F = `*,*:after,*:before{box-sizing:inherit}
 };
-var _ = Object.defineProperty, q = Object.getOwnPropertyDescriptor, i = (h, e, a, s) => {
-  for (var o = s > 1 ? void 0 : s ? q(e, a) : e, l = h.length - 1, c; l >= 0; l--)
-    (c = h[l]) && (o = (s ? c(e, a, o) : c(o)) || o);
-  return s && o && _(e, a, o), o;
+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;
 };
@@ -58,5 +58,5 @@ const O = "pie-checkbox";
    */
-  onChange(e) {
-    const { checked: a } = e == null ? void 0 : e.currentTarget;
-    this.checked = a;
+  handleChange(e) {
+    const { checked: n } = e == null ? void 0 : e.currentTarget;
+    this.checked = n;
     const s = g(e);
@@ -68,3 +68,3 @@ this.dispatchEvent(s), this.handleFormAssociation();
       checked: e,
-      value: a,
+      value: n,
       name: s,
@@ -81,3 +81,3 @@ label: o,
                 type="checkbox"
-                .value=${a}
+                .value=${n}
                 ?checked=${x(e)}
@@ -91,3 +91,3 @@ name=${C(s)}
                 aria-describedby= ${(r == null ? void 0 : r.describedby) || d}
-                @change=${this.onChange}
+                @change=${this.handleChange}
                 data-test-id="checkbox-input"
@@ -102,24 +102,24 @@ />
 i([
-  n({ type: String })
+  a({ type: String })
 ], t.prototype, "value", 2);
 i([
-  n({ type: String })
+  a({ type: String })
 ], t.prototype, "label", 2);
 i([
-  n({ type: String })
+  a({ type: String })
 ], t.prototype, "name", 2);
 i([
-  n({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], t.prototype, "checked", 2);
 i([
-  n({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled", 2);
 i([
-  n({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], t.prototype, "required", 2);
 i([
-  n({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], t.prototype, "indeterminate", 2);
 i([
-  n({ type: Object })
+  a({ type: Object })
 ], t.prototype, "aria", 2);
@@ -126,0 +126,0 @@ i([

dist/react.d.ts

@@ -57,7 +57,7 @@ import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 
-export declare const PieCheckbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<PieCheckbox_2> & ReactBaseType>;
+export declare const PieCheckbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<PieCheckbox_2> & PieCheckboxEvents & ReactBaseType>;
 
 /**
  * @tagname pie-checkbox
- *  * @event {CustomEvent} change - when checked state is changed.
+ * @event {CustomEvent} change - when checked state is changed.
  */
@@ -101,3 +101,3 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
      */
-    onChange(event: Event): void;
+    private handleChange;
     render(): TemplateResult<1>;
@@ -109,4 +109,8 @@ static styles: CSSResult;
 
-declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
+declare type PieCheckboxEvents = {
+    onChange?: (event: CustomEvent) => void;
+};
 
+declare type ReactBaseType = React_2.InputHTMLAttributes<HTMLInputElement>;
+
 export { }

dist/react.js

 import * as e from "react";
 import { createComponent as o } from "@lit/react";
 import { PieCheckbox as t } from "./index.js";
-import { defaultProps as k } from "./index.js";
+import { defaultProps as b } from "./index.js";
 import "lit";
@@ -15,7 +15,10 @@ import "@justeattakeaway/pie-webc-core";
   tagName: "pie-checkbox",
-  events: {}
-}), C = r;
+  events: {
+    onChange: "change"
+    // when checked state is changed.
+  }
+}), h = r;
 export {
-  C as PieCheckbox,
-  k as defaultProps
+  h as PieCheckbox,
+  b as defaultProps
 };

package.json

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

src/defs-react.ts

 import React from 'react';
-/**
- * TODO: Verify if ReactBaseType can be set as a more specific React interface
- * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
- * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
- * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
- */
-export type ReactBaseType = React.HTMLAttributes<HTMLElement>
+
+export type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>

src/index.ts

@@ -24,3 +24,3 @@ import {
  * @tagname pie-checkbox
- *  * @event {CustomEvent} change - when checked state is changed.
+ * @event {CustomEvent} change - when checked state is changed.
  */
@@ -101,3 +101,3 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxProps {
      */
-    onChange (event: Event) {
+    private handleChange (event: Event) {
         const { checked } = event?.currentTarget as HTMLInputElement;
@@ -138,3 +138,3 @@ this.checked = checked;
                 aria-describedby= ${aria?.describedby || nothing}
-                @change=${this.onChange}
+                @change=${this.handleChange}
                 data-test-id="checkbox-input"
@@ -141,0 +141,0 @@ />

src/react.ts

 import * as React from 'react';
-import { createComponent } from '@lit/react';
+import { createComponent, EventName } from '@lit/react';
 import { PieCheckbox as PieCheckboxLit } from './index';
@@ -13,8 +13,14 @@ import { CheckboxProps } from './defs';
     tagName: 'pie-checkbox',
-    events: {},
+    events: {
+        onChange: 'change' as EventName<CustomEvent>, // when checked state is changed.
+    },
 });
 
-type ReactBaseType = React.HTMLAttributes<HTMLElement>
+type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>
 
+type PieCheckboxEvents = {
+    onChange?: (event: CustomEvent) => void;
+};
+
 export const PieCheckbox = PieCheckboxReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<CheckboxProps>
-    & React.RefAttributes<PieCheckboxLit> & ReactBaseType>;
+    & React.RefAttributes<PieCheckboxLit> & PieCheckboxEvents & ReactBaseType>;

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

35541

increased by0.75%

Lines of code

843

increased by1.81%

No dependency changes