@undp/data-viz 1.4.0 → 1.4.2

package/dist/DataCards.js

@@ -1,28 +1,28 @@
-import { a as s, m, b as ye, j as i } from "./index-CHPV5EwG-BPSP-7Jg.js";
-import $, { useState as w, useEffect as z, useMemo as Q } from "react";
+import { a as l, m, b as ye, j as i } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import $, { useState as w, useEffect as I, useMemo as Q } from "react";
 import { i as ge } from "./index-C1rRk_50.js";
 import { f as L } from "./index-UV9hjG_S.js";
 import { s as he } from "./index-DxagiOHo.js";
-import { Z as W, H as Z } from "./DropdownSelect-CDC9lEqU.js";
+import { Z as W, H as Z } from "./DropdownSelect-CeHog_ih.js";
 import { u as X } from "./Typography-Ctgfl1J5.js";
-import { b as P } from "./x-CnsEH4Ox-DDvAJndW.js";
+import { k as P } from "./x-BBpi7a_7-WVdj1j6r.js";
 import { d as xe, e as be } from "./index-BmCqpO1B.js";
-import { X as ve } from "./Modal-CUU6ZK3U.js";
-import { CsvDownloadButton as Ne } from "./CsvDownloadButton.js";
+import { X as ve } from "./Modal-DVVwpKhP.js";
+import { CsvDownloadButton as je } from "./CsvDownloadButton.js";
 import { s as J } from "./string2HTML-CWHGfz_d.js";
-import { GraphFooter as je } from "./GraphFooter.js";
+import { GraphFooter as Ne } from "./GraphFooter.js";
 import { GraphHeader as we } from "./GraphHeader.js";
 import { g as ke } from "./getUniqValue-BtUENB2H.js";
 import { t as Y } from "./transformDataForSelect-D8AuvYdf.js";
 /**
- * @license lucide-react v0.488.0 - ISC
+ * @license lucide-react v0.542.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 const Ce = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]], Se = P("chevron-left", Ce);
 /**
- * @license lucide-react v0.488.0 - ISC
+ * @license lucide-react v0.542.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -33,14 +33,14 @@ const Ve = [
   ["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
 ], $e = P("ellipsis", Ve);
 /**
- * @license lucide-react v0.488.0 - ISC
+ * @license lucide-react v0.542.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const De = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], ze = P("chevron-right", De);
+const De = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], Ie = P("chevron-right", De);
 function re({ className: t, ...e }) {
-  return /* @__PURE__ */ s.jsx(
+  return /* @__PURE__ */ l.jsx(
     "nav",
     {
       ...e,
@@ -52,29 +52,29 @@ function re({ className: t, ...e }) {
 }
 re.displayName = "PaginationUnit";
 const te = $.forwardRef(
-  ({ className: t, ...e }, l) => /* @__PURE__ */ s.jsx(
+  ({ className: t, ...e }, s) => /* @__PURE__ */ l.jsx(
     "ul",
     {
       ...e,
-      ref: l,
+      ref: s,
       className: m("flex flex-row items-center gap-1 list-none", t)
     }
   )
 );
 te.displayName = "PaginationContent";
-const I = $.forwardRef(
-  ({ className: t, ...e }, l) => /* @__PURE__ */ s.jsx("li", { ...e, ref: l, className: m("mr-2 last:mr-0", t) })
+const z = $.forwardRef(
+  ({ className: t, ...e }, s) => /* @__PURE__ */ l.jsx("li", { ...e, ref: s, className: m("mr-2 last:mr-0", t) })
 );
-I.displayName = "PaginationItem";
+z.displayName = "PaginationItem";
 function B({
   className: t,
   children: e,
-  ...l
+  ...s
 }) {
-  return /* @__PURE__ */ s.jsx(
+  return /* @__PURE__ */ l.jsx(
     "button",
     {
-      ...l,
+      ...s,
       type: "button",
       className: m(
         "p-4 text-base text-primary-black dark:text-primary-gray-100 dark:hover:bg-primary-gray-600",
@@ -85,8 +85,8 @@ function B({
   );
 }
 B.displayName = "PaginationLink";
-function se({ className: t, ...e }) {
-  return /* @__PURE__ */ s.jsx(
+function le({ className: t, ...e }) {
+  return /* @__PURE__ */ l.jsx(
     B,
     {
       ...e,
@@ -95,13 +95,13 @@ function se({ className: t, ...e }) {
         "p-2 bg-primary-gray-300 dark:bg-primary-gray-600 rtl:scale-x-[-1] rounded-full hover:bg-primary-gray-400 dark:hover:bg-primary-gray-550",
         t
       ),
-      children: /* @__PURE__ */ s.jsx(Se, { className: "h-6 w-6 stroke-primary-gray-700 dark:stroke-primary-gray-100" })
+      children: /* @__PURE__ */ l.jsx(Se, { className: "h-6 w-6 stroke-primary-gray-700 dark:stroke-primary-gray-100" })
     }
   );
 }
-se.displayName = "PaginationPrevious";
-function le({ className: t, ...e }) {
-  return /* @__PURE__ */ s.jsx(
+le.displayName = "PaginationPrevious";
+function se({ className: t, ...e }) {
+  return /* @__PURE__ */ l.jsx(
     B,
     {
       ...e,
@@ -110,39 +110,39 @@ function le({ className: t, ...e }) {
         "p-2 bg-primary-gray-300 dark:bg-primary-gray-600 rtl:scale-x-[-1] rounded-full hover:bg-primary-gray-400 dark:hover:bg-primary-gray-550",
         t
       ),
-      children: /* @__PURE__ */ s.jsx(ze, { className: "h-6 w-6 stroke-primary-gray-700 dark:stroke-primary-gray-100" })
+      children: /* @__PURE__ */ l.jsx(Ie, { className: "h-6 w-6 stroke-primary-gray-700 dark:stroke-primary-gray-100" })
     }
   );
 }
-le.displayName = "PaginationNext";
+se.displayName = "PaginationNext";
 function ie({ className: t, ...e }) {
-  return /* @__PURE__ */ s.jsxs(
+  return /* @__PURE__ */ l.jsxs(
     "span",
     {
       ...e,
       "aria-hidden": !0,
       className: m("flex h-9 w-9 items-center justify-center", t),
       children: [
-        /* @__PURE__ */ s.jsx($e, { className: "h-4 w-4 text-primary-gray-700 dark:text-primary-gray-100" }),
-        /* @__PURE__ */ s.jsx("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ l.jsx($e, { className: "h-4 w-4 text-primary-gray-700 dark:text-primary-gray-100" }),
+        /* @__PURE__ */ l.jsx("span", { className: "sr-only", children: "More pages" })
       ]
     }
   );
 }
 ie.displayName = "PaginationEllipsis";
 const ee = (t, e) => {
-  const l = [];
-  return e <= 7 ? Array.from({ length: e }, (n, c) => c + 1) : (l.push(1), t <= 3 ? l.push(2, 3, 4, "ellipsis") : t >= e - 2 ? l.push("ellipsis", e - 3, e - 2, e - 1) : l.push("ellipsis", t - 1, t, t + 1, "ellipsis"), l.push(e), l);
+  const s = [];
+  return e <= 7 ? Array.from({ length: e }, (n, c) => c + 1) : (s.push(1), t <= 3 ? s.push(2, 3, 4, "ellipsis") : t >= e - 2 ? s.push("ellipsis", e - 3, e - 2, e - 1) : s.push("ellipsis", t - 1, t, t + 1, "ellipsis"), s.push(e), s);
 };
-function Ie(t) {
-  const { defaultPage: e = 1, total: l, pageSize: n, onChange: c, className: p } = t, u = Math.ceil(l / n), [d, o] = w(e), [h, f] = w(
+function ze(t) {
+  const { defaultPage: e = 1, total: s, pageSize: n, onChange: c, className: p } = t, u = Math.ceil(s / n), [d, o] = w(e), [h, f] = w(
     ee(e, u)
   );
-  return z(() => {
+  return I(() => {
     f(ee(d, u));
-  }, [d, u]), /* @__PURE__ */ s.jsx(re, { className: m("select-none", p), children: /* @__PURE__ */ s.jsxs(te, { children: [
-    /* @__PURE__ */ s.jsx(I, { children: /* @__PURE__ */ s.jsx(
-      se,
+  }, [d, u]), /* @__PURE__ */ l.jsx(re, { className: m("select-none", p), children: /* @__PURE__ */ l.jsxs(te, { children: [
+    /* @__PURE__ */ l.jsx(z, { children: /* @__PURE__ */ l.jsx(
+      le,
       {
         onClick: () => {
           d > 1 && (c(d - 1), o(d - 1));
@@ -153,7 +153,7 @@ function Ie(t) {
         )
       }
     ) }),
-    h.map((g, v) => /* @__PURE__ */ s.jsx(I, { children: g === "ellipsis" ? /* @__PURE__ */ s.jsx(ie, {}) : /* @__PURE__ */ s.jsx(
+    h.map((g, v) => /* @__PURE__ */ l.jsx(z, { children: g === "ellipsis" ? /* @__PURE__ */ l.jsx(ie, {}) : /* @__PURE__ */ l.jsx(
       B,
       {
         onClick: () => {
@@ -166,8 +166,8 @@ function Ie(t) {
         children: g
       }
     ) }, v)),
-    /* @__PURE__ */ s.jsx(I, { children: /* @__PURE__ */ s.jsx(
-      le,
+    /* @__PURE__ */ l.jsx(z, { children: /* @__PURE__ */ l.jsx(
+      se,
       {
         onClick: () => {
           d < u && (c(d + 1), o(d + 1));
@@ -198,22 +198,22 @@ const Pe = ye(
       variant: "normal"
     }
   }
-), ne = $.forwardRef(({ className: t, inputSize: e, variant: l, ...n }, c) => /* @__PURE__ */ s.jsx("input", { ...n, ref: c, className: m(Pe({ inputSize: e, variant: l }), t) }));
+), ne = $.forwardRef(({ className: t, inputSize: e, variant: s, ...n }, c) => /* @__PURE__ */ l.jsx("input", { ...n, ref: c, className: m(Pe({ inputSize: e, variant: s }), t) }));
 ne.displayName = "Input";
 /**
- * @license lucide-react v0.488.0 - ISC
+ * @license lucide-react v0.542.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 const Be = [
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
-  ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ], ae = P("search", Be), oe = $.forwardRef(
   ({
     className: t,
     inputClassName: e,
-    buttonClassName: l,
+    buttonClassName: s,
     onSearch: n,
     searchOnlyOnClick: c,
     buttonVariant: p,
@@ -224,10 +224,10 @@ const Be = [
     placeholder: f,
     ...g
   }, v) => {
-    const [x, b] = $.useState(void 0), [N, a] = $.useState(!1);
-    return /* @__PURE__ */ s.jsxs("div", { className: m("flex gap-0", t), ref: v, children: [
-      /* @__PURE__ */ s.jsxs("div", { className: "relative w-full", children: [
-        /* @__PURE__ */ s.jsx(
+    const [x, b] = $.useState(void 0), [j, a] = $.useState(!1);
+    return /* @__PURE__ */ l.jsxs("div", { className: m("flex gap-0", t), ref: v, children: [
+      /* @__PURE__ */ l.jsxs("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ l.jsx(
           ne,
           {
             ...g,
@@ -245,38 +245,38 @@ const Be = [
             onBlur: () => a(!1)
           }
         ),
-        !N && (x === "" || !x) && /* @__PURE__ */ s.jsxs("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: [
-          u ? null : /* @__PURE__ */ s.jsx(ae, { className: "h-4 w-4 text-primary-gray-500 dark:text-primary-gray-400 mr-2" }),
-          /* @__PURE__ */ s.jsx("span", { className: "text-primary-gray-500 dark:text-primary-gray-400", children: f || "Search..." })
+        !j && (x === "" || !x) && /* @__PURE__ */ l.jsxs("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: [
+          u ? null : /* @__PURE__ */ l.jsx(ae, { className: "h-4 w-4 text-primary-gray-500 dark:text-primary-gray-400 mr-2" }),
+          /* @__PURE__ */ l.jsx("span", { className: "text-primary-gray-500 dark:text-primary-gray-400", children: f || "Search..." })
         ] })
       ] }),
-      d === !1 ? null : /* @__PURE__ */ s.jsx(
+      d === !1 ? null : /* @__PURE__ */ l.jsx(
         xe,
         {
           variant: p || "icon",
-          className: l,
+          className: s,
           padding: h,
           onClick: () => {
             n?.(x);
           },
-          children: u || /* @__PURE__ */ s.jsx(ae, { className: "stroke-2" })
+          children: u || /* @__PURE__ */ l.jsx(ae, { className: "stroke-2" })
         }
       )
     ] });
   }
 );
 oe.displayName = "Search";
-const Oe = (t) => t ? Object.entries(t).map(([l, n]) => Array.isArray(n) ? {
-  " ": l,
+const Oe = (t) => t ? Object.entries(t).map(([s, n]) => Array.isArray(n) ? {
+  " ": s,
   value: `"${n.join("; ")}"`
 } : {
-  " ": l,
+  " ": s,
   value: `"${n}"`
 }) : {};
 function Fe(t) {
   const {
     width: e,
-    height: l,
+    height: s,
     data: n,
     onSeriesMouseClick: c,
     cardTemplate: p,
@@ -288,7 +288,7 @@ function Fe(t) {
     classNames: g,
     page: v,
     allowDataDownloadOnDetail: x
-  } = t, [b, N] = w(void 0);
+  } = t, [b, j] = w(void 0);
   return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
     /* @__PURE__ */ i.jsx(
       "div",
@@ -296,7 +296,7 @@ function Fe(t) {
         className: "undp-scrollbar w-full my-0 mx-auto grid gap-4 undp-viz-data-cards-container",
         style: {
           width: e ? `${e}px` : "100%",
-          height: l ? `${l}px` : "auto",
+          height: s ? `${s}px` : "auto",
           gridTemplateColumns: `repeat(auto-fill, minmax(${d}px, 1fr))`
         },
         children: n.filter(
@@ -310,7 +310,7 @@ function Fe(t) {
             },
             className: `w-full flex flex-col ${c || o ? "cursor-pointer" : "cursor-auto"}${u ? "" : "bg-primary-gray-200 dark:bg-primary-gray-600"} ${g?.dataCards || ""}`,
             onClick: () => {
-              c?.(a), N(a);
+              c?.(a), j(a);
             },
             dangerouslySetInnerHTML: typeof p == "string" ? { __html: J(p, a) } : void 0,
             children: typeof p == "function" ? p(a) : null
@@ -324,7 +324,7 @@ function Fe(t) {
       {
         open: b !== void 0,
         onClose: () => {
-          N(void 0);
+          j(void 0);
         },
         children: [
           /* @__PURE__ */ i.jsx(
@@ -336,7 +336,7 @@ function Fe(t) {
             }
           ),
           x ? /* @__PURE__ */ i.jsx("div", { className: "flex", children: /* @__PURE__ */ i.jsx(
-            Ne,
+            je,
             {
               csvData: Oe(b),
               headers: [
@@ -360,13 +360,13 @@ function Fe(t) {
     ) : null
   ] });
 }
-const Me = (t, e, l) => e.length === 0 ? t : t.filter(
-  (n) => e.some((c) => n[c]?.toLowerCase().includes(l.toLowerCase()))
+const Me = (t, e, s) => e.length === 0 ? t : t.filter(
+  (n) => e.some((c) => n[c]?.toLowerCase().includes(s.toLowerCase()))
 );
 function Ye(t) {
   const {
     width: e,
-    height: l,
+    height: s,
     graphTitle: n,
     sources: c,
     graphDescription: p,
@@ -379,7 +379,7 @@ function Ye(t) {
     ariaLabel: v,
     cardTemplate: x,
     cardBackgroundColor: b,
-    cardFilters: N,
+    cardFilters: j,
     cardSortingOptions: a,
     cardSearchColumns: y,
     cardMinWidth: ce = 320,
@@ -391,23 +391,23 @@ function Ye(t) {
     uiMode: F = "normal",
     styles: C,
     classNames: S
-  } = t, [M, H] = w(o), [me, q] = w(1), [A, pe] = w(""), G = Q(
-    () => (N || []).map((r) => ({
+  } = t, [M, H] = w(o), [me, A] = w(1), [G, pe] = w(""), E = Q(
+    () => (j || []).map((r) => ({
       filter: r.column,
       label: r.label || `Filter by ${r.column}`,
       singleSelect: !0,
       clearable: !0,
       defaultValue: Y(r.defaultValue),
-      availableValues: ke(o, r.column).filter((j) => !r.excludeValues?.includes(`${j}`)).map((j) => ({ value: j, label: j })),
+      availableValues: ke(o, r.column).filter((N) => !r.excludeValues?.includes(`${N}`)).map((N) => ({ value: N, label: N })),
       width: r.width
     })),
-    [N, o]
-  ), [E, fe] = w(
-    (N || []).map((r) => ({
+    [j, o]
+  ), [U, fe] = w(
+    (j || []).map((r) => ({
       filter: r.column,
       value: Y(r.defaultValue)
     }))
-  ), [D, U] = w(
+  ), [D, q] = w(
     a ? !a.defaultValue || a.options.findIndex((r) => r.label === a.defaultValue) === -1 ? a.options[0] : a.options[a.options.findIndex((r) => r.label === a.defaultValue)] : void 0
   ), K = Q(
     () => ({
@@ -417,27 +417,27 @@ function Ye(t) {
     }),
     []
   );
-  return z(() => {
-    U(
+  return I(() => {
+    q(
       a ? !a.defaultValue || a.options.findIndex(
         (r) => r.label === a.defaultValue
       ) === -1 ? a.options[0] : a.options[a.options.findIndex(
         (r) => r.label === a.defaultValue
       )] : void 0
     );
-  }, [a]), z(() => {
-    const r = Me(o, y || [], A).filter(
+  }, [a]), I(() => {
+    const r = Me(o, y || [], G).filter(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (j) => E.every(
+      (N) => U.every(
         (V) => V.value && L([V.value]).length > 0 ? ge(
-          L([j[V.filter]]),
+          L([N[V.filter]]),
           L([V.value]).map((T) => T.value)
         ).length > 0 : !0
       )
     );
     H(D ? he(r, D?.value, D?.type) : r);
-  }, [o, y, A, E, D]), z(() => {
-    q(1);
+  }, [o, y, G, U, D]), I(() => {
+    A(1);
   }, [M]), /* @__PURE__ */ i.jsx(
     "div",
     {
@@ -478,7 +478,7 @@ function Ye(t) {
                     width: e
                   }
                 ) : null,
-                a || G.length > 0 ? /* @__PURE__ */ i.jsxs("div", { className: "flex gap-4 flex-wrap items-start w-full", children: [
+                a || E.length > 0 ? /* @__PURE__ */ i.jsxs("div", { className: "flex gap-4 flex-wrap items-start w-full", children: [
                   a ? /* @__PURE__ */ i.jsxs(
                     "div",
                     {
@@ -502,7 +502,7 @@ function Ye(t) {
                             isSearchable: !0,
                             filterOption: Z(K),
                             onChange: (r) => {
-                              U(r || void 0);
+                              q(r || void 0);
                             },
                             variant: F,
                             size: "sm",
@@ -516,7 +516,7 @@ function Ye(t) {
                       ]
                     }
                   ) : null,
-                  G?.map((r, j) => /* @__PURE__ */ i.jsxs(
+                  E?.map((r, N) => /* @__PURE__ */ i.jsxs(
                     "div",
                     {
                       className: "grow shrink-0 min-w-[240px]",
@@ -555,7 +555,7 @@ function Ye(t) {
                         )
                       ]
                     },
-                    j
+                    N
                   ))
                 ] }) : null,
                 (y || []).length > 0 ? /* @__PURE__ */ i.jsx("div", { style: { paddingTop: "1px" }, children: /* @__PURE__ */ i.jsx(
@@ -576,7 +576,7 @@ function Ye(t) {
                   {
                     data: M,
                     width: e,
-                    height: l,
+                    height: s,
                     cardTemplate: x,
                     cardMinWidth: ce,
                     page: me,
@@ -590,16 +590,16 @@ function Ye(t) {
                   }
                 ),
                 O ? /* @__PURE__ */ i.jsx(
-                  Ie,
+                  ze,
                   {
                     total: M.length,
                     defaultPage: 0,
                     pageSize: O,
-                    onChange: q
+                    onChange: A
                   }
                 ) : null,
                 c || u ? /* @__PURE__ */ i.jsx(
-                  je,
+                  Ne,
                   {
                     styles: { footnote: C?.footnote, source: C?.source },
                     classNames: {