@justeattakeaway/pie-switch 0.23.0 → 0.24.1

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) => void;
+    onChange?: (event: CustomEvent) => 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.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -32,14 +32,14 @@
   "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",
-    "element-internals-polyfill": "1.3.9"
+    "@justeattakeaway/pie-icons-webc": "0.17.2",
+    "@justeattakeaway/pie-webc-core": "0.17.1",
+    "@justeattakeaway/pie-wrapper-react": "0.14.0",
+    "element-internals-polyfill": "1.3.10"
   },
   "volta": {
     "extends": "../../../package.json"

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,13 @@ 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) => void;
+    onChange?: (event: CustomEvent) => void;
+};
+
+export const PieSwitch = PieSwitchReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<SwitchProps>
+    & React.RefAttributes<PieSwitchLit> & PieSwitchEvents & ReactBaseType>;