fix: close overlays on window click (#761)

src/ComboBox/ComboBox.svelte

@@ -152,12 +152,13 @@
   $: value = inputValue;
 </script>
 
-<svelte:body
+<svelte:window
   on:click="{({ target }) => {
     if (open && ref && !ref.contains(target)) {
       open = false;
     }
-  }}" />
+  }}"
+/>
 
 <div class:bx--list-box__wrapper="{true}">
   {#if titleText}

src/DatePicker/DatePicker.svelte

@@ -192,12 +192,13 @@
   $: if ($hasCalendar && !calendar && inputRef) initCalendar();
 </script>
 
-<svelte:body
+<svelte:window
   on:click="{({ target }) => {
     if (!calendar || !calendar.isOpen) return;
     if (datePickerRef && datePickerRef.contains(target)) return;
     if (!calendar.calendarContainer.contains(target)) calendar.close();
-  }}" />
+  }}"
+/>
 
 <div
   class:bx--form-item="{true}"

src/MultiSelect/MultiSelect.svelte

@@ -238,12 +238,13 @@
   $: value = inputValue;
 </script>
 
-<svelte:body
+<svelte:window
   on:click="{({ target }) => {
     if (open && multiSelectRef && !multiSelectRef.contains(target)) {
       open = false;
     }
-  }}" />
+  }}"
+/>
 
 <div
   bind:this="{multiSelectRef}"

src/OverflowMenu/OverflowMenu.svelte

@@ -165,13 +165,14 @@
   {@html styles}
 </svelte:head>
 
-<svelte:body
+<svelte:window
   on:click="{({ target }) => {
     if (buttonRef && buttonRef.contains(target)) return;
     if (menuRef && !menuRef.contains(target)) {
       open = false;
     }
-  }}" />
+  }}"
+/>
 
 <button
   bind:this="{buttonRef}"

src/Slider/Slider.svelte

@@ -116,12 +116,13 @@
   }
 </script>
 
-<svelte:body
+<svelte:window
   on:mousemove="{move}"
   on:touchmove="{move}"
   on:mouseup="{stopHolding}"
   on:touchend="{stopHolding}"
-  on:touchcancel="{stopHolding}" />
+  on:touchcancel="{stopHolding}"
+/>
 
 <div
   class:bx--form-item="{true}"

src/Tooltip/Tooltip.svelte

@@ -163,7 +163,7 @@
   };
 </script>
 
-<svelte:body
+<svelte:window
   on:mousedown="{({ target }) => {
     if (open && target.contains(refTooltip)) {
       if (refIcon) {
@@ -174,7 +174,8 @@
 
       open = false;
     }
-  }}" />
+  }}"
+/>
 
 <div
   {...$$restProps}

src/TooltipDefinition/TooltipDefinition.svelte

@@ -31,10 +31,11 @@
   }
 </script>
 
-<svelte:body
+<svelte:window
   on:keydown="{({ key }) => {
     if (key === 'Escape') hide();
-  }}" />
+  }}"
+/>
 
 <span
   class:bx--tooltip--definition="{true}"

src/TooltipIcon/TooltipIcon.svelte

@@ -35,12 +35,13 @@
   let hidden = false;
 </script>
 
-<svelte:body
+<svelte:window
   on:keydown="{({ key }) => {
     if (key === 'Escape') {
       hidden = true;
     }
-  }}" />
+  }}"
+/>
 
 <button
   bind:this="{ref}"