@loadsmart/miranda-react 3.0.0-beta.5 → 3.0.0-beta.7

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/components/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
-import type { ReactNode, ComponentProps } from 'react';
-import type { WebComponentProps } from '@lit/react';
 import { Tooltip as WCTooltip } from '@loadsmart/miranda-wc';
+import type { ReactElement, ReactNode, ComponentProps } from 'react';
+import type { WebComponentProps } from '@lit/react';
 import type { TooltipPlacement, TooltipTrigger } from '@loadsmart/miranda-wc';
 declare global {
     namespace JSX {
@@ -11,7 +11,14 @@ declare global {
 }
 declare const WiredTooltip: import("@lit/react").ReactWebComponent<WCTooltip, {}>;
 export type TooltipProps = ComponentProps<typeof WiredTooltip> & {
-    message?: ReactNode;
+    message: ReactNode;
+    children: ReactElement;
 };
-export declare function Tooltip(props: TooltipProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Render the tooltip component.
+ *
+ * **Warning**: This component will throw if the provided `children` is not a single child,
+ * and will not render if the children is not valid or is a fragment.
+ */
+export declare function Tooltip(props: TooltipProps): import("react/jsx-runtime").JSX.Element | null;
 export type { TooltipPlacement, TooltipTrigger };

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

@@ -1,8 +1,9 @@
 import { AccordionTitle as AccordionTitle$1, AccordionContent as AccordionContent$1, Accordion as Accordion$1, Badge as Badge$1, BannerActionPrimary as BannerActionPrimary$1, BannerActions as BannerActions$1, BannerActionSecondary as BannerActionSecondary$1, BannerDescription as BannerDescription$1, BannerIcon as BannerIcon$1, BannerTitle as BannerTitle$1, Banner as Banner$1, Button as Button$1, CardTitle as CardTitle$1, CardSubtitle as CardSubtitle$1, CardBody as CardBody$1, CardDivider as CardDivider$1, CardActionPrimary as CardActionPrimary$1, CardActionSecondary as CardActionSecondary$1, CardActionTertiary as CardActionTertiary$1, CardFooter as CardFooter$1, Card as Card$1, Checkbox as Checkbox$1, DialogActionPrimary as DialogActionPrimary$1, DialogActionSecondary as DialogActionSecondary$1, DialogActionTertiary as DialogActionTertiary$1, DialogActions as DialogActions$1, DialogBody as DialogBody$1, DialogClose as DialogClose$1, DialogFooter as DialogFooter$1, DialogHeader as DialogHeader$1, Dialog as Dialog$1, Divider as Divider$1, DrawerActionPrimary as DrawerActionPrimary$1, DrawerActionSecondary as DrawerActionSecondary$1, DrawerActionTertiary as DrawerActionTertiary$1, DrawerActions as DrawerActions$1, DrawerBody as DrawerBody$1, DrawerClose as DrawerClose$1, DrawerHeader as DrawerHeader$1, Drawer as Drawer$1, DropdownItem as DropdownItem$1, DropdownMenu as DropdownMenu$1, DropdownTrigger as DropdownTrigger$1, Dropdown as Dropdown$1, EmptyStateIllustration as EmptyStateIllustration$1, EmptyStateHeader as EmptyStateHeader$1, EmptyStateMessage as EmptyStateMessage$1, EmptyStateAction as EmptyStateAction$1, EmptyState as EmptyState$1, FieldLabel as FieldLabel$1, FieldHint as FieldHint$1, Field as Field$1, HeaderActions as HeaderActions$1, HeaderContent as HeaderContent$1, HeaderTitle as HeaderTitle$1, SubHeader as SubHeader$1, BackButton, Header as Header$1, Icon as Icon$1, LabeledValueLabel as LabeledValueLabel$1, LabeledValueValue as LabeledValueValue$1, LabeledValue as LabeledValue$1, Box as Box$1, Group as Group$1, Stack as Stack$1, Grid as Grid$1, Sidebar as Sidebar$1, Switcher as Switcher$1, Container as Container$1, Row as Row$1, Column as Column$1, Link as Link$1, Body as Body$1, PageContent as PageContent$1, Pagination as Pagination$1, ProgressBar as ProgressBar$1, ProgressBarCountdown as ProgressBarCountdown$1, Radio as Radio$1, RadioGroup as RadioGroup$1, SectionTitle as SectionTitle$1, Section as Section$1, SelectOption as SelectOption$1, Select as Select$1, SpinnerWheel as SpinnerWheel$1, Step as Step$1, Steps as Steps$1, Switch as Switch$1, TableHead as TableHead$1, TableBody as TableBody$1, TableFoot as TableFoot$1, TableRow as TableRow$1, TableCell as TableCell$1, TableToolbar as TableToolbar$1, TableHeadCell as TableHeadCell$1, TableFeedback as TableFeedback$1, TableActions as TableActions$1, Table as Table$1, Tab as Tab$1, TabPanel as TabPanel$1, Tabs as Tabs$1, Tag as Tag$1, ActionableTag as ActionableTag$1, Text as Text$1, TextArea as TextArea$1, TextField as TextField$1, TimelineItem as TimelineItem$1, TimelineExpandableItem as TimelineExpandableItem$1, TimelineItemBody as TimelineItemBody$1, TimelineItemFooter as TimelineItemFooter$1, TimelineItemHeader as TimelineItemHeader$1, TimelineItemHeaderSubtitle as TimelineItemHeaderSubtitle$1, TimelineItemHeaderTitle as TimelineItemHeaderTitle$1, TimelineItemIcon as TimelineItemIcon$1, Timeline as Timeline$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Tooltip as Tooltip$1, LogoLoader as LogoLoader$1 } from '@loadsmart/miranda-wc';
 export { DIALOG_SIZES, DIALOG_VARIANTS, DRAWER_SIZES, EMPTY_STATE_VARIANTS, Accordion as WCAccordion, AccordionContent as WCAccordionContent, AccordionTitle as WCAccordionTitle, ActionableTag as WCActionableTag, Badge as WCBadge, Banner as WCBanner, BannerActionPrimary as WCBannerActionPrimary, BannerActionSecondary as WCBannerActionSecondary, BannerActions as WCBannerActions, BannerDescription as WCBannerDescription, BannerIcon as WCBannerIcon, BannerTitle as WCBannerTitle, Box as WCBox, Button as WCButton, Card as WCCard, CardActionPrimary as WCCardActionPrimary, CardActionSecondary as WCCardActionSecondary, CardActionTertiary as WCCardActionTertiary, CardBody as WCCardBody, CardDivider as WCCardDivider, CardFooter as WCCardFooter, CardSubtitle as WCCardSubtitle, CardTitle as WCCardTitle, Checkbox as WCCheckbox, Column as WCColumn, Container as WCContainer, Dialog as WCDialog, DialogActionPrimary as WCDialogActionPrimary, DialogActionSecondary as WCDialogActionSecondary, DialogActionTertiary as WCDialogActionTertiary, DialogActions as WCDialogActions, DialogBody as WCDialogBody, DialogClose as WCDialogClose, DialogFooter as WCDialogFooter, DialogHeader as WCDialogHeader, Divider as WCDivider, Drawer as WCDrawer, DrawerActionPrimary as WCDrawerActionPrimary, DrawerActionSecondary as WCDrawerActionSecondary, DrawerActionTertiary as WCDrawerActionTertiary, DrawerActions as WCDrawerActions, DrawerBody as WCDrawerBody, DrawerClose as WCDrawerClose, DrawerHeader as WCDrawerHeader, Dropdown as WCDropdown, DropdownItem as WCDropdownItem, DropdownMenu as WCDropdownMenu, DropdownTrigger as WCDropdownTrigger, EmptyState as WCEmptyState, EmptyStateAction as WCEmptyStateAction, EmptyStateHeader as WCEmptyStateHeader, EmptyStateIllustration as WCEmptyStateIllustration, EmptyStateMessage as WCEmptyStateMessage, Field as WCField, FieldHint as WCFieldHint, FieldLabel as WCFieldLabel, Grid as WCGrid, Group as WCGroup, Header as WCHeader, HeaderActions as WCHeaderActions, HeaderContent as WCHeaderContent, HeaderTitle as WCHeaderTitle, Icon as WCIcon, LabeledValue as WCLabeledValue, LabeledValueLabel as WCLabeledValueLabel, LabeledValueValue as WCLabeledValueValue, Link as WCLink, LogoLoader as WCLogoLoader, PageContent as WCPageContent, Pagination as WCPagination, ProgressBar as WCProgressBar, ProgressBarCountdown as WCProgressBarCountdown, Radio as WCRadio, RadioGroup as WCRadioGroup, Row as WCRow, Section as WCSection, SectionTitle as WCSectionTitle, Sidebar as WCSidebar, SpinnerWheel as WCSpinnerWheel, Stack as WCStack, Step as WCStep, Steps as WCSteps, SubHeader as WCSubHeader, Switch as WCSwitch, Switcher as WCSwitcher, Tab as WCTab, TabPanel as WCTabPanel, Table as WCTable, TableActions as WCTableActions, TableBody as WCTableBody, TableCell as WCTableCell, TableFeedback as WCTableFeedback, TableFoot as WCTableFoot, TableHead as WCTableHead, TableHeadCell as WCTableHeadCell, TableRow as WCTableRow, TableToolbar as WCTableToolbar, Tabs as WCTabs, Tag as WCTag, Text as WCText, TextArea as WCTextArea, TextField as WCTextField, Timeline as WCTimeline, TimelineExpandableItem as WCTimelineExpandableItem, TimelineItem as WCTimelineItem, TimelineItemBody as WCTimelineItemBody, TimelineItemFooter as WCTimelineItemFooter, TimelineItemHeader as WCTimelineItemHeader, TimelineItemHeaderSubtitle as WCTimelineItemHeaderSubtitle, TimelineItemHeaderTitle as WCTimelineItemHeaderTitle, TimelineItemIcon as WCTimelineItemIcon, Toggle as WCToggle, ToggleGroup as WCToggleGroup, Tooltip as WCTooltip } from '@loadsmart/miranda-wc';
 import * as React from 'react';
-import { forwardRef, useState, useCallback } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useCallback, Children, isValidElement, cloneElement } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { isFragment } from 'react-is';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -142,7 +143,7 @@ const Accordion = createComponent({
     elementClass: Accordion$1,
     displayName: 'Accordion',
     events: {
-        onToggle: 'm-toggle',
+        onToggle: 'toggle',
     },
     subComponents: {
         Title: AccordionTitle,
@@ -204,7 +205,7 @@ const Banner = createComponent({
     tagName: 'm-banner',
     elementClass: Banner$1,
     events: {
-        onDismiss: 'm-dismiss',
+        onDismiss: 'dismiss',
     },
     displayName: 'Banner',
     subComponents: {
@@ -295,7 +296,7 @@ const Card = createComponent({
     elementClass: Card$1,
     displayName: 'Card',
     events: {
-        onToggle: 'm-toggle',
+        onToggle: 'toggle',
     },
     subComponents: {
         Title: CardTitle,
@@ -389,11 +390,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 +476,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 +530,8 @@ const Dropdown = createComponent({
         Trigger: DropdownTrigger,
     },
     events: {
-        onExpand: 'm-expand',
-        onCollapse: 'm-collapse',
+        onExpand: 'expand',
+        onCollapse: 'collapse',
     },
 });
 
@@ -566,7 +567,7 @@ const EmptyState = createComponent({
     tagName: 'm-empty-state',
     elementClass: EmptyState$1,
     events: {
-        onAction: 'm-action',
+        onAction: 'action',
     },
     displayName: 'EmptyState',
     subComponents: {
@@ -779,7 +780,7 @@ const Pagination = createComponent({
     elementClass: Pagination$1,
     displayName: 'Pagination',
     events: {
-        onChange: 'm-change',
+        onChange: 'paginationchange',
     },
 });
 
@@ -851,8 +852,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 +886,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 +925,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 +939,9 @@ function useSteps() {
                 event = navigateToPreviousStep();
                 break;
             default:
-                event = createCustomEvent('m-navigate', step);
+                event = createCustomEvent('navigate', {
+                    step,
+                });
         }
         stepsElement.dispatchEvent(event);
     }, [stepsElement]);
@@ -946,7 +949,7 @@ function useSteps() {
         if (stepsElement == null) {
             return;
         }
-        const event = createCustomEvent('m-complete');
+        const event = createCustomEvent('stepcomplete');
         stepsElement.dispatchEvent(event);
     }, [stepsElement]);
     return {
@@ -1007,7 +1010,7 @@ const TableHeadCell = createComponent({
     elementClass: TableHeadCell$1,
     displayName: 'TableHeadCell',
     events: {
-        onSort: 'm-sort',
+        onSort: 'columnsort',
     },
 });
 
@@ -1059,7 +1062,7 @@ const Tabs = createComponent({
     tagName: 'm-tabs',
     elementClass: Tabs$1,
     events: {
-        onTabChange: 'm-tab-change',
+        onTabChange: 'tabchange',
     },
     displayName: 'Tabs',
     subComponents: {
@@ -1083,8 +1086,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 +1120,7 @@ const WiredTextField = createComponent({
     events: {
         onInput: 'input',
         onChange: 'change',
-        onClear: 'm-clear',
+        onClear: 'clear',
     },
     displayName: 'TextField',
 });
@@ -1221,9 +1224,55 @@ const WiredTooltip = createComponent({
     elementClass: Tooltip$1,
     displayName: 'Tooltip',
 });
+let counter = 0;
+/**
+ * Generates a unique id for our elements, prepending the given `prefix`.
+ * @param prefix - Id prefix. Defaults to 'm-tt-anchor'
+ */
+function generateId(prefix = 'tt-anchor') {
+    counter += 1;
+    /**
+     * prefixing with 'm' to ensure we always start with a letter.
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+     */
+    const id = `m-${prefix}-${counter}`;
+    /**
+     * Embracing the unlikelyhood of having 9007199254740991 elements we id-d with this approach
+     * at the same time in the document (in which case we would have a collision).
+     */
+    if (counter === Number.MAX_SAFE_INTEGER) {
+        counter = 0;
+    }
+    return id;
+}
+/**
+ * Render the tooltip component.
+ *
+ * **Warning**: This component will throw if the provided `children` is not a single child,
+ * and will not render if the children is not valid or is a fragment.
+ */
 function Tooltip(props) {
     const { children, message, ...rest } = props;
-    return jsx(WiredTooltip, { ...rest, children: message !== null && message !== void 0 ? message : children });
+    const child = Children.only(children);
+    if (isFragment(child) || !isValidElement(child)) {
+        console.error('Tooltip must wrap a single and valid child element (Fragment is not accepted).');
+        return null; // do not render the tooltip if the children are not valid or a fragment
+    }
+    const [anchorId, childWithId] = (() => {
+        const elementWithID = child;
+        const { id } = elementWithID.props;
+        if (id) {
+            return [id, elementWithID];
+        }
+        const generatedAnchorId = generateId();
+        return [
+            generatedAnchorId,
+            cloneElement(elementWithID, {
+                id: generatedAnchorId,
+            }),
+        ];
+    })();
+    return (jsxs(Fragment, { children: [jsx(WiredTooltip, { anchor: anchorId, ...rest, children: message }), childWithId] }));
 }
 
 const LogoLoader = createComponent({

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.5",
+	"version": "3.0.0-beta.7",
 	"description": "React component library based on Miranda Web Components",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -26,6 +26,7 @@
 		"@testing-library/cypress": "^10.0.1",
 		"@types/react": "^17.0.79",
 		"@types/react-dom": "^17.0.25",
+		"@types/react-is": "^18.3.0",
 		"cypress": "^13.2.0",
 		"cypress-plugin-tab": "^1.0.5",
 		"react": "^17.0.2",
@@ -40,9 +41,10 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@loadsmart/miranda-tokens": "4.0.0-beta.5",
-		"@loadsmart/miranda-wc": "3.0.0-beta.5",
-		"@lit/react": "^1.0.5"
+		"@loadsmart/miranda-tokens": "4.0.0-beta.7",
+		"@loadsmart/miranda-wc": "3.0.0-beta.7",
+		"@lit/react": "^1.0.5",
+		"react-is": "^18.3.1"
 	},
 	"directories": {
 		"test": "tests"