vira 28.19.6 → 29.0.0

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

@@ -0,0 +1,121 @@
+import { classMap, css, defineElementEvent, html, listen, nothing, testId } from 'element-vir';
+import { defineViraElement } from '../define-vira-element.js';
+import { updateSelectedItems } from './pop-up-helpers.js';
+import { ViraMenu } from './vira-menu.element.js';
+import { PopUpMenuDirection, ViraPopUpMenu, } from './vira-pop-up-menu.element.js';
+import { HorizontalAnchor, ViraPopUpTrigger, } 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()({
+    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(),
+        openChange: defineElementEvent(),
+    },
+    state() {
+        return {
+            navController: undefined,
+            popUpManager: undefined,
+            /** `undefined` means the pop up is not currently showing. */
+            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.d.ts

@@ -0,0 +1,38 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { NavController } from 'device-navigation';
+import { type MenuItem } from './pop-up-menu-item.js';
+/**
+ * Test ids for {@link ViraMenu}.
+ *
+ * @category Internal
+ */
+export declare const viraMenuTestIds: {
+    item: string;
+};
+/**
+ * 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
+ * events.
+ *
+ * @category PopUp
+ * @category Elements
+ */
+export declare const ViraMenu: import("element-vir").DeclarativeElementDefinition<"vira-menu", 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;
+}>>, {
+    internalNavController: NavController;
+}, {}, "vira-menu-multiselect", "vira-menu-", readonly [], readonly []>;

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

@@ -1,15 +1,12 @@
-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';
-
+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';
 /**
  * Test ids for {@link ViraMenu}.
  *
@@ -18,7 +15,6 @@ 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
@@ -27,37 +23,17 @@ export const viraMenuTestIds = {
  * @category PopUp
  * @category Elements
  */
-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;
-        }>
-    >
->()({
+export const ViraMenu = defineViraElement()({
     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;
@@ -82,30 +58,28 @@ 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 {
-            background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
-                .value};
+        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-color'].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};
+                background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
                 outline: none;
             }
         }
@@ -119,64 +93,61 @@ 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.d.ts

@@ -0,0 +1,35 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+/**
+ * Possible corner styles for {@link ViraPopUpMenu}.
+ *
+ * @category Internal
+ */
+export declare enum PopUpMenuCornerStyle {
+    /** Rounding of corners depends on the open direction of the menu. */
+    Directional = "directional",
+    /** All of the menus corners should be rounded. */
+    AllRounded = "all-rounded",
+    /** None of the menus corners should be rounded. */
+    AllSquare = "all-square"
+}
+/**
+ * Menu pop-up directions available for {@link ViraPopUpMenu}.
+ *
+ * @category Internal
+ */
+export declare enum PopUpMenuDirection {
+    Downwards = "downwards",
+    Upwards = "upwards"
+}
+/**
+ * A simple default style wrapper for pop-up menus.
+ *
+ * @category PopUp
+ * @category Elements
+ */
+export declare const ViraPopUpMenu: import("element-vir").DeclarativeElementDefinition<"vira-pop-up-menu", PartialWithUndefined<{
+    /** @default PopUpMenuDirection.Downwards */
+    direction: PopUpMenuDirection;
+    /** @default PopUpMenuCornerStyle.Directional */
+    cornerStyle: PopUpMenuCornerStyle;
+}>, {}, {}, "vira-pop-up-menu-open-upwards" | "vira-pop-up-menu-rounded" | "vira-pop-up-menu-square", "vira-pop-up-menu-", readonly [], readonly []>;

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

@@ -1,58 +1,45 @@
-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';
-
+import { css, html } from 'element-vir';
+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 enum PopUpMenuCornerStyle {
+export var PopUpMenuCornerStyle;
+(function (PopUpMenuCornerStyle) {
     /** Rounding of corners depends on the open direction of the menu. */
-    Directional = 'directional',
+    PopUpMenuCornerStyle["Directional"] = "directional";
     /** All of the menus corners should be rounded. */
-    AllRounded = 'all-rounded',
+    PopUpMenuCornerStyle["AllRounded"] = "all-rounded";
     /** None of the menus corners should be rounded. */
-    AllSquare = 'all-square',
-}
-
+    PopUpMenuCornerStyle["AllSquare"] = "all-square";
+})(PopUpMenuCornerStyle || (PopUpMenuCornerStyle = {}));
 /**
  * Menu pop-up directions available for {@link ViraPopUpMenu}.
  *
  * @category Internal
  */
-export enum PopUpMenuDirection {
-    Downwards = 'downwards',
-    Upwards = 'upwards',
-}
-
+export var PopUpMenuDirection;
+(function (PopUpMenuDirection) {
+    PopUpMenuDirection["Downwards"] = "downwards";
+    PopUpMenuDirection["Upwards"] = "upwards";
+})(PopUpMenuDirection || (PopUpMenuDirection = {}));
 /**
  * A simple default style wrapper for pop-up menus.
  *
  * @category PopUp
  * @category Elements
  */
-export const ViraPopUpMenu = defineViraElement<
-    PartialWithUndefined<{
-        /** @default PopUpMenuDirection.Downwards */
-        direction: PopUpMenuDirection;
-        /** @default PopUpMenuCornerStyle.Directional */
-        cornerStyle: PopUpMenuCornerStyle;
-    }>
->()({
+export const ViraPopUpMenu = defineViraElement()({
     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%;
@@ -60,7 +47,7 @@ export const ViraPopUpMenu = defineViraElement<
             overflow-y: auto;
             z-index: 99;
             box-sizing: border-box;
-            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
             border-top-left-radius: 0;
             border-top-right-radius: 0;
             background-color: ${viraFormCssVars['vira-form-background-color'].value};
@@ -71,7 +58,7 @@ export const ViraPopUpMenu = defineViraElement<
 
         ${hostClasses['vira-pop-up-menu-open-upwards'].selector} {
             ${viraShadows.menuShadowReversed}
-            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
         }
@@ -81,11 +68,11 @@ export const ViraPopUpMenu = defineViraElement<
         }
 
         ${hostClasses['vira-pop-up-menu-rounded'].selector} {
-            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
         }
     `,
     render() {
-        return html`
+        return html `
             <slot></slot>
         `;
     },

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

@@ -0,0 +1,105 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { NavController, type Coords } from 'device-navigation';
+import { PopUpManager, type ShowPopUpResult } from '../../util/pop-up-manager.js';
+/**
+ * Offsets applied to any menu opened by {@link ViraPopUpTrigger}.
+ *
+ * @category Internal
+ */
+export type PopUpOffset = PartialWithUndefined<{
+    vertical: number;
+    right: number;
+    left: number;
+}>;
+/**
+ * Anchor options for pop-ups.
+ *
+ * @category Internal
+ */
+export declare enum HorizontalAnchor {
+    /**
+     * The left side of the pop-up will be anchored to the left side of the trigger, allowing the
+     * pop-up to grow on the right side of the trigger.
+     */
+    Left = "left",
+    /**
+     * The Right side of the pop-up will be anchored to the right side of the trigger, allowing the
+     * pop-up to grow on the left side of the trigger.
+     */
+    Right = "right",
+    /** Restrict the pop-up on both sides. */
+    Both = "both",
+    /**
+     * Automatically choose left or right based on available space, defaulting to anchoring on the
+     * left side.
+     *
+     * This is the default anchor for {@link ViraPopUpTrigger}.
+     */
+    Auto = "auto"
+}
+/**
+ * Configs for {@link ViraPopUpTrigger} pop-up positioning and sizing.
+ *
+ * @category Internal
+ */
+export type PopUpTriggerPosition = {
+    /**
+     * - `HorizontalAnchor.Left`: pop-up is anchored to the left side of the trigger and the pop-up
+     *   can grow to the right.
+     * - `HorizontalAnchor.Right`: pop-up is anchored to the right side of the trigger and the pop-up
+     *   can grow to the left.
+     * - `HorizontalAnchor.Both`: pop-up is anchored on both sides of the trigger and cannot grow
+     *   beyond it.
+     * - `HorizontalAnchor.Auto`: automatically choose left or right anchor based on available space,
+     *   defaulting to left anchor. (This is the default experience.)
+     *
+     * Note that when `HorizontalAnchor.Both` is _not_ used, this anchor will cancel out any
+     * `popUpOffset` for the direction _opposite_ of the chosen anchor.
+     */
+    horizontalAnchor: HorizontalAnchor;
+    /**
+     * When `true`, the pop-up will not have its maximum width constrained to fit within the
+     * overflow container. The positioning logic (left/right) will still be applied.
+     *
+     * @default false
+     */
+    ignoreMaxWidth: boolean;
+    /**
+     * When `true`, the pop-up will not have its maximum height constrained to fit within the
+     * overflow container. The positioning logic (up/down) will still be applied.
+     *
+     * @default false
+     */
+    ignoreMaxHeight: boolean;
+};
+/**
+ * An element with slots for a pop-up trigger and pop-up contents.
+ *
+ * @category PopUp
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-pop-up-trigger
+ */
+export declare const ViraPopUpTrigger: import("element-vir").DeclarativeElementDefinition<"vira-pop-up-trigger", PartialWithUndefined<PopUpTriggerPosition & {
+    isDisabled: boolean;
+    /** For debugging purposes only. Very bad for actual production code use. */
+    z_debug_forceOpenState: boolean;
+    /** Set to `true` to keep the pop-up open if it is interacted with. */
+    keepOpenAfterInteraction: boolean;
+    /** All values in px. */
+    popUpOffset: PopUpOffset;
+}>, {
+    /** `undefined` means the pop up is not currently showing. */
+    showPopUpResult: ShowPopUpResult | undefined;
+    popUpManager: PopUpManager;
+}, {
+    navSelect: import("element-vir").DefineEvent<Coords>;
+    /**
+     * - `undefined` indicates that the pop-up just closed.
+     * - {@link ShowPopUpResult} indicates that the pop-up just opened.
+     */
+    openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
+    init: import("element-vir").DefineEvent<{
+        navController: NavController;
+        popUpManager: PopUpManager;
+    }>;
+}, "vira-pop-up-trigger-disabled", "vira-pop-up-trigger-", readonly ["trigger", "popUp"], readonly []>;