From 1f7b5560a866cd4042e5ce1e914cbdff2b265a70 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 20 Jan 2022 18:50:36 -0800
Subject: [PATCH] Type `id` as any in `ComboBox`, `Dropdown`, `MultiSelect`
 (#1019)

Loosen the prop type for `id`, `selectedId` to be `any` instead of a `string`.
---
 COMPONENT_INDEX.md                        | 46 ++++++++++++-----------
 docs/src/COMPONENT_API.json               | 25 +++++++-----
 src/ComboBox/ComboBox.svelte              |  7 ++--
 src/Dropdown/Dropdown.svelte              |  2 +-
 src/MultiSelect/MultiSelect.svelte        |  6 +--
 tests/ComboBox.test.svelte                |  5 ++-
 tests/Dropdown.test.svelte                |  5 ++-
 tests/MultiSelect.test.svelte             |  2 +-
 types/ComboBox/ComboBox.svelte.d.ts       | 11 ++++--
 types/Dropdown/Dropdown.svelte.d.ts       |  2 +-
 types/MultiSelect/MultiSelect.svelte.d.ts |  6 +--
 11 files changed, 68 insertions(+), 49 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 31f94601..8a6286e9 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -648,8 +648,10 @@ None.
 ### Types
 
 ```ts
+export type ComboBoxItemId = any;
+
 export interface ComboBoxItem {
-  id: string;
+  id: ComboBoxItemId;
   text: string;
 }
 ```
@@ -662,7 +664,7 @@ export interface ComboBoxItem {
 | ref              | <code>let</code>      | Yes      | <code>null &#124; HTMLInputElement</code>                   | <code>null</code>                                                                                                                                                                                                            | Obtain a reference to the input HTML element                             |
 | open             | <code>let</code>      | Yes      | <code>boolean</code>                                        | <code>false</code>                                                                                                                                                                                                           | Set to `true` to open the combobox menu dropdown                         |
 | value            | <code>let</code>      | Yes      | <code>string</code>                                         | <code>""</code>                                                                                                                                                                                                              | Specify the selected combobox value                                      |
-| selectedId       | <code>let</code>      | Yes      | <code>string</code>                                         | --                                                                                                                                                                                                                           | Set the selected item by value id                                        |
+| selectedId       | <code>let</code>      | Yes      | <code>ComboBoxItemId</code>                                 | --                                                                                                                                                                                                                           | Set the selected item by value id                                        |
 | items            | <code>let</code>      | No       | <code>ComboBoxItem[]</code>                                 | <code>[]</code>                                                                                                                                                                                                              | Set the combobox items                                                   |
 | itemToString     | <code>let</code>      | No       | <code>(item: ComboBoxItem) => string</code>                 | <code>(item) => item.text &#124;&#124; item.id</code>                                                                                                                                                                        | Override the display of a combobox item                                  |
 | direction        | <code>let</code>      | No       | <code>"bottom" &#124; "top"</code>                          | <code>"bottom"</code>                                                                                                                                                                                                        | Specify the direction of the combobox dropdown menu                      |
@@ -688,15 +690,15 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail                                                          |
-| :--------- | :--------- | :-------------------------------------------------------------- |
-| select     | dispatched | <code>{ selectedId: string; selectedItem: ComboBoxItem }</code> |
-| keydown    | forwarded  | --                                                              |
-| keyup      | forwarded  | --                                                              |
-| focus      | forwarded  | --                                                              |
-| blur       | forwarded  | --                                                              |
-| clear      | forwarded  | --                                                              |
-| scroll     | forwarded  | --                                                              |
+| Event name | Type       | Detail                                                                  |
+| :--------- | :--------- | :---------------------------------------------------------------------- |
+| select     | dispatched | <code>{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }</code> |
+| keydown    | forwarded  | --                                                                      |
+| keyup      | forwarded  | --                                                                      |
+| focus      | forwarded  | --                                                                      |
+| blur       | forwarded  | --                                                                      |
+| clear      | forwarded  | --                                                                      |
+| scroll     | forwarded  | --                                                                      |
 
 ## `ComposedModal`
 
@@ -1151,7 +1153,7 @@ None.
 ### Types
 
 ```ts
-export type DropdownItemId = string;
+export type DropdownItemId = any;
 
 export type DropdownItemText = string;
 
@@ -2401,7 +2403,7 @@ None.
 ### Types
 
 ```ts
-export type MultiSelectItemId = string;
+export type MultiSelectItemId = any;
 
 export type MultiSelectItemText = string;
 
@@ -2423,7 +2425,7 @@ export interface MultiSelectItem {
 | value             | <code>let</code> | Yes      | <code>string</code>                                                                            | <code>""</code>                                                                            | Specify the multiselect value                                                         |
 | 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) => string</code>                                                 | <code>(item) => item.text &#124;&#124; item.id</code>                                      | Override the display of a multiselect item                                            |
+| 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                                            |
 | size              | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</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                                |
@@ -2454,14 +2456,14 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail                                                                                              |
-| :--------- | :--------- | :-------------------------------------------------------------------------------------------------- |
-| select     | dispatched | <code>{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }</code> |
-| clear      | dispatched | <code>any</code>                                                                                    |
-| keydown    | forwarded  | --                                                                                                  |
-| keyup      | forwarded  | --                                                                                                  |
-| focus      | forwarded  | --                                                                                                  |
-| blur       | forwarded  | --                                                                                                  |
+| Event name | Type       | Detail                                                                                                         |
+| :--------- | :--------- | :------------------------------------------------------------------------------------------------------------- |
+| select     | dispatched | <code>{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }</code> |
+| clear      | dispatched | <code>any</code>                                                                                               |
+| keydown    | forwarded  | --                                                                                                             |
+| keyup      | forwarded  | --                                                                                                             |
+| focus      | forwarded  | --                                                                                                             |
+| blur       | forwarded  | --                                                                                                             |
 
 ## `NotificationActionButton`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index d76f65f4..bdc49565 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -1398,7 +1398,7 @@
           "name": "selectedId",
           "kind": "let",
           "description": "Set the selected item by value id",
-          "type": "string",
+          "type": "ComboBoxItemId",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -1627,7 +1627,7 @@
         {
           "type": "dispatched",
           "name": "select",
-          "detail": "{ selectedId: string; selectedItem: ComboBoxItem }"
+          "detail": "{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }"
         },
         { "type": "forwarded", "name": "keydown", "element": "input" },
         { "type": "forwarded", "name": "keyup", "element": "input" },
@@ -1638,9 +1638,14 @@
       ],
       "typedefs": [
         {
-          "type": "{ id: string; text: string; }",
+          "type": "any",
+          "name": "ComboBoxItemId",
+          "ts": "type ComboBoxItemId = any"
+        },
+        {
+          "type": "{ id: ComboBoxItemId; text: string; }",
           "name": "ComboBoxItem",
-          "ts": "interface ComboBoxItem { id: string; text: string; }"
+          "ts": "interface ComboBoxItem { id: ComboBoxItemId; text: string; }"
         }
       ],
       "rest_props": { "type": "Element", "name": "input" }
@@ -3254,9 +3259,9 @@
       ],
       "typedefs": [
         {
-          "type": "string",
+          "type": "any",
           "name": "DropdownItemId",
-          "ts": "type DropdownItemId = string"
+          "ts": "type DropdownItemId = any"
         },
         {
           "type": "string",
@@ -6404,7 +6409,7 @@
           "name": "itemToString",
           "kind": "let",
           "description": "Override the display of a multiselect item",
-          "type": "(item: MultiSelectItem) => string",
+          "type": "(item: MultiSelectItem) => any",
           "value": "(item) => item.text || item.id",
           "isFunction": true,
           "isFunctionDeclaration": false,
@@ -6744,7 +6749,7 @@
         {
           "type": "dispatched",
           "name": "select",
-          "detail": "{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }"
+          "detail": "{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }"
         },
         { "type": "dispatched", "name": "clear", "detail": "any" },
         { "type": "forwarded", "name": "keydown", "element": "input" },
@@ -6754,9 +6759,9 @@
       ],
       "typedefs": [
         {
-          "type": "string",
+          "type": "any",
           "name": "MultiSelectItemId",
-          "ts": "type MultiSelectItemId = string"
+          "ts": "type MultiSelectItemId = any"
         },
         {
           "type": "string",
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 38ff2ff5..be693f34 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -1,7 +1,8 @@
 <script>
   /**
-   * @typedef {{ id: string; text: string; }} ComboBoxItem
-   * @event {{ selectedId: string; selectedItem: ComboBoxItem }} select
+   * @typedef {any} ComboBoxItemId
+   * @typedef {{ id: ComboBoxItemId; text: string; }} ComboBoxItem
+   * @event {{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }} select
    */
 
   /**
@@ -18,7 +19,7 @@
 
   /**
    * Set the selected item by value id
-   * @type {string}
+   * @type {ComboBoxItemId}
    */
   export let selectedId = undefined;
 
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index c5d0f5f1..3d31b85d 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -1,6 +1,6 @@
 <script>
   /**
-   * @typedef {string} DropdownItemId
+   * @typedef {any} DropdownItemId
    * @typedef {string} DropdownItemText
    * @typedef {{ id: DropdownItemId; text: DropdownItemText; }} DropdownItem
    * @event {{ selectedId: DropdownItemId, selectedItem: DropdownItem }} select
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index add3a9a1..97931b97 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -1,9 +1,9 @@
 <script>
   /**
-   * @typedef {string} MultiSelectItemId
+   * @typedef {any} MultiSelectItemId
    * @typedef {string} MultiSelectItemText
    * @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; }} MultiSelectItem
-   * @event {{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }} select
+   * @event {{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }} select
    * @event {any} clear
    */
 
@@ -15,7 +15,7 @@
 
   /**
    * Override the display of a multiselect item
-   * @type {(item: MultiSelectItem) => string}
+   * @type {(item: MultiSelectItem) => any}
    */
   export let itemToString = (item) => item.text || item.id;
 
diff --git a/tests/ComboBox.test.svelte b/tests/ComboBox.test.svelte
index 44e575d0..6635317c 100644
--- a/tests/ComboBox.test.svelte
+++ b/tests/ComboBox.test.svelte
@@ -3,7 +3,7 @@
   import type { ComboBoxItem } from "../types/ComboBox/ComboBox.svelte";
 
   const items: ComboBoxItem[] = [
-    { id: "0", text: "Slack" },
+    { id: 0, text: "Slack" },
     { id: "1", text: "Email" },
     { id: "2", text: "Fax" },
   ];
@@ -20,6 +20,9 @@
   titleText="Contact"
   placeholder="Select contact method"
   items="{items}"
+  on:select="{(e) => {
+    console.log(e.detail.selectedId);
+  }}"
 />
 
 <ComboBox
diff --git a/tests/Dropdown.test.svelte b/tests/Dropdown.test.svelte
index 01fb3d63..0908838d 100644
--- a/tests/Dropdown.test.svelte
+++ b/tests/Dropdown.test.svelte
@@ -7,10 +7,13 @@
   titleText="Contact"
   selectedId="0"
   items="{[
-    { id: '0', text: 'Slack' },
+    { id: 0, text: 'Slack' },
     { id: '1', text: 'Email' },
     { id: '2', text: 'Fax' },
   ]}"
+  on:select="{(e) => {
+    console.log(e.detail.selectedId);
+  }}"
 />
 
 <Dropdown
diff --git a/tests/MultiSelect.test.svelte b/tests/MultiSelect.test.svelte
index 2d9eb314..e06961ef 100644
--- a/tests/MultiSelect.test.svelte
+++ b/tests/MultiSelect.test.svelte
@@ -8,7 +8,7 @@
   label="Select contact methods..."
   hideLabel
   items="{[
-    { id: '0', text: 'Slack' },
+    { id: 0, text: 'Slack' },
     { id: '1', text: 'Email' },
     { id: '2', text: 'Fax' },
   ]}"
diff --git a/types/ComboBox/ComboBox.svelte.d.ts b/types/ComboBox/ComboBox.svelte.d.ts
index 17bf77d1..1b2db20b 100644
--- a/types/ComboBox/ComboBox.svelte.d.ts
+++ b/types/ComboBox/ComboBox.svelte.d.ts
@@ -1,8 +1,10 @@
 /// <reference types="svelte" />
 import { SvelteComponentTyped } from "svelte";
 
+export type ComboBoxItemId = any;
+
 export interface ComboBoxItem {
-  id: string;
+  id: ComboBoxItemId;
   text: string;
 }
 
@@ -23,7 +25,7 @@ export interface ComboBoxProps
   /**
    * Set the selected item by value id
    */
-  selectedId?: string;
+  selectedId?: ComboBoxItemId;
 
   /**
    * Specify the selected combobox value
@@ -140,7 +142,10 @@ export interface ComboBoxProps
 export default class ComboBox extends SvelteComponentTyped<
   ComboBoxProps,
   {
-    select: CustomEvent<{ selectedId: string; selectedItem: ComboBoxItem }>;
+    select: CustomEvent<{
+      selectedId: ComboBoxItemId;
+      selectedItem: ComboBoxItem;
+    }>;
     keydown: WindowEventMap["keydown"];
     keyup: WindowEventMap["keyup"];
     focus: WindowEventMap["focus"];
diff --git a/types/Dropdown/Dropdown.svelte.d.ts b/types/Dropdown/Dropdown.svelte.d.ts
index bf66c6e4..1d410992 100644
--- a/types/Dropdown/Dropdown.svelte.d.ts
+++ b/types/Dropdown/Dropdown.svelte.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="svelte" />
 import { SvelteComponentTyped } from "svelte";
 
-export type DropdownItemId = string;
+export type DropdownItemId = any;
 
 export type DropdownItemText = string;
 
diff --git a/types/MultiSelect/MultiSelect.svelte.d.ts b/types/MultiSelect/MultiSelect.svelte.d.ts
index b3abbcb7..dd5ceb30 100644
--- a/types/MultiSelect/MultiSelect.svelte.d.ts
+++ b/types/MultiSelect/MultiSelect.svelte.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="svelte" />
 import { SvelteComponentTyped } from "svelte";
 
-export type MultiSelectItemId = string;
+export type MultiSelectItemId = any;
 
 export type MultiSelectItemText = string;
 
@@ -22,7 +22,7 @@ export interface MultiSelectProps
    * Override the display of a multiselect item
    * @default (item) => item.text || item.id
    */
-  itemToString?: (item: MultiSelectItem) => string;
+  itemToString?: (item: MultiSelectItem) => any;
 
   /**
    * Set the selected ids
@@ -210,7 +210,7 @@ export default class MultiSelect extends SvelteComponentTyped<
   MultiSelectProps,
   {
     select: CustomEvent<{
-      selectedIds: string[];
+      selectedIds: MultiSelectItemId[];
       selected: MultiSelectItem[];
       unselected: MultiSelectItem[];
     }>;