@invopop/popui 0.0.15 → 0.0.17

package/dist/BaseTableRow.svelte

@@ -2,6 +2,7 @@
 import BaseTableActions from "./BaseTableActions.svelte";
 import BaseTableCell from "./BaseTableCell.svelte";
 import InputCheckbox from "./InputCheckbox.svelte";
+import { scrollIntoTableView } from "./helpers.js";
 const dispatch = createEventDispatcher();
 let actionsDropdown;
 let checkboxButton;
@@ -27,24 +28,7 @@ $:
     scrollIntoView();
   }
 function scrollIntoView() {
-  const offset = 40;
-  const elementRect = checkboxButton.getBoundingClientRect();
-  const elementTop = elementRect.top + offset;
-  const elementBottom = elementRect.bottom + offset;
-  const viewportHeight = window.innerHeight;
-  const isAboveView = elementRect.top - offset < 0;
-  const isBelowView = elementRect.bottom + offset > viewportHeight;
-  if (isAboveView) {
-    window.scrollTo({
-      top: elementTop - offset,
-      behavior: "smooth"
-    });
-  } else if (isBelowView) {
-    window.scrollTo({
-      top: elementBottom - viewportHeight + offset,
-      behavior: "smooth"
-    });
-  }
+  scrollIntoTableView(checkboxButton);
 }
 </script>
 

package/dist/helpers.d.ts

@@ -4,3 +4,5 @@ export declare function toPascalCase(text: string): string;
 export declare function resolveIcon(icon?: IconSource | string | undefined): Promise<IconSource | undefined>;
 export declare function getCountryName(code: string): string | undefined;
 export declare function getStatusType(status: string): FeedItemStatus;
+export declare function getScrollableContainer(element: HTMLElement): HTMLElement | undefined;
+export declare function scrollIntoTableView(element: HTMLElement): void;

package/dist/helpers.js

@@ -33,3 +33,42 @@ export function getStatusType(status) {
     };
     return statuses[status];
 }
+export function getScrollableContainer(element) {
+    if (!element) {
+        return undefined;
+    }
+    let parent = element.parentElement;
+    while (parent) {
+        const { overflow } = window.getComputedStyle(parent);
+        if (overflow.split(' ').every((o) => o === 'auto' || o === 'scroll')) {
+            return parent;
+        }
+        parent = parent.parentElement;
+    }
+    return document.documentElement;
+}
+export function scrollIntoTableView(element) {
+    const offset = 80;
+    const offsetTop = offset + 40;
+    const container = getScrollableContainer(element);
+    if (!container)
+        return;
+    const containerRect = container.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    const elementTop = elementRect.top - containerRect.top + container.scrollTop;
+    const elementBottom = elementRect.bottom - containerRect.top + container.scrollTop;
+    const isAboveView = elementTop - offsetTop < container.scrollTop;
+    const isBelowView = elementBottom + offset > container.scrollTop + container.clientHeight;
+    if (isAboveView) {
+        container.scrollTo({
+            top: elementTop - offsetTop,
+            behavior: 'smooth'
+        });
+    }
+    else if (isBelowView) {
+        container.scrollTo({
+            top: elementBottom - container.clientHeight + offset,
+            behavior: 'smooth'
+        });
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",