impact-nova 2.2.3 → 2.2.5

package/dist/components/data/expandable-list-item/expandable-list-item-parts.js

@@ -1,83 +1,121 @@
-import { jsx as n, jsxs as v } from "react/jsx-runtime";
-import * as i from "react";
-import { ChevronRight as y } from "impact-nova-icons";
-import { AccordionContent as R, Accordion as A, AccordionItem as k, AccordionTrigger as T } from "../../primitives/accordion/accordion.js";
-import { Checkbox as P } from "../../forms/checkbox/checkbox.js";
-import { createCompoundPart as I } from "../../../lib/primitives/create-compound.js";
-import { cn as r } from "../../../lib/utils.js";
-import { useExpandableListItemContext as x, ExpandableListItemProvider as E, EXPANDABLE_LIST_ITEM_ACCORDION_VALUE as c } from "./expandable-list-item-context.js";
-function N(e, t) {
-  return r(
+import { jsx as n, jsxs as h } from "react/jsx-runtime";
+import * as s from "react";
+import { ChevronRight as R } from "impact-nova-icons";
+import { AccordionContent as A, Accordion as O, AccordionItem as P, AccordionTrigger as V } from "../../primitives/accordion/accordion.js";
+import { Checkbox as D } from "../../forms/checkbox/checkbox.js";
+import { Tooltip as M, TooltipTrigger as S, TooltipContent as _ } from "../../feedback/tooltip/tooltip.js";
+import { createCompoundPart as y } from "../../../lib/primitives/create-compound.js";
+import { cn as d } from "../../../lib/utils.js";
+import { useExpandableListItemContext as I, ExpandableListItemProvider as w, EXPANDABLE_LIST_ITEM_ACCORDION_VALUE as u } from "./expandable-list-item-context.js";
+const g = s.forwardRef(
+  ({ text: e, componentName: t, className: o, ...r }, a) => {
+    const l = s.useRef(null), [c, x] = s.useState(!1), p = s.useCallback(
+      (i) => {
+        l.current = i, typeof a == "function" ? a(i) : a && (a.current = i);
+      },
+      [a]
+    ), m = s.useCallback(() => {
+      const i = l.current;
+      i && x(i.scrollWidth > i.clientWidth);
+    }, []);
+    s.useLayoutEffect(() => {
+      const i = l.current;
+      if (!i) return;
+      m();
+      const v = i.parentElement, f = new ResizeObserver(m);
+      return f.observe(i), v && f.observe(v), () => {
+        f.disconnect();
+      };
+    }, [e, m]);
+    const b = /* @__PURE__ */ n(
+      "span",
+      {
+        ref: p,
+        "data-component": t,
+        className: o,
+        ...r,
+        children: e
+      }
+    );
+    return /* @__PURE__ */ h(M, { open: c ? void 0 : !1, children: [
+      /* @__PURE__ */ n(S, { asChild: !0, children: b }),
+      /* @__PURE__ */ n(_, { side: "top", variant: "tertiary", children: e })
+    ] });
+  }
+);
+g.displayName = "TruncatedTooltipText";
+function C(e, t) {
+  return d(
     "rounded-xl transition-[background-color,border-color,box-shadow] duration-200",
     e ? "border-stroke-accent/40 bg-canvas-accent shadow-sm" : "border-stroke bg-canvas-elevated",
     t
   );
 }
-function V(e) {
-  return i.isValidElement(e) && e.type.displayName === "ExpandableListItemContent";
+function z(e) {
+  return s.isValidElement(e) && e.type.displayName === "ExpandableListItemContent";
 }
-const D = i.forwardRef(
+const j = s.forwardRef(
   ({
     className: e,
     selected: t,
-    expanded: a,
-    defaultExpanded: o = !1,
-    onExpandedChange: s,
+    expanded: o,
+    defaultExpanded: r = !1,
+    onExpandedChange: a,
     disabled: l,
-    expandAriaLabel: m = "Expand details",
-    collapseAriaLabel: b = "Collapse details",
+    expandAriaLabel: c = "Expand details",
+    collapseAriaLabel: x = "Collapse details",
     children: p,
-    ...f
-  }, h) => {
-    const d = !!t, L = i.Children.toArray(p).find(V) != null, u = i.useMemo(
+    ...m
+  }, b) => {
+    const i = !!t, L = s.Children.toArray(p).find(z) != null, E = s.useMemo(
       () => ({
-        showSelectionChrome: d,
+        showSelectionChrome: i,
         disabled: l,
-        expandAriaLabel: m,
-        collapseAriaLabel: b
+        expandAriaLabel: c,
+        collapseAriaLabel: x
       }),
-      [d, l, m, b]
+      [i, l, c, x]
     );
     if (!L)
-      return /* @__PURE__ */ n(E, { value: u, children: /* @__PURE__ */ n(
+      return /* @__PURE__ */ n(w, { value: E, children: /* @__PURE__ */ n(
         "div",
         {
-          ref: h,
+          ref: b,
           "data-component": "expandable-list-item-row",
           "data-expandable": "false",
           "data-selected": t ? "" : void 0,
-          "data-selection-chrome": d ? "" : void 0,
-          className: N(d, e),
-          ...f,
+          "data-selection-chrome": i ? "" : void 0,
+          className: C(i, e),
+          ...m,
           children: p
         }
       ) });
-    const g = a !== void 0, C = g ? a ? c : "" : void 0;
-    return /* @__PURE__ */ n(E, { value: u, children: /* @__PURE__ */ n(
+    const N = o !== void 0, T = N ? o ? u : "" : void 0;
+    return /* @__PURE__ */ n(w, { value: E, children: /* @__PURE__ */ n(
       "div",
       {
-        ref: h,
+        ref: b,
         "data-component": "expandable-list-item",
         "data-expandable": "true",
-        "data-expanded": a ?? void 0,
+        "data-expanded": o ?? void 0,
         "data-selected": t ? "" : void 0,
-        "data-selection-chrome": d ? "" : void 0,
-        className: N(d, e),
-        ...f,
+        "data-selection-chrome": i ? "" : void 0,
+        className: C(i, e),
+        ...m,
         children: /* @__PURE__ */ n(
-          A,
+          O,
           {
             type: "single",
             collapsible: !0,
             disabled: l,
-            ...g ? { value: C } : {
-              defaultValue: o ? c : void 0
+            ...N ? { value: T } : {
+              defaultValue: r ? u : void 0
             },
-            onValueChange: (w) => s?.(w === c),
+            onValueChange: (k) => a?.(k === u),
             children: /* @__PURE__ */ n(
-              k,
+              P,
               {
-                value: c,
+                value: u,
                 className: "overflow-visible rounded-none border-0 bg-transparent p-0 shadow-none",
                 children: p
               }
@@ -88,146 +126,169 @@ const D = i.forwardRef(
     ) });
   }
 );
-D.displayName = "ExpandableListItemRoot";
-const W = I("expandable-list-item", {
+j.displayName = "ExpandableListItemRoot";
+const te = y("expandable-list-item", {
   part: "row",
   displayName: "ExpandableListItemRow",
-  className: "flex items-start gap-3 px-3 py-3"
-}), M = i.forwardRef(({ className: e, onCheckedChange: t, ...a }, o) => /* @__PURE__ */ n(
+  className: "flex items-start gap-2 px-3 py-3"
+}), B = s.forwardRef(({ className: e, onCheckedChange: t, ...o }, r) => /* @__PURE__ */ n(
   "div",
   {
-    className: r("pt-0.5", e),
+    className: d("mt-1 shrink-0", e),
     "data-component": "expandable-list-item-checkbox",
-    onClick: (s) => s.stopPropagation(),
-    onKeyDown: (s) => s.stopPropagation(),
+    onClick: (a) => a.stopPropagation(),
+    onKeyDown: (a) => a.stopPropagation(),
     children: /* @__PURE__ */ n(
-      P,
+      D,
       {
-        ref: o,
-        onCheckedChange: (s) => t?.(s === !0),
-        ...a
+        ref: r,
+        onCheckedChange: (a) => t?.(a === !0),
+        ...o
       }
     )
   }
 ));
-M.displayName = "ExpandableListItemCheckbox";
-const S = i.forwardRef(({ className: e, children: t, ...a }, o) => {
-  const { disabled: s, expandAriaLabel: l, collapseAriaLabel: m } = x();
-  return /* @__PURE__ */ v(
-    T,
+B.displayName = "ExpandableListItemCheckbox";
+const F = s.forwardRef(({ className: e, children: t, ...o }, r) => {
+  const { disabled: a, expandAriaLabel: l, collapseAriaLabel: c } = I();
+  return /* @__PURE__ */ h(
+    V,
     {
-      ref: o,
+      ref: r,
       variant: "plain",
       "data-component": "expandable-list-item-trigger",
-      className: r(
-        "min-w-0 items-center gap-2 text-left",
-        s && "pointer-events-none opacity-50",
+      className: d(
+        "min-w-0 flex-1 overflow-hidden items-start gap-1 text-left",
+        a && "pointer-events-none opacity-50",
         e
       ),
-      disabled: s,
-      ...a,
+      disabled: a,
+      ...o,
       children: [
         t,
         /* @__PURE__ */ n(
           "span",
           {
-            className: "mt-0.5 inline-flex shrink-0 text-content-icon transition-transform duration-200 motion-reduce:transition-none group-data-[state=open]:rotate-180",
+            className: "mt-1 inline-flex shrink-0 text-content-icon transition-transform duration-200 motion-reduce:transition-none group-data-[state=open]:rotate-180",
             "aria-hidden": !0,
-            children: /* @__PURE__ */ n(y, { className: "size-4 rotate-90" })
+            children: /* @__PURE__ */ n(R, { className: "size-4 rotate-90" })
           }
         ),
-        /* @__PURE__ */ v("span", { className: "sr-only", children: [
+        /* @__PURE__ */ h("span", { className: "sr-only", children: [
           l,
           " / ",
-          m
+          c
         ] })
       ]
     }
   );
 });
-S.displayName = "ExpandableListItemTrigger";
-const _ = i.forwardRef(({ className: e, ...t }, a) => {
-  const { showSelectionChrome: o } = x();
-  return /* @__PURE__ */ n(
+F.displayName = "ExpandableListItemTrigger";
+const H = s.forwardRef(({ className: e, children: t, ...o }, r) => {
+  const a = d(
+    "block min-w-0 w-0 flex-1 truncate text-sm font-semibold leading-6 tracking-tight text-content",
+    e
+  );
+  return typeof t != "string" ? /* @__PURE__ */ n(
     "span",
     {
-      ref: a,
+      ref: r,
       "data-component": "expandable-list-item-title",
-      className: r(
-        "text-sm font-semibold leading-6 text-content",
-        o && "tracking-tight",
-        e
-      ),
-      ...t
+      className: a,
+      ...o,
+      children: t
+    }
+  ) : /* @__PURE__ */ n(
+    g,
+    {
+      ref: r,
+      text: t,
+      componentName: "expandable-list-item-title",
+      className: a,
+      ...o
     }
   );
 });
-_.displayName = "ExpandableListItemTitle";
-const j = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ n(
-  "div",
-  {
-    ref: a,
-    "data-component": "expandable-list-item-description",
-    className: r("mt-0.5 text-xs font-medium leading-4 text-secondary-foreground", e),
-    ...t
-  }
-));
-j.displayName = "ExpandableListItemDescription";
-const B = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ n(
+H.displayName = "ExpandableListItemTitle";
+const W = s.forwardRef(({ className: e, children: t, ...o }, r) => {
+  const a = d(
+    "mt-1 block min-w-0 w-full truncate text-xs font-medium leading-4 text-secondary-foreground",
+    e
+  );
+  return typeof t == "string" ? /* @__PURE__ */ n(
+    g,
+    {
+      text: t,
+      componentName: "expandable-list-item-description",
+      className: a
+    }
+  ) : /* @__PURE__ */ n(
+    "div",
+    {
+      ref: r,
+      "data-component": "expandable-list-item-description",
+      className: a,
+      ...o,
+      children: t
+    }
+  );
+});
+W.displayName = "ExpandableListItemDescription";
+const K = s.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ n(
   "div",
   {
-    ref: a,
+    ref: o,
     "data-component": "expandable-list-item-media",
-    className: r("flex flex-wrap items-center gap-2", e),
+    className: d("flex min-w-0 flex-1 flex-nowrap items-center gap-2 overflow-hidden", e),
     ...t
   }
 ));
-B.displayName = "ExpandableListItemMedia";
-const F = i.forwardRef(({ className: e, ...t }, a) => {
-  const { disabled: o } = x();
+K.displayName = "ExpandableListItemMedia";
+const U = s.forwardRef(({ className: e, ...t }, o) => {
+  const { disabled: r } = I();
   return /* @__PURE__ */ n(
     "div",
     {
-      ref: a,
+      ref: o,
       "data-component": "expandable-list-item-header",
-      className: r(
-        "min-w-0 flex-1",
-        o && "pointer-events-none opacity-50",
+      className: d(
+        "min-w-0 w-full flex-1 overflow-hidden",
+        r && "pointer-events-none opacity-50",
         e
       ),
       ...t
     }
   );
 });
-F.displayName = "ExpandableListItemHeader";
-const H = i.forwardRef(({ className: e, children: t, ...a }, o) => /* @__PURE__ */ n(R, { className: "border-0 bg-transparent p-0 pb-[0.01rem]", children: /* @__PURE__ */ n(
+U.displayName = "ExpandableListItemHeader";
+const X = s.forwardRef(({ className: e, children: t, ...o }, r) => /* @__PURE__ */ n(A, { className: "border-0 bg-transparent p-0 pb-[0.01rem]", children: /* @__PURE__ */ n(
   "div",
   {
-    ref: o,
+    ref: r,
     "data-component": "expandable-list-item-content",
-    className: r(
+    className: d(
       "mx-2 mb-2 overflow-hidden rounded-lg bg-canvas-subtle pt-2",
       e
     ),
-    ...a,
+    ...o,
     children: t
   }
 ) }));
-H.displayName = "ExpandableListItemContent";
-const Y = I("expandable-list-item", {
+X.displayName = "ExpandableListItemContent";
+const ae = y("expandable-list-item", {
   part: "footer",
   displayName: "ExpandableListItemFooter",
   className: "px-4 py-3 sm:px-5"
 });
 export {
-  M as ExpandableListItemCheckbox,
-  H as ExpandableListItemContent,
-  j as ExpandableListItemDescription,
-  Y as ExpandableListItemFooter,
-  F as ExpandableListItemHeader,
-  B as ExpandableListItemMedia,
-  D as ExpandableListItemRoot,
-  W as ExpandableListItemRow,
-  _ as ExpandableListItemTitle,
-  S as ExpandableListItemTrigger
+  B as ExpandableListItemCheckbox,
+  X as ExpandableListItemContent,
+  W as ExpandableListItemDescription,
+  ae as ExpandableListItemFooter,
+  U as ExpandableListItemHeader,
+  K as ExpandableListItemMedia,
+  j as ExpandableListItemRoot,
+  te as ExpandableListItemRow,
+  H as ExpandableListItemTitle,
+  F as ExpandableListItemTrigger
 };

package/dist/components/data/expandable-list-item/expandable-list-item-preset.js

@@ -1,13 +1,13 @@
 import { jsx as l, jsxs as d } from "react/jsx-runtime";
-import * as R from "react";
-import { ExpandableListItemAttributes as T } from "./expandable-list-item-attributes.js";
-import { ExpandableListItemMetrics as v } from "./expandable-list-item-metrics.js";
-import { ExpandableListItemRoot as f, ExpandableListItemRow as o, ExpandableListItemCheckbox as C, ExpandableListItemHeader as E, ExpandableListItemMedia as I, ExpandableListItemTitle as k, ExpandableListItemDescription as L, ExpandableListItemTrigger as y, ExpandableListItemContent as j, ExpandableListItemFooter as M } from "./expandable-list-item-parts.js";
+import * as P from "react";
+import { ExpandableListItemAttributes as R } from "./expandable-list-item-attributes.js";
+import { ExpandableListItemMetrics as T } from "./expandable-list-item-metrics.js";
+import { ExpandableListItemRoot as o, ExpandableListItemRow as f, ExpandableListItemCheckbox as C, ExpandableListItemHeader as E, ExpandableListItemMedia as I, ExpandableListItemTitle as k, ExpandableListItemDescription as L, ExpandableListItemTrigger as v, ExpandableListItemContent as j, ExpandableListItemFooter as M } from "./expandable-list-item-parts.js";
 function O(e) {
   switch (e.type) {
     case "metrics":
       return /* @__PURE__ */ l(
-        v,
+        T,
         {
           sectionId: e.id,
           columns: e.columns
@@ -16,12 +16,13 @@ function O(e) {
       );
     case "attributes":
       return /* @__PURE__ */ l(
-        T,
+        R,
         {
           title: e.title,
           tags: e.tags,
           maxVisibleTags: e.maxVisibleTags,
-          formatOverflow: e.formatOverflow
+          formatOverflow: e.formatOverflow,
+          externalCopyFunction: e.externalCopyFunction
         },
         e.id
       );
@@ -34,7 +35,7 @@ function O(e) {
 function V({ section: e }) {
   return /* @__PURE__ */ l("div", { className: "px-4 py-4 sm:px-5", children: e.content });
 }
-const $ = R.forwardRef(
+const $ = P.forwardRef(
   ({
     className: e,
     title: t,
@@ -43,31 +44,31 @@ const $ = R.forwardRef(
     selection: a,
     selected: g,
     expanded: w,
-    defaultExpanded: S = !1,
-    onExpandedChange: P,
+    defaultExpanded: y = !1,
+    onExpandedChange: S,
     disabled: c,
     sections: i,
     panelFooter: h,
-    expandAriaLabel: s = "Expand details",
-    collapseAriaLabel: u = "Collapse details",
-    ...b
-  }, p) => {
+    expandAriaLabel: u = "Expand details",
+    collapseAriaLabel: s = "Collapse details",
+    ...p
+  }, b) => {
     const x = !!(g || a?.checked);
     return i != null && i.length > 0 || h != null ? /* @__PURE__ */ d(
-      f,
+      o,
       {
-        ref: p,
+        ref: b,
         className: e,
         selected: x,
         expanded: w,
-        defaultExpanded: S,
-        onExpandedChange: P,
+        defaultExpanded: y,
+        onExpandedChange: S,
         disabled: c,
-        expandAriaLabel: s,
-        collapseAriaLabel: u,
-        ...b,
+        expandAriaLabel: u,
+        collapseAriaLabel: s,
+        ...p,
         children: [
-          /* @__PURE__ */ d(o, { children: [
+          /* @__PURE__ */ d(f, { children: [
             a ? /* @__PURE__ */ l(
               C,
               {
@@ -79,7 +80,7 @@ const $ = R.forwardRef(
                 "aria-label": a["aria-label"] ?? `Select ${t}`
               }
             ) : null,
-            /* @__PURE__ */ l(y, { children: /* @__PURE__ */ d(E, { children: [
+            /* @__PURE__ */ l(v, { children: /* @__PURE__ */ d(E, { children: [
               /* @__PURE__ */ d(I, { children: [
                 /* @__PURE__ */ l(k, { children: t }),
                 m
@@ -94,16 +95,16 @@ const $ = R.forwardRef(
         ]
       }
     ) : /* @__PURE__ */ l(
-      f,
+      o,
       {
-        ref: p,
+        ref: b,
         className: e,
         selected: x,
         disabled: c,
-        expandAriaLabel: s,
-        collapseAriaLabel: u,
-        ...b,
-        children: /* @__PURE__ */ d(o, { children: [
+        expandAriaLabel: u,
+        collapseAriaLabel: s,
+        ...p,
+        children: /* @__PURE__ */ d(f, { children: [
           a ? /* @__PURE__ */ l(
             C,
             {

package/dist/components/data/expandable-list-item/expandable-list-item.types.d.ts

@@ -1,4 +1,9 @@
-import { ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
+export interface ExternalCopyFunctionProps {
+    e: React.MouseEvent<HTMLButtonElement>;
+    val: string | number;
+    index: number;
+}
 export type ExpandableListItemMetricColumn = {
     label: string;
     value: string;
@@ -19,6 +24,8 @@ export type ExpandableListItemAttributesSection = {
     maxVisibleTags?: number;
     /** Default: `(n) => \`+\${n}\``. */
     formatOverflow?: (hiddenCount: number) => string;
+    /** Override the default clipboard copy inside the overflow popover. */
+    externalCopyFunction?: (props: ExternalCopyFunctionProps) => void;
 };
 /** Arbitrary block inside the expanded panel. */
 export type ExpandableListItemCustomSection = {

package/dist/components/data/expandable-list-item/index.d.ts

@@ -2,4 +2,4 @@ export { ExpandableListItem, type ExpandableListItemProps, } from './expandable-
 export { ExpandableListItemRoot, ExpandableListItemRow, ExpandableListItemCheckbox, ExpandableListItemTrigger, ExpandableListItemTitle, ExpandableListItemDescription, ExpandableListItemMedia, ExpandableListItemHeader, ExpandableListItemContent, ExpandableListItemFooter, type ExpandableListItemRootProps, type ExpandableListItemCheckboxProps, } from './expandable-list-item-parts';
 export { ExpandableListItemMetrics, type ExpandableListItemMetricsProps } from './expandable-list-item-metrics';
 export { ExpandableListItemAttributes, type ExpandableListItemAttributesProps, } from './expandable-list-item-attributes';
-export type { ExpandableListItemAttributesSection, ExpandableListItemCustomSection, ExpandableListItemMetricColumn, ExpandableListItemMetricsSection, ExpandableListItemSelection, ExpandableListItemSection, } from './expandable-list-item.types';
+export type { ExternalCopyFunctionProps, ExpandableListItemAttributesSection, ExpandableListItemCustomSection, ExpandableListItemMetricColumn, ExpandableListItemMetricsSection, ExpandableListItemSelection, ExpandableListItemSection, } from './expandable-list-item.types';