From b3985a697d4c6a3e052d1515bd70e75fce9ba5af Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 19 Mar 2022 09:04:59 -0700
Subject: [PATCH] feat(multi-select): make MultiSelect slottable

---
 src/MultiSelect/MultiSelect.svelte | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index 87e06e55..c156f88a 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -1,14 +1,12 @@
 <script>
-  /**
-   * @event {FocusEvent | CustomEvent<FocusEvent>} blur
-   */
-
   /**
    * @typedef {any} MultiSelectItemId
    * @typedef {string} MultiSelectItemText
    * @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; }} MultiSelectItem
    * @event {{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }} select
    * @event {null} clear
+   * @event {FocusEvent | CustomEvent<FocusEvent>} blur
+   * @slot {{ item: MultiSelectItem; index: number }}
    */
 
   /**
@@ -487,7 +485,6 @@
           >
             <Checkbox
               name="{item.id}"
-              labelText="{itemToString(item)}"
               title="{useTitleInItem ? itemToString(item) : undefined}"
               {...itemToInput(item)}
               readonly
@@ -498,7 +495,11 @@
               on:blur="{() => {
                 if (i === filteredItems.length - 1) open = false;
               }}"
-            />
+            >
+              <slot slot="labelText" item="{item}" index="{i}">
+                {itemToString(item)}
+              </slot>
+            </Checkbox>
           </ListBoxMenuItem>
         {/each}
       </ListBoxMenu>