feat(multi-select): make MultiSelect slottable (#1183)

COMPONENT_INDEX.md

@@ -2456,15 +2456,17 @@ export interface MultiSelectItem {
 
 ### Slots
 
-None.
+| Slot name | Default | Props                                                  | Fallback                          |
+| :-------- | :------ | :----------------------------------------------------- | :-------------------------------- |
+| --        | Yes     | <code>{ item: MultiSelectItem; index: number } </code> | <code>{itemToString(item)}</code> |
 
 ### Events
 
 | Event name | Type       | Detail                                                                                                         |
 | :--------- | :--------- | :------------------------------------------------------------------------------------------------------------- |
-| blur       | dispatched | <code>FocusEvent &#124; CustomEvent<FocusEvent></code>                                                         |
 | select     | dispatched | <code>{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }</code> |
 | clear      | dispatched | <code>null</code>                                                                                              |
+| blur       | dispatched | <code>FocusEvent &#124; CustomEvent<FocusEvent></code>                                                         |
 | keydown    | forwarded  | --                                                                                                             |
 | keyup      | forwarded  | --                                                                                                             |
 | focus      | forwarded  | --                                                                                                             |

docs/src/COMPONENT_API.json

@@ -6935,19 +6935,26 @@
         }
       ],
       "moduleExports": [],
-      "slots": [],
-      "events": [
+      "slots": [
         {
-          "type": "dispatched",
-          "name": "blur",
-          "detail": "FocusEvent | CustomEvent<FocusEvent>"
-        },
+          "name": "__default__",
+          "default": true,
+          "fallback": "{itemToString(item)}",
+          "slot_props": "{ item: MultiSelectItem; index: number }"
+        }
+      ],
+      "events": [
         {
           "type": "dispatched",
           "name": "select",
           "detail": "{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }"
         },
         { "type": "dispatched", "name": "clear", "detail": "null" },
+        {
+          "type": "dispatched",
+          "name": "blur",
+          "detail": "FocusEvent | CustomEvent<FocusEvent>"
+        },
         { "type": "forwarded", "name": "keydown", "element": "input" },
         { "type": "forwarded", "name": "keyup", "element": "input" },
         { "type": "forwarded", "name": "focus", "element": "input" }

docs/src/pages/components/MultiSelect.svx

@@ -13,6 +13,12 @@ By default, items will be ordered alphabetically based on the `item.text` value.
     {id: "2", text: "Fax"}]}"
   />
 
+### Custom slot
+
+Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.
+
+<FileSource src="/framed/MultiSelect/MultiSelectSlot" />
+
 ### No alphabetical ordering
 
 To prevent alphabetical item ordering, pass an empty function to the `sortItem` prop.

docs/src/pages/framed/MultiSelect/MultiSelectSlot.svelte

@@ -0,0 +1,33 @@
+<script>
+  import { MultiSelect } from "carbon-components-svelte";
+</script>
+
+<MultiSelect
+  titleText="Contact"
+  label="Select contact methods..."
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
+  let:item
+  let:index
+>
+  <div>
+    <strong>{item.text}</strong>
+  </div>
+  <div>
+    id: {item.id} - index:
+    {index}
+  </div>
+</MultiSelect>
+
+<style>
+  :global(.bx--list-box__menu-item, .bx--list-box__menu-item__option) {
+    height: auto;
+  }
+
+  :global(.bx--checkbox-label-text) {
+    display: block;
+  }
+</style>

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>

tests/MultiSelect.test.svelte

@@ -20,7 +20,12 @@
   on:blur="{(e) => {
     e.detail; // number | FocusEvent
   }}"
-/>
+  let:item
+  let:index
+>
+  {item.id}
+  {index}
+</MultiSelect>
 
 <MultiSelect
   titleText="Contact"

types/MultiSelect/MultiSelect.svelte.d.ts

@@ -228,16 +228,16 @@ export interface MultiSelectProps
 export default class MultiSelect extends SvelteComponentTyped<
   MultiSelectProps,
   {
-    blur: FocusEvent | CustomEvent<FocusEvent>;
     select: CustomEvent<{
       selectedIds: MultiSelectItemId[];
       selected: MultiSelectItem[];
       unselected: MultiSelectItem[];
     }>;
     clear: CustomEvent<null>;
+    blur: FocusEvent | CustomEvent<FocusEvent>;
     keydown: WindowEventMap["keydown"];
     keyup: WindowEventMap["keyup"];
     focus: WindowEventMap["focus"];
   },
-  {}
+  { default: { item: MultiSelectItem; index: number } }
 > {}