@momentum-design/components 0.104.1 → 0.104.2

package/dist/react/navmenuitem/index.d.ts

@@ -34,14 +34,17 @@ import Component from '../../components/navmenuitem';
  * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onActiveChange: EventName<Event>;
-    onClick: EventName<MouseEvent>;
-    onKeyDown: EventName<KeyboardEvent>;
-    onKeyUp: EventName<KeyboardEvent>;
-    onFocus: EventName<FocusEvent>;
-    onEnabled: EventName<Event>;
-    onDisabled: EventName<Event>;
-    onCreated: EventName<Event>;
-    onDestroyed: EventName<Event>;
+    onActiveChange: EventName<import("../../utils/types").TypedCustomEvent<Component, {
+        navId: string;
+        active: boolean;
+    }>>;
+    onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, import("../../components/listitem/listitem.component").default>>;
+    onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, import("../../components/listitem/listitem.component").default>>;
+    onKeyUp: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, import("../../components/listitem/listitem.component").default>>;
+    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, import("../../components/listitem/listitem.component").default>>;
+    onEnabled: EventName<import("../../utils/types").TypedCustomEvent<import("../../components/listitem/listitem.component").default, unknown>>;
+    onDisabled: EventName<import("../../utils/types").TypedCustomEvent<import("../../components/listitem/listitem.component").default, unknown>>;
+    onCreated: EventName<import("../../utils/types").TypedCustomEvent<import("../../components/listitem/listitem.component").default, unknown>>;
+    onDestroyed: EventName<import("../../utils/types").TypedCustomEvent<import("../../components/listitem/listitem.component").default, unknown>>;
 }>;
 export default reactWrapper;

package/dist/react/option/index.d.ts

@@ -26,13 +26,13 @@ import Component from '../../components/option';
  * @event focus - (React: onFocus) This event is dispatched when the option receives focus.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClick: EventName<MouseEvent>;
-    onKeyDown: EventName<KeyboardEvent>;
-    onKeyUp: EventName<KeyboardEvent>;
-    onFocus: EventName<FocusEvent>;
-    onEnabled: EventName<Event>;
-    onDisabled: EventName<Event>;
-    onCreated: EventName<Event>;
-    onDestroyed: EventName<Event>;
+    onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, import("../../components/listitem/listitem.component").default>>;
+    onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, import("../../components/listitem/listitem.component").default>>;
+    onKeyUp: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, import("../../components/listitem/listitem.component").default>>;
+    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, import("../../components/listitem/listitem.component").default>>;
+    onEnabled: EventName<import("../../utils/types").TypedCustomEvent<import("../../components/listitem/listitem.component").default, unknown>>;
+    onDisabled: EventName<import("../../utils/types").TypedCustomEvent<import("../../components/listitem/listitem.component").default, unknown>>;
+    onCreated: EventName<import("../../utils/types").TypedCustomEvent<import("../../components/listitem/listitem.component").default, unknown>>;
+    onDestroyed: EventName<import("../../utils/types").TypedCustomEvent<import("../../components/listitem/listitem.component").default, unknown>>;
 }>;
 export default reactWrapper;

package/dist/react/password/index.d.ts

@@ -42,10 +42,10 @@ import Component from '../../components/password';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onInput: EventName<InputEvent>;
+    onInput: EventName<import("../../utils/types").OverrideEventTarget<InputEvent, import("../../components/input/input.component").default>>;
     onChange: EventName<import("../../components/input/input.types").InputChangeEvent>;
-    onFocus: EventName<FocusEvent>;
-    onBlur: EventName<FocusEvent>;
+    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, import("../../components/input/input.component").default>>;
+    onBlur: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, import("../../components/input/input.component").default>>;
     onClear: EventName<import("../../components/input/input.types").InputClearEvent>;
 }>;
 export default reactWrapper;

package/dist/react/radio/index.d.ts

@@ -28,7 +28,7 @@ import Component from '../../components/radio';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onChange: EventName<Event>;
-    onFocus: EventName<FocusEvent>;
+    onChange: EventName<import("../../utils/types").TypedCustomEvent<Component, unknown>>;
+    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, Component>>;
 }>;
 export default reactWrapper;

package/dist/react/searchfield/index.d.ts

@@ -18,10 +18,10 @@ import Component from '../../components/searchfield';
  * @slot filters - Slot for input chips
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onInput: EventName<InputEvent>;
+    onInput: EventName<import("../../utils/types").OverrideEventTarget<InputEvent, import("../../components/input/input.component").default>>;
     onChange: EventName<import("../../components/input/input.types").InputChangeEvent>;
-    onFocus: EventName<FocusEvent>;
-    onBlur: EventName<FocusEvent>;
+    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, import("../../components/input/input.component").default>>;
+    onBlur: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, import("../../components/input/input.component").default>>;
     onClear: EventName<import("../../components/input/input.types").InputClearEvent>;
 }>;
 export default reactWrapper;

package/dist/react/select/index.d.ts

@@ -45,8 +45,8 @@ import Component from '../../components/select';
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<import("../../components/select/select.types").SelectChangeEvent>;
     onInput: EventName<import("../../components/select/select.types").SelectInputEvent>;
-    onClick: EventName<MouseEvent>;
-    onKeyDown: EventName<KeyboardEvent>;
-    onFocus: EventName<FocusEvent>;
+    onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, Component>>;
+    onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, Component>>;
+    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, Component>>;
 }>;
 export default reactWrapper;

package/dist/react/sidenavigation/index.d.ts

@@ -52,6 +52,9 @@ import Component from '../../components/sidenavigation';
  * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onActiveChange: EventName<Event>;
+    onActiveChange: EventName<import("../../utils/types").TypedCustomEvent<Component, {
+        navId: string;
+        active: boolean;
+    }>>;
 }>;
 export default reactWrapper;

package/dist/react/stepperitem/index.d.ts

@@ -35,8 +35,8 @@ import Component from '../../components/stepperitem';
  * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClick: EventName<MouseEvent>;
-    onKeyDown: EventName<KeyboardEvent>;
-    onKeyUp: EventName<KeyboardEvent>;
+    onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, Component>>;
+    onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, Component>>;
+    onKeyUp: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, Component>>;
 }>;
 export default reactWrapper;

package/dist/react/tab/index.d.ts

@@ -98,10 +98,13 @@ import Component from '../../components/tab';
  * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onActiveChange: EventName<Event>;
-    onClick: EventName<MouseEvent>;
-    onKeyDown: EventName<KeyboardEvent>;
-    onKeyUp: EventName<KeyboardEvent>;
-    onFocus: EventName<FocusEvent>;
+    onActiveChange: EventName<import("../../utils/types").TypedCustomEvent<Component, {
+        tabId: string;
+        active: boolean;
+    }>>;
+    onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
+    onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
+    onKeyUp: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
+    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
 }>;
 export default reactWrapper;

package/dist/react/tablist/index.d.ts

@@ -44,6 +44,8 @@ import Component from '../../components/tablist';
  * @cssproperty  --mdc-tablist-arrow-button-margin - Margin value for the arrow button
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onChange: EventName<CustomEvent<any>>;
+    onChange: EventName<import("../../utils/types").TypedCustomEvent<Component, {
+        tabId: string;
+    }>>;
 }>;
 export default reactWrapper;

package/dist/react/textarea/index.d.ts

@@ -50,10 +50,10 @@ import Component from '../../components/textarea';
  * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onLimitExceeded: EventName<Event>;
-    onInput: EventName<InputEvent>;
-    onChange: EventName<Event>;
-    onFocus: EventName<FocusEvent>;
-    onBlur: EventName<FocusEvent>;
+    onLimitExceeded: EventName<import("../../utils/types").TypedCustomEvent<Component, unknown>>;
+    onInput: EventName<import("../../utils/types").OverrideEventTarget<InputEvent, Component>>;
+    onChange: EventName<import("../../utils/types").TypedCustomEvent<Component, unknown>>;
+    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, Component>>;
+    onBlur: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, Component>>;
 }>;
 export default reactWrapper;

package/dist/react/toast/index.d.ts

@@ -40,6 +40,6 @@ import Component from '../../components/toast';
  * @cssproperty --mdc-toast-padding - Padding inside the toast.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClose: EventName<Event>;
+    onClose: EventName<import("../../utils/types").TypedCustomEvent<Component, unknown>>;
 }>;
 export default reactWrapper;

package/dist/react/toggle/index.d.ts

@@ -36,7 +36,7 @@ import Component from '../../components/toggle';
  * @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onChange: EventName<Event>;
-    onFocus: EventName<FocusEvent>;
+    onChange: EventName<import("../../utils/types").TypedCustomEvent<Component, unknown>>;
+    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, Component>>;
 }>;
 export default reactWrapper;

package/dist/react/virtualizedlist/index.d.ts

@@ -15,6 +15,6 @@ import Component from '../../components/virtualizedlist';
  * @slot - Client side List with nested list items.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onScroll: EventName<Event>;
+    onScroll: EventName<import("../../utils/types").TypedCustomEvent<Component, unknown>>;
 }>;
 export default reactWrapper;

package/dist/utils/types.d.ts

@@ -6,6 +6,14 @@ export type ValueOf<T> = T[keyof T];
  *
  * @see [Strongly Typed Events for Web Components](https://dev.to/stuffbreaker/creating-strongly-typed-events-for-web-components-1jem)
  */
-export type TypedEvent<T extends EventTarget, D = unknown> = CustomEvent<D> & {
+export type TypedCustomEvent<T extends EventTarget, D = unknown> = CustomEvent<D> & {
     target: T;
 };
+/**
+ * A utility type to override the target of an event
+ * @typeParam T - The type of the event (extends Event)
+ * @typeParam E - The type of the event target (extends EventTarget)
+ */
+export type OverrideEventTarget<T extends Event, E extends EventTarget> = Omit<T, 'target'> & {
+    target: E;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.104.1",
+  "version": "0.104.2",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"

package/dist/components/selectlistbox/selectlistbox.types.d.ts

@@ -1,3 +0,0 @@
-interface Events {
-}
-export type { Events };

package/dist/components/selectlistbox/selectlistbox.types.js

@@ -1 +0,0 @@
-export {};