@momentum-design/components 0.27.3 → 0.27.5

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

@@ -7,7 +7,17 @@ import Component from '../../components/avatarbutton';
  *
  * @dependency mdc-avatar
  *
+ * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.
+ * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.
+ *
  * @tagname mdc-avatarbutton
  */
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: string;
+    onKeyDown: string;
+    onKeyUp: string;
+    onFocus: string;
+}>;
 export default reactWrapper;

package/dist/react/avatarbutton/index.js

@@ -10,13 +10,23 @@ import { TAG_NAME } from '../../components/avatarbutton/avatarbutton.constants';
  *
  * @dependency mdc-avatar
  *
+ * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.
+ * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.
+ *
  * @tagname mdc-avatarbutton
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
     displayName: 'AvatarButton',
 });
 export default reactWrapper;

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

@@ -27,9 +27,19 @@ 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, {}>;
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: string;
+    onKeyDown: string;
+    onKeyUp: string;
+    onFocus: string;
+}>;
 export default reactWrapper;

package/dist/react/button/index.js

@@ -30,6 +30,11 @@ 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.
@@ -38,7 +43,12 @@ const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
     displayName: 'Button',
 });
 export default reactWrapper;

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

@@ -4,7 +4,17 @@ import Component from '../../components/buttonsimple';
  * It is used as an internal component and is not intended to be used directly by consumers.
  * Consumers should use the `mdc-button` component instead.
  *
+ * @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-buttonsimple
  */
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: string;
+    onKeyDown: string;
+    onKeyUp: string;
+    onFocus: string;
+}>;
 export default reactWrapper;

package/dist/react/buttonsimple/index.js

@@ -7,13 +7,23 @@ import { TAG_NAME } from '../../components/buttonsimple/buttonsimple.constants';
  * It is used as an internal component and is not intended to be used directly by consumers.
  * Consumers should use the `mdc-button` component instead.
  *
+ * @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-buttonsimple
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
     displayName: 'Buttonsimple',
 });
 export default reactWrapper;

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

@@ -11,6 +11,9 @@ import Component from '../../components/checkbox';
  *
  * @tagname mdc-checkbox
  *
+ * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
+ *
  * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
  * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
  * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.
@@ -25,5 +28,9 @@ import Component from '../../components/checkbox';
  * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
  * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
  */
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    undefined: string;
+    onChange: string;
+    onFocus: string;
+}>;
 export default reactWrapper;

package/dist/react/checkbox/index.js

@@ -14,6 +14,9 @@ import { TAG_NAME } from '../../components/checkbox/checkbox.constants';
  *
  * @tagname mdc-checkbox
  *
+ * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
+ *
  * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
  * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
  * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.
@@ -32,7 +35,11 @@ const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        undefined: 'undefined',
+        onChange: 'change',
+        onFocus: 'focus',
+    },
     displayName: 'Checkbox',
 });
 export default reactWrapper;

package/dist/react/index.d.ts

@@ -2,9 +2,9 @@ export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Bullet } from './bullet';
+export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
-export { default as Button } from './button';
 export { default as Divider } from './divider';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';

package/dist/react/index.js

@@ -2,9 +2,9 @@ export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Bullet } from './bullet';
+export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
-export { default as Button } from './button';
 export { default as Divider } from './divider';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';

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

@@ -13,6 +13,11 @@ import Component from '../../components/input';
  *
  * @tagname mdc-input
  *
+ * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
+ *
  * @dependency mdc-icon
  * @dependency mdc-text
  * @dependency mdc-button
@@ -35,5 +40,11 @@ import Component from '../../components/input';
  * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
  *
  */
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    undefined: string;
+    onInput: string;
+    onChange: string;
+    onFocus: string;
+    onBlur: string;
+}>;
 export default reactWrapper;

package/dist/react/input/index.js

@@ -16,6 +16,11 @@ import { TAG_NAME } from '../../components/input/input.constants';
  *
  * @tagname mdc-input
  *
+ * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
+ *
  * @dependency mdc-icon
  * @dependency mdc-text
  * @dependency mdc-button
@@ -42,7 +47,13 @@ const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        undefined: 'undefined',
+        onInput: 'input',
+        onChange: 'change',
+        onFocus: 'focus',
+        onBlur: 'blur',
+    },
     displayName: 'Input',
 });
 export default reactWrapper;

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

@@ -8,6 +8,9 @@ import Component from '../../components/radio';
  *
  * @tagname mdc-radio
  *
+ * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
+ *
  * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
  * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled
  * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled
@@ -26,5 +29,9 @@ import Component from '../../components/radio';
  *  when active and disabled
  *
  */
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    undefined: string;
+    onChange: string;
+    onFocus: string;
+}>;
 export default reactWrapper;

package/dist/react/radio/index.js

@@ -11,6 +11,9 @@ import { TAG_NAME } from '../../components/radio/radio.constants';
  *
  * @tagname mdc-radio
  *
+ * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
+ *
  * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
  * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled
  * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled
@@ -33,7 +36,11 @@ const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        undefined: 'undefined',
+        onChange: 'change',
+        onFocus: 'focus',
+    },
     displayName: 'Radio',
 });
 export default reactWrapper;

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

@@ -16,6 +16,11 @@ import Component from '../../components/tab';
  * @dependency mdc-icon
  * @dependency mdc-text
  *
+ * @event click - (React: onClick) This event is dispatched when the tab is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.
+ * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.
+ *
  * @tagname mdc-tab
  *
  * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.
@@ -83,5 +88,10 @@ import Component from '../../components/tab';
  * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill 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, {}>;
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: string;
+    onKeyDown: string;
+    onKeyUp: string;
+    onFocus: string;
+}>;
 export default reactWrapper;

package/dist/react/tab/index.js

@@ -19,6 +19,11 @@ import { TAG_NAME } from '../../components/tab/tab.constants';
  * @dependency mdc-icon
  * @dependency mdc-text
  *
+ * @event click - (React: onClick) This event is dispatched when the tab is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.
+ * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.
+ *
  * @tagname mdc-tab
  *
  * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.
@@ -90,7 +95,12 @@ const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
     displayName: 'Tab',
 });
 export default reactWrapper;

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

@@ -13,6 +13,9 @@ import Component from '../../components/toggle';
  *
  * @tagname mdc-toggle
  *
+ * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.
+ *
  * @cssproperty --mdc-toggle-width - width of the toggle
  * @cssproperty --mdc-toggle-height - height of the toggle
  * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact
@@ -32,5 +35,9 @@ import Component from '../../components/toggle';
  * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state
  *
  */
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    undefined: string;
+    onChange: string;
+    onFocus: string;
+}>;
 export default reactWrapper;

package/dist/react/toggle/index.js

@@ -16,6 +16,9 @@ import { TAG_NAME } from '../../components/toggle/toggle.constants';
  *
  * @tagname mdc-toggle
  *
+ * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.
+ *
  * @cssproperty --mdc-toggle-width - width of the toggle
  * @cssproperty --mdc-toggle-height - height of the toggle
  * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact
@@ -39,7 +42,11 @@ const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        undefined: 'undefined',
+        onChange: 'change',
+        onFocus: 'focus',
+    },
     displayName: 'Toggle',
 });
 export default reactWrapper;

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

@@ -9,7 +9,11 @@ import Component from '../../components/virtualizedlist';
  *
  * @tagname mdc-virtualizedlist
  *
+ * @event onscroll - (React: onScroll) Event that gets called when user scrolls inside of list.
+ *
  * @slot - Client side List with nested list items.
  */
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onScroll: string;
+}>;
 export default reactWrapper;

package/dist/react/virtualizedlist/index.js

@@ -12,13 +12,17 @@ import { TAG_NAME } from '../../components/virtualizedlist/virtualizedlist.const
  *
  * @tagname mdc-virtualizedlist
  *
+ * @event onscroll - (React: onScroll) Event that gets called when user scrolls inside of list.
+ *
  * @slot - Client side List with nested list items.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        onScroll: 'onscroll',
+    },
     displayName: 'VirtualizedList',
 });
 export default reactWrapper;

package/package.json

@@ -37,5 +37,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.27.3"
+  "version": "0.27.5"
 }