@yuno-payments/dashboard-design-system 1.1.2-beta.3 → 1.1.2

package/dist/components/atoms/filter-dropdown/filter-dropdown.js

@@ -1,29 +1,29 @@
 import { j as o } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as S, useState as v, useRef as N, useCallback as F, useEffect as Y } from "react";
-import { Button as V } from "../../../vendor/shadcn/button.js";
+import { forwardRef as S, useState as E, useRef as F, useCallback as k, useEffect as Y } from "react";
+import { Button as T } from "../../../vendor/shadcn/button.js";
 import { Separator as $ } from "../../../vendor/shadcn/separator.js";
-import { Icon as k } from "../icon/icon.js";
+import { Icon as j } from "../icon/icon.js";
 import { FilterSection as q } from "../filter/filter.js";
-import { FilterDateRangeValue as I, FilterDateRange as Fe } from "../filter/filter-date-range.js";
+import { FilterDateRangeValue as N, FilterDateRange as ke } from "../filter/filter-date-range.js";
 import { cn as h } from "../../../lib/utils.js";
 const G = S(
-  ({ icon: l, label: D, isActive: c = !1, showChevron: g = !1, className: b, ...u }, T) => /* @__PURE__ */ o.jsxs(
+  ({ icon: d, label: p, isActive: l = !1, showChevron: g = !1, className: b, ...u }, V) => /* @__PURE__ */ o.jsxs(
     "button",
     {
-      ref: T,
+      ref: V,
       className: h(
         "flex items-center gap-2 h-8 px-2 rounded-md w-full transition-colors shrink-0 hover:bg-secondary",
         b
       ),
       ...u,
       children: [
-        l && /* @__PURE__ */ o.jsx(
-          k,
+        d && /* @__PURE__ */ o.jsx(
+          j,
           {
-            name: l,
+            name: d,
             className: h(
               "size-4 shrink-0",
-              c ? "text-primary" : "text-foreground"
+              l ? "text-primary" : "text-foreground"
             )
           }
         ),
@@ -32,18 +32,18 @@ const G = S(
           {
             className: h(
               "flex-1 text-sm font-normal text-left truncate",
-              c ? "text-primary" : "text-foreground"
+              l ? "text-primary" : "text-foreground"
             ),
-            children: D
+            children: p
           }
         ),
-        (c || g) && /* @__PURE__ */ o.jsx(
-          k,
+        (l || g) && /* @__PURE__ */ o.jsx(
+          j,
           {
             name: "CaretRight",
             className: h(
               "size-4 shrink-0",
-              c ? "text-primary" : "text-foreground"
+              l ? "text-primary" : "text-foreground"
             )
           }
         )
@@ -53,7 +53,7 @@ const G = S(
 );
 G.displayName = "FilterMenuItem";
 const J = S(
-  ({ items: l, activeItemId: D, onItemClick: c, className: g }, b) => /* @__PURE__ */ o.jsx(
+  ({ items: d, activeItemId: p, onItemClick: l, className: g }, b) => /* @__PURE__ */ o.jsx(
     "div",
     {
       ref: b,
@@ -61,14 +61,14 @@ const J = S(
         "flex flex-col gap-2 w-64 h-full p-2 bg-muted border border-border rounded-md overflow-y-auto",
         g
       ),
-      children: l.map((u) => /* @__PURE__ */ o.jsx(
+      children: d.map((u) => /* @__PURE__ */ o.jsx(
         G,
         {
           icon: u.icon,
           label: u.label,
-          isActive: D === u.id,
+          isActive: p === u.id,
           showChevron: u.showChevron,
-          onClick: () => c?.(u.id)
+          onClick: () => l?.(u.id)
         },
         u.id
       ))
@@ -76,37 +76,37 @@ const J = S(
   )
 );
 J.displayName = "FilterMenu";
-const Ve = S(
+const Te = S(
   ({
-    filters: l,
-    buttonText: D = "Add filter",
-    appliedFilters: c = [],
+    filters: d,
+    buttonText: p = "Add filter",
+    appliedFilters: l = [],
     onRemoveFilter: g,
     onClearAllFilters: b,
     onOpenChange: u,
-    maxVisibleTags: T = 4,
+    maxVisibleTags: V = 4,
     className: Q,
     disabled: Z = !1,
     applyOnClose: s = !1
-  }, p) => {
-    const [f, O] = v(!1), [m, ee] = v({}), w = N({}), y = N(l), d = F(
+  }, C) => {
+    const [f, O] = E(!1), [m, ee] = E({}), D = F({}), I = F(d), c = k(
       (e) => {
         ee((r) => {
           const a = typeof e == "function" ? e(r) : e;
-          return w.current = a, a;
+          return D.current = a, a;
         });
       },
       []
     );
     Y(() => {
-      y.current = l;
-    }, [l]);
-    const B = F(() => {
+      I.current = d;
+    }, [d]);
+    const y = k(() => {
       if (console.log("[FilterDropdown] applyBufferedChanges called", {
         applyOnClose: s,
-        bufferedChanges: w.current
+        bufferedChanges: D.current
       }), !s) return;
-      const e = w.current, r = y.current;
+      const e = D.current, r = I.current;
       console.log("[FilterDropdown] Processing buffered changes", {
         changesCount: Object.keys(e).length,
         changes: e,
@@ -128,69 +128,69 @@ const Ve = S(
               n.customValue !== void 0 && i.onCustomChange?.(n.customValue);
               break;
           }
-      }), d({});
-    }, [s, d]), C = F(
+      }), c({});
+    }, [s, c]), w = k(
       (e) => {
         console.log("[FilterDropdown] setIsOpen called", {
           open: e,
           isOpen: f,
           applyOnClose: s,
-          bufferedChanges: w.current
-        }), !e && f && s && (console.log("[FilterDropdown] Applying buffered changes on close", w.current), B()), e && !f && s && (console.log("[FilterDropdown] Clearing buffered changes on open"), d({})), O(e), u?.(e);
+          bufferedChanges: D.current
+        }), !e && f && s && (console.log("[FilterDropdown] Applying buffered changes on close", D.current), y()), e && !f && s && (console.log("[FilterDropdown] Clearing buffered changes on open"), c({})), O(e), u?.(e);
       },
-      [u, f, s, B, d]
-    ), [M, A] = v(
-      l.length > 0 && l[0]?.id || ""
-    ), R = N(null), te = F(
+      [u, f, s, y, c]
+    ), [B, A] = E(
+      d.length > 0 && d[0]?.id || ""
+    ), M = F(null), te = k(
       (e) => {
-        R.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
+        M.current = e, typeof C == "function" ? C(e) : C && (C.current = e);
       },
-      [p]
+      [C]
     );
     Y(() => {
       if (!f) return;
       const e = (n) => {
         const i = n.target;
-        R.current?.contains(i) || i.closest?.(
+        M.current?.contains(i) || i.closest?.(
           "[data-radix-popper-content-wrapper], [data-radix-portal]"
         ) || i.closest?.(
           ".rdp, .rdp-root, [data-calendar]"
-        ) || C(!1);
+        ) || w(!1);
       }, r = (n) => {
-        n.key === "Escape" && C(!1);
+        n.key === "Escape" && w(!1);
       }, a = setTimeout(() => {
         document.addEventListener("mousedown", e), document.addEventListener("keydown", r);
       }, 0);
       return () => {
         clearTimeout(a), document.removeEventListener("mousedown", e), document.removeEventListener("keydown", r);
       };
-    }, [f, C]);
-    const ne = c.length > 0, re = c.slice(0, T), z = c.length - T, H = (e) => {
-      if (l.find((n) => n.id === e)) return e;
+    }, [f, w]);
+    const ne = l.length > 0, re = l.slice(0, V), R = l.length - V, H = (e) => {
+      if (d.find((n) => n.id === e)) return e;
       const a = e.split("-");
       if (a.length > 1) {
         const n = a[0];
-        if (l.find((x) => x.id === n)) return n;
+        if (d.find((x) => x.id === n)) return n;
       }
       return e;
     }, P = (e) => {
       const r = H(e);
-      return l.find((n) => n.id === r)?.clearable !== !1;
+      return d.find((n) => n.id === r)?.clearable !== !1;
     }, ae = (e) => {
       const r = H(e);
-      A(r), C(!0);
-    }, oe = c.some(
+      A(r), w(!0);
+    }, oe = l.some(
       (e) => P(e.id)
-    ), se = l.map((e) => ({
+    ), se = d.map((e) => ({
       id: e.id,
       icon: e.icon,
       label: e.label
-    })), t = l.find((e) => e.id === M), ie = (e, r) => s ? m[e]?.checkboxValues ?? r : r, le = (e, r) => s ? m[e]?.radioValue ?? r : r, de = (e, r) => s ? m[e]?.dateValue ?? r : r, ce = (e, r) => s ? m[e]?.dateInit ?? r : r, ue = (e, r) => s ? m[e]?.dateEnd ?? r : r, fe = (e, r) => s ? m[e]?.startTime ?? r : r, me = (e, r) => s ? m[e]?.endTime ?? r : r, he = (e, r, a) => (n) => {
+    })), t = d.find((e) => e.id === B), ie = (e, r) => s ? m[e]?.checkboxValues ?? r : r, de = (e, r) => s ? m[e]?.radioValue ?? r : r, ce = (e, r) => s ? m[e]?.dateValue ?? r : r, le = (e, r) => s ? m[e]?.dateInit ?? r : r, ue = (e, r) => s ? m[e]?.dateEnd ?? r : r, fe = (e, r) => s ? m[e]?.startTime ?? r : r, me = (e, r) => s ? m[e]?.endTime ?? r : r, he = (e, r, a) => (n) => {
       if (console.log("[FilterDropdown] Checkbox handler called", { filterId: e, values: n, applyOnClose: s, minSelection: a }), a !== void 0 && a > 0 && n.length < a) {
         console.log("[FilterDropdown] Blocked: minimum selection not met", { minSelection: a, actualLength: n.length });
         return;
       }
-      s ? (console.log("[FilterDropdown] Buffering checkbox values", { filterId: e, values: n }), d((i) => ({
+      s ? (console.log("[FilterDropdown] Buffering checkbox values", { filterId: e, values: n }), c((i) => ({
         ...i,
         [e]: {
           ...i[e],
@@ -199,7 +199,7 @@ const Ve = S(
         }
       }))) : r?.(n);
     }, ge = (e, r) => (a) => {
-      s ? d((n) => ({
+      s ? c((n) => ({
         ...n,
         [e]: {
           ...n[e],
@@ -208,7 +208,7 @@ const Ve = S(
         }
       })) : r?.(a);
     }, be = (e, r) => (a) => {
-      s ? d((n) => ({
+      s ? c((n) => ({
         ...n,
         [e]: {
           ...n[e],
@@ -217,7 +217,7 @@ const Ve = S(
         }
       })) : r?.(a);
     }, xe = (e, r) => (a) => {
-      s ? d((n) => ({
+      s ? c((n) => ({
         ...n,
         [e]: {
           ...n[e],
@@ -225,8 +225,8 @@ const Ve = S(
           dateInit: a
         }
       })) : r?.(a);
-    }, De = (e, r) => (a) => {
-      s ? d((n) => ({
+    }, pe = (e, r) => (a) => {
+      s ? c((n) => ({
         ...n,
         [e]: {
           ...n[e],
@@ -234,8 +234,8 @@ const Ve = S(
           dateEnd: a
         }
       })) : r?.(a);
-    }, pe = (e, r) => (a) => {
-      console.log("[FilterDropdown] createStartTimeHandler called with:", a, "applyOnClose:", s), s ? d((n) => ({
+    }, Ce = (e, r) => (a) => {
+      s ? c((n) => ({
         ...n,
         [e]: {
           ...n[e],
@@ -243,8 +243,8 @@ const Ve = S(
           startTime: a
         }
       })) : r?.(a);
-    }, we = (e, r) => (a) => {
-      console.log("[FilterDropdown] createEndTimeHandler called with:", a, "applyOnClose:", s), s ? d((n) => ({
+    }, De = (e, r) => (a) => {
+      s ? c((n) => ({
         ...n,
         [e]: {
           ...n[e],
@@ -252,7 +252,7 @@ const Ve = S(
           endTime: a
         }
       })) : r?.(a);
-    }, Ce = () => {
+    }, we = () => {
       if (!t) return null;
       switch (t.type) {
         case "checkbox": {
@@ -284,7 +284,7 @@ const Ve = S(
               type: "radio",
               title: t.label,
               items: t.items || [],
-              selectedValue: le(
+              selectedValue: de(
                 t.id,
                 t.selectedValue || ""
               ),
@@ -299,39 +299,38 @@ const Ve = S(
             }
           );
         case "date": {
-          const e = de(
+          const e = ce(
             t.id,
-            t.dateValue || I.LAST_7_DAYS
-          ), r = ce(t.id, t.dateInit), a = ue(t.id, t.dateEnd), n = fe(t.id, t.startTime || ""), i = me(t.id, t.endTime || ""), x = be(
+            t.dateValue || N.LAST_7_DAYS
+          ), r = le(t.id, t.dateInit), a = ue(t.id, t.dateEnd), n = fe(t.id, t.startTime || ""), i = me(t.id, t.endTime || ""), x = be(
             t.id,
             t.onDateValueChange
-          ), j = xe(
+          ), v = xe(
             t.id,
             t.onDateInitChange
-          ), L = De(
+          ), z = pe(
             t.id,
             t.onDateEndChange
-          ), U = pe(
+          ), L = Ce(
             t.id,
             t.onStartTimeChange
-          ), W = we(
+          ), U = De(
             t.id,
             t.onEndTimeChange
-          ), Te = (E) => {
-            if (console.log("[FilterDropdown] handleDateValueChangeWithInit called with:", E), console.log("[FilterDropdown] bufferedDateInit:", r, "bufferedDateEnd:", a), console.log("[FilterDropdown] bufferedStartTime:", n, "bufferedEndTime:", i), x(E), E === I.CUSTOM && !r && !a) {
-              console.log("[FilterDropdown] Initializing dates and times for CUSTOM");
-              const _ = /* @__PURE__ */ new Date(), K = new Date(_);
-              K.setHours(23, 59, 59, 999);
-              const X = new Date(_);
-              X.setHours(0, 0, 0, 0), j(X), L(K), n || (console.log("[FilterDropdown] Initializing start time"), U("00:00:00")), i || (console.log("[FilterDropdown] Initializing end time"), W("23:59:59"));
+          ), Ve = (_) => {
+            if (x(_), _ === N.CUSTOM && !r && !a) {
+              const K = /* @__PURE__ */ new Date(), W = new Date(K);
+              W.setHours(23, 59, 59, 999);
+              const X = new Date(K);
+              X.setHours(0, 0, 0, 0), v(X), z(W), n || L("00:00:00"), i || U("23:59:59");
             }
           };
           return /* @__PURE__ */ o.jsx(
-            Fe,
+            ke,
             {
               value: e,
-              onValueChange: Te,
-              showCustomFields: e === I.CUSTOM,
+              onValueChange: Ve,
+              showCustomFields: e === N.CUSTOM,
               startDate: r,
               endDate: a,
               startTime: n,
@@ -339,10 +338,10 @@ const Ve = S(
               mode: t.dateMode || "range",
               singleDayLabel: t.singleDayLabel,
               showAllTime: t.showAllTime,
-              onStartDateChange: j,
-              onEndDateChange: L,
-              onStartTimeChange: U,
-              onEndTimeChange: W,
+              onStartDateChange: v,
+              onEndDateChange: z,
+              onStartTimeChange: L,
+              onEndTimeChange: U,
               announcement: t.description
             }
           );
@@ -351,7 +350,7 @@ const Ve = S(
           const e = s ? {
             bufferedValue: m[t.id]?.customValue,
             onDeferredChange: (r) => {
-              d((a) => ({
+              c((a) => ({
                 ...a,
                 [t.id]: {
                   ...a[t.id],
@@ -376,16 +375,16 @@ const Ve = S(
         children: [
           /* @__PURE__ */ o.jsxs("div", { className: "flex items-center gap-4", children: [
             /* @__PURE__ */ o.jsxs(
-              V,
+              T,
               {
                 variant: "outline",
                 size: "sm",
                 className: "gap-2",
-                onClick: () => C(!f),
+                onClick: () => w(!f),
                 disabled: Z,
                 children: [
-                  /* @__PURE__ */ o.jsx(k, { name: "FunnelSimple", className: "size-4" }),
-                  D
+                  /* @__PURE__ */ o.jsx(j, { name: "FunnelSimple", className: "size-4" }),
+                  p
                 ]
               }
             ),
@@ -395,7 +394,7 @@ const Ve = S(
                 re.map((e) => {
                   const r = P(e.id);
                   return /* @__PURE__ */ o.jsxs(
-                    V,
+                    T,
                     {
                       variant: "secondary",
                       onClick: () => ae(e.id),
@@ -411,7 +410,7 @@ const Ve = S(
                             },
                             className: "inline-flex items-center justify-center",
                             "aria-label": `Remove ${e.label} filter`,
-                            children: /* @__PURE__ */ o.jsx(k, { name: "X", className: "size-4" })
+                            children: /* @__PURE__ */ o.jsx(j, { name: "X", className: "size-4" })
                           }
                         )
                       ]
@@ -419,13 +418,13 @@ const Ve = S(
                     e.id
                   );
                 }),
-                z > 0 && /* @__PURE__ */ o.jsxs(V, { children: [
+                R > 0 && /* @__PURE__ */ o.jsxs(T, { children: [
                   "+",
-                  z,
+                  R,
                   " more"
                 ] }),
                 b && oe && /* @__PURE__ */ o.jsx(
-                  V,
+                  T,
                   {
                     variant: "ghost",
                     size: "sm",
@@ -455,11 +454,11 @@ const Ve = S(
                   J,
                   {
                     items: se,
-                    activeItemId: M,
+                    activeItemId: B,
                     onItemClick: A
                   }
                 ),
-                /* @__PURE__ */ o.jsx("div", { className: "flex flex-col gap-4 p-6 bg-popover w-[448px] h-full rounded-md overflow-y-auto", children: Ce() })
+                /* @__PURE__ */ o.jsx("div", { className: "flex flex-col gap-4 p-6 bg-popover w-[448px] h-full rounded-md overflow-y-auto", children: we() })
               ]
             }
           )
@@ -468,9 +467,9 @@ const Ve = S(
     );
   }
 );
-Ve.displayName = "FilterDropdown";
+Te.displayName = "FilterDropdown";
 export {
-  Ve as FilterDropdown,
+  Te as FilterDropdown,
   J as FilterMenu,
   G as FilterMenuItem
 };