feat(multi-select): add itemToProp to customize name, title, labelText values passed to input (#1074)

Currently, the input `name` for each item uses the same value as `itemToString(item)`.

This adds an `itemToInput` prop to allow the consumer to customize the name/title/labelText values passed to the `Checkbox` input.

The name attribute now defaults to use the `item.id` instead of `item.text`.

COMPONENT_INDEX.md

@@ -2429,6 +2429,7 @@ export interface MultiSelectItem {
 | selectedIds       | <code>let</code> | Yes      | <code>MultiSelectItemId[]</code>                                                               | <code>[]</code>                                                                            | Set the selected ids                                                                  |
 | items             | <code>let</code> | Yes      | <code>MultiSelectItem[]</code>                                                                 | <code>[]</code>                                                                            | Set the multiselect items                                                             |
 | itemToString      | <code>let</code> | No       | <code>(item: MultiSelectItem) => any</code>                                                    | <code>(item) => item.text &#124;&#124; item.id</code>                                      | Override the display of a multiselect item                                            |
+| itemToInput       | <code>let</code> | No       | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }</code>    | <code>(item) => {}</code>                                                                  | Override the item name, title, labelText passed to the checkbox input                 |
 | size              | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code>                                                      | <code>undefined</code>                                                                     | Set the size of the combobox                                                          |
 | type              | <code>let</code> | No       | <code>"default" &#124; "inline"</code>                                                         | <code>"default"</code>                                                                     | Specify the type of multiselect                                                       |
 | direction         | <code>let</code> | No       | <code>"bottom" &#124; "top"</code>                                                             | <code>"bottom"</code>                                                                      | Specify the direction of the multiselect dropdown menu                                |

docs/src/COMPONENT_API.json

@@ -6446,6 +6446,17 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "itemToInput",
+          "kind": "let",
+          "description": "Override the item name, title, labelText passed to the checkbox input",
+          "type": "(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }",
+          "value": "(item) => {}",
+          "isFunction": true,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "selectedIds",
           "kind": "let",

src/MultiSelect/MultiSelect.svelte

@@ -23,6 +23,12 @@
    */
   export let itemToString = (item) => item.text || item.id;
 
+  /**
+   * Override the item name, title, labelText passed to the checkbox input
+   * @type {(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }}
+   */
+  export let itemToInput = (item) => {};
+
   /**
    * Set the selected ids
    * @type {MultiSelectItemId[]}
@@ -478,12 +484,13 @@
             }}"
           >
             <Checkbox
+              name="{item.id}"
+              labelText="{itemToString(item)}"
+              title="{useTitleInItem ? itemToString(item) : undefined}"
+              {...itemToInput(item)}
               readonly
               tabindex="-1"
               id="checkbox-{item.id}"
-              title="{useTitleInItem ? itemToString(item) : undefined}"
-              name="{itemToString(item)}"
-              labelText="{itemToString(item)}"
               checked="{item.checked}"
               disabled="{disabled}"
               on:blur="{() => {

types/MultiSelect/MultiSelect.svelte.d.ts

@@ -24,6 +24,16 @@ export interface MultiSelectProps
    */
   itemToString?: (item: MultiSelectItem) => any;
 
+  /**
+   * Override the item name, title, labelText passed to the checkbox input
+   * @default (item) => {}
+   */
+  itemToInput?: (item: MultiSelectItem) => {
+    name?: string;
+    labelText?: any;
+    title?: string;
+  };
+
   /**
    * Set the selected ids
    * @default []