impact-nova 1.7.2 → 1.7.4

package/dist/components/ui/data-table/data-table-column-list.js

@@ -1,82 +1,82 @@
 import { jsx as M } from "react/jsx-runtime";
-import { useState as z, useRef as P, useCallback as h, useEffect as _ } from "react";
-import { useDataTable as q } from "./data-table-context.js";
-import { NestedList as B } from "../nested-list/nested-list.js";
-import { SelectionMode as H } from "../types/nested-list.types.js";
-import { mergePartialOrderedColumnState as J } from "./data-table-column-state.js";
-import { useImpactNovaI18n as K } from "../../../i18n/ImpactNovaI18nContext.js";
-const le = ({
+import { useState as E, useRef as P, useCallback as m, useEffect as q } from "react";
+import { useDataTable as B } from "./data-table-context.js";
+import { NestedList as H } from "../nested-list/nested-list.js";
+import { SelectionMode as J } from "../types/nested-list.types.js";
+import { mergePartialOrderedColumnState as Q } from "./data-table-column-state.js";
+import { useImpactNovaI18n as X } from "../../../i18n/ImpactNovaI18nContext.js";
+const ne = ({
   enableApplyDiscard: b = !1,
   showSearch: R = !0,
   showSelectAll: w = !0,
   showCollapse: L = !0
 }) => {
-  const { gridApi: l } = q(), { t: d } = K(), [j, N] = z([]), [A, F] = z(!1), m = P(!1), U = P(/* @__PURE__ */ new Map()), D = h(() => {
-    if (!l || m.current) return;
-    const n = l.getColumnState(), a = new Map(n.map((t) => [t.colId, t]));
-    U.current = a;
-    const o = l.getColumns() || [], u = new Map(o.map((t) => [t.getColId(), t])), c = [], e = [], S = /* @__PURE__ */ new Map(), T = (t, i) => {
+  const { gridApi: l } = B(), { t: f } = X(), [j, x] = E([]), [A, F] = E(!1), d = P(!1), [K, V] = E(!1), U = P(/* @__PURE__ */ new Map()), y = m(() => {
+    if (!l || d.current) return;
+    const o = l.getColumnState(), c = new Map(o.map((t) => [t.colId, t]));
+    U.current = c;
+    const n = l.getColumns() || [], u = new Map(n.map((t) => [t.getColId(), t])), a = [], e = [], S = /* @__PURE__ */ new Map(), D = (t, s) => {
       const r = t.getGroupId();
-      let s = S.get(r);
-      if (s) return s;
-      const f = t.getOriginalParent(), g = f ? T(f, i).children : i, C = t.getColGroupDef();
-      return s = {
+      let i = S.get(r);
+      if (i) return i;
+      const h = t.getOriginalParent(), g = h ? D(h, s).children : s, C = t.getColGroupDef();
+      return i = {
         id: r,
         label: C?.headerName || r,
         checked: !0,
         children: [],
         category: "group"
-      }, S.set(r, s), g.push(s), s;
+      }, S.set(r, i), g.push(i), i;
     };
-    let v = 0, O = 0, I = 0, x = 0;
-    n.forEach((t) => {
-      const i = u.get(t.colId);
-      if (!i) return;
-      let r = l.getDisplayNameForColumn(i, "header");
+    let T = 0, O = 0, v = 0, z = 0;
+    o.forEach((t) => {
+      const s = u.get(t.colId);
+      if (!s) return;
+      let r = l.getDisplayNameForColumn(s, "header");
       if (r === "") return;
       if (r == null) {
-        const G = i.getColDef();
+        const G = s.getColDef();
         if (G.headerName === "") return;
         r = G.headerName || G.field || t.colId;
       }
       if (!r || r.trim() === "")
         return;
-      const s = !t.hide, f = {
+      const i = !t.hide, h = {
         id: t.colId,
         label: r,
-        checked: s
+        checked: i
       };
-      t.pinned ? (v++, s && O++) : (I++, s && x++);
-      const g = t.pinned ? c : e, C = i.getOriginalParent();
-      C?.getColGroupDef().children ? T(C, g).children.push(f) : g.push(f);
+      t.pinned ? (T++, i && O++) : (v++, i && z++);
+      const g = t.pinned ? a : e, C = s.getOriginalParent();
+      C?.getColGroupDef().children ? D(C, g).children.push(h) : g.push(h);
     });
-    const k = (t) => {
-      let i = t.length > 0;
+    const I = (t) => {
+      let s = t.length > 0;
       for (const r of t)
-        r.children && (r.checked = k(r.children)), r.checked || (i = !1);
-      return i;
+        r.children && (r.checked = I(r.children)), r.checked || (s = !1);
+      return s;
     };
-    k(c), k(e);
-    const y = [];
-    c.length > 0 && y.push({
+    I(a), I(e);
+    const k = [];
+    a.length > 0 && k.push({
       id: "root-frozen",
-      label: d("dataTable.frozenColumns"),
-      checked: v > 0 && O === v,
-      children: c,
+      label: f("dataTable.frozenColumns"),
+      checked: T > 0 && O === T,
+      children: a,
       category: "structure",
       isDragDisabled: !0
-    }), e.length > 0 && y.push({
+    }), e.length > 0 && k.push({
       id: "root-scrollable",
-      label: d("dataTable.scrollableColumns"),
-      checked: I > 0 && x === I,
+      label: f("dataTable.scrollableColumns"),
+      checked: v > 0 && z === v,
       children: e,
       category: "structure",
       isDragDisabled: !0
-    }), N(y), F(!0);
-  }, [l, d]);
-  _(() => {
+    }), x(k), F(!0);
+  }, [l, f]);
+  q(() => {
     if (!l) return;
-    const n = setTimeout(() => D(), 0), a = [
+    const o = setTimeout(() => y(), 0), c = [
       "columnVisible",
       "columnPinned",
       "columnMoved",
@@ -85,77 +85,83 @@ const le = ({
       "columnGroupOpened",
       "columnRowGroupChanged",
       "columnPivotModeChanged",
-      "columnEverythingChanged"
+      "columnEverythingChanged",
+      "dragStopped",
+      "columnValueChanged",
+      "displayedColumnsChanged"
     ];
-    let o = null;
+    let n = null;
     const u = () => {
-      o && clearTimeout(o), o = setTimeout(() => {
-        o = null, D();
+      n && clearTimeout(n), n = setTimeout(() => {
+        n = null;
+        const a = !d.current;
+        d.current = !1, y(), a && V((e) => !e);
       }, 150);
     };
-    return l.isDestroyed() || a.forEach((c) => l.addEventListener(c, u)), () => {
-      clearTimeout(n), o && clearTimeout(o), l.isDestroyed() || a.forEach((c) => l.removeEventListener(c, u));
+    return l.isDestroyed() || c.forEach((a) => l.addEventListener(a, u)), () => {
+      clearTimeout(o), n && clearTimeout(n), l.isDestroyed() || c.forEach((a) => l.removeEventListener(a, u));
     };
-  }, [l, D]);
-  const E = h((n) => {
-    const a = [], o = (u, c) => {
+  }, [l, y]);
+  const N = m((o) => {
+    const c = [], n = (u, a) => {
       u.forEach((e) => {
         if (e.id === "root-frozen") {
-          e.children && o(e.children, "left");
+          e.children && n(e.children, "left");
           return;
         }
         if (e.id === "root-scrollable") {
-          e.children && o(e.children, null);
+          e.children && n(e.children, null);
           return;
         }
-        e.category === "group" || e.children && e.children.length > 0 ? e.children && o(e.children, c) : l?.getColumn(e.id) && a.push({
+        e.category === "group" || e.children && e.children.length > 0 ? e.children && n(e.children, a) : l?.getColumn(e.id) && c.push({
           colId: e.id,
-          pinned: c,
+          pinned: a,
           hide: !e.checked
         });
       });
     };
-    return o(n, null), a;
-  }, [l]), p = h((n) => {
+    return n(o, null), c;
+  }, [l]), p = m((o) => {
     if (!l) return;
-    m.current = !0;
-    const a = E(n);
-    if (a.length === 0) {
+    d.current = !0;
+    const c = N(o);
+    if (c.length === 0) {
       setTimeout(() => {
-        m.current = !1;
+        d.current = !1;
       }, 300);
       return;
     }
-    const o = l.getColumnState(), u = J(o, a);
+    const n = l.getColumnState(), u = Q(n, c);
     l.applyColumnState({
       state: u,
       applyOrder: !0
     }), setTimeout(() => {
-      m.current = !1;
+      d.current = !1;
     }, 300);
-  }, [l, E]), V = h((n) => {
-    p(n);
-  }, [p]), W = h((n) => {
-    b || p(n), N(n);
+  }, [l, N]), W = m((o) => {
+    p(o);
+  }, [p]), _ = m((o) => {
+    b || p(o), x(o);
   }, [b, p]);
   return A ? /* @__PURE__ */ M("div", { className: "flex flex-col h-full bg-canvas-elevated", children: /* @__PURE__ */ M(
-    B,
+    H,
     {
       items: j,
-      onChange: W,
-      onSubmit: V,
+      onChange: _,
+      onSubmit: W,
       enableApplyDiscard: b,
       enableSearch: R,
       enableSelectAll: w,
       enableDragDrop: !0,
       enableCollapse: !0,
       enableGlobalCollapse: L,
-      selectionMode: H.CASCADE_DOWN,
-      searchPlaceholder: d("dataTable.searchColumnsPlaceholder"),
+      selectionMode: J.CASCADE_DOWN,
+      searchPlaceholder: f("dataTable.searchColumnsPlaceholder"),
       className: "h-full"
-    }
-  ) }) : /* @__PURE__ */ M("div", { className: "p-4 text-[13px] text-content-placeholder", children: d("dataTable.loadingColumns") });
+    },
+    K ? "sync-a" : "sync-b"
+  ) }) : /* @__PURE__ */ M("div", { className: "p-4 text-[13px] text-content-placeholder", children: f("dataTable.loadingColumns") });
 };
 export {
-  le as DataTableColumnList
+  ne as DataTableColumnList
 };

package/dist/components/ui/expandable-sku/expandable-sku.d.ts

@@ -0,0 +1,38 @@
+import { SkuRowSelection, SkuRowSection } from './expandable-sku.types';
+import * as React from "react";
+export type { SkuRowAttributesSection, SkuRowCustomSection, SkuRowMetricColumn, SkuRowMetricsSection, SkuRowSelection, SkuRowSection, } from './expandable-sku.types';
+export interface ExpandableSkuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
+    /** Primary line (e.g. SKU code). */
+    sku: string;
+    /** Secondary line (e.g. product title). */
+    subtitle?: React.ReactNode;
+    /** Optional slot next to the SKU (e.g. Mapped badge). */
+    badge?: React.ReactNode;
+    /**
+     * When set, a checkbox is shown. Omit entirely to hide selection (read-only / detail rows).
+     */
+    selection?: SkuRowSelection;
+    /**
+     * Row highlight (lavender shell + white detail card). Also applied when `selection.checked` is true
+     * so checkbox-only usage picks up the same UI without passing `selected`.
+     */
+    selected?: boolean;
+    /** Controlled expanded state. */
+    expanded?: boolean;
+    /** Uncontrolled default. Ignored when `expanded` is passed. */
+    defaultExpanded?: boolean;
+    onExpandedChange?: (open: boolean) => void;
+    /** Disable expand/collapse interaction. */
+    disabled?: boolean;
+    /** Ordered blocks inside the expanded panel. */
+    sections?: ReadonlyArray<SkuRowSection>;
+    /** Extra content after preset `sections` (inside the panel card). */
+    panelFooter?: React.ReactNode;
+    expandAriaLabel?: string;
+    collapseAriaLabel?: string;
+}
+/**
+ * Expandable SKU : optional checkbox, title stack, chevron when there is panel content,
+ * and a collapsible body with metrics, attribute pills, or custom sections.
+ */
+export declare const ExpandableSku: React.ForwardRefExoticComponent<ExpandableSkuProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/expandable-sku/expandable-sku.js

@@ -0,0 +1,244 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import * as B from "react";
+import { ChevronDown as E } from "lucide-react";
+import { Accordion as P, AccordionItem as V, AccordionTrigger as _, AccordionContent as R } from "../accordion.js";
+import { Badge as I } from "../badge.js";
+import { Checkbox as z } from "../checkbox.js";
+import { FilterPopoverContent as D } from "../filter-strip/filter-tag-list.js";
+import { Popover as M, PopoverTrigger as j } from "../popover.js";
+import { Tag as K } from "../tag.js";
+import { Tooltip as L, TooltipTrigger as O, TooltipContent as U } from "../tooltip.js";
+import { cn as p } from "../../../lib/utils.js";
+function W({ section: a }) {
+  return a.columns.length === 0 ? null : /* @__PURE__ */ e("div", { className: "min-w-0 bg-transparent", 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: a.columns.map((l, s) => /* @__PURE__ */ t(
+    "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("p", { className: "truncate text-xs font-semibold leading-5 text-content-heading", title: l.label, children: l.label }),
+        /* @__PURE__ */ e("p", { className: "truncate text-sm font-semibold leading-5 text-content", title: String(l.value), children: l.value })
+      ]
+    },
+    `${a.id}-metric-${s}`
+  )) }) }) });
+}
+function X({ section: a }) {
+  const i = a.maxVisibleTags ?? 4, l = a.tags, s = l.slice(0, i), n = l.slice(i), o = n.length, d = a.formatOverflow?.(o) ?? (o > 0 ? `+${o}` : null);
+  return /* @__PURE__ */ t("div", { className: "px-4 py-4 pt-0 sm:px-5", children: [
+    /* @__PURE__ */ e("p", { className: "text-xs font-semibold leading-5 text-content-heading", children: a.title ?? "Attributes" }),
+    /* @__PURE__ */ t("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
+      s.map((c, u) => /* @__PURE__ */ e(
+        I,
+        {
+          variant: "subtle",
+          color: "neutral",
+          size: "sm",
+          shape: "circle",
+          className: "max-w-full",
+          children: c
+        },
+        `${u}-${c}`
+      )),
+      n.length > 0 ? /* @__PURE__ */ t(M, { children: [
+        /* @__PURE__ */ t(L, { children: [
+          /* @__PURE__ */ e(O, { asChild: !0, children: /* @__PURE__ */ e(j, { asChild: !0, children: /* @__PURE__ */ e(
+            K,
+            {
+              variant: "secondary",
+              size: "md",
+              shape: "rounded",
+              className: "whitespace-nowrap border-0 bg-[#eceefd] px-2 font-['Manrope'] text-xs font-medium text-[#4259ee] hover:bg-[#dce1fc] h-6 cursor-pointer",
+              tabIndex: 0,
+              role: "button",
+              "aria-label": `${n.length} more attributes for ${a.title ?? "Attributes"}`,
+              children: d
+            }
+          ) }) }),
+          /* @__PURE__ */ t(U, { variant: "tertiary", side: "top", children: [
+            n.length,
+            " more"
+          ] })
+        ] }),
+        /* @__PURE__ */ e(
+          D,
+          {
+            remainingValues: n,
+            onItemRemove: () => {
+            },
+            isRemovable: !1
+          }
+        )
+      ] }) : null
+    ] })
+  ] });
+}
+function q({ section: a }) {
+  return /* @__PURE__ */ e("div", { className: "px-4 py-4 sm:px-5", children: a.content });
+}
+const h = "expandable-sku-row-item";
+function G(a) {
+  switch (a.type) {
+    case "metrics":
+      return /* @__PURE__ */ e(W, { section: a }, a.id);
+    case "attributes":
+      return /* @__PURE__ */ e(X, { section: a }, a.id);
+    case "custom":
+      return /* @__PURE__ */ e(q, { section: a }, a.id);
+    default:
+      return null;
+  }
+}
+const H = B.forwardRef(
+  ({
+    className: a,
+    sku: i,
+    subtitle: l,
+    badge: s,
+    selection: n,
+    selected: o,
+    expanded: d,
+    defaultExpanded: c = !1,
+    onExpandedChange: u,
+    disabled: x,
+    sections: f,
+    panelFooter: v,
+    expandAriaLabel: A = "Expand details",
+    collapseAriaLabel: T = "Collapse details",
+    ...b
+  }, g) => {
+    const w = d !== void 0, S = w ? d ? h : "" : void 0, m = !!(o || n?.checked), $ = f != null && f.length > 0 || v != null, N = (r) => /* @__PURE__ */ t(
+      "div",
+      {
+        className: p(
+          "min-w-0 flex-1",
+          r && "pointer-events-none opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: p(
+                  "text-sm font-semibold leading-6 text-content",
+                  m && "tracking-tight"
+                ),
+                children: i
+              }
+            ),
+            s
+          ] }),
+          l ? /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-medium leading-4 text-[#60697d]", children: l }) : null
+        ]
+      }
+    ), k = p(
+      "rounded-xl transition-[background-color,border-color,box-shadow] duration-200",
+      m ? "border-stroke-accent/40 bg-canvas-accent shadow-sm" : "border-stroke bg-canvas-elevated",
+      a
+    ), C = n ? /* @__PURE__ */ e(
+      "div",
+      {
+        className: "pt-0.5",
+        onClick: (r) => r.stopPropagation(),
+        onKeyDown: (r) => r.stopPropagation(),
+        children: /* @__PURE__ */ e(
+          z,
+          {
+            checked: n.checked,
+            disabled: n.disabled,
+            onCheckedChange: (r) => {
+              const y = r === !0;
+              y !== n.checked && n.onCheckedChange(y);
+            },
+            "aria-label": n["aria-label"] ?? `Select ${i}`
+          }
+        )
+      }
+    ) : null;
+    return $ ? /* @__PURE__ */ e(
+      "div",
+      {
+        ref: g,
+        "data-component": "expandable-sku-row",
+        "data-expandable": "true",
+        "data-expanded": d ?? void 0,
+        "data-selected": o ? "" : void 0,
+        "data-selection-chrome": m ? "" : void 0,
+        className: k,
+        ...b,
+        children: /* @__PURE__ */ e(
+          P,
+          {
+            type: "single",
+            collapsible: !0,
+            disabled: x,
+            ...w ? { value: S } : {
+              defaultValue: c ? h : void 0
+            },
+            onValueChange: (r) => u?.(r === h),
+            children: /* @__PURE__ */ t(
+              V,
+              {
+                value: h,
+                className: "border-0 bg-transparent p-0 shadow-none rounded-none overflow-visible",
+                children: [
+                  /* @__PURE__ */ t("div", { className: "flex items-start gap-3 px-3 py-3", children: [
+                    C,
+                    /* @__PURE__ */ t(
+                      _,
+                      {
+                        variant: "plain",
+                        className: p(
+                          "min-w-0 gap-2 text-left items-center ",
+                          x && "pointer-events-none opacity-50"
+                        ),
+                        children: [
+                          N(!1),
+                          /* @__PURE__ */ e(
+                            "span",
+                            {
+                              className: "expandable-sku-row__chev mt-0.5 inline-flex shrink-0 text-content-muted transition-transform duration-200 group-data-[state=open]:rotate-180",
+                              "aria-hidden": !0,
+                              children: /* @__PURE__ */ e(E, { className: "size-4" })
+                            }
+                          ),
+                          /* @__PURE__ */ t("span", { className: "sr-only", children: [
+                            A,
+                            " / ",
+                            T
+                          ] })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e(R, { className: "border-0 bg-transparent p-0 pb-[0.01rem]", children: /* @__PURE__ */ t("div", { className: "mx-2 mb-2 overflow-hidden  bg-[#f8f9fb] pt-2 rounded-lg", children: [
+                    f?.map((r) => G(r)),
+                    v ? /* @__PURE__ */ e("div", { className: "px-4 py-3 sm:px-5", children: v }) : null
+                  ] }) })
+                ]
+              }
+            )
+          }
+        )
+      }
+    ) : /* @__PURE__ */ e(
+      "div",
+      {
+        ref: g,
+        "data-component": "expandable-sku-row",
+        "data-expandable": "false",
+        "data-selected": o ? "" : void 0,
+        "data-selection-chrome": m ? "" : void 0,
+        className: k,
+        ...b,
+        children: /* @__PURE__ */ t("div", { className: "flex items-start gap-3 px-3 py-3", children: [
+          C,
+          N(!!x)
+        ] })
+      }
+    );
+  }
+);
+H.displayName = "ExpandableSku";
+export {
+  H as ExpandableSku
+};

package/dist/components/ui/expandable-sku/expandable-sku.types.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+export type SkuRowMetricColumn = {
+    label: string;
+    value: string;
+};
+/** Horizontal metrics row (any column count). */
+export type SkuRowMetricsSection = {
+    id: string;
+    type: "metrics";
+    columns: ReadonlyArray<SkuRowMetricColumn>;
+};
+/** Tag pills with optional overflow summary (e.g. `+64`). */
+export type SkuRowAttributesSection = {
+    id: string;
+    type: "attributes";
+    title?: string;
+    tags: ReadonlyArray<string>;
+    /** Max tags before overflow pill (default 4). */
+    maxVisibleTags?: number;
+    /** Default: `(n) => \`+\${n}\``. */
+    formatOverflow?: (hiddenCount: number) => string;
+};
+/** Arbitrary block inside the expanded panel. */
+export type SkuRowCustomSection = {
+    id: string;
+    type: "custom";
+    content: ReactNode;
+};
+export type SkuRowSection = SkuRowMetricsSection | SkuRowAttributesSection | SkuRowCustomSection;
+export type SkuRowSelection = {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+    "aria-label"?: string;
+};

package/dist/components/ui/expandable-sku/index.d.ts

@@ -0,0 +1,2 @@
+export { ExpandableSku, type ExpandableSkuProps, } from './expandable-sku';
+export type { SkuRowAttributesSection, SkuRowCustomSection, SkuRowMetricColumn, SkuRowMetricsSection, SkuRowSelection, SkuRowSection, } from './expandable-sku.types';

package/dist/components/ui/expandable-sku/index.js

@@ -0,0 +1,4 @@
+import { ExpandableSku as o } from "./expandable-sku.js";
+export {
+  o as ExpandableSku
+};

package/dist/components/ui/filter-strip/filter-tag-list.d.ts

@@ -5,5 +5,12 @@ interface FilterTagListProps {
     onOverflowClick?: (id: string) => void;
     onViewAll?: () => void;
 }
+declare const FilterPopoverContent: ({ remainingValues, viewAllTrigger, onViewAll, onItemRemove, isRemovable }: {
+    remainingValues: (string | number)[];
+    viewAllTrigger?: "expand" | "custom";
+    onViewAll?: () => void;
+    onItemRemove: (val: string | number) => void;
+    isRemovable?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
 declare const FilterTagList: ({ filters, onFilterRemove: _onFilterRemove, onOverflowClick, onViewAll, }: FilterTagListProps) => import("react/jsx-runtime").JSX.Element;
-export { FilterTagList };
+export { FilterTagList, FilterPopoverContent };

package/dist/components/ui/filter-strip/filter-tag-list.js

@@ -155,5 +155,6 @@ const j = ({
   }
 ) });
 export {
+  j as FilterPopoverContent,
   M as FilterTagList
 };