impact-nova 1.7.33 → 1.7.34

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

@@ -1,86 +1,91 @@
-import { jsxs as l, jsx as e, Fragment as K } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import * as i from "react";
-import { ChevronDown as U, Search as W, Trash2 as X, Pencil as Z, Star as ee } from "lucide-react";
-import { cn as c } from "../../../lib/utils.js";
-import { Popover as te, PopoverTrigger as ae, PopoverContent as le } from "../popover.js";
-import { Tooltip as p, TooltipTrigger as f, 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 ne, TabsTrigger as j } from "../tabs.js";
-import { Input as ie } 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 = ({
+import { ChevronDown as ee, Search as te, Trash2 as ae, Pencil as le, Star as re } from "lucide-react";
+import { cn as o } from "../../../lib/utils.js";
+import { Popover as ie, PopoverTrigger as ne, PopoverContent as se } from "../popover.js";
+import { Tooltip as f, TooltipTrigger as u, TooltipContent as h } from "../tooltip.js";
+import { Button as G } from "../button.js";
+import { Separator as M } from "../separator.js";
+import { Tabs as oe, TabsList as ce, TabsTrigger as $ } from "../tabs.js";
+import { Input as de } from "../input.js";
+import { Badge as pe } from "../badge.js";
+import { Skeleton as fe } from "../skeleton.js";
+import { useImpactNovaI18n as ue } from "../../../i18n/ImpactNovaI18nContext.js";
+const Ie = ({
   selectedFilter: m,
-  onSelectedFilterChange: O,
-  savedFilters: $,
-  recentFilters: C,
-  onApplySavedFilter: B,
-  onSavedFilterSearch: y,
-  onSavedFiltersScroll: G,
-  onDropdownOpenChange: L,
-  isLoadingFilterPreferencesList: Q = !1,
-  onEditSavedFilter: w,
-  onDeleteSavedFilter: S,
-  onSetDefaultSavedFilter: k
+  onSelectedFilterChange: L,
+  savedFilters: w,
+  recentFilters: S,
+  onApplySavedFilter: Q,
+  onSavedFilterSearch: N,
+  onSavedFiltersScroll: _,
+  onDropdownOpenChange: z,
+  isLoadingFilterPreferencesList: U = !1,
+  onEditSavedFilter: k,
+  onDeleteSavedFilter: I,
+  onSetDefaultSavedFilter: T
 }) => {
-  const { t: r } = ce(), [u, T] = i.useState(!1), _ = (a) => {
-    T(a), L?.(a);
-  }, [P, D] = i.useState(""), [b, E] = i.useState(""), [n, F] = i.useState("All"), [s, A] = i.useState(null);
+  const { t: r } = ue(), [b, P] = i.useState(!1), [O, B] = i.useState(null), [A, R] = i.useState(null);
+  i.useEffect(() => {
+    const a = w?.find((d) => d.isDefault);
+    a && a.id !== A && R(a.id);
+  }, [w, A]);
+  const V = (a) => {
+    P(a), z?.(a);
+  }, [D, Y] = i.useState(""), [x, q] = i.useState(""), [c, H] = i.useState("All"), [p, j] = i.useState(null);
   i.useEffect(() => {
     const a = setTimeout(() => {
-      E(P);
+      q(D);
     }, 300);
     return () => clearTimeout(a);
-  }, [P]), i.useEffect(() => {
-    y && y(
-      b,
-      n === "All" ? void 0 : n
+  }, [D]), i.useEffect(() => {
+    N && N(
+      x,
+      c === "All" ? void 0 : c
     );
-  }, [b, n, y]), i.useEffect(() => {
-    u && A({ label: m });
-  }, [u, m]);
-  const z = (a) => {
-    D(a.target.value);
-  }, R = () => {
-    s && (O?.(s.label), s.savedItem && B?.(s.savedItem), T(!1));
-  }, V = () => {
-    T(!1);
-  }, Y = () => !C || C.length === 0 ? null : /* @__PURE__ */ l("div", { className: "flex flex-col", children: [
+  }, [x, c, N]), i.useEffect(() => {
+    b && j({ label: m });
+  }, [b, m]);
+  const J = (a) => {
+    Y(a.target.value);
+  }, K = () => {
+    p && (L?.(p.label), p.savedItem && Q?.(p.savedItem), P(!1));
+  }, W = () => {
+    P(!1);
+  }, X = () => !S || S.length === 0 ? null : /* @__PURE__ */ l("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: C.map((a, d) => {
-      const o = a.map((N) => N.label).join(", "), x = s?.label === o;
+    /* @__PURE__ */ e("div", { className: "mb-[6px] flex flex-col", children: S.map((a, d) => {
+      const s = a.map((C) => C.label).join(", "), g = p?.label === s;
       return /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          className: c(
+          className: o(
             "flex cursor-pointer flex-row px-3 py-2 rounded-lg hover:bg-[#f5f6fa] w-full text-left bg-transparent border-none",
-            x && "bg-[#edf0ff]"
+            g && "bg-[#edf0ff]"
           ),
-          onClick: () => A({ label: o }),
-          children: /* @__PURE__ */ l(p, { children: [
-            /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "text-sm font-['Manrope'] truncate text-[#1f2b4d]", children: o }) }),
-            /* @__PURE__ */ e(h, { variant: "tertiary", side: "right", children: o })
+          onClick: () => j({ label: s }),
+          children: /* @__PURE__ */ l(f, { children: [
+            /* @__PURE__ */ e(u, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "text-sm font-['Manrope'] truncate text-[#1f2b4d]", children: s }) }),
+            /* @__PURE__ */ e(h, { variant: "tertiary", side: "right", children: s })
           ] })
         },
         d
       );
     }) }),
-    /* @__PURE__ */ e(I, { className: "mb-2" })
-  ] }), q = () => {
-    if (Q)
-      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 a = $?.filter(
-      (t) => n === "All" || t.type === n
+    /* @__PURE__ */ e(M, { className: "mb-2" })
+  ] }), Z = () => {
+    if (U)
+      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(fe, { className: "h-9 w-full rounded-lg" }, t)) });
+    let a = w?.filter(
+      (t) => c === "All" || t.type === c
     );
-    if (!y && b && (a = a?.filter(
-      (t) => t.label.toLowerCase().includes(b.toLowerCase())
+    if (!N && x && (a = a?.filter(
+      (t) => t.label.toLowerCase().includes(x.toLowerCase())
     )), !a || a.length === 0) {
       let t = "No saved filters found";
-      if (!!b)
-        switch (n) {
+      if (!!x)
+        switch (c) {
           case "Personal":
             t = "No personal filters match your search";
             break;
@@ -91,7 +96,7 @@ const Ce = ({
             t = "No saved filters match your search";
         }
       else
-        switch (n) {
+        switch (c) {
           case "Personal":
             t = "You haven't created any personal filters yet.";
             break;
@@ -103,87 +108,102 @@ const Ce = ({
         }
       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: t }) });
     }
-    const d = w || S || k, o = a.find((t) => t.isDefault), x = a.filter((t) => !t.isDefault), N = (t, g = !1) => {
-      const J = s?.label === t.label;
+    const d = k || I || T, s = a.find((t) => t.isDefault), g = a.filter((t) => !t.isDefault), C = (t, v = !1) => {
+      const E = p?.label === t.label, n = O === t.id;
       return /* @__PURE__ */ l(
         "button",
         {
           type: "button",
-          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] w-full text-left bg-transparent border-none",
-            J ? "bg-[#edf0ff]" : "text-[#1f2b4d]"
+          className: o(
+            "group mb-1 flex items-center justify-between cursor-pointer rounded-lg px-3 py-2 text-sm font-medium font-['Manrope'] w-full text-left bg-transparent border-none transition-all duration-300 relative overflow-hidden",
+            !n && "hover:bg-[#f5f6fa]",
+            !n && E && "bg-[#edf0ff]",
+            !n && !E && "text-[#1f2b4d]",
+            n && "pointer-events-none"
           ),
-          onClick: () => A({ label: t.label, savedItem: t }),
+          onClick: () => !n && j({ label: t.label, savedItem: t }),
+          disabled: n,
           children: [
-            /* @__PURE__ */ l(p, { children: [
-              /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "truncate flex-1 min-w-0", children: t.label }) }),
+            n && /* @__PURE__ */ e(
+              "div",
+              {
+                className: "absolute inset-0 bg-gradient-to-r from-[#e6e8f0] via-[#d5dafb] to-[#e6e8f0] opacity-60",
+                style: {
+                  animation: "shimmer 1.5s ease-in-out infinite",
+                  backgroundSize: "200% 100%"
+                }
+              }
+            ),
+            /* @__PURE__ */ l(f, { children: [
+              /* @__PURE__ */ e(u, { 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 })
             ] }),
-            d && /* @__PURE__ */ l("div", { className: c(
+            d && /* @__PURE__ */ l("div", { className: o(
               "flex items-center gap-1 ml-2 transition-opacity shrink-0",
-              g ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto"
+              v ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto"
             ), children: [
-              S && /* @__PURE__ */ l(p, { children: [
-                /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(
+              I && /* @__PURE__ */ l(f, { children: [
+                /* @__PURE__ */ e(u, { asChild: !0, children: /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
                     tabIndex: -1,
                     "aria-label": `${r("filterStrip.deleteFilter")} ${t.label}`,
-                    className: c(
+                    className: o(
                       "p-1 rounded transition-colors hover:bg-[#e6e8f0]",
-                      g && "opacity-0 group-hover:opacity-100"
+                      v && "opacity-0 group-hover:opacity-100"
                     ),
-                    onClick: (v) => {
-                      v.stopPropagation(), S(t);
+                    onClick: (y) => {
+                      y.stopPropagation(), I(t);
                     },
-                    children: /* @__PURE__ */ e(X, { className: "h-3.5 w-3.5 text-[#60697d]" })
+                    children: /* @__PURE__ */ e(ae, { className: "h-3.5 w-3.5 text-[#60697d]" })
                   }
                 ) }),
                 /* @__PURE__ */ e(h, { variant: "tertiary", side: "top", children: r("filterStrip.deleteFilter") })
               ] }),
-              w && /* @__PURE__ */ l(p, { children: [
-                /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(
+              k && /* @__PURE__ */ l(f, { children: [
+                /* @__PURE__ */ e(u, { asChild: !0, children: /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
                     tabIndex: -1,
                     "aria-label": `${r("filterStrip.editFilter")} ${t.label}`,
-                    className: c(
+                    className: o(
                       "p-1 rounded transition-colors hover:bg-[#e6e8f0]",
-                      g && "opacity-0 group-hover:opacity-100"
+                      v && "opacity-0 group-hover:opacity-100"
                     ),
-                    onClick: (v) => {
-                      v.stopPropagation(), w(t);
+                    onClick: (y) => {
+                      y.stopPropagation(), k(t);
                     },
-                    children: /* @__PURE__ */ e(Z, { className: "h-3.5 w-3.5 text-[#60697d]" })
+                    children: /* @__PURE__ */ e(le, { className: "h-3.5 w-3.5 text-[#60697d]" })
                   }
                 ) }),
                 /* @__PURE__ */ e(h, { variant: "tertiary", side: "top", children: r("filterStrip.editFilter") })
               ] }),
-              k && /* @__PURE__ */ l(p, { children: [
-                /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(
+              T && /* @__PURE__ */ l(f, { children: [
+                /* @__PURE__ */ e(u, { asChild: !0, children: /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
-                    tabIndex: g ? 0 : -1,
+                    tabIndex: v ? 0 : -1,
                     "aria-label": `${t.isDefault ? r("filterStrip.defaultFilter") : r("filterStrip.setAsDefault")} ${t.label}`,
-                    className: "p-1 rounded hover:bg-[#e6e8f0] transition-colors",
-                    onClick: (v) => {
-                      v.stopPropagation(), k(t);
+                    className: "p-1 rounded hover:bg-[#e6e8f0] transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+                    disabled: n,
+                    onClick: (y) => {
+                      y.stopPropagation(), B(t.id), T(t), setTimeout(() => B(null), 1200);
                     },
-                    children: /* @__PURE__ */ e(
-                      ee,
+                    children: n ? /* @__PURE__ */ e("div", { className: "h-3.5 w-3.5 animate-spin rounded-full border-2 border-[#E1BC29] border-t-transparent" }) : /* @__PURE__ */ e(
+                      re,
                       {
-                        className: c(
-                          "h-3.5 w-3.5",
+                        className: o(
+                          "h-3.5 w-3.5 transition-all duration-300",
                           t.isDefault ? "text-[#E1BC29] fill-[#E1BC29]" : "text-[#60697d]"
                         )
                       }
                     )
                   }
                 ) }),
-                /* @__PURE__ */ e(h, { variant: "tertiary", side: "top", children: t.isDefault ? r("filterStrip.defaultFilter") : r("filterStrip.setAsDefault") })
+                /* @__PURE__ */ e(h, { variant: "tertiary", side: "top", children: n ? r("filterStrip.updating") : t.isDefault ? r("filterStrip.defaultFilter") : r("filterStrip.setAsDefault") })
               ] })
             ] })
           ]
@@ -192,34 +212,54 @@ const Ce = ({
       );
     };
     return /* @__PURE__ */ l("div", { className: "flex flex-col", children: [
-      o && /* @__PURE__ */ l(K, { children: [
-        N(o, !0),
-        x.length > 0 && /* @__PURE__ */ e(I, { className: "my-1" })
-      ] }),
-      x.length > 0 && /* @__PURE__ */ e(
+      s && /* @__PURE__ */ l(
+        "div",
+        {
+          className: o(
+            "transition-all duration-500 ease-out",
+            A === s.id && "animate-in fade-in slide-in-from-bottom-2"
+          ),
+          children: [
+            C(s, !0),
+            g.length > 0 && /* @__PURE__ */ e(M, { className: "my-1" })
+          ]
+        },
+        `default-${s.id}`
+      ),
+      g.length > 0 && /* @__PURE__ */ e(
         "div",
         {
           className: "flex max-h-[160px] flex-col overflow-y-auto",
-          onScroll: G,
-          children: x.map((t) => N(t, !1))
+          onScroll: _,
+          children: g.map((t) => /* @__PURE__ */ e(
+            "div",
+            {
+              className: o(
+                "transition-all duration-300",
+                O === t.id && "opacity-50"
+              ),
+              children: C(t, !1)
+            },
+            t.id
+          ))
         }
       )
     ] });
-  }, H = s?.label !== m;
-  return /* @__PURE__ */ l(te, { open: u, onOpenChange: _, children: [
-    /* @__PURE__ */ e(ae, { asChild: !0, children: /* @__PURE__ */ l(
+  }, F = p?.label !== m;
+  return /* @__PURE__ */ l(ie, { open: b, onOpenChange: V, children: [
+    /* @__PURE__ */ e(ne, { asChild: !0, children: /* @__PURE__ */ l(
       "button",
       {
         type: "button",
         className: "flex cursor-pointer items-center gap-2 bg-transparent border-none p-0",
         "aria-label": r("filterStrip.selectFilter"),
-        "aria-expanded": u,
+        "aria-expanded": b,
         "aria-haspopup": "dialog",
         children: [
           /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[#60697d] font-['Manrope']", children: r("filterStrip.filtersApplied") }),
-          /* @__PURE__ */ l(p, { children: [
-            /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(
-              se,
+          /* @__PURE__ */ l(f, { children: [
+            /* @__PURE__ */ e(u, { asChild: !0, children: /* @__PURE__ */ e(
+              pe,
               {
                 color: "primary",
                 variant: "outline",
@@ -232,19 +272,19 @@ const Ce = ({
           /* @__PURE__ */ e(
             "div",
             {
-              className: c(
+              className: o(
                 "flex h-8 w-8 items-center justify-center rounded-lg bg-[#f5f6fa] transition-transform duration-200",
-                u && "rotate-180"
+                b && "rotate-180"
               ),
               "aria-hidden": "true",
-              children: /* @__PURE__ */ e(U, { className: "h-4 w-4 text-[#1f2b4d]" })
+              children: /* @__PURE__ */ e(ee, { className: "h-4 w-4 text-[#1f2b4d]" })
             }
           )
         ]
       }
     ) }),
     /* @__PURE__ */ e(
-      le,
+      se,
       {
         align: "start",
         className: "w-[280px] p-0 shadow-[0_0_4px_0_rgba(0,0,0,0.12)] overflow-visible",
@@ -254,47 +294,47 @@ const Ce = ({
           (d.closest('[role="dialog"]') || d.closest("[data-radix-dialog-content]")) && a.preventDefault();
         },
         children: /* @__PURE__ */ l("div", { className: "flex w-full flex-col py-[8px] px-[6px]", children: [
-          Y(),
+          X(),
           /* @__PURE__ */ l("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__ */ l(
-              re,
+              oe,
               {
-                value: n,
-                onValueChange: (a) => F(a),
+                value: c,
+                onValueChange: (a) => H(a),
                 variant: "outline",
                 size: "sm",
                 className: "w-full px-1",
                 children: [
-                  /* @__PURE__ */ e("div", { className: "py-[8px]", children: /* @__PURE__ */ l(ne, { 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: "py-[8px]", children: /* @__PURE__ */ l(ce, { children: [
+                    /* @__PURE__ */ e($, { value: "All", children: "All" }),
+                    /* @__PURE__ */ e($, { value: "Global", children: "Global" }),
+                    /* @__PURE__ */ e($, { value: "Personal", children: "Personal" })
                   ] }) }),
                   /* @__PURE__ */ e("div", { className: "pb-[8px]", children: /* @__PURE__ */ e(
-                    ie,
+                    de,
                     {
-                      prefix: /* @__PURE__ */ e(W, { className: "h-4 w-4 text-gray-500" }),
+                      prefix: /* @__PURE__ */ e(te, { className: "h-4 w-4 text-gray-500" }),
                       placeholder: r("filterStrip.searchFiltersPlaceholder"),
-                      value: P,
-                      onChange: z,
+                      value: D,
+                      onChange: J,
                       className: "h-9 px-1 border-none shadow-none focus-visible:ring-0"
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { className: "mt-0", children: q() })
+                  /* @__PURE__ */ e("div", { className: "mt-0", children: Z() })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ e(I, { className: "my-2" }),
+          /* @__PURE__ */ e(M, { className: "my-2" }),
           /* @__PURE__ */ l("div", { className: "flex justify-end gap-2 px-3 pb-1", children: [
-            /* @__PURE__ */ e(M, { variant: "secondary", onClick: V, children: r("prompt.cancel") }),
+            /* @__PURE__ */ e(G, { variant: "secondary", onClick: W, children: r("prompt.cancel") }),
             /* @__PURE__ */ e(
-              M,
+              G,
               {
                 variant: "default",
-                onClick: R,
-                disabled: !H,
+                onClick: K,
+                disabled: !F,
                 children: r("filterStrip.applyFilter")
               }
             )
@@ -305,5 +345,5 @@ const Ce = ({
   ] });
 };
 export {
-  Ce as FilterSummary
+  Ie as FilterSummary
 };