impact-nova 2.2.5 → 2.2.7

package/dist/components/feedback/tooltip/tooltip.js

@@ -1,45 +1,82 @@
-import { jsx as i, jsxs as m } from "react/jsx-runtime";
-import * as s from "react";
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import * as T from "react";
 import * as r from "@radix-ui/react-tooltip";
-import { wrapRadixPart as c } from "../../../lib/primitives/create-compound.js";
-import { cn as a } from "../../../lib/utils.js";
-import { tooltipVariants as f } from "./tooltip.variants.js";
-function g(t) {
+import { wrapRadixPart as y } from "../../../lib/primitives/create-compound.js";
+import { useOverlayPortalContainer as C } from "../../../lib/overlay/overlay-portal-context.js";
+import { clearTooltipContentPointerGestureEnd as k, markTooltipContentPointerGestureStart as b } from "../../../lib/tooltip/tooltip-content-interaction.js";
+import { cn as l } from "../../../lib/utils.js";
+import { tooltipVariants as v } from "./tooltip.variants.js";
+function w(t) {
   return t === "primary" ? "default" : t ?? "tertiary";
 }
-const x = r.Provider, N = (t) => /* @__PURE__ */ i(r.Root, { "data-component": "tooltip", ...t }), R = c(
+const G = ({
+  disableHoverableContent: t = !1,
+  ...i
+}) => /* @__PURE__ */ n(
+  r.Provider,
+  {
+    disableHoverableContent: t,
+    ...i
+  }
+), A = ({
+  disableHoverableContent: t = !1,
+  ...i
+}) => /* @__PURE__ */ n(
+  r.Root,
+  {
+    "data-component": "tooltip",
+    disableHoverableContent: t,
+    ...i
+  }
+), E = y(
   "tooltip",
   "trigger",
   "TooltipTrigger",
   r.Trigger
-), u = s.forwardRef(
+), x = T.forwardRef(
   ({
     className: t,
-    sideOffset: n = 4,
-    variant: l = "tertiary",
-    showArrow: p = !0,
+    sideOffset: i = 4,
+    variant: p = "tertiary",
+    showArrow: s = !0,
+    onPointerDown: m,
+    onPointerUp: c,
+    onClick: d,
+    onDoubleClick: f,
     ...e
-  }, d) => {
-    const o = g(l);
-    return /* @__PURE__ */ i(r.Portal, { children: /* @__PURE__ */ m(
+  }, P) => {
+    const a = w(p), g = C();
+    return /* @__PURE__ */ n(r.Portal, { container: g, children: /* @__PURE__ */ u(
       r.Content,
       {
-        ref: d,
-        sideOffset: n,
+        ref: P,
+        sideOffset: i,
         "data-component": "tooltip-content",
-        "data-variant": o,
-        className: a(f({ variant: o }), t),
+        "data-variant": a,
+        className: l(v({ variant: a }), t),
+        onPointerDown: (o) => {
+          b(), o.stopPropagation(), m?.(o);
+        },
+        onPointerUp: (o) => {
+          k(), o.stopPropagation(), c?.(o);
+        },
+        onClick: (o) => {
+          o.stopPropagation(), d?.(o);
+        },
+        onDoubleClick: (o) => {
+          o.stopPropagation(), f?.(o);
+        },
         ...e,
         children: [
           e.children,
-          p && /* @__PURE__ */ i(
+          s && /* @__PURE__ */ n(
             r.Arrow,
             {
-              className: a(
+              className: l(
                 "fill-current",
-                o === "default" && "fill-brand",
-                o === "secondary" && "fill-background stroke-border",
-                o === "tertiary" && "fill-foreground"
+                a === "default" && "fill-brand",
+                a === "secondary" && "fill-background stroke-border",
+                a === "tertiary" && "fill-foreground"
               )
             }
           )
@@ -48,10 +85,10 @@ const x = r.Provider, N = (t) => /* @__PURE__ */ i(r.Root, { "data-component": "
     ) });
   }
 );
-u.displayName = r.Content.displayName;
+x.displayName = r.Content.displayName;
 export {
-  N as Tooltip,
-  u as TooltipContent,
-  x as TooltipProvider,
-  R as TooltipTrigger
+  A as Tooltip,
+  x as TooltipContent,
+  G as TooltipProvider,
+  E as TooltipTrigger
 };

package/dist/components/feedback/tooltip/tooltip.variants.js

@@ -1,6 +1,6 @@
 import { cva as t } from "class-variance-authority";
 const o = t(
-  "z-[100] overflow-hidden rounded-md px-4 py-2 text-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin] motion-reduce:animate-none motion-reduce:transition-none",
+  "z-[100] select-text overflow-hidden rounded-md px-4 py-2 text-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin] motion-reduce:animate-none motion-reduce:transition-none",
   {
     variants: {
       variant: {

package/dist/components/feedback/tooltip/use-overflow-tooltip.d.ts

@@ -0,0 +1,3 @@
+import { UseOverflowTooltipOptions, UseOverflowTooltipResult } from './overflow-tooltip.types';
+import * as React from 'react';
+export declare function useOverflowTooltip(children: React.ReactNode, { content, overflowMode, alwaysShow, disabled, focusable, contentDependency, }?: UseOverflowTooltipOptions): UseOverflowTooltipResult;

package/dist/components/feedback/tooltip/use-overflow-tooltip.js

@@ -0,0 +1,109 @@
+import * as t from "react";
+import { isTextOverflowing as L } from "../../../lib/overflow/is-text-overflowing.js";
+const H = 500;
+function N(o, s) {
+  return o !== void 0 ? o : typeof s == "string" ? s : null;
+}
+function B(o, {
+  content: s,
+  overflowMode: p = "ellipsis",
+  alwaysShow: i = !1,
+  disabled: f = !1,
+  focusable: d = !1,
+  contentDependency: h
+} = {}) {
+  const g = t.useRef(null), a = t.useRef(!1), u = t.useRef(
+    null
+  ), m = t.useRef(null), [D, r] = t.useState(!1), [I, n] = t.useState(!1), O = t.useRef(!1), v = t.useRef(!1), T = N(s, o), P = typeof T == "string" ? T.trim().length > 0 : T != null, l = () => {
+    u.current && (clearTimeout(u.current), u.current = null);
+  }, c = () => {
+    const e = m.current;
+    e && (document.removeEventListener("scroll", e, !0), m.current = null);
+  }, A = () => {
+    l(), n(!1), r(!1);
+  }, _ = () => {
+    c();
+    const e = () => {
+      a.current = !1, A(), c();
+    };
+    m.current = e, document.addEventListener("scroll", e, {
+      capture: !0,
+      passive: !0
+    });
+  };
+  t.useEffect(() => {
+    r(!1), n(!1), l(), c();
+  }, [h, s, o, i, f, p]), t.useEffect(
+    () => () => {
+      l(), c();
+    },
+    []
+  );
+  const k = t.useCallback((e) => {
+    g.current = e;
+  }, []), E = (e) => i || L(e, p), C = (e, R) => {
+    if (!(f || !P)) {
+      if (E(e)) {
+        r(!0), n(!0);
+        return;
+      }
+      r(!1), n(!1);
+    }
+  }, F = (e) => {
+    l(), u.current = setTimeout(() => {
+      u.current = null, a.current && C(e);
+    }, H);
+  };
+  return {
+    setTriggerRef: k,
+    onTriggerPointerEnter: (e) => {
+      if (!(f || !P)) {
+        if (a.current = !0, _(), i) {
+          C(e.currentTarget);
+          return;
+        }
+        F(e.currentTarget);
+      }
+    },
+    onTriggerPointerLeave: () => {
+      a.current = !1, l();
+    },
+    onTriggerFocus: d ? (e) => {
+      C(e.currentTarget);
+    } : void 0,
+    onContentPointerEnter: () => {
+      O.current = !0, n(!0);
+    },
+    onContentPointerDown: () => {
+      v.current = !0, n(!0);
+    },
+    onContentPointerLeave: () => {
+      O.current = !1;
+    },
+    onContentPointerUp: () => {
+      v.current = !1;
+    },
+    triggerTabIndex: d ? 0 : void 0,
+    isTooltipArmed: D,
+    isTooltipOpen: I,
+    tooltipContent: T,
+    recheckOverflow: () => {
+      const e = g.current;
+      return !e || f || !P ? !1 : E(e) ? (r(!0), !0) : (r(!1), n(!1), !1);
+    },
+    handleTooltipOpenChange: (e) => {
+      if (!e && (O.current || v.current) || e && !D && !i || (n(e), e))
+        return;
+      c();
+      const R = g.current;
+      if (!R) {
+        r(!1);
+        return;
+      }
+      !i && !L(R, p) && r(!1);
+    }
+  };
+}
+export {
+  B as useOverflowTooltip
+};

package/dist/components/flows/command-palette/shortcut-settings.js

@@ -1,28 +1,47 @@
-import { jsx as r, jsxs as h, Fragment as j } from "react/jsx-runtime";
-import * as i from "react";
-import { Person as z, Monitor as G, PriorityAlert as U, Locked as T, Reset as q } from "impact-nova-icons";
+import { jsx as r, jsxs as h, Fragment as z } from "react/jsx-runtime";
+import * as o from "react";
+import { Person as G, Monitor as U, PriorityAlert as q, Locked as O, Reset as B } from "impact-nova-icons";
 import { cn as p } from "../../../lib/utils.js";
-import { ModuleRegistry as B, AllCommunityModule as $ } from "ag-grid-community";
-import { AllEnterpriseModule as H } from "ag-grid-enterprise";
-import { DataTable as V, DataTableContent as J } from "../../data/data-table/data-table.js";
+import { Kbd as $ } from "../../primitives/kbd/kbd.js";
+import { keybindingToString as H } from "../../primitives/kbd/keybinding-display.js";
+import { OverflowTooltip as A } from "../../feedback/tooltip/overflow-tooltip.js";
+import { ModuleRegistry as V, AllCommunityModule as J } from "ag-grid-community";
+import { AllEnterpriseModule as Q } from "ag-grid-enterprise";
+import { DataTable as X, DataTableContent as Y } from "../../data/data-table/data-table.js";
 import { AG_CELL_NO_PADDING as F } from "../../data/ag-grid-react/cell-renderers/index.js";
-import { Kbd as Q } from "../../primitives/kbd/kbd.js";
-import { keybindingToString as X } from "../../primitives/kbd/keybinding-display.js";
-import { useCommandPalette as Y } from "./use-command-palette.js";
-import { COMMAND_SOURCE_LABELS as m, keybindingFromEvent as Z, isReservedShortcut as W } from "./utils.js";
-import { BadgeCellRenderer as ee } from "../../data/ag-grid-react/cell-renderers/badge-cell-renderer.js";
-B.registerModules([$, H]);
-function te(a) {
+import { useCommandPalette as Z } from "./use-command-palette.js";
+import { COMMAND_SOURCE_LABELS as m, keybindingFromEvent as W, isReservedShortcut as ee } from "./utils.js";
+import { BadgeCellRenderer as te } from "../../data/ag-grid-react/cell-renderers/badge-cell-renderer.js";
+V.registerModules([J, Q]);
+function re(a) {
   const t = a.data;
   return t ? /* @__PURE__ */ h("div", { className: "flex items-center gap-2 min-w-0 h-full", children: [
-    !t.customisable && /* @__PURE__ */ r(T, { className: "h-3 w-3 text-secondary-foreground shrink-0" }),
+    !t.customisable && /* @__PURE__ */ r(O, { className: "h-3 w-3 text-secondary-foreground shrink-0" }),
     /* @__PURE__ */ h("div", { className: "flex flex-col min-w-0 gap-0", children: [
-      /* @__PURE__ */ r("span", { className: "truncate font-medium text-content-charcoal text-xs leading-tight", children: t.command }),
-      t.description && /* @__PURE__ */ r("span", { className: "truncate text-[10px] text-secondary-foreground leading-tight", children: t.description })
+      /* @__PURE__ */ r(
+        A,
+        {
+          triggerClassName: "truncate font-medium text-content-charcoal text-xs leading-tight block min-w-0",
+          content: t.command,
+          side: "top",
+          variant: "tertiary",
+          children: t.command
+        }
+      ),
+      t.description && /* @__PURE__ */ r(
+        A,
+        {
+          triggerClassName: "truncate text-[10px] text-secondary-foreground leading-tight block min-w-0",
+          content: t.description,
+          side: "top",
+          variant: "tertiary",
+          children: t.description
+        }
+      )
     ] })
   ] }) : null;
 }
-function re(a) {
+function ne(a) {
   const t = a.data;
   if (!t) return null;
   const d = a.recordingCommandId === t.id;
@@ -37,27 +56,27 @@ function re(a) {
         t.customisable ? "bg-canvas-elevated" : "bg-transparent",
         d && "ring-1 ring-brand border border-brand"
       ),
-      children: d ? /* @__PURE__ */ r("span", { className: "text-xs text-brand font-medium animate-pulse motion-reduce:animate-none", children: a.recordingLabel ?? "Press desired shortcut..." }) : /* @__PURE__ */ h(j, { children: [
+      children: d ? /* @__PURE__ */ r("span", { className: "text-xs text-brand font-medium animate-pulse motion-reduce:animate-none", children: a.recordingLabel ?? "Press desired shortcut..." }) : /* @__PURE__ */ h(z, { children: [
         t.keybinding ? /* @__PURE__ */ r(
           "button",
           {
             type: "button",
-            onClick: (o) => {
-              o.stopPropagation(), t.customisable && a.onStartRecording(t.id);
+            onClick: (s) => {
+              s.stopPropagation(), t.customisable && a.onStartRecording(t.id);
             },
             disabled: !t.customisable,
             className: p(
               "flex items-center justify-end h-full w-full text-end",
               t.customisable ? "cursor-pointer" : "cursor-default opacity-70"
             ),
-            children: /* @__PURE__ */ r(Q, { keybinding: t.keybinding, size: "sm" })
+            children: /* @__PURE__ */ r($, { keybinding: t.keybinding, size: "sm" })
           }
         ) : t.customisable ? /* @__PURE__ */ r(
           "button",
           {
             type: "button",
-            onClick: (o) => {
-              o.stopPropagation(), a.onStartRecording(t.id);
+            onClick: (s) => {
+              s.stopPropagation(), a.onStartRecording(t.id);
             },
             className: "flex items-center justify-end h-full w-full text-xs text-secondary-foreground hover:text-brand transition-colors cursor-pointer text-end",
             children: a.addShortcutLabel ?? "Add shortcut"
@@ -67,28 +86,28 @@ function re(a) {
           "button",
           {
             type: "button",
-            onClick: (o) => {
-              o.stopPropagation(), a.onReset(t.id);
+            onClick: (s) => {
+              s.stopPropagation(), a.onReset(t.id);
             },
             className: "absolute end-1.5 p-0.5 rounded bg-canvas-elevated hover:bg-canvas-muted hover:text-destructive cursor-pointer opacity-0 group-hover/row:opacity-100 transition-opacity z-10",
             title: "Reset to default",
-            children: /* @__PURE__ */ r(q, { className: "!h-3 !w-3" })
+            children: /* @__PURE__ */ r(B, { className: "!h-3 !w-3" })
           }
         )
       ] })
     }
   ) });
 }
-function ne(a) {
+function ae(a) {
   const t = a.data;
   return t ? /* @__PURE__ */ r("div", { className: "flex items-center h-full", children: /* @__PURE__ */ r("span", { className: "text-xs text-secondary-foreground capitalize", children: t.scope }) }) : null;
 }
-function ae({
+function le({
   className: a,
   scopes: t,
   sources: d,
-  renderStatus: o,
-  recordingLabel: le,
+  renderStatus: s,
+  recordingLabel: ie,
   pressShortcutLabel: x,
   addShortcutLabel: v,
   conflictWarnLabel: w = "Conflicts with other shortcuts",
@@ -99,51 +118,51 @@ function ae({
     getSettingsCommands: C,
     getEffectiveKeybinding: S,
     updateKeybinding: N,
-    resetKeybinding: R,
-    version: O
-  } = Y(), [c, f] = i.useState(null), [u, l] = i.useState(null), y = i.useMemo(() => {
+    resetKeybinding: k,
+    version: _
+  } = Z(), [c, f] = o.useState(null), [u, l] = o.useState(null), y = o.useMemo(() => {
     let n = C();
     return n = n.filter((e) => {
-      const s = e.source ?? "user";
-      return s === "user" || s === "ag-grid";
+      const i = e.source ?? "user";
+      return i === "user" || i === "ag-grid";
     }), t && (n = n.filter((e) => t.includes(e.scope))), d && (n = n.filter((e) => e.source && d.includes(e.source))), n.map((e) => {
-      const s = S(e.id), g = e.source ?? "user", D = m[g] ?? g ?? "User", A = D.toLowerCase() === "user";
+      const i = S(e.id), g = e.source ?? "user", D = m[g] ?? g ?? "User", T = D.toLowerCase() === "user";
       return {
         id: e.id,
         command: e.label,
         description: e.description || "",
         category: e.category || "General",
-        keybinding: s,
-        keybindingDisplay: s ? X(s) : "",
+        keybinding: i,
+        keybindingDisplay: i ? H(i) : "",
         scope: e.scope,
         source: D,
-        sourceColor: A ? "primary" : "neutral",
-        sourceIcon: A ? /* @__PURE__ */ r(z, { className: "h-3 w-3" }) : /* @__PURE__ */ r(G, { className: "h-3 w-3" }),
+        sourceColor: T ? "primary" : "neutral",
+        sourceIcon: T ? /* @__PURE__ */ r(G, { className: "h-3 w-3" }) : /* @__PURE__ */ r(U, { className: "h-3 w-3" }),
         customisable: e.customisable !== !1,
         passive: e.passive === !0,
         hasOverride: e.keybinding !== void 0,
         _def: e
       };
     });
-  }, [O, t, d, C, S]), k = i.useCallback((n) => {
+  }, [_, t, d, C, S]), R = o.useCallback((n) => {
     f(n), l(null);
-  }, []), M = i.useCallback((n) => {
-    R(n), l(null);
-  }, [R]);
-  i.useEffect(() => {
+  }, []), M = o.useCallback((n) => {
+    k(n), l(null);
+  }, [k]);
+  o.useEffect(() => {
     if (!c) return;
     const n = (e) => {
       if (e.preventDefault(), e.stopPropagation(), e.key === "Escape") {
         f(null), l(null);
         return;
       }
-      const s = Z(e);
-      if (!s) return;
-      if (W(s)) {
+      const i = W(e);
+      if (!i) return;
+      if (ee(i)) {
         l({ type: "reserved", text: b }), f(null), setTimeout(() => l(null), 3e3);
         return;
       }
-      const g = N(c, s);
+      const g = N(c, i);
       g.success ? (f(null), l(null)) : g.conflict ? (l({
         type: "conflict",
         text: w
@@ -151,14 +170,14 @@ function ae({
     };
     return window.addEventListener("keydown", n, !0), () => window.removeEventListener("keydown", n, !0);
   }, [c, N, b, w]);
-  const P = i.useMemo(() => Array.from(new Set(y.map((e) => e.category))).sort().map((e) => ({ label: e, value: e })), [y]), _ = i.useMemo(() => [
+  const P = o.useMemo(() => Array.from(new Set(y.map((e) => e.category))).sort().map((e) => ({ label: e, value: e })), [y]), I = o.useMemo(() => [
     {
       field: "command",
       headerName: "Command",
       flex: 1,
       minWidth: 200,
       filter: "agTextColumnFilter",
-      cellRenderer: te,
+      cellRenderer: re,
       filterValueGetter: (n) => {
         const e = n.data;
         return e ? `${e.command} ${e.description}` : "";
@@ -182,11 +201,11 @@ function ae({
       width: 180,
       type: "rightAligned",
       filter: "agTextColumnFilter",
-      cellRenderer: re,
+      cellRenderer: ne,
       cellClass: F,
       cellRendererParams: {
         recordingCommandId: c,
-        onStartRecording: k,
+        onStartRecording: R,
         onReset: M,
         recordingLabel: x,
         addShortcutLabel: v
@@ -198,7 +217,7 @@ function ae({
       headerName: "Scope",
       width: 100,
       filter: "agSetColumnFilter",
-      cellRenderer: ne,
+      cellRenderer: ae,
       headerComponentParams: {
         isSearchable: !0,
         advanceSearchEnabled: !0,
@@ -217,7 +236,7 @@ function ae({
       width: 130,
       filter: "agSetColumnFilter",
       cellClass: F,
-      cellRenderer: ee,
+      cellRenderer: te,
       cellRendererParams: {
         variant: "subtle",
         colorField: "sourceColor",
@@ -235,7 +254,7 @@ function ae({
         isMultiSelect: !0
       }
     }
-  ], [c, k, M, x, v, P]), I = i.useMemo(() => ({
+  ], [c, R, M, x, v, P]), K = o.useMemo(() => ({
     filter: {
       filterModel: {
         source: {
@@ -244,7 +263,7 @@ function ae({
         }
       }
     }
-  }), []), K = i.useMemo(() => ({
+  }), []), j = o.useMemo(() => ({
     sortable: !0,
     resizable: !0,
     filter: !0,
@@ -256,18 +275,18 @@ function ae({
     "px-3 py-1.5 text-[10px] md:text-sm font-medium rounded-md whitespace-nowrap flex items-center gap-2",
     u?.type === "conflict" ? "bg-feedback-warning-surface text-content" : u?.type === "reserved" ? "bg-feedback-error-surface text-destructive" : c ? "bg-feedback-info-surface text-brand animate-[pulse_1.5s_ease-in-out_infinite] motion-reduce:animate-none" : ""
   ), children: [
-    u?.type === "conflict" ? /* @__PURE__ */ r(U, { className: "h-3.5 w-3.5 shrink-0" }) : u?.type === "reserved" ? /* @__PURE__ */ r(T, { className: "h-3.5 w-3.5 shrink-0" }) : c ? /* @__PURE__ */ r("span", { className: "shrink-0 text-base", children: "⌨️" }) : null,
+    u?.type === "conflict" ? /* @__PURE__ */ r(q, { className: "h-3.5 w-3.5 shrink-0" }) : u?.type === "reserved" ? /* @__PURE__ */ r(O, { className: "h-3.5 w-3.5 shrink-0" }) : c ? /* @__PURE__ */ r("span", { className: "shrink-0 text-base", children: "⌨️" }) : null,
     /* @__PURE__ */ r("span", { children: u ? u.text : L })
   ] }) : null;
-  return /* @__PURE__ */ h(V, { className: p("flex flex-col w-full h-full border-t-0", a), children: [
-    o ? o(E) : E,
+  return /* @__PURE__ */ h(X, { className: p("flex flex-col w-full h-full border-t-0", a), children: [
+    s ? s(E) : E,
     /* @__PURE__ */ r(
-      J,
+      Y,
       {
         rowData: y,
-        columnDefs: _,
-        defaultColDef: K,
-        initialState: I,
+        columnDefs: I,
+        defaultColDef: j,
+        initialState: K,
         rowHeight: 44,
         animateRows: !1,
         rowSelection: "single",
@@ -279,7 +298,7 @@ function ae({
     )
   ] });
 }
-ae.displayName = "ShortcutSettings";
+le.displayName = "ShortcutSettings";
 export {
-  ae as ShortcutSettings
+  le as ShortcutSettings
 };