@momentum-design/components 0.102.4 → 0.102.6

package/dist/components/input/input.component.d.ts

@@ -22,6 +22,7 @@ declare const Input_base: import("../../utils/mixins/index.types").Constructor<i
  * @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.
+ * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
  *
  * @dependency mdc-icon
  * @dependency mdc-text

package/dist/components/input/input.component.js

@@ -36,6 +36,7 @@ import styles from './input.styles';
  * @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.
+ * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
  *
  * @dependency mdc-icon
  * @dependency mdc-text
@@ -252,6 +253,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         this.value = '';
         // focus the input field after clearing the text
         (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+        this.dispatchEvent(new CustomEvent('clear', { bubbles: true, composed: true }));
     }
     /**
      * Renders the trailing button to clear the input field if the trailingButton is set to true.

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

@@ -1,12 +1,16 @@
-import type { ValueOf } from '../../utils/types';
+import type { TypedEvent, ValueOf } from '../../utils/types';
+import type Input from './input.component';
 import { AUTO_CAPITALIZE, AUTO_COMPLETE, INPUT_TYPE } from './input.constants';
 type AutoCapitalizeType = ValueOf<typeof AUTO_CAPITALIZE>;
 type AutoCompleteType = ValueOf<typeof AUTO_COMPLETE>;
 type InputType = ValueOf<typeof INPUT_TYPE>;
+type InputClearEvent = TypedEvent<Input>;
+type InputChangeEvent = TypedEvent<Input>;
 interface Events {
     onInputEvent: InputEvent;
-    onChangeEvent: Event;
+    onChangeEvent: InputChangeEvent;
     onFocusEvent: FocusEvent;
     onBlurEvent: FocusEvent;
+    onClearEvent: InputClearEvent;
 }
-export type { AutoCapitalizeType, AutoCompleteType, InputType, Events };
+export type { AutoCapitalizeType, AutoCompleteType, InputType, InputClearEvent, InputChangeEvent, Events };

package/dist/components/searchfield/searchfield.component.d.ts

@@ -1,7 +1,7 @@
 import { CSSResult } from 'lit';
 import Input from '../input/input.component';
 /**
- * searchfield component is used as an input field for search functionality.
+ * `mdc-searchfield` component is used as an input field for search functionality.
  *
  * It supports `mdc-inputchip` as filters.
  *
@@ -9,8 +9,13 @@ import Input from '../input/input.component';
  *
  * @tagname mdc-searchfield
  *
- * @slot filters - Slot for input chips
+ * @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.
+ * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
  *
+ * @slot filters - Slot for input chips
  */
 declare class Searchfield extends Input {
     inputChips?: Array<HTMLElement>;

package/dist/components/searchfield/searchfield.component.js

@@ -15,7 +15,7 @@ import { KEYS } from '../../utils/keys';
 import styles from './searchfield.styles';
 import { DEFAULTS } from './searchfield.constants';
 /**
- * searchfield component is used as an input field for search functionality.
+ * `mdc-searchfield` component is used as an input field for search functionality.
  *
  * It supports `mdc-inputchip` as filters.
  *
@@ -23,8 +23,13 @@ import { DEFAULTS } from './searchfield.constants';
  *
  * @tagname mdc-searchfield
  *
- * @slot filters - Slot for input chips
+ * @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.
+ * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
  *
+ * @slot filters - Slot for input chips
  */
 class Searchfield extends Input {
     constructor() {
@@ -46,7 +51,7 @@ class Searchfield extends Input {
      */
     handleKeyDown(event) {
         super.handleKeyDown(event);
-        if (event.key === 'Escape') {
+        if (event.key === KEYS.ESCAPE) {
             this.clearInputText();
         }
     }

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

@@ -0,0 +1,2 @@
+import type { Events } from '../input/input.types';
+export type { Events };

package/dist/components/searchfield/searchfield.types.js

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