@muraldevkit/ui-toolkit 4.66.0-dev-7XJy.1 → 4.66.0-dev-avUr.1

package/dist/esm/hooks/useTriggerPosition/utilities.js

@@ -0,0 +1,254 @@
+const screenOffset = 16;
+/**
+ * Calculates the position of the menu based on alignment and viewport constraints.
+ *
+ * @param {Alignment} menuAlign - The alignment configuration for the menu.
+ * @param {number} offset - The offset distance between the menu and the trigger.
+ * @param {DOMRect} elementRect - The bounding rectangle of the menu element.
+ * @param {DOMRect} [triggerRect] - The bounding rectangle of the trigger element.
+ * @param {boolean} [disableFlipping] - If true, prevents flipping to the opposite side when overflowing.
+ * @returns {Position} The calculated position of the menu.
+ */
+export const getPosition = (menuAlign, offset, elementRect, triggerRect, disableFlipping = false) => {
+    var _a;
+    const screenWidth = window.innerWidth;
+    const screenHeight = window.innerHeight;
+    if (!triggerRect) {
+        return calculateCustomPosition(elementRect, menuAlign);
+    }
+    const position = menuAlign.position;
+    const align = (_a = menuAlign.align) !== null && _a !== void 0 ? _a : 'center';
+    switch (position) {
+        case 'left':
+        case 'right':
+            return positionHorizontal(position, align, offset, elementRect, triggerRect, screenWidth, screenHeight, disableFlipping);
+        case 'top':
+        case 'bottom':
+            return positionVertical(position, align, offset, elementRect, triggerRect, screenWidth, screenHeight, disableFlipping);
+        default:
+            return calculateCustomPosition(elementRect, menuAlign);
+    }
+};
+/**
+ * Calculates left/right placement with vertical alignment and screen overflow checks.
+ * Flips the menu to the opposite side if it overflows the screen, unless flipping is disabled.
+ *
+ * @param {'left' | 'right'} position - The horizontal position ('left' or 'right').
+ * @param {Alignment['align']} align - The vertical alignment ('start', 'end', or 'center').
+ * @param {number} offset - The offset distance between the menu and the trigger.
+ * @param {DOMRect} elementRect - The bounding rectangle of the menu element.
+ * @param {DOMRect} triggerRect - The bounding rectangle of the trigger element.
+ * @param {number} screenWidth - The width of the viewport.
+ * @param {number} screenHeight - The height of the viewport.
+ * @param {boolean} disableFlipping - Whether to disable flipping logic.
+ * @returns {Position} The calculated position of the menu.
+ */
+const positionHorizontal = (position, align, offset, elementRect, triggerRect, screenWidth, screenHeight, disableFlipping) => {
+    const isLeft = position === 'left';
+    let flipped = false;
+    let containerSide = isLeft
+        ? triggerRect.left - elementRect.width - offset
+        : triggerRect.right + offset;
+    const overflowsLeft = isOverflowingLeft(containerSide);
+    const overflowsRight = isOverflowingRight(containerSide, elementRect.width, screenWidth);
+    // Flip to opposite side if menu overflows but fits on the other side
+    if (!disableFlipping) {
+        if (isLeft && overflowsLeft) {
+            const rightSide = triggerRect.right + offset;
+            if (!isOverflowingRight(rightSide, elementRect.width, screenWidth)) {
+                containerSide = rightSide;
+                flipped = true;
+            }
+        }
+        else if (!isLeft && overflowsRight) {
+            const leftSide = triggerRect.left - elementRect.width - offset;
+            if (!isOverflowingLeft(leftSide)) {
+                containerSide = leftSide;
+                flipped = true;
+            }
+        }
+    }
+    let top = calculateVerticalPosition(triggerRect, elementRect, align);
+    top = adjustForVerticalBounds(top, elementRect, screenHeight);
+    return { flipped, left: containerSide, top };
+};
+/**
+ * Calculates top/bottom placement with horizontal alignment and screen overflow checks.
+ * Flips the menu to the opposite side if it overflows the screen, unless flipping is disabled.
+ *
+ * @param {'top' | 'bottom'} position - The vertical position ('top' or 'bottom').
+ * @param {Alignment['align']} align - The horizontal alignment ('start', 'end', or 'center').
+ * @param {number} offset - The offset distance between the menu and the trigger.
+ * @param {DOMRect} elementRect - The bounding rectangle of the menu element.
+ * @param {DOMRect} triggerRect - The bounding rectangle of the trigger element.
+ * @param {number} screenWidth - The width of the viewport.
+ * @param {number} screenHeight - The height of the viewport.
+ * @param {boolean} disableFlipping - Whether to disable flipping logic.
+ * @returns {Position} The calculated position of the menu.
+ */
+const positionVertical = (position, align, offset, elementRect, triggerRect, screenWidth, screenHeight, disableFlipping) => {
+    const isTop = position === 'top';
+    let flipped = false;
+    let containerSide = isTop
+        ? triggerRect.top - elementRect.height - offset
+        : triggerRect.bottom + offset;
+    const overflowsTop = isOverflowingTop(containerSide);
+    const overflowsBottom = isOverflowingBottom(containerSide, elementRect.height, screenHeight);
+    // Flip to opposite side if menu overflows but fits on the other side
+    if (!disableFlipping) {
+        if (isTop && overflowsTop) {
+            const bottomSide = triggerRect.bottom + offset;
+            if (!isOverflowingBottom(bottomSide, elementRect.height, screenHeight)) {
+                containerSide = bottomSide;
+                flipped = true;
+            }
+        }
+        else if (!isTop && overflowsBottom) {
+            const topSide = triggerRect.top - elementRect.height - offset;
+            if (!isOverflowingTop(topSide)) {
+                containerSide = topSide;
+                flipped = true;
+            }
+        }
+    }
+    const left = calculateHorizontalPosition(triggerRect, elementRect, align, screenWidth);
+    return { flipped, left, top: containerSide };
+};
+/**
+ * Aligns menu horizontally (used when menu is vertically positioned).
+ *
+ * @param {DOMRect} triggerRect - The bounding rectangle of the trigger element.
+ * @param {DOMRect} elementRect - The bounding rectangle of the menu element.
+ * @param {'start' | 'end' | 'center'} align - The horizontal alignment.
+ * @param {number} screenWidth - The width of the viewport.
+ * @returns {number} The calculated horizontal position.
+ */
+const calculateHorizontalPosition = (triggerRect, elementRect, align, screenWidth) => {
+    let position;
+    switch (align) {
+        case 'start':
+            position = triggerRect.left;
+            break;
+        case 'end':
+            position = triggerRect.right - elementRect.width;
+            break;
+        default:
+            position = triggerRect.left + (triggerRect.width - elementRect.width) / 2;
+            break;
+    }
+    // Clamp within screen
+    if (position < screenOffset)
+        return screenOffset;
+    if (position + elementRect.width > screenWidth - screenOffset) {
+        return screenWidth - elementRect.width - screenOffset;
+    }
+    return position;
+};
+/**
+ * Aligns menu vertically (used when menu is horizontally positioned).
+ *
+ * @param {DOMRect} triggerRect - The bounding rectangle of the trigger element.
+ * @param {DOMRect} elementRect - The bounding rectangle of the menu element.
+ * @param {'start' | 'end' | 'center'} align - The vertical alignment.
+ * @returns {number} The calculated vertical position.
+ */
+const calculateVerticalPosition = (triggerRect, elementRect, align) => {
+    switch (align) {
+        case 'start':
+            return triggerRect.top;
+        case 'end':
+            return triggerRect.bottom - elementRect.height;
+        default:
+            return triggerRect.top + (triggerRect.height - elementRect.height) / 2;
+    }
+};
+/**
+ * Calculates position for a menu that uses an explicit custom position.
+ *
+ * @param {DOMRect} elementRect - The bounding rectangle of the menu element.
+ * @param {Alignment} menuAlign - The alignment configuration for the menu.
+ * @returns {Position} The calculated custom position of the menu.
+ */
+const calculateCustomPosition = (elementRect, menuAlign) => {
+    var _a, _b, _c, _d;
+    const screenHeight = window.innerHeight;
+    const screenWidth = window.innerWidth;
+    const left = (_b = (_a = menuAlign.customPosition) === null || _a === void 0 ? void 0 : _a.left) !== null && _b !== void 0 ? _b : 0;
+    const top = (_d = (_c = menuAlign.customPosition) === null || _c === void 0 ? void 0 : _c.top) !== null && _d !== void 0 ? _d : 0;
+    const adjusted = adjustCustomScreenBounds(left, top, elementRect, screenWidth, screenHeight);
+    return Object.assign(Object.assign({}, adjusted), { flipped: false });
+};
+/**
+ * Adjusts vertical position to stay within screen height.
+ *
+ * @param {number} top - The initial vertical position.
+ * @param {DOMRect} elementRect - The bounding rectangle of the menu element.
+ * @param {number} screenHeight - The height of the viewport.
+ * @returns {number} The adjusted vertical position.
+ */
+const adjustForVerticalBounds = (top, elementRect, screenHeight) => {
+    let adjustedTop = top;
+    if (isOverflowingTop(adjustedTop)) {
+        adjustedTop = screenOffset;
+    }
+    if (isOverflowingBottom(adjustedTop, elementRect.height, screenHeight)) {
+        adjustedTop = screenHeight - elementRect.height - screenOffset;
+    }
+    // If the menu is taller than the screen height minus offset, pin it to the top offset
+    if (elementRect.height + 2 * screenOffset > screenHeight) {
+        adjustedTop = screenOffset;
+    }
+    return adjustedTop;
+};
+/**
+ * Ensures menu position stays within screen bounds.
+ *
+ * @param {number} left - The initial horizontal position.
+ * @param {number} top - The initial vertical position.
+ * @param {DOMRect} elementRect - The bounding rectangle of the menu element.
+ * @param {number} screenWidth - The width of the viewport.
+ * @param {number} screenHeight - The height of the viewport.
+ * @returns {Position} The adjusted position of the menu.
+ */
+const adjustCustomScreenBounds = (left, top, elementRect, screenWidth, screenHeight) => {
+    const adjustedLeft = Math.min(Math.max(left, screenOffset), screenWidth - elementRect.width - screenOffset);
+    let adjustedTop = Math.max(top, screenOffset);
+    if (adjustedTop + elementRect.height > screenHeight - screenOffset) {
+        adjustedTop = screenHeight - elementRect.height - screenOffset;
+    }
+    if (elementRect.height + 2 * screenOffset > screenHeight)
+        adjustedTop = screenOffset;
+    return { left: adjustedLeft, top: adjustedTop };
+};
+/**
+ * Checks if the menu overflows the left side of the screen.
+ *
+ * @param {number} left - The left position of the menu.
+ * @returns {boolean} True if the menu overflows the left side, false otherwise.
+ */
+const isOverflowingLeft = (left) => left < screenOffset;
+/**
+ * Checks if the menu overflows the right side of the screen.
+ *
+ * @param {number} left - The left position of the menu.
+ * @param {number} width - The width of the menu.
+ * @param {number} screenWidth - The width of the viewport.
+ * @returns {boolean} True if the menu overflows the right side, false otherwise.
+ */
+const isOverflowingRight = (left, width, screenWidth) => left + width > screenWidth - screenOffset;
+/**
+ * Checks if the menu overflows the top side of the screen.
+ *
+ * @param {number} top - The top position of the menu.
+ * @returns {boolean} True if the menu overflows the top side, false otherwise.
+ */
+const isOverflowingTop = (top) => top < screenOffset;
+/**
+ * Checks if the menu overflows the bottom side of the screen.
+ *
+ * @param {number} top - The top position of the menu.
+ * @param {number} height - The height of the menu.
+ * @param {number} screenHeight - The height of the viewport.
+ * @returns {boolean} True if the menu overflows the bottom side, false otherwise.
+ */
+const isOverflowingBottom = (top, height, screenHeight) => top + height > screenHeight - screenOffset;

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './utils';
+export * from './contexts';
+export * from './hooks';

package/dist/esm/styles/shared/a11y-helpers/a11y.global.css

@@ -0,0 +1,10 @@
+.mrl-visually-hidden {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}

package/dist/esm/utils/checkInvalidAttributes/index.js

@@ -0,0 +1,18 @@
+const NOT_ALLOWED = ['class', 'className', 'style'];
+/**
+ * Checks attrs object for invalid properties and provides a warning
+ *
+ * @param {AttrsObject} attrs - attrs object from a component
+ */
+export const checkInvalidAttributes = (attrs) => {
+    if (!attrs)
+        return;
+    const isLocal = window.location.hostname === 'localhost' || window.location.hostname.includes('localhost');
+    if (isLocal) {
+        const found = Object.keys(attrs).filter((prop) => NOT_ALLOWED.includes(prop));
+        if (found.length > 0) {
+            const message = `UI Toolkit Warning: The following properties are not allowed in the attrs object: ${found.join(', ')}. Please use the appropriate component prop instead.`;
+            console.warn(message);
+        }
+    }
+};

package/dist/esm/utils/commonProps/index.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/dataQa/index.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/findAdjacentInteractiveElement/findAdjacentInteractiveElement.js

@@ -0,0 +1,33 @@
+/**
+ * Find the interactive element immediately before or after a reference element
+ *
+ * @param ref - The reference element
+ * @param direction - The direction to search in
+ * @returns The interactive element or null if none is found
+ */
+export const findAdjacentInteractiveElement = (ref, direction = 'next') => {
+    if (!(ref === null || ref === void 0 ? void 0 : ref.current))
+        return null;
+    const interactiveElements = [
+        'a[href]',
+        'button',
+        'input:not([type="hidden"])',
+        'select',
+        'textarea',
+        '[tabindex]:not([tabindex="-1"])'
+    ];
+    const elements = Array.from(document.querySelectorAll(interactiveElements.join(',')));
+    const index = elements.indexOf(ref.current);
+    // we didn't find any elements, don't return anything
+    if (index === -1)
+        return null;
+    // we found something! Let's return it based on the direction
+    // Check the direction, make sure we're not out of bounds, and boom, we have our element
+    if (direction === 'next' && index + 1 < elements.length) {
+        return elements[index + 1];
+    }
+    else if (direction === 'previous' && index - 1 >= 0) {
+        return elements[index - 1];
+    }
+    return null;
+};

package/dist/esm/utils/findAdjacentInteractiveElement/index.js

@@ -0,0 +1 @@
+export * from './findAdjacentInteractiveElement';

package/dist/esm/utils/frameDebounce/index.js

@@ -0,0 +1,33 @@
+/**
+ * @description Creates a wrapper for request animation frame that helps a little with performance this helps us only animate current frame reducing in jumps/tearing on slow devices.
+ */
+export const FrameDebounce = class FrameDebounce {
+    /**
+     * constructor FrameDebounce
+     */
+    constructor() {
+        /**
+         * debounce a callback wrapped in animation frame.
+         *
+         * @param callback callback to call after frame runs
+         */
+        this.debounce = (callback) => {
+            if (this.frame)
+                this.cancel();
+            // only animate current frame near complete reduction in jumps/tearing on slow devices.
+            this.frame = requestAnimationFrame(() => {
+                this.frame = null;
+                callback === null || callback === void 0 ? void 0 : callback();
+            });
+        };
+        /**
+         * cancel our frame.
+         */
+        this.cancel = () => {
+            if (this.frame) {
+                cancelAnimationFrame(this.frame);
+            }
+        };
+        this.frame = null;
+    }
+};

package/dist/esm/utils/getCamelCase/getCamelCase.js

@@ -0,0 +1,18 @@
+/**
+ * Takes a string and returns a camelCase version of the string
+ *
+ * @param {string} str - a string to set to camelCase
+ * @returns {string} - a string with special characters spaces removed, where words after a space are Uppercase leading
+ */
+export const getCamelCase = (str) => {
+    // remove special characters from the string
+    const noSpecialChars = str.trim()
+        .replace(/[-_]+/g, ' ')
+        .replace(/[`"',.;:?!@#$%^&*()~[\]{}|/\\<>]+/g, '');
+    return noSpecialChars.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, (match, index) => {
+        if (+match === 0) {
+            return "";
+        }
+        return index === 0 ? match.toLowerCase() : match.toUpperCase();
+    });
+};

package/dist/esm/utils/getCamelCase/index.js

@@ -0,0 +1,2 @@
+import { getCamelCase } from './getCamelCase';
+export { getCamelCase };

package/dist/esm/utils/getScrollableContainer/getScrollableContainer.js

@@ -0,0 +1,57 @@
+const SCROLLABLE_VALUES = ['auto', 'scroll', 'overlay'];
+/**
+ * Determines if an element can scroll on the requested axis.
+ *
+ * @param element - Candidate element to test.
+ * @param axis - Axis to check ('vertical' | 'horizontal'), omit to get both.
+ * @param requireOverflow - When true, the element must currently overflow on the axis; when false, scrollable CSS is sufficient.
+ * @returns if the element can scroll on the requested axis.
+ */
+const isScrollable = (element, axis, requireOverflow) => {
+    var _a, _b;
+    const style = getComputedStyle(element);
+    const overflowX = (_a = style.overflowX) !== null && _a !== void 0 ? _a : style.overflow;
+    const overflowY = (_b = style.overflowY) !== null && _b !== void 0 ? _b : style.overflow;
+    const canScrollX = SCROLLABLE_VALUES.includes(overflowX);
+    const canScrollY = SCROLLABLE_VALUES.includes(overflowY);
+    const hasHorizontalOverflow = !requireOverflow || element.scrollWidth > element.clientWidth;
+    const hasVerticalOverflow = !requireOverflow || element.scrollHeight > element.clientHeight;
+    if (axis === 'horizontal') {
+        if (requireOverflow) {
+            return canScrollX && hasHorizontalOverflow;
+        }
+        else {
+            return canScrollX;
+        }
+    }
+    if (axis === 'vertical') {
+        if (requireOverflow) {
+            return canScrollY && hasVerticalOverflow;
+        }
+        else {
+            return canScrollY;
+        }
+    }
+    if (requireOverflow) {
+        return canScrollX && canScrollY && hasHorizontalOverflow && hasVerticalOverflow;
+    }
+    return canScrollX && canScrollY;
+};
+/**
+ * Get the scrollable container of an element.
+ *
+ * @param element - The element whose scrollable ancestor is needed.
+ * @param axis - Axis to check for scrollability ('vertical' | 'horizontal' | 'both' | 'all'). Defaults to 'vertical'.
+ * @param requireOverflow - When true, element must actually overflow on the axis; when false, only scroll styles are considered. Defaults to false.
+ * @returns The scrollable container for the specified axis.
+ */
+export const getScrollableContainer = (element, axis = 'vertical', requireOverflow = false) => {
+    let scrollableContainer = element.parentElement;
+    while (scrollableContainer) {
+        if (isScrollable(scrollableContainer, axis, requireOverflow)) {
+            return scrollableContainer;
+        }
+        scrollableContainer = scrollableContainer.parentElement;
+    }
+    return document.scrollingElement || document.body;
+};

package/dist/esm/utils/getScrollableContainer/index.js

@@ -0,0 +1 @@
+export * from './getScrollableContainer';

package/dist/esm/utils/hasHorizontalScroll/hasHorizontalScroll.js

@@ -0,0 +1,13 @@
+/**
+ * Test if an element has scrollable content in the horizontal axis
+ *
+ * @param element - the element that is scrollable
+ * @returns - object with hasScrollLeft and hasScrollRight properties
+ */
+export const hasHorizontalScroll = (element) => {
+    const { scrollLeft, offsetWidth, scrollWidth } = element;
+    return {
+        hasScrollLeft: scrollLeft > 0,
+        hasScrollRight: scrollLeft + offsetWidth < scrollWidth
+    };
+};

package/dist/esm/utils/hasHorizontalScroll/index.js

@@ -0,0 +1 @@
+export * from './hasHorizontalScroll';

package/dist/esm/utils/hasScrollContent/hasScrollContent.js

@@ -0,0 +1,12 @@
+/**
+ * Test if an element has scrollable content left
+ *
+ * @param {HTMLElement} element - the element you want to test
+ * @returns {HasScrollContentReturn} - object with hasScrollTop and hasScrollBottom properties
+ */
+export const hasScrollContent = (element) => {
+    return {
+        hasScrollBottom: Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) > 1,
+        hasScrollTop: element.scrollTop > 0
+    };
+};

package/dist/esm/utils/hasScrollContent/index.js

@@ -0,0 +1 @@
+export * from './hasScrollContent';

package/dist/esm/utils/index.js

@@ -0,0 +1,16 @@
+export * from './commonProps';
+export * from './findAdjacentInteractiveElement';
+export * from './hasHorizontalScroll';
+export * from './hasScrollContent';
+export * from './isElementScrollable';
+export * from './getCamelCase';
+export * from './getScrollableContainer';
+export * from './isImagePath';
+export * from './isImageUri';
+export * from './isObject';
+export * from './isElementAriaDisabled';
+export * from './setAttributes';
+export * from './noop';
+export * from './preventDefault';
+export * from './trapFocus';
+export * from './layers';

package/dist/esm/utils/isElementAriaDisabled/index.js

@@ -0,0 +1 @@
+export * from './isElementAriaDisabled';

package/dist/esm/utils/isElementAriaDisabled/isElementAriaDisabled.js

@@ -0,0 +1,12 @@
+/**
+ * Checks if an element has aria-disabled="true"
+ *
+ * @param {HTMLElement | null | undefined} element - The element to check for aria-disabled attribute
+ * @returns {boolean} - true if the element has aria-disabled="true", false otherwise
+ */
+export const isElementAriaDisabled = (element) => {
+    if (!element)
+        return false;
+    const ariaDisabled = element.getAttribute('aria-disabled');
+    return (ariaDisabled === null || ariaDisabled === void 0 ? void 0 : ariaDisabled.trim()) === 'true';
+};

package/dist/esm/utils/isElementScrollable/index.js

@@ -0,0 +1,9 @@
+/**
+ * Test if an element is scrollable
+ *
+ * @param {HTMLElement} element - the element you want to test
+ * @returns {boolean} - true if the element is scrollable, false if it is not scrollable
+ */
+export const isElementScrollable = (element) => {
+    return element.scrollHeight > element.clientHeight;
+};

package/dist/esm/utils/isImagePath/index.js

@@ -0,0 +1,20 @@
+import * as path from 'path-browserify';
+/**
+ * Checks if a passed image string is a valid URL
+ *
+ * @param {string} image - the image string being tested
+ * @returns {boolean} - if the image is an image URL
+ */
+export const isImagePath = (image) => {
+    try {
+        if (typeof image !== 'string')
+            return false;
+        const result = path.parse(image);
+        if (!result)
+            throw result;
+    }
+    catch (err) {
+        return false;
+    }
+    return true;
+};

package/dist/esm/utils/isImageUri/index.js

@@ -0,0 +1,18 @@
+/**
+ * Checks if a passed image string is an image URI
+ *
+ * @param {string} image - the image string being tested
+ * @returns {boolean} - if the image is an image URI
+ */
+export const isImageUri = (image) => {
+    try {
+        if (typeof image !== 'string')
+            return false;
+        // eslint-disable-next-line no-new
+        new URL(image);
+    }
+    catch (err) {
+        return false;
+    }
+    return true;
+};

package/dist/esm/utils/isObject/index.js

@@ -0,0 +1,2 @@
+import { isObject } from "./isObject";
+export { isObject };

package/dist/esm/utils/isObject/isObject.js

@@ -0,0 +1,13 @@
+/**
+ * Tests that a variable is actually an object and not an array  or null
+ * which can mistakenly be flagged as an object
+ *
+ * @param {Item} item - variable to tests
+ * @returns {boolean} - value if item is actually an Object
+ */
+export const isObject = (item) => {
+    if (item && Array.isArray(item)) {
+        return false;
+    }
+    return item instanceof Object;
+};

package/dist/esm/utils/isTouch/index.js

@@ -0,0 +1,8 @@
+/**
+ * Check if the device is a touch device
+ *
+ * @returns {boolean} - True if the device is a touch device
+ */
+export const isTouchDevice = () => {
+    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+};

package/dist/esm/utils/layers/index.js

@@ -0,0 +1,28 @@
+/* eslint-disable sort-keys */
+/**
+ * References to the different portal layers
+ */
+export const PORTAL_LAYERS = {
+    ROOT: { name: 'mrl-root-portal', zIndex: 50000 },
+    TOAST: { name: 'mrl-toast-portal', zIndex: 50001 },
+    MENU: { name: 'mrl-menu-portal', zIndex: 50002 },
+    POPOVER: { name: 'mrl-popover-portal', zIndex: 50003 },
+    POPOVER_MENU: { name: 'mrl-popover-menu-portal', zIndex: 50004 },
+    CALLOUT: { name: 'mrl-callout-portal', zIndex: 50004 },
+    MODAL: { name: 'mrl-modal', zIndex: 50005 },
+    SELECT: { name: 'mrl-select-portal', zIndex: 50006 },
+    TOOLTIP: { name: 'mrl-tooltip-portal', zIndex: 50007 },
+    TOP: { name: 'mrl-top-portal', zIndex: 50008 }
+};
+/**
+ * Get the current portal layer based on the provided element
+ *
+ * @param element - the element to check for the closest portal layer
+ * @returns the portal layer id
+ */
+export const getCurrentPortalLayer = (element) => {
+    if (!element)
+        return null;
+    const closestWithDataLayerId = element.closest('[data-layer-id]');
+    return closestWithDataLayerId ? closestWithDataLayerId.getAttribute('data-layer-id') : null;
+};

package/dist/esm/utils/noop/index.js

@@ -0,0 +1,8 @@
+/**
+ * No operation function to be used as a default callback.
+ *
+ * Example usage: in tests where there is a required handler, but we do not want to do anything.
+ * Better than passing a console log which clutters up our test output.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export const noop = () => { };

package/dist/esm/utils/preventDefault/index.js

@@ -0,0 +1 @@
+export * from './preventDefault';

package/dist/esm/utils/preventDefault/preventDefault.js

@@ -0,0 +1,9 @@
+/**
+ * Prevent default on event
+ *
+ * @param e - The event
+ */
+export const preventDefault = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+};

package/dist/esm/utils/setAttributes/index.js

@@ -0,0 +1,2 @@
+import { getUniqueId, setAttributes, setClasses } from './setAttributes';
+export { getUniqueId, setAttributes, setClasses };