feat(data-table): hide batch actions if overflow visible

src/DataTable/Toolbar.svelte

@@ -6,18 +6,17 @@
   export let size = "default";
 
   import { setContext } from "svelte";
+  import { writable } from "svelte/store";
 
   let ref = null;
 
+  const overflowVisible = writable(false);
+
   setContext("Toolbar", {
-    setOverflow: (toggled) => {
-      if (ref) {
-        if (toggled) {
-          ref.style.overflow = "visible";
-        } else {
-          ref.removeAttribute("style");
-        }
-      }
+    overflowVisible,
+    setOverflowVisible: (visible) => {
+      overflowVisible.set(visible);
+      if (ref) ref.style.overflow = visible ? "visible" : "inherit";
     },
   });
 </script>

src/DataTable/ToolbarBatchActions.svelte

@@ -18,27 +18,41 @@
     batchSelectedIds = value;
   });
 
-  onMount(() => unsubscribe);
+  let overflowVisible = false;
+
+  const ctxToolbar = getContext("Toolbar");
+  const unsubscribeOverflow = ctxToolbar.overflowVisible.subscribe((value) => {
+    overflowVisible = value;
+  });
+
+  onMount(() => {
+    return () => {
+      unsubscribe();
+      unsubscribeOverflow();
+    };
+  });
 </script>
 
-<div
-  class:bx--batch-actions="{true}"
-  class:bx--batch-actions--active="{showActions}"
-  {...$$restProps}
->
-  <div class:bx--batch-summary="{true}">
-    <p class:bx--batch-summary__para="{true}">
-      <span> {formatTotalSelected(batchSelectedIds.length)} </span>
-    </p>
+{#if !overflowVisible}
+  <div
+    class:bx--batch-actions="{true}"
+    class:bx--batch-actions--active="{showActions}"
+    {...$$restProps}
+  >
+    <div class:bx--batch-summary="{true}">
+      <p class:bx--batch-summary__para="{true}">
+        <span> {formatTotalSelected(batchSelectedIds.length)} </span>
+      </p>
+    </div>
+    <div class:bx--action-list="{true}">
+      <slot />
+      <Button
+        class="bx--batch-summary__cancel"
+        tabindex="{showActions ? '0' : '-1'}"
+        on:click="{ctx.resetSelectedRowIds}"
+      >
+        Cancel
+      </Button>
+    </div>
   </div>
-  <div class:bx--action-list="{true}">
-    <slot />
-    <Button
-      class="bx--batch-summary__cancel"
-      tabindex="{showActions ? '0' : '-1'}"
-      on:click="{ctx.resetSelectedRowIds}"
-    >
-      Cancel
-    </Button>
-  </div>
-</div>
+{/if}

src/DataTable/ToolbarMenu.svelte

@@ -7,7 +7,7 @@
 
   let menuRef = null;
 
-  $: ctx.setOverflow(menuRef != null);
+  $: ctx.setOverflowVisible(menuRef != null);
   $: if (menuRef) menuRef.style.top = "100%";
 </script>
 

src/DataTable/ToolbarMenuItem.svelte

@@ -2,6 +2,6 @@
   import { OverflowMenuItem } from "../OverflowMenu";
 </script>
 
-<OverflowMenuItem {...$$restProps}>
+<OverflowMenuItem {...$$restProps} on:click on:keydown>
   <slot />
 </OverflowMenuItem>