@momentum-ui/web-components 2.22.16 → 2.23.0

package/dist/types/components/popover/Popover.stack.d.ts

@@ -0,0 +1,45 @@
+import { type Popover } from "./Popover";
+/**
+ * Manages a stack of popovers to control their order and lifecycle.
+ * This class allows adding, removing, and retrieving popovers
+ * while maintaining their stacking behavior.
+ *
+ */
+declare class PopoverStack {
+    /**
+     * Stack to maintain the order of popovers
+     * @internal
+     */
+    private stack;
+    /**
+     * Adds a popover to the stack
+     *
+     * @param popover - Popover instance
+     */
+    push(popover: Popover): void;
+    /**
+     * Removes the last popover from the stack
+     *
+     * @returns The last popover in the stack
+     */
+    pop(): Popover | undefined;
+    /**
+     * Returns the last popover in the stack
+     * without removing it
+     *
+     * @returns The last popover in the stack
+     */
+    peek(): Popover | undefined;
+    /**
+     * Removes a popover from the stack
+     *
+     * @param popover - Popover instance
+     */
+    remove(popover: Popover): void;
+    /**
+     * Clears the stack
+     */
+    clear(): void;
+}
+export declare const popoverStack: PopoverStack;
+export {};

package/dist/types/components/popover/Popover.types.d.ts

@@ -1,8 +1,20 @@
+import { COLOR, POPOVER_PLACEMENT, POPOVER_STRATEGY, TRIGGER } from "./Popover.constants";
+export type ValueOf<T> = T[keyof T];
+type PopoverPlacement = ValueOf<typeof POPOVER_PLACEMENT>;
+type PopoverColor = ValueOf<typeof COLOR>;
+type PopoverTrigger = ValueOf<typeof TRIGGER> | `${ValueOf<typeof TRIGGER>} ${ValueOf<typeof TRIGGER>}`;
+type PopoverStrategy = ValueOf<typeof POPOVER_STRATEGY>;
 export declare const Placement: readonly ["auto", "auto-start", "auto-end", "left-start", "left", "left-end", "right-start", "right", "right-end", "top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"];
-export declare const ARROW_HEIGHT = 16;
+interface Events {
+    onShownEvent: Event;
+    onHiddenEvent: Event;
+    onCreatedEvent: Event;
+    onDestroyedEvent: Event;
+}
 export declare const Strategy: readonly ["fixed", "absolute"];
 export declare const PopoverRole: readonly ["dialog", "menu", "tooltip"];
 export declare const Triggers: readonly ["click", "mouseenter", "manual"];
 export type PlacementType = (typeof Placement)[number];
 export type StrategyType = (typeof Strategy)[number];
 export type PopoverRoleType = (typeof PopoverRole)[number];
+export type { Events, PopoverColor, PopoverPlacement, PopoverStrategy, PopoverTrigger };

package/dist/types/components/popover/Popover.utils.d.ts

@@ -0,0 +1,63 @@
+import { type Popover } from "./Popover";
+export declare class PopoverUtils {
+    /** @internal */
+    private readonly popover;
+    /** @internal */
+    private arrowPixelChange;
+    /** @internal */
+    private originalParent;
+    /** @internal */
+    private originalNextSibling;
+    constructor(popover: Popover);
+    /**
+     * Parses the delay string and sets the open and close delay values.
+     * If the delay string is invalid, the delay is set to 0.
+     * @returns An array containing the open and close delay values.
+     * @throws An error if the delay value is invalid.
+     */
+    setupDelay(): number[];
+    /**
+     * Sets up the hover bridge for the popover.
+     * The hover bridge is used to prevent the popover from closing when the mouse is over the popover.
+     *
+     * @param placement - The placement of the popover.
+     */
+    setupHoverBridge(placement: string): void;
+    /**
+     * If the `appendTo` property is set, finds the corresponding
+     * DOM element by its ID, and appends this popover as a child of that element when opened.
+     * When closed, returns to original position.
+     * @param isOpen Whether the popover is being opened (true) or closed (false)
+     */
+    handleAppendTo(isOpen: boolean): void;
+    /**
+     * Sets up the accessibility attributes for the popover.
+     */
+    setupAccessibility(): void;
+    /**
+     * Updates the aria-haspopup attribute on the trigger element.
+     */
+    updateAriaHasPopupAttribute(): void;
+    /**
+     * Updates the aria-expanded attribute on the trigger element.
+     */
+    updateAriaExpandedAttribute(): void;
+    /**
+     * Updates the arrow style based on the arrow data and placement.
+     *
+     * @param arrowData - The arrow data x and y.
+     * @param placement - The placement of the popover.
+     */
+    updateArrowStyle(arrowData: {
+        x?: number;
+        y?: number;
+    }, placement: string): void;
+    /**
+     * Updates the popover style based on the x and y position.
+     *
+     * @param x - The x position.
+     * @param y - The y position.
+     */
+    updatePopoverStyle(x: number, y: number): void;
+    createBackdrop(): void;
+}

package/dist/types/index.d.ts

@@ -81,3 +81,4 @@ export { ToggleSwitch } from "./components/toggle-switch/ToggleSwitch";
 export { Tooltip } from "./components/tooltip/Tooltip";
 export { iconUrlManager } from "./managers/IconUrlManager";
 export { ThemeManager, themeManager } from "./managers/ThemeManager";
+export type { Events, PopoverColor, PopoverPlacement, PopoverStrategy, PopoverTrigger } from "./components/popover/Popover.types";

package/dist/types/utils/helpers.d.ts

@@ -16,3 +16,5 @@ export declare function debounce<T>(func: Function, wait: number, immediate?: bo
 export declare const throttle: (fn: (...args: any[]) => unknown, delay?: number) => (...args: any[]) => void;
 export declare function closestElement(selector: string, base: HTMLElement): HTMLElement | null;
 export declare function getElementSafe<T>(elements: T[], index: number): T | undefined;
+export declare function querySelectorDeep(selector: string, base?: HTMLElement | Document | ShadowRoot): Element | null;
+export declare function getElementByIdDeep(id: string, base?: HTMLElement | Document | ShadowRoot): Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.22.16",
+  "version": "2.23.0",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",
@@ -15,6 +15,7 @@
     "@interactjs/utils": "1.10.3",
     "@momentum-design/icons": "0.19.0",
     "@popperjs/core": "^2.11.8",
+    "@floating-ui/dom": "^1.7.0",
     "country-codes-list": "1.6.8",
     "country-flags-svg": "1.1.4",
     "dompurify": "^3.2.4",

package/dist/4663.js

@@ -1 +0,0 @@
-"use strict";(self["momentum-web-components-[id]"]=self["momentum-web-components-[id]"]||[]).push([[4663,5211],{35211:(o,r,e)=>{e.d(r,{KC:()=>p});const p=16},50325:(o,r,e)=>{e.d(r,{A:()=>p});const p=e(41488).css`.md-popover{box-sizing:border-box;position:relative;color:var(--popover-text-color);--popover-variant-border-color:var(--popover-border-color);--popover-variant-bg-color:var(--popover-bg-color)}.md-popover.inverted{color:var(--popover-inverted-text-color);--popover-variant-border-color:var(--popover-inverted-border-color);--popover-variant-bg-color:var(--popover-inverted-bg-color)}.md-popover *{box-sizing:inherit}.md-popover .popover-container{filter:drop-shadow(0 0 1px rgba(0, 0, 0, .12)) drop-shadow(0 24px 48px rgba(0, 0, 0, .2));box-sizing:border-box;display:none;position:absolute;z-index:1000;background-color:var(--popover-variant-bg-color);border:1px solid var(--popover-variant-border-color);border-radius:.5rem;padding:.75rem;min-height:24px;min-width:14px;max-width:292px}.md-popover .popover-container[data-show]{display:flex}.md-popover .popover-content{display:flex;justify-content:space-around;width:100%;flex-grow:1;font-size:1rem;font-weight:400;line-height:1.5rem}.md-popover .cancel-icon-button{position:absolute;right:.75rem;top:.75rem;padding-left:.5rem;width:1.25rem;height:1.25rem;cursor:pointer}.md-popover .popover-arrow{position:absolute;width:0;height:0;visibility:hidden}.md-popover .popover-arrow::before{content:"";position:absolute;width:16px;height:16px;background:var(--popover-variant-bg-color);border:1px solid var(--popover-variant-border-color);transform:rotate(45deg);visibility:visible}.popover-container[data-popper-placement^=top]>.popover-arrow{bottom:0}.popover-container[data-popper-placement^=top]>.popover-arrow::before{left:calc(50% - 8px);bottom:-9px;border-top:none;border-left:none;border-bottom-right-radius:3px}.popover-container[data-popper-placement^=bottom]>.popover-arrow{top:0}.popover-container[data-popper-placement^=bottom]>.popover-arrow::before{left:calc(50% - 8px);top:-9px;border-bottom:none;border-right:none;border-top-left-radius:3px}.popover-container[data-popper-placement^=right]>.popover-arrow{left:0}.popover-container[data-popper-placement^=right]>.popover-arrow::before{left:-9px;top:calc(50% - 8px);border-right:none;border-top:none;border-bottom-left-radius:3px}.popover-container[data-popper-placement^=left]>.popover-arrow{right:0}.popover-container[data-popper-placement^=left]>.popover-arrow::before{right:-9px;border-bottom:none;border-left:none;top:calc(50% - 8px);border-top-right-radius:3px}`}}]);