@flytedan/flytebot-design-system 0.52.0 → 0.54.0

package/dist/index.d.cts

@@ -1109,7 +1109,7 @@ interface FunnelChartProps {
  * FunnelChart — ordered steps drawn as a tapering stack (Sent -> Delivered -> Clicked ->
  * Opted-out, the reference front end's own shape, PLN-2 SMS-20), each reporting its
  * value, its step rate (conversion from the step before it) and its percent of the
- * first step. Colour comes only from `--chart-1..8` (MP-210), one per step in order.
+ * first step. Each step's label (name, value, rates) sits above its own bar. Colour comes only from `--chart-1..8` (MP-210), one per step in order.
  *
  * Every step is a real `<button>` wrapped in the kit's `Tooltip`, keyboard-reachable
  * exactly like `BarList`'s rows — a funnel is a ranked, ordered list before it is a
@@ -1185,7 +1185,10 @@ interface DataTableProps {
     columns: DataTableColumn[];
     rows: any[];
     compact?: boolean;
-    selectedId?: string | number;
+    /** Keys (row[rowKey]) of every selected row; each gets aria-selected and the selected styling. */
+    selectedIds?: ReadonlyArray<string | number>;
+    /** Per-row title (native tooltip), e.g. "Click to add to / remove from filter". */
+    rowTitle?: (row: any) => string;
     onRowClick?: (row: any) => void;
     rowKey?: string;
     /** First load: nothing on screen yet, so skeleton rows are drawn. */
@@ -1201,7 +1204,7 @@ interface DataTableProps {
     onSort?: (key: string) => void;
     className?: string;
 }
-declare function DataTable({ columns, rows, compact, selectedId, onRowClick, rowKey, loading, refreshing, skeletonRows, sort, onSort, className, ...rest }: DataTableProps): React.JSX.Element;
+declare function DataTable({ columns, rows, compact, selectedIds, rowTitle, onRowClick, rowKey, loading, refreshing, skeletonRows, sort, onSort, className, ...rest }: DataTableProps): React.JSX.Element;
 
 interface FilterFieldOption {
     value: string;

package/dist/index.d.ts

@@ -1109,7 +1109,7 @@ interface FunnelChartProps {
  * FunnelChart — ordered steps drawn as a tapering stack (Sent -> Delivered -> Clicked ->
  * Opted-out, the reference front end's own shape, PLN-2 SMS-20), each reporting its
  * value, its step rate (conversion from the step before it) and its percent of the
- * first step. Colour comes only from `--chart-1..8` (MP-210), one per step in order.
+ * first step. Each step's label (name, value, rates) sits above its own bar. Colour comes only from `--chart-1..8` (MP-210), one per step in order.
  *
  * Every step is a real `<button>` wrapped in the kit's `Tooltip`, keyboard-reachable
  * exactly like `BarList`'s rows — a funnel is a ranked, ordered list before it is a
@@ -1185,7 +1185,10 @@ interface DataTableProps {
     columns: DataTableColumn[];
     rows: any[];
     compact?: boolean;
-    selectedId?: string | number;
+    /** Keys (row[rowKey]) of every selected row; each gets aria-selected and the selected styling. */
+    selectedIds?: ReadonlyArray<string | number>;
+    /** Per-row title (native tooltip), e.g. "Click to add to / remove from filter". */
+    rowTitle?: (row: any) => string;
     onRowClick?: (row: any) => void;
     rowKey?: string;
     /** First load: nothing on screen yet, so skeleton rows are drawn. */
@@ -1201,7 +1204,7 @@ interface DataTableProps {
     onSort?: (key: string) => void;
     className?: string;
 }
-declare function DataTable({ columns, rows, compact, selectedId, onRowClick, rowKey, loading, refreshing, skeletonRows, sort, onSort, className, ...rest }: DataTableProps): React.JSX.Element;
+declare function DataTable({ columns, rows, compact, selectedIds, rowTitle, onRowClick, rowKey, loading, refreshing, skeletonRows, sort, onSort, className, ...rest }: DataTableProps): React.JSX.Element;
 
 interface FilterFieldOption {
     value: string;

package/dist/index.js

@@ -2779,19 +2779,6 @@ function FunnelChart({
           const color = chartColor(i);
           const detail = `${s.label} \u2014 ${valueFormat(value)} \xB7 ${formatPercent(Math.round(pctFirst))} of ${steps[0]?.label || "first step"}` + (stepRate != null ? ` \xB7 ${formatPercent(Math.round(stepRate))} of ${steps[i - 1].label}` : "");
           return /* @__PURE__ */ jsx40("li", { className: "fd-funnel-row", children: /* @__PURE__ */ jsx40(Tooltip, { label: detail, children: /* @__PURE__ */ jsxs32("button", { type: "button", className: "fd-funnel-btn", children: [
-            /* @__PURE__ */ jsx40("span", { className: "fd-funnel-shape-wrap", style: { height: barHeight }, children: /* @__PURE__ */ jsx40(
-              "span",
-              {
-                className: "fd-funnel-shape",
-                role: "img",
-                "aria-label": detail,
-                style: {
-                  width: widthPct + "%",
-                  background: color,
-                  clipPath: `polygon(${insetTop}% 0, ${100 - insetTop}% 0, ${100 - insetBottom}% 100%, ${insetBottom}% 100%)`
-                }
-              }
-            ) }),
             /* @__PURE__ */ jsxs32("span", { className: "fd-funnel-meta", children: [
               /* @__PURE__ */ jsx40("span", { className: "fd-funnel-label", title: truncationTitle(s.label), children: s.label }),
               /* @__PURE__ */ jsx40("span", { className: "fd-funnel-value fd-tabular", children: valueFormat(value) }),
@@ -2805,7 +2792,20 @@ function FunnelChart({
                   " of first"
                 ] })
               ] })
-            ] })
+            ] }),
+            /* @__PURE__ */ jsx40("span", { className: "fd-funnel-shape-wrap", style: { height: barHeight }, children: /* @__PURE__ */ jsx40(
+              "span",
+              {
+                className: "fd-funnel-shape",
+                role: "img",
+                "aria-label": detail,
+                style: {
+                  width: widthPct + "%",
+                  background: color,
+                  clipPath: `polygon(${insetTop}% 0, ${100 - insetTop}% 0, ${100 - insetBottom}% 100%, ${insetBottom}% 100%)`
+                }
+              }
+            ) })
           ] }) }) }, s.id);
         }) }),
         /* @__PURE__ */ jsx40(
@@ -2937,7 +2937,8 @@ function DataTable({
   columns = [],
   rows = [],
   compact: compact3 = false,
-  selectedId,
+  selectedIds,
+  rowTitle,
   onRowClick,
   rowKey = "id",
   loading = false,
@@ -2974,7 +2975,8 @@ function DataTable({
           /* @__PURE__ */ jsx43("tbody", { className: stale ? "fd-stale" : void 0, children: loading ? Array.from({ length: skeletonRows }).map((_, i) => /* @__PURE__ */ jsx43("tr", { children: columns.map((c) => /* @__PURE__ */ jsx43("td", { className: c.numeric ? "is-num" : "", children: /* @__PURE__ */ jsx43("span", { className: "fd-skel fd-skel-text", style: { display: "inline-block", height: 13, width: c.numeric ? 52 : i % 3 === 0 ? "72%" : "88%" } }) }, c.key)) }, i)) : rows.map((r) => /* @__PURE__ */ jsx43(
             "tr",
             {
-              "aria-selected": selectedId === r[rowKey] ? "true" : void 0,
+              "aria-selected": selectedIds?.includes(r[rowKey]) ? "true" : void 0,
+              title: rowTitle ? rowTitle(r) : void 0,
               onClick: onRowClick ? () => onRowClick(r) : void 0,
               style: onRowClick ? { cursor: "pointer" } : void 0,
               children: columns.map((c) => /* @__PURE__ */ jsx43("td", { className: c.numeric ? "is-num" : "", children: c.render ? c.render(r) : r[c.key] }, c.key))