impact-nova 2.2.4 → 2.2.6

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

@@ -0,0 +1,37 @@
+import { TextOverflowMode } from '../../../lib/overflow/is-text-overflowing';
+import { TooltipContentProps } from './tooltip.types';
+import type * as React from 'react';
+export interface UseOverflowTooltipOptions {
+    content?: React.ReactNode;
+    overflowMode?: TextOverflowMode;
+    alwaysShow?: boolean;
+    disabled?: boolean;
+    /** When false (default), trigger is pointer-only — safe inside buttons, options, comboboxes. */
+    focusable?: boolean;
+    contentDependency?: unknown;
+}
+export interface UseOverflowTooltipResult {
+    setTriggerRef: React.RefCallback<HTMLElement>;
+    onTriggerPointerEnter: React.PointerEventHandler<HTMLElement>;
+    onTriggerFocus?: React.FocusEventHandler<HTMLElement>;
+    triggerTabIndex?: number;
+    isTooltipArmed: boolean;
+    isTooltipOpen: boolean;
+    tooltipContent: React.ReactNode;
+    recheckOverflow: () => boolean;
+    handleTooltipOpenChange: (isOpen: boolean) => void;
+}
+export interface OverflowTooltipProps {
+    children: React.ReactNode;
+    content?: React.ReactNode;
+    overflowMode?: TextOverflowMode;
+    side?: TooltipContentProps['side'];
+    align?: TooltipContentProps['align'];
+    variant?: TooltipContentProps['variant'];
+    className?: string;
+    triggerClassName?: string;
+    as?: 'span' | 'p' | 'div';
+    alwaysShow?: boolean;
+    disabled?: boolean;
+    focusable?: boolean;
+}

package/dist/components/feedback/tooltip/tab-tooltip-render.js

@@ -1,6 +1,7 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { Tooltip as l, TooltipTrigger as n, TooltipContent as o } from "./tooltip.js";
-const d = (i, r, a) => /* @__PURE__ */ t(l, { children: [
+import "react";
+const p = (i, r, a) => /* @__PURE__ */ t(l, { children: [
   /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "inline-flex items-center justify-center h-full w-full", children: i }) }),
   /* @__PURE__ */ e(o, { variant: "tertiary", className: a, children: r })
 ] }), h = (i, r) => /* @__PURE__ */ t(l, { children: [
@@ -9,5 +10,5 @@ const d = (i, r, a) => /* @__PURE__ */ t(l, { children: [
 ] });
 export {
   h as defaultAccordionTooltipRender,
-  d as defaultTabTooltipRender
+  p as defaultTabTooltipRender
 };

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,55 @@
+import * as s from "react";
+import { isTextOverflowing as v } from "../../../lib/overflow/is-text-overflowing.js";
+function R(r, n) {
+  return r !== void 0 ? r : typeof n == "string" ? n : null;
+}
+function F(r, {
+  content: n,
+  overflowMode: f = "ellipsis",
+  alwaysShow: i = !1,
+  disabled: u = !1,
+  focusable: g = !1,
+  contentDependency: C
+} = {}) {
+  const c = s.useRef(null), [p, t] = s.useState(!1), [h, o] = s.useState(!1), l = R(n, r), T = typeof l == "string" ? l.trim().length > 0 : l != null;
+  s.useEffect(() => {
+    t(!1), o(!1);
+  }, [C, n, r, i, u, f]);
+  const I = s.useCallback((e) => {
+    c.current = e;
+  }, []), m = (e) => i || v(e, f), O = (e, a) => {
+    if (!(u || !T)) {
+      if (m(e)) {
+        t(!0), o(!0);
+        return;
+      }
+      t(!1), o(!1);
+    }
+  };
+  return {
+    setTriggerRef: I,
+    onTriggerPointerEnter: (e) => {
+      O(e.currentTarget);
+    },
+    onTriggerFocus: g ? (e) => {
+      O(e.currentTarget);
+    } : void 0,
+    triggerTabIndex: g ? 0 : void 0,
+    isTooltipArmed: p,
+    isTooltipOpen: h,
+    tooltipContent: l,
+    recheckOverflow: () => {
+      const e = c.current;
+      return !e || u || !T ? !1 : m(e) ? (t(!0), !0) : (t(!1), o(!1), !1);
+    },
+    handleTooltipOpenChange: (e) => {
+      if (e && !p && !i || (o(e), e || i))
+        return;
+      const a = c.current;
+      a && (v(a, f) || t(!1));
+    }
+  };
+}
+export {
+  F 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
 };