Merge remote-tracking branch 'upstream/master' into fix-ComboBox-filterable

src/Checkbox/Checkbox.svelte

@@ -3,12 +3,21 @@
    * @event {boolean} check
    */
 
-  /** Specify the value of the checkbox */
+  /**
+   * Specify the value of the checkbox
+   * @type {any}
+   */
   export let value = "";
 
   /** Specify whether the checkbox is checked */
   export let checked = false;
 
+  /**
+   * Specify the bound group
+   * @type {any[]}
+   */
+  export let group = [];
+
   /** Specify whether the checkbox is indeterminate */
   export let indeterminate = false;
 
@@ -73,7 +82,7 @@
       bind:this="{ref}"
       type="checkbox"
       value="{value}"
-      checked="{checked}"
+      checked="{checked || group.includes(value)}"
       disabled="{disabled}"
       id="{id}"
       indeterminate="{indeterminate}"
@@ -83,6 +92,9 @@
       on:change
       on:change="{() => {
         checked = !checked;
+        group = group.includes(value)
+          ? group.filter((_value) => _value !== value)
+          : [...group, value];
       }}"
       on:blur
     />

src/DataTable/DataTable.svelte

@@ -337,10 +337,11 @@
             ? 'bx--expandable-row--hover'
             : ''}"
           on:click="{({ target }) => {
-            // forgo "click", "click:row" events if target resembles an overflow menu
+            // forgo "click", "click:row" events if target
+            // resembles an overflow menu, a checkbox, or radio button
             if (
               [...target.classList].some((name) =>
-                /^bx--overflow-menu/.test(name)
+                /^bx--(overflow-menu|checkbox|radio-button)/.test(name)
               )
             ) {
               return;

src/DataTable/ToolbarSearch.svelte

@@ -35,6 +35,7 @@
     ref.focus();
   }
 
+  $: expanded = !!value.length;
   $: classes = [
     expanded && "bx--toolbar-search-container-active",
     persistent

src/DatePicker/DatePicker.svelte

@@ -234,6 +234,20 @@
       {datePickerType === 'range' &&
       $labelTextEmpty &&
       'bx--date-picker--nolabel'}"
+    on:keydown="{(e) => {
+      if (calendar?.isOpen && e.key === 'Escape') {
+        e.stopPropagation();
+        calendar.close();
+      }
+
+      if (
+        $hasCalendar &&
+        /INPUT/.test(document.activeElement?.tagName) &&
+        e.key === 'Enter'
+      ) {
+        e.stopPropagation();
+      }
+    }}"
   >
     <slot />
   </div>

src/DatePicker/DatePickerInput.svelte

@@ -82,7 +82,7 @@
   class:bx--date-picker-container="{true}"
   class:bx--date-picker--nolabel="{!labelText}"
 >
-  {#if labelText}
+  {#if labelText || $$slots.labelText}
     <label
       for="{id}"
       class:bx--label="{true}"

src/MultiSelect/MultiSelect.svelte

@@ -64,7 +64,7 @@
    * @type {(item: MultiSelectItem, value: string) => string}
    */
   export let filterItem = (item, value) =>
-    item.text.toLowerCase().includes(value.toLowerCase());
+    item.text.toLowerCase().includes(value.trim().toLowerCase());
 
   /** Set to `true` to open the dropdown */
   export let open = false;
@@ -412,10 +412,15 @@
               }
             } else if (key === 'Tab') {
               open = false;
+              inputRef.blur();
             } else if (key === 'ArrowDown') {
               change(1);
             } else if (key === 'ArrowUp') {
               change(-1);
+            } else if (key === 'Escape') {
+              open = false;
+            } else if (key === ' ') {
+              if (!open) open = true;
             }
           }}"
           on:keyup
@@ -454,6 +459,7 @@
           />
         {/if}
         <ListBoxMenuIcon
+          style="pointer-events: {open ? 'auto' : 'none'}"
           on:click="{(e) => {
             e.stopPropagation();
             open = !open;

src/Tabs/Tabs.svelte

@@ -130,8 +130,8 @@
       tabindex="-1"
       class:bx--tabs-trigger-text="{true}"
       href="{triggerHref}"
-      on:click
-      on:click="{() => {
+      on:click|preventDefault
+      on:click|preventDefault|stopPropagation="{() => {
         dropdownHidden = !dropdownHidden;
       }}"
     >

src/TextArea/TextArea.svelte

@@ -57,7 +57,7 @@
   on:mouseleave
   class:bx--form-item="{true}"
 >
-  {#if labelText && !hideLabel}
+  {#if (labelText || $$slots.labelText) && !hideLabel}
     <label
       for="{id}"
       class:bx--label="{true}"
@@ -85,7 +85,7 @@
       name="{name}"
       cols="{cols}"
       rows="{rows}"
-      value="{value}"
+      value="{value ?? ''}"
       placeholder="{placeholder}"
       class:bx--text-area="{true}"
       class:bx--text-area--light="{light}"

src/TextInput/PasswordInput.svelte

@@ -170,7 +170,7 @@
         name="{name}"
         placeholder="{placeholder}"
         type="{type}"
-        value="{value}"
+        value="{value ?? ''}"
         disabled="{disabled}"
         class:bx--text-input="{true}"
         class:bx--password-input="{true}"

src/TextInput/TextInput.svelte

@@ -163,7 +163,7 @@
         name="{name}"
         placeholder="{placeholder}"
         type="{type}"
-        value="{value}"
+        value="{value ?? ''}"
         required="{required}"
         readonly="{readonly}"
         class:bx--text-input="{true}"

src/TimePicker/TimePicker.svelte

@@ -74,7 +74,7 @@
     class:bx--select--light="{light}"
   >
     <div class:bx--time-picker__input="{true}">
-      {#if labelText}
+      {#if labelText || $$slots.labelText}
         <label
           for="{id}"
           class:bx--label="{true}"

src/TimePicker/TimePickerSelect.svelte

@@ -54,7 +54,7 @@
   on:mouseenter
   on:mouseleave
 >
-  {#if labelText}
+  {#if labelText || $$slots.labelText}
     <label
       for="{id}"
       class:bx--label="{true}"

src/Toggle/ToggleSkeleton.svelte

@@ -36,7 +36,7 @@
     class:bx--toggle__label="{true}"
     class:bx--skeleton="{true}"
   >
-    {#if labelText}
+    {#if labelText || $$slots.labelText}
       <span class:bx--toggle__label-text="{true}">
         <slot name="labelText">
           {labelText}