vira 30.0.0 → 30.1.0

package/dist/elements/pop-up/vira-menu-trigger.element.d.ts

@@ -29,6 +29,5 @@ export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDe
     /** `undefined` means the pop up is not currently showing. */
     showPopUpResult: ShowPopUpResult | undefined;
 }, {
-    itemActivate: import("element-vir").DefineEvent<PropertyKey[]>;
     openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
 }, "vira-menu-trigger-", "vira-menu-trigger-", readonly ["trigger"], readonly []>;

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

@@ -38,7 +38,6 @@ export const ViraMenuTrigger = defineViraElement()({
         }
     `,
     events: {
-        itemActivate: defineElementEvent(),
         openChange: defineElementEvent(),
     },
     state() {

package/dist/elements/pop-up/vira-menu.element.d.ts

@@ -22,7 +22,7 @@ export declare enum ViraMenuPopUpDirection {
     Upwards = "upwards"
 }
 /**
- * A simple default style wrapper for pop-up menus. Consider using `createMenuItemTemplates` to help
+ * A simple default style wrapper for pop-up menus. Consider using `renderMenuItemEntries` to help
  * rendering many menu items.
  *
  * @category PopUp

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

@@ -27,7 +27,7 @@ export var ViraMenuPopUpDirection;
     ViraMenuPopUpDirection["Upwards"] = "upwards";
 })(ViraMenuPopUpDirection || (ViraMenuPopUpDirection = {}));
 /**
- * A simple default style wrapper for pop-up menus. Consider using `createMenuItemTemplates` to help
+ * A simple default style wrapper for pop-up menus. Consider using `renderMenuItemEntries` to help
  * rendering many menu items.
  *
  * @category PopUp

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

@@ -1,4 +1,4 @@
-import { assert } from '@augment-vir/assert';
+import { assert, assertWrap } 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';
@@ -301,10 +301,29 @@ export const ViraPopUpTrigger = defineViraElement()({
                 }
                 respondToClick(event);
             }
+            else if (event.button === 0 && state.showPopUpResult) {
+                const dropdownTrigger = host.shadowRoot.querySelector('.dropdown-trigger');
+                /**
+                 * Close the menu when a mouse click originates from the pop-up area (e.g. a
+                 * menu item was clicked). The trigger's mousedown already handles
+                 * open/close toggling for the trigger itself.
+                 */
+                if (dropdownTrigger && !event.composedPath().includes(dropdownTrigger)) {
+                    triggerPopUp({ emitEvent: true, open: false }, event);
+                }
+            }
         })}
                 ${listen('mousedown', (event) => {
             /** Ignore any clicks that aren't the main button. */
-            if (event.button === 0) {
+            if (event.button !== 0) {
+                return;
+            }
+            const dropdownTrigger = assertWrap.instanceOf(host.shadowRoot.querySelector('.dropdown-trigger'), HTMLElement);
+            /**
+             * Only respond if the mousedown originated from the trigger slot, not from
+             * within the pop-up menu items, to avoid prematurely closing the menu.
+             */
+            if (event.composedPath().includes(dropdownTrigger)) {
                 respondToClick(event);
             }
         })}

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

@@ -5,7 +5,7 @@ import { ChevronUp24Icon } from '../icons/index.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { noUserSelect, viraAnimationDurations } from '../styles/index.js';
 import { defineViraElement } from '../util/define-vira-element.js';
-import { createMenuItemTemplates } from '../util/pop-up-helpers.js';
+import { renderMenuItemEntries } from '../util/pop-up-helpers.js';
 import { ViraMenu, ViraMenuPopUpDirection } from './pop-up/vira-menu.element.js';
 import { HorizontalAnchor, ViraPopUpTrigger, } from './pop-up/vira-pop-up-trigger.element.js';
 import { ViraIcon } from './vira-icon.element.js';
@@ -133,10 +133,10 @@ export const ViraDropdown = defineViraElement()({
         })}
                 slot=${ViraPopUpTrigger.slotNames.popUp}
             >
-                ${createMenuItemTemplates(inputs.options.map((option) => {
+                ${renderMenuItemEntries(inputs.options.map((option) => {
             return {
                 content: option.label,
-                activate() {
+                onClick() {
                     dispatch(new events.selectedChange([option.value]));
                 },
                 disabled: option.disabled,

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

@@ -24,7 +24,7 @@ export declare function triggerPopUpState({ open, callback, popUpManager, host,
     options?: Partial<PopUpManagerOptions> | undefined;
 }>>): void;
 /**
- * A helper type to be used with {@link createMenuItemTemplates}.
+ * A helper type to be used with {@link renderMenuItemEntries}.
  *
  * @category PopUp
  */
@@ -33,14 +33,14 @@ export type ViraMenuItemEntry = {
 } & PartialWithUndefined<{
     selected: boolean;
     /** Called when any item is activated. */
-    activate: MenuItemActivateCallback;
+    onClick: MenuItemClickCallback;
 }> & typeof ViraMenuItem.InputsType;
 /**
- * A callback for menu items getting activated, to be used with {@link createMenuItemTemplates}.
+ * A callback for menu items getting activated, to be used with {@link renderMenuItemEntries}.
  *
  * @category PopUp
  */
-export type MenuItemActivateCallback = (params: Readonly<{
+export type MenuItemClickCallback = (params: Readonly<{
     /** The menu item's index in the array. */
     index: number;
     event: MouseEvent;
@@ -50,4 +50,4 @@ export type MenuItemActivateCallback = (params: Readonly<{
  *
  * @category PopUp
  */
-export declare function createMenuItemTemplates(items: ReadonlyArray<Readonly<ViraMenuItemEntry>>): import("lit-html").HTMLTemplateResult[];
+export declare function renderMenuItemEntries(items: ReadonlyArray<Readonly<ViraMenuItemEntry>>): import("lit-html").HTMLTemplateResult[];

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

@@ -41,14 +41,14 @@ export function triggerPopUpState({ open, callback, popUpManager, host, options,
  *
  * @category PopUp
  */
-export function createMenuItemTemplates(items) {
+export function renderMenuItemEntries(items) {
     return items.map((item, index) => {
         return html `
             <${ViraMenuItem.assign({
             ...item,
         })}
-                ${listen('mousedown', async (event) => {
-            await item.activate?.({
+                ${listen('click', async (event) => {
+            await item.onClick?.({
                 event,
                 index,
             });

package/package.json

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