impact-nova 2.2.5 → 2.2.6

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.js

@@ -1,123 +1,86 @@
-import { jsx as n, jsxs as h } from "react/jsx-runtime";
+import { jsx as a, jsxs as g } 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(
+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 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 z(e) {
-  return s.isValidElement(e) && e.type.displayName === "ExpandableListItemContent";
+function D(t) {
+  return s.isValidElement(t) && t.type.displayName === "ExpandableListItemContent";
 }
-const j = s.forwardRef(
+const M = s.forwardRef(
   ({
-    className: e,
-    selected: t,
-    expanded: o,
-    defaultExpanded: r = !1,
-    onExpandedChange: a,
-    disabled: l,
-    expandAriaLabel: c = "Expand details",
+    className: t,
+    selected: e,
+    expanded: n,
+    defaultExpanded: i = !1,
+    onExpandedChange: o,
+    disabled: d,
+    expandAriaLabel: m = "Expand details",
     collapseAriaLabel: x = "Collapse details",
-    children: p,
-    ...m
-  }, b) => {
-    const i = !!t, L = s.Children.toArray(p).find(z) != null, E = s.useMemo(
+    children: c,
+    ...b
+  }, f) => {
+    const l = !!e, I = s.Children.toArray(c).find(D) != null, u = s.useMemo(
       () => ({
-        showSelectionChrome: i,
-        disabled: l,
-        expandAriaLabel: c,
+        showSelectionChrome: l,
+        disabled: d,
+        expandAriaLabel: m,
         collapseAriaLabel: x
       }),
-      [i, l, c, x]
+      [l, d, m, x]
     );
-    if (!L)
-      return /* @__PURE__ */ n(w, { value: E, children: /* @__PURE__ */ n(
+    if (!I)
+      return /* @__PURE__ */ a(h, { value: u, children: /* @__PURE__ */ a(
         "div",
         {
-          ref: b,
+          ref: f,
           "data-component": "expandable-list-item-row",
           "data-expandable": "false",
-          "data-selected": t ? "" : void 0,
-          "data-selection-chrome": i ? "" : void 0,
-          className: C(i, e),
-          ...m,
-          children: p
+          "data-selected": e ? "" : void 0,
+          "data-selection-chrome": l ? "" : void 0,
+          className: N(l, t),
+          ...b,
+          children: c
         }
       ) });
-    const N = o !== void 0, T = N ? o ? u : "" : void 0;
-    return /* @__PURE__ */ n(w, { value: E, 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: b,
+        ref: f,
         "data-component": "expandable-list-item",
         "data-expandable": "true",
-        "data-expanded": o ?? void 0,
-        "data-selected": t ? "" : void 0,
-        "data-selection-chrome": i ? "" : void 0,
-        className: C(i, e),
-        ...m,
-        children: /* @__PURE__ */ n(
-          O,
+        "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,
-            ...N ? { value: T } : {
-              defaultValue: r ? u : void 0
+            disabled: d,
+            ...v ? { value: y } : {
+              defaultValue: i ? p : void 0
             },
-            onValueChange: (k) => a?.(k === u),
-            children: /* @__PURE__ */ n(
-              P,
+            onValueChange: (L) => o?.(L === p),
+            children: /* @__PURE__ */ a(
+              T,
               {
-                value: u,
+                value: p,
                 className: "overflow-visible rounded-none border-0 bg-transparent p-0 shadow-none",
-                children: p
+                children: c
               }
             )
           }
@@ -126,169 +89,180 @@ const j = s.forwardRef(
     ) });
   }
 );
-j.displayName = "ExpandableListItemRoot";
-const te = y("expandable-list-item", {
+M.displayName = "ExpandableListItemRoot";
+const Z = E("expandable-list-item", {
   part: "row",
   displayName: "ExpandableListItemRow",
   className: "flex items-start gap-2 px-3 py-3"
-}), B = s.forwardRef(({ className: e, onCheckedChange: t, ...o }, r) => /* @__PURE__ */ n(
+}), _ = s.forwardRef(({ className: t, onCheckedChange: e, ...n }, i) => /* @__PURE__ */ a(
   "div",
   {
-    className: d("mt-1 shrink-0", e),
+    className: r("mt-1 shrink-0", t),
     "data-component": "expandable-list-item-checkbox",
-    onClick: (a) => a.stopPropagation(),
-    onKeyDown: (a) => a.stopPropagation(),
-    children: /* @__PURE__ */ n(
-      D,
+    onClick: (o) => o.stopPropagation(),
+    onKeyDown: (o) => o.stopPropagation(),
+    children: /* @__PURE__ */ a(
+      V,
       {
-        ref: r,
-        onCheckedChange: (a) => t?.(a === !0),
-        ...o
+        ref: i,
+        onCheckedChange: (o) => e?.(o === !0),
+        ...n
       }
     )
   }
 ));
-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,
+_.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: r,
+      ref: i,
       variant: "plain",
       "data-component": "expandable-list-item-trigger",
-      className: d(
+      className: r(
         "min-w-0 flex-1 overflow-hidden items-start gap-1 text-left",
-        a && "pointer-events-none opacity-50",
-        e
+        o && "pointer-events-none opacity-50",
+        t
       ),
-      disabled: a,
-      ...o,
+      disabled: o,
+      ...n,
       children: [
-        t,
-        /* @__PURE__ */ n(
+        e,
+        /* @__PURE__ */ a(
           "span",
           {
             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(R, { className: "size-4 rotate-90" })
+            children: /* @__PURE__ */ a(k, { className: "size-4 rotate-90" })
           }
         ),
-        /* @__PURE__ */ h("span", { className: "sr-only", children: [
-          l,
+        /* @__PURE__ */ g("span", { className: "sr-only", children: [
+          d,
           " / ",
-          c
+          m
         ] })
       ]
     }
   );
 });
-F.displayName = "ExpandableListItemTrigger";
-const H = s.forwardRef(({ className: e, children: t, ...o }, r) => {
-  const a = d(
+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",
-    e
+    t
   );
-  return typeof t != "string" ? /* @__PURE__ */ n(
+  return typeof e != "string" ? /* @__PURE__ */ a(
     "span",
     {
-      ref: r,
+      ref: i,
       "data-component": "expandable-list-item-title",
-      className: a,
-      ...o,
-      children: t
+      className: o,
+      ...n,
+      children: e
     }
-  ) : /* @__PURE__ */ n(
-    g,
+  ) : /* @__PURE__ */ a(
+    w,
     {
-      ref: r,
-      text: t,
-      componentName: "expandable-list-item-title",
-      className: a,
-      ...o
+      triggerClassName: o,
+      content: e,
+      side: "top",
+      variant: "tertiary",
+      children: /* @__PURE__ */ a(
+        "span",
+        {
+          ref: i,
+          "data-component": "expandable-list-item-title",
+          ...n,
+          children: e
+        }
+      )
     }
   );
 });
-H.displayName = "ExpandableListItemTitle";
-const W = s.forwardRef(({ className: e, children: t, ...o }, r) => {
-  const a = d(
+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",
-    e
+    t
   );
-  return typeof t == "string" ? /* @__PURE__ */ n(
-    g,
+  return typeof e == "string" ? /* @__PURE__ */ a(
+    w,
     {
-      text: t,
-      componentName: "expandable-list-item-description",
-      className: a
+      as: "div",
+      triggerClassName: o,
+      content: e,
+      side: "top",
+      variant: "tertiary",
+      children: /* @__PURE__ */ a("span", { "data-component": "expandable-list-item-description", children: e })
     }
-  ) : /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ a(
     "div",
     {
-      ref: r,
+      ref: i,
       "data-component": "expandable-list-item-description",
-      className: a,
-      ...o,
-      children: t
+      className: o,
+      ...n,
+      children: e
     }
   );
 });
-W.displayName = "ExpandableListItemDescription";
-const K = s.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ n(
+j.displayName = "ExpandableListItemDescription";
+const B = s.forwardRef(({ className: t, ...e }, n) => /* @__PURE__ */ a(
   "div",
   {
-    ref: o,
+    ref: n,
     "data-component": "expandable-list-item-media",
-    className: d("flex min-w-0 flex-1 flex-nowrap items-center gap-2 overflow-hidden", e),
-    ...t
+    className: r("flex min-w-0 flex-1 flex-nowrap items-center gap-2 overflow-hidden", t),
+    ...e
   }
 ));
-K.displayName = "ExpandableListItemMedia";
-const U = s.forwardRef(({ className: e, ...t }, o) => {
-  const { disabled: r } = I();
-  return /* @__PURE__ */ n(
+B.displayName = "ExpandableListItemMedia";
+const F = s.forwardRef(({ className: t, ...e }, n) => {
+  const { disabled: i } = C();
+  return /* @__PURE__ */ a(
     "div",
     {
-      ref: o,
+      ref: n,
       "data-component": "expandable-list-item-header",
-      className: d(
+      className: r(
         "min-w-0 w-full flex-1 overflow-hidden",
-        r && "pointer-events-none opacity-50",
-        e
+        i && "pointer-events-none opacity-50",
+        t
       ),
-      ...t
+      ...e
     }
   );
 });
-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(
+F.displayName = "ExpandableListItemHeader";
+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: r,
+    ref: i,
     "data-component": "expandable-list-item-content",
-    className: d(
+    className: r(
       "mx-2 mb-2 overflow-hidden rounded-lg bg-canvas-subtle pt-2",
-      e
+      t
     ),
-    ...o,
-    children: t
+    ...n,
+    children: e
   }
 ) }));
-X.displayName = "ExpandableListItemContent";
-const ae = y("expandable-list-item", {
+H.displayName = "ExpandableListItemContent";
+const $ = E("expandable-list-item", {
   part: "footer",
   displayName: "ExpandableListItemFooter",
   className: "px-4 py-3 sm:px-5"
 });
 export {
-  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
+  _ as ExpandableListItemCheckbox,
+  H as ExpandableListItemContent,
+  j as ExpandableListItemDescription,
+  $ as ExpandableListItemFooter,
+  F as ExpandableListItemHeader,
+  B as ExpandableListItemMedia,
+  M as ExpandableListItemRoot,
+  Z as ExpandableListItemRow,
+  S as ExpandableListItemTitle,
+  O as ExpandableListItemTrigger
 };