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

package/dist/esm/components/tooltip/MrlTooltip/MrlTooltip.js

@@ -0,0 +1,148 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { getUniqueId } from '../../../utils';
+import { MrlTooltipDefaults } from '../constants';
+import { MrlTooltipContent } from '../MrlTooltipContent/MrlTooltipContent';
+import { curryHandlers } from '../utils';
+import classNames from 'classnames';
+import { MrlPortal } from '../../portal';
+import '../../../styles/shared/a11y-helpers/a11y.global.css';
+import { useTooltipPosition } from '../useTooltipPosition';
+import { useTransition, animated } from '@react-spring/web';
+import { PORTAL_LAYERS } from '../../../utils/layers';
+/**
+ * MrlTooltip Component
+ *
+ * This component is not displayed when rendering this component if the primary pointing device can’t hover. Examples include touchscreens and screens that use a basic drawing stylus.
+ * Pointing devices that can hover, but for which doing so is inconvenient and not part of the normal way they are used, also match this criteria. For example, a touchscreen where a long press is treated as hovering.
+ * @param {MrlTooltipProps} props - The props of the component
+ * @returns {HTMLElement} a configured Tooltip component
+ */
+export const MrlTooltip = React.memo((props) => {
+    const { children, clickToClose = true, disableTooltipHover = false, display: defaultDisplay = 'hide', text, attrs = {}, dataQa, kind = 'default', position = MrlTooltipDefaults.position || 'top', anchor = MrlTooltipDefaults.anchor, srAnnouncement = true, tooltipClass, tooltipContentClass } = props, rest = __rest(props, ["children", "clickToClose", "disableTooltipHover", "display", "text", "attrs", "dataQa", "kind", "position", "anchor", "srAnnouncement", "tooltipClass", "tooltipContentClass"]);
+    const [interaction, setInteraction] = React.useState('mouse');
+    const triggerRef = React.useRef(null);
+    const tooltipRef = React.useRef(null);
+    /**
+     * State value to determine if the tooltip should be displayed
+     */
+    const [display, setDisplay] = React.useState(defaultDisplay);
+    /**
+     * State value to determine if the tooltip should be displayed
+     */
+    const [id, setId] = React.useState('');
+    /**
+     * Event handler to show tooltip when the trigger is focused
+     */
+    const handleShowTooltip = React.useCallback(() => {
+        setDisplay('show');
+    }, []);
+    const handleFocus = React.useCallback(() => {
+        if (interaction === 'keyboard') {
+            handleShowTooltip();
+        }
+    }, [interaction, handleShowTooltip]);
+    /**
+     * Event handler to hide the tooltip on mouseout
+     */
+    const handleHideTooltip = () => {
+        setDisplay('hide');
+    };
+    /**
+     * Event handler to hide the tooltip when a user presses escape
+     * @param {React.KeyboardEvent} e Keyboard event
+     */
+    const handleKeyDown = (e) => {
+        if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
+            handleHideTooltip();
+        }
+    };
+    const handleSetKeyboardInteraction = (e) => {
+        if (e.key === 'Tab' || e.key === 'Enter' || e.key === ' ') {
+            setInteraction('keyboard');
+        }
+    };
+    const handlesetMouseInteraction = () => setInteraction('mouse');
+    /**
+     * Setup of the initial component attributes and events
+     */
+    React.useEffect(() => {
+        if (id === '')
+            setId(getUniqueId('mrl-tooltip'));
+    }, [id]);
+    React.useEffect(() => {
+        setDisplay(defaultDisplay);
+    }, [defaultDisplay]);
+    /**
+     * Setting the triggerRef to the trigger element
+     *
+     * We need to use 'querySelector' because we cannot pass a ref to the child object. There are
+     * some situations where the child component may not accept a ref, for example: a react router
+     * link is passed as a child. In older versions of react router you could not pass a ref to the
+     * component so this causes an issue.
+     */
+    React.useEffect(() => {
+        const trigger = document.querySelector(`[data-tooltip-id="${id}"]`);
+        triggerRef.current = trigger;
+    }, [id]);
+    React.useEffect(() => {
+        const currentTooltipRef = tooltipRef.current;
+        document.addEventListener('keydown', handleSetKeyboardInteraction);
+        document.addEventListener('mousedown', handlesetMouseInteraction);
+        if (!disableTooltipHover && currentTooltipRef) {
+            currentTooltipRef.addEventListener('mouseover', handleShowTooltip);
+            currentTooltipRef.addEventListener('mouseout', handleHideTooltip);
+        }
+        return () => {
+            if (!disableTooltipHover && currentTooltipRef) {
+                currentTooltipRef.removeEventListener('mouseover', handleShowTooltip);
+                currentTooltipRef.removeEventListener('mouseout', handleHideTooltip);
+            }
+            document.removeEventListener('keydown', handleSetKeyboardInteraction);
+            document.removeEventListener('mousedown', handlesetMouseInteraction);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [handleShowTooltip, tooltipRef.current]);
+    const positionStyles = useTooltipPosition(triggerRef, tooltipRef, {
+        align: anchor,
+        position: position
+    }, display === 'show', -1);
+    const inlineStyles = {
+        menu: {
+            left: positionStyles.left,
+            position: 'fixed',
+            top: positionStyles.top
+        }
+    };
+    const transitions = useTransition(display === 'show', {
+        config: { duration: display === 'show' ? 150 : 25 },
+        enter: { opacity: 1 },
+        from: { opacity: 0 },
+        leave: { opacity: 0 }
+    });
+    return (React.createElement(React.Fragment, null,
+        React.Children.map(children, (child, index) => {
+            if (index === 0 && React.isValidElement(child)) {
+                const _a = child.props, { className, onBlur, onFocus, onKeyDown, onMouseOver, onMouseOut, onMouseUp, children } = _a, otherProps = __rest(_a, ["className", "onBlur", "onFocus", "onKeyDown", "onMouseOver", "onMouseOut", "onMouseUp", "children"])
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                ;
+                return React.cloneElement(child, Object.assign(Object.assign(Object.assign(Object.assign({ 'aria-describedby': display === 'show' && srAnnouncement ? id : undefined, className: classNames(tooltipClass, className, 'mrl-tooltip-trigger', display === 'show' && 'mrl-tooltip-trigger--active'), onBlur: curryHandlers(onBlur, handleHideTooltip) }, (clickToClose && !disableTooltipHover
+                    ? { onMouseUp: curryHandlers(onMouseUp, handleHideTooltip) }
+                    : {})), { onFocus: curryHandlers(onFocus, handleFocus), onKeyDown: curryHandlers(onKeyDown, handleKeyDown), onMouseOut: curryHandlers(onMouseOut, handleHideTooltip), onMouseOver: curryHandlers(onMouseOver, handleShowTooltip) }), otherProps), { children, ['data-tooltip-id']: id }));
+            }
+            return child;
+        }),
+        React.createElement(MrlPortal, { id: PORTAL_LAYERS.TOOLTIP.name, layer: PORTAL_LAYERS.TOOLTIP, className: PORTAL_LAYERS.TOOLTIP.name, "data-qa": PORTAL_LAYERS.TOOLTIP.name }, transitions((style, item) => item && (React.createElement(animated.div, { ref: tooltipRef, style: Object.assign(Object.assign({}, inlineStyles.menu), style) },
+            React.createElement(MrlTooltipContent, Object.assign({}, rest, { attrs: attrs, anchor: anchor, dataQa: dataQa, kind: kind, id: id, position: position, text: text, tooltipContentClass: tooltipContentClass }))))))));
+});
+MrlTooltip.displayName = 'MrlTooltip';

package/dist/esm/components/tooltip/MrlTooltip/index.js

@@ -0,0 +1 @@
+export { MrlTooltip } from './MrlTooltip';

package/dist/esm/components/tooltip/MrlTooltipContent/MrlTooltipContent.global.css

@@ -0,0 +1,170 @@
+.mrl-tooltip-content {
+  --mrl-tooltip-background-color: var(--mrl-color-background-inverse);
+  --mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary);
+  --mrl-tooltip-border-radius: var(--mrl-border-radius-content-large);
+  --mrl-tooltip-font-size: var(--mrl-type-size-text-xsmall);
+  --mrl-tooltip-line-height: var(--mrl-type-line-height-text-xsmall);
+  --mrl-tooltip-padding: var(--mrl-spacing-02) var(--mrl-spacing-03);
+  --mrl-tooltip-arrow-size: 8px;
+  --mrl-tooltip-arrow-border-radius: 1px;
+  --mrl-tooltip-arrow-spacing: var(--mrl-spacing-06);
+  --mrl-tooltip-arrow-display-left-right: none;
+  --mrl-tooltip-trigger-offset: var(--mrl-spacing-03);
+}
+.mrl-tooltip-content--inverse {
+  --mrl-tooltip-background-color: var(--mrl-gray-80);
+  --mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary);
+}
+
+.mrl-tooltip-content {
+  background: var(--mrl-tooltip-background-color);
+  border-radius: var(--mrl-tooltip-border-radius);
+  color: var(--mrl-tooltip-text-color);
+  cursor: default;
+  display: flex;
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-tooltip-font-size);
+  font-weight: var(--mrl-type-weight-title-secondary);
+  gap: var(--mrl-spacing-02);
+  line-height: var(--mrl-tooltip-line-height);
+  max-width: calc(var(--mrl-spacing-09) * 7);
+  overflow-wrap: break-word;
+  padding: var(--mrl-tooltip-padding);
+  position: absolute;
+  transition-property: opacity;
+  white-space: normal;
+  width: max-content;
+  z-index: 900;
+}
+.mrl-tooltip-content.has-custom-render {
+  padding-right: var(--mrl-spacing-02);
+}
+
+.mrl-tooltip-content__hover {
+  background: transparent;
+  position: absolute;
+}
+
+.mrl-tooltip-content::after {
+  background: transparent;
+  border-bottom: 9.4339811321px solid var(--mrl-tooltip-background-color);
+  border-right: 9.4339811321px solid transparent;
+  content: "";
+  height: 0;
+  position: absolute;
+  transform: rotate(135deg);
+  width: 0;
+}
+
+.mrl-tooltip-content[data-position=top] {
+  bottom: 100%;
+  margin-bottom: var(--mrl-tooltip-trigger-offset);
+  right: 50%;
+  transform: translateX(50%);
+}
+.mrl-tooltip-content[data-position=top]::after {
+  border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
+  bottom: calc(var(--mrl-tooltip-arrow-size) * -1 / 2 + 1px);
+  left: calc(50% - var(--mrl-tooltip-arrow-size) / 2);
+  transform: rotate(315deg);
+}
+.mrl-tooltip-content[data-position=top] .mrl-tooltip-content__hover {
+  height: 10px;
+  left: 0;
+  top: 100%;
+  width: 100%;
+}
+
+.mrl-tooltip-content[data-anchor=start] {
+  left: 0;
+  right: initial;
+  transform: none;
+}
+.mrl-tooltip-content[data-anchor=start]::after {
+  left: var(--mrl-tooltip-arrow-spacing);
+}
+.mrl-tooltip-content[data-anchor=start].mrlIconButton--small-wrapper::after {
+  left: var(--mrl-spacing-04);
+}
+.mrl-tooltip-content[data-anchor=start].mrlIconButton--xsmall-wrapper::after {
+  left: var(--mrl-spacing-03);
+}
+
+.mrl-tooltip-content[data-anchor=end] {
+  right: 0;
+  transform: none;
+}
+.mrl-tooltip-content[data-anchor=end]::after {
+  left: auto;
+  right: var(--mrl-tooltip-arrow-spacing);
+}
+.mrl-tooltip-content[data-anchor=end].mrlIconButton--small-wrapper::after {
+  left: auto;
+  right: var(--mrl-spacing-04);
+}
+.mrl-tooltip-content[data-anchor=end].mrlIconButton--xsmall-wrapper::after {
+  left: auto;
+  right: var(--mrl-spacing-03);
+}
+
+.mrl-tooltip-content[data-position=bottom] {
+  margin-top: var(--mrl-tooltip-trigger-offset);
+  top: 100%;
+}
+.mrl-tooltip-content[data-position=bottom]::after {
+  border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
+  top: calc(var(--mrl-tooltip-arrow-size) * -1 / 2 + 1px);
+}
+.mrl-tooltip-content[data-position=bottom] .mrl-tooltip-content__hover {
+  height: 10px;
+  left: 0;
+  top: -10px;
+  width: 100%;
+}
+
+.mrl-tooltip-content[data-position=bottom][data-anchor=center] {
+  right: 50%;
+  transform: translateX(50%);
+}
+.mrl-tooltip-content[data-position=bottom][data-anchor=center]::after {
+  left: calc(50% - var(--mrl-tooltip-arrow-size) / 2);
+}
+
+.mrl-tooltip-content[data-position=left] {
+  left: initial;
+  margin-right: var(--mrl-tooltip-trigger-offset);
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.mrl-tooltip-content[data-position=left]::after {
+  border-top-right-radius: var(--mrl-tooltip-arrow-border-radius);
+  display: var(--mrl-tooltip-arrow-display-left-right);
+  right: calc(var(--mrl-tooltip-arrow-size) * -1 / 2 + 1px);
+  top: calc(50% - var(--mrl-tooltip-arrow-size) / 2);
+}
+.mrl-tooltip-content[data-position=left] .mrl-tooltip-content__hover {
+  height: 23px;
+  right: -10px;
+  top: 0;
+  width: 100%;
+}
+
+.mrl-tooltip-content[data-position=right] {
+  left: 100%;
+  margin-left: var(--mrl-tooltip-trigger-offset);
+  top: 50%;
+  transform: translateY(-50%);
+}
+.mrl-tooltip-content[data-position=right]::after {
+  border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
+  display: var(--mrl-tooltip-arrow-display-left-right);
+  left: calc(var(--mrl-tooltip-arrow-size) * -1 / 2 + 1px);
+  top: calc(50% - var(--mrl-tooltip-arrow-size) / 2);
+}
+.mrl-tooltip-content[data-position=right] .mrl-tooltip-content__hover {
+  height: 23px;
+  left: -10px;
+  top: 0;
+  width: 100%;
+}

package/dist/esm/components/tooltip/MrlTooltipContent/MrlTooltipContent.js

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import classnames from 'classnames';
+import { setAttributes, setClasses } from '../../../utils';
+import { MrlTooltipDefaults } from '../constants';
+import './MrlTooltipContent.global.css';
+/**
+ * MrlTooltipContent Component
+ *
+ * The tooltip content is the text that is displayed when the user hovers over the trigger.
+ * IMPORTANT: This component is not intended to be used directly, it should always be a child of MrlTooltip.
+ * @param {MrlTooltipContentProps} props - the props of the tooltip content
+ * @returns {HTMLElement} a configured Tooltip Content component
+ */
+export const MrlTooltipContent = (props) => {
+    const { anchor, attrs, dataQa, id, kind, position, text, tooltipContentClass, customRender } = props, rest = __rest(props, ["anchor", "attrs", "dataQa", "id", "kind", "position", "text", "tooltipContentClass", "customRender"]);
+    const attributes = setAttributes(attrs, MrlTooltipDefaults.attrs);
+    const classes = setClasses(attrs, {});
+    const tooltipClasses = classnames('mrl-tooltip-content', {
+        [`${classes}`]: classes !== undefined,
+        'has-custom-render': typeof customRender === 'function',
+        'mrl-tooltip-content--inverse': kind === 'inverse',
+        [`${tooltipContentClass}`]: tooltipContentClass !== undefined
+    });
+    return (React.createElement("div", Object.assign({}, rest, { "data-anchor": anchor, "data-position": position, "data-qa": dataQa, id: id, role: "tooltip" }, attributes, { className: tooltipClasses }),
+        customRender && typeof customRender === 'function' ? customRender(text) : text,
+        React.createElement("div", { className: "mrl-tooltip-content__hover" })));
+};

package/dist/esm/components/tooltip/MrlTooltipContent/index.js

@@ -0,0 +1 @@
+export { MrlTooltipContent } from './MrlTooltipContent';

package/dist/esm/components/tooltip/constants.js

@@ -0,0 +1,19 @@
+/**
+ * Defines all the values allowed for tooltip props.
+ * Used for Storybook and testing
+ */
+export const allowedMrlTooltipValues = {
+    anchors: ['start', 'center', 'end'],
+    positions: ['top', 'bottom', 'left', 'right'],
+    state: ['show', 'hide']
+};
+/**
+ * Default values for props on the Tooltip component;
+ * Shared between the component and Storybook
+ */
+export const MrlTooltipDefaults = {
+    anchor: 'center',
+    attrs: {},
+    position: 'right',
+    state: 'hide'
+};

package/dist/esm/components/tooltip/index.js

@@ -0,0 +1,2 @@
+export * from './MrlTooltip';
+export * from './constants';

package/dist/esm/components/tooltip/useTooltipPosition/constants.js

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

package/dist/esm/components/tooltip/useTooltipPosition/index.js

@@ -0,0 +1,116 @@
+import { useMemo, useState, useEffect, useCallback, useLayoutEffect } from 'react';
+import { calculatePosition, positionChanged } from './utilities';
+import debounce from 'lodash.debounce';
+/**
+ * A custom hook to calculate and manage the position of a tooltip element relative to its trigger element.
+ *
+ * @param {RefObject<HTMLElement>} triggerRef - Reference to the DOM element that triggers the menu.
+ * @param {RefObject<HTMLElement>} elementRef - Reference to the DOM element that is the menu.
+ * @param {TooltipPlacement} placement - The alignment configuration of the menu.
+ * @param {boolean} isElementVisible - Tells the hook if the element is visible. If false, the hook will not calculate the position.
+ * @param {number} tooltipOffset - The offset of the menu from the trigger element.
+ * @param {boolean} disable - Whether to disable the hook.
+ * @returns {Position} The calculated position of the menu element.
+ */
+export const useTooltipPosition = (triggerRef, elementRef, placement, isElementVisible = true, tooltipOffset = 10, disable = false) => {
+    const offset = tooltipOffset;
+    const [tooltipPosition, setTooltipPosition] = useState({ left: 0, top: 0 });
+    const alignment = useMemo(() => ({
+        align: placement.align,
+        position: placement.position
+    }), [placement.align, placement.position]);
+    const updatePosition = useCallback(() => {
+        var _a;
+        if (elementRef.current && isElementVisible) {
+            const triggerRect = (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const elementRect = elementRef.current.getBoundingClientRect();
+            const newPosition = calculatePosition(alignment, offset, elementRect, triggerRect);
+            // only update if we have a new position
+            setTooltipPosition((prevPosition) => {
+                if (prevPosition.left !== newPosition.left || prevPosition.top !== newPosition.top) {
+                    return newPosition;
+                }
+                return prevPosition;
+            });
+        }
+    }, [alignment, elementRef, isElementVisible, offset, triggerRef]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const debouncedUpdatePosition = useCallback(debounce(() => {
+        updatePosition();
+    }, 5), [updatePosition]);
+    useEffect(() => {
+        if (!disable) {
+            const currentElement = elementRef.current;
+            // We need to debounce the resize observer to prevent "resize loops"
+            // there are instances where the resize observer will trigger a resize event
+            // before the browser has painted which throws a loop of resize events
+            // and causes errors on the window
+            //
+            // The observers are purposefully using a different debounce than the event listeners
+            // as the observers need to be debounced to prevent loops, but updating the position
+            // needs to happen more immediately
+            const resizeObserver = new ResizeObserver(debounce(updatePosition));
+            const mutationObserver = new MutationObserver(debounce(updatePosition));
+            if (currentElement) {
+                resizeObserver.observe(currentElement);
+                mutationObserver.observe(currentElement, {
+                    attributeFilter: ['style', 'class'],
+                    attributes: true
+                });
+            }
+            if (isElementVisible) {
+                updatePosition();
+                window.addEventListener('resize', debouncedUpdatePosition);
+                window.addEventListener('scroll', debouncedUpdatePosition);
+            }
+            return () => {
+                if (currentElement) {
+                    resizeObserver.unobserve(currentElement);
+                    mutationObserver.disconnect();
+                }
+                window.removeEventListener('resize', debouncedUpdatePosition);
+                window.removeEventListener('scroll', debouncedUpdatePosition);
+            };
+        }
+    }, [
+        disable,
+        triggerRef,
+        elementRef,
+        alignment,
+        offset,
+        isElementVisible,
+        updatePosition,
+        debouncedUpdatePosition
+    ]);
+    useLayoutEffect(() => {
+        if (isElementVisible && !disable && elementRef.current && (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current)) {
+            // Recalculate position when the tooltip is first shown
+            updatePosition();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isElementVisible, updatePosition, disable, elementRef.current, triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current]);
+    /**
+     * This effect is used to track the position of the trigger element
+     * when the tooltip is visible. It will update the position of the tooltip
+     */
+    useEffect(() => {
+        if (!disable && isElementVisible && (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) && elementRef.current) {
+            let animationFrameId;
+            let prevRect;
+            const trackPosition = () => {
+                var _a;
+                const currentRect = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+                if (currentRect && (!prevRect || positionChanged(prevRect, currentRect))) {
+                    updatePosition();
+                    prevRect = currentRect;
+                }
+                animationFrameId = requestAnimationFrame(trackPosition);
+            };
+            animationFrameId = requestAnimationFrame(trackPosition);
+            return () => {
+                cancelAnimationFrame(animationFrameId);
+            };
+        }
+    }, [disable, isElementVisible, triggerRef, elementRef, updatePosition]);
+    return tooltipPosition;
+};

package/dist/esm/components/tooltip/useTooltipPosition/utilities.js

@@ -0,0 +1,67 @@
+/**
+ * Calculates the position of an element (e.g., a tooltip or menu) based on alignment and offset.
+ *
+ * @param alignment - Object containing position ('top', 'bottom', 'left', 'right') and anchor ('start', 'center', 'end').
+ * @param offset - Number of pixels to offset the positioned element.
+ * @param elementRect - Bounding rect of the element being positioned.
+ * @param triggerRect - Bounding rect of the trigger element.
+ * @returns {Position} An object with `left` and `top` coordinates for the element (keys sorted alphabetically).
+ */
+export const calculatePosition = (alignment, offset, elementRect, triggerRect) => {
+    if (!triggerRect) {
+        // fallback to (0,0) if no trigger is available
+        return { left: 0, top: 0 };
+    }
+    const { position } = alignment;
+    // For left/right positioned tooltips or menus, always center align vertically
+    // regardless of the provided `align` value
+    const anchor = position === 'left' || position === 'right' ? 'center' : alignment.align;
+    let top = 0;
+    let left = 0;
+    // Primary positioning based on side
+    switch (position) {
+        case 'top':
+            top = triggerRect.top - elementRect.height - offset;
+            break;
+        case 'bottom':
+            top = triggerRect.bottom + offset;
+            break;
+        case 'left':
+            left = triggerRect.left - elementRect.width - offset;
+            break;
+        case 'right':
+            left = triggerRect.right + offset;
+            break;
+    }
+    // Secondary alignment
+    switch (position) {
+        case 'top':
+        case 'bottom':
+            if (anchor === 'start') {
+                left = triggerRect.left;
+            }
+            else if (anchor === 'center') {
+                left = triggerRect.left + (triggerRect.width - elementRect.width) / 2;
+            }
+            else if (anchor === 'end') {
+                left = triggerRect.right - elementRect.width;
+            }
+            break;
+        case 'left':
+        case 'right':
+            // forced to center alignment vertically
+            top = triggerRect.top + (triggerRect.height - elementRect.height) / 2;
+            break;
+    }
+    return { left, top };
+};
+/**
+ * Determines if the position of an element has changed significantly.
+ *
+ * @param prev - The previous bounding rectangle of the element.
+ * @param next - The current bounding rectangle of the element.
+ * @returns {boolean} True if the position has changed by more than 0.5 pixels, false otherwise.
+ */
+export const positionChanged = (prev, next) => {
+    return Math.abs(prev.top - next.top) > 0.5 || Math.abs(prev.left - next.left) > 0.5;
+};

package/dist/esm/components/tooltip/utils.js

@@ -0,0 +1,17 @@
+/**
+ * Currying function to combine handlers from the parent and child components
+ *
+ * @template T - The type of the event handlers.
+ * @param {T | undefined} ogFunc - The original event handler. This parameter can be undefined.
+ * @param {T} newFunc - The new event handler.
+ * @returns {T} A function that, when invoked, calls both the original event handler (if it exists) and the new event handler.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const curryHandlers = (ogFunc, newFunc) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return ((...args) => {
+        if (ogFunc)
+            ogFunc(...args);
+        newFunc(...args);
+    });
+};

package/dist/esm/contexts/MrlTabContext/MrlTabContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+import { noop } from '../../utils';
+const initialContext = {
+    activeTab: '',
+    setActiveTab: noop
+};
+export const MrlTabContext = createContext(initialContext);

package/dist/esm/contexts/MrlTabContext/index.js

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

package/dist/esm/contexts/index.js

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

package/dist/esm/hooks/index.js

@@ -0,0 +1,5 @@
+export * from './useCoordinate';
+export * from './useBreakpoint';
+export * from './useElementDimensions';
+export * from './useHasFocusableDescendant';
+export * from './useScrollbarInfo';

package/dist/esm/hooks/useAutoClose/index.js

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

package/dist/esm/hooks/useAutoClose/useAutoClose.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+/**
+ * Hook that exposes a piece of state that allows components to close themselves after a delay
+ *
+ * @param shouldAutoClose - When false prevents automated close (e.g. can be used to prevent auto-dismissal of interactive elements, an accessibility anti-pattern)
+ * @param closeAfterMs - Delay in milliseconds before the component closes
+ * @param onClose - Callback to be called when component closes
+ * @returns [closed, setClosed] - a boolean tracking closed state, and a setter for that same state
+ */
+export const useAutoClose = function (shouldAutoClose = true, closeAfterMs = 3000, onClose) {
+    const [closed, setClosed] = React.useState(false);
+    const currentTimeout = React.useRef(null);
+    React.useEffect(() => {
+        // Reset current timeout when component mounts or when notification changes
+        if (currentTimeout.current) {
+            resetTimeout();
+        }
+        // Allowing autoClose when there are interactive elements in the toast is an anti-pattern
+        // and should be avoided. If autoClose is set to true and interactive elements exist, the
+        // toast will not close automatically.
+        if (shouldAutoClose) {
+            setClosed(false);
+            currentTimeout.current = setTimeout(() => {
+                setClosed(true);
+                // Handle onClose after the timeout is elapsed
+                if (onClose)
+                    onClose();
+            }, closeAfterMs);
+        }
+        return () => {
+            // Clear timeout when component unmounts
+            resetTimeout();
+        };
+    }, [shouldAutoClose, closeAfterMs, onClose]);
+    /** Resets the current timeout and `closed` to its initial value */
+    const resetTimeout = () => {
+        if (currentTimeout.current !== null) {
+            clearTimeout(currentTimeout.current);
+        }
+        setClosed(false);
+    };
+    return [closed, setClosed];
+};