Merge c6bbc85716 into edcb14b3c9

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}
@@ -307,9 +314,9 @@
           </th>
         {/if}
         {#if selectable && !batchSelection}
-          <th scope="col"></th>
+          <th scope="col" style="width: var(--cds-spacing-08);"></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 size="sm" this={OverflowMenu} bind:parentRef={tRef}>
+                    <slot name="overflowMenu" row="{row}" />
+                  </svelte:component>
                 {:else}
                   <InlineCheckbox
                     name="select-row-{row.id}"

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<