@stackone/malachite 2.54.0 → 2.55.0

package/dist/components/Tooltip.js

@@ -1,84 +1,86 @@
-import { jsx as f, jsxs as N, Fragment as te } from "react/jsx-runtime";
-import S, { useState as v, useRef as c, useCallback as ne, useId as re, useEffect as w, useInsertionEffect as oe } from "react";
-import { createPortal as ie } from "react-dom";
-import { ensureOverlayStyles as ae, overlayIdentity as se } from "./portalOverlay.js";
-import { useTopLayer as le } from "./topLayer.js";
-const ce = new RegExp("(?<=[/\\\\.\\-_?&#=:@])"), fe = (n) => n.split(ce).map((s, y) => /* @__PURE__ */ N(S.Fragment, { children: [
-  s,
+import { jsx as f, jsxs as Y, Fragment as oe } from "react/jsx-runtime";
+import $, { useState as b, useRef as d, useCallback as ie, useId as ae, useEffect as g, useInsertionEffect as se } from "react";
+import { createPortal as le } from "react-dom";
+import { FOCUS_RING as ce } from "./focusRing.js";
+import { ensureOverlayStyles as de, overlayIdentity as fe } from "./portalOverlay.js";
+import { useTopLayer as ue } from "./topLayer.js";
+const me = new RegExp("(?<=[/\\\\.\\-_?&#=:@])"), pe = (n) => n.split(me).map((a, w) => /* @__PURE__ */ Y($.Fragment, { children: [
+  a,
   /* @__PURE__ */ f("wbr", {})
-] }, y)), ue = {
+] }, w)), he = {
   minWidth: 0,
   overflow: "hidden"
-}, k = {
+}, z = {
   flex: 1,
   minWidth: 0
-}, z = 8, we = ({
+}, U = 8, Ee = ({
   text: n,
-  children: s,
-  delay: y = 1,
-  wrapChildren: Y = !1,
+  children: a,
+  delay: w = 1,
+  wrapChildren: G = !1,
   triggerAs: O = "div",
-  inline: T = !1,
-  placement: U = "top",
-  isShrinkable: I = !1,
-  maxWidth: b = "320px",
-  fill: x = !1,
+  inline: A = !1,
+  placement: q = "top",
+  isShrinkable: B = !1,
+  maxWidth: x = "320px",
+  fill: E = !1,
   shouldShow: u,
-  suppressed: o = !1,
-  describesTrigger: A = !0,
-  showOnFocus: d = !0
+  suppressed: r = !1,
+  describesTrigger: F = !0,
+  showOnFocus: c = !0,
+  focusableTrigger: m = !1
 }) => {
-  const q = I || x ? { ...I ? ue : {}, ...x ? k : {} } : void 0, [t, m] = v(!1), [p, G] = v(!1), h = c(null), a = c(null), r = ne(() => {
-    h.current && (clearTimeout(h.current), h.current = null), a.current !== null && (cancelAnimationFrame(a.current), a.current = null);
-  }, []), B = () => {
-    G(!0), a.current !== null && cancelAnimationFrame(a.current), a.current = requestAnimationFrame(() => {
-      a.current = null, m(!0);
+  const K = B || E ? { ...B ? he : {}, ...E ? z : {} } : void 0, [t, p] = b(!1), [h, X] = b(m), v = d(null), s = d(null), o = ie(() => {
+    v.current && (clearTimeout(v.current), v.current = null), s.current !== null && (cancelAnimationFrame(s.current), s.current = null);
+  }, []), T = () => {
+    X(!0), s.current !== null && cancelAnimationFrame(s.current), s.current = requestAnimationFrame(() => {
+      s.current = null, p(!0);
     });
-  }, E = c(null), g = c(null);
-  le(E, t);
-  const F = re(), l = n != null && n !== "" && n !== !1, K = (e) => {
-    e.stopPropagation(), !(!l || o || u && !u()) && (r(), h.current = setTimeout(() => {
-      B();
-    }, y * 1e3));
-  }, X = (e) => {
-    e.stopPropagation(), r(), m(!1);
-  }, W = () => {
-    !d || !l || o || u && !u() || (r(), B());
-  }, D = () => {
-    r(), m(!1);
-  }, M = c(d);
-  w(() => {
+  }, R = d(null), y = d(null);
+  ue(R, t);
+  const W = ae(), l = n != null && n !== "" && n !== !1, D = (e) => {
+    e.stopPropagation(), !(!l || r || u && !u()) && (o(), v.current = setTimeout(() => {
+      T();
+    }, w * 1e3));
+  }, J = (e) => {
+    e.stopPropagation(), o(), p(!1);
+  }, _ = () => {
+    !c || !l || r || u && !u() || (o(), T());
+  }, Q = () => {
+    o(), p(!1);
+  }, M = d(c);
+  g(() => {
     var i;
-    const e = d && !M.current;
-    M.current = d, e && ((i = g.current) != null && i.matches(":focus-within")) && W();
+    const e = c && !M.current;
+    M.current = c, e && ((i = y.current) != null && i.matches(":focus-within")) && _();
   });
-  const [J, Q] = v(o);
-  o !== J && (Q(o), o && m(!1)), w(() => {
-    o && r();
-  }, [o, r]);
-  const [, _] = v({});
-  w(() => {
+  const [Z, ee] = b(r);
+  r !== Z && (ee(r), r && p(!1)), g(() => {
+    r && o();
+  }, [r, o]);
+  const [, C] = b({});
+  g(() => {
     if (!t)
       return () => {
-        r();
+        o();
       };
     const e = () => {
-      _({});
+      C({});
     };
     return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
-      r(), window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+      o(), window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
     };
-  }, [t, r]), w(() => {
-    t && _({});
+  }, [t, o]), g(() => {
+    t && C({});
   }, [t]);
-  const Z = () => {
-    if (!g.current)
+  const te = () => {
+    if (!y.current)
       return { display: "none" };
-    const e = g.current.getBoundingClientRect(), i = {
+    const e = y.current.getBoundingClientRect(), i = {
       position: "fixed",
       display: "flex",
       width: "max-content",
-      maxWidth: typeof b == "number" ? `${b}px` : b,
+      maxWidth: typeof x == "number" ? `${x}px` : x,
       minWidth: "32px",
       minHeight: "32px",
       padding: "8px 12px",
@@ -96,27 +98,27 @@ const ce = new RegExp("(?<=[/\\\\.\\-_?&#=:@])"), fe = (n) => n.split(ce).map((s
       opacity: t ? 1 : 0,
       visibility: t ? "visible" : "hidden",
       transition: "opacity 150ms ease-in-out, transform 150ms ease-in-out, visibility 150ms ease-in-out"
-    }, R = () => {
-      var j;
-      const L = e.left + e.width / 2, P = ((j = E.current) == null ? void 0 : j.getBoundingClientRect().width) ?? 0;
-      if (P === 0)
-        return L;
-      const C = P / 2, V = z + C, H = window.innerWidth - z - C;
-      return V > H ? L : Math.min(Math.max(L, V), H);
+    }, L = () => {
+      var k;
+      const I = e.left + e.width / 2, V = ((k = R.current) == null ? void 0 : k.getBoundingClientRect().width) ?? 0;
+      if (V === 0)
+        return I;
+      const H = V / 2, N = U + H, j = window.innerWidth - U - H;
+      return N > j ? I : Math.min(Math.max(I, N), j);
     };
-    switch (U) {
+    switch (q) {
       case "top":
         return {
           ...i,
           top: e.top - 8,
-          left: R(),
+          left: L(),
           transform: `translate(-50%, -100%) ${t ? "scale(1)" : "scale(0.95)"}`
         };
       case "bottom":
         return {
           ...i,
           top: e.bottom + 8,
-          left: R(),
+          left: L(),
           transform: `translateX(-50%) ${t ? "scale(1)" : "scale(0.95)"}`
         };
       case "left":
@@ -137,41 +139,43 @@ const ce = new RegExp("(?<=[/\\\\.\\-_?&#=:@])"), fe = (n) => n.split(ce).map((s
         return {
           ...i,
           top: e.top - 8,
-          left: R(),
+          left: L(),
           transform: `translate(-50%, -100%) ${t ? "scale(1)" : "scale(0.95)"}`
         };
     }
-  }, $ = l && p && A ? F : void 0;
-  oe(() => {
-    l && p && ae();
-  }, [l, p]);
-  const ee = Y || !S.isValidElement(s) ? /* @__PURE__ */ f("span", { "aria-describedby": $, style: x ? k : void 0, children: s }) : S.cloneElement(s, {
-    "aria-describedby": [s.props["aria-describedby"], $].filter(Boolean).join(" ") || void 0
-  });
-  return /* @__PURE__ */ N(te, { children: [
+  }, S = l && h && F ? W : void 0;
+  se(() => {
+    l && h && de();
+  }, [l, h]);
+  const ne = m ? a : G || !$.isValidElement(a) ? /* @__PURE__ */ f("span", { "aria-describedby": S, style: E ? z : void 0, children: a }) : $.cloneElement(a, {
+    "aria-describedby": [a.props["aria-describedby"], S].filter(Boolean).join(" ") || void 0
+  }), re = A ? "span" : O, P = m && l && !r && c;
+  return /* @__PURE__ */ Y(oe, { children: [
     /* @__PURE__ */ f(
-      T ? "span" : O,
+      re,
       {
-        ref: g,
-        className: `relative ${T ? "inline-flex max-w-full align-middle" : "flex"} items-center`,
-        style: q,
-        onMouseEnter: K,
-        onMouseLeave: X,
-        onFocus: W,
-        onBlur: D,
-        children: ee
+        ref: y,
+        className: `relative ${A ? "inline-flex max-w-full align-middle" : "flex"} items-center${P ? ` ${ce}` : ""}`,
+        style: K,
+        tabIndex: P ? 0 : void 0,
+        "aria-describedby": m ? S : void 0,
+        onMouseEnter: D,
+        onMouseLeave: J,
+        onFocus: _,
+        onBlur: Q,
+        children: ne
       }
     ),
-    l && p && ie(
+    l && h && le(
       /* @__PURE__ */ f(
         "div",
         {
-          ref: E,
-          id: F,
+          ref: R,
+          id: W,
           role: "tooltip",
-          "aria-hidden": A ? void 0 : !0,
-          ...se("tooltip"),
-          style: Z(),
+          "aria-hidden": F ? void 0 : !0,
+          ...fe("tooltip"),
+          style: te(),
           children: /* @__PURE__ */ f(
             "span",
             {
@@ -179,7 +183,7 @@ const ce = new RegExp("(?<=[/\\\\.\\-_?&#=:@])"), fe = (n) => n.split(ce).map((s
                 minWidth: 0,
                 overflowWrap: "anywhere"
               },
-              children: typeof n == "string" ? fe(n) : n
+              children: typeof n == "string" ? pe(n) : n
             }
           )
         }
@@ -189,6 +193,6 @@ const ce = new RegExp("(?<=[/\\\\.\\-_?&#=:@])"), fe = (n) => n.split(ce).map((s
   ] });
 };
 export {
-  we as default
+  Ee as default
 };
 //# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../src/components/Tooltip.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useId, useInsertionEffect, useCallback } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ensureOverlayStyles, overlayIdentity } from './portalOverlay';\nimport { useTopLayer } from './topLayer';\n\n// Split after each delimiter so long values (URLs, dotted paths) wrap at \"/\" or \".\"\n// instead of mid-token. <wbr> is copy-safe (a zero-width space would corrupt a copied\n// URL); overflow-wrap still handles a single run too long to fit.\nconst WRAP_AFTER = /(?<=[/\\\\.\\-_?&#=:@])/;\nconst withBreakOpportunities = (value: string): React.ReactNode =>\n    value.split(WRAP_AFTER).map((chunk, i) => (\n        <React.Fragment key={i}>\n            {chunk}\n            <wbr />\n        </React.Fragment>\n    ));\n\ninterface TooltipProps {\n    text: React.ReactNode | string;\n    children: React.ReactNode;\n    delay?: number;\n    wrapChildren?: boolean;\n    placement?: 'top' | 'bottom' | 'left' | 'right';\n    isShrinkable?: boolean;\n    fill?: boolean;\n    /** Max width of tooltip. Default: 320px */\n    maxWidth?: number | string;\n    /** Called synchronously when the trigger is hovered/focused; return false to\n     *  suppress the tooltip for this interaction. Lets wrappers defer expensive\n     *  checks (e.g. truncation measurement) to interaction time instead of mount. */\n    shouldShow?: () => boolean;\n    suppressed?: boolean;\n    triggerAs?: 'div' | 'span';\n    inline?: boolean;\n    /** Whether the tooltip acts as the trigger's accessible description. False where the\n     *  trigger already points at the same sentence on screen, so it is not announced twice. */\n    describesTrigger?: boolean;\n    /** False to open on hover only, e.g. where script moves focus onto the trigger. */\n    showOnFocus?: boolean;\n}\n\nconst SHRINKABLE_STYLE: React.CSSProperties = {\n    minWidth: 0,\n    overflow: 'hidden',\n};\n\nconst FILL_STYLE: React.CSSProperties = {\n    flex: 1,\n    minWidth: 0,\n};\n\n/** Kept clear of the viewport edge so a clamped tooltip does not sit flush against it. */\nconst VIEWPORT_MARGIN = 8;\n\nconst Tooltip: React.FC<TooltipProps> = ({\n    text,\n    children,\n    delay = 1,\n    wrapChildren = false,\n    triggerAs = 'div',\n    inline = false,\n    placement = 'top',\n    isShrinkable = false,\n    maxWidth = '320px',\n    fill = false,\n    shouldShow,\n    suppressed = false,\n    describesTrigger = true,\n    showOnFocus = true,\n}) => {\n    const triggerStyle =\n        isShrinkable || fill\n            ? { ...(isShrinkable ? SHRINKABLE_STYLE : {}), ...(fill ? FILL_STYLE : {}) }\n            : undefined;\n\n    const [isVisible, setIsVisible] = useState(false);\n    // Portal mounts on first show, not on mount: an at-rest tooltip otherwise\n    // costs a hidden document.body node plus a getBoundingClientRect per render —\n    // multiplied by every row in a large table.\n    const [hasShown, setHasShown] = useState(false);\n    const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n    const showFrameRef = useRef<number | null>(null);\n\n    const cancelPendingShow = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n            timeoutRef.current = null;\n        }\n        if (showFrameRef.current !== null) {\n            cancelAnimationFrame(showFrameRef.current);\n            showFrameRef.current = null;\n        }\n    }, []);\n\n    const scheduleVisible = () => {\n        // Two steps so the portal mounts hidden first and the fade-in transition\n        // still runs on the very first show. The frame is tracked so leave/blur/\n        // unmount can cancel a show that is already past its delay.\n        setHasShown(true);\n        if (showFrameRef.current !== null) {\n            cancelAnimationFrame(showFrameRef.current);\n        }\n        showFrameRef.current = requestAnimationFrame(() => {\n            showFrameRef.current = null;\n            setIsVisible(true);\n        });\n    };\n    const tooltipRef = useRef<HTMLDivElement>(null);\n    const triggerRef = useRef<HTMLDivElement>(null);\n\n    // Tied to visibility, not mount: the node is latched into the DOM after its first show, and\n    // re-entering on each show keeps a tooltip above the panel it is annotating.\n    useTopLayer(tooltipRef, isVisible);\n\n    const tooltipId = useId();\n\n    const hasText = text !== null && text !== undefined && text !== '' && text !== false;\n\n    const handleMouseEnter = (e: React.MouseEvent) => {\n        e.stopPropagation();\n\n        if (!hasText || suppressed || (shouldShow && !shouldShow())) {\n            return;\n        }\n\n        cancelPendingShow();\n\n        timeoutRef.current = setTimeout(() => {\n            scheduleVisible();\n        }, delay * 1000);\n    };\n\n    const handleMouseLeave = (e: React.MouseEvent) => {\n        e.stopPropagation();\n\n        cancelPendingShow();\n        setIsVisible(false);\n    };\n\n    const handleFocus = () => {\n        if (!showOnFocus || !hasText || suppressed || (shouldShow && !shouldShow())) {\n            return;\n        }\n\n        cancelPendingShow();\n        scheduleVisible();\n    };\n\n    const handleBlur = () => {\n        cancelPendingShow();\n        setIsVisible(false);\n    };\n\n    // Turning on while the trigger already holds focus fires no focus event to open on.\n    const showOnFocusRef = useRef(showOnFocus);\n    useEffect(() => {\n        const switchedOn = showOnFocus && !showOnFocusRef.current;\n        showOnFocusRef.current = showOnFocus;\n        if (switchedOn && triggerRef.current?.matches(':focus-within')) {\n            handleFocus();\n        }\n    });\n\n    const [wasSuppressed, setWasSuppressed] = useState(suppressed);\n    if (suppressed !== wasSuppressed) {\n        setWasSuppressed(suppressed);\n        if (suppressed) {\n            setIsVisible(false);\n        }\n    }\n\n    useEffect(() => {\n        if (suppressed) {\n            cancelPendingShow();\n        }\n    }, [suppressed, cancelPendingShow]);\n\n    const [, forceUpdate] = useState({});\n\n    useEffect(() => {\n        // Only a VISIBLE tooltip needs to track scroll/resize; keeping global\n        // listeners per mounted instance made every scroll event fan out across\n        // every tooltip on the page.\n        if (!isVisible) {\n            return () => {\n                cancelPendingShow();\n            };\n        }\n        const handleUpdate = () => {\n            forceUpdate({});\n        };\n\n        window.addEventListener('scroll', handleUpdate, true);\n        window.addEventListener('resize', handleUpdate);\n\n        return () => {\n            cancelPendingShow();\n            window.removeEventListener('scroll', handleUpdate, true);\n            window.removeEventListener('resize', handleUpdate);\n        };\n    }, [isVisible, cancelPendingShow]);\n\n    // The first render that mounts the tooltip has no measured width yet, so the clamp below\n    // cannot run on it. One extra pass once it is in the DOM gives the clamp its measurement\n    // — before the opacity transition finishes, so nothing is seen sliding into place.\n    useEffect(() => {\n        if (isVisible) {\n            forceUpdate({});\n        }\n    }, [isVisible]);\n\n    const getTooltipStyles = (): React.CSSProperties => {\n        if (!triggerRef.current) {\n            return { display: 'none' };\n        }\n\n        const rect = triggerRef.current.getBoundingClientRect();\n\n        const baseStyles: React.CSSProperties = {\n            position: 'fixed',\n            display: 'flex',\n            width: 'max-content',\n            maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,\n            minWidth: '32px',\n            minHeight: '32px',\n            padding: '8px 12px',\n            alignItems: 'center',\n            gap: '8px',\n            borderRadius: '12px',\n            backgroundColor: 'var(--malachite-tooltip-background, rgb(59, 59, 59))',\n            color: 'var(--malachite-tooltip-foreground, rgb(255, 255, 255))',\n            boxShadow: 'var(--malachite-tooltip-shadow, 0px 0px 10px 0px rgba(0, 0, 0, 0.20))',\n            fontSize: '14px',\n            lineHeight: '1.4',\n            whiteSpace: 'normal',\n            textAlign: 'left',\n            pointerEvents: 'none',\n            opacity: isVisible ? 1 : 0,\n            visibility: isVisible ? 'visible' : 'hidden',\n            transition:\n                'opacity 150ms ease-in-out, transform 150ms ease-in-out, visibility 150ms ease-in-out',\n        };\n\n        // A trigger near the viewport edge would otherwise centre a wide tooltip half off\n        // screen, where the panel or the window crops it. Clamping the CENTRE keeps the\n        // `translateX(-50%)` placement honest: the box stays put, it just stops short.\n        const centeredLeft = (): number => {\n            const desired = rect.left + rect.width / 2;\n            const width = tooltipRef.current?.getBoundingClientRect().width ?? 0;\n\n            if (width === 0) {\n                return desired;\n            }\n\n            const half = width / 2;\n            const min = VIEWPORT_MARGIN + half;\n            const max = window.innerWidth - VIEWPORT_MARGIN - half;\n\n            // A tooltip wider than the viewport has no in-bounds centre; leave it centred\n            // rather than pinning it to a nonsensical one.\n            return min > max ? desired : Math.min(Math.max(desired, min), max);\n        };\n\n        switch (placement) {\n            case 'top':\n                return {\n                    ...baseStyles,\n                    top: rect.top - 8,\n                    left: centeredLeft(),\n                    transform: `translate(-50%, -100%) ${isVisible ? 'scale(1)' : 'scale(0.95)'}`,\n                };\n            case 'bottom':\n                return {\n                    ...baseStyles,\n                    top: rect.bottom + 8,\n                    left: centeredLeft(),\n                    transform: `translateX(-50%) ${isVisible ? 'scale(1)' : 'scale(0.95)'}`,\n                };\n            case 'left':\n                return {\n                    ...baseStyles,\n                    top: rect.top + rect.height / 2,\n                    left: rect.left - 8,\n                    transform: `translate(-100%, -50%) ${isVisible ? 'scale(1)' : 'scale(0.95)'}`,\n                };\n            case 'right':\n                return {\n                    ...baseStyles,\n                    top: rect.top + rect.height / 2,\n                    left: rect.right + 8,\n                    transform: `translateY(-50%) ${isVisible ? 'scale(1)' : 'scale(0.95)'}`,\n                };\n            default:\n                return {\n                    ...baseStyles,\n                    top: rect.top - 8,\n                    left: centeredLeft(),\n                    transform: `translate(-50%, -100%) ${isVisible ? 'scale(1)' : 'scale(0.95)'}`,\n                };\n        }\n    };\n\n    // Only reference the tooltip id once the portal can exist — a dangling\n    // aria-describedby (text set, never shown) confuses assistive tech.\n    const describedBy = hasText && hasShown && describesTrigger ? tooltipId : undefined;\n    useInsertionEffect(() => {\n        if (hasText && hasShown) {\n            ensureOverlayStyles();\n        }\n    }, [hasText, hasShown]);\n    const renderedChildren =\n        wrapChildren || !React.isValidElement(children) ? (\n            <span aria-describedby={describedBy} style={fill ? FILL_STYLE : undefined}>\n                {children}\n            </span>\n        ) : (\n            React.cloneElement(children as React.ReactElement, {\n                'aria-describedby':\n                    [(children as React.ReactElement).props['aria-describedby'], describedBy]\n                        .filter(Boolean)\n                        .join(' ') || undefined,\n            })\n        );\n\n    const Trigger = inline ? 'span' : triggerAs;\n\n    // Create the tooltip content without its own shadow root\n    return (\n        <>\n            <Trigger\n                ref={triggerRef}\n                className={`relative ${inline ? 'inline-flex max-w-full align-middle' : 'flex'} items-center`}\n                style={triggerStyle}\n                onMouseEnter={handleMouseEnter}\n                onMouseLeave={handleMouseLeave}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n            >\n                {renderedChildren}\n            </Trigger>\n\n            {hasText &&\n                hasShown &&\n                createPortal(\n                    <div\n                        ref={tooltipRef}\n                        id={tooltipId}\n                        role=\"tooltip\"\n                        // Nothing references it, and the sentence is already on screen and\n                        // described: left in the tree it is a second copy to read past.\n                        aria-hidden={describesTrigger ? undefined : true}\n                        {...overlayIdentity('tooltip')}\n                        style={getTooltipStyles()}\n                    >\n                        {/* min-w-0 + overflow-wrap let long values wrap within maxWidth. */}\n                        <span\n                            style={{\n                                minWidth: 0,\n                                overflowWrap: 'anywhere',\n                            }}\n                        >\n                            {typeof text === 'string' ? withBreakOpportunities(text) : text}\n                        </span>\n                    </div>,\n                    document.body,\n                )}\n        </>\n    );\n};\n\nexport default Tooltip;\n"],"names":["WRAP_AFTER","withBreakOpportunities","value","chunk","i","jsxs","React","SHRINKABLE_STYLE","FILL_STYLE","VIEWPORT_MARGIN","Tooltip","text","children","delay","wrapChildren","triggerAs","inline","placement","isShrinkable","maxWidth","fill","shouldShow","suppressed","describesTrigger","showOnFocus","triggerStyle","isVisible","setIsVisible","useState","hasShown","setHasShown","timeoutRef","useRef","showFrameRef","cancelPendingShow","useCallback","scheduleVisible","tooltipRef","triggerRef","useTopLayer","tooltipId","useId","hasText","handleMouseEnter","handleMouseLeave","handleFocus","handleBlur","showOnFocusRef","useEffect","switchedOn","_a","wasSuppressed","setWasSuppressed","forceUpdate","handleUpdate","getTooltipStyles","rect","baseStyles","centeredLeft","desired","width","half","min","max","describedBy","useInsertionEffect","ensureOverlayStyles","renderedChildren","jsx","Fragment","createPortal","overlayIdentity"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../../src/components/Tooltip.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useId, useInsertionEffect, useCallback } from 'react';\nimport { createPortal } from 'react-dom';\nimport { FOCUS_RING } from './focusRing';\nimport { ensureOverlayStyles, overlayIdentity } from './portalOverlay';\nimport { useTopLayer } from './topLayer';\n\n// Split after each delimiter so long values (URLs, dotted paths) wrap at \"/\" or \".\"\n// instead of mid-token. <wbr> is copy-safe (a zero-width space would corrupt a copied\n// URL); overflow-wrap still handles a single run too long to fit.\nconst WRAP_AFTER = /(?<=[/\\\\.\\-_?&#=:@])/;\nconst withBreakOpportunities = (value: string): React.ReactNode =>\n    value.split(WRAP_AFTER).map((chunk, i) => (\n        <React.Fragment key={i}>\n            {chunk}\n            <wbr />\n        </React.Fragment>\n    ));\n\ninterface TooltipProps {\n    text: React.ReactNode | string;\n    children: React.ReactNode;\n    delay?: number;\n    wrapChildren?: boolean;\n    placement?: 'top' | 'bottom' | 'left' | 'right';\n    isShrinkable?: boolean;\n    fill?: boolean;\n    /** Max width of tooltip. Default: 320px */\n    maxWidth?: number | string;\n    /** Called synchronously when the trigger is hovered/focused; return false to\n     *  suppress the tooltip for this interaction. Lets wrappers defer expensive\n     *  checks (e.g. truncation measurement) to interaction time instead of mount. */\n    shouldShow?: () => boolean;\n    suppressed?: boolean;\n    triggerAs?: 'div' | 'span';\n    inline?: boolean;\n    /** Whether the tooltip acts as the trigger's accessible description. False where the\n     *  trigger already points at the same sentence on screen, so it is not announced twice. */\n    describesTrigger?: boolean;\n    /** False to open on hover only, e.g. where script moves focus onto the trigger. */\n    showOnFocus?: boolean;\n    /** Makes a trigger that cannot take focus a tab stop. Not for focusable children. */\n    focusableTrigger?: boolean;\n}\n\nconst SHRINKABLE_STYLE: React.CSSProperties = {\n    minWidth: 0,\n    overflow: 'hidden',\n};\n\nconst FILL_STYLE: React.CSSProperties = {\n    flex: 1,\n    minWidth: 0,\n};\n\n/** Kept clear of the viewport edge so a clamped tooltip does not sit flush against it. */\nconst VIEWPORT_MARGIN = 8;\n\nconst Tooltip: React.FC<TooltipProps> = ({\n    text,\n    children,\n    delay = 1,\n    wrapChildren = false,\n    triggerAs = 'div',\n    inline = false,\n    placement = 'top',\n    isShrinkable = false,\n    maxWidth = '320px',\n    fill = false,\n    shouldShow,\n    suppressed = false,\n    describesTrigger = true,\n    showOnFocus = true,\n    focusableTrigger = false,\n}) => {\n    const triggerStyle =\n        isShrinkable || fill\n            ? { ...(isShrinkable ? SHRINKABLE_STYLE : {}), ...(fill ? FILL_STYLE : {}) }\n            : undefined;\n\n    const [isVisible, setIsVisible] = useState(false);\n    // Portal mounts on first show, not on mount: an at-rest tooltip otherwise\n    // costs a hidden document.body node plus a getBoundingClientRect per render —\n    // multiplied by every row in a large table.\n    // Mounted up front so a focusable trigger is described on first focus.\n    const [hasShown, setHasShown] = useState(focusableTrigger);\n    const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n    const showFrameRef = useRef<number | null>(null);\n\n    const cancelPendingShow = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n            timeoutRef.current = null;\n        }\n        if (showFrameRef.current !== null) {\n            cancelAnimationFrame(showFrameRef.current);\n            showFrameRef.current = null;\n        }\n    }, []);\n\n    const scheduleVisible = () => {\n        // Two steps so the portal mounts hidden first and the fade-in transition\n        // still runs on the very first show. The frame is tracked so leave/blur/\n        // unmount can cancel a show that is already past its delay.\n        setHasShown(true);\n        if (showFrameRef.current !== null) {\n            cancelAnimationFrame(showFrameRef.current);\n        }\n        showFrameRef.current = requestAnimationFrame(() => {\n            showFrameRef.current = null;\n            setIsVisible(true);\n        });\n    };\n    const tooltipRef = useRef<HTMLDivElement>(null);\n    const triggerRef = useRef<HTMLDivElement>(null);\n\n    // Tied to visibility, not mount: the node is latched into the DOM after its first show, and\n    // re-entering on each show keeps a tooltip above the panel it is annotating.\n    useTopLayer(tooltipRef, isVisible);\n\n    const tooltipId = useId();\n\n    const hasText = text !== null && text !== undefined && text !== '' && text !== false;\n\n    const handleMouseEnter = (e: React.MouseEvent) => {\n        e.stopPropagation();\n\n        if (!hasText || suppressed || (shouldShow && !shouldShow())) {\n            return;\n        }\n\n        cancelPendingShow();\n\n        timeoutRef.current = setTimeout(() => {\n            scheduleVisible();\n        }, delay * 1000);\n    };\n\n    const handleMouseLeave = (e: React.MouseEvent) => {\n        e.stopPropagation();\n\n        cancelPendingShow();\n        setIsVisible(false);\n    };\n\n    const handleFocus = () => {\n        if (!showOnFocus || !hasText || suppressed || (shouldShow && !shouldShow())) {\n            return;\n        }\n\n        cancelPendingShow();\n        scheduleVisible();\n    };\n\n    const handleBlur = () => {\n        cancelPendingShow();\n        setIsVisible(false);\n    };\n\n    // Turning on while the trigger already holds focus fires no focus event to open on.\n    const showOnFocusRef = useRef(showOnFocus);\n    useEffect(() => {\n        const switchedOn = showOnFocus && !showOnFocusRef.current;\n        showOnFocusRef.current = showOnFocus;\n        if (switchedOn && triggerRef.current?.matches(':focus-within')) {\n            handleFocus();\n        }\n    });\n\n    const [wasSuppressed, setWasSuppressed] = useState(suppressed);\n    if (suppressed !== wasSuppressed) {\n        setWasSuppressed(suppressed);\n        if (suppressed) {\n            setIsVisible(false);\n        }\n    }\n\n    useEffect(() => {\n        if (suppressed) {\n            cancelPendingShow();\n        }\n    }, [suppressed, cancelPendingShow]);\n\n    const [, forceUpdate] = useState({});\n\n    useEffect(() => {\n        // Only a VISIBLE tooltip needs to track scroll/resize; keeping global\n        // listeners per mounted instance made every scroll event fan out across\n        // every tooltip on the page.\n        if (!isVisible) {\n            return () => {\n                cancelPendingShow();\n            };\n        }\n        const handleUpdate = () => {\n            forceUpdate({});\n        };\n\n        window.addEventListener('scroll', handleUpdate, true);\n        window.addEventListener('resize', handleUpdate);\n\n        return () => {\n            cancelPendingShow();\n            window.removeEventListener('scroll', handleUpdate, true);\n            window.removeEventListener('resize', handleUpdate);\n        };\n    }, [isVisible, cancelPendingShow]);\n\n    // The first render that mounts the tooltip has no measured width yet, so the clamp below\n    // cannot run on it. One extra pass once it is in the DOM gives the clamp its measurement\n    // — before the opacity transition finishes, so nothing is seen sliding into place.\n    useEffect(() => {\n        if (isVisible) {\n            forceUpdate({});\n        }\n    }, [isVisible]);\n\n    const getTooltipStyles = (): React.CSSProperties => {\n        if (!triggerRef.current) {\n            return { display: 'none' };\n        }\n\n        const rect = triggerRef.current.getBoundingClientRect();\n\n        const baseStyles: React.CSSProperties = {\n            position: 'fixed',\n            display: 'flex',\n            width: 'max-content',\n            maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,\n            minWidth: '32px',\n            minHeight: '32px',\n            padding: '8px 12px',\n            alignItems: 'center',\n            gap: '8px',\n            borderRadius: '12px',\n            backgroundColor: 'var(--malachite-tooltip-background, rgb(59, 59, 59))',\n            color: 'var(--malachite-tooltip-foreground, rgb(255, 255, 255))',\n            boxShadow: 'var(--malachite-tooltip-shadow, 0px 0px 10px 0px rgba(0, 0, 0, 0.20))',\n            fontSize: '14px',\n            lineHeight: '1.4',\n            whiteSpace: 'normal',\n            textAlign: 'left',\n            pointerEvents: 'none',\n            opacity: isVisible ? 1 : 0,\n            visibility: isVisible ? 'visible' : 'hidden',\n            transition:\n                'opacity 150ms ease-in-out, transform 150ms ease-in-out, visibility 150ms ease-in-out',\n        };\n\n        // A trigger near the viewport edge would otherwise centre a wide tooltip half off\n        // screen, where the panel or the window crops it. Clamping the CENTRE keeps the\n        // `translateX(-50%)` placement honest: the box stays put, it just stops short.\n        const centeredLeft = (): number => {\n            const desired = rect.left + rect.width / 2;\n            const width = tooltipRef.current?.getBoundingClientRect().width ?? 0;\n\n            if (width === 0) {\n                return desired;\n            }\n\n            const half = width / 2;\n            const min = VIEWPORT_MARGIN + half;\n            const max = window.innerWidth - VIEWPORT_MARGIN - half;\n\n            // A tooltip wider than the viewport has no in-bounds centre; leave it centred\n            // rather than pinning it to a nonsensical one.\n            return min > max ? desired : Math.min(Math.max(desired, min), max);\n        };\n\n        switch (placement) {\n            case 'top':\n                return {\n                    ...baseStyles,\n                    top: rect.top - 8,\n                    left: centeredLeft(),\n                    transform: `translate(-50%, -100%) ${isVisible ? 'scale(1)' : 'scale(0.95)'}`,\n                };\n            case 'bottom':\n                return {\n                    ...baseStyles,\n                    top: rect.bottom + 8,\n                    left: centeredLeft(),\n                    transform: `translateX(-50%) ${isVisible ? 'scale(1)' : 'scale(0.95)'}`,\n                };\n            case 'left':\n                return {\n                    ...baseStyles,\n                    top: rect.top + rect.height / 2,\n                    left: rect.left - 8,\n                    transform: `translate(-100%, -50%) ${isVisible ? 'scale(1)' : 'scale(0.95)'}`,\n                };\n            case 'right':\n                return {\n                    ...baseStyles,\n                    top: rect.top + rect.height / 2,\n                    left: rect.right + 8,\n                    transform: `translateY(-50%) ${isVisible ? 'scale(1)' : 'scale(0.95)'}`,\n                };\n            default:\n                return {\n                    ...baseStyles,\n                    top: rect.top - 8,\n                    left: centeredLeft(),\n                    transform: `translate(-50%, -100%) ${isVisible ? 'scale(1)' : 'scale(0.95)'}`,\n                };\n        }\n    };\n\n    // Only reference the tooltip id once the portal can exist — a dangling\n    // aria-describedby (text set, never shown) confuses assistive tech.\n    const describedBy = hasText && hasShown && describesTrigger ? tooltipId : undefined;\n    useInsertionEffect(() => {\n        if (hasText && hasShown) {\n            ensureOverlayStyles();\n        }\n    }, [hasText, hasShown]);\n    const renderedChildren = focusableTrigger ? (\n        children\n    ) : wrapChildren || !React.isValidElement(children) ? (\n        <span aria-describedby={describedBy} style={fill ? FILL_STYLE : undefined}>\n            {children}\n        </span>\n    ) : (\n        React.cloneElement(children as React.ReactElement, {\n            'aria-describedby':\n                [(children as React.ReactElement).props['aria-describedby'], describedBy]\n                    .filter(Boolean)\n                    .join(' ') || undefined,\n        })\n    );\n\n    const Trigger = inline ? 'span' : triggerAs;\n    const isTabStop = focusableTrigger && hasText && !suppressed && showOnFocus;\n\n    // Create the tooltip content without its own shadow root\n    return (\n        <>\n            <Trigger\n                ref={triggerRef}\n                className={`relative ${inline ? 'inline-flex max-w-full align-middle' : 'flex'} items-center${isTabStop ? ` ${FOCUS_RING}` : ''}`}\n                style={triggerStyle}\n                tabIndex={isTabStop ? 0 : undefined}\n                aria-describedby={focusableTrigger ? describedBy : undefined}\n                onMouseEnter={handleMouseEnter}\n                onMouseLeave={handleMouseLeave}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n            >\n                {renderedChildren}\n            </Trigger>\n\n            {hasText &&\n                hasShown &&\n                createPortal(\n                    <div\n                        ref={tooltipRef}\n                        id={tooltipId}\n                        role=\"tooltip\"\n                        // Nothing references it, and the sentence is already on screen and\n                        // described: left in the tree it is a second copy to read past.\n                        aria-hidden={describesTrigger ? undefined : true}\n                        {...overlayIdentity('tooltip')}\n                        style={getTooltipStyles()}\n                    >\n                        {/* min-w-0 + overflow-wrap let long values wrap within maxWidth. */}\n                        <span\n                            style={{\n                                minWidth: 0,\n                                overflowWrap: 'anywhere',\n                            }}\n                        >\n                            {typeof text === 'string' ? withBreakOpportunities(text) : text}\n                        </span>\n                    </div>,\n                    document.body,\n                )}\n        </>\n    );\n};\n\nexport default Tooltip;\n"],"names":["WRAP_AFTER","withBreakOpportunities","value","chunk","i","jsxs","React","SHRINKABLE_STYLE","FILL_STYLE","VIEWPORT_MARGIN","Tooltip","text","children","delay","wrapChildren","triggerAs","inline","placement","isShrinkable","maxWidth","fill","shouldShow","suppressed","describesTrigger","showOnFocus","focusableTrigger","triggerStyle","isVisible","setIsVisible","useState","hasShown","setHasShown","timeoutRef","useRef","showFrameRef","cancelPendingShow","useCallback","scheduleVisible","tooltipRef","triggerRef","useTopLayer","tooltipId","useId","hasText","handleMouseEnter","handleMouseLeave","handleFocus","handleBlur","showOnFocusRef","useEffect","switchedOn","_a","wasSuppressed","setWasSuppressed","forceUpdate","handleUpdate","getTooltipStyles","rect","baseStyles","centeredLeft","desired","width","half","min","max","describedBy","useInsertionEffect","ensureOverlayStyles","renderedChildren","jsx","Trigger","isTabStop","Fragment","FOCUS_RING","createPortal","overlayIdentity"],"mappings":"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"}

package/dist/components/actionMenuStyles.js

@@ -1,7 +1,7 @@
 import { MENU_SPECS as r } from "./floatingMenuGeometry.js";
-import { injectStyleSheet as l } from "./injectStyleSheet.js";
+import { injectStyleSheet as i } from "./injectStyleSheet.js";
 import { ensureOverlayStyles as s } from "./portalOverlay.js";
-import { SELECTED_ROW_BACKGROUND as i, SELECTED_ROW_FOREGROUND as d } from "./selectedRow.js";
+import { SELECTED_ROW_BACKGROUND as l, SELECTED_ROW_FOREGROUND as d } from "./selectedRow.js";
 const y = {
   small: { icon: 16, iconBox: "text-[16px] [&_svg]:size-[16px]!" },
   xsmall: { icon: 11, iconBox: "text-[11px] [&_svg]:size-[11px]!" }
@@ -9,21 +9,29 @@ const y = {
   minWidth: 0,
   overflow: "hidden",
   textOverflow: "ellipsis"
+}, w = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  overflow: "hidden",
+  clipPath: "inset(50%)",
+  whiteSpace: "nowrap"
 }, m = {
   padding: "6px 10px",
   fontSize: "var(--malachite-font-size-small, 13px)",
   color: "var(--malachite-text-dimmed, rgb(161, 161, 161))",
   userSelect: "none"
-}, u = {
+}, h = {
   ...m,
   color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
-}, g = { display: "inline-flex", flexShrink: 0 }, R = {
-  ...g,
+}, u = { display: "inline-flex", flexShrink: 0 }, R = {
+  ...u,
   color: "var(--malachite-text-dimmed, rgb(161, 161, 161))"
-}, n = "malachite-actionmenu-item-icon", a = "malachite-actionmenu-item", h = "data-malachite-actionmenu-tag", w = { display: "inline-flex", flexShrink: 0 }, I = { [h]: "" }, x = [
+}, n = "malachite-actionmenu-item-icon", a = "malachite-actionmenu-item", g = "data-malachite-actionmenu-tag", I = { display: "inline-flex", flexShrink: 0 }, L = { [g]: "" }, x = [
   `.${a} { background: transparent; }`,
   `.${a}:not(:disabled):hover { background: var(--malachite-card-dimmed-background, rgb(247, 247, 247)); }`,
   `.${a}:focus-visible { outline: 2px solid var(--malachite-text-primary, rgb(10, 10, 10)); outline-offset: -2px; }`
@@ -31,18 +39,18 @@ const y = {
   `${t} { color: var(--malachite-text-primary, rgb(10, 10, 10)); }`,
   `${t}[data-tone="muted"] { color: var(--malachite-text-secondary, rgb(123, 123, 123)); }`,
   `${t} > .${n} { color: var(--malachite-text-dimmed, rgb(161, 161, 161)); }`,
-  `${t}[aria-current] { color: ${d}; background: ${i}; }`,
+  `${t}[aria-current] { color: ${d}; background: ${l}; }`,
   `${c} { color: var(--malachite-text-destructive, rgb(237, 53, 54)); background: var(--malachite-error-background-glass, rgba(197, 63, 63, 0.08)); }`,
   `${c} > .${n} { color: inherit; }`
-], v = () => l("malachite-actionmenu-danger-hover-styles", b), A = () => (s(), v(), l("malachite-actionmenu-item-styles", x)), S = {
+], v = () => i("malachite-actionmenu-danger-hover-styles", b), A = () => (s(), v(), i("malachite-actionmenu-item-styles", x)), S = {
   default: "var(--malachite-text-primary, rgb(10, 10, 10))",
   muted: "var(--malachite-text-secondary, rgb(123, 123, 123))"
-}, f = (e, o) => {
+}, E = (e, o) => {
   if (e.danger === !0)
     return "var(--malachite-text-destructive, rgb(237, 53, 54))";
   if (e.danger !== "hover")
     return e.current ? d : S[o];
-}, $ = (e, o = "default") => e.type === "text" ? u : e.type === "divider" ? {
+}, $ = (e, o = "default") => e.type === "text" ? h : e.type === "divider" ? {
   height: 1,
   background: "var(--malachite-card-border, rgb(232, 232, 232))",
   margin: "4px 0"
@@ -54,8 +62,8 @@ const y = {
   borderRadius: 8,
   fontSize: "var(--malachite-font-size-small, 13px)",
   fontWeight: 400,
-  color: f(e, o),
-  background: e.current && e.danger !== "hover" ? i : void 0,
+  color: E(e, o),
+  background: e.current && e.danger !== "hover" ? l : void 0,
   cursor: e.disabled ? "not-allowed" : "pointer",
   opacity: e.disabled ? 0.5 : 1,
   userSelect: "none",
@@ -66,7 +74,7 @@ const y = {
   textDecoration: "none",
   boxSizing: "border-box",
   width: "100%"
-}, L = (e) => ({
+}, N = (e) => ({
   position: "fixed",
   top: (e == null ? void 0 : e.top) ?? 0,
   left: (e == null ? void 0 : e.left) ?? 0,
@@ -88,17 +96,18 @@ export {
   m as EMPTY_ITEM_STYLE,
   a as ITEM_CLASS,
   n as ITEM_ICON_CLASS,
-  g as ITEM_ICON_LAYOUT,
+  u as ITEM_ICON_LAYOUT,
   R as ITEM_ICON_STYLE,
   O as LABEL_STYLE,
-  h as TAG_HOST_ATTR,
-  I as TAG_HOST_PROPS,
-  w as TAG_HOST_STYLE,
-  u as TEXT_ITEM_STYLE,
+  g as TAG_HOST_ATTR,
+  L as TAG_HOST_PROPS,
+  I as TAG_HOST_STYLE,
+  h as TEXT_ITEM_STYLE,
   y as TRIGGER_SIZES,
+  w as VISUALLY_HIDDEN_STYLE,
   A as ensureActionMenuStyles,
   v as ensureDangerOnHoverStyles,
   $ as itemStyle,
-  L as menuStyle
+  N as menuStyle
 };
 //# sourceMappingURL=actionMenuStyles.js.map

package/dist/components/actionMenuStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"actionMenuStyles.js","sources":["../../src/components/actionMenuStyles.ts"],"sourcesContent":["import type React from 'react';\nimport type { ActionMenuItem } from './actionMenuTypes';\nimport { MENU_SPECS, type MenuGeometry } from './floatingMenuGeometry';\nimport { injectStyleSheet } from './injectStyleSheet';\nimport { ensureOverlayStyles } from './portalOverlay';\nimport { SELECTED_ROW_BACKGROUND, SELECTED_ROW_FOREGROUND } from './selectedRow';\n\nexport const TRIGGER_SIZES: Record<'small' | 'xsmall', { icon: number; iconBox: string }> = {\n    small: { icon: 16, iconBox: 'text-[16px] [&_svg]:size-[16px]!' },\n    xsmall: { icon: 11, iconBox: 'text-[11px] [&_svg]:size-[11px]!' },\n};\n\nexport const LABEL_STYLE: React.CSSProperties = {\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n};\n\nexport const EMPTY_ITEM_STYLE: React.CSSProperties = {\n    padding: '6px 10px',\n    fontSize: 'var(--malachite-font-size-small, 13px)',\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n    userSelect: 'none',\n};\n\nexport const TEXT_ITEM_STYLE: React.CSSProperties = {\n    ...EMPTY_ITEM_STYLE,\n    color: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n};\n\nexport const ITEM_ICON_LAYOUT: React.CSSProperties = { display: 'inline-flex', flexShrink: 0 };\n\nexport const ITEM_ICON_STYLE: React.CSSProperties = {\n    ...ITEM_ICON_LAYOUT,\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n};\n\nexport const ITEM_ICON_CLASS = 'malachite-actionmenu-item-icon';\n\nexport const ITEM_CLASS = 'malachite-actionmenu-item';\n\nexport const TAG_HOST_ATTR = 'data-malachite-actionmenu-tag' as const;\n\nexport const TAG_HOST_STYLE: React.CSSProperties = { display: 'inline-flex', flexShrink: 0 };\n\nexport const TAG_HOST_PROPS = { [TAG_HOST_ATTR]: '' };\n\nconst ITEM_RULES = [\n    `.${ITEM_CLASS} { background: transparent; }`,\n    `.${ITEM_CLASS}:not(:disabled):hover { background: var(--malachite-card-dimmed-background, rgb(247, 247, 247)); }`,\n    `.${ITEM_CLASS}:focus-visible { outline: 2px solid var(--malachite-text-primary, rgb(10, 10, 10)); outline-offset: -2px; }`,\n];\n\nconst DANGER_ON_HOVER = `.${ITEM_CLASS}[data-danger=\"hover\"]`;\nconst DANGER_ON_HOVER_ACTIVE = `${DANGER_ON_HOVER}:not(:disabled):is(:hover, :focus-visible)`;\n\nconst DANGER_ON_HOVER_RULES = [\n    `${DANGER_ON_HOVER} { color: var(--malachite-text-primary, rgb(10, 10, 10)); }`,\n    `${DANGER_ON_HOVER}[data-tone=\"muted\"] { color: var(--malachite-text-secondary, rgb(123, 123, 123)); }`,\n    `${DANGER_ON_HOVER} > .${ITEM_ICON_CLASS} { color: var(--malachite-text-dimmed, rgb(161, 161, 161)); }`,\n    `${DANGER_ON_HOVER}[aria-current] { color: ${SELECTED_ROW_FOREGROUND}; background: ${SELECTED_ROW_BACKGROUND}; }`,\n    `${DANGER_ON_HOVER_ACTIVE} { color: var(--malachite-text-destructive, rgb(237, 53, 54)); background: var(--malachite-error-background-glass, rgba(197, 63, 63, 0.08)); }`,\n    `${DANGER_ON_HOVER_ACTIVE} > .${ITEM_ICON_CLASS} { color: inherit; }`,\n];\n\nexport const ensureDangerOnHoverStyles = (): CSSStyleSheet | null =>\n    injectStyleSheet('malachite-actionmenu-danger-hover-styles', DANGER_ON_HOVER_RULES);\n\nexport const ensureActionMenuStyles = (): CSSStyleSheet | null => {\n    ensureOverlayStyles();\n    ensureDangerOnHoverStyles();\n    return injectStyleSheet('malachite-actionmenu-item-styles', ITEM_RULES);\n};\n\nexport type ActionMenuTone = 'default' | 'muted';\n\nconst ITEM_TEXT: Record<ActionMenuTone, string> = {\n    default: 'var(--malachite-text-primary, rgb(10, 10, 10))',\n    muted: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n};\n\ntype ActionItem = Exclude<ActionMenuItem, { type: 'text' } | { type: 'divider' }>;\n\nconst actionItemColor = (item: ActionItem, tone: ActionMenuTone): string | undefined => {\n    if (item.danger === true) {\n        return 'var(--malachite-text-destructive, rgb(237, 53, 54))';\n    }\n    if (item.danger === 'hover') {\n        return undefined;\n    }\n    if (item.current) {\n        return SELECTED_ROW_FOREGROUND;\n    }\n    return ITEM_TEXT[tone];\n};\n\nexport const itemStyle = (\n    item: ActionMenuItem,\n    tone: ActionMenuTone = 'default',\n): React.CSSProperties => {\n    if (item.type === 'text') {\n        return TEXT_ITEM_STYLE;\n    }\n    if (item.type === 'divider') {\n        return {\n            height: 1,\n            background: 'var(--malachite-card-border, rgb(232, 232, 232))',\n            margin: '4px 0',\n        };\n    }\n    return {\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        padding: '6px 10px',\n        borderRadius: 8,\n        fontSize: 'var(--malachite-font-size-small, 13px)',\n        fontWeight: 400,\n        color: actionItemColor(item, tone),\n        background: item.current && item.danger !== 'hover' ? SELECTED_ROW_BACKGROUND : undefined,\n        cursor: item.disabled ? 'not-allowed' : 'pointer',\n        opacity: item.disabled ? 0.5 : 1,\n        userSelect: 'none',\n        whiteSpace: 'nowrap',\n        overflow: 'hidden',\n        border: 'none',\n        textAlign: 'left',\n        textDecoration: 'none',\n        boxSizing: 'border-box',\n        width: '100%',\n    };\n};\n\nexport const menuStyle = (position: MenuGeometry | null): React.CSSProperties => ({\n    position: 'fixed',\n    top: position?.top ?? 0,\n    left: position?.left ?? 0,\n    width: position?.width,\n    maxHeight: position?.maxHeight,\n    overflowY: 'auto',\n    background: MENU_SPECS.options.background,\n    border: MENU_SPECS.options.border,\n    borderRadius: MENU_SPECS.options.radius,\n    boxShadow: MENU_SPECS.options.shadow,\n    padding: MENU_SPECS.options.padding,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    visibility: position ? 'visible' : 'hidden',\n    opacity: position ? 1 : 0,\n});\n"],"names":["TRIGGER_SIZES","LABEL_STYLE","EMPTY_ITEM_STYLE","TEXT_ITEM_STYLE","ITEM_ICON_LAYOUT","ITEM_ICON_STYLE","ITEM_ICON_CLASS","ITEM_CLASS","TAG_HOST_ATTR","TAG_HOST_STYLE","TAG_HOST_PROPS","ITEM_RULES","DANGER_ON_HOVER","DANGER_ON_HOVER_ACTIVE","DANGER_ON_HOVER_RULES","SELECTED_ROW_FOREGROUND","SELECTED_ROW_BACKGROUND","ensureDangerOnHoverStyles","injectStyleSheet","ensureActionMenuStyles","ensureOverlayStyles","ITEM_TEXT","actionItemColor","item","tone","itemStyle","menuStyle","position","MENU_SPECS"],"mappings":"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"}
+{"version":3,"file":"actionMenuStyles.js","sources":["../../src/components/actionMenuStyles.ts"],"sourcesContent":["import type React from 'react';\nimport type { ActionMenuItem } from './actionMenuTypes';\nimport { MENU_SPECS, type MenuGeometry } from './floatingMenuGeometry';\nimport { injectStyleSheet } from './injectStyleSheet';\nimport { ensureOverlayStyles } from './portalOverlay';\nimport { SELECTED_ROW_BACKGROUND, SELECTED_ROW_FOREGROUND } from './selectedRow';\n\nexport const TRIGGER_SIZES: Record<'small' | 'xsmall', { icon: number; iconBox: string }> = {\n    small: { icon: 16, iconBox: 'text-[16px] [&_svg]:size-[16px]!' },\n    xsmall: { icon: 11, iconBox: 'text-[11px] [&_svg]:size-[11px]!' },\n};\n\nexport const LABEL_STYLE: React.CSSProperties = {\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n};\n\n// Not `sr-only`: the menu portals outside the shadow root's stylesheet.\nexport const VISUALLY_HIDDEN_STYLE: React.CSSProperties = {\n    position: 'absolute',\n    width: 1,\n    height: 1,\n    margin: -1,\n    overflow: 'hidden',\n    clipPath: 'inset(50%)',\n    whiteSpace: 'nowrap',\n};\n\nexport const EMPTY_ITEM_STYLE: React.CSSProperties = {\n    padding: '6px 10px',\n    fontSize: 'var(--malachite-font-size-small, 13px)',\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n    userSelect: 'none',\n};\n\nexport const TEXT_ITEM_STYLE: React.CSSProperties = {\n    ...EMPTY_ITEM_STYLE,\n    color: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n};\n\nexport const ITEM_ICON_LAYOUT: React.CSSProperties = { display: 'inline-flex', flexShrink: 0 };\n\nexport const ITEM_ICON_STYLE: React.CSSProperties = {\n    ...ITEM_ICON_LAYOUT,\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n};\n\nexport const ITEM_ICON_CLASS = 'malachite-actionmenu-item-icon';\n\nexport const ITEM_CLASS = 'malachite-actionmenu-item';\n\nexport const TAG_HOST_ATTR = 'data-malachite-actionmenu-tag' as const;\n\nexport const TAG_HOST_STYLE: React.CSSProperties = { display: 'inline-flex', flexShrink: 0 };\n\nexport const TAG_HOST_PROPS = { [TAG_HOST_ATTR]: '' };\n\nconst ITEM_RULES = [\n    `.${ITEM_CLASS} { background: transparent; }`,\n    `.${ITEM_CLASS}:not(:disabled):hover { background: var(--malachite-card-dimmed-background, rgb(247, 247, 247)); }`,\n    `.${ITEM_CLASS}:focus-visible { outline: 2px solid var(--malachite-text-primary, rgb(10, 10, 10)); outline-offset: -2px; }`,\n];\n\nconst DANGER_ON_HOVER = `.${ITEM_CLASS}[data-danger=\"hover\"]`;\nconst DANGER_ON_HOVER_ACTIVE = `${DANGER_ON_HOVER}:not(:disabled):is(:hover, :focus-visible)`;\n\nconst DANGER_ON_HOVER_RULES = [\n    `${DANGER_ON_HOVER} { color: var(--malachite-text-primary, rgb(10, 10, 10)); }`,\n    `${DANGER_ON_HOVER}[data-tone=\"muted\"] { color: var(--malachite-text-secondary, rgb(123, 123, 123)); }`,\n    `${DANGER_ON_HOVER} > .${ITEM_ICON_CLASS} { color: var(--malachite-text-dimmed, rgb(161, 161, 161)); }`,\n    `${DANGER_ON_HOVER}[aria-current] { color: ${SELECTED_ROW_FOREGROUND}; background: ${SELECTED_ROW_BACKGROUND}; }`,\n    `${DANGER_ON_HOVER_ACTIVE} { color: var(--malachite-text-destructive, rgb(237, 53, 54)); background: var(--malachite-error-background-glass, rgba(197, 63, 63, 0.08)); }`,\n    `${DANGER_ON_HOVER_ACTIVE} > .${ITEM_ICON_CLASS} { color: inherit; }`,\n];\n\nexport const ensureDangerOnHoverStyles = (): CSSStyleSheet | null =>\n    injectStyleSheet('malachite-actionmenu-danger-hover-styles', DANGER_ON_HOVER_RULES);\n\nexport const ensureActionMenuStyles = (): CSSStyleSheet | null => {\n    ensureOverlayStyles();\n    ensureDangerOnHoverStyles();\n    return injectStyleSheet('malachite-actionmenu-item-styles', ITEM_RULES);\n};\n\nexport type ActionMenuTone = 'default' | 'muted';\n\nconst ITEM_TEXT: Record<ActionMenuTone, string> = {\n    default: 'var(--malachite-text-primary, rgb(10, 10, 10))',\n    muted: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n};\n\ntype ActionItem = Exclude<ActionMenuItem, { type: 'text' } | { type: 'divider' }>;\n\nconst actionItemColor = (item: ActionItem, tone: ActionMenuTone): string | undefined => {\n    if (item.danger === true) {\n        return 'var(--malachite-text-destructive, rgb(237, 53, 54))';\n    }\n    if (item.danger === 'hover') {\n        return undefined;\n    }\n    if (item.current) {\n        return SELECTED_ROW_FOREGROUND;\n    }\n    return ITEM_TEXT[tone];\n};\n\nexport const itemStyle = (\n    item: ActionMenuItem,\n    tone: ActionMenuTone = 'default',\n): React.CSSProperties => {\n    if (item.type === 'text') {\n        return TEXT_ITEM_STYLE;\n    }\n    if (item.type === 'divider') {\n        return {\n            height: 1,\n            background: 'var(--malachite-card-border, rgb(232, 232, 232))',\n            margin: '4px 0',\n        };\n    }\n    return {\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        padding: '6px 10px',\n        borderRadius: 8,\n        fontSize: 'var(--malachite-font-size-small, 13px)',\n        fontWeight: 400,\n        color: actionItemColor(item, tone),\n        background: item.current && item.danger !== 'hover' ? SELECTED_ROW_BACKGROUND : undefined,\n        cursor: item.disabled ? 'not-allowed' : 'pointer',\n        opacity: item.disabled ? 0.5 : 1,\n        userSelect: 'none',\n        whiteSpace: 'nowrap',\n        overflow: 'hidden',\n        border: 'none',\n        textAlign: 'left',\n        textDecoration: 'none',\n        boxSizing: 'border-box',\n        width: '100%',\n    };\n};\n\nexport const menuStyle = (position: MenuGeometry | null): React.CSSProperties => ({\n    position: 'fixed',\n    top: position?.top ?? 0,\n    left: position?.left ?? 0,\n    width: position?.width,\n    maxHeight: position?.maxHeight,\n    overflowY: 'auto',\n    background: MENU_SPECS.options.background,\n    border: MENU_SPECS.options.border,\n    borderRadius: MENU_SPECS.options.radius,\n    boxShadow: MENU_SPECS.options.shadow,\n    padding: MENU_SPECS.options.padding,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    visibility: position ? 'visible' : 'hidden',\n    opacity: position ? 1 : 0,\n});\n"],"names":["TRIGGER_SIZES","LABEL_STYLE","VISUALLY_HIDDEN_STYLE","EMPTY_ITEM_STYLE","TEXT_ITEM_STYLE","ITEM_ICON_LAYOUT","ITEM_ICON_STYLE","ITEM_ICON_CLASS","ITEM_CLASS","TAG_HOST_ATTR","TAG_HOST_STYLE","TAG_HOST_PROPS","ITEM_RULES","DANGER_ON_HOVER","DANGER_ON_HOVER_ACTIVE","DANGER_ON_HOVER_RULES","SELECTED_ROW_FOREGROUND","SELECTED_ROW_BACKGROUND","ensureDangerOnHoverStyles","injectStyleSheet","ensureActionMenuStyles","ensureOverlayStyles","ITEM_TEXT","actionItemColor","item","tone","itemStyle","menuStyle","position","MENU_SPECS"],"mappings":";;;;AAOO,MAAMA,IAA+E;AAAA,EACxF,OAAO,EAAE,MAAM,IAAI,SAAS,mCAAA;AAAA,EAC5B,QAAQ,EAAE,MAAM,IAAI,SAAS,mCAAA;AACjC,GAEaC,IAAmC;AAAA,EAC5C,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAClB,GAGaC,IAA6C;AAAA,EACtD,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAChB,GAEaC,IAAwC;AAAA,EACjD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAChB,GAEaC,IAAuC;AAAA,EAChD,GAAGD;AAAA,EACH,OAAO;AAAA,EACP,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AAChB,GAEaE,IAAwC,EAAE,SAAS,eAAe,YAAY,EAAA,GAE9EC,IAAuC;AAAA,EAChD,GAAGD;AAAA,EACH,OAAO;AACX,GAEaE,IAAkB,kCAElBC,IAAa,6BAEbC,IAAgB,iCAEhBC,IAAsC,EAAE,SAAS,eAAe,YAAY,EAAA,GAE5EC,IAAiB,EAAE,CAACF,CAAa,GAAG,GAAA,GAE3CG,IAAa;AAAA,EACf,IAAIJ,CAAU;AAAA,EACd,IAAIA,CAAU;AAAA,EACd,IAAIA,CAAU;AAClB,GAEMK,IAAkB,IAAIL,CAAU,yBAChCM,IAAyB,GAAGD,CAAe,8CAE3CE,IAAwB;AAAA,EAC1B,GAAGF,CAAe;AAAA,EAClB,GAAGA,CAAe;AAAA,EAClB,GAAGA,CAAe,OAAON,CAAe;AAAA,EACxC,GAAGM,CAAe,2BAA2BG,CAAuB,iBAAiBC,CAAuB;AAAA,EAC5G,GAAGH,CAAsB;AAAA,EACzB,GAAGA,CAAsB,OAAOP,CAAe;AACnD,GAEaW,IAA4B,MACrCC,EAAiB,4CAA4CJ,CAAqB,GAEzEK,IAAyB,OAClCC,EAAA,GACAH,EAAA,GACOC,EAAiB,oCAAoCP,CAAU,IAKpEU,IAA4C;AAAA,EAC9C,SAAS;AAAA,EACT,OAAO;AACX,GAIMC,IAAkB,CAACC,GAAkBC,MAA6C;AACpF,MAAID,EAAK,WAAW;AAChB,WAAO;AAEX,MAAIA,EAAK,WAAW;AAGpB,WAAIA,EAAK,UACER,IAEJM,EAAUG,CAAI;AACzB,GAEaC,IAAY,CACrBF,GACAC,IAAuB,cAEnBD,EAAK,SAAS,SACPpB,IAEPoB,EAAK,SAAS,YACP;AAAA,EACH,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,QAAQ;AAAA,IAGT;AAAA,EACH,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,SAAS;AAAA,EACT,cAAc;AAAA,EACd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAOD,EAAgBC,GAAMC,CAAI;AAAA,EACjC,YAAYD,EAAK,WAAWA,EAAK,WAAW,UAAUP,IAA0B;AAAA,EAChF,QAAQO,EAAK,WAAW,gBAAgB;AAAA,EACxC,SAASA,EAAK,WAAW,MAAM;AAAA,EAC/B,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,OAAO;AAAA,GAIFG,IAAY,CAACC,OAAwD;AAAA,EAC9E,UAAU;AAAA,EACV,MAAKA,KAAA,gBAAAA,EAAU,QAAO;AAAA,EACtB,OAAMA,KAAA,gBAAAA,EAAU,SAAQ;AAAA,EACxB,OAAOA,KAAA,gBAAAA,EAAU;AAAA,EACjB,WAAWA,KAAA,gBAAAA,EAAU;AAAA,EACrB,WAAW;AAAA,EACX,YAAYC,EAAW,QAAQ;AAAA,EAC/B,QAAQA,EAAW,QAAQ;AAAA,EAC3B,cAAcA,EAAW,QAAQ;AAAA,EACjC,WAAWA,EAAW,QAAQ;AAAA,EAC9B,SAASA,EAAW,QAAQ;AAAA,EAC5B,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK;AAAA,EACL,YAAYD,IAAW,YAAY;AAAA,EACnC,SAASA,IAAW,IAAI;AAC5B;"}

package/dist/index.d.ts

@@ -103,6 +103,8 @@ export declare type ActionMenuItem = {
     onClick?: () => void;
     /** Renders a link; a plain click runs `onClick` instead of following it, when one is given. */
     href?: string;
+    /** Where `href` opens; `'_blank'` also adds `noopener noreferrer`. */
+    target?: default_2.HTMLAttributeAnchorTarget;
     disabled?: boolean;
     /** `'hover'` turns the item destructive only on hover or focus. */
     danger?: boolean | 'hover';
@@ -4856,6 +4858,7 @@ export declare interface TagProps {
     /** The cursor over a tag that is not clickable. Unset, it is whatever an ancestor sets
      *  through `--malachite-ctx-tag-cursor` (a `NavItem` row sets its pointer), else the arrow. */
     pointerType?: 'pointer' | 'default';
+    /** Makes it a button, unless `onRemove` is set; keep `value` and `icon` non-interactive. */
     onClick?: () => void;
     onRemove?: (e: default_2.MouseEvent) => void;
     /** Explains the tag on hover. Takes the place of the truncation tooltip, which only repeats
@@ -5101,6 +5104,8 @@ declare interface TooltipProps {
     describesTrigger?: boolean;
     /** False to open on hover only, e.g. where script moves focus onto the trigger. */
     showOnFocus?: boolean;
+    /** Makes a trigger that cannot take focus a tab stop. Not for focusable children. */
+    focusableTrigger?: boolean;
 }
 
 export declare const TrashIcon: React.FC<IconProps_106>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackone/malachite",
-  "version": "2.54.0",
+  "version": "2.55.0",
   "description": "StackOne's themeable React component library — Shadow DOM isolated, scoped Tailwind, theme-token driven.",
   "license": "MIT",
   "author": "StackOne",