@momentum-design/components 0.133.19 → 0.133.21

package/dist/react/searchfield/index.js

@@ -12,6 +12,10 @@ import { TAG_NAME } from '../../components/searchfield/searchfield.constants';
  *
  * This component is built by extending the `mdc-input` component.
  *
+ * Searchfield supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:
+ * - In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.
+ * - In **controlled** mode (`control-type="controlled"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the "removed" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).
+ *
  * **Accessibility:**
  *
  * NOTE: this component should not be used in combination with a Popover or Listbox component.
@@ -26,6 +30,7 @@ import { TAG_NAME } from '../../components/searchfield/searchfield.constants';
  * @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.
+ * @event chipRemove - (React: onChipRemove) This event is dispatched when a chip filter is removed. The removed chip element is available in event.detail.chip. In `uncontrolled` mode (default) the chip is removed from the DOM automatically; in `controlled` mode only the event is fired and the consumer is responsible for removing the chip.
  *
  * @slot filters - Slot for chip filters rendered inline with the input text
  * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
@@ -74,6 +79,7 @@ const reactWrapper = createComponent({
     elementClass: Component,
     react: React,
     events: {
+        onChipRemove: 'chipRemove',
         onInput: 'input',
         onChange: 'change',
         onFocus: 'focus',

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

@@ -1,7 +1,8 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/searchpopover';
 import type { Events } from '../../components/searchpopover/searchpopover.types';
-import type { Events as EventsInherited } from '../../components/input/input.types';
+import type { Events as EventsInherited0 } from '../../components/input/input.types';
+import type { Events as EventsInherited1 } from '../../components/searchfield/searchfield.types';
 /**
  * `mdc-searchpopover` widget is a combination of the Searchfield and Popover components, connected to ensure
  * proper accessibility. This component should be used when search results or suggestions need to be displayed
@@ -15,6 +16,10 @@ import type { Events as EventsInherited } from '../../components/input/input.typ
  *
  * This component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.
  *
+ * Searchpopover supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:
+ * - In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.
+ * - In **controlled** mode (`control-type="controlled"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the "removed" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).
+ *
  * @tagname mdc-searchpopover
  *
  * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
@@ -22,6 +27,9 @@ import type { Events as EventsInherited } from '../../components/input/input.typ
  * @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.
+ * @event chipRemove - (React: onChipRemove) This event is dispatched when a chip filter is removed. The removed chip element is available in event.detail.chip.
+ * In **controlled** mode (`control-type="controlled"`), the chip is NOT removed from the DOM automatically — the consumer is responsible for removing it.
+ * In **uncontrolled** mode (default), the chip is removed from the DOM automatically.
  * @event shown - (React: onShown) This event is dispatched when the popover is shown
  * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden
  *
@@ -74,10 +82,11 @@ import type { Events as EventsInherited } from '../../components/input/input.typ
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onShown: EventName<Events["onShownEvent"]>;
     onHidden: EventName<Events["onHiddenEvent"]>;
-    onInput: EventName<EventsInherited["onInputEvent"]>;
-    onChange: EventName<EventsInherited["onChangeEvent"]>;
-    onFocus: EventName<EventsInherited["onFocusEvent"]>;
-    onBlur: EventName<EventsInherited["onBlurEvent"]>;
-    onClear: EventName<EventsInherited["onClearEvent"]>;
+    onInput: EventName<EventsInherited0["onInputEvent"]>;
+    onChange: EventName<EventsInherited0["onChangeEvent"]>;
+    onFocus: EventName<EventsInherited0["onFocusEvent"]>;
+    onBlur: EventName<EventsInherited0["onBlurEvent"]>;
+    onClear: EventName<EventsInherited0["onClearEvent"]>;
+    onChipRemove: EventName<EventsInherited1["onChipRemoveEvent"]>;
 }>;
 export default reactWrapper;

package/dist/react/searchpopover/index.js

@@ -15,6 +15,10 @@ import { TAG_NAME } from '../../components/searchpopover/searchpopover.constants
  *
  * This component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.
  *
+ * Searchpopover supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:
+ * - In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.
+ * - In **controlled** mode (`control-type="controlled"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the "removed" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).
+ *
  * @tagname mdc-searchpopover
  *
  * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
@@ -22,6 +26,9 @@ import { TAG_NAME } from '../../components/searchpopover/searchpopover.constants
  * @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.
+ * @event chipRemove - (React: onChipRemove) This event is dispatched when a chip filter is removed. The removed chip element is available in event.detail.chip.
+ * In **controlled** mode (`control-type="controlled"`), the chip is NOT removed from the DOM automatically — the consumer is responsible for removing it.
+ * In **uncontrolled** mode (default), the chip is removed from the DOM automatically.
  * @event shown - (React: onShown) This event is dispatched when the popover is shown
  * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden
  *
@@ -83,6 +90,7 @@ const reactWrapper = createComponent({
         onFocus: 'focus',
         onBlur: 'blur',
         onClear: 'clear',
+        onChipRemove: 'chipRemove',
     },
     displayName: 'Searchpopover',
 });

package/dist/utils/keys.d.ts

@@ -13,5 +13,6 @@ declare const KEYS: {
     SHIFT_TAB: string;
     SPACE: string;
     TAB: string;
+    DELETE: string;
 };
 export { KEYS };

package/dist/utils/keys.js

@@ -13,5 +13,6 @@ const KEYS = {
     SHIFT_TAB: 'Shift+Tab',
     SPACE: ' ',
     TAB: 'Tab',
+    DELETE: 'Delete',
 };
 export { KEYS };

package/package.json

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