feat(ComboBox): selectedIndex -> selectedId (#1016)

* feat(breaking): selectedIndex -> selectedId in ComboBox

* docs: update ComboBox

docs/src/COMPONENT_API.json

@@ -1395,11 +1395,10 @@
           "reactive": false
         },
         {
-          "name": "selectedIndex",
+          "name": "selectedId",
           "kind": "let",
-          "description": "Set the selected item by value index",
-          "type": "number",
-          "value": "-1",
+          "description": "Set the selected item by value id",
+          "type": "string",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -1616,7 +1615,7 @@
           "kind": "function",
           "description": "Clear the combo box programmatically",
           "type": "(options?: { focus?: boolean; }) => void",
-          "value": "() => {     prevSelectedIndex = undefined;     selectedIndex = -1;     highlightedIndex = -1;     highlightedId = undefined;     selectedId = undefined;     selectedItem = undefined;     open = false;     inputValue = \"\";     if (options?.focus !== false) ref?.focus();   }",
+          "value": "() => {     prevSelectedId = null;     highlightedIndex = -1;     highlightedId = undefined;     selectedId = undefined;     selectedItem = undefined;     open = false;     inputValue = \"\";     if (options?.focus !== false) ref?.focus();   }",
           "isFunction": true,
           "isFunctionDeclaration": true,
           "constant": false,
@@ -1628,7 +1627,7 @@
         {
           "type": "dispatched",
           "name": "select",
-          "detail": "{ selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem }"
+          "detail": "{ selectedId: string; selectedItem: ComboBoxItem }"
         },
         { "type": "forwarded", "name": "keydown", "element": "input" },
         { "type": "forwarded", "name": "keyup", "element": "input" },

docs/src/pages/components/ComboBox.svx

@@ -12,10 +12,10 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
-### Selected index
+### Selected id
 
 <ComboBox titleText="Contact" placeholder="Select contact method"
-selectedIndex={1}
+selectedId="1"
 items={[
   {id: "0", text: "Slack"},
   {id: "1", text: "Email"},

docs/src/pages/framed/ComboBox/ComboBoxClear.svelte

@@ -7,7 +7,7 @@
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
-  selectedIndex="{1}"
+  selectedId="1"
   bind:this="{ref}"
   items="{[
     { id: '0', text: 'Slack' },

docs/src/pages/framed/ComboBox/MultipleComboBox.svelte

@@ -7,17 +7,18 @@
     { id: "2", text: "Fax" },
   ];
 
-  let comboBox1_selectedIndex = -1;
-  let comboBox2_selectedIndex = -1;
+  let comboBox1_selectedId = undefined;
+  let comboBox2_selectedId = undefined;
 
-  const formatSelected = (i) => (items[i] ? items[i].text : "N/A");
+  const formatSelected = (id) =>
+    items.find((item) => item.id === id)?.text ?? "N/A";
 
-  $: primary = formatSelected(comboBox1_selectedIndex);
-  $: secondary = formatSelected(comboBox2_selectedIndex);
+  $: primary = formatSelected(comboBox1_selectedId);
+  $: secondary = formatSelected(comboBox2_selectedId);
 </script>
 
 <ComboBox
-  bind:selectedIndex="{comboBox1_selectedIndex}"
+  bind:selectedId="{comboBox1_selectedId}"
   titleText="Primary contact"
   placeholder="Select primary contact method"
   items="{items}"
@@ -26,7 +27,7 @@
 <div>Primary: {primary}</div>
 
 <ComboBox
-  bind:selectedIndex="{comboBox2_selectedIndex}"
+  bind:selectedId="{comboBox2_selectedId}"
   titleText="Secondary contact"
   placeholder="Select secondary contact method"
   items="{items}"

docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte

@@ -1,12 +1,12 @@
 <script>
   import { ComboBox, Button } from "carbon-components-svelte";
-  let selectedIndex = 1;
+  let selectedId = "1";
 </script>
 
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
-  bind:selectedIndex
+  bind:selectedId
   items="{[
     { id: '0', text: 'Slack' },
     { id: '1', text: 'Email' },
@@ -14,5 +14,7 @@
   ]}"
 />
 <br />
-<Button on:click="{() => (selectedIndex = -1)}">Set to -1 (unselected)</Button>
-<Button on:click="{() => (selectedIndex = 2)}">Set to 2 (Fax)</Button>
+<Button on:click="{() => (selectedId = undefined)}"
+  >Set to undefined (unselected)</Button
+>
+<Button on:click="{() => (selectedId = '2')}">Set to 2 (Fax)</Button>