vira 27.0.0 → 28.0.0

package/dist/util/{popover-manager.js → pop-up-manager.js}

@@ -1,4 +1,6 @@
+import { assert } from '@augment-vir/assert';
 import { mapObjectValues } from '@augment-vir/common';
+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';
@@ -14,30 +16,30 @@ export const emptyPositionRect = {
     bottom: 0,
 };
 /**
- * An event fired from {@link PopoverManager} when the popover should be hidden.
+ * An event fired from {@link PopUpManager} when the pop up should be hidden.
  *
- * @category Popover
+ * @category PopUp
  */
-export class HidePopoverEvent extends defineTypedEvent('hide-popover') {
+export class HidePopUpEvent extends defineTypedEvent('hide-pop-up') {
 }
 /**
- * An event fired from {@link PopoverManager} when an individual item in the popover has been
- * selected by the user.
+ * An event fired from {@link PopUpManager} when an individual item in the pop up has been selected
+ * by the user.
  *
- * @category Popover
+ * @category PopUp
  */
 export class NavSelectEvent extends defineTypedCustomEvent()('nav-select') {
 }
 /**
- * A "popover" manager for items that popover from the HTML page, like dropdowns or menus.
+ * A "pop up" manager for items that pop up from the HTML page, like dropdowns or menus.
  *
- * @category Popover
+ * @category PopUp
  */
-export class PopoverManager {
+export class PopUpManager {
     navController;
     listenTarget = new ListenTarget();
     options = {
-        minDownwardsSpace: 200,
+        minDownSpace: 200,
         verticalDiffThreshold: 20,
         supportNavigation: true,
     };
@@ -51,7 +53,7 @@ export class PopoverManager {
         let firstFired = false;
         const resizeObserver = new ResizeObserver(() => {
             if (firstFired) {
-                this.removePopover();
+                this.removePopUp();
             }
             else {
                 firstFired = true;
@@ -64,7 +66,7 @@ export class PopoverManager {
             },
             listenToPageActivation(false, (isPageActive) => {
                 if (!isPageActive) {
-                    this.removePopover();
+                    this.removePopUp();
                 }
             }),
             this.navController.listen(NavActivateEvent, (event) => {
@@ -78,15 +80,15 @@ export class PopoverManager {
             listenToGlobal('mousedown', (event) => {
                 if (this.lastRootElement &&
                     event.composedPath().includes(this.lastRootElement)) {
-                    /** Ignore clicks that came from the popover host itself. */
+                    /** Ignore clicks that came from the pop up host itself. */
                     return;
                 }
-                this.removePopover();
+                this.removePopUp();
             }, { passive: true }),
             listenToGlobal('keydown', (event) => {
                 const keyCode = event.code;
                 if (keyCode === 'Escape') {
-                    this.removePopover();
+                    this.removePopUp();
                 }
                 else if (this.options.supportNavigation) {
                     if (keyCode === 'ArrowDown') {
@@ -130,50 +132,51 @@ export class PopoverManager {
             }),
         ];
     }
-    /** Listen to events emitted from a {@link PopoverManager} instance. */
+    /** Listen to events emitted from a {@link PopUpManager} instance. */
     listen(event, listener, options) {
         return this.listenTarget.listen(event, listener, options);
     }
-    /** Trigger removal or hiding of the popover. */
-    removePopover() {
+    /** Trigger removal or hiding of the pop up. */
+    removePopUp() {
         this.cleanupCallbacks.forEach((callback) => callback());
-        this.listenTarget.dispatch(new HidePopoverEvent());
+        this.listenTarget.dispatch(new HidePopUpEvent());
     }
-    /** Trigger showing the popover. */
-    showPopover(rootElement, options) {
+    /** Trigger showing the pop up. */
+    showPopUp(rootElement, options) {
         this.lastRootElement = rootElement;
         const currentOptions = { ...this.options, ...options };
-        const container = window.document.body;
+        const container = findOverflowAncestor(rootElement);
+        assert.instanceOf(container, HTMLElement);
         const rootRect = rootElement.getBoundingClientRect();
         const containerRect = container.getBoundingClientRect();
-        const containerPosition = {
-            top: 0,
-            left: 0,
-            right: containerRect.width,
-            bottom: containerRect.height,
-        };
+        const containerScrollbarWidth = container.offsetWidth - container.clientWidth;
+        const containerScrollbarHeight = container.offsetHeight - container.clientHeight;
+        const containerPosition = container === document.body
+            ? {
+                top: 0,
+                left: 0,
+                right: containerRect.width,
+                bottom: containerRect.height,
+            }
+            : {
+                top: containerRect.top,
+                left: containerRect.left,
+                right: containerRect.right - containerScrollbarWidth,
+                bottom: containerRect.bottom - containerScrollbarHeight,
+            };
         const rootPosition = mapObjectValues(emptyPositionRect, (key) => {
             return rootRect[key];
         });
-        const diffPositions = mapObjectValues(emptyPositionRect, (key) => {
+        const diff = mapObjectValues(emptyPositionRect, (key) => {
             const containerDimension = containerPosition[key];
             const hostDimension = rootPosition[key];
             return Math.abs(containerDimension - hostDimension);
         });
-        const diff = {
-            ...diffPositions,
-            rootLeftToContainerRight: containerPosition.right - diffPositions.left,
-            rootRightToContainerLeft: containerPosition.right - diffPositions.right,
-            rootTopToContainerBottom: containerPosition.bottom - diffPositions.top,
-            rootBottomToContainerTop: containerPosition.bottom - diffPositions.bottom,
-        };
         const useUp = diff.top > diff.bottom + currentOptions.verticalDiffThreshold &&
-            diff.bottom < currentOptions.minDownwardsSpace;
+            diff.bottom < currentOptions.minDownSpace;
         this.attachGlobalListeners(container);
-        const useLeft = diff.rootLeftToContainerRight + 100 < diff.rootRightToContainerLeft;
         return {
             popDown: !useUp,
-            popRight: !useLeft,
             positions: {
                 container: containerPosition,
                 root: rootPosition,
@@ -182,13 +185,13 @@ export class PopoverManager {
         };
     }
     /**
-     * Cleanup and destroy the {@link PopoverManager} instance. This:
+     * Cleanup and destroy the {@link PopUpManager} instance. This:
      *
-     * - Removes the existing popover
+     * - Removes the existing pop up
      * - Cleans up all internal and external listeners
      */
     destroy() {
-        this.removePopover();
+        this.removePopUp();
         this.listenTarget.destroy();
     }
 }

package/package.json

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

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

@@ -1,41 +0,0 @@
-import { type PartialWithUndefined } from '@augment-vir/common';
-import { type NavController } from 'device-navigation';
-import { type PopoverManager, type ShowPopoverResult } from '../../util/popover-manager.js';
-import { type MenuItem } from './popover-menu-item.js';
-import { type PopoverMenuCornerStyle } from './vira-popover-menu.element.js';
-import { type PopoverOffset } from './vira-popover-trigger.element.js';
-/**
- * Test ids for {@link ViraMenuTrigger}.
- *
- * @category Internal
- */
-export declare const viraMenuTriggerTestIds: {
-    menu: string;
-};
-/**
- * A more specific wrapper of `ViraPopoverTrigger` that always opens a menu.
- *
- * @category Popover
- * @category Elements
- */
-export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDefinition<"vira-menu-trigger", {
-    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;
-    popoverOffset: PopoverOffset;
-    /** Hide menu item check mark icons. */
-    hideCheckIcons: boolean;
-    menuCornerStyle: PopoverMenuCornerStyle;
-}>, {
-    navController: undefined | NavController;
-    popoverManager: undefined | PopoverManager;
-    /** `undefined` means the popover is not currently showing. */
-    showPopoverResult: ShowPopoverResult | undefined;
-}, {
-    itemActivate: import("element-vir").DefineEvent<PropertyKey[]>;
-    openChange: import("element-vir").DefineEvent<ShowPopoverResult | undefined>;
-}, "vira-menu-trigger-", "vira-menu-trigger-", readonly [], readonly []>;

package/dist/elements/popover/vira-popover-menu.element.d.ts

@@ -1,35 +0,0 @@
-import { type PartialWithUndefined } from '@augment-vir/common';
-/**
- * Possible corner styles for {@link ViraPopoverMenu}.
- *
- * @category Internal
- */
-export declare enum PopoverMenuCornerStyle {
-    /** 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 popover directions available for {@link ViraPopoverMenu}.
- *
- * @category Internal
- */
-export declare enum PopoverMenuDirection {
-    Downwards = "downwards",
-    Upwards = "upwards"
-}
-/**
- * A simple default style wrapper for popover menus.
- *
- * @category Popover
- * @category Elements
- */
-export declare const ViraPopoverMenu: import("element-vir").DeclarativeElementDefinition<"vira-popover-menu", PartialWithUndefined<{
-    /** @default PopoverMenuDirection.Downwards */
-    direction: PopoverMenuDirection;
-    /** @default PopoverMenuCornerStyle.Directional */
-    cornerStyle: PopoverMenuCornerStyle;
-}>, {}, {}, "vira-popover-menu-open-upwards" | "vira-popover-menu-rounded" | "vira-popover-menu-square", "vira-popover-menu-", readonly [], readonly []>;

package/dist/elements/popover/vira-popover-trigger.element.d.ts

@@ -1,67 +0,0 @@
-import { type PartialWithUndefined } from '@augment-vir/common';
-import { NavController, type Coords } from 'device-navigation';
-import { PopoverManager, type ShowPopoverResult } from '../../util/popover-manager.js';
-/**
- * Offsets applied to any menu opened by {@link ViraPopoverTrigger}.
- *
- * @category Internal
- */
-export type PopoverOffset = PartialWithUndefined<{
-    vertical: number;
-    right: number;
-    left: number;
-}>;
-/**
- * Anchor options for popovers.
- *
- * @category Internal
- */
-export declare enum HorizontalAnchor {
-    /**
-     * The left side of the popover will be anchored to the left side of the trigger, allowing the
-     * popover to grow on the right side of the trigger.
-     */
-    Left = "left",
-    /**
-     * The Right side of the popover will be anchored to the right side of the trigger, allowing the
-     * popover to grow on the left side of the trigger.
-     */
-    Right = "right",
-    /**
-     * Restrict the popover on both sides.
-     *
-     * This is the default anchor for {@link ViraPopoverTrigger}.
-     */
-    Both = "both"
-}
-/**
- * An element with slots for a popover trigger and popover contents.
- *
- * @category Popover
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-popover-trigger
- */
-export declare const ViraPopoverTrigger: import("element-vir").DeclarativeElementDefinition<"vira-popover-trigger", PartialWithUndefined<{
-    isDisabled: boolean;
-    /** For debugging purposes only. Very bad for actual production code use. */
-    z_debug_forceOpenState: boolean;
-    /** Set to `true` to keep the popover open if it is interacted with. */
-    keepOpenAfterInteraction: boolean;
-    /** All values in px. */
-    popoverOffset?: PopoverOffset;
-}>, {
-    /** `undefined` means the popover is not currently showing. */
-    showPopoverResult: ShowPopoverResult | undefined;
-    popoverManager: PopoverManager;
-}, {
-    navSelect: import("element-vir").DefineEvent<Coords>;
-    /**
-     * - `undefined` indicates that the popover just closed.
-     * - {@link ShowPopoverResult} indicates that the popover just opened.
-     */
-    openChange: import("element-vir").DefineEvent<ShowPopoverResult | undefined>;
-    init: import("element-vir").DefineEvent<{
-        navController: NavController;
-        popoverManager: PopoverManager;
-    }>;
-}, "vira-popover-trigger-disabled", "vira-popover-trigger-", readonly ["trigger", "popover"], readonly []>;

package/dist/elements/popover/vira-popover-trigger.element.js

@@ -1,301 +0,0 @@
-import { assert } from '@augment-vir/assert';
-import { NavController } from 'device-navigation';
-import { css, defineElementEvent, html, listen, onDomRendered, renderIf } from 'element-vir';
-import { viraDisabledStyles } from '../../styles/disabled.js';
-import { createFocusStyles } from '../../styles/focus.js';
-import { noNativeFormStyles } from '../../styles/native-styles.js';
-import { noUserSelect } from '../../styles/user-select.js';
-import { HidePopoverEvent, NavSelectEvent, PopoverManager, } from '../../util/popover-manager.js';
-import { defineViraElement } from '../define-vira-element.js';
-import { triggerPopoverState } from './popover-helpers.js';
-/**
- * Anchor options for popovers.
- *
- * @category Internal
- */
-export var HorizontalAnchor;
-(function (HorizontalAnchor) {
-    /**
-     * The left side of the popover will be anchored to the left side of the trigger, allowing the
-     * popover to grow on the right side of the trigger.
-     */
-    HorizontalAnchor["Left"] = "left";
-    /**
-     * The Right side of the popover will be anchored to the right side of the trigger, allowing the
-     * popover to grow on the left side of the trigger.
-     */
-    HorizontalAnchor["Right"] = "right";
-    /**
-     * Restrict the popover on both sides.
-     *
-     * This is the default anchor for {@link ViraPopoverTrigger}.
-     */
-    HorizontalAnchor["Both"] = "both";
-})(HorizontalAnchor || (HorizontalAnchor = {}));
-/**
- * An element with slots for a popover trigger and popover contents.
- *
- * @category Popover
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-popover-trigger
- */
-export const ViraPopoverTrigger = defineViraElement()({
-    tagName: 'vira-popover-trigger',
-    state({ host }) {
-        return {
-            /** `undefined` means the popover is not currently showing. */
-            showPopoverResult: undefined,
-            popoverManager: new PopoverManager(new NavController(host, { activateOnMouseUp: true })),
-        };
-    },
-    slotNames: [
-        'trigger',
-        'popover',
-    ],
-    hostClasses: {
-        'vira-popover-trigger-disabled': ({ inputs }) => !!inputs.isDisabled,
-    },
-    styles: ({ hostClasses }) => css `
-        :host {
-            display: inline-flex;
-            box-sizing: border-box;
-            max-width: 100%;
-        }
-
-        .wrapper {
-            max-width: 100%;
-            box-sizing: border-box;
-            position: relative;
-            /* Do not use display:flex. Doing so will break positioning for Firefox and Safari. */
-            display: block;
-        }
-
-        .dropdown-trigger {
-            ${noNativeFormStyles};
-            ${noUserSelect};
-            cursor: pointer;
-            max-width: 100%;
-            position: relative;
-            flex-grow: 1;
-            box-sizing: border-box;
-            anchor-name: --popover-trigger;
-
-            ${createFocusStyles({
-        elementBorderSize: 1,
-    })}
-        }
-
-        ${hostClasses['vira-popover-trigger-disabled'].selector} {
-            ${viraDisabledStyles}
-            pointer-events: auto;
-
-            & .dropdown-wrapper {
-                pointer-events: none;
-            }
-        }
-
-        [popover] {
-            /* More styles are set internally via JS. */
-
-            position: absolute;
-            box-sizing: border-box;
-            inset: auto;
-            display: flex;
-            /* Allow menu shadows to overflow. Without this they are hidden. */
-            overflow: visible;
-            pointer-events: none;
-
-            > * {
-                pointer-events: auto;
-                max-width: 100%;
-            }
-        }
-
-        :popover-open {
-            ${noNativeFormStyles}
-        }
-    `,
-    events: {
-        navSelect: defineElementEvent(),
-        /**
-         * - `undefined` indicates that the popover just closed.
-         * - {@link ShowPopoverResult} indicates that the popover just opened.
-         */
-        openChange: defineElementEvent(),
-        init: defineElementEvent(),
-    },
-    cleanup({ state, updateState }) {
-        updateState({
-            showPopoverResult: undefined,
-        });
-        state.popoverManager.destroy();
-    },
-    init({ state, updateState, host, inputs, dispatch, events }) {
-        /** Refocus the trigger and set the result to `undefined` when the popover closes. */
-        state.popoverManager.listen(HidePopoverEvent, () => {
-            updateState({
-                showPopoverResult: undefined,
-            });
-            dispatch(new events.openChange(undefined));
-            if (!inputs.isDisabled) {
-                const dropdownWrapper = host.shadowRoot.querySelector('.dropdown-trigger');
-                assert.instanceOf(dropdownWrapper, HTMLButtonElement, 'failed to find dropdown wrapper child');
-                dropdownWrapper.focus();
-            }
-        });
-        state.popoverManager.listen(NavSelectEvent, (event) => {
-            if (!inputs.keepOpenAfterInteraction) {
-                triggerPopoverState({
-                    open: false,
-                    callback(showPopoverResult) {
-                        updateState({
-                            showPopoverResult,
-                        });
-                    },
-                    host,
-                    popoverManager: state.popoverManager,
-                });
-            }
-            dispatch(new events.navSelect(event.detail));
-        });
-        dispatch(new events.init({
-            navController: state.popoverManager.navController,
-            popoverManager: state.popoverManager,
-        }));
-    },
-    render({ dispatch, events, state, inputs, updateState, host, slotNames }) {
-        function triggerPopover({ emitEvent, open, }, event) {
-            if (state.showPopoverResult && inputs.keepOpenAfterInteraction && event) {
-                const dropdownTrigger = host.shadowRoot.querySelector('.dropdown-trigger');
-                if (dropdownTrigger && !event.composedPath().includes(dropdownTrigger)) {
-                    /**
-                     * Prevent closing the popover when `keepOpenAfterInteraction` is turned on and
-                     * the popover was interacted with.
-                     */
-                    return;
-                }
-            }
-            triggerPopoverState({
-                open,
-                callback(showPopoverResult) {
-                    updateState({ showPopoverResult });
-                    if (emitEvent) {
-                        dispatch(new events.openChange(showPopoverResult));
-                    }
-                },
-                host,
-                popoverManager: state.popoverManager,
-            });
-        }
-        if (inputs.isDisabled) {
-            triggerPopover({ open: false, emitEvent: false }, undefined);
-        }
-        else if (inputs.z_debug_forceOpenState != undefined) {
-            if (!inputs.z_debug_forceOpenState && state.showPopoverResult) {
-                triggerPopover({ emitEvent: false, open: false }, undefined);
-            }
-            else if (inputs.z_debug_forceOpenState && !state.showPopoverResult) {
-                triggerPopover({ emitEvent: false, open: true }, undefined);
-            }
-        }
-        const horizontalPositionStyle = state.showPopoverResult
-            ? state.showPopoverResult.popRight
-                ? css `
-                      width: ${state.showPopoverResult.positions.diff.rootLeftToContainerRight}px;
-                      left: anchor(--popover-trigger left);
-                      align-items: flex-start;
-                  `
-                : css `
-                      width: ${state.showPopoverResult.positions.diff.rootRightToContainerLeft}px;
-                      right: anchor(--popover-trigger right);
-                      /* Fallback for Firefox and Safari that don't yet support anchor() */
-                      right: ${state.showPopoverResult.positions.diff.right}px;
-                      align-items: flex-end;
-                  `
-            : css `
-                  display: none;
-              `;
-        const verticalPositionStyle = state.showPopoverResult
-            ? state.showPopoverResult.popDown
-                ? css `
-                      top: anchor(--popover-trigger bottom);
-                      height: ${state.showPopoverResult.positions.diff.bottom}px;
-                      flex-direction: column;
-                  `
-                : css `
-                      bottom: anchor(--popover-trigger top);
-                      height: ${state.showPopoverResult.positions.diff.top}px;
-                      flex-direction: column-reverse;
-                  `
-            : css `
-                  display: none;
-              `;
-        /**
-         * These styles do _not_ account for window resizing while the menu is open. I decided this
-         * was not a major enough problem to tackle. If it becomes major enough in the future,
-         * you'll need to hook into a window _or_ container resize listener inside `PopoverManager`
-         * and emit a new `ShowPopoverResult` instance when it changes.
-         *
-         * Currently, the popover will simply close when the window is resized.
-         */
-        const positionerStyles = css `
-            ${verticalPositionStyle}
-            ${horizontalPositionStyle}
-        `;
-        function respondToClick(event) {
-            triggerPopover({
-                emitEvent: true,
-                open: !state.showPopoverResult,
-            }, event);
-        }
-        return html `
-            <div class="wrapper">
-                <button
-                    ?disabled=${!!inputs.isDisabled}
-                    class="dropdown-trigger"
-                    role="listbox"
-                    aria-expanded=${!!state.showPopoverResult}
-                    ${listen('keydown', (event) => {
-            if (!state.showPopoverResult && event.code.startsWith('Arrow')) {
-                triggerPopover({ emitEvent: true, open: true }, event);
-            }
-        })}
-                    ${listen('click', (event) => {
-            /**
-             * Detail is 0 if it was a keyboard key (like Enter) that triggered this
-             * click.
-             */
-            if (event.detail === 0) {
-                respondToClick(event);
-            }
-        })}
-                    ${listen('mousedown', (event) => {
-            /** Ignore any clicks that aren't the main button. */
-            if (event.button === 0) {
-                respondToClick(event);
-            }
-        })}
-                >
-                    <slot name=${slotNames.trigger}></slot>
-                </button>
-                <div
-                    popover="manual"
-                    style=${positionerStyles}
-                    ${onDomRendered((popoverElement) => {
-            assert.instanceOf(popoverElement, HTMLElement);
-            if (state.showPopoverResult) {
-                popoverElement.showPopover();
-            }
-            else {
-                popoverElement.hidePopover();
-            }
-        })}
-                >
-                    ${renderIf(!!state.showPopoverResult, html `
-                            <slot name=${slotNames.popover}></slot>
-                        `)}
-                </div>
-            </div>
-        `;
-    },
-});