@yuno-payments/dashboard-design-system 0.0.206 → 0.0.207

package/dist/components/atoms/filter-dropdown/filter-dropdown.d.ts

@@ -231,6 +231,11 @@ interface FilterDropdownProps {
      * Callback fired when "Clear filters" button is clicked
      */
     onClearAllFilters?: () => void;
+    /**
+     * Callback fired when the dropdown open state changes
+     * Useful for applying filters only when the dropdown closes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
     /**
      * Text to display in the trigger button
      * @default "Add filter"

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

@@ -1,16 +1,16 @@
 import { j as n } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as v, useState as E, useRef as H, useCallback as _, useEffect as K } from "react";
-import { Button as g } from "../../../vendor/shadcn/button.js";
-import { Separator as S } from "../../../vendor/shadcn/separator.js";
-import { Icon as C } from "../icon/icon.js";
-import { FilterSection as k } from "../filter/filter.js";
-import { FilterDateRange as X, FilterDateRangeValue as b } from "../filter/filter-date-range.js";
+import { forwardRef as v, useState as E, useCallback as S, useRef as X, useEffect as Y } from "react";
+import { Button as b } from "../../../vendor/shadcn/button.js";
+import { Separator as k } from "../../../vendor/shadcn/separator.js";
+import { Icon as j } from "../icon/icon.js";
+import { FilterSection as M } from "../filter/filter.js";
+import { FilterDateRange as $, FilterDateRangeValue as C } from "../filter/filter-date-range.js";
 import { cn as d } from "../../../lib/utils.js";
-const M = v(
-  ({ icon: r, label: h, isActive: l = !1, showChevron: m = !1, className: u, ...o }, j) => /* @__PURE__ */ n.jsxs(
+const A = v(
+  ({ icon: r, label: h, isActive: l = !1, showChevron: m = !1, className: u, ...o }, p) => /* @__PURE__ */ n.jsxs(
     "button",
     {
-      ref: j,
+      ref: p,
       className: d(
         "flex items-center gap-2 h-8 px-2 rounded-md w-full transition-colors",
         "hover:bg-secondary",
@@ -19,7 +19,7 @@ const M = v(
       ...o,
       children: [
         r && /* @__PURE__ */ n.jsx(
-          C,
+          j,
           {
             name: r,
             className: d(
@@ -39,7 +39,7 @@ const M = v(
           }
         ),
         (l || m) && /* @__PURE__ */ n.jsx(
-          C,
+          j,
           {
             name: "CaretRight",
             className: d(
@@ -52,8 +52,8 @@ const M = v(
     }
   )
 );
-M.displayName = "FilterMenuItem";
-const A = v(
+A.displayName = "FilterMenuItem";
+const V = v(
   ({ items: r, activeItemId: h, onItemClick: l, className: m }, u) => /* @__PURE__ */ n.jsx(
     "div",
     {
@@ -63,7 +63,7 @@ const A = v(
         m
       ),
       children: r.map((o) => /* @__PURE__ */ n.jsx(
-        M,
+        A,
         {
           icon: o.icon,
           label: o.label,
@@ -76,70 +76,76 @@ const A = v(
     }
   )
 );
-A.displayName = "FilterMenu";
-const Y = v(
+V.displayName = "FilterMenu";
+const q = v(
   ({
     filters: r,
     buttonText: h = "Add filter",
     appliedFilters: l = [],
     onRemoveFilter: m,
     onClearAllFilters: u,
-    maxVisibleTags: o = 4,
-    className: j,
-    disabled: V = !1
+    onOpenChange: o,
+    maxVisibleTags: p = 4,
+    className: z,
+    disabled: O = !1
   }, f) => {
-    const [p, x] = E(!1), [w, N] = E(
+    const [x, R] = E(!1), g = S(
+      (t) => {
+        R(t), o?.(t);
+      },
+      [o]
+    ), [w, N] = E(
       r.length > 0 && r[0]?.id || ""
-    ), y = H(null), z = _(
+    ), y = X(null), L = S(
       (t) => {
         y.current = t, typeof f == "function" ? f(t) : f && (f.current = t);
       },
       [f]
     );
-    K(() => {
-      if (!p) return;
+    Y(() => {
+      if (!x) return;
       const t = (s) => {
         const c = s.target;
         y.current?.contains(c) || c.closest?.(
           "[data-radix-popper-content-wrapper], [data-radix-portal]"
         ) || c.closest?.(
           ".rdp, .rdp-root, [data-calendar]"
-        ) || x(!1);
+        ) || g(!1);
       }, a = (s) => {
-        s.key === "Escape" && x(!1);
+        s.key === "Escape" && g(!1);
       }, i = setTimeout(() => {
         document.addEventListener("mousedown", t), document.addEventListener("keydown", a);
       }, 0);
       return () => {
         clearTimeout(i), document.removeEventListener("mousedown", t), document.removeEventListener("keydown", a);
       };
-    }, [p]);
-    const O = l.length > 0, R = l.slice(0, o), T = l.length - o, D = (t) => {
+    }, [x]);
+    const P = l.length > 0, U = l.slice(0, p), I = l.length - p, T = (t) => {
       if (r.find((s) => s.id === t)) return t;
       const i = t.split("-");
       if (i.length > 1) {
         const s = i[0];
-        if (r.find((I) => I.id === s)) return s;
+        if (r.find((F) => F.id === s)) return s;
       }
       return t;
-    }, F = (t) => {
-      const a = D(t);
+    }, D = (t) => {
+      const a = T(t);
       return r.find((s) => s.id === a)?.clearable !== !1;
-    }, L = (t) => {
-      const a = D(t);
-      N(a), x(!0);
-    }, P = l.some(
-      (t) => F(t.id)
-    ), U = r.map((t) => ({
+    }, B = (t) => {
+      const a = T(t);
+      N(a), g(!0);
+    }, H = l.some(
+      (t) => D(t.id)
+    ), _ = r.map((t) => ({
       id: t.id,
       icon: t.icon,
       label: t.label
-    })), e = r.find((t) => t.id === w), B = () => {
+    })), e = r.find((t) => t.id === w), K = () => {
       if (!e) return null;
       switch (e.type) {
         case "checkbox":
           return /* @__PURE__ */ n.jsx(
-            k,
+            M,
             {
               title: e.label,
               items: e.items || [],
@@ -157,7 +163,7 @@ const Y = v(
           );
         case "radio":
           return /* @__PURE__ */ n.jsx(
-            k,
+            M,
             {
               type: "radio",
               title: e.label,
@@ -176,7 +182,7 @@ const Y = v(
           );
         case "date": {
           const t = (a) => {
-            if (e.onDateValueChange?.(a), a === b.CUSTOM && !e.dateInit && !e.dateEnd) {
+            if (e.onDateValueChange?.(a), a === C.CUSTOM && !e.dateInit && !e.dateEnd) {
               const i = /* @__PURE__ */ new Date(), s = new Date(i);
               s.setHours(23, 59, 59, 999);
               const c = new Date(i);
@@ -184,13 +190,13 @@ const Y = v(
             }
           };
           return /* @__PURE__ */ n.jsx(
-            X,
+            $,
             {
-              value: e.dateValue || b.LAST_7_DAYS,
+              value: e.dateValue || C.LAST_7_DAYS,
               onValueChange: t,
-              showCustomFields: e.dateValue === b.CUSTOM,
+              showCustomFields: e.dateValue === C.CUSTOM,
               onCustomFieldsChange: (a) => {
-                a && t(b.CUSTOM);
+                a && t(C.CUSTOM);
               },
               startDate: e.dateInit,
               endDate: e.dateEnd,
@@ -215,34 +221,34 @@ const Y = v(
     return /* @__PURE__ */ n.jsxs(
       "div",
       {
-        ref: z,
-        className: d("flex flex-col gap-1 relative", j),
+        ref: L,
+        className: d("flex flex-col gap-1 relative", z),
         children: [
           /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-4", children: [
             /* @__PURE__ */ n.jsxs(
-              g,
+              b,
               {
                 variant: "outline",
                 size: "sm",
                 className: "gap-2",
-                onClick: () => x(!p),
-                disabled: V,
+                onClick: () => g(!x),
+                disabled: O,
                 children: [
-                  /* @__PURE__ */ n.jsx(C, { name: "FunnelSimple", className: "size-4" }),
+                  /* @__PURE__ */ n.jsx(j, { name: "FunnelSimple", className: "size-4" }),
                   h
                 ]
               }
             ),
-            O ? /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-              /* @__PURE__ */ n.jsx(S, { orientation: "vertical", className: "h-5" }),
+            P ? /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+              /* @__PURE__ */ n.jsx(k, { orientation: "vertical", className: "h-5" }),
               /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-2", children: [
-                R.map((t) => {
-                  const a = F(t.id);
+                U.map((t) => {
+                  const a = D(t.id);
                   return /* @__PURE__ */ n.jsxs(
-                    g,
+                    b,
                     {
                       variant: "secondary",
-                      onClick: () => L(t.id),
+                      onClick: () => B(t.id),
                       className: "display-flex items-center gap-2",
                       size: "sm",
                       children: [
@@ -255,7 +261,7 @@ const Y = v(
                             },
                             className: "inline-flex items-center justify-center",
                             "aria-label": `Remove ${t.label} filter`,
-                            children: /* @__PURE__ */ n.jsx(C, { name: "X", className: "size-4" })
+                            children: /* @__PURE__ */ n.jsx(j, { name: "X", className: "size-4" })
                           }
                         )
                       ]
@@ -263,13 +269,13 @@ const Y = v(
                     t.id
                   );
                 }),
-                T > 0 && /* @__PURE__ */ n.jsxs(g, { children: [
+                I > 0 && /* @__PURE__ */ n.jsxs(b, { children: [
                   "+",
-                  T,
+                  I,
                   " more"
                 ] }),
-                u && P && /* @__PURE__ */ n.jsx(
-                  g,
+                u && H && /* @__PURE__ */ n.jsx(
+                  b,
                   {
                     variant: "ghost",
                     size: "sm",
@@ -280,11 +286,11 @@ const Y = v(
                 )
               ] })
             ] }) : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-              /* @__PURE__ */ n.jsx(S, { orientation: "vertical", className: "h-5" }),
+              /* @__PURE__ */ n.jsx(k, { orientation: "vertical", className: "h-5" }),
               /* @__PURE__ */ n.jsx("span", { className: "text-sm font-normal text-muted-foreground", children: "No filters applied" })
             ] })
           ] }),
-          p && /* @__PURE__ */ n.jsxs(
+          x && /* @__PURE__ */ n.jsxs(
             "div",
             {
               className: d(
@@ -296,14 +302,14 @@ const Y = v(
               ),
               children: [
                 /* @__PURE__ */ n.jsx(
-                  A,
+                  V,
                   {
-                    items: U,
+                    items: _,
                     activeItemId: w,
                     onItemClick: N
                   }
                 ),
-                /* @__PURE__ */ n.jsx("div", { className: "flex flex-col gap-4 p-6 bg-popover w-[448px] h-full rounded-md overflow-y-auto", children: B() })
+                /* @__PURE__ */ n.jsx("div", { className: "flex flex-col gap-4 p-6 bg-popover w-[448px] h-full rounded-md overflow-y-auto", children: K() })
               ]
             }
           )
@@ -312,9 +318,9 @@ const Y = v(
     );
   }
 );
-Y.displayName = "FilterDropdown";
+q.displayName = "FilterDropdown";
 export {
-  Y as FilterDropdown,
-  A as FilterMenu,
-  M as FilterMenuItem
+  q as FilterDropdown,
+  V as FilterMenu,
+  A as FilterMenuItem
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuno-payments/dashboard-design-system",
-  "version": "0.0.206",
+  "version": "0.0.207",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",