@momentum-design/components 0.27.2 → 0.27.4

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/iconprovider/index.d.ts

@@ -3,12 +3,18 @@ import Component from '../../components/iconprovider';
  * IconProvider component, which allows to be consumed from sub components
  * (see `providerUtils.consume` for how to consume)
  *
- * Bundling icons will be up to the consumer of this component, such
- * that only a url has to be passed in from which the icons will be
- * fetched.
+ * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.
+ * If `momentum-icons` is selected, the icons will be fetched from the
+ * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).
+ * This requires the consumer to have the `@momentum-designs` package installed and the
+ * build tooling needs to support dynamic imports.
  *
- * If `cacheStrategy` is provided, the IconProvider will cache the icons
- * in the selected cache (either web-api-cache or in-memory-cache),
+ * If `custom-icons` is selected, the icons will be fetched from the provided URL.
+ * This requires the consumer to provide a URL from which the icons will be fetched and
+ * the consumer needs to make sure to bundle the icons in the application.
+ *
+ * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the
+ * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),
  * to avoid fetching the same icon multiple times over the network.
  * This is useful when the same icon is used multiple times in the application.
  * To consider:

package/dist/react/iconprovider/index.js

@@ -6,12 +6,18 @@ import { TAG_NAME } from '../../components/iconprovider/iconprovider.constants';
  * IconProvider component, which allows to be consumed from sub components
  * (see `providerUtils.consume` for how to consume)
  *
- * Bundling icons will be up to the consumer of this component, such
- * that only a url has to be passed in from which the icons will be
- * fetched.
+ * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.
+ * If `momentum-icons` is selected, the icons will be fetched from the
+ * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).
+ * This requires the consumer to have the `@momentum-designs` package installed and the
+ * build tooling needs to support dynamic imports.
  *
- * If `cacheStrategy` is provided, the IconProvider will cache the icons
- * in the selected cache (either web-api-cache or in-memory-cache),
+ * If `custom-icons` is selected, the icons will be fetched from the provided URL.
+ * This requires the consumer to provide a URL from which the icons will be fetched and
+ * the consumer needs to make sure to bundle the icons in the application.
+ *
+ * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the
+ * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),
  * to avoid fetching the same icon multiple times over the network.
  * This is useful when the same icon is used multiple times in the application.
  * To consider:

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.2"
+  "version": "0.27.4"
 }