@momentum-design/components 0.48.0 → 0.49.0

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/alertchip';
 /**
  * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
@@ -19,9 +20,9 @@ import Component from '../../components/alertchip';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClick: string;
-    onKeyDown: string;
-    onKeyUp: string;
-    onFocus: string;
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+    onFocus: EventName<FocusEvent>;
 }>;
 export default reactWrapper;

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/avatarbutton';
 /**
  * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.
@@ -15,9 +16,9 @@ import Component from '../../components/avatarbutton';
  * @tagname mdc-avatarbutton
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClick: string;
-    onKeyDown: string;
-    onKeyUp: string;
-    onFocus: string;
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+    onFocus: EventName<FocusEvent>;
 }>;
 export default reactWrapper;

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/brandvisual';
 /**
  * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are
@@ -17,7 +18,7 @@ import Component from '../../components/brandvisual';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onLoad: string;
-    onError: string;
+    onLoad: EventName<Event>;
+    onError: EventName<Event>;
 }>;
 export default reactWrapper;

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/button';
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
@@ -27,19 +28,14 @@ import Component from '../../components/button';
  *
  * @dependency mdc-icon
  *
- * @event click - (React: onClick) This event is dispatched when the button is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.
- * @event focus - (React: onFocus) This event is dispatched when the button receives focus.
- *
  * @tagname mdc-button
  *
  * @slot - Text label of the button.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClick: string;
-    onKeyDown: string;
-    onKeyUp: string;
-    onFocus: string;
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+    onFocus: EventName<FocusEvent>;
 }>;
 export default reactWrapper;

package/dist/react/button/index.js

@@ -30,11 +30,6 @@ import { TAG_NAME } from '../../components/button/button.constants';
  *
  * @dependency mdc-icon
  *
- * @event click - (React: onClick) This event is dispatched when the button is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.
- * @event focus - (React: onFocus) This event is dispatched when the button receives focus.
- *
  * @tagname mdc-button
  *
  * @slot - Text label of the button.

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/buttonsimple';
 /**
  * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.
@@ -12,9 +13,9 @@ import Component from '../../components/buttonsimple';
  * @tagname mdc-buttonsimple
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClick: string;
-    onKeyDown: string;
-    onKeyUp: string;
-    onFocus: string;
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+    onFocus: EventName<FocusEvent>;
 }>;
 export default reactWrapper;

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/checkbox';
 /**
  * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
@@ -29,8 +30,7 @@ import Component from '../../components/checkbox';
  * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    undefined: string;
-    onChange: string;
-    onFocus: string;
+    onChange: EventName<Event>;
+    onFocus: EventName<FocusEvent>;
 }>;
 export default reactWrapper;

package/dist/react/checkbox/index.js

@@ -36,7 +36,6 @@ const reactWrapper = createComponent({
     elementClass: Component,
     react: React,
     events: {
-        undefined: 'undefined',
         onChange: 'change',
         onFocus: 'focus',
     },

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/chip';
 /**
  * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.
@@ -20,9 +21,9 @@ import Component from '../../components/chip';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClick: string;
-    onKeyDown: string;
-    onKeyUp: string;
-    onFocus: string;
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+    onFocus: EventName<FocusEvent>;
 }>;
 export default reactWrapper;

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/coachmark';
 /**
  * Coachmark component based on top of the popover component,
@@ -26,9 +27,9 @@ import Component from '../../components/coachmark';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onShown: string;
-    onHidden: string;
-    onCreated: string;
-    onDestroyed: string;
+    onShown: EventName<Event>;
+    onHidden: EventName<Event>;
+    onCreated: EventName<Event>;
+    onDestroyed: EventName<Event>;
 }>;
 export default reactWrapper;

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/filterchip';
 /**
  * mdc-filterchip component is an interactive chip that consumers can use to select or deselect.
@@ -9,9 +10,9 @@ import Component from '../../components/filterchip';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClick: string;
-    onKeyDown: string;
-    onKeyUp: string;
-    onFocus: string;
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+    onFocus: EventName<FocusEvent>;
 }>;
 export default reactWrapper;

package/dist/react/index.d.ts

@@ -2,9 +2,9 @@ export { default as AlertChip } from './alertchip';
 export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
+export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
-export { default as Badge } from './badge';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';

package/dist/react/index.js

@@ -2,9 +2,9 @@ export { default as AlertChip } from './alertchip';
 export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
+export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
-export { default as Badge } from './badge';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/input';
 /**
  * mdc-input is a component that allows users to input text.
@@ -41,10 +42,9 @@ import Component from '../../components/input';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    undefined: string;
-    onInput: string;
-    onChange: string;
-    onFocus: string;
-    onBlur: string;
+    onInput: EventName<InputEvent>;
+    onChange: EventName<Event>;
+    onFocus: EventName<FocusEvent>;
+    onBlur: EventName<FocusEvent>;
 }>;
 export default reactWrapper;

package/dist/react/input/index.js

@@ -48,7 +48,6 @@ const reactWrapper = createComponent({
     elementClass: Component,
     react: React,
     events: {
-        undefined: 'undefined',
         onInput: 'input',
         onChange: 'change',
         onFocus: 'focus',

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/inputchip';
 /**
  * mdc-inputchip component is an interactive chip that consumers can use to represent an input.
@@ -20,6 +21,6 @@ import Component from '../../components/inputchip';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onRemove: string;
+    onRemove: EventName<Event>;
 }>;
 export default reactWrapper;

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/listitem';
 /**
  * mdc-listitem component is used to display a label with different types of controls.
@@ -37,9 +38,9 @@ import Component from '../../components/listitem';
  * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClick: string;
-    onKeyDown: string;
-    onKeyUp: string;
-    onFocus: string;
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+    onFocus: EventName<FocusEvent>;
 }>;
 export default reactWrapper;

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/option';
 /**
  * option component, which is used as a list item in a select component.<br/>
@@ -13,9 +14,9 @@ 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: string;
-    onKeyDown: string;
-    onKeyUp: string;
-    onFocus: string;
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+    onFocus: EventName<FocusEvent>;
 }>;
 export default reactWrapper;

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/popover';
 /**
  * Popover component is a lightweight floating UI element that displays additional content when triggered.
@@ -28,9 +29,9 @@ import Component from '../../components/popover';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onShown: string;
-    onHidden: string;
-    onCreated: string;
-    onDestroyed: string;
+    onShown: EventName<Event>;
+    onHidden: EventName<Event>;
+    onCreated: EventName<Event>;
+    onDestroyed: EventName<Event>;
 }>;
 export default reactWrapper;

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/radio';
 /**
  * Radio allow users to select single options from a list or turn an item/feature on or off.
@@ -30,8 +31,7 @@ import Component from '../../components/radio';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    undefined: string;
-    onChange: string;
-    onFocus: string;
+    onChange: EventName<Event>;
+    onFocus: EventName<FocusEvent>;
 }>;
 export default reactWrapper;

package/dist/react/radio/index.js

@@ -37,7 +37,6 @@ const reactWrapper = createComponent({
     elementClass: Component,
     react: React,
     events: {
-        undefined: 'undefined',
         onChange: 'change',
         onFocus: 'focus',
     },

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/searchfield';
 /**
  * searchfield component is used as an input field for search functionality.
@@ -12,10 +13,9 @@ import Component from '../../components/searchfield';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    undefined: string;
-    onInput: string;
-    onChange: string;
-    onFocus: string;
-    onBlur: string;
+    onInput: EventName<InputEvent>;
+    onChange: EventName<Event>;
+    onFocus: EventName<FocusEvent>;
+    onBlur: EventName<FocusEvent>;
 }>;
 export default reactWrapper;

package/dist/react/searchfield/index.js

@@ -19,7 +19,6 @@ const reactWrapper = createComponent({
     elementClass: Component,
     react: React,
     events: {
-        undefined: 'undefined',
         onInput: 'input',
         onChange: 'change',
         onFocus: 'focus',

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/tab';
 /**
  * `mdc-tab` is Tab component to be used within the Tabgroup.
@@ -89,9 +90,9 @@ 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, {
-    onClick: string;
-    onKeyDown: string;
-    onKeyUp: string;
-    onFocus: string;
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+    onFocus: EventName<FocusEvent>;
 }>;
 export default reactWrapper;

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/textarea';
 /**
  * mdc-textarea component, which is used to get the multi-line text input from the user.
@@ -49,11 +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: string;
-    undefined: string;
-    onInput: string;
-    onChange: string;
-    onFocus: string;
-    onBlur: string;
+    onLimitExceeded: EventName<Event>;
+    onInput: EventName<InputEvent>;
+    onChange: EventName<Event>;
+    onFocus: EventName<FocusEvent>;
+    onBlur: EventName<FocusEvent>;
 }>;
 export default reactWrapper;

package/dist/react/textarea/index.js

@@ -57,7 +57,6 @@ const reactWrapper = createComponent({
     react: React,
     events: {
         onLimitExceeded: 'limitexceeded',
-        undefined: 'undefined',
         onInput: 'input',
         onChange: 'change',
         onFocus: 'focus',

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/toggle';
 /**
  * Toggle Component is an interactive control used to switch between two mutually exclusive options,
@@ -36,8 +37,7 @@ import Component from '../../components/toggle';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    undefined: string;
-    onChange: string;
-    onFocus: string;
+    onChange: EventName<Event>;
+    onFocus: EventName<FocusEvent>;
 }>;
 export default reactWrapper;

package/dist/react/toggle/index.js

@@ -43,7 +43,6 @@ const reactWrapper = createComponent({
     elementClass: Component,
     react: React,
     events: {
-        undefined: 'undefined',
         onChange: 'change',
         onFocus: 'focus',
     },

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/tooltip';
 /**
  * A tooltip is triggered by mouse hover or by keyboard focus
@@ -19,9 +20,9 @@ import Component from '../../components/tooltip';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onShown: string;
-    onHidden: string;
-    onCreated: string;
-    onDestroyed: string;
+    onShown: EventName<Event>;
+    onHidden: EventName<Event>;
+    onCreated: EventName<Event>;
+    onDestroyed: EventName<Event>;
 }>;
 export default reactWrapper;

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

@@ -1,3 +1,4 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/virtualizedlist';
 /**
  * `mdc-virtualizedlist` component for creating custom virtualized lists.
@@ -14,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: string;
+    onScroll: EventName<Event>;
 }>;
 export default reactWrapper;

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.48.0"
+  "version": "0.49.0"
 }