vira 31.31.3 → 31.31.4

package/dist/elements/pop-up/vira-pop-up-trigger.element.js

@@ -6,7 +6,7 @@ import { createFocusStyles } from '../../styles/focus.js';
 import { noNativeFormStyles, noUserSelect, viraDisabledStyles } from '../../styles/index.js';
 import { defineViraElement } from '../../util/define-vira-element.js';
 import { triggerPopUpState } from '../../util/pop-up-helpers.js';
-import { HidePopUpEvent, isInputLikeElement, NavSelectEvent, PopUpManager, } from '../../util/pop-up-manager.js';
+import { HidePopUpEvent, isInputLikeElement, isMouseEventOnScrollbar, NavSelectEvent, PopUpManager, } from '../../util/pop-up-manager.js';
 import { ViraMenuItem } from './vira-menu-item.element.js';
 /**
  * Anchor options for pop-ups.
@@ -334,7 +334,9 @@ export const ViraPopUpTrigger = defineViraElement()({
                 }
                 respondToClick(event);
             }
-            else if (event.button === 0 && state.showPopUpResult) {
+            else if (event.button === 0 &&
+                state.showPopUpResult &&
+                !isMouseEventOnScrollbar(event)) {
                 const dropdownTrigger = host.shadowRoot.querySelector('.dropdown-trigger');
                 /**
                  * Close the menu when a mouse click originates from the pop-up area (e.g. a

package/dist/elements/vira-drawer.element.js

@@ -11,6 +11,7 @@ import { viraShadows } from '../styles/shadows.js';
 import { noUserSelect } from '../styles/user-select.js';
 import { viraTheme } from '../styles/vira-color-theme.js';
 import { defineViraElement } from '../util/define-vira-element.js';
+import { isMouseEventOnScrollbar } from '../util/pop-up-manager.js';
 import { ViraIcon } from './vira-icon.element.js';
 const globalEventsToCloseDrawerOn = [
     'pagehide',
@@ -225,7 +226,8 @@ export const ViraDrawer = defineViraElement()({
         })}
                 ${listen('mousedown', (event) => {
             if (state.contentElement &&
-                !event.composedPath().includes(state.contentElement)) {
+                !event.composedPath().includes(state.contentElement) &&
+                !isMouseEventOnScrollbar(event)) {
                 close();
             }
         })}

package/dist/elements/vira-modal.element.js

@@ -9,6 +9,7 @@ import { noNativeFormStyles, noNativeSpacing } from '../styles/native-styles.js'
 import { viraShadows } from '../styles/shadows.js';
 import { viraTheme } from '../styles/vira-color-theme.js';
 import { defineViraElement } from '../util/define-vira-element.js';
+import { isMouseEventOnScrollbar } from '../util/pop-up-manager.js';
 import { ViraIcon } from './vira-icon.element.js';
 const globalEventsToCloseModalOn = [
     'pagehide',
@@ -205,7 +206,8 @@ export const ViraModal = defineViraElement()({
                 ${listen('mousedown', (event) => {
             if (state.contentElement &&
                 !event.composedPath().includes(state.contentElement) &&
-                !inputs.blockLightDismissal) {
+                !inputs.blockLightDismissal &&
+                !isMouseEventOnScrollbar(event)) {
                 /** Background click. */
                 close();
             }

package/dist/util/pop-up-manager.d.ts

@@ -7,6 +7,15 @@ import { type ExtractEventByType, type ExtractEventTypes, type ListenOptions, Li
  * @category Internal
  */
 export declare function isInputLikeElement(element: Element): boolean;
+/**
+ * Determines if a mouse event landed on a scrollbar rather than on element content. Scrollbar
+ * interactions fire mouse events on the scrolling element itself (or on `<html>` for the page
+ * scrollbar), so an outside-click check would otherwise treat dragging a scrollbar as a click away
+ * from the pop-up and dismiss it mid-drag.
+ *
+ * @category Internal
+ */
+export declare function isMouseEventOnScrollbar(event: Readonly<MouseEvent>): boolean;
 /**
  * A type used for representing a rectangle's position.
  *
@@ -119,7 +128,7 @@ declare const HidePopUpEvent_base: (new (eventInitDict?: EventInit) => Event & i
     readonly CAPTURING_PHASE: 1;
     readonly AT_TARGET: 2;
     readonly BUBBLING_PHASE: 3;
-}, "prototype" | "NONE" | "CAPTURING_PHASE" | "AT_TARGET" | "BUBBLING_PHASE"> & Pick<import("typed-event-target").TypedEvent<"hide-pop-up">, "type">;
+}, "NONE" | "CAPTURING_PHASE" | "AT_TARGET" | "BUBBLING_PHASE" | "prototype"> & Pick<import("typed-event-target").TypedEvent<"hide-pop-up">, "type">;
 /**
  * An event fired from {@link PopUpManager} when the pop up should be hidden.
  *
@@ -139,7 +148,7 @@ declare const NavSelectEvent_base: (new (eventInitDict: {
     readonly CAPTURING_PHASE: 1;
     readonly AT_TARGET: 2;
     readonly BUBBLING_PHASE: 3;
-}, "prototype" | "NONE" | "CAPTURING_PHASE" | "AT_TARGET" | "BUBBLING_PHASE"> & Pick<import("typed-event-target").TypedCustomEvent<Coords, "nav-select">, "type">;
+}, "NONE" | "CAPTURING_PHASE" | "AT_TARGET" | "BUBBLING_PHASE" | "prototype"> & Pick<import("typed-event-target").TypedCustomEvent<Coords, "nav-select">, "type">;
 /**
  * An event fired from {@link PopUpManager} when an individual item in the pop up has been selected
  * by the user.

package/dist/util/pop-up-manager.js

@@ -21,6 +21,31 @@ export function isInputLikeElement(element) {
         element instanceof HTMLTextAreaElement ||
         (element instanceof HTMLElement && element.isContentEditable));
 }
+/**
+ * Determines if a mouse event landed on a scrollbar rather than on element content. Scrollbar
+ * interactions fire mouse events on the scrolling element itself (or on `<html>` for the page
+ * scrollbar), so an outside-click check would otherwise treat dragging a scrollbar as a click away
+ * from the pop-up and dismiss it mid-drag.
+ *
+ * @category Internal
+ */
+export function isMouseEventOnScrollbar(event) {
+    const target = event.composedPath()[0];
+    if (!(target instanceof Element)) {
+        return false;
+    }
+    const rect = target.getBoundingClientRect();
+    /**
+     * `clientLeft` and `clientTop` are the border widths, which also include the scrollbar itself
+     * when it's rendered on the leading edge (RTL layouts).
+     */
+    const clientLeft = rect.left + target.clientLeft;
+    const clientTop = rect.top + target.clientTop;
+    const outsideHorizontally = event.clientX < clientLeft || event.clientX >= clientLeft + target.clientWidth;
+    const outsideVertically = event.clientY < clientTop || event.clientY >= clientTop + target.clientHeight;
+    return ((outsideHorizontally && target.scrollHeight > target.clientHeight) ||
+        (outsideVertically && target.scrollWidth > target.clientWidth));
+}
 /**
  * The default empty {@link PositionRect}, with all values set to 0.
  *
@@ -98,9 +123,11 @@ export class PopUpManager {
                 }
             }),
             listenToGlobal('mousedown', (event) => {
-                if (this.lastRootElement &&
-                    event.composedPath().includes(this.lastRootElement)) {
-                    /** Ignore clicks that came from the pop up host itself. */
+                if (
+                /** Ignore clicks that came from the pop up host itself. */
+                (this.lastRootElement &&
+                    event.composedPath().includes(this.lastRootElement)) ||
+                    isMouseEventOnScrollbar(event)) {
                     return;
                 }
                 this.removePopUp();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "31.31.3",
+    "version": "31.31.4",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",