Merge f12dc707a6 into edcb14b3c9

src/DataTable/DataTable.svelte

@@ -126,6 +126,9 @@
   /** 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";
@@ -258,7 +261,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}

src/DataTable/TableContainer.svelte

@@ -10,9 +10,13 @@
 
   /** Set to `true` to use static width */
   export let useStaticWidth = false;
+
+  /** Obtain a reference to the Div HTML element */
+  export let ref = null;
 </script>
 
 <div
+  bind:this={ref}
   class:bx--data-table-container="{true}"
   class:bx--data-table-container--static="{useStaticWidth}"
   class:bx--data-table--max-width="{stickyHeader}"

src/OverflowMenu/OverflowMenu.svelte

@@ -49,6 +49,9 @@
   /** Set an id for the button element */
   export let id = "ccs-" + Math.random().toString(36);
 
+  /** Obtain a reference to the trigger parent element */
+  export let parentRef = null;
+
   /** Obtain a reference to the trigger button element */
   export let buttonRef = null;
 
@@ -128,10 +131,20 @@
     }
 
     if (open) {
-      const { width, height } = buttonRef.getBoundingClientRect();
+      const { width, height, bottom } = buttonRef.getBoundingClientRect();
 
       buttonWidth = width;
 
+      // if menu height is bigger than the offset then flip  the direction to top
+      if (parentRef) {
+        if (
+          menuRef.getBoundingClientRect().height >
+          parentRef.getBoundingClientRect().bottom - bottom
+        ) {
+          direction = "top";
+        }
+      }
+
       if (!onMountAfterUpdate && $currentIndex < 0) {
         menuRef.focus();
       }

types/DataTable/DataTable.svelte.d.ts

@@ -176,6 +176,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<

types/DataTable/TableContainer.svelte.d.ts

@@ -26,6 +26,12 @@ export interface TableContainerProps
    * @default false
    */
   useStaticWidth?: boolean;
+
+  /**
+   * Obtain a reference to the Div HTML element
+   * @type {null | HTMLDivElement}
+   */
+   ref?: null | HTMLDivElement;
 }
 
 export default class TableContainer extends SvelteComponentTyped<

types/OverflowMenu/OverflowMenu.svelte.d.ts

@@ -75,6 +75,12 @@ export interface OverflowMenuProps
    * @default null
    */
   menuRef?: null | HTMLUListElement;
+
+  /**
+   * Obtain a reference to the trigger parent element
+   * @default null
+   */
+  parentRef?: null | HTMLElement;
 }
 
 export default class OverflowMenu extends SvelteComponentTyped<