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/ContextMenu/ContextMenu.svelte

@@ -79,6 +79,7 @@
 <svelte:window
   on:contextmenu|preventDefault="{(e) => {
     if (level > 1) return;
+    if (!ref) return;
 
     const { height, width } = ref.getBoundingClientRect();
 
@@ -104,7 +105,7 @@
   }}"
   on:click="{(e) => {
     if (!open) return;
-    if (e.target.contains(ref)) close();
+    close();
   }}"
   on:keydown="{(e) => {
     if (open && e.key === 'Escape') close();
@@ -117,10 +118,10 @@
   tabindex="-1"
   data-direction="{direction}"
   data-level="{level}"
-  class:bx--context-menu="{true}"
-  class:bx--context-menu--open="{open}"
-  class:bx--context-menu--invisible="{open && x === 0 && y === 0}"
-  class:bx--context-menu--root="{level === 1}"
+  class:bx--menu="{true}"
+  class:bx--menu--open="{open}"
+  class:bx--menu--invisible="{open && x === 0 && y === 0}"
+  class:bx--menu--root="{level === 1}"
   {...$$restProps}
   style="left: {x}px; top: {y}px; {$$restProps.style}"
   on:click

src/ContextMenu/ContextMenuDivider.svelte

@@ -1 +1 @@
-<li role="separator" class:bx--context-menu-divider="{true}"></li>
+<li role="separator" class:bx--menu-divider="{true}"></li>

src/ContextMenu/ContextMenuOption.svelte

@@ -173,14 +173,14 @@
   aria-disabled="{!subOptions && disabled}"
   aria-haspopup="{subOptions ? true : undefined}"
   aria-expanded="{subOptions ? submenuOpen : undefined}"
-  class:bx--context-menu-option="{true}"
-  class:bx--context-menu-option--disabled="{true}"
-  class:bx--context-menu-option--active="{subOptions && submenuOpen}"
-  class:bx--context-menu-option--danger="{!subOptions && kind === 'danger'}"
+  class:bx--menu-option="{true}"
+  class:bx--menu-option--disabled="{true}"
+  class:bx--menu-option--active="{subOptions && submenuOpen}"
+  class:bx--menu-option--danger="{!subOptions && kind === 'danger'}"
   indented="{indented}"
   aria-checked="{isSelectable || isRadio ? selected : undefined}"
   data-nested="{ref &&
-    ref.closest('.bx--context-menu').getAttribute('data-level') === '2'}"
+    ref.closest('.bx--menu').getAttribute('data-level') === '2'}"
   data-sub="{subOptions}"
   data-id="{id}"
   {...$$restProps}
@@ -240,18 +240,18 @@
 >
   {#if subOptions}
     <div
-      class:bx--context-menu-option__content="{true}"
-      class:bx--context-menu-option__content--disabled="{disabled}"
+      class:bx--menu-option__content="{true}"
+      class:bx--menu-option__content--disabled="{disabled}"
     >
       {#if indented}
-        <div class:bx--context-menu-option__icon="{true}">
+        <div class:bx--menu-option__icon="{true}">
           <svelte:component this="{icon}" />
         </div>
       {/if}
-      <span class:bx--context-menu-option__label="{true}" title="{labelText}">
+      <span class:bx--menu-option__label="{true}" title="{labelText}">
         <slot name="labelText">{labelText}</slot>
       </span>
-      <div class:bx--context-menu-option__info="{true}"><CaretRight16 /></div>
+      <div class:bx--menu-option__info="{true}"><CaretRight16 /></div>
     </div>
 
     <ContextMenu
@@ -263,18 +263,18 @@
     </ContextMenu>
   {:else}
     <div
-      class:bx--context-menu-option__content="{true}"
-      class:bx--context-menu-option__content--disabled="{disabled}"
+      class:bx--menu-option__content="{true}"
+      class:bx--menu-option__content--disabled="{disabled}"
     >
       {#if indented}
-        <div class:bx--context-menu-option__icon="{true}">
+        <div class:bx--menu-option__icon="{true}">
           <svelte:component this="{icon}" />
         </div>
       {/if}
-      <span class:bx--context-menu-option__label="{true}" title="{labelText}">
+      <span class:bx--menu-option__label="{true}" title="{labelText}">
         <slot name="labelText">{labelText}</slot>
       </span>
-      <div class:bx--context-menu-option__info="{true}">
+      <div class:bx--menu-option__info="{true}">
         <slot name="shortcutText">{shortcutText}</slot>
       </div>
     </div>