diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index c740e4b9..f412665b 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2756,7 +2756,7 @@ No slots. ### Dispatched events -No dispatched events. +- `on:select` --- diff --git a/docs/src/PUBLIC_API.json b/docs/src/PUBLIC_API.json index 15f6f148..279d5abc 100644 --- a/docs/src/PUBLIC_API.json +++ b/docs/src/PUBLIC_API.json @@ -8054,8 +8054,8 @@ [ "clear", { - "start": 8393, - "end": 8401, + "start": 8577, + "end": 8585, "type": "EventHandler", "name": "clear", "modifiers": [], @@ -8065,8 +8065,8 @@ [ "keydown", { - "start": 9289, - "end": 9299, + "start": 9473, + "end": 9483, "type": "EventHandler", "name": "keydown", "modifiers": [], @@ -8076,8 +8076,8 @@ [ "focus", { - "start": 9791, - "end": 9799, + "start": 9975, + "end": 9983, "type": "EventHandler", "name": "focus", "modifiers": [], @@ -8087,8 +8087,8 @@ [ "blur", { - "start": 9810, - "end": 9817, + "start": 9994, + "end": 10001, "type": "EventHandler", "name": "blur", "modifiers": [], @@ -8096,7 +8096,14 @@ } ] ], - "dispatched_events": [] + "dispatched_events": [ + [ + "select", + { + "detail": "{\n selectedIds,\n selected: checked,\n unselected: unchecked,\n }" + } + ] + ] }, "NotificationActionButton": { "moduleName": "NotificationActionButton", diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte index 1d99ff9e..95f02c9f 100644 --- a/src/MultiSelect/MultiSelect.svelte +++ b/src/MultiSelect/MultiSelect.svelte @@ -153,7 +153,7 @@ * @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; }} MultiSelectItem */ - import { afterUpdate, setContext } from "svelte"; + import { afterUpdate, createEventDispatcher, setContext } from "svelte"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16"; import { Checkbox } from "../Checkbox"; import { @@ -165,6 +165,8 @@ ListBoxSelection, } from "../ListBox"; + const dispatch = createEventDispatcher(); + let multiSelectRef = null; let fieldRef = null; let selectionRef = null; @@ -213,6 +215,11 @@ } prevChecked = checked; selectedIds = checked.map(({ id }) => id); + dispatch("select", { + selectedIds, + selected: checked, + unselected: unchecked, + }); } if (!open) {