From 8fb298561042751a1c0c97b9230dac275069f1d3 Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Thu, 5 Sep 2024 11:09:21 -0400
Subject: [PATCH] Dispatch `apply` event when applying from MultiSelect (#476)

---
 .changeset/polite-rivers-roll.md                       |  5 +++++
 .../svelte-ux/src/lib/components/MultiSelect.svelte    | 10 +++++++++-
 .../src/lib/components/MultiSelectField.svelte         |  1 +
 .../src/lib/components/MultiSelectMenu.svelte          |  1 +
 4 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/polite-rivers-roll.md

diff --git a/.changeset/polite-rivers-roll.md b/.changeset/polite-rivers-roll.md
new file mode 100644
index 000000000..f545060a5
--- /dev/null
+++ b/.changeset/polite-rivers-roll.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+Dispatch `apply` event when applying from MultiSelect
diff --git a/packages/svelte-ux/src/lib/components/MultiSelect.svelte b/packages/svelte-ux/src/lib/components/MultiSelect.svelte
index 3d7c5c967..ec2f4602f 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelect.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelect.svelte
@@ -57,10 +57,17 @@
       indeterminate: typeof $indeterminateStore;
       original: { selected: MenuOption<TValue>[]; unselected: MenuOption<TValue>[] };
     };
+    apply: {
+      value: typeof value;
+      selection: typeof $selection;
+      indeterminate: typeof $indeterminateStore;
+      original: { selected: MenuOption<TValue>[]; unselected: MenuOption<TValue>[] };
+    };
     cancel: null;
   }>();
 
   export let onApply = async (ctx: {
+    value: typeof value;
     selection: typeof $selection;
     indeterminate: typeof $indeterminateStore;
     original: { selected: MenuOption<TValue>[]; unselected: MenuOption<TValue>[] };
@@ -71,12 +78,13 @@
   async function applyChange() {
     applying = true;
     const changeContext = {
-      value: $selection.selected,
+      value: $selection.selected as TValue[],
       selection: $selection,
       indeterminate: $indeterminateStore,
       original: { selected: selectedOptions, unselected: unselectedOptions },
     };
     await onApply(changeContext);
+    dispatch('apply', changeContext);
     applying = false;
     onChange();
   }
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
index 613db039b..9837a6b49 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
@@ -218,6 +218,7 @@
     bind:open
     on:change={onSelectChange}
     on:close={hide}
+    on:apply
     bind:menuOptionsEl
     {...menuProps}
   >
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte b/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
index 6272db825..a45e35d32 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
@@ -78,6 +78,7 @@
     on:cancel
     on:change={() => mode !== 'immediate' && close()}
     on:change
+    on:apply
   >
     <slot name="beforeOptions" slot="beforeOptions" let:selection {selection} />
     <slot name="afterOptions" slot="afterOptions" let:selection {selection} />