@abydahana/aksara-ui 1.2.1 → 1.2.3

package/dist/aksara.css

@@ -23681,7 +23681,8 @@ img,svg,video {
   background:var(--aksara-surface);
   border:1px solid var(--aksara-border-subtle);
   border-radius:var(--aksara-radius);
-  box-shadow:var(--aksara-shadow-md)
+  box-shadow:var(--aksara-shadow-md);
+  overscroll-behavior:contain
 }
 .dropdown-top .dropdown-menu,.dropdown-menu.dropdown-top {
   bottom:100%;
@@ -26397,8 +26398,7 @@ textarea.form-control {
 .empty-state {
   padding:3rem 1.5rem;
   text-align:center;
-  margin:1rem auto;
-  max-width:32rem
+  margin:1rem auto
 }
 .empty-state-icon-wrap {
   display:inline-flex;

package/dist/aksara.d.ts

@@ -114,7 +114,8 @@ export declare class Dropdown extends Component {
     isOpen: boolean;
     originalParent: Node | null;
     originalSibling: Node | null;
-    scrollHandler: (() => void) | null;
+    scrollHandler: ((event?: Event) => void) | null;
+    wheelHandler: ((event: WheelEvent) => void) | null;
     placement: string;
     container: string | HTMLElement;
     offset: number;

package/dist/aksara.esm.js

@@ -326,6 +326,7 @@ export class Dropdown extends Component {
     originalParent;
     originalSibling;
     scrollHandler;
+    wheelHandler;
     placement;
     container;
     offset;
@@ -372,6 +373,7 @@ export class Dropdown extends Component {
         this.originalParent = null;
         this.originalSibling = null;
         this.scrollHandler = null;
+        this.wheelHandler = null;
         this.updateOptions(options);
         if (this.trigger?.matches(".btn-sm, .input-sm, .form-control-sm, .form-select-sm") ||
             this.element.classList.contains("dropdown-sm")) {
@@ -427,9 +429,14 @@ export class Dropdown extends Component {
     position() {
         if (!this.menu || !this.isOpen || !this.trigger)
             return;
+        if (!this.trigger.isConnected || !document.body.contains(this.trigger)) {
+            this.hide();
+            return;
+        }
         this.menu.style.display = "block";
         this.menu.style.position = "absolute";
         this.menu.style.zIndex = "1000";
+        this.menu.style.overscrollBehavior = "contain";
         const triggerRect = this.trigger.getBoundingClientRect();
         if (this.trigger.classList.contains("form-select") ||
             this.element.classList.contains("variant-form-select") ||
@@ -441,10 +448,10 @@ export class Dropdown extends Component {
         const gap = this.offset;
         let top;
         let left;
+        const spaceBelow = window.innerHeight - triggerRect.bottom;
+        const spaceAbove = triggerRect.top;
         let placement = this.placement;
         if (placement === "auto") {
-            const spaceBelow = window.innerHeight - triggerRect.bottom;
-            const spaceAbove = triggerRect.top;
             placement = spaceBelow >= menuRect.height || spaceBelow >= spaceAbove ? "bottom" : "top";
         }
         this.menu.classList.remove("dropdown-top", "dropdown-bottom", "dropdown-start", "dropdown-end");
@@ -468,6 +475,11 @@ export class Dropdown extends Component {
         }
         const viewportWidth = window.innerWidth;
         left = Math.max(8, Math.min(left, viewportWidth - menuRect.width - 8));
+        const availableHeight = Math.max(120, Math.floor(placement === "top" ? spaceAbove - gap - 16 : spaceBelow - gap - 16));
+        if (this.menu.scrollHeight > availableHeight || availableHeight < 300) {
+            this.menu.style.maxHeight = `${availableHeight}px`;
+            this.menu.style.overflowY = "auto";
+        }
         this.menu.style.top = `${top + window.scrollY}px`;
         this.menu.style.left = `${left + window.scrollX}px`;
         this.menu.style.bottom = "auto";
@@ -490,9 +502,30 @@ export class Dropdown extends Component {
         this.menu.classList.add("dropdown-open");
         this.trigger?.setAttribute("aria-expanded", "true");
         this.position();
-        this.scrollHandler = () => this.position();
-        window.addEventListener("scroll", this.scrollHandler, { passive: true });
+        this.scrollHandler = (event) => {
+            if ((this.menu && (this.menu.matches(":hover") || this.menu.contains(document.activeElement))) ||
+                (this.trigger && this.trigger.matches(":hover")) ||
+                (event?.target && this.menu && (this.menu === event.target || this.menu.contains(event.target)))) {
+                return;
+            }
+            this.position();
+        };
+        window.addEventListener("scroll", this.scrollHandler, { passive: true, capture: true });
         window.addEventListener("resize", this.scrollHandler);
+        this.wheelHandler = (e) => {
+            if (!this.menu)
+                return;
+            const { deltaY } = e;
+            if (deltaY === 0)
+                return;
+            const atTop = this.menu.scrollTop <= 0;
+            const atBottom = this.menu.scrollTop + this.menu.clientHeight >= this.menu.scrollHeight - 1;
+            if ((deltaY < 0 && atTop) || (deltaY > 0 && atBottom) || this.menu.scrollHeight <= this.menu.clientHeight) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        this.menu.addEventListener("wheel", this.wheelHandler, { passive: false });
         emit(this.element, "dropdown:show", { instance: this });
         return this;
     }
@@ -501,10 +534,14 @@ export class Dropdown extends Component {
             return this;
         this.isOpen = false;
         if (this.scrollHandler) {
-            window.removeEventListener("scroll", this.scrollHandler);
+            window.removeEventListener("scroll", this.scrollHandler, { capture: true });
             window.removeEventListener("resize", this.scrollHandler);
             this.scrollHandler = null;
         }
+        if (this.wheelHandler && this.menu) {
+            this.menu.removeEventListener("wheel", this.wheelHandler);
+            this.wheelHandler = null;
+        }
         this.menu.classList.remove("dropdown-open", "dropdown-top", "dropdown-bottom", "dropdown-start", "dropdown-end");
         this.trigger?.setAttribute("aria-expanded", "false");
         if (this.originalParent) {

package/dist/aksara.js

@@ -327,6 +327,7 @@ class Dropdown extends Component {
     originalParent;
     originalSibling;
     scrollHandler;
+    wheelHandler;
     placement;
     container;
     offset;
@@ -373,6 +374,7 @@ class Dropdown extends Component {
         this.originalParent = null;
         this.originalSibling = null;
         this.scrollHandler = null;
+        this.wheelHandler = null;
         this.updateOptions(options);
         if (this.trigger?.matches(".btn-sm, .input-sm, .form-control-sm, .form-select-sm") ||
             this.element.classList.contains("dropdown-sm")) {
@@ -428,9 +430,14 @@ class Dropdown extends Component {
     position() {
         if (!this.menu || !this.isOpen || !this.trigger)
             return;
+        if (!this.trigger.isConnected || !document.body.contains(this.trigger)) {
+            this.hide();
+            return;
+        }
         this.menu.style.display = "block";
         this.menu.style.position = "absolute";
         this.menu.style.zIndex = "1000";
+        this.menu.style.overscrollBehavior = "contain";
         const triggerRect = this.trigger.getBoundingClientRect();
         if (this.trigger.classList.contains("form-select") ||
             this.element.classList.contains("variant-form-select") ||
@@ -442,10 +449,10 @@ class Dropdown extends Component {
         const gap = this.offset;
         let top;
         let left;
+        const spaceBelow = window.innerHeight - triggerRect.bottom;
+        const spaceAbove = triggerRect.top;
         let placement = this.placement;
         if (placement === "auto") {
-            const spaceBelow = window.innerHeight - triggerRect.bottom;
-            const spaceAbove = triggerRect.top;
             placement = spaceBelow >= menuRect.height || spaceBelow >= spaceAbove ? "bottom" : "top";
         }
         this.menu.classList.remove("dropdown-top", "dropdown-bottom", "dropdown-start", "dropdown-end");
@@ -469,6 +476,11 @@ class Dropdown extends Component {
         }
         const viewportWidth = window.innerWidth;
         left = Math.max(8, Math.min(left, viewportWidth - menuRect.width - 8));
+        const availableHeight = Math.max(120, Math.floor(placement === "top" ? spaceAbove - gap - 16 : spaceBelow - gap - 16));
+        if (this.menu.scrollHeight > availableHeight || availableHeight < 300) {
+            this.menu.style.maxHeight = `${availableHeight}px`;
+            this.menu.style.overflowY = "auto";
+        }
         this.menu.style.top = `${top + window.scrollY}px`;
         this.menu.style.left = `${left + window.scrollX}px`;
         this.menu.style.bottom = "auto";
@@ -491,9 +503,30 @@ class Dropdown extends Component {
         this.menu.classList.add("dropdown-open");
         this.trigger?.setAttribute("aria-expanded", "true");
         this.position();
-        this.scrollHandler = () => this.position();
-        window.addEventListener("scroll", this.scrollHandler, { passive: true });
+        this.scrollHandler = (event) => {
+            if ((this.menu && (this.menu.matches(":hover") || this.menu.contains(document.activeElement))) ||
+                (this.trigger && this.trigger.matches(":hover")) ||
+                (event?.target && this.menu && (this.menu === event.target || this.menu.contains(event.target)))) {
+                return;
+            }
+            this.position();
+        };
+        window.addEventListener("scroll", this.scrollHandler, { passive: true, capture: true });
         window.addEventListener("resize", this.scrollHandler);
+        this.wheelHandler = (e) => {
+            if (!this.menu)
+                return;
+            const { deltaY } = e;
+            if (deltaY === 0)
+                return;
+            const atTop = this.menu.scrollTop <= 0;
+            const atBottom = this.menu.scrollTop + this.menu.clientHeight >= this.menu.scrollHeight - 1;
+            if ((deltaY < 0 && atTop) || (deltaY > 0 && atBottom) || this.menu.scrollHeight <= this.menu.clientHeight) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        this.menu.addEventListener("wheel", this.wheelHandler, { passive: false });
         emit(this.element, "dropdown:show", { instance: this });
         return this;
     }
@@ -502,10 +535,14 @@ class Dropdown extends Component {
             return this;
         this.isOpen = false;
         if (this.scrollHandler) {
-            window.removeEventListener("scroll", this.scrollHandler);
+            window.removeEventListener("scroll", this.scrollHandler, { capture: true });
             window.removeEventListener("resize", this.scrollHandler);
             this.scrollHandler = null;
         }
+        if (this.wheelHandler && this.menu) {
+            this.menu.removeEventListener("wheel", this.wheelHandler);
+            this.wheelHandler = null;
+        }
         this.menu.classList.remove("dropdown-open", "dropdown-top", "dropdown-bottom", "dropdown-start", "dropdown-end");
         this.trigger?.setAttribute("aria-expanded", "false");
         if (this.originalParent) {