@loadsmart/miranda-react 3.0.0-beta.4 → 3.0.0-beta.6

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,7 @@
-import type { ReactNode, ComponentProps } from 'react';
 import { Checkbox as WCCheckbox } from '@loadsmart/miranda-wc';
-import type { WebComponentProps } from '@lit/react';
+import type { EventName, WebComponentProps } from '@lit/react';
+import type { ReactNode, ComponentProps } from 'react';
+import type { MirandaChangeEvent } from '../../utils/types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -9,7 +10,7 @@ declare global {
     }
 }
 declare const WiredCheckbox: import("@lit/react").ReactWebComponent<WCCheckbox, {
-    onChange: string;
+    onChange: EventName<MirandaChangeEvent<WCCheckbox>>;
 }>;
 export type CheckboxProps = ComponentProps<typeof WiredCheckbox> & {
     leading?: ReactNode;

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -1,6 +1,7 @@
-import type { WebComponentProps } from '@lit/react';
 import { RadioGroup as WCRadioGroup } from '@loadsmart/miranda-wc';
 import type { ComponentProps } from 'react';
+import type { EventName, WebComponentProps } from '@lit/react';
+import type { MirandaChangeEvent } from '../../utils/types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -9,7 +10,7 @@ declare global {
     }
 }
 declare const RadioGroup: import("@lit/react").ReactWebComponent<WCRadioGroup, {
-    onChange: string;
+    onChange: EventName<MirandaChangeEvent<WCRadioGroup>>;
 }> & {
     Radio: import("react").ForwardRefExoticComponent<Omit<import("./Radio").RadioProps, "ref"> & import("react").RefAttributes<import("@loadsmart/miranda-wc").Radio>>;
 };

package/dist/components/Select/Select.d.ts

@@ -1,6 +1,7 @@
-import type { ReactNode, ComponentProps } from 'react';
-import type { EventName, WebComponentProps } from '@lit/react';
 import { Select as WCSelect } from '@loadsmart/miranda-wc';
+import type { EventName, WebComponentProps } from '@lit/react';
+import type { ReactNode, ComponentProps } from 'react';
+import type { MirandaChangeEvent } from '../../utils/types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -11,7 +12,7 @@ declare global {
 declare const WiredSelect: import("@lit/react").ReactWebComponent<WCSelect, {
     onExpand: EventName<CustomEvent<any>>;
     onCollapse: EventName<CustomEvent<any>>;
-    onChange: string;
+    onChange: EventName<MirandaChangeEvent<WCSelect>>;
 }>;
 export type SelectOption = {
     value: string;

package/dist/components/Steps/Steps.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentProps } from 'react';
 import type { EventName, WebComponentProps } from '@lit/react';
+import type { StepChangeEventDetail, StepNavigateEventDetail } from '@loadsmart/miranda-wc';
 import { Steps as WCSteps } from '@loadsmart/miranda-wc';
 declare global {
     namespace JSX {
@@ -9,9 +10,9 @@ declare global {
     }
 }
 export declare const Steps: import("@lit/react").ReactWebComponent<WCSteps, {
-    onChange: EventName<CustomEvent<any>>;
+    onChange: EventName<CustomEvent<StepChangeEventDetail>>;
     onComplete: EventName<CustomEvent<any>>;
-    onNavigate: EventName<CustomEvent<any>>;
+    onNavigate: EventName<CustomEvent<StepNavigateEventDetail>>;
     onNext: EventName<CustomEvent<any>>;
     onPrevious: EventName<CustomEvent<any>>;
 }> & {

package/dist/components/Steps/useSteps.d.ts

@@ -1,5 +1,5 @@
 import type { LiteralUnion } from '../../utils/types';
-export declare function createCustomEvent(eventName: string, detail?: unknown): CustomEvent<unknown>;
+export declare function createCustomEvent<T>(eventName: string, detail?: T): CustomEvent<T>;
 export declare function useSteps(): {
     elementRef: HTMLElement | null;
     registerSteps: () => {

package/dist/components/Switch/Switch.d.ts

@@ -1,6 +1,7 @@
-import type { ComponentProps } from 'react';
-import type { WebComponentProps } from '@lit/react';
 import { Switch as WCSwitch } from '@loadsmart/miranda-wc';
+import type { ComponentProps } from 'react';
+import type { EventName, WebComponentProps } from '@lit/react';
+import type { MirandaChangeEvent } from '../../utils/types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -9,6 +10,6 @@ declare global {
     }
 }
 export declare const Switch: import("@lit/react").ReactWebComponent<WCSwitch, {
-    onChange: string;
+    onChange: EventName<MirandaChangeEvent<WCSwitch>>;
 }>;
 export type SwitchProps = ComponentProps<typeof Switch>;

package/dist/components/Tag/ActionableTag.d.ts

@@ -1,7 +1,7 @@
-import type { ReactNode, ComponentProps } from 'react';
-import type { EventName, WebComponentProps } from '@lit/react';
 import { ActionableTag as WCActionableTag } from '@loadsmart/miranda-wc';
-import type { ActionableTagChangeEventDetail } from '@loadsmart/miranda-wc';
+import type { EventName, WebComponentProps } from '@lit/react';
+import type { ReactNode, ComponentProps } from 'react';
+import type { MirandaChangeEvent } from '../../utils/types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -10,7 +10,7 @@ declare global {
     }
 }
 declare const WiredActionableTag: import("@lit/react").ReactWebComponent<WCActionableTag, {
-    onChange: EventName<CustomEvent<ActionableTagChangeEventDetail>>;
+    onChange: EventName<MirandaChangeEvent<WCActionableTag>>;
     onRemove: EventName<CustomEvent<any>>;
 }>;
 export type ActionableTagProps = ComponentProps<typeof WiredActionableTag> & {

package/dist/components/TextArea/TextArea.d.ts

@@ -1,7 +1,8 @@
+import { TextArea as WCTextArea } from '@loadsmart/miranda-wc';
 import type { ComponentProps } from 'react';
-import type { WebComponentProps } from '@lit/react';
+import type { EventName, WebComponentProps } from '@lit/react';
 import type { TextAreaProps as WCTextAreaProps } from '@loadsmart/miranda-wc';
-import { TextArea as WCTextArea } from '@loadsmart/miranda-wc';
+import type { MirandaChangeEvent } from '../../utils/types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -10,8 +11,8 @@ declare global {
     }
 }
 declare const WiredTextArea: import("@lit/react").ReactWebComponent<WCTextArea, {
-    onInput: string;
-    onChange: string;
+    onInput: EventName<MirandaChangeEvent<WCTextArea>>;
+    onChange: EventName<MirandaChangeEvent<WCTextArea>>;
 }>;
 export type TextAreaProps = ComponentProps<typeof WiredTextArea>;
 declare function TextArea(props: TextAreaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TextField/TextField.d.ts

@@ -1,17 +1,17 @@
-import type { ReactNode, ComponentProps } from 'react';
-import type { EventName, WebComponentProps } from '@lit/react';
-import type { TextFieldProps as WCTextFieldProps } from '@loadsmart/miranda-wc';
 import { TextField as WCTextField } from '@loadsmart/miranda-wc';
+import type { EventName, WebComponentProps } from '@lit/react';
+import type { ReactNode, ComponentProps } from 'react';
+import type { MirandaChangeEvent } from '../../utils/types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'm-text-field': WebComponentProps<WCTextField> & WCTextFieldProps;
+            'm-text-field': WebComponentProps<WCTextField>;
         }
     }
 }
 declare const WiredTextField: import("@lit/react").ReactWebComponent<WCTextField, {
-    onInput: string;
-    onChange: string;
+    onInput: EventName<MirandaChangeEvent<WCTextField>>;
+    onChange: EventName<MirandaChangeEvent<WCTextField>>;
     onClear: EventName<CustomEvent<any>>;
 }>;
 export type TextFieldProps = ComponentProps<typeof WiredTextField> & {

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -1,6 +1,7 @@
-import type { ReactNode, ComponentProps } from 'react';
-import type { WebComponentProps } from '@lit/react';
 import { ToggleGroup as WCToggleGroup } from '@loadsmart/miranda-wc';
+import type { EventName, WebComponentProps } from '@lit/react';
+import type { ReactNode, ComponentProps } from 'react';
+import type { MirandaChangeEvent } from '../../utils/types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -9,7 +10,7 @@ declare global {
     }
 }
 declare const WiredToggleGroup: import("@lit/react").ReactWebComponent<WCToggleGroup, {
-    onChange: string;
+    onChange: EventName<MirandaChangeEvent<WCToggleGroup>>;
 }>;
 export type ToggleGroupOption = {
     value: string;

package/dist/index.d.ts

@@ -35,6 +35,7 @@ export * from './components/Timeline';
 export * from './components/ToggleGroup';
 export * from './components/Tooltip';
 export * from './components/LogoLoader';
+export type { MirandaChangeEvent } from './utils/types';
 export type { TypographyVariant } from '@loadsmart/miranda-wc';
 export { Accordion as WCAccordion, AccordionTitle as WCAccordionTitle, AccordionContent as WCAccordionContent, } from '@loadsmart/miranda-wc';
 export type { AccordionProps as WCAccordionProps, AccordionToggleEventDetails, } from '@loadsmart/miranda-wc';
@@ -69,6 +70,7 @@ export { Link as WCLink } from '@loadsmart/miranda-wc';
 export { PageContent as WCPageContent } from '@loadsmart/miranda-wc';
 export { Pagination as WCPagination } from '@loadsmart/miranda-wc';
 export type { PaginationProps as WCPaginationProps, PaginationChangeEventDetails, } from '@loadsmart/miranda-wc';
+export type { PopoverPlacement, PopoverPosition, PopoverRepositionEventDetail, } from '@loadsmart/miranda-wc';
 export { ProgressBar as WCProgressBar } from '@loadsmart/miranda-wc';
 export type { ProgressBarProps as WCProgressBarProps } from '@loadsmart/miranda-wc';
 export { ProgressBarCountdown as WCProgressBarCountdown } from '@loadsmart/miranda-wc';
@@ -80,7 +82,7 @@ export type { SectionProps as WCSectionProps } from '@loadsmart/miranda-wc';
 export { SpinnerWheel as WCSpinnerWheel } from '@loadsmart/miranda-wc';
 export type { SpinnerWheelProps as WCSpinnerWheelProps } from '@loadsmart/miranda-wc';
 export { Step as WCStep, Steps as WCSteps } from '@loadsmart/miranda-wc';
-export type { StepProps as WCStepProps, NavigateStepEventDetail, } from '@loadsmart/miranda-wc';
+export type { StepProps as WCStepProps, StepChangeEventDetail, StepNavigateEventDetail, } from '@loadsmart/miranda-wc';
 export { Switch as WCSwitch } from '@loadsmart/miranda-wc';
 export type { SwitchProps as WCSwitchProps, SwitchSize, } from '@loadsmart/miranda-wc';
 export { Table as WCTable, TableHead as WCTableHead, TableHeadCell as WCTableHeadCell, TableBody as WCTableBody, TableFoot as WCTableFoot, TableRow as WCTableRow, TableCell as WCTableCell, TableToolbar as WCTableToolbar, TableFeedback as WCTableFeedback, TableActions as WCTableActions, } from '@loadsmart/miranda-wc';
@@ -88,7 +90,7 @@ export type { TableProps as WCTableProps, TableCellProps as WCTableCellProps, Ta
 export { Tabs as WCTabs, Tab as WCTab, TabPanel as WCTabPanel, } from '@loadsmart/miranda-wc';
 export type { TabsProps as WCTabsProps, TabProps as WCTabProps, TabPanelProps as WCTabPanelProps, TabChangeEventDetail, } from '@loadsmart/miranda-wc';
 export { Tag as WCTag, ActionableTag as WCActionableTag, } from '@loadsmart/miranda-wc';
-export type { TagProps as WCTagProps, ActionableTagProps as WCActionableTagProps, TagVariant, TagSize, ActionableTagChangeEventDetail, } from '@loadsmart/miranda-wc';
+export type { TagProps as WCTagProps, ActionableTagProps as WCActionableTagProps, TagVariant, TagSize, } from '@loadsmart/miranda-wc';
 export { Text as WCText } from '@loadsmart/miranda-wc';
 export type { TextProps as WCTextProps } from '@loadsmart/miranda-wc';
 export { TextArea as WCTextArea } from '@loadsmart/miranda-wc';

package/dist/index.js

@@ -142,7 +142,7 @@ const Accordion = createComponent({
     elementClass: Accordion$1,
     displayName: 'Accordion',
     events: {
-        onToggle: 'm-toggle',
+        onToggle: 'toggle',
     },
     subComponents: {
         Title: AccordionTitle,
@@ -204,7 +204,7 @@ const Banner = createComponent({
     tagName: 'm-banner',
     elementClass: Banner$1,
     events: {
-        onDismiss: 'm-dismiss',
+        onDismiss: 'dismiss',
     },
     displayName: 'Banner',
     subComponents: {
@@ -295,7 +295,7 @@ const Card = createComponent({
     elementClass: Card$1,
     displayName: 'Card',
     events: {
-        onToggle: 'm-toggle',
+        onToggle: 'toggle',
     },
     subComponents: {
         Title: CardTitle,
@@ -389,11 +389,11 @@ const Dialog = createComponent({
     tagName: 'm-dialog',
     elementClass: Dialog$1,
     events: {
-        onClose: 'm-close',
-        onOpening: 'm-opening',
-        onOpened: 'm-opened',
-        onClosing: 'm-closing',
-        onClosed: 'm-closed',
+        onClose: 'close',
+        onOpening: 'opening',
+        onOpened: 'opened',
+        onClosing: 'closing',
+        onClosed: 'closed',
     },
     displayName: 'Dialog',
     subComponents: {
@@ -475,11 +475,11 @@ const Drawer = createComponent({
     tagName: 'm-drawer',
     elementClass: Drawer$1,
     events: {
-        onClose: 'm-close',
-        onOpening: 'm-opening',
-        onOpened: 'm-opened',
-        onClosing: 'm-closing',
-        onClosed: 'm-closed',
+        onClose: 'close',
+        onOpening: 'opening',
+        onOpened: 'opened',
+        onClosing: 'closing',
+        onClosed: 'closed',
     },
     displayName: 'Drawer',
     subComponents: {
@@ -529,8 +529,8 @@ const Dropdown = createComponent({
         Trigger: DropdownTrigger,
     },
     events: {
-        onExpand: 'm-expand',
-        onCollapse: 'm-collapse',
+        onExpand: 'expand',
+        onCollapse: 'collapse',
     },
 });
 
@@ -566,7 +566,7 @@ const EmptyState = createComponent({
     tagName: 'm-empty-state',
     elementClass: EmptyState$1,
     events: {
-        onAction: 'm-action',
+        onAction: 'action',
     },
     displayName: 'EmptyState',
     subComponents: {
@@ -779,7 +779,7 @@ const Pagination = createComponent({
     elementClass: Pagination$1,
     displayName: 'Pagination',
     events: {
-        onChange: 'm-change',
+        onChange: 'paginationchange',
     },
 });
 
@@ -851,8 +851,8 @@ const WiredSelect = createComponent({
     tagName: 'm-select',
     elementClass: Select$1,
     events: {
-        onExpand: 'm-expand',
-        onCollapse: 'm-collapse',
+        onExpand: 'expand',
+        onCollapse: 'collapse',
         onChange: 'change',
     },
     displayName: 'Select',
@@ -885,11 +885,11 @@ const Steps = createComponent({
     elementClass: Steps$1,
     displayName: 'Steps',
     events: {
-        onChange: 'm-change',
-        onComplete: 'm-complete',
-        onNavigate: 'm-navigate',
-        onNext: 'm-next',
-        onPrevious: 'm-previous',
+        onChange: 'stepchange',
+        onComplete: 'stepcomplete',
+        onNavigate: 'navigate',
+        onNext: 'navigatenext',
+        onPrevious: 'navigateprevious',
     },
     subComponents: {
         Step,
@@ -924,10 +924,10 @@ function useSteps() {
             return;
         }
         const navigateToNextStep = () => {
-            return createCustomEvent('m-next');
+            return createCustomEvent('navigatenext');
         };
         const navigateToPreviousStep = () => {
-            return createCustomEvent('m-previous');
+            return createCustomEvent('navigateprevious');
         };
         let event;
         switch (step) {
@@ -938,7 +938,9 @@ function useSteps() {
                 event = navigateToPreviousStep();
                 break;
             default:
-                event = createCustomEvent('m-navigate', step);
+                event = createCustomEvent('navigate', {
+                    step,
+                });
         }
         stepsElement.dispatchEvent(event);
     }, [stepsElement]);
@@ -946,7 +948,7 @@ function useSteps() {
         if (stepsElement == null) {
             return;
         }
-        const event = createCustomEvent('m-complete');
+        const event = createCustomEvent('stepcomplete');
         stepsElement.dispatchEvent(event);
     }, [stepsElement]);
     return {
@@ -1007,7 +1009,7 @@ const TableHeadCell = createComponent({
     elementClass: TableHeadCell$1,
     displayName: 'TableHeadCell',
     events: {
-        onSort: 'm-sort',
+        onSort: 'columnsort',
     },
 });
 
@@ -1059,7 +1061,7 @@ const Tabs = createComponent({
     tagName: 'm-tabs',
     elementClass: Tabs$1,
     events: {
-        onTabChange: 'm-tab-change',
+        onTabChange: 'tabchange',
     },
     displayName: 'Tabs',
     subComponents: {
@@ -1083,8 +1085,8 @@ const WiredActionableTag = createComponent({
     elementClass: ActionableTag$1,
     displayName: 'ActionableTag',
     events: {
-        onChange: 'm-change',
-        onRemove: 'm-remove',
+        onChange: 'change',
+        onRemove: 'remove',
     },
 });
 const ActionableTag = forwardRef((props, ref) => {
@@ -1117,7 +1119,7 @@ const WiredTextField = createComponent({
     events: {
         onInput: 'input',
         onChange: 'change',
-        onClear: 'm-clear',
+        onClear: 'clear',
     },
     displayName: 'TextField',
 });

package/dist/utils/types.d.ts

@@ -1,3 +1,4 @@
+import type { ChangeEvent } from 'react';
 export type Mutable<T> = {
     -readonly [P in keyof T]: T[P] extends ReadonlyArray<infer U> ? U[] : T[P];
 };
@@ -7,3 +8,8 @@ export type Primitive = null | undefined | string | number | boolean | symbol |
  * in IDEs for the literal type part of the union.
  */
 export type LiteralUnion<LiteralType, BaseType extends Primitive> = LiteralType | (BaseType & Record<never, never>);
+/**
+ * This is a patch type to make our components compatible to React's
+ * synthetic event types.
+ */
+export type MirandaChangeEvent<T = Element> = ChangeEvent<T> & Event;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@loadsmart/miranda-react",
-	"version": "3.0.0-beta.4",
+	"version": "3.0.0-beta.6",
 	"description": "React component library based on Miranda Web Components",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -40,8 +40,8 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@loadsmart/miranda-tokens": "4.0.0-beta.4",
-		"@loadsmart/miranda-wc": "3.0.0-beta.4",
+		"@loadsmart/miranda-tokens": "4.0.0-beta.6",
+		"@loadsmart/miranda-wc": "3.0.0-beta.6",
 		"@lit/react": "^1.0.5"
 	},
 	"directories": {