Fix issue with click_outside and drawers

packages/bbui/src/Actions/click_outside.js

@@ -33,8 +33,8 @@ const handleClick = event => {
     }
 
     // Ignore clicks for drawers, unless the handler is registered from a drawer
-    const sourceInDrawer = handler.anchor.closest(".drawer-container") != null
-    const clickInDrawer = event.target.closest(".drawer-container") != null
+    const sourceInDrawer = handler.anchor.closest(".drawer-wrapper") != null
+    const clickInDrawer = event.target.closest(".drawer-wrapper") != null
     if (clickInDrawer && !sourceInDrawer) {
       return
     }

packages/bbui/src/Drawer/Drawer.svelte

@@ -172,37 +172,44 @@
 
 {#if visible}
   <Portal target=".modal-container">
-    <div class="underlay" class:hidden={!$modal} transition:drawerFade|local />
-    <div
-      class="drawer"
-      class:stacked={depth > 0}
-      class:modal={$modal}
-      transition:drawerSlide|local
-      {style}
-    >
-      <header>
-        {#if $$slots.title}
-          <slot name="title" />
-        {:else}
-          <div class="text">{title || "Bindings"}</div>
-        {/if}
-        <div class="buttons">
-          <Button secondary quiet on:click={hide}>Cancel</Button>
-          <slot name="buttons" />
-          {#if $resizable}
-            <ActionButton
-              size="M"
-              quiet
-              selected={$modal}
-              on:click={() => modal.set(!$modal)}
-            >
-              <Icon name={$modal ? "Minimize" : "Maximize"} size="S" />
-            </ActionButton>
+    <!-- This class is unstyled, but needed by click_outside -->
+    <div class="drawer-wrapper">
+      <div
+        class="underlay"
+        class:hidden={!$modal}
+        transition:drawerFade|local
+      />
+      <div
+        class="drawer"
+        class:stacked={depth > 0}
+        class:modal={$modal}
+        transition:drawerSlide|local
+        {style}
+      >
+        <header>
+          {#if $$slots.title}
+            <slot name="title" />
+          {:else}
+            <div class="text">{title || "Bindings"}</div>
           {/if}
-        </div>
-      </header>
-      <slot name="body" />
-      <div class="overlay" class:hidden={$modal || depth === 0} />
+          <div class="buttons">
+            <Button secondary quiet on:click={hide}>Cancel</Button>
+            <slot name="buttons" />
+            {#if $resizable}
+              <ActionButton
+                size="M"
+                quiet
+                selected={$modal}
+                on:click={() => modal.set(!$modal)}
+              >
+                <Icon name={$modal ? "Minimize" : "Maximize"} size="S" />
+              </ActionButton>
+            {/if}
+          </div>
+        </header>
+        <slot name="body" />
+        <div class="overlay" class:hidden={$modal || depth === 0} />
+      </div>
     </div>
   </Portal>
 {/if}