@justeattakeaway/pie-switch 0.23.0 → 0.24.0

package/custom-elements.json

@@ -2,6 +2,12 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/defs-react.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/defs.js",

package/dist/index.d.ts

@@ -100,7 +100,7 @@ export declare interface SwitchProps {
     /**
      * Same as the HTML required attribute - indicates whether the switch must be turned or not
      */
-    required: boolean;
+    required?: boolean;
     /**
      * Same as the HTML disabled attribute - indicates whether the switch is disabled or not
      */
@@ -120,7 +120,7 @@ export declare interface SwitchProps {
     /**
      * Same as the HTML value attribute - indicates the value of the switch (for use with forms). Defaults to 'on'.
      */
-    value: string;
+    value?: string;
 }
 
 export { }

package/dist/index.js

@@ -1,11 +1,11 @@
-import { LitElement as vt, html as C, nothing as x, unsafeCSS as yt } from "lit";
+import { LitElement as vt, html as A, nothing as x, unsafeCSS as yt } from "lit";
 import { query as Et, property as k } from "lit/decorators.js";
-import { FormControlMixin as kt, RtlMixin as Mt, validPropertyValues as xt, defineCustomElement as Ft } from "@justeattakeaway/pie-webc-core";
+import { FormControlMixin as kt, RtlMixin as Mt, wrapNativeEvent as xt, validPropertyValues as Ft, defineCustomElement as At } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/IconCheck";
 const Ct = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[checked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[checked]:hover{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-switch[checked]:focus,.c-switch[checked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[checked]:active{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}[disabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;left:50%;transform:translate(-50%) translateY(-50%);bottom:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper[isRTL] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
-`, At = ["leading", "trailing"], It = "change";
+`, It = ["leading", "trailing"], Pt = "change";
 (function() {
-  const h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), V = {
+  const h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), V = {
     ariaAtomic: "aria-atomic",
     ariaAutoComplete: "aria-autocomplete",
     ariaBusy: "aria-busy",
@@ -57,7 +57,7 @@ const Ct = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
           return a;
         },
         set(n) {
-          a = n, i.isConnected ? i.setAttribute(r, n) : A.set(i, t);
+          a = n, i.isConnected ? i.setAttribute(r, n) : C.set(i, t);
         }
       });
     }
@@ -90,11 +90,11 @@ const Ct = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
       const { addedNodes: e, removedNodes: a } = t, r = Array.from(e), n = Array.from(a);
       r.forEach((o) => {
         var u;
-        if (l.has(o) && o.constructor.formAssociated && B(o), A.has(o)) {
-          const d = A.get(o);
+        if (l.has(o) && o.constructor.formAssociated && B(o), C.has(o)) {
+          const d = C.get(o);
           Object.keys(V).filter((w) => d[w] !== null).forEach((w) => {
             o.setAttribute(V[w], d[w]);
-          }), A.delete(o);
+          }), C.delete(o);
         }
         if (I.has(o)) {
           const d = I.get(o);
@@ -511,13 +511,7 @@ class f extends kt(Mt(vt)) {
   onChange(c) {
     const { checked: s } = c == null ? void 0 : c.currentTarget;
     this.checked = s;
-    const l = new CustomEvent(
-      It,
-      {
-        bubbles: !0,
-        composed: !0
-      }
-    );
+    const l = xt(c);
     this.dispatchEvent(l), this.handleFormAssociation();
   }
   /**
@@ -567,12 +561,12 @@ class f extends kt(Mt(vt)) {
    */
   renderSwitchLabel() {
     const { label: c, labelPlacement: s } = this;
-    return c ? C`
+    return c ? A`
                 <label
                     for="switch"
                     data-test-id="switch-label-${s}">
                     ${c}
-                </label>` : C``;
+                </label>` : A``;
   }
   render() {
     const {
@@ -583,7 +577,7 @@ class f extends kt(Mt(vt)) {
       disabled: E,
       isRTL: b
     } = this, m = "switch-description";
-    return C`
+    return A`
             <div
                 class="c-switch-wrapper"
                 ?isRTL=${b}
@@ -606,10 +600,10 @@ class f extends kt(Mt(vt)) {
                         aria-label="${(s == null ? void 0 : s.label) || x}"
                         aria-describedby="${s != null && s.describedBy ? m : x}">
                     <div class="c-switch-control">
-                        ${l ? C`<icon-check></icon-check>` : x}
+                        ${l ? A`<icon-check></icon-check>` : x}
                     </div>
                 </label>
-                ${s != null && s.describedBy ? C`<div id="${m}" data-test-id="${m}" class="c-switch-description">${s == null ? void 0 : s.describedBy}</div>` : x}
+                ${s != null && s.describedBy ? A`<div id="${m}" data-test-id="${m}" class="c-switch-description">${s == null ? void 0 : s.describedBy}</div>` : x}
                 ${c === "trailing" ? this.renderSwitchLabel() : x}
             </div>
         `;
@@ -624,7 +618,7 @@ y([
 ], f.prototype, "label", 2);
 y([
   k({ type: String }),
-  xt(it, At, "leading")
+  Ft(it, It, "leading")
 ], f.prototype, "labelPlacement", 2);
 y([
   k({ type: Object })
@@ -644,9 +638,9 @@ y([
 y([
   k({ type: Boolean, reflect: !0 })
 ], f.prototype, "disabled", 2);
-Ft(it, f);
+At(it, f);
 export {
-  It as ON_SWITCH_CHANGED_EVENT,
+  Pt as ON_SWITCH_CHANGED_EVENT,
   f as PieSwitch,
-  At as labelPlacements
+  It as labelPlacements
 };

package/dist/react.d.ts

@@ -1,10 +1,9 @@
 import type { CSSResult } from 'lit';
-import type { EventName } from '@lit/react';
 import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
-import type { ReactWebComponent } from '@lit/react';
+import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit';
 
@@ -24,10 +23,7 @@ export declare const labelPlacements: readonly ["leading", "trailing"];
  */
 export declare const ON_SWITCH_CHANGED_EVENT = "change";
 
-export declare const PieSwitch: ReactWebComponent<PieSwitch_2, {
-    onInvalid: EventName<Event>;
-    onChange: EventName<CustomEvent<any>>;
-}>;
+export declare const PieSwitch: React_2.ForwardRefExoticComponent<SwitchProps & React_2.RefAttributes<PieSwitch_2> & PieSwitchEvents & ReactBaseType>;
 
 /**
  * @tagname pie-switch
@@ -95,6 +91,13 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps {
 
 declare const PieSwitch_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
 
+declare type PieSwitchEvents = {
+    onInvalid?: (event: Event<any>) => void;
+    onChange?: (event: CustomEvent<any>) => void;
+};
+
+declare type ReactBaseType = React_2.InputHTMLAttributes<HTMLInputElement>;
+
 export declare interface SwitchProps {
     /**
      * The ARIA labels used for the switch.
@@ -107,7 +110,7 @@ export declare interface SwitchProps {
     /**
      * Same as the HTML required attribute - indicates whether the switch must be turned or not
      */
-    required: boolean;
+    required?: boolean;
     /**
      * Same as the HTML disabled attribute - indicates whether the switch is disabled or not
      */
@@ -127,7 +130,7 @@ export declare interface SwitchProps {
     /**
      * Same as the HTML value attribute - indicates the value of the switch (for use with forms). Defaults to 'on'.
      */
-    value: string;
+    value?: string;
 }
 
 export { }

package/dist/react.js

@@ -1,12 +1,12 @@
 import * as e from "react";
 import { createComponent as t } from "@lit/react";
 import { PieSwitch as i } from "./index.js";
-import { ON_SWITCH_CHANGED_EVENT as h, labelPlacements as w } from "./index.js";
+import { ON_SWITCH_CHANGED_EVENT as w, labelPlacements as P } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 import "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/IconCheck";
-const c = t({
+const o = t({
   displayName: "PieSwitch",
   elementClass: i,
   react: e,
@@ -16,9 +16,9 @@ const c = t({
     onChange: "change"
     // when the switch checked state is changed.
   }
-});
+}), s = o;
 export {
-  h as ON_SWITCH_CHANGED_EVENT,
-  c as PieSwitch,
-  w as labelPlacements
+  w as ON_SWITCH_CHANGED_EVENT,
+  s as PieSwitch,
+  P as labelPlacements
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -32,13 +32,13 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.8.0",
+    "@justeattakeaway/pie-components-config": "0.9.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "0.17.0",
-    "@justeattakeaway/pie-webc-core": "0.16.0",
-    "@justeattakeaway/pie-wrapper-react": "0.12.0",
+    "@justeattakeaway/pie-icons-webc": "0.17.1",
+    "@justeattakeaway/pie-webc-core": "0.17.0",
+    "@justeattakeaway/pie-wrapper-react": "0.13.0",
     "element-internals-polyfill": "1.3.9"
   },
   "volta": {

package/src/defs-react.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>

package/src/defs.ts

@@ -19,7 +19,7 @@ export interface SwitchProps {
     /**
      * Same as the HTML required attribute - indicates whether the switch must be turned or not
      */
-    required: boolean;
+    required?: boolean;
     /**
      * Same as the HTML disabled attribute - indicates whether the switch is disabled or not
      */
@@ -39,7 +39,7 @@ export interface SwitchProps {
     /**
      * Same as the HTML value attribute - indicates the value of the switch (for use with forms). Defaults to 'on'.
      */
-    value: string;
+    value?: string;
 }
 
 /**

package/src/index.ts

@@ -3,11 +3,11 @@ import {
 } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import {
-    RtlMixin, validPropertyValues, defineCustomElement, FormControlMixin,
+    RtlMixin, validPropertyValues, defineCustomElement, FormControlMixin, wrapNativeEvent,
 } from '@justeattakeaway/pie-webc-core';
 import styles from './switch.scss?inline';
 import {
-    SwitchProps, ON_SWITCH_CHANGED_EVENT, AriaProps, labelPlacements,
+    SwitchProps, AriaProps, labelPlacements,
 } from './defs';
 import 'element-internals-polyfill';
 import '@justeattakeaway/pie-icons-webc/IconCheck';
@@ -94,13 +94,7 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
     onChange (event: Event) {
         const { checked } = event?.currentTarget as HTMLInputElement;
         this.checked = checked;
-        const changedEvent = new CustomEvent(
-            ON_SWITCH_CHANGED_EVENT,
-            {
-                bubbles: true,
-                composed: true,
-            },
-        );
+        const changedEvent = wrapNativeEvent(event);
 
         this.dispatchEvent(changedEvent);
         this.handleFormAssociation();

package/src/react.ts

@@ -1,13 +1,13 @@
-
 import * as React from 'react';
 import { createComponent, EventName } from '@lit/react';
-import { PieSwitch as PieSwitchReact } from './index';
+import { PieSwitch as PieSwitchLit } from './index';
+import { SwitchProps } from './defs';
 
 export * from './defs';
 
-export const PieSwitch = createComponent({
+const PieSwitchReact = createComponent({
     displayName: 'PieSwitch',
-    elementClass: PieSwitchReact,
+    elementClass: PieSwitchLit,
     react: React,
     tagName: 'pie-switch',
     events: {
@@ -15,3 +15,12 @@ export const PieSwitch = createComponent({
         onChange: 'change' as EventName<CustomEvent>, // when the switch checked state is changed.
     },
 });
+
+type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>
+
+type PieSwitchEvents = {
+    onInvalid?: (event: Event<any>) => void;
+    onChange?: (event: CustomEvent<any>) => void;
+};
+
+export const PieSwitch = PieSwitchReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<SwitchProps> & React.RefAttributes<PieSwitchLit> & PieSwitchEvents & ReactBaseType>;