impact-nova 2.2.4 → 2.2.6

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

@@ -1,64 +1,67 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { Badge as p } from "../../data-display/badge/badge.js";
-import { FilterPopoverContent as h } from "../../flows/filter-strip/filter-tag-list.js";
-import { Popover as u, PopoverTrigger as f } from "../../feedback/popover/popover.js";
-import { Tag as x } from "../../primitives/tag/tag.js";
-import { Tooltip as b, TooltipTrigger as g, TooltipContent as v } from "../../feedback/tooltip/tooltip.js";
+import { Badge as s } from "../../data-display/badge/badge.js";
+import { FilterPopoverContent as u } from "../../flows/filter-strip/filter-tag-list.js";
+import { Popover as b, PopoverTrigger as f } from "../../feedback/popover/popover.js";
+import { Tooltip as g, TooltipTrigger as v, TooltipContent as x } from "../../feedback/tooltip/tooltip.js";
+import "react";
 function I({
-  tags: n,
-  title: i = "Attributes",
-  maxVisibleTags: a = 4,
-  formatOverflow: s
+  tags: o,
+  title: l = "Attributes",
+  maxVisibleTags: n = 4,
+  formatOverflow: c,
+  externalCopyFunction: m
 }) {
-  const c = n.slice(0, a), t = n.slice(a), o = t.length, d = s?.(o) ?? (o > 0 ? `+${o}` : null);
+  const p = o.slice(0, n), t = o.slice(n), i = t.length, d = c?.(i) ?? (i > 0 ? `+${i}` : null);
   return /* @__PURE__ */ r(
     "div",
     {
       className: "px-4 py-4 pt-0 sm:px-5",
       "data-component": "expandable-list-item-attributes",
       children: [
-        /* @__PURE__ */ e("p", { className: "text-xs font-semibold leading-5 text-content-heading", children: i }),
+        /* @__PURE__ */ e("p", { className: "text-xs font-semibold leading-5 text-content-heading", children: l }),
         /* @__PURE__ */ r("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
-          c.map((l, m) => /* @__PURE__ */ e(
-            p,
+          p.map((a, h) => /* @__PURE__ */ e(
+            s,
             {
               variant: "subtle",
               color: "neutral",
               size: "sm",
               shape: "circle",
               className: "max-w-full",
-              children: l
+              children: a
             },
-            `${m}-${l}`
+            `${h}-${a}`
           )),
-          t.length > 0 ? /* @__PURE__ */ r(u, { children: [
-            /* @__PURE__ */ r(b, { children: [
-              /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(
-                x,
+          t.length > 0 ? /* @__PURE__ */ r(b, { children: [
+            /* @__PURE__ */ r(g, { children: [
+              /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(
+                s,
                 {
-                  variant: "secondary",
-                  size: "md",
-                  shape: "rounded",
-                  className: "h-6 cursor-pointer whitespace-nowrap border-0 bg-accent px-2 font-['Manrope'] text-xs font-medium text-accent-foreground hover:bg-accent/80",
+                  variant: "subtle",
+                  color: "primary",
+                  size: "sm",
+                  shape: "circle",
+                  className: "cursor-pointer hover:bg-accent/80",
                   tabIndex: 0,
                   role: "button",
-                  "aria-label": `${t.length} more attributes for ${i}`,
+                  "aria-label": `${t.length} more attributes for ${l}`,
                   children: d
                 }
               ) }) }),
-              /* @__PURE__ */ r(v, { variant: "tertiary", side: "top", children: [
+              /* @__PURE__ */ r(x, { variant: "tertiary", side: "top", children: [
                 t.length,
                 " more"
               ] })
             ] }),
             /* @__PURE__ */ e(
-              h,
+              u,
               {
                 remainingValues: t,
                 onItemRemove: () => {
                 },
                 isRemovable: !1,
-                isCopyable: !0
+                isCopyable: !0,
+                externalCopyFunction: m
               }
             )
           ] }) : null

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

@@ -1,41 +1,55 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-function o({
-  columns: l,
-  sectionId: i = "metrics"
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { ScrollOverflowAffordance as o } from "../../layout/horizontal-scroller/scroll-overflow-affordance.js";
+import "react";
+import { OverflowTooltip as r } from "../../feedback/tooltip/overflow-tooltip.js";
+const m = 128;
+function f({
+  columns: i,
+  sectionId: l = "metrics"
 }) {
-  return l.length === 0 ? null : /* @__PURE__ */ e(
+  const n = i.length;
+  return n === 0 ? null : /* @__PURE__ */ e(
     "div",
     {
       className: "min-w-0 bg-transparent",
       "data-component": "expandable-list-item-metrics",
-      children: /* @__PURE__ */ e("div", { className: "scrollbar-hide overflow-x-auto overscroll-x-contain [-webkit-overflow-scrolling:touch]", children: /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-nowrap divide-x divide-stroke-hairline px-4 py-4 sm:px-5", children: l.map((t, n) => /* @__PURE__ */ a(
-        "div",
+      children: /* @__PURE__ */ e(
+        o,
         {
-          className: "flex min-w-[7.5rem] flex-1 basis-0 flex-col gap-1 overflow-hidden px-3 first:pl-0 last:pr-0 sm:min-w-[8rem] sm:px-4",
-          children: [
-            /* @__PURE__ */ e(
-              "p",
-              {
-                className: "truncate text-xs font-semibold leading-5 text-content-heading",
-                title: t.label,
-                children: t.label
-              }
-            ),
-            /* @__PURE__ */ e(
-              "p",
-              {
-                className: "truncate text-sm font-semibold leading-5 text-content",
-                title: String(t.value),
-                children: t.value
-              }
-            )
-          ]
-        },
-        `${i}-metric-${n}`
-      )) }) })
+          contentDependency: n,
+          scrollStep: m,
+          viewportDataComponent: "expandable-list-item-metrics-viewport",
+          children: /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-nowrap divide-x divide-stroke-hairline px-4 py-4 sm:px-5", children: i.map((t, a) => /* @__PURE__ */ s(
+            "div",
+            {
+              className: "flex min-w-[7.5rem] flex-1 basis-0 flex-col gap-1 overflow-hidden px-3 first:pl-0 last:pr-0 sm:min-w-[8rem] sm:px-4",
+              children: [
+                /* @__PURE__ */ e(
+                  r,
+                  {
+                    as: "p",
+                    triggerClassName: "truncate text-xs font-semibold leading-5 text-content-heading",
+                    children: t.label
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  r,
+                  {
+                    as: "p",
+                    content: String(t.value),
+                    triggerClassName: "truncate text-sm font-semibold leading-5 text-content",
+                    children: t.value
+                  }
+                )
+              ]
+            },
+            `${l}-metric-${a}`
+          )) })
+        }
+      )
     }
   );
 }
 export {
-  o as ExpandableListItemMetrics
+  f as ExpandableListItemMetrics
 };

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

@@ -21,7 +21,7 @@ export declare const ExpandableListItemTrigger: React.ForwardRefExoticComponent<
     rightActions?: React.ReactNode;
     headingLevel?: import('../../..').AccordionHeadingLevel;
     variant?: "default" | "plain";
-    renderChevronTooltip?: import('../../..').InfoTooltipRender;
+    renderChevronTooltip?: import('../../feedback/tooltip').InfoTooltipRender;
 } & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const ExpandableListItemTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
 export declare const ExpandableListItemDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,85 +1,86 @@
-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 { jsx as a, jsxs as g } from "react/jsx-runtime";
+import * as s from "react";
+import { ChevronRight as k } from "impact-nova-icons";
+import { AccordionContent as R, Accordion as A, AccordionItem as T, AccordionTrigger as P } from "../../primitives/accordion/accordion.js";
+import { Checkbox as V } from "../../forms/checkbox/checkbox.js";
+import { OverflowTooltip as w } from "../../feedback/tooltip/overflow-tooltip.js";
+import { createCompoundPart as E } 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) {
+import { useExpandableListItemContext as C, ExpandableListItemProvider as h, EXPANDABLE_LIST_ITEM_ACCORDION_VALUE as p } from "./expandable-list-item-context.js";
+function N(t, e) {
   return r(
     "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
+    t ? "border-stroke-accent/40 bg-canvas-accent shadow-sm" : "border-stroke bg-canvas-elevated",
+    e
   );
 }
-function V(e) {
-  return i.isValidElement(e) && e.type.displayName === "ExpandableListItemContent";
+function D(t) {
+  return s.isValidElement(t) && t.type.displayName === "ExpandableListItemContent";
 }
-const D = i.forwardRef(
+const M = s.forwardRef(
   ({
-    className: e,
-    selected: t,
-    expanded: a,
-    defaultExpanded: o = !1,
-    onExpandedChange: s,
-    disabled: l,
+    className: t,
+    selected: e,
+    expanded: n,
+    defaultExpanded: i = !1,
+    onExpandedChange: o,
+    disabled: d,
     expandAriaLabel: m = "Expand details",
-    collapseAriaLabel: b = "Collapse details",
-    children: p,
-    ...f
-  }, h) => {
-    const d = !!t, L = i.Children.toArray(p).find(V) != null, u = i.useMemo(
+    collapseAriaLabel: x = "Collapse details",
+    children: c,
+    ...b
+  }, f) => {
+    const l = !!e, I = s.Children.toArray(c).find(D) != null, u = s.useMemo(
       () => ({
-        showSelectionChrome: d,
-        disabled: l,
+        showSelectionChrome: l,
+        disabled: d,
         expandAriaLabel: m,
-        collapseAriaLabel: b
+        collapseAriaLabel: x
       }),
-      [d, l, m, b]
+      [l, d, m, x]
     );
-    if (!L)
-      return /* @__PURE__ */ n(E, { value: u, children: /* @__PURE__ */ n(
+    if (!I)
+      return /* @__PURE__ */ a(h, { value: u, children: /* @__PURE__ */ a(
         "div",
         {
-          ref: h,
+          ref: f,
           "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,
-          children: p
+          "data-selected": e ? "" : void 0,
+          "data-selection-chrome": l ? "" : void 0,
+          className: N(l, t),
+          ...b,
+          children: c
         }
       ) });
-    const g = a !== void 0, C = g ? a ? c : "" : void 0;
-    return /* @__PURE__ */ n(E, { value: u, children: /* @__PURE__ */ n(
+    const v = n !== void 0, y = v ? n ? p : "" : void 0;
+    return /* @__PURE__ */ a(h, { value: u, children: /* @__PURE__ */ a(
       "div",
       {
-        ref: h,
+        ref: f,
         "data-component": "expandable-list-item",
         "data-expandable": "true",
-        "data-expanded": a ?? void 0,
-        "data-selected": t ? "" : void 0,
-        "data-selection-chrome": d ? "" : void 0,
-        className: N(d, e),
-        ...f,
-        children: /* @__PURE__ */ n(
+        "data-expanded": n ?? void 0,
+        "data-selected": e ? "" : void 0,
+        "data-selection-chrome": l ? "" : void 0,
+        className: N(l, t),
+        ...b,
+        children: /* @__PURE__ */ a(
           A,
           {
             type: "single",
             collapsible: !0,
-            disabled: l,
-            ...g ? { value: C } : {
-              defaultValue: o ? c : void 0
+            disabled: d,
+            ...v ? { value: y } : {
+              defaultValue: i ? p : void 0
             },
-            onValueChange: (w) => s?.(w === c),
-            children: /* @__PURE__ */ n(
-              k,
+            onValueChange: (L) => o?.(L === p),
+            children: /* @__PURE__ */ a(
+              T,
               {
-                value: c,
+                value: p,
                 className: "overflow-visible rounded-none border-0 bg-transparent p-0 shadow-none",
-                children: p
+                children: c
               }
             )
           }
@@ -88,56 +89,56 @@ const D = i.forwardRef(
     ) });
   }
 );
-D.displayName = "ExpandableListItemRoot";
-const W = I("expandable-list-item", {
+M.displayName = "ExpandableListItemRoot";
+const Z = E("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"
+}), _ = s.forwardRef(({ className: t, onCheckedChange: e, ...n }, i) => /* @__PURE__ */ a(
   "div",
   {
-    className: r("pt-0.5", e),
+    className: r("mt-1 shrink-0", t),
     "data-component": "expandable-list-item-checkbox",
-    onClick: (s) => s.stopPropagation(),
-    onKeyDown: (s) => s.stopPropagation(),
-    children: /* @__PURE__ */ n(
-      P,
+    onClick: (o) => o.stopPropagation(),
+    onKeyDown: (o) => o.stopPropagation(),
+    children: /* @__PURE__ */ a(
+      V,
       {
-        ref: o,
-        onCheckedChange: (s) => t?.(s === !0),
-        ...a
+        ref: i,
+        onCheckedChange: (o) => e?.(o === !0),
+        ...n
       }
     )
   }
 ));
-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,
+_.displayName = "ExpandableListItemCheckbox";
+const O = s.forwardRef(({ className: t, children: e, ...n }, i) => {
+  const { disabled: o, expandAriaLabel: d, collapseAriaLabel: m } = C();
+  return /* @__PURE__ */ g(
+    P,
     {
-      ref: o,
+      ref: i,
       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",
-        e
+        "min-w-0 flex-1 overflow-hidden items-start gap-1 text-left",
+        o && "pointer-events-none opacity-50",
+        t
       ),
-      disabled: s,
-      ...a,
+      disabled: o,
+      ...n,
       children: [
-        t,
-        /* @__PURE__ */ n(
+        e,
+        /* @__PURE__ */ a(
           "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__ */ a(k, { className: "size-4 rotate-90" })
           }
         ),
-        /* @__PURE__ */ v("span", { className: "sr-only", children: [
-          l,
+        /* @__PURE__ */ g("span", { className: "sr-only", children: [
+          d,
           " / ",
           m
         ] })
@@ -145,89 +146,123 @@ const S = i.forwardRef(({ className: e, children: t, ...a }, o) => {
     }
   );
 });
-S.displayName = "ExpandableListItemTrigger";
-const _ = i.forwardRef(({ className: e, ...t }, a) => {
-  const { showSelectionChrome: o } = x();
-  return /* @__PURE__ */ n(
+O.displayName = "ExpandableListItemTrigger";
+const S = s.forwardRef(({ className: t, children: e, ...n }, i) => {
+  const o = r(
+    "block min-w-0 w-0 flex-1 truncate text-sm font-semibold leading-6 tracking-tight text-content",
+    t
+  );
+  return typeof e != "string" ? /* @__PURE__ */ a(
     "span",
     {
-      ref: a,
+      ref: i,
       "data-component": "expandable-list-item-title",
-      className: r(
-        "text-sm font-semibold leading-6 text-content",
-        o && "tracking-tight",
-        e
-      ),
-      ...t
+      className: o,
+      ...n,
+      children: e
+    }
+  ) : /* @__PURE__ */ a(
+    w,
+    {
+      triggerClassName: o,
+      content: e,
+      side: "top",
+      variant: "tertiary",
+      children: /* @__PURE__ */ a(
+        "span",
+        {
+          ref: i,
+          "data-component": "expandable-list-item-title",
+          ...n,
+          children: e
+        }
+      )
+    }
+  );
+});
+S.displayName = "ExpandableListItemTitle";
+const j = s.forwardRef(({ className: t, children: e, ...n }, i) => {
+  const o = r(
+    "mt-1 block min-w-0 w-full truncate text-xs font-medium leading-4 text-secondary-foreground",
+    t
+  );
+  return typeof e == "string" ? /* @__PURE__ */ a(
+    w,
+    {
+      as: "div",
+      triggerClassName: o,
+      content: e,
+      side: "top",
+      variant: "tertiary",
+      children: /* @__PURE__ */ a("span", { "data-component": "expandable-list-item-description", children: e })
+    }
+  ) : /* @__PURE__ */ a(
+    "div",
+    {
+      ref: i,
+      "data-component": "expandable-list-item-description",
+      className: o,
+      ...n,
+      children: e
     }
   );
 });
-_.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(
+const B = s.forwardRef(({ className: t, ...e }, n) => /* @__PURE__ */ a(
   "div",
   {
-    ref: a,
+    ref: n,
     "data-component": "expandable-list-item-media",
-    className: r("flex flex-wrap items-center gap-2", e),
-    ...t
+    className: r("flex min-w-0 flex-1 flex-nowrap items-center gap-2 overflow-hidden", t),
+    ...e
   }
 ));
 B.displayName = "ExpandableListItemMedia";
-const F = i.forwardRef(({ className: e, ...t }, a) => {
-  const { disabled: o } = x();
-  return /* @__PURE__ */ n(
+const F = s.forwardRef(({ className: t, ...e }, n) => {
+  const { disabled: i } = C();
+  return /* @__PURE__ */ a(
     "div",
     {
-      ref: a,
+      ref: n,
       "data-component": "expandable-list-item-header",
       className: r(
-        "min-w-0 flex-1",
-        o && "pointer-events-none opacity-50",
-        e
+        "min-w-0 w-full flex-1 overflow-hidden",
+        i && "pointer-events-none opacity-50",
+        t
       ),
-      ...t
+      ...e
     }
   );
 });
 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(
+const H = s.forwardRef(({ className: t, children: e, ...n }, i) => /* @__PURE__ */ a(R, { className: "border-0 bg-transparent p-0 pb-[0.01rem]", children: /* @__PURE__ */ a(
   "div",
   {
-    ref: o,
+    ref: i,
     "data-component": "expandable-list-item-content",
     className: r(
       "mx-2 mb-2 overflow-hidden rounded-lg bg-canvas-subtle pt-2",
-      e
+      t
     ),
-    ...a,
-    children: t
+    ...n,
+    children: e
   }
 ) }));
 H.displayName = "ExpandableListItemContent";
-const Y = I("expandable-list-item", {
+const $ = E("expandable-list-item", {
   part: "footer",
   displayName: "ExpandableListItemFooter",
   className: "px-4 py-3 sm:px-5"
 });
 export {
-  M as ExpandableListItemCheckbox,
+  _ as ExpandableListItemCheckbox,
   H as ExpandableListItemContent,
   j as ExpandableListItemDescription,
-  Y as ExpandableListItemFooter,
+  $ as ExpandableListItemFooter,
   F as ExpandableListItemHeader,
   B as ExpandableListItemMedia,
-  D as ExpandableListItemRoot,
-  W as ExpandableListItemRow,
-  _ as ExpandableListItemTitle,
-  S as ExpandableListItemTrigger
+  M as ExpandableListItemRoot,
+  Z as ExpandableListItemRow,
+  S as ExpandableListItemTitle,
+  O as ExpandableListItemTrigger
 };