vira 28.19.3 → 28.19.5

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

@@ -1,9 +1,10 @@
 import { assert } from '@augment-vir/assert';
+import { walkActiveElement } from '@augment-vir/web';
 import { NavController } from 'device-navigation';
 import { classMap, css, defineElementEvent, html, listen, renderIf } from 'element-vir';
 import { createFocusStyles } from '../../styles/focus.js';
 import { noNativeFormStyles, noUserSelect, viraDisabledStyles } from '../../styles/index.js';
-import { HidePopUpEvent, NavSelectEvent, PopUpManager, } from '../../util/pop-up-manager.js';
+import { HidePopUpEvent, isInputLikeElement, NavSelectEvent, PopUpManager, } from '../../util/pop-up-manager.js';
 import { defineViraElement } from '../define-vira-element.js';
 import { triggerPopUpState } from './pop-up-helpers.js';
 /**
@@ -285,6 +286,19 @@ export const ViraPopUpTrigger = defineViraElement()({
                 ${listen('click', (event) => {
             /** Detail is 0 if it was a keyboard key (like Enter) that triggered this click. */
             if (event.detail === 0) {
+                let isTextActiveElement = false;
+                walkActiveElement(({ element }) => {
+                    if (isInputLikeElement(element)) {
+                        isTextActiveElement = true;
+                        return true;
+                    }
+                    else {
+                        return false;
+                    }
+                });
+                if (isTextActiveElement) {
+                    return;
+                }
                 respondToClick(event);
             }
         })}

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

@@ -1,6 +1,12 @@
 import { type MaybePromise } from '@augment-vir/common';
 import { type Coords, type NavController } from 'device-navigation';
 import { type ExtractEventByType, type ExtractEventTypes, type ListenOptions, type RemoveListenerCallback } from 'typed-event-target';
+/**
+ * Used to prevent pop-ups from closing when a text input is active.
+ *
+ * @category Internal
+ */
+export declare function isInputLikeElement(element: Element): boolean;
 /**
  * A type used for representing a rectangle's position.
  *

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

@@ -4,6 +4,23 @@ import { findOverflowAncestor } from '@augment-vir/web';
 import { NavActivateEvent, NavDirection } from 'device-navigation';
 import { listenToPageActivation } from 'page-active';
 import { ListenTarget, defineTypedCustomEvent, defineTypedEvent, listenToGlobal, } from 'typed-event-target';
+/**
+ * Used to prevent pop-ups from closing when a text input is active.
+ *
+ * @category Internal
+ */
+export function isInputLikeElement(element) {
+    return ((element instanceof HTMLInputElement &&
+        (element.type === 'text' ||
+            element.type === 'search' ||
+            element.type === 'email' ||
+            element.type === 'url' ||
+            element.type === 'tel' ||
+            element.type === 'password' ||
+            element.type === 'number')) ||
+        element instanceof HTMLTextAreaElement ||
+        (element instanceof HTMLElement && element.isContentEditable));
+}
 /**
  * The default empty {@link PositionRect}, with all values set to 0.
  *
@@ -51,27 +68,18 @@ export class PopUpManager {
         this.navController = navController;
         this.options = { ...this.options, ...options };
     }
-    attachGlobalListeners(container) {
-        let firstFired = false;
-        const resizeObserver = new ResizeObserver(() => {
-            if (firstFired) {
-                this.removePopUp();
-            }
-            else {
-                firstFired = true;
-            }
-        });
-        resizeObserver.observe(container);
+    attachGlobalListeners() {
         this.cleanupCallbacks = [
-            () => {
-                resizeObserver.disconnect();
-            },
             listenToPageActivation(false, (isPageActive) => {
                 if (!isPageActive) {
                     this.removePopUp();
                 }
             }),
             this.navController.listen(NavActivateEvent, (event) => {
+                const target = event.composedPath()[0];
+                if (target instanceof Element && isInputLikeElement(target)) {
+                    return;
+                }
                 if (event.detail.success) {
                     this.listenTarget.dispatch(new NavSelectEvent({ detail: event.detail.coords }));
                     this.navController.currentNavEntry?.entry.focus(true);
@@ -94,17 +102,7 @@ export class PopUpManager {
                 }
                 else if (this.options.supportNavigation) {
                     const target = event.composedPath()[0];
-                    const isTextInput = (target instanceof HTMLInputElement &&
-                        (target.type === 'text' ||
-                            target.type === 'search' ||
-                            target.type === 'email' ||
-                            target.type === 'url' ||
-                            target.type === 'tel' ||
-                            target.type === 'password' ||
-                            target.type === 'number')) ||
-                        target instanceof HTMLTextAreaElement ||
-                        (target instanceof HTMLElement && target.isContentEditable);
-                    if (isTextInput) {
+                    if (target instanceof Element && isInputLikeElement(target)) {
                         return;
                     }
                     if (keyCode === 'ArrowDown') {
@@ -192,7 +190,7 @@ export class PopUpManager {
             diff.bottom < currentOptions.minDownSpace;
         const useLeft = diff.left > diff.right + currentOptions.horizontalDiffThreshold &&
             diff.right < currentOptions.minRightSpace;
-        this.attachGlobalListeners(container);
+        this.attachGlobalListeners();
         return {
             popDown: !useUp,
             popRight: !useLeft,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "28.19.3",
+    "version": "28.19.5",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,9 +38,9 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.57.5",
-        "@augment-vir/common": "^31.57.5",
-        "@augment-vir/web": "^31.57.5",
+        "@augment-vir/assert": "^31.58.0",
+        "@augment-vir/common": "^31.58.0",
+        "@augment-vir/web": "^31.58.0",
         "colorjs.io": "^0.6.0",
         "date-vir": "^8.1.0",
         "device-navigation": "^4.5.5",
@@ -52,7 +52,7 @@
         "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.57.5",
+        "@augment-vir/test": "^31.58.0",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
@@ -62,7 +62,7 @@
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
         "theme-vir": "^28.17.0",
-        "typedoc": "^0.28.15",
+        "typedoc": "^0.28.16",
         "typescript": "5.9.3",
         "vite": "^7.3.1",
         "vite-tsconfig-paths": "^6.0.4"