Align v10.38 (#698)

* chore(deps-dev): upgrade carbon-components to v10.38.0

* feat(text-input): support read-only variant

* docs: use consistent lingo for inline variant examples

* docs(popover): add Popover alignment example

* fix(file-uploader): adjust markup to avoid accessibility errors

Ref: 0dfde60e3

* fix(inline-loading): use error filled icon

* fix(inline-loading): render iconDescription as title in error/warning icons

Ref: 51c53c923

* fix(structured-list): update accessibility attributes

* fix(tooltip-definition): use span instead of div

Ref: cb6de3025

* fix(multi-select): close menu when blurring the last filterable option

* fix(multi-select): open/focus field for filterable multiselect #635

* fix(multi-select): unblock focus when blurring input #635

* fix(combo-box): select correct item with keys, allow input after clearing #195

* fix(combo-box): update input text if item is selected

* feat(combo-box): render checkmark icon for selected item

* fix(ui-shell): toggle SideNav rail when clicking the hamburger menu #699

* fix(context-menu): update context menu classes #684

* docs(context-menu): improve demo instructions #684

* fix(context-menu): close menu when clicking anywhere

src/ComboBox/ComboBox.svelte

@@ -95,6 +95,7 @@
   export let listRef = null;
 
   import { createEventDispatcher, afterUpdate, tick } from "svelte";
+  import Checkmark16 from "carbon-icons-svelte/lib/Checkmark16/Checkmark16.svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
   import ListBox from "../ListBox/ListBox.svelte";
@@ -128,7 +129,6 @@
       filteredItems = items.filter((item) => shouldFilterItem(item, value));
     } else {
       highlightedIndex = -1;
-      inputValue = selectedItem ? selectedItem.text : "";
 
       if (!selectedItem) {
         selectedId = undefined;
@@ -149,7 +149,6 @@
     : undefined;
   $: filteredItems = items.filter((item) => shouldFilterItem(item, value));
   $: selectedItem = items[selectedIndex];
-  $: inputValue = selectedItem ? selectedItem.text : undefined;
   $: value = inputValue;
 </script>
 
@@ -217,16 +216,31 @@
         class:bx--text-input="{true}"
         class:bx--text-input--light="{light}"
         class:bx--text-input--empty="{inputValue === ''}"
-        on:input="{({ target }) => {
+        on:input="{async ({ target }) => {
+          if (!open && target.value.length > 0) {
+            open = true;
+          }
+
           inputValue = target.value;
         }}"
         on:keydown
         on:keydown|stopPropagation="{({ key }) => {
           if (key === 'Enter') {
             open = !open;
+
             if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
               selectedIndex = highlightedIndex;
               open = false;
+
+              if (filteredItems[selectedIndex]) {
+                inputValue = filteredItems[selectedIndex].text;
+              }
+            }
+
+            if (highlightedIndex < 0 && selectedIndex > -1) {
+              if (filteredItems[selectedIndex]) {
+                inputValue = filteredItems[selectedIndex].text;
+              }
             }
           } else if (key === 'Tab') {
             open = false;
@@ -242,6 +256,12 @@
         on:focus
         on:blur
         on:blur="{({ relatedTarget }) => {
+          if (inputValue.length === 0 && selectedIndex > -1) {
+            if (filteredItems[selectedIndex]) {
+              inputValue = filteredItems[selectedIndex].text;
+            }
+          }
+
           if (!open || !relatedTarget) return;
           if (
             relatedTarget &&
@@ -266,7 +286,9 @@
           on:clear
           on:clear="{() => {
             selectedIndex = -1;
+            highlightedIndex = -1;
             open = false;
+            inputValue = '';
             ref.focus();
           }}"
           translateWithId="{translateWithId}"
@@ -300,12 +322,19 @@
                 .map(({ id }) => id)
                 .indexOf(filteredItems[i].id);
               open = false;
+
+              if (filteredItems[i]) {
+                inputValue = filteredItems[i].text;
+              }
             }}"
             on:mouseenter="{() => {
               highlightedIndex = i;
             }}"
           >
             {itemToString(item)}
+            {#if selectedItem && selectedItem.id === item.id}
+              <Checkmark16 class="bx--list-box__menu-item__selected-icon" />
+            {/if}
           </ListBoxMenuItem>
         {/each}
       </ListBoxMenu>