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

COMPONENT_INDEX.md

@@ -5372,7 +5372,8 @@ No exported props.
 
 ### Forwarded events
 
-No forwarded events.
+- `on:click`
+- `on:keydown`
 
 ### Dispatched events
 

docs/src/PUBLIC_API.json

@@ -1966,8 +1966,8 @@
         [
           "keydown",
           {
-            "start": 5616,
+            "start": 5618,
-            "end": 5626,
+            "end": 5628,
             "type": "EventHandler",
             "name": "keydown",
             "modifiers": [],
@@ -1977,8 +1977,8 @@
         [
           "focus",
           {
-            "start": 6203,
+            "start": 6205,
-            "end": 6211,
+            "end": 6213,
             "type": "EventHandler",
             "name": "focus",
             "modifiers": [],
@@ -1988,8 +1988,8 @@
         [
           "blur",
           {
-            "start": 6220,
+            "start": 6222,
-            "end": 6227,
+            "end": 6229,
             "type": "EventHandler",
             "name": "blur",
             "modifiers": [],
@@ -1999,8 +1999,8 @@
         [
           "clear",
           {
-            "start": 6678,
+            "start": 6680,
-            "end": 6686,
+            "end": 6688,
             "type": "EventHandler",
             "name": "clear",
             "modifiers": [],
@@ -2010,8 +2010,8 @@
         [
           "scroll",
           {
-            "start": 7220,
+            "start": 7246,
-            "end": 7229,
+            "end": 7255,
             "type": "EventHandler",
             "name": "scroll",
             "modifiers": [],
@@ -15644,7 +15644,30 @@
           }
         ]
       ],
-      "forwarded_events": [],
+      "forwarded_events": [
+        [
+          "click",
+          {
+            "start": 109,
+            "end": 117,
+            "type": "EventHandler",
+            "name": "click",
+            "modifiers": [],
+            "expression": null
+          }
+        ],
+        [
+          "keydown",
+          {
+            "start": 118,
+            "end": 128,
+            "type": "EventHandler",
+            "name": "keydown",
+            "modifiers": [],
+            "expression": null
+          }
+        ]
+      ],
       "dispatched_events": []
     },
     "ToolbarSearch": {

docs/src/pages/components/DataTable.svx

@@ -1,9 +1,9 @@
 ---
-components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarBatchActions"]
+components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarMenu", "ToolbarMenuItem", "ToolbarBatchActions"]
 ---
 
 <script>
-  import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, Button, Link } from "carbon-components-svelte";
+  import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
   import Launch16 from "carbon-icons-svelte/lib/Launch16";
   import Preview from "../../components/Preview.svelte";
 </script>
@@ -316,7 +316,12 @@ The slot name for the table header cells is `"cell-header"`.
   <Toolbar>
     <ToolbarContent>
       <ToolbarSearch />
-      <Button>Create</Button>
+      <ToolbarMenu>
+        <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
+        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">API Documentation</ToolbarMenuItem>
+        <ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
+      </ToolbarMenu>
+      <Button>Create balancer</Button>
     </ToolbarContent>
   </Toolbar>
 </DataTable>
@@ -378,7 +383,12 @@ The slot name for the table header cells is `"cell-header"`.
   <Toolbar size="sm">
     <ToolbarContent>
       <ToolbarSearch />
-      <Button>Create</Button>
+      <ToolbarMenu>
+        <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
+        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">API Documentation</ToolbarMenuItem>
+        <ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
+      </ToolbarMenu>
+      <Button>Create balancer</Button>
     </ToolbarContent>
   </Toolbar>
 </DataTable>

docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte

@@ -4,6 +4,8 @@
     Toolbar,
     ToolbarContent,
     ToolbarSearch,
+    ToolbarMenu,
+    ToolbarMenuItem,
     ToolbarBatchActions,
     Button,
   } from "carbon-components-svelte";
@@ -36,7 +38,14 @@
     </ToolbarBatchActions>
     <ToolbarContent>
       <ToolbarSearch />
-      <Button>Create</Button>
+      <ToolbarMenu>
+        <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
+        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
+          API Documentation
+        </ToolbarMenuItem>
+        <ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
+      </ToolbarMenu>
+      <Button>Create balancer</Button>
     </ToolbarContent>
   </Toolbar>
 </DataTable>

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) => {
+    overflowVisible,
-      if (ref) {
+    setOverflowVisible: (visible) => {
-        if (toggled) {
+      overflowVisible.set(visible);
-          ref.style.overflow = "visible";
+      if (ref) ref.style.overflow = visible ? "visible" : "inherit";
-        } else {
-          ref.removeAttribute("style");
-        }
-      }
     },
   });
 </script>

src/DataTable/ToolbarBatchActions.svelte

@@ -18,9 +18,22 @@
     batchSelectedIds = value;
   });
 
-  onMount(() => unsubscribe);
+  let overflowVisible = false;
+
+  const ctxToolbar = getContext("Toolbar");
+  const unsubscribeOverflow = ctxToolbar.overflowVisible.subscribe((value) => {
+    overflowVisible = value;
+  });
+
+  onMount(() => {
+    return () => {
+      unsubscribe();
+      unsubscribeOverflow();
+    };
+  });
 </script>
 
+{#if !overflowVisible}
   <div
     class:bx--batch-actions="{true}"
     class:bx--batch-actions--active="{showActions}"
@@ -42,3 +55,4 @@
       </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>