@flytedan/flytebot-design-system 0.55.3 → 0.57.0

package/dist/index.cjs

@@ -4171,7 +4171,7 @@ function MultiSelectPanel({
     nav.setActive(0);
   }, [query, options.length]);
   const activeId = hasListbox && options[nav.active] ? listId + "-opt-" + nav.active : void 0;
-  const liveMessage = showLoading ? "Loading\u2026" : showError ? "Couldn't load options." : options.length === 0 ? "No matches" : atLimit ? "Limit reached: at most " + field.maxValues + " values" : "";
+  const liveMessage = showLoading ? "Loading\u2026" : showError ? "Couldn't load options." : options.length === 0 ? query === "" && field.emptyText || "No matches" : atLimit ? "Limit reached: at most " + field.maxValues + " values" : "";
   const [pasteText, setPasteText] = React29.useState("");
   const [pasteLoading, setPasteLoading] = React29.useState(false);
   const [unmatchedTokens, setUnmatchedTokens] = React29.useState([]);
@@ -5686,52 +5686,155 @@ function InlinePanelSurface({ panel, align = "right", ...popover }) {
 
 // src/components/data/SortMenu.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
-function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", className = "", ...rest }) {
+var directionWord = (field, dir) => dir === "asc" ? field.numeric ? "lowest first" : "A to Z" : field.numeric ? "highest first" : "Z to A";
+function moved(sort, from, to) {
+  const next = [...sort];
+  const [entry] = next.splice(from, 1);
+  next.splice(to, 0, entry);
+  return next;
+}
+function SortMenu({
+  fields = [],
+  sort = [],
+  onSortChange,
+  multiple = false,
+  align = "right",
+  size = "md",
+  className = "",
+  ...rest
+}) {
   const panel = useInlinePanel();
   const { open: open2, setOpen, ref } = panel;
-  const cur = fields.find((f) => f.key === (sort && sort.key));
-  const dir = sort && sort.dir;
-  const arrow = (f, d) => {
-    const on = cur && cur.key === f.key && dir === d;
-    const label = d === "asc" ? f.numeric ? "lowest first" : "A to Z" : f.numeric ? "highest first" : "Z to A";
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-      "button",
+  const change = (next) => onSortChange && onSortChange(next);
+  const fieldOf = (key) => fields.find((f) => f.key === key);
+  const active = sort.filter((entry) => fieldOf(entry.key));
+  const first = active[0];
+  const firstField = first && fieldOf(first.key);
+  const triggerLabel = firstField ? firstField.label + (active.length > 1 ? " +" + (active.length - 1) : "") : "Unsorted";
+  const triggerTitle = active.map((entry) => {
+    const field = fieldOf(entry.key);
+    return field.label + " " + directionWord(field, entry.dir);
+  }).join(", then ");
+  const arrow = (field, dir, on, onClick) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    "button",
+    {
+      type: "button",
+      "aria-label": field.label + ", " + directionWord(field, dir),
+      "aria-pressed": on,
+      onClick,
+      style: {
+        display: "grid",
+        placeItems: "center",
+        width: 26,
+        height: 26,
+        borderRadius: 6,
+        cursor: "pointer",
+        flex: "none",
+        border: "1px solid " + (on ? "var(--brand)" : "var(--border)"),
+        background: on ? "var(--brand)" : "var(--surface)",
+        color: on ? "#fff" : "var(--text-muted)"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("i", { className: "ph ph-arrow-" + (dir === "asc" ? "up" : "down"), style: { fontSize: 13 } })
+    }
+  );
+  const rowStyle = (highlight) => ({
+    gap: 8,
+    padding: "4px 8px",
+    borderRadius: 7,
+    background: highlight ? "var(--surface-brand)" : "transparent"
+  });
+  const labelStyle = (highlight) => ({
+    flex: 1,
+    minWidth: 0,
+    fontWeight: highlight ? 700 : 500,
+    color: highlight ? "var(--text-on-surface-brand)" : "var(--text)"
+  });
+  const singleBody = fields.map((f) => {
+    const on = !!first && first.key === f.key;
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "fd-row", style: rowStyle(on), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-body-sm", style: labelStyle(on), children: f.label }),
+      arrow(f, "asc", on && first.dir === "asc", () => change([{ key: f.key, dir: "asc" }])),
+      arrow(f, "desc", on && first.dir === "desc", () => change([{ key: f.key, dir: "desc" }]))
+    ] }, f.key);
+  });
+  const unused = fields.filter((f) => !active.some((entry) => entry.key === f.key));
+  const multipleBody = /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-overline fd-muted", style: { padding: "4px 8px 6px" }, children: "Sorted by" }),
+    active.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-body-sm fd-muted", style: { padding: "4px 8px" }, children: "Unsorted" }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("ol", { className: "fd-stack", style: { gap: 2, margin: 0, padding: 0, listStyle: "none" }, "aria-label": "Sort order", children: active.map((entry, index) => {
+      const f = fieldOf(entry.key);
+      const flipped = entry.dir === "asc" ? "desc" : "asc";
+      return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("li", { className: "fd-row", style: rowStyle(false), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-body-sm fd-muted", "aria-hidden": "true", style: { width: 14, flex: "none" }, children: index + 1 }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-body-sm", style: labelStyle(false), children: f.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          IconButton,
+          {
+            size: "sm",
+            variant: "outline",
+            icon: entry.dir === "asc" ? "arrow-up" : "arrow-down",
+            label: f.label + ", " + directionWord(f, entry.dir) + ". Switch to " + directionWord(f, flipped),
+            onClick: () => change(active.map((e) => e.key === entry.key ? { key: e.key, dir: flipped } : e))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          IconButton,
+          {
+            size: "sm",
+            icon: "caret-up",
+            label: "Sort " + f.label + " earlier",
+            disabled: index === 0,
+            onClick: () => change(moved(active, index, index - 1))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          IconButton,
+          {
+            size: "sm",
+            icon: "caret-down",
+            label: "Sort " + f.label + " later",
+            disabled: index === active.length - 1,
+            onClick: () => change(moved(active, index, index + 1))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          IconButton,
+          {
+            size: "sm",
+            icon: "x",
+            label: "Remove " + f.label + " from the sort",
+            onClick: () => change(active.filter((e) => e.key !== entry.key))
+          }
+        )
+      ] }, entry.key);
+    }) }),
+    unused.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-overline fd-muted", style: { padding: "10px 8px 6px" }, children: "Add a sort" }),
+      unused.map((f) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "fd-row", style: rowStyle(false), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-body-sm", style: labelStyle(false), children: f.label }),
+        arrow(f, "asc", false, () => change([...active, { key: f.key, dir: "asc" }])),
+        arrow(f, "desc", false, () => change([...active, { key: f.key, dir: "desc" }]))
+      ] }, f.key))
+    ] }) : null
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className, style: { display: "inline-flex", minWidth: 0 }, ref, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+      Button,
       {
-        type: "button",
-        "aria-label": f.label + ", " + label,
-        "aria-pressed": on,
-        onClick: () => onSort && onSort(f.key, d),
-        style: {
-          display: "grid",
-          placeItems: "center",
-          width: 26,
-          height: 26,
-          borderRadius: 6,
-          cursor: "pointer",
-          border: "1px solid " + (on ? "var(--brand)" : "var(--border)"),
-          background: on ? "var(--brand)" : "var(--surface)",
-          color: on ? "#fff" : "var(--text-muted)"
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("i", { className: "ph ph-arrow-" + (d === "asc" ? "up" : "down"), style: { fontSize: 13 } })
+        size,
+        variant: "secondary",
+        icon: first && first.dir === "asc" ? "sort-ascending" : "sort-descending",
+        title: triggerTitle || void 0,
+        onClick: () => setOpen(!open2),
+        children: [
+          triggerLabel,
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("i", { className: "ph ph-" + (first && first.dir === "asc" ? "arrow-up" : "arrow-down"), style: { fontSize: 12, marginLeft: 6, opacity: 0.75 } })
+        ]
       }
-    );
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className, style: { display: "inline-flex" }, ref, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Button, { size, variant: "secondary", icon: dir === "asc" ? "sort-ascending" : "sort-descending", onClick: () => setOpen(!open2), children: [
-      cur ? cur.label : "Unsorted",
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("i", { className: "ph ph-" + (dir === "asc" ? "arrow-up" : "arrow-down"), style: { fontSize: 12, marginLeft: 6, opacity: 0.75 } })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(InlinePanelSurface, { panel, align, offset: 6, width: 280, label: "Sort by", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "fd-stack", style: { gap: 2, padding: 8 }, children: [
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(InlinePanelSurface, { panel, align, offset: 6, width: multiple ? 340 : 280, label: "Sort by", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-stack", style: { gap: 2, padding: 8 }, children: multiple ? multipleBody : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-overline fd-muted", style: { padding: "4px 8px 6px" }, children: "Sort by" }),
-      fields.map((f) => {
-        const active = cur && cur.key === f.key;
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "fd-row", style: { gap: 8, padding: "4px 8px", borderRadius: 7, background: active ? "var(--surface-brand)" : "transparent" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fd-body-sm", style: { flex: 1, fontWeight: active ? 700 : 500, color: active ? "var(--text-on-surface-brand)" : "var(--text)" }, children: f.label }),
-          arrow(f, "asc"),
-          arrow(f, "desc")
-        ] }, f.key);
-      })
-    ] }) })
+      singleBody
+    ] }) }) })
   ] });
 }
 
@@ -6269,7 +6372,7 @@ function TransferList({
           cfg.header ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "fd-tlist-header", children: cfg.header }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "fd-row", style: { gap: 8 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SearchField, { value: cfg.search, onChange: cfg.onSearchChange, placeholder: "Search", "aria-label": (cfg.label || side) + " search", style: { flex: 1 } }),
-            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SortMenu, { fields: cfg.sortFields, sort: cfg.sort, onSort: cfg.onSort, align: side === "left" ? "left" : "right" })
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SortMenu, { fields: cfg.sortFields, sort: cfg.sort ? [cfg.sort] : [], onSortChange: (next) => next[0] && cfg.onSort(next[0].key, next[0].dir), align: side === "left" ? "left" : "right" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
             VirtualList,