@flytedan/flytebot-design-system 0.67.3 → 0.68.0

package/dist/index.cjs

@@ -4193,6 +4193,24 @@ function CsiHero({ band = "weak", crp, label, className = "" }) {
 // src/components/data/DataTable.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var STACK_MAX_WIDTH = 640;
+function RowActionButton({ action, size }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    IconButton,
+    {
+      icon: action.icon,
+      label: action.label,
+      size,
+      disabled: action.disabled,
+      onClick: (e) => {
+        e.stopPropagation();
+        action.onClick();
+      }
+    }
+  );
+}
+function RowActionCell({ action }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: "fd-table-action", children: action ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RowActionButton, { action, size: "sm" }) : null });
+}
 var cellOf = (c, row) => c.render ? c.render(row) : row[c.key];
 function rowInteraction(row, onRowClick) {
   if (!onRowClick) return {};
@@ -4220,6 +4238,7 @@ function DataTable({
   selectedIds,
   rowTitle,
   onRowClick,
+  rowAction,
   rowKey = "id",
   loading = false,
   refreshing = false,
@@ -4256,27 +4275,37 @@ function DataTable({
             onSort,
             rowTitle,
             onRowClick,
+            rowAction,
             isSelected
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("table", { className: ["fd-table", compact3 ? "fd-table-compact" : ""].filter(Boolean).join(" "), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("tr", { children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-            "th",
-            {
-              scope: "col",
-              style: { width: c.width },
-              className: [c.numeric ? "is-num" : "", sort && sort.key === c.key ? "is-sorted" : ""].filter(Boolean).join(" "),
-              "aria-sort": sort && sort.key === c.key ? sort.dir === "asc" ? "ascending" : "descending" : void 0,
-              children: c.sortable && onSort ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SortButton, { column: c, sort, onSort }) : c.label
-            },
-            c.key
-          )) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("tbody", { className: stale ? "fd-stale" : void 0, children: loading ? Array.from({ length: skeletonRows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("tr", { children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: c.numeric ? "is-num" : "", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("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__ */ (0, import_jsx_runtime44.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("tr", { children: [
+            columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              "th",
+              {
+                scope: "col",
+                style: { width: c.width },
+                className: [c.numeric ? "is-num" : "", sort && sort.key === c.key ? "is-sorted" : ""].filter(Boolean).join(" "),
+                "aria-sort": sort && sort.key === c.key ? sort.dir === "asc" ? "ascending" : "descending" : void 0,
+                children: c.sortable && onSort ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SortButton, { column: c, sort, onSort }) : c.label
+              },
+              c.key
+            )),
+            rowAction ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("th", { scope: "col", className: "fd-table-action-head", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fd-sr-only", children: "Actions" }) }) : null
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("tbody", { className: stale ? "fd-stale" : void 0, children: loading ? Array.from({ length: skeletonRows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("tr", { children: [
+            columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: c.numeric ? "is-num" : "", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fd-skel fd-skel-text", style: { display: "inline-block", height: 13, width: c.numeric ? 52 : i % 3 === 0 ? "72%" : "88%" } }) }, c.key)),
+            rowAction ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: "fd-table-action" }) : null
+          ] }, i)) : rows.map((r) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
             "tr",
             {
               "aria-selected": isSelected(r) ? "true" : void 0,
               title: rowTitle ? rowTitle(r) : void 0,
               ...rowInteraction(r, onRowClick),
-              children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: c.numeric ? "is-num" : "", children: cellOf(c, r) }, c.key))
+              children: [
+                columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: c.numeric ? "is-num" : "", children: cellOf(c, r) }, c.key)),
+                rowAction ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RowActionCell, { action: rowAction(r) }) : null
+              ]
             },
             r[rowKey]
           )) })
@@ -4289,7 +4318,7 @@ function DataTable({
     ] }) }) : null
   ] });
 }
-function StackedRows({ columns, rows, rowKey, loading, stale, skeletonRows, sort, onSort, rowTitle, onRowClick, isSelected }) {
+function StackedRows({ columns, rows, rowKey, loading, stale, skeletonRows, sort, onSort, rowTitle, onRowClick, rowAction, isSelected }) {
   const sortable = onSort ? columns.filter((c) => c.sortable) : [];
   const primary = columns.filter((c) => c.phone === "primary");
   const secondary = columns.filter((c) => c.phone === "secondary");
@@ -4308,31 +4337,34 @@ function StackedRows({ columns, rows, rowKey, loading, stale, skeletonRows, sort
         c.key
       );
     }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: stale ? "fd-dt-cards fd-stale" : "fd-dt-cards", children: loading ? Array.from({ length: skeletonRows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "fd-dt-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: stale ? "fd-dt-cards fd-stale" : "fd-dt-cards", children: loading ? Array.from({ length: skeletonRows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "fd-dt-item", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "fd-dt-card", children: [
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fd-skel fd-skel-text", style: { display: "block", height: 14, width: i % 3 === 0 ? "55%" : "70%" } }),
       secondary.length ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fd-skel fd-skel-text", style: { display: "block", height: 12, width: "40%" } }) : null
-    ] }, i)) : rows.map((r) => {
+    ] }) }, i)) : rows.map((r) => {
       const selected = isSelected(r);
+      const action = rowAction ? rowAction(r) : null;
       const semantics = onRowClick ? { role: "button", "aria-pressed": selected } : { "aria-current": selected ? "true" : void 0 };
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-        "div",
-        {
-          className: "fd-dt-card",
-          title: rowTitle ? rowTitle(r) : void 0,
-          "data-selected": selected ? "true" : void 0,
-          ...semantics,
-          ...rowInteraction(r, onRowClick),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "fd-dt-card-title", children: primary.map((c) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: c.numeric ? "is-num" : void 0, children: cellOf(c, r) }, c.key)) }),
-            secondary.length ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "fd-dt-card-meta", children: secondary.map((c) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: c.numeric ? "is-num" : void 0, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fd-dt-card-label", children: c.label }),
-              " ",
-              cellOf(c, r)
-            ] }, c.key)) }) : null
-          ]
-        },
-        r[rowKey]
-      );
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "fd-dt-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+          "div",
+          {
+            className: "fd-dt-card",
+            title: rowTitle ? rowTitle(r) : void 0,
+            "data-selected": selected ? "true" : void 0,
+            ...semantics,
+            ...rowInteraction(r, onRowClick),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "fd-dt-card-title", children: primary.map((c) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: c.numeric ? "is-num" : void 0, children: cellOf(c, r) }, c.key)) }),
+              secondary.length ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "fd-dt-card-meta", children: secondary.map((c) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: c.numeric ? "is-num" : void 0, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fd-dt-card-label", children: c.label }),
+                " ",
+                cellOf(c, r)
+              ] }, c.key)) }) : null
+            ]
+          }
+        ),
+        action ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "fd-dt-action", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RowActionButton, { action, size: "md" }) }) : null
+      ] }, r[rowKey]);
     }) })
   ] });
 }
@@ -4993,8 +5025,8 @@ function splitForMiddleEllipsis(text) {
   if (chars.length <= TAIL_CHARS) return { head: text, tail: "" };
   return { head: chars.slice(0, -TAIL_CHARS).join(""), tail: chars.slice(-TAIL_CHARS).join("") };
 }
-function MiddleEllipsis({ text }) {
-  const { head, tail } = splitForMiddleEllipsis(text);
+function MiddleEllipsis({ text, middle = true }) {
+  const { head, tail } = middle ? splitForMiddleEllipsis(text) : { head: text, tail: "" };
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "fd-mid-ellipsis", children: [
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "fd-mid-ellipsis-head", children: head }),
     tail ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "fd-mid-ellipsis-tail", children: tail }) : null
@@ -5131,6 +5163,9 @@ function assertValidFieldDefinition(field) {
     );
   }
 }
+function joinsLabels(field, value) {
+  return field.type === "multiSelect" && value?.values.length === 2;
+}
 function chipLabel(field, value) {
   switch (field.type) {
     case "text":
@@ -5885,7 +5920,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
         const valueText = set ? chipLabel(field, value) : "";
         const chipText = set ? field.label + ": " + valueText : field.label;
         const paintedText = field.icon && set ? valueText : chipText;
-        const chip = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Tag, { icon: field.icon, selected: true, onClick: toggleOrClose, onRemove: remove, title: chipText, "aria-label": chipText, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MiddleEllipsis, { text: paintedText }) });
+        const chip = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Tag, { icon: field.icon, selected: true, onClick: toggleOrClose, onRemove: remove, title: chipText, "aria-label": chipText, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MiddleEllipsis, { text: paintedText, middle: !joinsLabels(field, value) }) });
         if (field.type === "text") {
           return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fd-filterbar-chip", children: chip }, field.key);
         }