vira 28.19.4 → 28.19.6

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

@@ -0,0 +1,158 @@
+import {type PartialWithUndefined} from '@augment-vir/common';
+import {type NavController} from 'device-navigation';
+import {classMap, css, defineElementEvent, html, listen, nothing, testId} from 'element-vir';
+import {type PopUpManager, type ShowPopUpResult} from '../../util/pop-up-manager.js';
+import {defineViraElement} from '../define-vira-element.js';
+import {updateSelectedItems} from './pop-up-helpers.js';
+import {type MenuItem} from './pop-up-menu-item.js';
+import {ViraMenu} from './vira-menu.element.js';
+import {
+    PopUpMenuDirection,
+    ViraPopUpMenu,
+    type PopUpMenuCornerStyle,
+} from './vira-pop-up-menu.element.js';
+import {
+    HorizontalAnchor,
+    ViraPopUpTrigger,
+    type PopUpOffset,
+    type PopUpTriggerPosition,
+} from './vira-pop-up-trigger.element.js';
+
+/**
+ * Test ids for {@link ViraMenuTrigger}.
+ *
+ * @category Internal
+ */
+export const viraMenuTriggerTestIds = {
+    menu: 'menu-trigger-menu',
+};
+
+/**
+ * A more specific wrapper of `ViraPopUpTrigger` that always opens a menu.
+ *
+ * @category PopUp
+ * @category Elements
+ */
+export const ViraMenuTrigger = defineViraElement<
+    {
+        items: ReadonlyArray<Readonly<MenuItem>>;
+    } & PartialWithUndefined<
+        {
+            /** The selected item ids from the given `items` object. */
+            selected: ReadonlyArray<PropertyKey>;
+            isDisabled: boolean;
+            isMultiSelect: boolean;
+            z_debug_forceOpenState: boolean;
+            popUpOffset: PopUpOffset;
+            /** Hide menu item check mark icons. */
+            hideCheckIcons: boolean;
+            menuCornerStyle: PopUpMenuCornerStyle;
+        } & PopUpTriggerPosition
+    >
+>()({
+    tagName: 'vira-menu-trigger',
+    styles: css`
+        :host {
+            display: inline-flex;
+            box-sizing: border-box;
+            vertical-align: middle;
+            max-width: 100%;
+        }
+
+        ${ViraPopUpTrigger} {
+            width: 100%;
+        }
+
+        .full-width-menu {
+            width: 100%;
+        }
+    `,
+    events: {
+        itemActivate: defineElementEvent<PropertyKey[]>(),
+        openChange: defineElementEvent<ShowPopUpResult | undefined>(),
+    },
+    state() {
+        return {
+            navController: undefined as undefined | NavController,
+            popUpManager: undefined as undefined | PopUpManager,
+            /** `undefined` means the pop up is not currently showing. */
+            showPopUpResult: undefined as ShowPopUpResult | undefined,
+        };
+    },
+    render({inputs, state, updateState, dispatch, events}) {
+        return html`
+            <${ViraPopUpTrigger.assign({
+                ...inputs,
+                keepOpenAfterInteraction: true,
+                popUpOffset: inputs.popUpOffset,
+                horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Left,
+            })}
+                class=${classMap({
+                    open: !!state.showPopUpResult,
+                })}
+                ${listen(ViraPopUpTrigger.events.init, (event) => {
+                    updateState({
+                        navController: event.detail.navController,
+                        popUpManager: event.detail.popUpManager,
+                    });
+                })}
+                ${listen(ViraPopUpTrigger.events.openChange, (event) => {
+                    if (!!state.showPopUpResult !== !!event.detail) {
+                        dispatch(new events.openChange(event.detail));
+                    }
+                    updateState({
+                        showPopUpResult: event.detail,
+                    });
+                })}
+                ${listen(ViraPopUpTrigger.events.navSelect, (event) => {
+                    const itemIndex = event.detail.x;
+                    const item = inputs.items[itemIndex];
+                    if (!item) {
+                        throw new Error(`Found no dropdown option at index '${itemIndex}'`);
+                    }
+
+                    dispatch(
+                        new events.itemActivate(
+                            updateSelectedItems(item, inputs.selected, inputs.isMultiSelect),
+                        ),
+                    );
+                    if (!inputs.isMultiSelect) {
+                        /**
+                         * Defer pop up removal to prevent race conditions with element-internal
+                         * click handlers.
+                         */
+                        globalThis.setTimeout(() => state.popUpManager?.removePopUp());
+                    }
+                })}
+            >
+                <slot slot=${ViraPopUpTrigger.slotNames.trigger}></slot>
+                ${state.navController && state.showPopUpResult
+                    ? html`
+                          <${ViraPopUpMenu.assign({
+                              direction: state.showPopUpResult.popDown
+                                  ? PopUpMenuDirection.Downwards
+                                  : PopUpMenuDirection.Upwards,
+                              cornerStyle: inputs.menuCornerStyle,
+                          })}
+                              slot=${ViraPopUpTrigger.slotNames.popUp}
+                              class=${classMap({
+                                  'full-width-menu':
+                                      inputs.horizontalAnchor === HorizontalAnchor.Both,
+                              })}
+                          >
+                              <${ViraMenu.assign({
+                                  items: inputs.items,
+                                  selected: inputs.selected,
+                                  navController: state.navController,
+                                  isMultiSelect: !!inputs.isMultiSelect,
+                                  hideCheckIcons: inputs.hideCheckIcons,
+                              })}
+                                  ${testId(viraMenuTriggerTestIds.menu)}
+                              ></${ViraMenu}>
+                          </${ViraPopUpMenu}>
+                      `
+                    : nothing}
+            </${ViraPopUpTrigger}>
+        `;
+    },
+});

package/{dist/elements/pop-up/vira-menu.element.js → src/elements/pop-up/vira-menu.element.ts}

@@ -1,12 +1,15 @@
-import { check } from '@augment-vir/assert';
-import { nav, navAttribute, NavController, NavValue } from 'device-navigation';
-import { classMap, css, html, ifDefined, testId } from 'element-vir';
-import { viraFormCssVars } from '../../styles/form-styles.js';
-import { noNativeFormStyles, viraDisabledStyles } from '../../styles/index.js';
-import { defineViraElement } from '../define-vira-element.js';
-import { ViraLink } from '../vira-link.element.js';
-import { assertUniqueIdProps } from './pop-up-helpers.js';
-import { ViraMenuItem } from './vira-menu-item.element.js';
+import {check} from '@augment-vir/assert';
+import {type PartialWithUndefined} from '@augment-vir/common';
+import {nav, navAttribute, NavController, NavValue} from 'device-navigation';
+import {classMap, css, html, ifDefined, testId} from 'element-vir';
+import {viraFormCssVars} from '../../styles/form-styles.js';
+import {noNativeFormStyles, viraDisabledStyles} from '../../styles/index.js';
+import {defineViraElement} from '../define-vira-element.js';
+import {ViraLink} from '../vira-link.element.js';
+import {assertUniqueIdProps} from './pop-up-helpers.js';
+import {type MenuItem} from './pop-up-menu-item.js';
+import {ViraMenuItem} from './vira-menu-item.element.js';
+
 /**
  * Test ids for {@link ViraMenu}.
  *
@@ -15,6 +18,7 @@ import { ViraMenuItem } from './vira-menu-item.element.js';
 export const viraMenuTestIds = {
     item: 'menu-item',
 };
+
 /**
  * A wrapper for menu items. This can be used for dropdown items or menu bar dropdowns. To detect
  * when items are selected or unselected, pass in a `NavController` instance and hook into its
@@ -23,17 +27,37 @@ export const viraMenuTestIds = {
  * @category PopUp
  * @category Elements
  */
-export const ViraMenu = defineViraElement()({
+export const ViraMenu = defineViraElement<
+    Readonly<
+        {
+            /**
+             * The parent nav controller for this menu. If none is provided, an internal nav
+             * controller is created (which means it can't be hooked into by external elements).
+             *
+             * It is recommended to not leave this `undefined`.
+             */
+            navController: NavController | undefined;
+            /** All menu items to show to the user. */
+            items: ReadonlyArray<Readonly<MenuItem>>;
+        } & PartialWithUndefined<{
+            /** The ids of the currently selected menu items. */
+            selected: ReadonlyArray<PropertyKey>;
+            isMultiSelect: boolean;
+            /** Hide menu item check mark icons. */
+            hideCheckIcons: boolean;
+        }>
+    >
+>()({
     tagName: 'vira-menu',
-    state({ inputs, host }) {
+    state({inputs, host}) {
         return {
             internalNavController: inputs.navController || new NavController(host),
         };
     },
     hostClasses: {
-        'vira-menu-multiselect': ({ inputs }) => !!inputs.isMultiSelect,
+        'vira-menu-multiselect': ({inputs}) => !!inputs.isMultiSelect,
     },
-    styles: ({ hostClasses }) => css `
+    styles: ({hostClasses}) => css`
         :host {
             display: flex;
             flex-direction: column;
@@ -58,30 +82,30 @@ export const ViraMenu = defineViraElement()({
         }
 
         ${navAttribute.css({
-        baseSelector: '.menu-item:not(.disabled):not(.selected)',
-        navValue: NavValue.Focused,
-    })}, ${navAttribute.css({
-        baseSelector: '.menu-item:not(.disabled):not(.selected)',
-        navValue: NavValue.Active,
-    })}, .menu-item:not(.disabled):not(.selected):hover {
+            baseSelector: '.menu-item:not(.disabled):not(.selected)',
+            navValue: NavValue.Focused,
+        })}, ${navAttribute.css({
+            baseSelector: '.menu-item:not(.disabled):not(.selected)',
+            navValue: NavValue.Active,
+        })}, .menu-item:not(.disabled):not(.selected):hover {
             background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
-        .value};
+                .value};
             outline: none;
         }
 
         ${hostClasses['vira-menu-multiselect'].selector} {
             &
                 ${navAttribute.css({
-        baseSelector: '.menu-item:not(.disabled)',
-        navValue: NavValue.Focused,
-    })},
+                    baseSelector: '.menu-item:not(.disabled)',
+                    navValue: NavValue.Focused,
+                })},
                 ${navAttribute.css({
-        baseSelector: '.menu-item:not(.disabled)',
-        navValue: NavValue.Active,
-    })},
+                    baseSelector: '.menu-item:not(.disabled)',
+                    navValue: NavValue.Active,
+                })},
                 .menu-item:not(.disabled):hover {
                 background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
-        .value};
+                    .value};
                 outline: none;
             }
         }
@@ -95,61 +119,64 @@ export const ViraMenu = defineViraElement()({
             pointer-events: auto;
         }
     `,
-    cleanup({ inputs, state }) {
+    cleanup({inputs, state}) {
         if (!inputs.navController) {
             state.internalNavController.destroy();
         }
     },
-    render({ inputs, state }) {
+    render({inputs, state}) {
         assertUniqueIdProps(inputs.items);
+
         const itemTemplates = inputs.items.map((item) => {
             const selected = !!inputs.selected?.includes(item.id);
             const innerTemplate = check.isString(item.label)
-                ? html `
+                ? html`
                       <${ViraMenuItem.assign({
-                    label: item.label,
-                    selected,
-                    hideCheckIcon: inputs.hideCheckIcons,
-                })}></${ViraMenuItem}>
+                          label: item.label,
+                          selected,
+                          hideCheckIcon: inputs.hideCheckIcons,
+                      })}></${ViraMenuItem}>
                   `
                 : item.label;
+
             const disabled = item.disabled || (!inputs.isMultiSelect && selected);
+
             if (item.route) {
-                return html `
+                return html`
                     <${ViraLink.assign({
-                    route: item.route,
-                })}
+                        route: item.route,
+                    })}
                         class="menu-item ${classMap({
-                    disabled: !!item.disabled,
-                    selected,
-                })}"
+                            disabled: !!item.disabled,
+                            selected,
+                        })}"
                         ${testId(viraMenuTestIds.item)}
                         title=${ifDefined(item.titleText || undefined)}
                         role="option"
-                        ${nav(state.internalNavController, { disabled })}
+                        ${nav(state.internalNavController, {disabled})}
                     >
                         ${innerTemplate}
                     </${ViraLink}>
                 `;
-            }
-            else {
-                return html `
+            } else {
+                return html`
                     <button
                         class="menu-item ${classMap({
-                    disabled: !!item.disabled,
-                    selected,
-                })}"
+                            disabled: !!item.disabled,
+                            selected,
+                        })}"
                         ${testId(viraMenuTestIds.item)}
                         title=${ifDefined(item.titleText || undefined)}
                         role="option"
-                        ${nav(state.internalNavController, { disabled })}
+                        ${nav(state.internalNavController, {disabled})}
                     >
                         ${innerTemplate}
                     </button>
                 `;
             }
         });
-        return html `
+
+        return html`
             ${itemTemplates}
         `;
     },

package/{dist/elements/pop-up/vira-pop-up-menu.element.js → src/elements/pop-up/vira-pop-up-menu.element.ts}

@@ -1,46 +1,58 @@
-import { css, html } from 'element-vir';
-import { viraBorders } from '../../styles/border.js';
-import { viraFormCssVars } from '../../styles/form-styles.js';
-import { viraShadows } from '../../styles/shadows.js';
-import { defineViraElement } from '../define-vira-element.js';
+import {type PartialWithUndefined} from '@augment-vir/common';
+import {css, html} from 'element-vir';
+import {viraBorders} from '../../styles/border.js';
+import {viraFormCssVars} from '../../styles/form-styles.js';
+import {viraShadows} from '../../styles/shadows.js';
+import {defineViraElement} from '../define-vira-element.js';
+
 /**
  * Possible corner styles for {@link ViraPopUpMenu}.
  *
  * @category Internal
  */
-export var PopUpMenuCornerStyle;
-(function (PopUpMenuCornerStyle) {
+export enum PopUpMenuCornerStyle {
     /** Rounding of corners depends on the open direction of the menu. */
-    PopUpMenuCornerStyle["Directional"] = "directional";
+    Directional = 'directional',
     /** All of the menus corners should be rounded. */
-    PopUpMenuCornerStyle["AllRounded"] = "all-rounded";
+    AllRounded = 'all-rounded',
     /** None of the menus corners should be rounded. */
-    PopUpMenuCornerStyle["AllSquare"] = "all-square";
-})(PopUpMenuCornerStyle || (PopUpMenuCornerStyle = {}));
+    AllSquare = 'all-square',
+}
+
 /**
  * Menu pop-up directions available for {@link ViraPopUpMenu}.
  *
  * @category Internal
  */
-export var PopUpMenuDirection;
-(function (PopUpMenuDirection) {
-    PopUpMenuDirection["Downwards"] = "downwards";
-    PopUpMenuDirection["Upwards"] = "upwards";
-})(PopUpMenuDirection || (PopUpMenuDirection = {}));
+export enum PopUpMenuDirection {
+    Downwards = 'downwards',
+    Upwards = 'upwards',
+}
+
 /**
  * A simple default style wrapper for pop-up menus.
  *
  * @category PopUp
  * @category Elements
  */
-export const ViraPopUpMenu = defineViraElement()({
+export const ViraPopUpMenu = defineViraElement<
+    PartialWithUndefined<{
+        /** @default PopUpMenuDirection.Downwards */
+        direction: PopUpMenuDirection;
+        /** @default PopUpMenuCornerStyle.Directional */
+        cornerStyle: PopUpMenuCornerStyle;
+    }>
+>()({
     tagName: 'vira-pop-up-menu',
     hostClasses: {
-        'vira-pop-up-menu-open-upwards': ({ inputs }) => inputs.direction === PopUpMenuDirection.Upwards,
-        'vira-pop-up-menu-rounded': ({ inputs }) => inputs.cornerStyle === PopUpMenuCornerStyle.AllRounded,
-        'vira-pop-up-menu-square': ({ inputs }) => inputs.cornerStyle === PopUpMenuCornerStyle.AllSquare,
+        'vira-pop-up-menu-open-upwards': ({inputs}) =>
+            inputs.direction === PopUpMenuDirection.Upwards,
+        'vira-pop-up-menu-rounded': ({inputs}) =>
+            inputs.cornerStyle === PopUpMenuCornerStyle.AllRounded,
+        'vira-pop-up-menu-square': ({inputs}) =>
+            inputs.cornerStyle === PopUpMenuCornerStyle.AllSquare,
     },
-    styles: ({ hostClasses }) => css `
+    styles: ({hostClasses}) => css`
         :host {
             display: flex;
             max-width: 100%;
@@ -73,7 +85,7 @@ export const ViraPopUpMenu = defineViraElement()({
         }
     `,
     render() {
-        return html `
+        return html`
             <slot></slot>
         `;
     },