From 9c761137e871f1608d47d662927995e77fbe355f Mon Sep 17 00:00:00 2001
From: Bilux <i.bilux@gmail.com>
Date: Thu, 20 Oct 2022 18:40:46 +0100
Subject: [PATCH 1/2] add an overflow menu selection variant for DataTable

---
 src/DataTable/DataTable.svelte        | 17 ++++++++++++++---
 types/DataTable/DataTable.svelte.d.ts | 12 ++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index e59b3f00..c5cfe279 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -93,6 +93,9 @@
   /** Set to `true` for the radio selection variant */
   export let radio = false;
 
+  /** Set to `true` for the overflow menu selection variant */
+  export let overflowMenu = false;
+
   /**
    * Set to `true` for the selectable variant
    * Automatically set to `true` if `radio` or `batchSelection` are `true`
@@ -126,11 +129,15 @@
   /** Set to `number` to set current page */
   export let page = 0;
 
+  /** Obtain a reference to the trigger body element */
+  export let tRef = null;
+
   import { createEventDispatcher, setContext } from "svelte";
   import { writable } from "svelte/store";
   import ChevronRight from "../icons/ChevronRight.svelte";
   import InlineCheckbox from "../Checkbox/InlineCheckbox.svelte";
   import RadioButton from "../RadioButton/RadioButton.svelte";
+  import OverflowMenu from "../OverflowMenu/OverflowMenu.svelte";
   import Table from "./Table.svelte";
   import TableBody from "./TableBody.svelte";
   import TableCell from "./TableCell.svelte";
@@ -194,7 +201,7 @@
     expandable = true;
     expanded = expandedRowIds.length === expandableRowIds.length;
   }
-  $: if (radio || batchSelection) selectable = true;
+  $: if (radio || batchSelection || OverflowMenu) selectable = true;
   $: headerKeys = headers.map(({ key }) => key);
   $: tableCellsByRowId = rows.reduce((rows, row) => {
     rows[row.id] = headerKeys.map((key, index) => ({
@@ -258,7 +265,7 @@
   };
 </script>
 
-<TableContainer useStaticWidth="{useStaticWidth}" {...$$restProps}>
+<TableContainer bind:ref={tRef} useStaticWidth="{useStaticWidth}" {...$$restProps}>
   {#if title || $$slots.title || description || $$slots.description}
     <div class:bx--data-table-header="{true}">
       {#if title || $$slots.title}
@@ -309,7 +316,7 @@
         {#if selectable && !batchSelection}
           <th scope="col"></th>
         {/if}
-        {#if batchSelection && !radio}
+        {#if batchSelection && !radio && !overflowMenu}
           <th scope="col" class:bx--table-column-checkbox="{true}">
             <InlineCheckbox
               bind:ref="{refSelectAll}"
@@ -450,6 +457,10 @@
                       dispatch('click:row--select', { row, selected: true });
                     }}"
                   />
+                {:else if overflowMenu}
+                  <svelte:component this={OverflowMenu} bind:parentRef={tRef}>
+                    <slot name="overflowMenu" row="{row}" />
+                  </svelte:component>
                 {:else}
                   <InlineCheckbox
                     name="select-row-{row.id}"
diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts
index 80747eea..a5761df3 100644
--- a/types/DataTable/DataTable.svelte.d.ts
+++ b/types/DataTable/DataTable.svelte.d.ts
@@ -128,6 +128,12 @@ export interface DataTableProps
    */
   radio?: boolean;
 
+  /**
+   * Set to `true` for the overflow menu selection variant
+   * @default false
+   */
+   overflowMenu?: boolean;
+
   /**
    * Set to `true` for the selectable variant
    * Automatically set to `true` if `radio` or `batchSelection` are `true`
@@ -176,6 +182,12 @@ export interface DataTableProps
    * @default 0
    */
   page?: number;
+
+  /**
+   * Obtain a reference to the TableContainer Div HTML element
+   * @type {null | HTMLDivElement}
+   */
+  tref?: null | HTMLDivElement;
 }
 
 export default class DataTable extends SvelteComponentTyped<

From c6bbc85716f02f394d5b72311d8c64007b47817e Mon Sep 17 00:00:00 2001
From: Bilux <i.bilux@gmail.com>
Date: Thu, 20 Oct 2022 23:48:39 +0100
Subject: [PATCH 2/2] fix a typo and spacing

---
 src/DataTable/DataTable.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index c5cfe279..79ed16f3 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -201,7 +201,7 @@
     expandable = true;
     expanded = expandedRowIds.length === expandableRowIds.length;
   }
-  $: if (radio || batchSelection || OverflowMenu) selectable = true;
+  $: if (radio || batchSelection || overflowMenu) selectable = true;
   $: headerKeys = headers.map(({ key }) => key);
   $: tableCellsByRowId = rows.reduce((rows, row) => {
     rows[row.id] = headerKeys.map((key, index) => ({
@@ -314,7 +314,7 @@
           </th>
         {/if}
         {#if selectable && !batchSelection}
-          <th scope="col"></th>
+          <th scope="col" style="width: var(--cds-spacing-08);"></th>
         {/if}
         {#if batchSelection && !radio && !overflowMenu}
           <th scope="col" class:bx--table-column-checkbox="{true}">
@@ -458,7 +458,7 @@
                     }}"
                   />
                 {:else if overflowMenu}
-                  <svelte:component this={OverflowMenu} bind:parentRef={tRef}>
+                  <svelte:component size="sm" this={OverflowMenu} bind:parentRef={tRef}>
                     <slot name="overflowMenu" row="{row}" />
                   </svelte:component>
                 {:else}