@undp/data-viz 1.5.8 → 2.0.0

package/dist/DataTable.js

@@ -1,331 +1,188 @@
-import { j as i, m as Q } from "./index-CHPV5EwG-BPSP-7Jg.js";
-import { i as M } from "./index-Bwrro8-q.js";
-import { useState as p, useEffect as U } from "react";
-import { i as Z } from "./index-V_JXij1_.js";
-import { u as y } from "./Typography-Ctgfl1J5.js";
-import { o as _ } from "./index-DvVprvy6.js";
-import { n as v } from "./numberFormattingFunction-14YCbkN2.js";
-import { GraphFooter as rr } from "./GraphFooter.js";
-import { GraphHeader as or } from "./GraphHeader.js";
-import { S as ir, a as tr, b as er, F as sr, c as ar } from "./index-BmCqpO1B.js";
-import { g as S } from "./getTextColorBasedOnBgColor-B6Nk2WBf.js";
-const P = (N) => N.map((c) => c || 1).reduce((c, b) => c + b, 0);
-function yr(N) {
-  const {
-    width: l,
-    height: k,
-    graphTitle: c,
-    sources: b,
-    graphDescription: j,
-    footNote: B,
-    graphID: R,
-    data: m,
-    columnData: a,
-    onSeriesMouseClick: I,
-    language: $ = "en",
-    theme: V = "light",
-    ariaLabel: q,
-    backgroundColor: d = !1,
-    padding: F,
-    resetSelectionOnDoubleClick: H = !0,
-    styles: u,
-    classNames: f,
-    minWidth: T,
-    naLabel: C = "NA",
-    precision: w = 2
-  } = N, [g, z] = p(void 0), [W, E] = p(void 0), [h, A] = p("asc"), [x, X] = p(void 0), [Y, J] = p({}), [n, G] = p(
-    a.filter((o) => o.filterOptions && o.filterOptions.length > 0).map((o) => ({ id: o.columnId, option: o.filterOptions }))
-  ), [K, L] = p(m);
-  return U(() => {
-    const o = [];
-    m.forEach((s) => {
-      let r = !0;
-      n.forEach((e) => {
-        if (typeof s[e.id] != "object" && typeof s[e.id] != "function" && typeof s[e.id] != "symbol")
-          if (a[a.findIndex((t) => t.columnId === e.id)].separator) {
-            const t = s[e.id].split(
-              a[a.findIndex((O) => O.columnId === e.id)].separator
-            );
-            Z(t, e.option).length === 0 && (r = !1);
-          } else e.option.indexOf(s[e.id]) === -1 && (r = !1);
-      }), r && o.push(s);
-    }), L(g && m ? _(o, [g], [h]) : o);
-  }, [g, h, m, n, a]), /* @__PURE__ */ i.jsx(
-    "div",
-    {
-      className: `${V || "light"} flex  ${l ? "w-fit grow-0" : "w-full grow"}`,
-      dir: $ === "he" || $ === "ar" ? "rtl" : void 0,
-      children: /* @__PURE__ */ i.jsx(
-        "div",
-        {
-          className: Q(
-            `${d ? d === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${$ || "en"} w-full`,
-            l ? "w-fit" : "w-full",
-            f?.graphContainer
-          ),
-          style: {
-            ...u?.graphContainer || {},
-            ...d && d !== !0 ? { backgroundColor: d } : {}
-          },
-          id: R,
-          "aria-label": q || `${c ? `The graph shows ${c}. ` : ""}This is an data table. ${j ? ` ${j}` : ""}`,
-          children: /* @__PURE__ */ i.jsxs(
-            "div",
-            {
-              className: "flex grow",
-              style: { padding: d ? F || "1rem" : F || 0 },
-              children: [
-                /* @__PURE__ */ i.jsxs("div", { className: "flex flex-col gap-3 w-full justify-between grow", children: [
-                  c || j ? /* @__PURE__ */ i.jsx(
-                    or,
-                    {
-                      styles: {
-                        title: u?.title,
-                        description: u?.description
-                      },
-                      classNames: {
-                        title: f?.title,
-                        description: f?.description
-                      },
-                      graphTitle: c,
-                      graphDescription: j,
-                      width: l
-                    }
-                  ) : null,
-                  /* @__PURE__ */ i.jsx("div", { className: "grow flex flex-col justify-center", children: /* @__PURE__ */ i.jsx(
-                    "div",
-                    {
-                      className: "undp-scrollbar",
-                      style: {
-                        width: l ? `${l}px` : "100%",
-                        height: k ? `${k}px` : "auto"
-                      },
-                      children: /* @__PURE__ */ i.jsx("div", { style: T ? { minWidth: T } : void 0, children: m ? /* @__PURE__ */ i.jsxs("table", { className: "w-full", style: { borderCollapse: "collapse" }, children: [
-                        /* @__PURE__ */ i.jsx("thead", { className: "text-left bg-primary-gray-300 dark:bg-primary-gray-550", children: /* @__PURE__ */ i.jsx("tr", { children: a?.map((o, s) => /* @__PURE__ */ i.jsx(
-                          "th",
-                          {
-                            className: "text-primary-gray-700 dark:text-primary-gray-100 text-sm",
-                            style: {
-                              width: `calc(${100 * (o.columnWidth || 1) / P(a.map((r) => r.columnWidth || 1))}%`
-                            },
-                            children: /* @__PURE__ */ i.jsxs("div", { className: "flex gap-2 justify-between items-center p-4", children: [
-                              /* @__PURE__ */ i.jsx(
-                                y,
-                                {
-                                  size: "sm",
-                                  marginBottom: "none",
-                                  className: `w-fit grow text-${o.align || "left"} font-bold`,
-                                  children: o.columnTitle || o.columnId
-                                }
-                              ),
-                              o.sortable ? /* @__PURE__ */ i.jsx(
-                                "button",
-                                {
-                                  type: "button",
-                                  className: "bg-transparent cursor-pointer p-0 m-0 border-0",
-                                  onClick: () => {
-                                    g === o.columnId ? (h === "asc" && A("desc"), h === "desc" && z(void 0)) : (z(o.columnId), A("asc"));
-                                  },
-                                  children: g === o.columnId ? h === "asc" ? /* @__PURE__ */ i.jsx(ir, {}) : /* @__PURE__ */ i.jsx(tr, {}) : /* @__PURE__ */ i.jsx(er, {})
-                                }
-                              ) : null,
-                              o.filterOptions && o.filterOptions.length ? /* @__PURE__ */ i.jsx(
-                                "button",
-                                {
-                                  type: "button",
-                                  className: "bg-transparent cursor-pointer m-0 p-0 border-0",
-                                  onClick: (r) => {
-                                    if (x === o.columnId)
-                                      X(void 0);
-                                    else if (r.currentTarget) {
-                                      X(o.columnId);
-                                      const e = r.currentTarget.getBoundingClientRect();
-                                      J({
-                                        top: e.bottom + window.scrollY,
-                                        left: e.left + window.scrollX - 160 < 0 ? e.left + window.scrollX : e.left + window.scrollX - 160,
-                                        width: "10rem"
-                                      });
-                                    }
-                                  },
-                                  children: n[n.findIndex((r) => r.id === o.columnId)].option.length === o.filterOptions?.length ? /* @__PURE__ */ i.jsx(sr, {}) : /* @__PURE__ */ i.jsx(ar, {})
-                                }
-                              ) : null
-                            ] })
-                          },
-                          s
-                        )) }) }),
-                        /* @__PURE__ */ i.jsx("tbody", { children: K?.map((o, s) => /* @__PURE__ */ i.jsx(
-                          "tr",
-                          {
-                            className: `cursor-${I ? "pointer" : "auto"} border-b border-b-primary-gray-400 dark:border-b-primary-gray-500 ${M(W, o) ? "bg-primary-gray-200 dark:bg-primary-gray-600" : "bg-transparent"}`,
-                            style: o.rowStyle,
-                            onClick: () => {
-                              I && (M(W, o) && H ? (E(void 0), I(void 0)) : (E(o), I(o)));
-                            },
-                            children: a.map((r, e) => /* @__PURE__ */ i.jsx(
-                              "td",
-                              {
-                                className: `text-primary-gray-700 dark:text-primary-gray-100 text-sm text-${r.align || "left"}`,
-                                style: {
-                                  width: `calc(${100 * (o.columnWidth || 1) / P(a.map((t) => t.columnWidth || 1))}%`
-                                },
-                                children: /* @__PURE__ */ i.jsx(
-                                  "div",
-                                  {
-                                    className: `text-primary-gray-700 dark:text-primary-gray-100 flex p-4 ${r.align === "right" ? "justify-end" : r.align === "center" ? "justify-center" : "justify-start"}`,
-                                    children: typeof o[r.columnId] == "number" ? /* @__PURE__ */ i.jsx(
-                                      y,
-                                      {
-                                        marginBottom: "none",
-                                        size: "sm",
-                                        className: `text-primary-gray-700 dark:text-primary-gray-100 w-fit ${r.chip ? "grow-0 rounded-sm p-2" : "grow rounded-none p-0"} text-${r.align || "left"} ${r.chip ? r.chipColors ? "" : "bg-primary-gray-300 dark:bg-primary-gray-500" : "bg-transparent"}`,
-                                        style: {
-                                          ...r.chip && r.chipColors ? {
-                                            backgroundColor: r.chipColors[r.chipColors.findIndex(
-                                              (t) => t.value === o[r.chipColumnId || r.columnId]
-                                            )].color,
-                                            color: S(
-                                              r.chipColors[r.chipColors.findIndex(
-                                                (t) => t.value === o[r.chipColumnId || r.columnId]
-                                              )].color
-                                            )
-                                          } : {}
-                                        },
-                                        children: v(
-                                          o[r.columnId],
-                                          C,
-                                          w,
-                                          r.prefix,
-                                          r.suffix
-                                        )
-                                      }
-                                    ) : typeof o[r.columnId] == "string" ? r.separator ? /* @__PURE__ */ i.jsx("div", { className: "text-primary-gray-700 dark:text-primary-gray-100 flex flex-wrap gap-2", children: o[r.columnId].split(r.separator).map((t, O) => /* @__PURE__ */ i.jsx(
-                                      y,
-                                      {
-                                        marginBottom: "none",
-                                        size: "sm",
-                                        className: `text-primary-gray-700 dark:text-primary-gray-100 w-fit ${r.chip ? "grow-0 rounded-sm p-2" : "grow rounded-none p-0"} text-${r.align || "left"} ${r.chip ? r.chipColors ? "" : "bg-primary-gray-300 dark:bg-primary-gray-500" : "bg-transparent"}`,
-                                        style: {
-                                          ...r.chip && r.chipColors ? {
-                                            backgroundColor: r.chipColors[r.chipColors.findIndex(
-                                              (D) => D.value === (r.chipColumnId ? o[r.chipColumnId] : t)
-                                            )].color,
-                                            color: S(
-                                              r.chipColors[r.chipColors.findIndex(
-                                                (D) => D.value === (r.chipColumnId ? o[r.chipColumnId] : t)
-                                              )].color
-                                            )
-                                          } : {}
-                                        },
-                                        children: v(
-                                          t,
-                                          C,
-                                          w,
-                                          r.prefix,
-                                          r.suffix
-                                        )
-                                      },
-                                      O
-                                    )) }) : /* @__PURE__ */ i.jsx(
-                                      y,
-                                      {
-                                        marginBottom: "none",
-                                        size: "sm",
-                                        className: `text-primary-gray-700 dark:text-primary-gray-100 w-fit ${r.chip ? "grow-0 rounded-sm p-2" : "grow rounded-none p-0"} text-${r.align || "left"} ${r.chip ? r.chipColors ? "" : "bg-primary-gray-300 dark:bg-primary-gray-500" : "bg-transparent"}`,
-                                        style: {
-                                          ...r.chip && r.chipColors ? {
-                                            backgroundColor: r.chipColors[r.chipColors.findIndex(
-                                              (t) => t.value === o[r.chipColumnId || r.columnId]
-                                            )].color,
-                                            color: S(
-                                              r.chipColors[r.chipColors.findIndex(
-                                                (t) => t.value === o[r.chipColumnId || r.columnId]
-                                              )].color
-                                            )
-                                          } : {}
-                                        },
-                                        children: v(
-                                          o[r.columnId],
-                                          C,
-                                          w,
-                                          r.prefix,
-                                          r.suffix
-                                        )
-                                      }
-                                    ) : /* @__PURE__ */ i.jsx("div", { children: v(
-                                      o[r.columnId],
-                                      C,
-                                      w,
-                                      r.prefix,
-                                      r.suffix
-                                    ) })
-                                  }
-                                )
-                              },
-                              e
-                            ))
-                          },
-                          s
-                        )) })
-                      ] }) : null })
-                    }
-                  ) }),
-                  b || B ? /* @__PURE__ */ i.jsx(
-                    rr,
-                    {
-                      styles: { footnote: u?.footnote, source: u?.source },
-                      classNames: {
-                        footnote: f?.footnote,
-                        source: f?.source
-                      },
-                      sources: b,
-                      footNote: B,
-                      width: l
-                    }
-                  ) : null
-                ] }),
-                x && /* @__PURE__ */ i.jsx(
-                  "div",
-                  {
-                    style: Y,
-                    className: "absolute p-3 border z-[1000] rounded-sm bg-primary-white dark:bg-primary-gray-700 border-primary-gray-300 dark:border-primary-gray-550",
-                    children: /* @__PURE__ */ i.jsxs("div", { className: "max-w-60", children: [
-                      /* @__PURE__ */ i.jsx(y, { size: "sm", marginBottom: "2xs", className: "font-bold", children: "Filter data by" }),
-                      /* @__PURE__ */ i.jsx("div", { className: "flex flex-col gap-2", children: a[a.findIndex((o) => o.columnId === x)].filterOptions?.map((o, s) => /* @__PURE__ */ i.jsx("div", { children: /* @__PURE__ */ i.jsxs("label", { className: "undp-viz-label", children: [
-                        /* @__PURE__ */ i.jsx(
-                          "input",
-                          {
-                            type: "checkbox",
-                            className: "undp-viz-checkbox",
-                            checked: n[n.findIndex((r) => r.id === x)].option.indexOf(o) !== -1,
-                            onChange: () => {
-                              const r = n.findIndex((t) => t.id === x), e = [...n[r].option];
-                              if (e.indexOf(o) !== -1) {
-                                e.splice(e.indexOf(o), 1);
-                                const t = [...n];
-                                t[r].option = e, G(t);
-                              } else {
-                                e.push(o);
-                                const t = [...n];
-                                t[r].option = e, G(t);
-                              }
-                            }
-                          }
-                        ),
-                        o
-                      ] }, s) }, s)) })
-                    ] })
-                  }
-                )
-              ]
-            }
-          )
+import { c as vt, j as i } from "./index-CHPV5EwG-Curnpaqc.js";
+import { i as yt } from "./index-Bwrro8-q.js";
+import { useRef as kt, useState as y, useEffectEvent as wt, useEffect as Nt } from "react";
+import { i as $t } from "./index-BuwmuDFJ.js";
+import { j as B } from "./Typography-PxtFcnJb.js";
+import { o as Ot } from "./index-BZQYSqar.js";
+import { n as V } from "./numberFormattingFunction-14YCbkN2.js";
+import { GraphFooter as Dt } from "./GraphFooter.js";
+import { GraphHeader as St } from "./GraphHeader.js";
+import { S as Bt, a as Et, b as Ft, F as zt, c as Wt } from "./index-D491FEn1.js";
+import { g as st } from "./getTextColorBasedOnBgColor-CDY808zi.js";
+import { G as Tt } from "./GraphContainer-CRqzdKu2.js";
+const bt = (c) => c.map((h) => h || 1).reduce((h, b) => h + b, 0);
+function _t(c) {
+  const t = vt.c(77), {
+    width: m,
+    height: h,
+    graphTitle: b,
+    sources: E,
+    graphDescription: F,
+    footNote: z,
+    graphID: q,
+    data: f,
+    columnData: s,
+    onSeriesMouseClick: C,
+    language: at,
+    theme: ct,
+    ariaLabel: H,
+    backgroundColor: lt,
+    padding: Y,
+    resetSelectionOnDoubleClick: pt,
+    styles: l,
+    classNames: p,
+    minWidth: W,
+    naLabel: dt,
+    precision: mt
+  } = c, J = at === void 0 ? "en" : at, K = ct === void 0 ? "light" : ct, Q = lt === void 0 ? !1 : lt, U = pt === void 0 ? !0 : pt, I = dt === void 0 ? "NA" : dt, j = mt === void 0 ? 2 : mt, Ct = kt(null), [u, ft] = y(void 0), [T, ut] = y(void 0), [g, gt] = y("asc"), [x, ht] = y(void 0);
+  let G;
+  t[0] === Symbol.for("react.memo_cache_sentinel") ? (G = {}, t[0] = G) : G = t[0];
+  const [Z, It] = y(G);
+  let R;
+  t[1] !== s ? (R = s.filter(Lt).map(At), t[1] = s, t[2] = R) : R = t[2];
+  const [a, xt] = y(R), [_, jt] = y(f);
+  let A;
+  t[3] === Symbol.for("react.memo_cache_sentinel") ? (A = (r) => {
+    jt(r);
+  }, t[3] = A) : A = t[3];
+  const L = wt(A);
+  let P;
+  t[4] !== s || t[5] !== u || t[6] !== f || t[7] !== a || t[8] !== L || t[9] !== g ? (P = () => {
+    const r = [];
+    f.forEach((d) => {
+      let o = !0;
+      a.forEach((e) => {
+        if (typeof d[e.id] != "object" && typeof d[e.id] != "function" && typeof d[e.id] != "symbol")
+          if (s[s.findIndex((n) => n.columnId === e.id)].separator) {
+            const n = d[e.id].split(s[s.findIndex((et) => et.columnId === e.id)].separator);
+            $t(n, e.option).length === 0 && (o = !1);
+          } else
+            e.option.indexOf(d[e.id]) === -1 && (o = !1);
+      }), o && r.push(d);
+    }), L(u && f ? Ot(r, [u], [g]) : r);
+  }, t[4] = s, t[5] = u, t[6] = f, t[7] = a, t[8] = L, t[9] = g, t[10] = P) : P = t[10];
+  let X;
+  t[11] !== s || t[12] !== u || t[13] !== f || t[14] !== a || t[15] !== g ? (X = [u, g, f, a, s], t[11] = s, t[12] = u, t[13] = f, t[14] = a, t[15] = g, t[16] = X) : X = t[16], Nt(P, X);
+  const tt = p?.graphContainer, ot = l?.graphContainer;
+  let v;
+  t[17] !== p?.description || t[18] !== p?.title || t[19] !== F || t[20] !== b || t[21] !== l?.description || t[22] !== l?.title || t[23] !== m ? (v = b || F ? /* @__PURE__ */ i.jsx(St, { styles: {
+    title: l?.title,
+    description: l?.description
+  }, classNames: {
+    title: p?.title,
+    description: p?.description
+  }, graphTitle: b, graphDescription: F, width: m }) : null, t[17] = p?.description, t[18] = p?.title, t[19] = F, t[20] = b, t[21] = l?.description, t[22] = l?.title, t[23] = m, t[24] = v) : v = t[24];
+  const rt = m ? `${m}px` : "100%", it = h ? `${h}px` : "auto";
+  let k;
+  t[25] !== rt || t[26] !== it ? (k = {
+    width: rt,
+    height: it
+  }, t[25] = rt, t[26] = it, t[27] = k) : k = t[27];
+  let w;
+  t[28] !== W ? (w = W ? {
+    minWidth: W
+  } : void 0, t[28] = W, t[29] = w) : w = t[29];
+  let N;
+  t[30] !== s || t[31] !== u || t[32] !== f || t[33] !== a || t[34] !== T || t[35] !== I || t[36] !== C || t[37] !== x || t[38] !== j || t[39] !== U || t[40] !== g || t[41] !== _ ? (N = f ? /* @__PURE__ */ i.jsxs("table", { className: "w-full", style: {
+    borderCollapse: "collapse"
+  }, children: [
+    /* @__PURE__ */ i.jsx("thead", { className: "text-left bg-primary-gray-300 dark:bg-primary-gray-550", children: /* @__PURE__ */ i.jsx("tr", { children: s?.map((r, d) => /* @__PURE__ */ i.jsx("th", { className: "text-primary-gray-700 dark:text-primary-gray-100 text-sm", style: {
+      width: `calc(${100 * (r.columnWidth || 1) / bt(s.map(Rt))}%`
+    }, children: /* @__PURE__ */ i.jsxs("div", { className: "flex gap-2 justify-between items-center p-4", children: [
+      /* @__PURE__ */ i.jsx(B, { size: "sm", marginBottom: "none", className: `w-fit grow text-${r.align || "left"} font-bold`, children: r.columnTitle || r.columnId }),
+      r.sortable ? /* @__PURE__ */ i.jsx("button", { type: "button", className: "bg-transparent cursor-pointer p-0 m-0 border-0", onClick: () => {
+        u === r.columnId ? (g === "asc" && gt("desc"), g === "desc" && ft(void 0)) : (ft(r.columnId), gt("asc"));
+      }, children: u === r.columnId ? g === "asc" ? /* @__PURE__ */ i.jsx(Bt, {}) : /* @__PURE__ */ i.jsx(Et, {}) : /* @__PURE__ */ i.jsx(Ft, {}) }) : null,
+      r.filterOptions && r.filterOptions.length ? /* @__PURE__ */ i.jsx("button", { type: "button", className: "bg-transparent cursor-pointer m-0 p-0 border-0", onClick: (o) => {
+        if (x === r.columnId)
+          ht(void 0);
+        else if (o.currentTarget) {
+          ht(r.columnId);
+          const e = o.currentTarget.getBoundingClientRect();
+          It({
+            top: e.bottom + window.scrollY,
+            left: e.left + window.scrollX - 160 < 0 ? e.left + window.scrollX : e.left + window.scrollX - 160,
+            width: "10rem"
+          });
         }
-      )
-    }
-  );
+      }, children: a[a.findIndex((o) => o.id === r.columnId)].option.length === r.filterOptions?.length ? /* @__PURE__ */ i.jsx(zt, {}) : /* @__PURE__ */ i.jsx(Wt, {}) }) : null
+    ] }) }, d)) }) }),
+    /* @__PURE__ */ i.jsx("tbody", { children: _?.map((r, d) => /* @__PURE__ */ i.jsx("tr", { className: `cursor-${C ? "pointer" : "auto"} border-b border-b-primary-gray-400 dark:border-b-primary-gray-500 ${yt(T, r) ? "bg-primary-gray-200 dark:bg-primary-gray-600" : "bg-transparent"}`, style: r.rowStyle, onClick: () => {
+      C && (yt(T, r) && U ? (ut(void 0), C(void 0)) : (ut(r), C(r)));
+    }, children: s.map((o, e) => /* @__PURE__ */ i.jsx("td", { className: `text-primary-gray-700 dark:text-primary-gray-100 text-sm text-${o.align || "left"}`, style: {
+      width: `calc(${100 * (r.columnWidth || 1) / bt(s.map(Gt))}%`
+    }, children: /* @__PURE__ */ i.jsx("div", { className: `text-primary-gray-700 dark:text-primary-gray-100 flex p-4 ${o.align === "right" ? "justify-end" : o.align === "center" ? "justify-center" : "justify-start"}`, children: typeof r[o.columnId] == "number" ? /* @__PURE__ */ i.jsx(B, { marginBottom: "none", size: "sm", className: `text-primary-gray-700 dark:text-primary-gray-100 w-fit ${o.chip ? "grow-0 rounded-sm p-2" : "grow rounded-none p-0"} text-${o.align || "left"} ${o.chip ? o.chipColors ? "" : "bg-primary-gray-300 dark:bg-primary-gray-500" : "bg-transparent"}`, style: {
+      ...o.chip && o.chipColors ? {
+        backgroundColor: o.chipColors[o.chipColors.findIndex((n) => n.value === r[o.chipColumnId || o.columnId])].color,
+        color: st(o.chipColors[o.chipColors.findIndex((n) => n.value === r[o.chipColumnId || o.columnId])].color)
+      } : {}
+    }, children: V(r[o.columnId], I, j, o.prefix, o.suffix) }) : typeof r[o.columnId] == "string" ? o.separator ? /* @__PURE__ */ i.jsx("div", { className: "text-primary-gray-700 dark:text-primary-gray-100 flex flex-wrap gap-2", children: r[o.columnId].split(o.separator).map((n, et) => /* @__PURE__ */ i.jsx(B, { marginBottom: "none", size: "sm", className: `text-primary-gray-700 dark:text-primary-gray-100 w-fit ${o.chip ? "grow-0 rounded-sm p-2" : "grow rounded-none p-0"} text-${o.align || "left"} ${o.chip ? o.chipColors ? "" : "bg-primary-gray-300 dark:bg-primary-gray-500" : "bg-transparent"}`, style: {
+      ...o.chip && o.chipColors ? {
+        backgroundColor: o.chipColors[o.chipColors.findIndex((nt) => nt.value === (o.chipColumnId ? r[o.chipColumnId] : n))].color,
+        color: st(o.chipColors[o.chipColors.findIndex((nt) => nt.value === (o.chipColumnId ? r[o.chipColumnId] : n))].color)
+      } : {}
+    }, children: V(n, I, j, o.prefix, o.suffix) }, et)) }) : /* @__PURE__ */ i.jsx(B, { marginBottom: "none", size: "sm", className: `text-primary-gray-700 dark:text-primary-gray-100 w-fit ${o.chip ? "grow-0 rounded-sm p-2" : "grow rounded-none p-0"} text-${o.align || "left"} ${o.chip ? o.chipColors ? "" : "bg-primary-gray-300 dark:bg-primary-gray-500" : "bg-transparent"}`, style: {
+      ...o.chip && o.chipColors ? {
+        backgroundColor: o.chipColors[o.chipColors.findIndex((n) => n.value === r[o.chipColumnId || o.columnId])].color,
+        color: st(o.chipColors[o.chipColors.findIndex((n) => n.value === r[o.chipColumnId || o.columnId])].color)
+      } : {}
+    }, children: V(r[o.columnId], I, j, o.prefix, o.suffix) }) : /* @__PURE__ */ i.jsx("div", { children: V(r[o.columnId], I, j, o.prefix, o.suffix) }) }) }, e)) }, d)) })
+  ] }) : null, t[30] = s, t[31] = u, t[32] = f, t[33] = a, t[34] = T, t[35] = I, t[36] = C, t[37] = x, t[38] = j, t[39] = U, t[40] = g, t[41] = _, t[42] = N) : N = t[42];
+  let $;
+  t[43] !== w || t[44] !== N ? ($ = /* @__PURE__ */ i.jsx("div", { style: w, children: N }), t[43] = w, t[44] = N, t[45] = $) : $ = t[45];
+  let O;
+  t[46] !== k || t[47] !== $ ? (O = /* @__PURE__ */ i.jsx("div", { className: "grow flex flex-col justify-center", children: /* @__PURE__ */ i.jsx("div", { className: "undp-scrollbar", style: k, children: $ }) }), t[46] = k, t[47] = $, t[48] = O) : O = t[48];
+  let D;
+  t[49] !== p?.footnote || t[50] !== p?.source || t[51] !== z || t[52] !== E || t[53] !== l?.footnote || t[54] !== l?.source || t[55] !== m ? (D = E || z ? /* @__PURE__ */ i.jsx(Dt, { styles: {
+    footnote: l?.footnote,
+    source: l?.source
+  }, classNames: {
+    footnote: p?.footnote,
+    source: p?.source
+  }, sources: E, footNote: z, width: m }) : null, t[49] = p?.footnote, t[50] = p?.source, t[51] = z, t[52] = E, t[53] = l?.footnote, t[54] = l?.source, t[55] = m, t[56] = D) : D = t[56];
+  let S;
+  t[57] !== s || t[58] !== a || t[59] !== Z || t[60] !== x ? (S = x && /* @__PURE__ */ i.jsx("div", { style: Z, className: "absolute p-3 border z-[1000] rounded-sm bg-primary-white dark:bg-primary-gray-700 border-primary-gray-300 dark:border-primary-gray-550", children: /* @__PURE__ */ i.jsxs("div", { className: "max-w-60", children: [
+    /* @__PURE__ */ i.jsx(B, { size: "sm", marginBottom: "2xs", className: "font-bold", children: "Filter data by" }),
+    /* @__PURE__ */ i.jsx("div", { className: "flex flex-col gap-2", children: s[s.findIndex((r) => r.columnId === x)].filterOptions?.map((r, d) => /* @__PURE__ */ i.jsx("div", { children: /* @__PURE__ */ i.jsxs("label", { className: "undp-viz-label", children: [
+      /* @__PURE__ */ i.jsx("input", { type: "checkbox", className: "undp-viz-checkbox", checked: a[a.findIndex((o) => o.id === x)].option.indexOf(r) !== -1, onChange: () => {
+        const o = a.findIndex((n) => n.id === x), e = [...a[o].option];
+        if (e.indexOf(r) !== -1) {
+          e.splice(e.indexOf(r), 1);
+          const n = [...a];
+          n[o].option = e, xt(n);
+        } else {
+          e.push(r);
+          const n = [...a];
+          n[o].option = e, xt(n);
+        }
+      } }),
+      r
+    ] }, d) }, d)) })
+  ] }) }), t[57] = s, t[58] = a, t[59] = Z, t[60] = x, t[61] = S) : S = t[61];
+  let M;
+  return t[62] !== H || t[63] !== Q || t[64] !== q || t[65] !== h || t[66] !== J || t[67] !== Y || t[68] !== tt || t[69] !== ot || t[70] !== v || t[71] !== O || t[72] !== D || t[73] !== S || t[74] !== K || t[75] !== m ? (M = /* @__PURE__ */ i.jsxs(Tt, { className: tt, style: ot, id: q, ref: Ct, "aria-label": H, backgroundColor: Q, theme: K, language: J, width: m, height: h, padding: Y, children: [
+    v,
+    O,
+    D,
+    S
+  ] }), t[62] = H, t[63] = Q, t[64] = q, t[65] = h, t[66] = J, t[67] = Y, t[68] = tt, t[69] = ot, t[70] = v, t[71] = O, t[72] = D, t[73] = S, t[74] = K, t[75] = m, t[76] = M) : M = t[76], M;
+}
+function Gt(c) {
+  return c.columnWidth || 1;
+}
+function Rt(c) {
+  return c.columnWidth || 1;
+}
+function At(c) {
+  return {
+    id: c.columnId,
+    option: c.filterOptions
+  };
+}
+function Lt(c) {
+  return c.filterOptions && c.filterOptions.length > 0;
 }
 export {
-  yr as DataTable
+  _t as DataTable
 };
 //# sourceMappingURL=DataTable.js.map