@lidofinance/lido-app-ui 1.6.0 → 1.8.0

package/dist/esm/tooltip/Tooltip.mjs

@@ -1,20 +1,24 @@
-import { useRef, useState, useCallback, useEffect } from 'react';
-import { flushSync } from 'react-dom';
+import { useRef, useState, useId, useCallback, useLayoutEffect, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import cn from 'classnames';
 import styles from './Tooltip.module.css.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // Minimal distance between the tooltip and the viewport edge.
 const VIEWPORT_MARGIN = 16;
-// Distance between the anchor and the content for main (non-corner) positions.
-const POSITION_GAP = 15;
+// Visual gap between the anchor and the content.
+const MAIN_GAP = 8;
+const CORNER_GAP = 2;
+// Extra buffer used only to decide whether a position still "fits" — bigger
+// than the visual gap so a flip triggers before the bubble visually crowds the edge.
+const FIT_BUFFER = 15;
 const clampValue = (value, min, max) => Math.min(Math.max(value, min), Math.max(max, min));
 const getMaxWidth = width => `min(${width}px, calc(100vw - ${VIEWPORT_MARGIN * 2}px))`;
 
-// Measures the anchor and the (hidden but laid-out) content, then picks a
-// position/shift that keeps the bubble inside the viewport — flipping sides
-// when there isn't room, sliding along the cross axis otherwise.
-const getAdjustment = (position, anchor, content) => {
+// Measures the anchor and the content, then picks a position that keeps the
+// bubble inside the viewport — flipping sides when there isn't room, sliding
+// along the cross axis otherwise — and resolves it to fixed-position coordinates.
+const getAdjustment = (position, anchor, contentWidth, contentHeight) => {
   const viewportWidth = document.documentElement.clientWidth;
   const viewportHeight = document.documentElement.clientHeight;
   const spaceTop = anchor.top - VIEWPORT_MARGIN;
@@ -22,12 +26,12 @@ const getAdjustment = (position, anchor, content) => {
   const spaceLeft = anchor.left - VIEWPORT_MARGIN;
   const spaceRight = viewportWidth - anchor.right - VIEWPORT_MARGIN;
   let [main, corner] = position.split('-');
-  const gap = corner ? 0 : POSITION_GAP;
+  const fitGap = corner ? 0 : FIT_BUFFER;
 
   // Side positions: flip to the other side, or fall back to a vertical
   // position when the content doesn't fit horizontally on either side.
   if (main === 'left' || main === 'right') {
-    const needed = content.width + gap;
+    const needed = contentWidth + fitGap;
     if (needed > spaceLeft && needed > spaceRight) {
       main = spaceBottom >= spaceTop ? 'bottom' : 'top';
     } else if (main === 'right' && needed > spaceRight) {
@@ -41,7 +45,7 @@ const getAdjustment = (position, anchor, content) => {
   if (main === 'top' || main === 'bottom') {
     const space = main === 'top' ? spaceTop : spaceBottom;
     const opposite = main === 'top' ? spaceBottom : spaceTop;
-    if (content.height + gap > space && opposite > space) {
+    if (contentHeight + fitGap > space && opposite > space) {
       main = main === 'top' ? 'bottom' : 'top';
     }
   }
@@ -51,25 +55,33 @@ const getAdjustment = (position, anchor, content) => {
   if (corner) {
     const space = corner === 'left' ? spaceLeft : spaceRight;
     const opposite = corner === 'left' ? spaceRight : spaceLeft;
-    if (content.width > space && opposite > space) {
+    if (contentWidth > space && opposite > space) {
       corner = corner === 'left' ? 'right' : 'left';
     }
   }
-  let shiftX = 0;
-  let shiftY = 0;
+  const resolvedPosition = corner ? `${main}-${corner}` : main;
+  let left;
+  let top;
   if (main === 'left' || main === 'right') {
-    const idealTop = anchor.top + anchor.height / 2 - content.height / 2;
-    shiftY = clampValue(idealTop, VIEWPORT_MARGIN, viewportHeight - VIEWPORT_MARGIN - content.height) - idealTop;
+    const idealTop = anchor.top + anchor.height / 2 - contentHeight / 2;
+    top = clampValue(idealTop, VIEWPORT_MARGIN, viewportHeight - VIEWPORT_MARGIN - contentHeight);
+    left = main === 'right' ? anchor.right + MAIN_GAP : anchor.left - MAIN_GAP - contentWidth;
   } else {
-    const idealLeft = !corner ? anchor.left + anchor.width / 2 - content.width / 2 : corner === 'left' ? anchor.left - content.width : anchor.right;
-    shiftX = clampValue(idealLeft, VIEWPORT_MARGIN, viewportWidth - VIEWPORT_MARGIN - content.width) - idealLeft;
+    const idealLeft = !corner ? anchor.left + anchor.width / 2 - contentWidth / 2 : corner === 'left' ? anchor.left - contentWidth - CORNER_GAP : anchor.right + CORNER_GAP;
+    left = clampValue(idealLeft, VIEWPORT_MARGIN, viewportWidth - VIEWPORT_MARGIN - contentWidth);
+    const gap = corner ? CORNER_GAP : MAIN_GAP;
+    top = main === 'top' ? anchor.top - gap - contentHeight : anchor.bottom + gap;
   }
   return {
-    position: corner ? `${main}-${corner}` : main,
-    shiftX,
-    shiftY
+    position: resolvedPosition,
+    left,
+    top
   };
 };
+
+// Rendered into document.body so a clipping ancestor (overflow: clip/hidden, or a
+// transform/filter/backdrop-filter that would otherwise capture position: fixed)
+// can't cut the bubble off — it sits outside that ancestor's DOM subtree entirely.
 const Tooltip = _ref => {
   let {
     content,
@@ -78,62 +90,87 @@ const Tooltip = _ref => {
     className,
     children,
     onMouseEnter,
+    onMouseLeave,
     onFocus,
+    onBlur,
     dataTestId,
     ...rest
   } = _ref;
-  const rootRef = useRef(null);
+  const anchorRef = useRef(null);
   const contentRef = useRef(null);
-  const [adjustment, setAdjustment] = useState(null);
+  const [open, setOpen] = useState(false);
+  const tooltipId = useId();
   const updatePosition = useCallback(() => {
-    const root = rootRef.current;
+    const anchor = anchorRef.current;
     const contentEl = contentRef.current;
-    if (!root || !contentEl) return;
-
-    // React treats mouseenter as a continuous-priority event and would defer
-    // the update past the next paint, flashing the tooltip at the old position.
-    flushSync(() => {
-      setAdjustment(getAdjustment(position, root.getBoundingClientRect(), contentEl.getBoundingClientRect()));
-    });
-  }, [position]);
-  useEffect(() => {
-    setAdjustment(null);
+    if (!anchor || !contentEl) return;
+    const {
+      left,
+      top,
+      position: resolved
+    } = getAdjustment(position, anchor.getBoundingClientRect(), contentEl.offsetWidth, contentEl.offsetHeight);
+    contentEl.style.left = `${left}px`;
+    contentEl.style.top = `${top}px`;
+    contentEl.dataset.position = resolved;
+    contentEl.dataset.placed = 'true';
   }, [position]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    updatePosition();
+    window.addEventListener('scroll', updatePosition, true);
+    window.addEventListener('resize', updatePosition);
+    return () => {
+      window.removeEventListener('scroll', updatePosition, true);
+      window.removeEventListener('resize', updatePosition);
+    };
+  }, [open, updatePosition]);
+
+  // A hover-opened tooltip has no focus to catch the key, so Escape is heard document-wide.
   useEffect(() => {
-    const handleResize = () => {
-      if (rootRef.current?.matches(':hover')) updatePosition();
+    if (!open) return;
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') setOpen(false);
     };
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, [updatePosition]);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [open]);
   const handleMouseEnter = event => {
-    updatePosition();
     onMouseEnter?.(event);
+    setOpen(true);
+  };
+  const handleMouseLeave = event => {
+    onMouseLeave?.(event);
+    setOpen(false);
   };
   const handleFocus = event => {
-    updatePosition();
     onFocus?.(event);
+    setOpen(true);
+  };
+  const handleBlur = event => {
+    onBlur?.(event);
+    setOpen(false);
   };
-  const effectivePosition = adjustment?.position ?? position;
   return /*#__PURE__*/jsxs("span", {
-    ref: rootRef,
+    ref: anchorRef,
     className: cn(styles.wrapper, className),
+    "aria-describedby": open ? tooltipId : undefined,
     onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
     onFocus: handleFocus,
+    onBlur: handleBlur,
     "data-testid": dataTestId?.root,
     ...rest,
-    children: [children, /*#__PURE__*/jsx("span", {
+    children: [children, open ? /*#__PURE__*/createPortal(/*#__PURE__*/jsx("span", {
       ref: contentRef,
-      className: cn(styles.content, styles[`position-${effectivePosition}`]),
+      id: tooltipId,
+      role: "tooltip",
+      className: styles.content,
       style: {
-        '--local-tooltip-width': getMaxWidth(width),
-        '--local-tooltip-shift-x': `${adjustment?.shiftX ?? 0}px`,
-        '--local-tooltip-shift-y': `${adjustment?.shiftY ?? 0}px`
+        '--local-tooltip-width': getMaxWidth(width)
       },
-      role: "tooltip",
       "data-testid": dataTestId?.content,
       children: content
-    })]
+    }), document.body) : null]
   });
 };
 Tooltip.displayName = 'Tooltip';

package/dist/esm/tooltip/Tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.mjs","sources":["../../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type FocusEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { flushSync } from 'react-dom'\n\nimport cn from 'classnames'\n\nimport styles from './Tooltip.module.css'\n\nexport type TooltipPosition =\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'left'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n\nexport type TooltipDataTestId = {\n  root?: string\n  content?: string\n}\n\nexport type TooltipProps = Omit<ComponentPropsWithoutRef<'span'>, 'content'> & {\n  content: ReactNode\n  position?: TooltipPosition\n  width?: number\n  dataTestId?: TooltipDataTestId\n}\n\n// Minimal distance between the tooltip and the viewport edge.\nconst VIEWPORT_MARGIN = 16\n// Distance between the anchor and the content for main (non-corner) positions.\nconst POSITION_GAP = 15\n\ntype TooltipAdjustment = {\n  position: TooltipPosition\n  shiftX: number\n  shiftY: number\n}\n\nconst clampValue = (value: number, min: number, max: number) =>\n  Math.min(Math.max(value, min), Math.max(max, min))\n\nconst getMaxWidth = (width: number) =>\n  `min(${width}px, calc(100vw - ${VIEWPORT_MARGIN * 2}px))`\n\n// Measures the anchor and the (hidden but laid-out) content, then picks a\n// position/shift that keeps the bubble inside the viewport — flipping sides\n// when there isn't room, sliding along the cross axis otherwise.\nconst getAdjustment = (\n  position: TooltipPosition,\n  anchor: DOMRect,\n  content: DOMRect,\n): TooltipAdjustment => {\n  const viewportWidth = document.documentElement.clientWidth\n  const viewportHeight = document.documentElement.clientHeight\n\n  const spaceTop = anchor.top - VIEWPORT_MARGIN\n  const spaceBottom = viewportHeight - anchor.bottom - VIEWPORT_MARGIN\n  const spaceLeft = anchor.left - VIEWPORT_MARGIN\n  const spaceRight = viewportWidth - anchor.right - VIEWPORT_MARGIN\n\n  let [main, corner] = position.split('-')\n  const gap = corner ? 0 : POSITION_GAP\n\n  // Side positions: flip to the other side, or fall back to a vertical\n  // position when the content doesn't fit horizontally on either side.\n  if (main === 'left' || main === 'right') {\n    const needed = content.width + gap\n    if (needed > spaceLeft && needed > spaceRight) {\n      main = spaceBottom >= spaceTop ? 'bottom' : 'top'\n    } else if (main === 'right' && needed > spaceRight) {\n      main = 'left'\n    } else if (main === 'left' && needed > spaceLeft) {\n      main = 'right'\n    }\n  }\n\n  // Vertical positions: flip when the content doesn't fit and there is more room on the other side.\n  if (main === 'top' || main === 'bottom') {\n    const space = main === 'top' ? spaceTop : spaceBottom\n    const opposite = main === 'top' ? spaceBottom : spaceTop\n    if (content.height + gap > space && opposite > space) {\n      main = main === 'top' ? 'bottom' : 'top'\n    }\n  }\n\n  // A corner's cut-off edge has to meet the anchor, and sliding breaks that\n  // join — so mirror to the other side first and only slide as a last resort.\n  if (corner) {\n    const space = corner === 'left' ? spaceLeft : spaceRight\n    const opposite = corner === 'left' ? spaceRight : spaceLeft\n    if (content.width > space && opposite > space) {\n      corner = corner === 'left' ? 'right' : 'left'\n    }\n  }\n\n  let shiftX = 0\n  let shiftY = 0\n  if (main === 'left' || main === 'right') {\n    const idealTop = anchor.top + anchor.height / 2 - content.height / 2\n    shiftY =\n      clampValue(\n        idealTop,\n        VIEWPORT_MARGIN,\n        viewportHeight - VIEWPORT_MARGIN - content.height,\n      ) - idealTop\n  } else {\n    const idealLeft = !corner\n      ? anchor.left + anchor.width / 2 - content.width / 2\n      : corner === 'left'\n        ? anchor.left - content.width\n        : anchor.right\n    shiftX =\n      clampValue(\n        idealLeft,\n        VIEWPORT_MARGIN,\n        viewportWidth - VIEWPORT_MARGIN - content.width,\n      ) - idealLeft\n  }\n\n  return {\n    position: (corner ? `${main}-${corner}` : main) as TooltipPosition,\n    shiftX,\n    shiftY,\n  }\n}\n\nexport const Tooltip = ({\n  content,\n  position = 'top',\n  width = 320,\n  className,\n  children,\n  onMouseEnter,\n  onFocus,\n  dataTestId,\n  ...rest\n}: TooltipProps) => {\n  const rootRef = useRef<HTMLSpanElement>(null)\n  const contentRef = useRef<HTMLSpanElement>(null)\n  const [adjustment, setAdjustment] = useState<TooltipAdjustment | null>(null)\n\n  const updatePosition = useCallback(() => {\n    const root = rootRef.current\n    const contentEl = contentRef.current\n    if (!root || !contentEl) return\n\n    // React treats mouseenter as a continuous-priority event and would defer\n    // the update past the next paint, flashing the tooltip at the old position.\n    flushSync(() => {\n      setAdjustment(\n        getAdjustment(\n          position,\n          root.getBoundingClientRect(),\n          contentEl.getBoundingClientRect(),\n        ),\n      )\n    })\n  }, [position])\n\n  useEffect(() => {\n    setAdjustment(null)\n  }, [position])\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (rootRef.current?.matches(':hover')) updatePosition()\n    }\n\n    window.addEventListener('resize', handleResize)\n    return () => window.removeEventListener('resize', handleResize)\n  }, [updatePosition])\n\n  const handleMouseEnter = (event: MouseEvent<HTMLSpanElement>) => {\n    updatePosition()\n    onMouseEnter?.(event)\n  }\n\n  const handleFocus = (event: FocusEvent<HTMLSpanElement>) => {\n    updatePosition()\n    onFocus?.(event)\n  }\n\n  const effectivePosition = adjustment?.position ?? position\n\n  return (\n    <span\n      ref={rootRef}\n      className={cn(styles.wrapper, className)}\n      onMouseEnter={handleMouseEnter}\n      onFocus={handleFocus}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {children}\n      <span\n        ref={contentRef}\n        className={cn(styles.content, styles[`position-${effectivePosition}`])}\n        style={\n          {\n            '--local-tooltip-width': getMaxWidth(width),\n            '--local-tooltip-shift-x': `${adjustment?.shiftX ?? 0}px`,\n            '--local-tooltip-shift-y': `${adjustment?.shiftY ?? 0}px`,\n          } as CSSProperties\n        }\n        role='tooltip'\n        data-testid={dataTestId?.content}\n      >\n        {content}\n      </span>\n    </span>\n  )\n}\n\nTooltip.displayName = 'Tooltip'\n"],"names":["VIEWPORT_MARGIN","POSITION_GAP","clampValue","value","min","max","Math","getMaxWidth","width","getAdjustment","position","anchor","content","viewportWidth","document","documentElement","clientWidth","viewportHeight","clientHeight","spaceTop","top","spaceBottom","bottom","spaceLeft","left","spaceRight","right","main","corner","split","gap","needed","space","opposite","height","shiftX","shiftY","idealTop","idealLeft","Tooltip","_ref","className","children","onMouseEnter","onFocus","dataTestId","rest","rootRef","useRef","contentRef","adjustment","setAdjustment","useState","updatePosition","useCallback","root","current","contentEl","flushSync","getBoundingClientRect","useEffect","handleResize","matches","window","addEventListener","removeEventListener","handleMouseEnter","event","handleFocus","effectivePosition","_jsxs","ref","cn","styles","wrapper","_jsx","style","role","displayName"],"mappings":"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"}
+{"version":3,"file":"Tooltip.mjs","sources":["../../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type FocusEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\n\nimport cn from 'classnames'\n\nimport styles from './Tooltip.module.css'\n\nexport type TooltipPosition =\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'left'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n\nexport type TooltipDataTestId = {\n  root?: string\n  content?: string\n}\n\nexport type TooltipProps = Omit<ComponentPropsWithoutRef<'span'>, 'content'> & {\n  content: ReactNode\n  position?: TooltipPosition\n  width?: number\n  dataTestId?: TooltipDataTestId\n}\n\n// Minimal distance between the tooltip and the viewport edge.\nconst VIEWPORT_MARGIN = 16\n// Visual gap between the anchor and the content.\nconst MAIN_GAP = 8\nconst CORNER_GAP = 2\n// Extra buffer used only to decide whether a position still \"fits\" — bigger\n// than the visual gap so a flip triggers before the bubble visually crowds the edge.\nconst FIT_BUFFER = 15\n\ntype Adjustment = {\n  position: TooltipPosition\n  left: number\n  top: number\n}\n\nconst clampValue = (value: number, min: number, max: number) =>\n  Math.min(Math.max(value, min), Math.max(max, min))\n\nconst getMaxWidth = (width: number) =>\n  `min(${width}px, calc(100vw - ${VIEWPORT_MARGIN * 2}px))`\n\n// Measures the anchor and the content, then picks a position that keeps the\n// bubble inside the viewport — flipping sides when there isn't room, sliding\n// along the cross axis otherwise — and resolves it to fixed-position coordinates.\nconst getAdjustment = (\n  position: TooltipPosition,\n  anchor: DOMRect,\n  contentWidth: number,\n  contentHeight: number,\n): Adjustment => {\n  const viewportWidth = document.documentElement.clientWidth\n  const viewportHeight = document.documentElement.clientHeight\n\n  const spaceTop = anchor.top - VIEWPORT_MARGIN\n  const spaceBottom = viewportHeight - anchor.bottom - VIEWPORT_MARGIN\n  const spaceLeft = anchor.left - VIEWPORT_MARGIN\n  const spaceRight = viewportWidth - anchor.right - VIEWPORT_MARGIN\n\n  let [main, corner] = position.split('-') as [string, string | undefined]\n  const fitGap = corner ? 0 : FIT_BUFFER\n\n  // Side positions: flip to the other side, or fall back to a vertical\n  // position when the content doesn't fit horizontally on either side.\n  if (main === 'left' || main === 'right') {\n    const needed = contentWidth + fitGap\n    if (needed > spaceLeft && needed > spaceRight) {\n      main = spaceBottom >= spaceTop ? 'bottom' : 'top'\n    } else if (main === 'right' && needed > spaceRight) {\n      main = 'left'\n    } else if (main === 'left' && needed > spaceLeft) {\n      main = 'right'\n    }\n  }\n\n  // Vertical positions: flip when the content doesn't fit and there is more room on the other side.\n  if (main === 'top' || main === 'bottom') {\n    const space = main === 'top' ? spaceTop : spaceBottom\n    const opposite = main === 'top' ? spaceBottom : spaceTop\n    if (contentHeight + fitGap > space && opposite > space) {\n      main = main === 'top' ? 'bottom' : 'top'\n    }\n  }\n\n  // A corner's cut-off edge has to meet the anchor, and sliding breaks that\n  // join — so mirror to the other side first and only slide as a last resort.\n  if (corner) {\n    const space = corner === 'left' ? spaceLeft : spaceRight\n    const opposite = corner === 'left' ? spaceRight : spaceLeft\n    if (contentWidth > space && opposite > space) {\n      corner = corner === 'left' ? 'right' : 'left'\n    }\n  }\n\n  const resolvedPosition = (\n    corner ? `${main}-${corner}` : main\n  ) as TooltipPosition\n\n  let left: number\n  let top: number\n\n  if (main === 'left' || main === 'right') {\n    const idealTop = anchor.top + anchor.height / 2 - contentHeight / 2\n    top = clampValue(\n      idealTop,\n      VIEWPORT_MARGIN,\n      viewportHeight - VIEWPORT_MARGIN - contentHeight,\n    )\n    left =\n      main === 'right'\n        ? anchor.right + MAIN_GAP\n        : anchor.left - MAIN_GAP - contentWidth\n  } else {\n    const idealLeft = !corner\n      ? anchor.left + anchor.width / 2 - contentWidth / 2\n      : corner === 'left'\n        ? anchor.left - contentWidth - CORNER_GAP\n        : anchor.right + CORNER_GAP\n    left = clampValue(\n      idealLeft,\n      VIEWPORT_MARGIN,\n      viewportWidth - VIEWPORT_MARGIN - contentWidth,\n    )\n    const gap = corner ? CORNER_GAP : MAIN_GAP\n    top =\n      main === 'top' ? anchor.top - gap - contentHeight : anchor.bottom + gap\n  }\n\n  return { position: resolvedPosition, left, top }\n}\n\n// Rendered into document.body so a clipping ancestor (overflow: clip/hidden, or a\n// transform/filter/backdrop-filter that would otherwise capture position: fixed)\n// can't cut the bubble off — it sits outside that ancestor's DOM subtree entirely.\nexport const Tooltip = ({\n  content,\n  position = 'top',\n  width = 320,\n  className,\n  children,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  dataTestId,\n  ...rest\n}: TooltipProps) => {\n  const anchorRef = useRef<HTMLSpanElement>(null)\n  const contentRef = useRef<HTMLSpanElement>(null)\n  const [open, setOpen] = useState(false)\n  const tooltipId = useId()\n\n  const updatePosition = useCallback(() => {\n    const anchor = anchorRef.current\n    const contentEl = contentRef.current\n    if (!anchor || !contentEl) return\n    const {\n      left,\n      top,\n      position: resolved,\n    } = getAdjustment(\n      position,\n      anchor.getBoundingClientRect(),\n      contentEl.offsetWidth,\n      contentEl.offsetHeight,\n    )\n    contentEl.style.left = `${left}px`\n    contentEl.style.top = `${top}px`\n    contentEl.dataset.position = resolved\n    contentEl.dataset.placed = 'true'\n  }, [position])\n\n  useLayoutEffect(() => {\n    if (!open) return\n    updatePosition()\n    window.addEventListener('scroll', updatePosition, true)\n    window.addEventListener('resize', updatePosition)\n    return () => {\n      window.removeEventListener('scroll', updatePosition, true)\n      window.removeEventListener('resize', updatePosition)\n    }\n  }, [open, updatePosition])\n\n  // A hover-opened tooltip has no focus to catch the key, so Escape is heard document-wide.\n  useEffect(() => {\n    if (!open) return\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') setOpen(false)\n    }\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [open])\n\n  const handleMouseEnter = (event: MouseEvent<HTMLSpanElement>) => {\n    onMouseEnter?.(event)\n    setOpen(true)\n  }\n\n  const handleMouseLeave = (event: MouseEvent<HTMLSpanElement>) => {\n    onMouseLeave?.(event)\n    setOpen(false)\n  }\n\n  const handleFocus = (event: FocusEvent<HTMLSpanElement>) => {\n    onFocus?.(event)\n    setOpen(true)\n  }\n\n  const handleBlur = (event: FocusEvent<HTMLSpanElement>) => {\n    onBlur?.(event)\n    setOpen(false)\n  }\n\n  return (\n    <span\n      ref={anchorRef}\n      className={cn(styles.wrapper, className)}\n      aria-describedby={open ? tooltipId : undefined}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      {children}\n      {open\n        ? createPortal(\n            <span\n              ref={contentRef}\n              id={tooltipId}\n              role='tooltip'\n              className={styles.content}\n              style={\n                { '--local-tooltip-width': getMaxWidth(width) } as CSSProperties\n              }\n              data-testid={dataTestId?.content}\n            >\n              {content}\n            </span>,\n            document.body,\n          )\n        : null}\n    </span>\n  )\n}\n\nTooltip.displayName = 'Tooltip'\n"],"names":["VIEWPORT_MARGIN","MAIN_GAP","CORNER_GAP","FIT_BUFFER","clampValue","value","min","max","Math","getMaxWidth","width","getAdjustment","position","anchor","contentWidth","contentHeight","viewportWidth","document","documentElement","clientWidth","viewportHeight","clientHeight","spaceTop","top","spaceBottom","bottom","spaceLeft","left","spaceRight","right","main","corner","split","fitGap","needed","space","opposite","resolvedPosition","idealTop","height","idealLeft","gap","Tooltip","_ref","content","className","children","onMouseEnter","onMouseLeave","onFocus","onBlur","dataTestId","rest","anchorRef","useRef","contentRef","open","setOpen","useState","tooltipId","useId","updatePosition","useCallback","current","contentEl","resolved","getBoundingClientRect","offsetWidth","offsetHeight","style","dataset","placed","useLayoutEffect","window","addEventListener","removeEventListener","useEffect","handleKeyDown","event","key","handleMouseEnter","handleMouseLeave","handleFocus","handleBlur","_jsxs","ref","cn","styles","wrapper","undefined","root","createPortal","_jsx","id","role","body","displayName"],"mappings":"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"}

package/dist/esm/tooltip/Tooltip.module.css.mjs

@@ -1,4 +1,4 @@
-const styles = {"wrapper":"Tooltip-module_wrapper__-h7ZD","content":"Tooltip-module_content__Yqdc-","position-top":"Tooltip-module_position-top__yIb6T","position-bottom":"Tooltip-module_position-bottom__LohZn","position-left":"Tooltip-module_position-left__oe67r","position-right":"Tooltip-module_position-right__N27I5","position-top-left":"Tooltip-module_position-top-left__2jkq9","position-top-right":"Tooltip-module_position-top-right__jdGlT","position-bottom-left":"Tooltip-module_position-bottom-left__-NwL7","position-bottom-right":"Tooltip-module_position-bottom-right__DNYiw"};
+const styles = {"wrapper":"Tooltip-module_wrapper__-h7ZD","content":"Tooltip-module_content__Yqdc-"};
 
 export { styles as default };
 //# sourceMappingURL=Tooltip.module.css.mjs.map

package/dist/esm/tx-status/TxStatus.mjs

@@ -1,13 +1,13 @@
 import cn from 'classnames';
 import styles from './TxStatus.module.css.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { IconSpinner } from '../icons/components/base/IconSpinner.mjs';
 import { IconExclamation } from '../icons/components/base/IconExclamation.mjs';
+import { IconLoaderCircle } from '../icons/components/base/IconLoaderCircle.mjs';
 import { IconCheck } from '../icons/components/base/IconCheck.mjs';
 import { IconCross } from '../icons/components/base/IconCross.mjs';
 
 const graphicByStatus = {
-  loading: /*#__PURE__*/jsx(IconSpinner, {
+  loading: /*#__PURE__*/jsx(IconLoaderCircle, {
     className: styles.spinner
   }),
   success: /*#__PURE__*/jsx("span", {

package/dist/esm/tx-status/TxStatus.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TxStatus.mjs","sources":["../../../src/tx-status/TxStatus.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { IconCheck, IconCross, IconExclamation, IconSpinner } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './TxStatus.module.css'\n\nexport type TxStatusVariant = 'loading' | 'success' | 'error' | 'warning'\n\nexport type TxStatusDataTestId = {\n  root?: string\n  title?: string\n  amount?: string\n  message?: string\n  footer?: string\n}\n\nexport type TxStatusProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {\n  status: TxStatusVariant\n  title: ReactNode\n  amount?: ReactNode\n  message?: ReactNode\n  footer?: ReactNode\n  dataTestId?: TxStatusDataTestId\n}\n\nconst graphicByStatus: Record<TxStatusVariant, ReactNode> = {\n  loading: <IconSpinner className={styles.spinner} />,\n  success: (\n    <span className={cn(styles.circle, styles.circleSuccess)}>\n      <IconCheck className={styles.circleIcon} />\n    </span>\n  ),\n  error: (\n    <span className={cn(styles.circle, styles.circleError)}>\n      <IconCross className={styles.circleIcon} />\n    </span>\n  ),\n  warning: (\n    <span className={cn(styles.circle, styles.circleWarning)}>\n      <IconExclamation className={styles.circleIcon} />\n    </span>\n  ),\n}\n\nexport const TxStatus = ({\n  status,\n  title,\n  amount,\n  message,\n  footer,\n  className,\n  dataTestId,\n  ...rest\n}: TxStatusProps) => (\n  <div\n    className={cn(styles.root, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    <div className={styles.graphicGroup}>\n      <span className={styles.graphic}>{graphicByStatus[status]}</span>\n      <div className={styles.textGroup}>\n        <span className={styles.title} data-testid={dataTestId?.title}>\n          {title}\n        </span>\n        {amount ? (\n          <div className={styles.amount} data-testid={dataTestId?.amount}>\n            {amount}\n          </div>\n        ) : null}\n        {message ? (\n          <div className={styles.message} data-testid={dataTestId?.message}>\n            {message}\n          </div>\n        ) : null}\n      </div>\n    </div>\n    {footer ? (\n      <div className={styles.footer} data-testid={dataTestId?.footer}>\n        {footer}\n      </div>\n    ) : null}\n  </div>\n)\n"],"names":["graphicByStatus","loading","_jsx","IconSpinner","className","styles","spinner","success","cn","circle","circleSuccess","children","IconCheck","circleIcon","error","circleError","IconCross","warning","circleWarning","IconExclamation","TxStatus","_ref","status","title","amount","message","footer","dataTestId","rest","_jsxs","root","graphicGroup","graphic","textGroup"],"mappings":"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"}
+{"version":3,"file":"TxStatus.mjs","sources":["../../../src/tx-status/TxStatus.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport {\n  IconCheck,\n  IconCross,\n  IconExclamation,\n  IconLoaderCircle,\n} from '../icons'\nimport cn from 'classnames'\n\nimport styles from './TxStatus.module.css'\n\nexport type TxStatusVariant = 'loading' | 'success' | 'error' | 'warning'\n\nexport type TxStatusDataTestId = {\n  root?: string\n  title?: string\n  amount?: string\n  message?: string\n  footer?: string\n}\n\nexport type TxStatusProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {\n  status: TxStatusVariant\n  title: ReactNode\n  amount?: ReactNode\n  message?: ReactNode\n  footer?: ReactNode\n  dataTestId?: TxStatusDataTestId\n}\n\nconst graphicByStatus: Record<TxStatusVariant, ReactNode> = {\n  loading: <IconLoaderCircle className={styles.spinner} />,\n  success: (\n    <span className={cn(styles.circle, styles.circleSuccess)}>\n      <IconCheck className={styles.circleIcon} />\n    </span>\n  ),\n  error: (\n    <span className={cn(styles.circle, styles.circleError)}>\n      <IconCross className={styles.circleIcon} />\n    </span>\n  ),\n  warning: (\n    <span className={cn(styles.circle, styles.circleWarning)}>\n      <IconExclamation className={styles.circleIcon} />\n    </span>\n  ),\n}\n\nexport const TxStatus = ({\n  status,\n  title,\n  amount,\n  message,\n  footer,\n  className,\n  dataTestId,\n  ...rest\n}: TxStatusProps) => (\n  <div\n    className={cn(styles.root, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    <div className={styles.graphicGroup}>\n      <span className={styles.graphic}>{graphicByStatus[status]}</span>\n      <div className={styles.textGroup}>\n        <span className={styles.title} data-testid={dataTestId?.title}>\n          {title}\n        </span>\n        {amount ? (\n          <div className={styles.amount} data-testid={dataTestId?.amount}>\n            {amount}\n          </div>\n        ) : null}\n        {message ? (\n          <div className={styles.message} data-testid={dataTestId?.message}>\n            {message}\n          </div>\n        ) : null}\n      </div>\n    </div>\n    {footer ? (\n      <div className={styles.footer} data-testid={dataTestId?.footer}>\n        {footer}\n      </div>\n    ) : null}\n  </div>\n)\n"],"names":["graphicByStatus","loading","_jsx","IconLoaderCircle","className","styles","spinner","success","cn","circle","circleSuccess","children","IconCheck","circleIcon","error","circleError","IconCross","warning","circleWarning","IconExclamation","TxStatus","_ref","status","title","amount","message","footer","dataTestId","rest","_jsxs","root","graphicGroup","graphic","textGroup"],"mappings":"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"}