@muraldevkit/ui-toolkit 4.67.0-dev-Vc0V.1 → 4.67.0

package/dist/components/tooltip/MrlTooltip/MrlTooltip.d.ts

@@ -45,13 +45,7 @@ interface MrlTooltipProps {
 /**
  * MrlTooltip Component
  *
- * Placement is handled entirely by CSS Anchor Positioning: the trigger exposes an
- * `anchor-name` and the portaled tooltip (`.mrl-tooltip-positioner`) attaches to it via
- * `position-anchor`/`position-area`, flipping near viewport edges via `position-try-fallbacks`.
- * Older browsers are covered by the `@oddbird/css-anchor-positioning` polyfill (see
- * `polyfill.ts`). This component owns only show/hide, hover, keyboard and accessibility.
- *
- * This component is not displayed when the primary pointing device can’t hover. Examples include touchscreens and screens that use a basic drawing stylus.
+ * 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

package/dist/components/tooltip/MrlTooltipContent/MrlTooltipContent.d.ts

@@ -1,8 +1,14 @@
 import * as React from 'react';
 import { AttrsObject } from '../../../utils';
-import { MrlTooltipVariant } from '../constants';
+import { MrlTooltipAnchor, MrlTooltipPosition, MrlTooltipVariant } from '../constants';
 import './MrlTooltipContent.global.scss';
 interface MrlTooltipContentProps {
+    /**
+     * The arrow position of the tooltip in relation to its trigger's content.
+     * Note, if the content is shorter than the width of the trigger, always use
+     * "center" to ensure the arrow does not become misaligned.
+     */
+    anchor: MrlTooltipAnchor;
     /**
      * Attributes that are applied to the component during the initial render.
      *
@@ -16,6 +22,8 @@ interface MrlTooltipContentProps {
     kind: MrlTooltipVariant;
     /** The id of the tooltip used for aria-describedby in the parent component */
     id?: string;
+    /** The placement of the tooltip in relation to its trigger */
+    position: MrlTooltipPosition;
     /** The tooltip content to display */
     text: string;
     /** A class to be applied ot the tooltip content */
@@ -27,8 +35,6 @@ interface MrlTooltipContentProps {
  * MrlTooltipContent Component
  *
  * The tooltip content is the text that is displayed when the user hovers over the trigger.
- * Placement (position/anchor) is owned by the `.mrl-tooltip-positioner` ancestor via CSS
- * anchor positioning, so this component only renders the visual box + hover bridge.
  * 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

package/dist/components/tooltip/useTooltipPosition/constants.d.ts

@@ -0,0 +1,9 @@
+import { TooltipAlignment, TooltipPosition } from '../constants';
+export interface TooltipPlacement {
+    align: TooltipAlignment;
+    position: TooltipPosition;
+}
+export interface Position {
+    top: number;
+    left: number;
+}

package/dist/components/tooltip/useTooltipPosition/index.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+import { TooltipPlacement, Position } from './constants';
+/**
+ * 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 declare const useTooltipPosition: (triggerRef: RefObject<HTMLElement> | undefined, elementRef: RefObject<HTMLElement>, placement: TooltipPlacement, isElementVisible?: boolean, tooltipOffset?: number, disable?: boolean) => Position;

package/dist/components/tooltip/useTooltipPosition/utilities.d.ts

@@ -0,0 +1,19 @@
+import { TooltipPlacement, Position } from './constants';
+/**
+ * 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 declare const calculatePosition: (alignment: TooltipPlacement, offset: number, elementRect: DOMRect, triggerRect?: DOMRect) => Position;
+/**
+ * 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 declare const positionChanged: (prev: DOMRect, next: DOMRect) => boolean;