impact-nova 1.5.14 → 1.6.0

package/dist/components/ui/filter-strip/filter-summary.js

@@ -1,209 +1,293 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import * as s from "react";
-import { ChevronDown as V, Search as Y } from "lucide-react";
-import { cn as y } from "../../../lib/utils.js";
-import { Popover as q, PopoverTrigger as H, PopoverContent as J } from "../popover.js";
-import { Tooltip as m, TooltipTrigger as h, TooltipContent as u } from "../tooltip.js";
-import { Button as S } from "../button.js";
-import { Separator as C } from "../separator.js";
-import { Tabs as K, TabsList as U, TabsTrigger as N } from "../tabs.js";
-import { Input as W } from "../input.js";
-import { Badge as X } from "../badge.js";
-import { Skeleton as Z } from "../skeleton.js";
-import { useImpactNovaI18n as $ } from "../../../i18n/ImpactNovaI18nContext.js";
-const fe = ({
-  selectedFilter: c,
-  onSelectedFilterChange: w,
-  savedFilters: T,
-  recentFilters: x,
-  onApplySavedFilter: k,
-  onSavedFilterSearch: f,
-  onSavedFiltersScroll: P,
-  onDropdownOpenChange: A,
-  isLoadingFilterPreferencesList: j = !1
+import { jsxs as a, jsx as e, Fragment as U } from "react/jsx-runtime";
+import * as n from "react";
+import { ChevronDown as W, Search as X, Trash2 as Z, Pencil as _, Star as ee } from "lucide-react";
+import { cn as c } from "../../../lib/utils.js";
+import { Popover as te, PopoverTrigger as le, PopoverContent as ae } from "../popover.js";
+import { Tooltip as d, TooltipTrigger as p, TooltipContent as h } from "../tooltip.js";
+import { Button as M } from "../button.js";
+import { Separator as I } from "../separator.js";
+import { Tabs as re, TabsList as ie, TabsTrigger as j } from "../tabs.js";
+import { Input as ne } from "../input.js";
+import { Badge as se } from "../badge.js";
+import { Skeleton as oe } from "../skeleton.js";
+import { useImpactNovaI18n as ce } from "../../../i18n/ImpactNovaI18nContext.js";
+const Ce = ({
+  selectedFilter: m,
+  onSelectedFilterChange: O,
+  savedFilters: $,
+  recentFilters: C,
+  onApplySavedFilter: B,
+  onSavedFilterSearch: v,
+  onSavedFiltersScroll: D,
+  onDropdownOpenChange: G,
+  isLoadingFilterPreferencesList: L = !1,
+  onEditSavedFilter: S,
+  onDeleteSavedFilter: w,
+  onSetDefaultSavedFilter: k
 }) => {
-  const { t: r } = $(), [p, v] = s.useState(!1), I = (a) => {
-    v(a), A?.(a);
-  }, [b, M] = s.useState(""), [d, O] = s.useState(""), [n, G] = s.useState("All"), [i, g] = s.useState(null);
-  s.useEffect(() => {
-    const a = setTimeout(() => {
-      O(b);
+  const { t: r } = ce(), [g, T] = n.useState(!1), Q = (l) => {
+    T(l), G?.(l);
+  }, [P, E] = n.useState(""), [u, F] = n.useState(""), [i, R] = n.useState("All"), [s, A] = n.useState(null);
+  n.useEffect(() => {
+    const l = setTimeout(() => {
+      F(P);
     }, 300);
-    return () => clearTimeout(a);
-  }, [b]), s.useEffect(() => {
-    f && f(d, n === "All" ? void 0 : n);
-  }, [d, n, f]), s.useEffect(() => {
-    p && g({ label: c });
-  }, [p, c]);
-  const L = (a) => {
-    M(a.target.value);
-  }, Q = () => {
-    i && (w?.(i.label), i.savedItem && k?.(i.savedItem), v(!1));
-  }, _ = () => {
-    v(!1);
-  }, E = () => !x || x.length === 0 ? null : /* @__PURE__ */ t("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ e("div", { className: "px-1 py-[6px] text-xs font-medium text-[#60697d] font-['Manrope']", children: "Recent" }),
-    /* @__PURE__ */ e("div", { className: "mb-[6px] flex flex-col", children: x.map((a, l) => {
-      const o = a.map((z) => z.label).join(", "), D = i?.label === o;
+    return () => clearTimeout(l);
+  }, [P]), n.useEffect(() => {
+    v && v(
+      u,
+      i === "All" ? void 0 : i
+    );
+  }, [u, i, v]), n.useEffect(() => {
+    g && A({ label: m });
+  }, [g, m]);
+  const z = (l) => {
+    E(l.target.value);
+  }, V = () => {
+    s && (O?.(s.label), s.savedItem && B?.(s.savedItem), T(!1));
+  }, Y = () => {
+    T(!1);
+  }, q = () => !C || C.length === 0 ? null : /* @__PURE__ */ a("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ e("div", { className: "px-1 py-[6px] text-xs font-medium text-content-tertiary font-['Manrope']", children: "Recent" }),
+    /* @__PURE__ */ e("div", { className: "mb-[6px] flex flex-col", children: C.map((l, f) => {
+      const o = l.map((y) => y.label).join(", "), x = s?.label === o;
       return /* @__PURE__ */ e(
         "div",
         {
-          className: y(
-            "flex cursor-pointer flex-row px-3 py-2 rounded-lg hover:bg-[#f5f6fa]",
-            D && "bg-[#edf0ff]"
+          className: c(
+            "flex cursor-pointer flex-row px-3 py-2 rounded-lg hover:bg-canvas-muted",
+            x && "bg-brand-highlight"
           ),
-          onClick: () => g({ label: o }),
-          children: /* @__PURE__ */ t(m, { children: [
-            /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "text-sm font-['Manrope'] truncate text-[#1f2b4d]", children: o }) }),
-            /* @__PURE__ */ e(u, { variant: "tertiary", side: "right", children: o })
+          onClick: () => A({ label: o }),
+          children: /* @__PURE__ */ a(d, { children: [
+            /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "text-sm font-['Manrope'] truncate text-content", children: o }) }),
+            /* @__PURE__ */ e(h, { variant: "tertiary", side: "right", children: o })
           ] })
         },
-        l
+        f
       );
     }) }),
-    /* @__PURE__ */ e(C, { className: "mb-2" })
-  ] }), R = () => {
-    if (j)
-      return /* @__PURE__ */ e("div", { className: "flex max-h-[160px] flex-col overflow-y-auto px-3 py-2 space-y-2", children: [1, 2, 3, 4, 5].map((l) => /* @__PURE__ */ e(Z, { className: "h-9 w-full rounded-lg" }, l)) });
-    let a = T?.filter(
-      (l) => n === "All" || l.type === n
+    /* @__PURE__ */ e(I, { className: "mb-2" })
+  ] }), H = () => {
+    if (L)
+      return /* @__PURE__ */ e("div", { className: "flex max-h-[160px] flex-col overflow-y-auto px-3 py-2 space-y-2", children: [1, 2, 3, 4, 5].map((t) => /* @__PURE__ */ e(oe, { className: "h-9 w-full rounded-lg" }, t)) });
+    let l = $?.filter(
+      (t) => i === "All" || t.type === i
     );
-    if (!f && d && (a = a?.filter((l) => l.label.toLowerCase().includes(d.toLowerCase()))), !a || a.length === 0) {
-      let l = "No saved filters found";
-      if (!!d)
-        switch (n) {
+    if (!v && u && (l = l?.filter(
+      (t) => t.label.toLowerCase().includes(u.toLowerCase())
+    )), !l || l.length === 0) {
+      let t = "No saved filters found";
+      if (!!u)
+        switch (i) {
           case "Personal":
-            l = "No personal filters match your search";
+            t = "No personal filters match your search";
             break;
           case "Global":
-            l = "No global filters match your search";
+            t = "No global filters match your search";
             break;
           default:
-            l = "No saved filters match your search";
+            t = "No saved filters match your search";
         }
       else
-        switch (n) {
+        switch (i) {
           case "Personal":
-            l = "You haven't created any personal filters yet.";
+            t = "You haven't created any personal filters yet.";
             break;
           case "Global":
-            l = "No global filters are currently available.";
+            t = "No global filters are currently available.";
             break;
           default:
-            l = "No filters have been saved yet.";
+            t = "No filters have been saved yet.";
         }
-      return /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center py-8 text-center min-h-[100px] px-6", children: /* @__PURE__ */ e("span", { className: "text-sm text-[#60697d] font-['Manrope'] leading-relaxed", children: l }) });
+      return /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center py-8 text-center min-h-[100px] px-6", children: /* @__PURE__ */ e("span", { className: "text-sm text-content-tertiary font-['Manrope'] leading-relaxed", children: t }) });
     }
-    return /* @__PURE__ */ e(
-      "div",
-      {
-        className: "flex max-h-[160px] flex-col overflow-y-auto",
-        onScroll: P,
-        children: a.map((l) => {
-          const o = i?.label === l.label;
-          return /* @__PURE__ */ e(
-            "div",
-            {
-              className: y(
-                "mb-1 flex justify-between cursor-pointer rounded-lg px-3 py-2 text-sm font-medium font-['Manrope'] hover:bg-[#f5f6fa]",
-                o ? "bg-[#edf0ff]" : "text-[#1f2b4d]"
-              ),
-              onClick: () => g({ label: l.label, savedItem: l }),
-              children: /* @__PURE__ */ t(m, { children: [
-                /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "truncate", children: l.label }) }),
-                /* @__PURE__ */ e(u, { variant: "tertiary", side: "right", children: l.label })
-              ] })
-            },
-            l.id
-          );
-        })
-      }
-    );
-  }, B = i?.label !== c;
-  return /* @__PURE__ */ t(q, { open: p, onOpenChange: I, children: [
-    /* @__PURE__ */ e(H, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "flex cursor-pointer items-center gap-2", children: [
-      /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[#60697d] font-['Manrope']", children: r("filterStrip.filtersApplied") }),
-      /* @__PURE__ */ t(m, { children: [
-        /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(
-          X,
+    const f = S || w || k, o = l.find((t) => t.isDefault), x = l.filter((t) => !t.isDefault), y = (t, N = !1) => {
+      const K = s?.label === t.label;
+      return /* @__PURE__ */ a(
+        "div",
+        {
+          className: c(
+            "group mb-1 flex items-center justify-between cursor-pointer rounded-lg px-3 py-2 text-sm font-medium font-['Manrope'] hover:bg-[#f5f6fa]",
+            K ? "bg-[#edf0ff]" : "text-[#1f2b4d]"
+          ),
+          onClick: () => A({ label: t.label, savedItem: t }),
+          children: [
+            /* @__PURE__ */ a(d, { children: [
+              /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "truncate flex-1 min-w-0", children: t.label }) }),
+              /* @__PURE__ */ e(h, { variant: "tertiary", side: "right", children: t.label })
+            ] }),
+            f && /* @__PURE__ */ a(
+              "div",
+              {
+                className: c(
+                  "flex items-center gap-1 ml-2 transition-opacity shrink-0",
+                  N ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+                ),
+                children: [
+                  w && /* @__PURE__ */ a(d, { children: [
+                    /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `${r("filterStrip.deleteFilter")} ${t.label}`,
+                        className: c(
+                          "p-1 rounded transition-colors",
+                          N ? "opacity-0 group-hover:opacity-100" : "hover:bg-[#e6e8f0]"
+                        ),
+                        onClick: (b) => {
+                          b.stopPropagation(), w(t);
+                        },
+                        children: /* @__PURE__ */ e(Z, { className: "h-3.5 w-3.5 text-[#60697d]" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ e(h, { variant: "tertiary", side: "top", children: r("filterStrip.deleteFilter") })
+                  ] }),
+                  S && /* @__PURE__ */ a(d, { children: [
+                    /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `${r("filterStrip.editFilter")} ${t.label}`,
+                        className: c(
+                          "p-1 rounded transition-colors",
+                          N ? "opacity-0 group-hover:opacity-100" : "hover:bg-[#e6e8f0]"
+                        ),
+                        onClick: (b) => {
+                          b.stopPropagation(), S(t);
+                        },
+                        children: /* @__PURE__ */ e(_, { className: "h-3.5 w-3.5 text-[#60697d]" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ e(h, { variant: "tertiary", side: "top", children: r("filterStrip.editFilter") })
+                  ] }),
+                  k && /* @__PURE__ */ a(d, { children: [
+                    /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `${t.isDefault ? r("filterStrip.defaultFilter") : r("filterStrip.setAsDefault")} ${t.label}`,
+                        className: "p-1 rounded hover:bg-[#e6e8f0] transition-colors",
+                        onClick: (b) => {
+                          b.stopPropagation(), k(t);
+                        },
+                        children: /* @__PURE__ */ e(
+                          ee,
+                          {
+                            className: c(
+                              "h-3.5 w-3.5",
+                              t.isDefault ? "text-[#E1BC29] fill-[#E1BC29]" : "text-[#60697d]"
+                            )
+                          }
+                        )
+                      }
+                    ) }),
+                    /* @__PURE__ */ e(h, { variant: "tertiary", side: "top", children: t.isDefault ? r("filterStrip.defaultFilter") : r("filterStrip.setAsDefault") })
+                  ] })
+                ]
+              }
+            )
+          ]
+        },
+        t.id
+      );
+    };
+    return /* @__PURE__ */ a("div", { className: "flex flex-col", children: [
+      o && /* @__PURE__ */ a(U, { children: [
+        y(o, !0),
+        x.length > 0 && /* @__PURE__ */ e(I, { className: "my-1" })
+      ] }),
+      x.length > 0 && /* @__PURE__ */ e(
+        "div",
+        {
+          className: "flex max-h-[160px] flex-col overflow-y-auto",
+          onScroll: D,
+          children: x.map((t) => y(t, !1))
+        }
+      )
+    ] });
+  }, J = s?.label !== m;
+  return /* @__PURE__ */ a(te, { open: g, onOpenChange: Q, children: [
+    /* @__PURE__ */ e(le, { asChild: !0, children: /* @__PURE__ */ a("div", { className: "flex cursor-pointer items-center gap-2", children: [
+      /* @__PURE__ */ e("span", { className: "text-sm font-medium text-content-tertiary font-['Manrope']", children: r("filterStrip.filtersApplied") }),
+      /* @__PURE__ */ a(d, { children: [
+        /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e(
+          se,
           {
             color: "primary",
             variant: "outline",
-            className: "font-['Manrope'] max-w-[140px] truncate",
-            children: c || r("filterStrip.notSelected")
+            className: "font-['Manrope'] max-w-[140px] inline-block",
+            children: /* @__PURE__ */ e("span", { className: "block truncate", children: m || r("filterStrip.notSelected") })
           }
         ) }),
-        /* @__PURE__ */ e(u, { variant: "tertiary", side: "top", children: c || r("filterStrip.notSelected") })
+        /* @__PURE__ */ e(h, { variant: "tertiary", side: "top", children: m || r("filterStrip.notSelected") })
       ] }),
-      /* @__PURE__ */ t(m, { children: [
-        /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(
+      /* @__PURE__ */ a(d, { children: [
+        /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e(
           "div",
           {
-            className: y(
-              "flex h-8 w-8 items-center justify-center rounded-lg bg-[#f5f6fa] transition-transform duration-200",
-              p && "rotate-180"
+            className: c(
+              "flex h-8 w-8 items-center justify-center rounded-lg bg-canvas-muted transition-transform duration-200",
+              g && "rotate-180"
             ),
-            children: /* @__PURE__ */ e(V, { className: "h-4 w-4 text-[#1f2b4d]" })
+            children: /* @__PURE__ */ e(W, { className: "h-4 w-4 text-content" })
           }
         ) }),
-        /* @__PURE__ */ e(u, { variant: "tertiary", side: "top", children: r("filterStrip.selectFilter") })
+        /* @__PURE__ */ e(h, { variant: "tertiary", side: "top", children: r("filterStrip.selectFilter") })
       ] })
     ] }) }),
     /* @__PURE__ */ e(
-      J,
+      ae,
       {
         align: "start",
-        className: "w-[280px] p-0 shadow-[0_0_4px_0_rgba(0,0,0,0.12)]",
+        className: "w-[280px] p-0 shadow-elevation-floating",
         sideOffset: 8,
-        children: /* @__PURE__ */ t("div", { className: "flex w-full flex-col py-[8px] px-[6px]", children: [
-          E(),
-          /* @__PURE__ */ t("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ e("div", { className: "px-1 py-[6px] text-xs font-medium text-[#60697d] font-['Manrope']", children: r("filterStrip.savedFilters") }),
-            /* @__PURE__ */ t(
-              K,
+        onInteractOutside: (l) => {
+          const f = l.target;
+          (f.closest('[role="dialog"]') || f.closest("[data-radix-dialog-content]")) && l.preventDefault();
+        },
+        children: /* @__PURE__ */ a("div", { className: "flex w-full flex-col py-[8px] px-[6px]", children: [
+          q(),
+          /* @__PURE__ */ a("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ e("div", { className: "px-1 py-[6px] text-xs font-medium text-content-tertiary font-['Manrope']", children: r("filterStrip.savedFilters") }),
+            /* @__PURE__ */ a(
+              re,
               {
-                value: n,
-                onValueChange: (a) => G(a),
+                value: i,
+                onValueChange: (l) => R(l),
                 variant: "outline",
                 size: "sm",
                 className: "w-full px-1",
                 children: [
-                  /* @__PURE__ */ e("div", { className: "py-[8px]", children: /* @__PURE__ */ t(U, { children: [
-                    /* @__PURE__ */ e(N, { value: "All", children: "All" }),
-                    /* @__PURE__ */ e(N, { value: "Global", children: "Global" }),
-                    /* @__PURE__ */ e(N, { value: "Personal", children: "Personal" })
+                  /* @__PURE__ */ e("div", { className: "py-[8px]", children: /* @__PURE__ */ a(ie, { children: [
+                    /* @__PURE__ */ e(j, { value: "All", children: "All" }),
+                    /* @__PURE__ */ e(j, { value: "Global", children: "Global" }),
+                    /* @__PURE__ */ e(j, { value: "Personal", children: "Personal" })
                   ] }) }),
                   /* @__PURE__ */ e("div", { className: "pb-[8px]", children: /* @__PURE__ */ e(
-                    W,
+                    ne,
                     {
-                      prefix: /* @__PURE__ */ e(Y, { className: "h-4 w-4 text-gray-500" }),
+                      prefix: /* @__PURE__ */ e(X, { className: "h-4 w-4 text-content-muted" }),
                       placeholder: r("filterStrip.searchFiltersPlaceholder"),
-                      value: b,
-                      onChange: L,
+                      value: P,
+                      onChange: z,
                       className: "h-9 px-1 border-none shadow-none focus-visible:ring-0"
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { className: "mt-0", children: R() })
+                  /* @__PURE__ */ e("div", { className: "mt-0", children: H() })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ e(C, { className: "my-2" }),
-          /* @__PURE__ */ t("div", { className: "flex justify-end gap-2 px-3 pb-1", children: [
-            /* @__PURE__ */ e(
-              S,
-              {
-                variant: "secondary",
-                onClick: _,
-                children: r("prompt.cancel")
-              }
-            ),
+          /* @__PURE__ */ e(I, { className: "my-2" }),
+          /* @__PURE__ */ a("div", { className: "flex justify-end gap-2 px-3 pb-1", children: [
+            /* @__PURE__ */ e(M, { variant: "secondary", onClick: Y, children: r("prompt.cancel") }),
             /* @__PURE__ */ e(
-              S,
+              M,
               {
                 variant: "default",
-                onClick: Q,
-                disabled: !B,
+                onClick: V,
+                disabled: !J,
                 children: r("filterStrip.applyFilter")
               }
             )
@@ -214,5 +298,5 @@ const fe = ({
   ] });
 };
 export {
-  fe as FilterSummary
+  Ce as FilterSummary
 };