@undp/data-viz 2.6.0 → 2.6.1

package/dist/DataCards.js

@@ -1,253 +1,2 @@
-import { c as _e, j as l } from "./compiler-runtime-qHgugrLy.js";
-import { useState as G, useRef as Be, useEffectEvent as Se, useEffect as je } from "react";
-import { i as Fe } from "./index-BuwmuDFJ.js";
-import { f as xe } from "./index-EArKRVKg.js";
-import { DropdownSelect as we, createFilter as De } from "@undp/design-system-react/DropdownSelect";
-import { P as Ve } from "@undp/design-system-react/Typography";
-import { Pagination as Te } from "@undp/design-system-react/Pagination";
-import { Search as Ee } from "@undp/design-system-react/Search";
-import { o as Pe } from "./index-BZQYSqar.js";
-import { Spacer as se } from "@undp/design-system-react/Spacer";
-import { Modal as Le } from "@undp/design-system-react/Modal";
-import { CsvDownloadButton as Re } from "./CsvDownloadButton.js";
-import { d as Ge } from "./index-D_ls5oK8.js";
-import { s as Ne } from "./string2HTML-DL-pInUB.js";
-import { GraphFooter as Ae } from "./GraphFooter.js";
-import { GraphHeader as He } from "./GraphHeader.js";
-import { g as We } from "./getUniqValue-DsqSii6M.js";
-import { t as ke } from "./transformDataForSelect-D8AuvYdf.js";
-import { G as Qe } from "./GraphContainer-DcOM2CI6.js";
-const qe = (n) => n ? Object.entries(n).map(([i, c]) => Array.isArray(c) ? {
-  " ": i,
-  value: `"${c.join("; ")}"`
-} : {
-  " ": i,
-  value: `"${c}"`
-}) : {};
-function Ke(n) {
-  const e = _e.c(34), {
-    width: i,
-    height: c,
-    data: v,
-    onSeriesMouseClick: g,
-    cardTemplate: u,
-    cardBackgroundColor: p,
-    cardMinWidth: k,
-    detailsOnClick: o,
-    noOfItemsInAPage: x,
-    styles: w,
-    classNames: D,
-    page: y,
-    allowDataDownloadOnDetail: S
-  } = n, A = k === void 0 ? 320 : k, [h, a] = G(void 0), f = i ? `${i}px` : "100%", I = c ? `${c}px` : "auto", M = `repeat(auto-fill, minmax(${A}px, 1fr))`;
-  let C;
-  e[0] !== f || e[1] !== I || e[2] !== M ? (C = {
-    width: f,
-    height: I,
-    gridTemplateColumns: M
-  }, e[0] = f, e[1] = I, e[2] = M, e[3] = C) : C = e[3];
-  let b;
-  if (e[4] !== p || e[5] !== u || e[6] !== D?.dataCards || e[7] !== v || e[8] !== o || e[9] !== x || e[10] !== g || e[11] !== y || e[12] !== w?.dataCards) {
-    let r;
-    e[14] !== x || e[15] !== y ? (r = (m, V) => x ? V < y * x && V >= (y - 1) * x : !0, e[14] = x, e[15] = y, e[16] = r) : r = e[16];
-    let s;
-    e[17] !== p || e[18] !== u || e[19] !== D?.dataCards || e[20] !== o || e[21] !== g || e[22] !== w?.dataCards ? (s = (m, V) => /* @__PURE__ */ l.jsx("div", { style: {
-      ...w?.dataCards || {},
-      ...p && {
-        backgroundColor: p
-      }
-    }, className: `w-full flex flex-col ${g || o ? "cursor-pointer" : "cursor-auto"}${p ? "" : "bg-primary-gray-200 dark:bg-primary-gray-600"} ${D?.dataCards || ""}`, onClick: () => {
-      g?.(m), a(m);
-    }, dangerouslySetInnerHTML: typeof u == "string" ? {
-      __html: Ne(u, m)
-    } : void 0, children: typeof u == "function" ? u(m) : null }, V), e[17] = p, e[18] = u, e[19] = D?.dataCards, e[20] = o, e[21] = g, e[22] = w?.dataCards, e[23] = s) : s = e[23], b = v.filter(r).map(s), e[4] = p, e[5] = u, e[6] = D?.dataCards, e[7] = v, e[8] = o, e[9] = x, e[10] = g, e[11] = y, e[12] = w?.dataCards, e[13] = b;
-  } else
-    b = e[13];
-  let j;
-  e[24] !== C || e[25] !== b ? (j = /* @__PURE__ */ l.jsx("div", { className: "undp-scrollbar w-full my-0 mx-auto grid gap-4 undp-viz-data-cards-container", style: C, children: b }), e[24] = C, e[25] = b, e[26] = j) : j = e[26];
-  let d;
-  e[27] !== S || e[28] !== o || e[29] !== h ? (d = o && h !== void 0 ? /* @__PURE__ */ l.jsxs(Le, { open: h !== void 0, onClose: () => {
-    a(void 0);
-  }, children: [
-    /* @__PURE__ */ l.jsx("div", { className: "graph-modal-content m-0", dangerouslySetInnerHTML: typeof o == "string" ? {
-      __html: Ne(o, h)
-    } : void 0, children: typeof o == "function" ? o(h) : null }),
-    S ? /* @__PURE__ */ l.jsx("div", { className: "flex", children: /* @__PURE__ */ l.jsx(Re, { csvData: qe(h), headers: [{
-      label: " ",
-      key: " "
-    }, {
-      label: "value",
-      key: "value"
-    }], buttonContent: /* @__PURE__ */ l.jsxs("div", { className: "flex items-center gap-4", children: [
-      typeof S == "string" ? S : null,
-      /* @__PURE__ */ l.jsx(Ge, {})
-    ] }) }) }) : null
-  ] }) : null, e[27] = S, e[28] = o, e[29] = h, e[30] = d) : d = e[30];
-  let _;
-  return e[31] !== j || e[32] !== d ? (_ = /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
-    j,
-    d
-  ] }), e[31] = j, e[32] = d, e[33] = _) : _ = e[33], _;
-}
-const Ue = (n, e, i) => e.length === 0 ? n : n.filter((c) => e.some((v) => c[v]?.toLowerCase().includes(i.toLowerCase())));
-function vt(n) {
-  const e = _e.c(84), {
-    width: i,
-    height: c,
-    graphTitle: v,
-    sources: g,
-    graphDescription: u,
-    footNote: p,
-    graphID: k,
-    data: o,
-    onSeriesMouseClick: x,
-    language: w,
-    theme: D,
-    ariaLabel: y,
-    cardTemplate: S,
-    cardBackgroundColor: A,
-    cardFilters: h,
-    cardSortingOptions: a,
-    cardSearchColumns: f,
-    cardMinWidth: I,
-    backgroundColor: M,
-    padding: C,
-    detailsOnClick: b,
-    allowDataDownloadOnDetail: j,
-    noOfItemsInAPage: d,
-    uiMode: _,
-    styles: r,
-    classNames: s
-  } = n, m = w === void 0 ? "en" : w, V = D === void 0 ? "light" : D, ie = I === void 0 ? 320 : I, ne = M === void 0 ? !1 : M, ce = j === void 0 ? !1 : j, H = _ === void 0 ? "normal" : _, [$, Ie] = G(o), [de, ve] = G(1), Me = Be(null), [z, $e] = G("");
-  let Q;
-  e[0] !== o ? (Q = (t) => ({
-    filter: t.column,
-    label: t.label || `Filter by ${t.column}`,
-    singleSelect: !0,
-    clearable: !0,
-    defaultValue: ke(t.defaultValue),
-    availableValues: We(o, t.column).filter((W) => !t.excludeValues?.includes(`${W}`)).map(Ye),
-    width: t.width
-  }), e[0] = o, e[1] = Q) : Q = e[1];
-  const ye = (h || []).map(Q);
-  let O;
-  e[2] !== h ? (O = h || [], e[2] = h, e[3] = O) : O = e[3];
-  let q;
-  e[4] !== O ? (q = O.map(Xe), e[4] = O, e[5] = q) : q = e[5];
-  const [B, ze] = G(q), [N, Ce] = G(a ? !a.defaultValue || a.options.findIndex((t) => t.label === a.defaultValue) === -1 ? a.options[0] : a.options[a.options.findIndex((t) => t.label === a.defaultValue)] : void 0), be = {
-    ignoreCase: !0,
-    ignoreAccents: !0,
-    trim: !0
-  };
-  let K;
-  e[6] !== a ? (K = () => {
-    Ce(a ? !a.defaultValue || a.options.findIndex((t) => t.label === a.defaultValue) === -1 ? a.options[0] : a.options[a.options.findIndex((t) => t.label === a.defaultValue)] : void 0);
-  }, e[6] = a, e[7] = K) : K = e[7];
-  const ue = Se(K);
-  let U;
-  e[8] !== ue ? (U = () => {
-    ue();
-  }, e[8] = ue, e[9] = U) : U = e[9];
-  let J;
-  e[10] !== a ? (J = [a], e[10] = a, e[11] = J) : J = e[11], je(U, J);
-  let X;
-  e[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (X = (t) => {
-    Ie(t), ve(1);
-  }, e[12] = X) : X = e[12];
-  const Y = Se(X);
-  let Z;
-  e[13] !== Y || e[14] !== f || e[15] !== o || e[16] !== z || e[17] !== B || e[18] !== N ? (Z = () => {
-    const t = Ue(o, f || [], z).filter((W) => B.every((R) => R.value && xe([R.value]).length > 0 ? Fe(xe([W[R.filter]]), xe([R.value]).map(Je)).length > 0 : !0));
-    Y(N ? Pe(t, [N.value], [N.type]) : t);
-  }, e[13] = Y, e[14] = f, e[15] = o, e[16] = z, e[17] = B, e[18] = N, e[19] = Z) : Z = e[19];
-  let ee;
-  e[20] !== f || e[21] !== o || e[22] !== z || e[23] !== B || e[24] !== N ? (ee = [o, f, z, B, N], e[20] = f, e[21] = o, e[22] = z, e[23] = B, e[24] = N, e[25] = ee) : ee = e[25], je(Z, ee);
-  const fe = Qe, me = s?.graphContainer, pe = r?.graphContainer;
-  let F;
-  e[26] !== s?.description || e[27] !== s?.title || e[28] !== u || e[29] !== v || e[30] !== r?.description || e[31] !== r?.title || e[32] !== i ? (F = v || u ? /* @__PURE__ */ l.jsx(He, { styles: {
-    title: r?.title,
-    description: r?.description
-  }, classNames: {
-    title: s?.title,
-    description: s?.description
-  }, graphTitle: v, graphDescription: u, width: i }) : null, e[26] = s?.description, e[27] = s?.title, e[28] = u, e[29] = v, e[30] = r?.description, e[31] = r?.title, e[32] = i, e[33] = F) : F = e[33];
-  const he = a || ye.length > 0 ? /* @__PURE__ */ l.jsxs("div", { className: "flex gap-x-4 gap-y-0 flex-wrap items-start w-full pb-3", children: [
-    a ? /* @__PURE__ */ l.jsxs("div", { className: "grow shrink-0 min-w-[240px]", style: {
-      width: a.width || "calc(25% - 0.75rem)"
-    }, children: [
-      /* @__PURE__ */ l.jsx(Ve, { marginBottom: "xs", size: "sm", className: "text-primary-gray-700 dark:text-primary-gray-100", children: "Sort by" }),
-      /* @__PURE__ */ l.jsx(we, { options: a.options, isRtl: m === "he" || m === "ar", isSearchable: !0, filterOption: De(be), onChange: (t) => {
-        Ce(t || void 0);
-      }, variant: H, size: "sm", defaultValue: !a.defaultValue || a.options.findIndex((t) => t.label === a.defaultValue) === -1 ? a.options[0] : a.options[a.options.findIndex((t) => t.label === a.defaultValue)] })
-    ] }) : null,
-    ye?.map((t, W) => /* @__PURE__ */ l.jsxs("div", { className: "grow shrink-0 min-w-[240px]", style: {
-      width: t.width || "calc(25% - 0.75rem)"
-    }, children: [
-      /* @__PURE__ */ l.jsx(Ve, { marginBottom: "xs", size: "sm", className: "text-primary-gray-700 dark:text-primary-gray-100", children: t.label }),
-      /* @__PURE__ */ l.jsx(we, { options: t.availableValues, isClearable: t.clearable === void 0 ? !0 : t.clearable, isRtl: m === "he" || m === "ar", isSearchable: !0, variant: H, size: "sm", controlShouldRenderValue: !0, filterOption: De(be), onChange: (R) => {
-        ze((Oe) => Oe.map((ge) => ge.filter === t.filter ? {
-          ...ge,
-          value: R
-        } : ge));
-      }, defaultValue: t.defaultValue })
-    ] }, W))
-  ] }) : null;
-  let te;
-  e[34] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (te = /* @__PURE__ */ l.jsx(se, { size: "xl" }), e[34] = te) : te = e[34];
-  let T;
-  e[35] !== f || e[36] !== H ? (T = (f || []).length > 0 ? /* @__PURE__ */ l.jsx("div", { style: {
-    paddingTop: "1px"
-  }, children: /* @__PURE__ */ l.jsx(Ee, { placeholder: "Search...", onSearch: (t) => {
-    $e(t || "");
-  }, buttonVariant: "icon", inputVariant: H, showSearchButton: !1, inputSize: "sm" }) }) : null, e[35] = f, e[36] = H, e[37] = T) : T = e[37];
-  let ae;
-  e[38] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (ae = /* @__PURE__ */ l.jsx(se, { size: "xl" }), e[38] = ae) : ae = e[38];
-  let E;
-  e[39] !== ce || e[40] !== A || e[41] !== $ || e[42] !== ie || e[43] !== S || e[44] !== s || e[45] !== b || e[46] !== c || e[47] !== d || e[48] !== x || e[49] !== de || e[50] !== r || e[51] !== i ? (E = /* @__PURE__ */ l.jsx(Ke, { data: $, width: i, height: c, cardTemplate: S, cardMinWidth: ie, page: de, cardBackgroundColor: A, styles: r, classNames: s, noOfItemsInAPage: d, detailsOnClick: b, onSeriesMouseClick: x, allowDataDownloadOnDetail: ce }), e[39] = ce, e[40] = A, e[41] = $, e[42] = ie, e[43] = S, e[44] = s, e[45] = b, e[46] = c, e[47] = d, e[48] = x, e[49] = de, e[50] = r, e[51] = i, e[52] = E) : E = e[52];
-  let le;
-  e[53] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (le = /* @__PURE__ */ l.jsx(se, { size: "xl" }), e[53] = le) : le = e[53];
-  let P;
-  e[54] !== $ || e[55] !== d ? (P = d ? /* @__PURE__ */ l.jsx(Te, { total: $.length, defaultPage: 0, pageSize: d, onChange: ve }) : null, e[54] = $, e[55] = d, e[56] = P) : P = e[56];
-  let oe;
-  e[57] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (oe = /* @__PURE__ */ l.jsx(se, { size: "2xl" }), e[57] = oe) : oe = e[57];
-  let L;
-  e[58] !== s?.footnote || e[59] !== s?.source || e[60] !== p || e[61] !== g || e[62] !== r?.footnote || e[63] !== r?.source || e[64] !== i ? (L = g || p ? /* @__PURE__ */ l.jsx(Ae, { styles: {
-    footnote: r?.footnote,
-    source: r?.source
-  }, classNames: {
-    footnote: s?.footnote,
-    source: s?.source
-  }, sources: g, footNote: p, width: i }) : null, e[58] = s?.footnote, e[59] = s?.source, e[60] = p, e[61] = g, e[62] = r?.footnote, e[63] = r?.source, e[64] = i, e[65] = L) : L = e[65];
-  let re;
-  return e[66] !== fe || e[67] !== y || e[68] !== ne || e[69] !== k || e[70] !== c || e[71] !== m || e[72] !== C || e[73] !== me || e[74] !== pe || e[75] !== F || e[76] !== he || e[77] !== T || e[78] !== E || e[79] !== P || e[80] !== L || e[81] !== V || e[82] !== i ? (re = /* @__PURE__ */ l.jsxs(fe, { className: me, style: pe, id: k, ref: Me, "aria-label": y, backgroundColor: ne, theme: V, language: m, width: i, height: c, padding: C, children: [
-    F,
-    he,
-    te,
-    T,
-    ae,
-    E,
-    le,
-    P,
-    oe,
-    L
-  ] }), e[66] = fe, e[67] = y, e[68] = ne, e[69] = k, e[70] = c, e[71] = m, e[72] = C, e[73] = me, e[74] = pe, e[75] = F, e[76] = he, e[77] = T, e[78] = E, e[79] = P, e[80] = L, e[81] = V, e[82] = i, e[83] = re) : re = e[83], re;
-}
-function Je(n) {
-  return n.value;
-}
-function Xe(n) {
-  return {
-    filter: n.column,
-    value: ke(n.defaultValue)
-  };
-}
-function Ye(n) {
-  return {
-    value: n,
-    label: n
-  };
-}
-export {
-  vt as DataCards
-};
-//# sourceMappingURL=DataCards.js.map
+import { t as e } from "./DataCards-BOpanQhW.js";
+export { e as DataCards };

package/dist/DataTable.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./compiler-runtime-oPPev21o.cjs"),ht=require("./index-DQA8q5sC.cjs"),g=require("react"),It=require("./index-CyZ1lmi_.cjs"),O=require("@undp/design-system-react/Typography"),Et=require("./index-Cno4Q0YE.cjs"),M=require("./numberFormattingFunction-u2iNHL_c.cjs"),Rt=require("./GraphFooter.cjs"),vt=require("./GraphHeader.cjs"),$=require("./index-DbSnila_.cjs"),nt=require("./getTextColorBasedOnBgColor-nqY-bsM_.cjs"),kt=require("./GraphContainer-gaG9TSy4.cjs"),yt=c=>c.map(h=>h||1).reduce((h,j)=>h+j,0);function wt(c){const t=r.compilerRuntimeExports.c(76),{width:m,height:h,graphTitle:j,sources:D,graphDescription:B,footNote:F,graphID:X,data:d,columnData:n,onSeriesMouseClick:b,language:at,theme:ct,ariaLabel:H,backgroundColor:lt,padding:V,resetSelectionOnDoubleClick:pt,styles:l,classNames:p,minWidth:q,naLabel:ut}=c,Y=at===void 0?"en":at,J=ct===void 0?"light":ct,K=lt===void 0?!1:lt,Q=pt===void 0?!0:pt,C=ut===void 0?"NA":ut,jt=g.useRef(null),[x,mt]=g.useState(void 0),[T,dt]=g.useState(void 0),[f,xt]=g.useState("asc"),[y,ft]=g.useState(void 0);let P;t[0]===Symbol.for("react.memo_cache_sentinel")?(P={},t[0]=P):P=t[0];const[U,bt]=g.useState(P);let z;t[1]!==n?(z=n.filter($t).map(Ot),t[1]=n,t[2]=z):z=t[2];const[a,gt]=g.useState(z),[_,Ct]=g.useState(d);let W;t[3]===Symbol.for("react.memo_cache_sentinel")?(W=o=>{Ct(o)},t[3]=W):W=t[3];const G=g.useEffectEvent(W);let Z;t[4]!==n||t[5]!==x||t[6]!==d||t[7]!==a||t[8]!==G||t[9]!==f?(Z=()=>{const o=[];d.forEach(u=>{let e=!0;a.forEach(i=>{if(typeof u[i.id]!="object"&&typeof u[i.id]!="function"&&typeof u[i.id]!="symbol")if(n[n.findIndex(s=>s.columnId===i.id)].separator){const s=u[i.id].split(n[n.findIndex(it=>it.columnId===i.id)].separator);It.intersection(s,i.option).length===0&&(e=!1)}else i.option.indexOf(u[i.id])===-1&&(e=!1)}),e&&o.push(u)}),G(x&&d?Et.orderBy(o,[x],[f]):o)},t[4]=n,t[5]=x,t[6]=d,t[7]=a,t[8]=G,t[9]=f,t[10]=Z):Z=t[10];let A;t[11]!==n||t[12]!==x||t[13]!==d||t[14]!==a||t[15]!==f?(A=[x,f,d,a,n],t[11]=n,t[12]=x,t[13]=d,t[14]=a,t[15]=f,t[16]=A):A=t[16],g.useEffect(Z,A);const tt=p?.graphContainer,et=l?.graphContainer;let I;t[17]!==p?.description||t[18]!==p?.title||t[19]!==B||t[20]!==j||t[21]!==l?.description||t[22]!==l?.title||t[23]!==m?(I=j||B?r.jsxRuntimeExports.jsx(vt.GraphHeader,{styles:{title:l?.title,description:l?.description},classNames:{title:p?.title,description:p?.description},graphTitle:j,graphDescription:B,width:m}):null,t[17]=p?.description,t[18]=p?.title,t[19]=B,t[20]=j,t[21]=l?.description,t[22]=l?.title,t[23]=m,t[24]=I):I=t[24];const ot=m?`${m}px`:"100%",rt=h?`${h}px`:"auto";let E;t[25]!==ot||t[26]!==rt?(E={width:ot,height:rt},t[25]=ot,t[26]=rt,t[27]=E):E=t[27];let R;t[28]!==q?(R=q?{minWidth:q}:void 0,t[28]=q,t[29]=R):R=t[29];let v;t[30]!==n||t[31]!==x||t[32]!==d||t[33]!==a||t[34]!==T||t[35]!==C||t[36]!==b||t[37]!==y||t[38]!==Q||t[39]!==f||t[40]!==_?(v=d?r.jsxRuntimeExports.jsxs("table",{className:"w-full",style:{borderCollapse:"collapse"},children:[r.jsxRuntimeExports.jsx("thead",{className:"text-left bg-primary-gray-300 dark:bg-primary-gray-550",children:r.jsxRuntimeExports.jsx("tr",{children:n?.map((o,u)=>r.jsxRuntimeExports.jsx("th",{className:"text-primary-gray-700 dark:text-primary-gray-100 text-sm",style:{width:`calc(${100*(o.columnWidth||1)/yt(n.map(St))}%`},children:r.jsxRuntimeExports.jsxs("div",{className:"flex gap-2 justify-between items-center p-4",children:[r.jsxRuntimeExports.jsx(O.P,{size:"sm",marginBottom:"none",className:`w-fit grow text-${o.align||"left"} font-bold`,children:o.columnTitle||o.columnId}),o.sortable?r.jsxRuntimeExports.jsx("button",{type:"button",className:"bg-transparent cursor-pointer p-0 m-0 border-0",onClick:()=>{x===o.columnId?(f==="asc"&&xt("desc"),f==="desc"&&mt(void 0)):(mt(o.columnId),xt("asc"))},children:x===o.columnId?f==="asc"?r.jsxRuntimeExports.jsx($.SortingIconAscending,{}):r.jsxRuntimeExports.jsx($.SortingIconDescending,{}):r.jsxRuntimeExports.jsx($.SortingIcon,{})}):null,o.filterOptions&&o.filterOptions.length?r.jsxRuntimeExports.jsx("button",{type:"button",className:"bg-transparent cursor-pointer m-0 p-0 border-0",onClick:e=>{if(y===o.columnId)ft(void 0);else if(e.currentTarget){ft(o.columnId);const i=e.currentTarget.getBoundingClientRect();bt({top:i.bottom+window.scrollY,left:i.left+window.scrollX-160<0?i.left+window.scrollX:i.left+window.scrollX-160,width:"10rem"})}},children:a[a.findIndex(e=>e.id===o.columnId)].option.length===o.filterOptions?.length?r.jsxRuntimeExports.jsx($.FilterIcon,{}):r.jsxRuntimeExports.jsx($.FilterIconApplied,{})}):null]})},u))})}),r.jsxRuntimeExports.jsx("tbody",{children:_?.map((o,u)=>r.jsxRuntimeExports.jsx("tr",{className:`cursor-${b?"pointer":"auto"} border-b border-b-primary-gray-400 dark:border-b-primary-gray-500 ${ht.isEqual(T,o)?"bg-primary-gray-200 dark:bg-primary-gray-600":"bg-transparent"}`,style:o.rowStyle,onClick:()=>{b&&(ht.isEqual(T,o)&&Q?(dt(void 0),b(void 0)):(dt(o),b(o)))},children:n.map((e,i)=>r.jsxRuntimeExports.jsx("td",{className:`text-primary-gray-700 dark:text-primary-gray-100 text-sm text-${e.align||"left"}`,style:{width:`calc(${100*(o.columnWidth||1)/yt(n.map(Nt))}%`},children:r.jsxRuntimeExports.jsx("div",{className:`text-primary-gray-700 dark:text-primary-gray-100 flex p-4 ${e.align==="right"?"justify-end":e.align==="center"?"justify-center":"justify-start"}`,children:typeof o[e.columnId]=="number"?r.jsxRuntimeExports.jsx(O.P,{marginBottom:"none",size:"sm",className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${e.chip?"grow-0 rounded-sm p-2":"grow rounded-none p-0"} text-${e.align||"left"} ${e.chip?e.chipColors?"":"bg-primary-gray-300 dark:bg-primary-gray-500":"bg-transparent"}`,style:{...e.chip&&e.chipColors?{backgroundColor:e.chipColors[e.chipColors.findIndex(s=>s.value===o[e.chipColumnId||e.columnId])].color,color:nt.getTextColorBasedOnBgColor(e.chipColors[e.chipColors.findIndex(s=>s.value===o[e.chipColumnId||e.columnId])].color)}:{}},children:M.numberFormattingFunction(o[e.columnId],C,e.precision,e.prefix,e.suffix,e.locale,e.padZeros)}):typeof o[e.columnId]=="string"?e.separator?r.jsxRuntimeExports.jsx("div",{className:"text-primary-gray-700 dark:text-primary-gray-100 flex flex-wrap gap-2",children:o[e.columnId].split(e.separator).map((s,it)=>r.jsxRuntimeExports.jsx(O.P,{marginBottom:"none",size:"sm",className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${e.chip?"grow-0 rounded-sm p-2":"grow rounded-none p-0"} text-${e.align||"left"} ${e.chip?e.chipColors?"":"bg-primary-gray-300 dark:bg-primary-gray-500":"bg-transparent"}`,style:{...e.chip&&e.chipColors?{backgroundColor:e.chipColors[e.chipColors.findIndex(st=>st.value===(e.chipColumnId?o[e.chipColumnId]:s))].color,color:nt.getTextColorBasedOnBgColor(e.chipColors[e.chipColors.findIndex(st=>st.value===(e.chipColumnId?o[e.chipColumnId]:s))].color)}:{}},children:M.numberFormattingFunction(s,C,e.precision,e.prefix,e.suffix,e.locale,e.padZeros)},it))}):r.jsxRuntimeExports.jsx(O.P,{marginBottom:"none",size:"sm",className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${e.chip?"grow-0 rounded-sm p-2":"grow rounded-none p-0"} text-${e.align||"left"} ${e.chip?e.chipColors?"":"bg-primary-gray-300 dark:bg-primary-gray-500":"bg-transparent"}`,style:{...e.chip&&e.chipColors?{backgroundColor:e.chipColors[e.chipColors.findIndex(s=>s.value===o[e.chipColumnId||e.columnId])].color,color:nt.getTextColorBasedOnBgColor(e.chipColors[e.chipColors.findIndex(s=>s.value===o[e.chipColumnId||e.columnId])].color)}:{}},children:M.numberFormattingFunction(o[e.columnId],C,e.precision,e.prefix,e.suffix,e.locale,e.padZeros)}):r.jsxRuntimeExports.jsx("div",{children:M.numberFormattingFunction(o[e.columnId],C,e.precision,e.prefix,e.suffix,e.locale,e.padZeros)})})},i))},u))})]}):null,t[30]=n,t[31]=x,t[32]=d,t[33]=a,t[34]=T,t[35]=C,t[36]=b,t[37]=y,t[38]=Q,t[39]=f,t[40]=_,t[41]=v):v=t[41];let k;t[42]!==R||t[43]!==v?(k=r.jsxRuntimeExports.jsx("div",{style:R,children:v}),t[42]=R,t[43]=v,t[44]=k):k=t[44];let w;t[45]!==E||t[46]!==k?(w=r.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center",children:r.jsxRuntimeExports.jsx("div",{className:"undp-scrollbar",style:E,children:k})}),t[45]=E,t[46]=k,t[47]=w):w=t[47];let N;t[48]!==p?.footnote||t[49]!==p?.source||t[50]!==F||t[51]!==D||t[52]!==l?.footnote||t[53]!==l?.source||t[54]!==m?(N=D||F?r.jsxRuntimeExports.jsx(Rt.GraphFooter,{styles:{footnote:l?.footnote,source:l?.source},classNames:{footnote:p?.footnote,source:p?.source},sources:D,footNote:F,width:m}):null,t[48]=p?.footnote,t[49]=p?.source,t[50]=F,t[51]=D,t[52]=l?.footnote,t[53]=l?.source,t[54]=m,t[55]=N):N=t[55];let S;t[56]!==n||t[57]!==a||t[58]!==U||t[59]!==y?(S=y&&r.jsxRuntimeExports.jsx("div",{style:U,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:r.jsxRuntimeExports.jsxs("div",{className:"max-w-60",children:[r.jsxRuntimeExports.jsx(O.P,{size:"sm",marginBottom:"2xs",className:"font-bold",children:"Filter data by"}),r.jsxRuntimeExports.jsx("div",{className:"flex flex-col gap-2",children:n[n.findIndex(o=>o.columnId===y)].filterOptions?.map((o,u)=>r.jsxRuntimeExports.jsx("div",{children:r.jsxRuntimeExports.jsxs("label",{className:"undp-viz-label",children:[r.jsxRuntimeExports.jsx("input",{type:"checkbox",className:"undp-viz-checkbox",checked:a[a.findIndex(e=>e.id===y)].option.indexOf(o)!==-1,onChange:()=>{const e=a.findIndex(s=>s.id===y),i=[...a[e].option];if(i.indexOf(o)!==-1){i.splice(i.indexOf(o),1);const s=[...a];s[e].option=i,gt(s)}else{i.push(o);const s=[...a];s[e].option=i,gt(s)}}}),o]},u)},u))})]})}),t[56]=n,t[57]=a,t[58]=U,t[59]=y,t[60]=S):S=t[60];let L;return t[61]!==H||t[62]!==K||t[63]!==X||t[64]!==h||t[65]!==Y||t[66]!==V||t[67]!==tt||t[68]!==et||t[69]!==I||t[70]!==w||t[71]!==N||t[72]!==S||t[73]!==J||t[74]!==m?(L=r.jsxRuntimeExports.jsxs(kt.GraphContainer,{className:tt,style:et,id:X,ref:jt,"aria-label":H,backgroundColor:K,theme:J,language:Y,width:m,height:h,padding:V,children:[I,w,N,S]}),t[61]=H,t[62]=K,t[63]=X,t[64]=h,t[65]=Y,t[66]=V,t[67]=tt,t[68]=et,t[69]=I,t[70]=w,t[71]=N,t[72]=S,t[73]=J,t[74]=m,t[75]=L):L=t[75],L}function Nt(c){return c.columnWidth||1}function St(c){return c.columnWidth||1}function Ot(c){return{id:c.columnId,option:c.filterOptions}}function $t(c){return c.filterOptions&&c.filterOptions.length>0}exports.DataTable=wt;
-//# sourceMappingURL=DataTable.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./chunk-gGpyby2o.cjs`),t=require(`./jsx-runtime-Cd1vCQjn.cjs`),n=require(`./Icons-DXw7FqJ_.cjs`),r=require(`./lodash.intersection-BDR4j58n.cjs`),i=require(`./GraphFooter.cjs`),a=require(`./GraphHeader.cjs`),o=require(`./GraphContainer-7xAPK4Tb.cjs`),s=require(`./lodash.orderby-Us2PHq2D.cjs`),c=require(`./fast-deep-equal-DN3ilkVq.cjs`),l=require(`./numberFormattingFunction-Caf5NyIo.cjs`),u=require(`./getTextColorBasedOnBgColor-B0B-azeJ.cjs`);let d=require(`react`),f=require(`@undp/design-system-react/Typography`);var p=e.a(c.t(),1),m=e.a(r.t(),1),h=e.a(s.t(),1),g=t.t(),_=e=>e.map(e=>e||1).reduce((e,t)=>e+t,0);function v(e){let{width:t,height:r,graphTitle:s,sources:c,graphDescription:v,footNote:y,graphID:b,data:x,columnData:S,onSeriesMouseClick:C,language:w=`en`,theme:T=`light`,ariaLabel:E,backgroundColor:D=!1,padding:O,resetSelectionOnDoubleClick:k=!0,styles:A,classNames:j,minWidth:M,naLabel:N=`NA`}=e,P=(0,d.useRef)(null),[F,I]=(0,d.useState)(void 0),[L,R]=(0,d.useState)(void 0),[z,B]=(0,d.useState)(`asc`),[V,H]=(0,d.useState)(void 0),[U,W]=(0,d.useState)({}),[G,K]=(0,d.useState)(S.filter(e=>e.filterOptions&&e.filterOptions.length>0).map(e=>({id:e.columnId,option:e.filterOptions}))),[q,J]=(0,d.useState)(x),Y=(0,d.useEffectEvent)(e=>{J(e)});return(0,d.useEffect)(()=>{let e=[];x.forEach(t=>{let n=!0;G.forEach(e=>{typeof t[e.id]!=`object`&&typeof t[e.id]!=`function`&&typeof t[e.id]!=`symbol`&&(S[S.findIndex(t=>t.columnId===e.id)].separator?(0,m.default)(t[e.id].split(S[S.findIndex(t=>t.columnId===e.id)].separator),e.option).length===0&&(n=!1):e.option.indexOf(t[e.id])===-1&&(n=!1))}),n&&e.push(t)}),Y(F&&x?(0,h.default)(e,[F],[z]):e)},[F,z,x,G,S]),(0,g.jsxs)(o.n,{className:j?.graphContainer,style:A?.graphContainer,id:b,ref:P,"aria-label":E,backgroundColor:D,theme:T,language:w,width:t,height:r,padding:O,children:[s||v?(0,g.jsx)(a.GraphHeader,{styles:{title:A?.title,description:A?.description},classNames:{title:j?.title,description:j?.description},graphTitle:s,graphDescription:v,width:t}):null,(0,g.jsx)(`div`,{className:`grow flex flex-col justify-center`,children:(0,g.jsx)(`div`,{className:`undp-scrollbar`,style:{width:t?`${t}px`:`100%`,height:r?`${r}px`:`auto`},children:(0,g.jsx)(`div`,{style:M?{minWidth:M}:void 0,children:x?(0,g.jsxs)(`table`,{className:`w-full`,style:{borderCollapse:`collapse`},children:[(0,g.jsx)(`thead`,{className:`text-left bg-primary-gray-300 dark:bg-primary-gray-550`,children:(0,g.jsx)(`tr`,{children:S?.map(e=>(0,g.jsx)(`th`,{className:`text-primary-gray-700 dark:text-primary-gray-100 text-sm`,style:{width:`calc(${100*(e.columnWidth||1)/_(S.map(e=>e.columnWidth||1))}%`},children:(0,g.jsxs)(`div`,{className:`flex gap-2 justify-between items-center p-4`,children:[(0,g.jsx)(f.P,{size:`sm`,marginBottom:`none`,className:`w-fit grow text-${e.align||`left`} font-bold`,children:e.columnTitle||e.columnId}),e.sortable?(0,g.jsx)(`button`,{type:`button`,className:`bg-transparent cursor-pointer p-0 m-0 border-0`,onClick:()=>{F===e.columnId?(z===`asc`&&B(`desc`),z===`desc`&&I(void 0)):(I(e.columnId),B(`asc`))},children:F===e.columnId?z===`asc`?(0,g.jsx)(n.f,{}):(0,g.jsx)(n.p,{}):(0,g.jsx)(n.d,{})}):null,e.filterOptions?.length?(0,g.jsx)(`button`,{type:`button`,className:`bg-transparent cursor-pointer m-0 p-0 border-0`,onClick:t=>{if(V===e.columnId)H(void 0);else if(t.currentTarget){H(e.columnId);let n=t.currentTarget.getBoundingClientRect();W({top:n.bottom+window.scrollY,left:n.left+window.scrollX-160<0?n.left+window.scrollX:n.left+window.scrollX-160,width:`10rem`})}},children:G[G.findIndex(t=>t.id===e.columnId)].option.length===e.filterOptions?.length?(0,g.jsx)(n.o,{}):(0,g.jsx)(n.s,{})}):null]})},e.columnId))})}),(0,g.jsx)(`tbody`,{children:q?.map((e,t)=>(0,g.jsx)(`tr`,{className:`cursor-${C?`pointer`:`auto`} border-b border-b-primary-gray-400 dark:border-b-primary-gray-500 ${(0,p.default)(L,e)?`bg-primary-gray-200 dark:bg-primary-gray-600`:`bg-transparent`}`,style:e.rowStyle,onClick:()=>{C&&((0,p.default)(L,e)&&k?(R(void 0),C(void 0)):(R(e),C(e)))},children:S.map(t=>(0,g.jsx)(`td`,{className:`text-primary-gray-700 dark:text-primary-gray-100 text-sm text-${t.align||`left`}`,style:{width:`calc(${100*(e.columnWidth||1)/_(S.map(e=>e.columnWidth||1))}%`},children:(0,g.jsx)(`div`,{className:`text-primary-gray-700 dark:text-primary-gray-100 flex p-4 ${t.align===`right`?`justify-end`:t.align===`center`?`justify-center`:`justify-start`}`,children:typeof e[t.columnId]==`number`?(0,g.jsx)(f.P,{marginBottom:`none`,size:`sm`,className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${t.chip?`grow-0 rounded-sm p-2`:`grow rounded-none p-0`} text-${t.align||`left`} ${t.chip?t.chipColors?``:`bg-primary-gray-300 dark:bg-primary-gray-500`:`bg-transparent`}`,style:{...t.chip&&t.chipColors?{backgroundColor:t.chipColors[t.chipColors.findIndex(n=>n.value===e[t.chipColumnId||t.columnId])].color,color:u.t(t.chipColors[t.chipColors.findIndex(n=>n.value===e[t.chipColumnId||t.columnId])].color)}:{}},children:l.t(e[t.columnId],N,t.precision,t.prefix,t.suffix,t.locale,t.padZeros)}):typeof e[t.columnId]==`string`?t.separator?(0,g.jsx)(`div`,{className:`text-primary-gray-700 dark:text-primary-gray-100 flex flex-wrap gap-2`,children:e[t.columnId].split(t.separator).map(n=>(0,g.jsx)(f.P,{marginBottom:`none`,size:`sm`,className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${t.chip?`grow-0 rounded-sm p-2`:`grow rounded-none p-0`} text-${t.align||`left`} ${t.chip?t.chipColors?``:`bg-primary-gray-300 dark:bg-primary-gray-500`:`bg-transparent`}`,style:{...t.chip&&t.chipColors?{backgroundColor:t.chipColors[t.chipColors.findIndex(r=>r.value===(t.chipColumnId?e[t.chipColumnId]:n))].color,color:u.t(t.chipColors[t.chipColors.findIndex(r=>r.value===(t.chipColumnId?e[t.chipColumnId]:n))].color)}:{}},children:l.t(n,N,t.precision,t.prefix,t.suffix,t.locale,t.padZeros)},n))}):(0,g.jsx)(f.P,{marginBottom:`none`,size:`sm`,className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${t.chip?`grow-0 rounded-sm p-2`:`grow rounded-none p-0`} text-${t.align||`left`} ${t.chip?t.chipColors?``:`bg-primary-gray-300 dark:bg-primary-gray-500`:`bg-transparent`}`,style:{...t.chip&&t.chipColors?{backgroundColor:t.chipColors[t.chipColors.findIndex(n=>n.value===e[t.chipColumnId||t.columnId])].color,color:u.t(t.chipColors[t.chipColors.findIndex(n=>n.value===e[t.chipColumnId||t.columnId])].color)}:{}},children:l.t(e[t.columnId],N,t.precision,t.prefix,t.suffix,t.locale,t.padZeros)}):(0,g.jsx)(`div`,{children:l.t(e[t.columnId],N,t.precision,t.prefix,t.suffix,t.locale,t.padZeros)})})},t.columnId))},t))})]}):null})})}),c||y?(0,g.jsx)(i.GraphFooter,{styles:{footnote:A?.footnote,source:A?.source},classNames:{footnote:j?.footnote,source:j?.source},sources:c,footNote:y,width:t}):null,V&&(0,g.jsx)(`div`,{style:U,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:(0,g.jsxs)(`div`,{className:`max-w-60`,children:[(0,g.jsx)(f.P,{size:`sm`,marginBottom:`2xs`,className:`font-bold`,children:`Filter data by`}),(0,g.jsx)(`div`,{className:`flex flex-col gap-2`,children:S[S.findIndex(e=>e.columnId===V)].filterOptions?.map(e=>(0,g.jsx)(`div`,{children:(0,g.jsxs)(`label`,{className:`undp-viz-label`,children:[(0,g.jsx)(`input`,{type:`checkbox`,className:`undp-viz-checkbox`,checked:G[G.findIndex(e=>e.id===V)].option.indexOf(e)!==-1,onChange:()=>{let t=G.findIndex(e=>e.id===V),n=[...G[t].option];if(n.indexOf(e)!==-1){n.splice(n.indexOf(e),1);let r=[...G];r[t].option=n,K(r)}else{n.push(e);let r=[...G];r[t].option=n,K(r)}}}),e]})},e))})]})})]})}exports.DataTable=v;
+//# sourceMappingURL=DataTable.cjs.map

package/dist/DataTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.cjs","sources":["../src/Components/Graphs/DataTable/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport isEqual from 'fast-deep-equal';\r\nimport { useEffect, useEffectEvent, useRef, useState } from 'react';\r\nimport intersection from 'lodash.intersection';\r\nimport { P } from '@undp/design-system-react/Typography';\r\nimport orderBy from 'lodash.orderby';\r\n\r\nimport {\r\n  DataTableColumnDataType,\r\n  Languages,\r\n  SourcesDataType,\r\n  StyleObject,\r\n  ClassNameObject,\r\n} from '@/Types';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport {\r\n  FilterIcon,\r\n  FilterIconApplied,\r\n  SortingIcon,\r\n  SortingIconAscending,\r\n  SortingIconDescending,\r\n} from '@/Components/Icons';\r\nimport { getTextColorBasedOnBgColor } from '@/Utils/getTextColorBasedOnBgColor';\r\nimport { GraphContainer } from '@/Components/Elements/GraphContainer';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects. If the data have a object for ket `rowStyle` then that is use to style the row of the table. */\r\n  data: object[];\r\n\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Minimum width of the table as string in px */\r\n  minWidth?: string;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n\r\n  // Graph Parameters\r\n  /** Column settings for each column shown in the table. */\r\n  columnData: DataTableColumnDataType[];\r\n  /** Defines how “NA” values should be displayed/labelled in the graph */\r\n  naLabel?: string;\r\n  /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */\r\n  resetSelectionOnDoubleClick?: boolean;\r\n\r\n  // Interactions and Callbacks\r\n  /** Callback for mouse click event */\r\n  onSeriesMouseClick?: (_d: any) => void;\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\nconst TotalWidth = (columns: (number | undefined)[]) => {\r\n  const columnWidth = columns.map(d => d || 1);\r\n  const sum = columnWidth.reduce((acc, cur) => acc + cur, 0);\r\n  return sum;\r\n};\r\n\r\nexport function DataTable(props: Props) {\r\n  const {\r\n    width,\r\n    height,\r\n    graphTitle,\r\n    sources,\r\n    graphDescription,\r\n    footNote,\r\n    graphID,\r\n    data,\r\n    columnData,\r\n    onSeriesMouseClick,\r\n    language = 'en',\r\n    theme = 'light',\r\n    ariaLabel,\r\n    backgroundColor = false,\r\n    padding,\r\n    resetSelectionOnDoubleClick = true,\r\n    styles,\r\n    classNames,\r\n    minWidth,\r\n    naLabel = 'NA',\r\n  } = props;\r\n  const graphParentDiv = useRef<HTMLDivElement>(null);\r\n  const [columnSortBy, setColumnSortBy] = useState<string | undefined>(undefined);\r\n\r\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\r\n  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');\r\n  const [popupVisible, setPopupVisible] = useState<string | undefined>(undefined);\r\n  const [popupStyle, setPopupStyle] = useState({});\r\n  const [filterOption, setFilterOption] = useState(\r\n    columnData\r\n      .filter(d => d.filterOptions && d.filterOptions.length > 0)\r\n      .map(d => ({ id: d.columnId, option: d.filterOptions as string[] })),\r\n  );\r\n  const [sortedData, setSortedData] = useState(data);\r\n\r\n  const sortDataEvent = useEffectEvent((data: object[]) => {\r\n    setSortedData(data);\r\n  });\r\n\r\n  useEffect(() => {\r\n    const dataFiltered: any = [];\r\n\r\n    data.forEach((d: any) => {\r\n      let filter = true;\r\n      filterOption.forEach(el => {\r\n        if (\r\n          typeof d[el.id] !== 'object' &&\r\n          typeof d[el.id] !== 'function' &&\r\n          typeof d[el.id] !== 'symbol'\r\n        ) {\r\n          if (columnData[columnData.findIndex(cd => cd.columnId === el.id)].separator) {\r\n            const arr = d[el.id].split(\r\n              columnData[columnData.findIndex(cd => cd.columnId === el.id)].separator,\r\n            );\r\n            if (intersection(arr, el.option).length === 0) filter = false;\r\n          } else if (el.option.indexOf(d[el.id]) === -1) filter = false;\r\n        }\r\n      });\r\n      if (filter) dataFiltered.push(d);\r\n    });\r\n    if (columnSortBy && data) {\r\n      sortDataEvent(orderBy(dataFiltered, [columnSortBy], [sortDirection]));\r\n    } else {\r\n      sortDataEvent(dataFiltered);\r\n    }\r\n  }, [columnSortBy, sortDirection, data, filterOption, columnData]);\r\n\r\n  return (\r\n    <GraphContainer\r\n      className={classNames?.graphContainer}\r\n      style={styles?.graphContainer}\r\n      id={graphID}\r\n      ref={graphParentDiv}\r\n      aria-label={ariaLabel}\r\n      backgroundColor={backgroundColor}\r\n      theme={theme}\r\n      language={language}\r\n      width={width}\r\n      height={height}\r\n      padding={padding}\r\n    >\r\n      {graphTitle || graphDescription ? (\r\n        <GraphHeader\r\n          styles={{\r\n            title: styles?.title,\r\n            description: styles?.description,\r\n          }}\r\n          classNames={{\r\n            title: classNames?.title,\r\n            description: classNames?.description,\r\n          }}\r\n          graphTitle={graphTitle}\r\n          graphDescription={graphDescription}\r\n          width={width}\r\n        />\r\n      ) : null}\r\n      <div className='grow flex flex-col justify-center'>\r\n        <div\r\n          className='undp-scrollbar'\r\n          style={{\r\n            width: width ? `${width}px` : '100%',\r\n            height: height ? `${height}px` : 'auto',\r\n          }}\r\n        >\r\n          <div style={minWidth ? { minWidth } : undefined}>\r\n            {data ? (\r\n              <table className='w-full' style={{ borderCollapse: 'collapse' }}>\r\n                <thead className='text-left bg-primary-gray-300 dark:bg-primary-gray-550'>\r\n                  <tr>\r\n                    {columnData?.map((d, i) => (\r\n                      <th\r\n                        className='text-primary-gray-700 dark:text-primary-gray-100 text-sm'\r\n                        style={{\r\n                          width: `calc(${\r\n                            (100 * (d.columnWidth || 1)) /\r\n                            TotalWidth(columnData.map(cd => cd.columnWidth || 1))\r\n                          }%`,\r\n                        }}\r\n                        key={i}\r\n                      >\r\n                        <div className='flex gap-2 justify-between items-center p-4'>\r\n                          <P\r\n                            size='sm'\r\n                            marginBottom='none'\r\n                            className={`w-fit grow text-${d.align || 'left'} font-bold`}\r\n                          >\r\n                            {d.columnTitle || d.columnId}\r\n                          </P>\r\n                          {d.sortable ? (\r\n                            <button\r\n                              type='button'\r\n                              className='bg-transparent cursor-pointer p-0 m-0 border-0'\r\n                              onClick={() => {\r\n                                if (columnSortBy === d.columnId) {\r\n                                  if (sortDirection === 'asc') {\r\n                                    setSortDirection('desc');\r\n                                  }\r\n                                  if (sortDirection === 'desc') {\r\n                                    setColumnSortBy(undefined);\r\n                                  }\r\n                                } else {\r\n                                  setColumnSortBy(d.columnId);\r\n                                  setSortDirection('asc');\r\n                                }\r\n                              }}\r\n                            >\r\n                              {columnSortBy === d.columnId ? (\r\n                                sortDirection === 'asc' ? (\r\n                                  <SortingIconAscending />\r\n                                ) : (\r\n                                  <SortingIconDescending />\r\n                                )\r\n                              ) : (\r\n                                <SortingIcon />\r\n                              )}\r\n                            </button>\r\n                          ) : null}\r\n                          {d.filterOptions && d.filterOptions.length ? (\r\n                            <button\r\n                              type='button'\r\n                              className='bg-transparent cursor-pointer m-0 p-0 border-0'\r\n                              onClick={event => {\r\n                                if (popupVisible === d.columnId) {\r\n                                  setPopupVisible(undefined);\r\n                                } else if (event.currentTarget) {\r\n                                  setPopupVisible(d.columnId);\r\n                                  const rect = event.currentTarget.getBoundingClientRect();\r\n                                  setPopupStyle({\r\n                                    top: rect.bottom + window.scrollY,\r\n                                    left:\r\n                                      rect.left + window.scrollX - 160 < 0\r\n                                        ? rect.left + window.scrollX\r\n                                        : rect.left + window.scrollX - 160,\r\n                                    width: '10rem',\r\n                                  });\r\n                                }\r\n                              }}\r\n                            >\r\n                              {filterOption[filterOption.findIndex(el => el.id === d.columnId)]\r\n                                .option.length === d.filterOptions?.length ? (\r\n                                <FilterIcon />\r\n                              ) : (\r\n                                <FilterIconApplied />\r\n                              )}\r\n                            </button>\r\n                          ) : null}\r\n                        </div>\r\n                      </th>\r\n                    ))}\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  {sortedData?.map((d: any, i: number) => (\r\n                    <tr\r\n                      key={i}\r\n                      className={`cursor-${\r\n                        onSeriesMouseClick ? 'pointer' : 'auto'\r\n                      } border-b border-b-primary-gray-400 dark:border-b-primary-gray-500 ${\r\n                        isEqual(mouseClickData, d)\r\n                          ? 'bg-primary-gray-200 dark:bg-primary-gray-600'\r\n                          : 'bg-transparent'\r\n                      }`}\r\n                      style={d.rowStyle}\r\n                      onClick={() => {\r\n                        if (onSeriesMouseClick) {\r\n                          if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\r\n                            setMouseClickData(undefined);\r\n                            onSeriesMouseClick(undefined);\r\n                          } else {\r\n                            setMouseClickData(d);\r\n                            onSeriesMouseClick(d);\r\n                          }\r\n                        }\r\n                      }}\r\n                    >\r\n                      {columnData.map((el, j) => (\r\n                        <td\r\n                          key={j}\r\n                          className={`text-primary-gray-700 dark:text-primary-gray-100 text-sm text-${\r\n                            el.align || 'left'\r\n                          }`}\r\n                          style={{\r\n                            width: `calc(${\r\n                              (100 * (d.columnWidth || 1)) /\r\n                              TotalWidth(columnData.map(cd => cd.columnWidth || 1))\r\n                            }%`,\r\n                          }}\r\n                        >\r\n                          <div\r\n                            className={`text-primary-gray-700 dark:text-primary-gray-100 flex p-4 ${\r\n                              el.align === 'right'\r\n                                ? 'justify-end'\r\n                                : el.align === 'center'\r\n                                  ? 'justify-center'\r\n                                  : 'justify-start'\r\n                            }`}\r\n                          >\r\n                            {typeof d[el.columnId] === 'number' ? (\r\n                              <P\r\n                                marginBottom='none'\r\n                                size='sm'\r\n                                className={`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${\r\n                                  el.chip ? 'grow-0 rounded-sm p-2' : 'grow rounded-none p-0'\r\n                                } text-${el.align || 'left'} ${\r\n                                  el.chip\r\n                                    ? !el.chipColors\r\n                                      ? 'bg-primary-gray-300 dark:bg-primary-gray-500'\r\n                                      : ''\r\n                                    : 'bg-transparent'\r\n                                }`}\r\n                                style={{\r\n                                  ...(el.chip && el.chipColors\r\n                                    ? {\r\n                                        backgroundColor:\r\n                                          el.chipColors[\r\n                                            el.chipColors.findIndex(\r\n                                              c => c.value === d[el.chipColumnId || el.columnId],\r\n                                            )\r\n                                          ].color,\r\n                                        color: getTextColorBasedOnBgColor(\r\n                                          el.chipColors[\r\n                                            el.chipColors.findIndex(\r\n                                              c => c.value === d[el.chipColumnId || el.columnId],\r\n                                            )\r\n                                          ].color,\r\n                                        ),\r\n                                      }\r\n                                    : {}),\r\n                                }}\r\n                              >\r\n                                {numberFormattingFunction(\r\n                                  d[el.columnId],\r\n                                  naLabel,\r\n                                  el.precision,\r\n                                  el.prefix,\r\n                                  el.suffix,\r\n                                  el.locale,\r\n                                  el.padZeros,\r\n                                )}\r\n                              </P>\r\n                            ) : typeof d[el.columnId] === 'string' ? (\r\n                              el.separator ? (\r\n                                <div className='text-primary-gray-700 dark:text-primary-gray-100 flex flex-wrap gap-2'>\r\n                                  {d[el.columnId]\r\n                                    .split(el.separator)\r\n                                    .map((element: string, indx: number) => (\r\n                                      <P\r\n                                        key={indx}\r\n                                        marginBottom='none'\r\n                                        size='sm'\r\n                                        className={`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${\r\n                                          el.chip\r\n                                            ? 'grow-0 rounded-sm p-2'\r\n                                            : 'grow rounded-none p-0'\r\n                                        } text-${el.align || 'left'} ${\r\n                                          el.chip\r\n                                            ? !el.chipColors\r\n                                              ? 'bg-primary-gray-300 dark:bg-primary-gray-500'\r\n                                              : ''\r\n                                            : 'bg-transparent'\r\n                                        }`}\r\n                                        style={{\r\n                                          ...(el.chip && el.chipColors\r\n                                            ? {\r\n                                                backgroundColor:\r\n                                                  el.chipColors[\r\n                                                    el.chipColors.findIndex(\r\n                                                      c =>\r\n                                                        c.value ===\r\n                                                        (el.chipColumnId\r\n                                                          ? d[el.chipColumnId]\r\n                                                          : element),\r\n                                                    )\r\n                                                  ].color,\r\n                                                color: getTextColorBasedOnBgColor(\r\n                                                  el.chipColors[\r\n                                                    el.chipColors.findIndex(\r\n                                                      c =>\r\n                                                        c.value ===\r\n                                                        (el.chipColumnId\r\n                                                          ? d[el.chipColumnId]\r\n                                                          : element),\r\n                                                    )\r\n                                                  ].color,\r\n                                                ),\r\n                                              }\r\n                                            : {}),\r\n                                        }}\r\n                                      >\r\n                                        {numberFormattingFunction(\r\n                                          element,\r\n                                          naLabel,\r\n                                          el.precision,\r\n                                          el.prefix,\r\n                                          el.suffix,\r\n                                          el.locale,\r\n                                          el.padZeros,\r\n                                        )}\r\n                                      </P>\r\n                                    ))}\r\n                                </div>\r\n                              ) : (\r\n                                <P\r\n                                  marginBottom='none'\r\n                                  size='sm'\r\n                                  className={`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${\r\n                                    el.chip ? 'grow-0 rounded-sm p-2' : 'grow rounded-none p-0'\r\n                                  } text-${el.align || 'left'} ${\r\n                                    el.chip\r\n                                      ? !el.chipColors\r\n                                        ? 'bg-primary-gray-300 dark:bg-primary-gray-500'\r\n                                        : ''\r\n                                      : 'bg-transparent'\r\n                                  }`}\r\n                                  style={{\r\n                                    ...(el.chip && el.chipColors\r\n                                      ? {\r\n                                          backgroundColor:\r\n                                            el.chipColors[\r\n                                              el.chipColors.findIndex(\r\n                                                c => c.value === d[el.chipColumnId || el.columnId],\r\n                                              )\r\n                                            ].color,\r\n                                          color: getTextColorBasedOnBgColor(\r\n                                            el.chipColors[\r\n                                              el.chipColors.findIndex(\r\n                                                c => c.value === d[el.chipColumnId || el.columnId],\r\n                                              )\r\n                                            ].color,\r\n                                          ),\r\n                                        }\r\n                                      : {}),\r\n                                  }}\r\n                                >\r\n                                  {numberFormattingFunction(\r\n                                    d[el.columnId],\r\n                                    naLabel,\r\n                                    el.precision,\r\n                                    el.prefix,\r\n                                    el.suffix,\r\n                                    el.locale,\r\n                                    el.padZeros,\r\n                                  )}\r\n                                </P>\r\n                              )\r\n                            ) : (\r\n                              <div>\r\n                                {numberFormattingFunction(\r\n                                  d[el.columnId],\r\n                                  naLabel,\r\n                                  el.precision,\r\n                                  el.prefix,\r\n                                  el.suffix,\r\n                                  el.locale,\r\n                                  el.padZeros,\r\n                                )}\r\n                              </div>\r\n                            )}\r\n                          </div>\r\n                        </td>\r\n                      ))}\r\n                    </tr>\r\n                  ))}\r\n                </tbody>\r\n              </table>\r\n            ) : null}\r\n          </div>\r\n        </div>\r\n      </div>\r\n      {sources || footNote ? (\r\n        <GraphFooter\r\n          styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n          classNames={{\r\n            footnote: classNames?.footnote,\r\n            source: classNames?.source,\r\n          }}\r\n          sources={sources}\r\n          footNote={footNote}\r\n          width={width}\r\n        />\r\n      ) : null}\r\n      {popupVisible && (\r\n        <div\r\n          style={popupStyle}\r\n          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'\r\n        >\r\n          <div className='max-w-60'>\r\n            <P size='sm' marginBottom='2xs' className='font-bold'>\r\n              Filter data by\r\n            </P>\r\n            <div className='flex flex-col gap-2'>\r\n              {columnData[\r\n                columnData.findIndex(d => d.columnId === popupVisible)\r\n              ].filterOptions?.map((el, i) => (\r\n                <div key={i}>\r\n                  <label key={i} className='undp-viz-label'>\r\n                    <input\r\n                      type='checkbox'\r\n                      className='undp-viz-checkbox'\r\n                      checked={\r\n                        filterOption[\r\n                          filterOption.findIndex(d => d.id === popupVisible)\r\n                        ].option.indexOf(el) !== -1\r\n                      }\r\n                      onChange={() => {\r\n                        const indx = filterOption.findIndex(d => d.id === popupVisible);\r\n                        const opt = [...filterOption[indx].option];\r\n                        if (opt.indexOf(el) !== -1) {\r\n                          opt.splice(opt.indexOf(el), 1);\r\n                          const filterOptionDuplicate = [...filterOption];\r\n                          filterOptionDuplicate[indx].option = opt;\r\n                          setFilterOption(filterOptionDuplicate);\r\n                        } else {\r\n                          opt.push(el);\r\n                          const filterOptionDuplicate = [...filterOption];\r\n                          filterOptionDuplicate[indx].option = opt;\r\n                          setFilterOption(filterOptionDuplicate);\r\n                        }\r\n                      }}\r\n                    />\r\n                    {el}\r\n                  </label>\r\n                </div>\r\n              ))}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </GraphContainer>\r\n  );\r\n}\r\n"],"names":["TotalWidth","columns","map","d","reduce","acc","cur","DataTable","props","$","_c","width","height","graphTitle","sources","graphDescription","footNote","graphID","data","columnData","onSeriesMouseClick","language","t0","theme","t1","ariaLabel","backgroundColor","t2","padding","resetSelectionOnDoubleClick","t3","styles","classNames","minWidth","naLabel","t4","undefined","graphParentDiv","useRef","columnSortBy","setColumnSortBy","useState","mouseClickData","setMouseClickData","sortDirection","setSortDirection","popupVisible","setPopupVisible","t5","Symbol","for","popupStyle","setPopupStyle","t6","filter","_temp","_temp2","filterOption","setFilterOption","sortedData","setSortedData","t7","data_0","sortDataEvent","useEffectEvent","t8","dataFiltered","forEach","d_1","el","id","findIndex","cd_0","cd","columnId","separator","arr","split","intersection","option","length","indexOf","push","orderBy","t9","useEffect","t10","graphContainer","t11","t12","description","title","jsx","GraphHeader","t13","t14","t15","t16","t17","jsxs","borderCollapse","d_2","i","columnWidth","_temp3","P","align","columnTitle","sortable","SortingIconAscending","SortingIconDescending","SortingIcon","filterOptions","event","currentTarget","rect","getBoundingClientRect","top","bottom","window","scrollY","left","scrollX","FilterIcon","FilterIconApplied","d_3","i_0","isEqual","rowStyle","el_1","j","_temp4","chip","chipColors","c","value","chipColumnId","color","getTextColorBasedOnBgColor","c_0","numberFormattingFunction","precision","prefix","suffix","locale","padZeros","element","indx","c_1","c_2","c_3","c_4","t18","t19","t20","footnote","source","GraphFooter","t21","d_4","el_2","i_1","d_5","indx_0","d_6","opt","splice","filterOptionDuplicate","filterOptionDuplicate_0","t22","GraphContainer","cd_2","cd_1","d_0"],"mappings":"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"}
+{"version":3,"file":"DataTable.cjs","names":[],"sources":["../src/Components/Graphs/DataTable/index.tsx"],"sourcesContent":["import { P } from '@undp/design-system-react/Typography';\nimport isEqual from 'fast-deep-equal';\nimport intersection from 'lodash.intersection';\nimport orderBy from 'lodash.orderby';\nimport { useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport {\n  FilterIcon,\n  FilterIconApplied,\n  SortingIcon,\n  SortingIconAscending,\n  SortingIconDescending,\n} from '@/Components/Icons';\nimport type {\n  ClassNameObject,\n  DataTableColumnDataType,\n  Languages,\n  SourcesDataType,\n  StyleObject,\n} from '@/Types';\nimport { getTextColorBasedOnBgColor } from '@/Utils/getTextColorBasedOnBgColor';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  // Data\n  /** Array of data objects. If the data have a object for ket `rowStyle` then that is use to style the row of the table. */\n  data: object[];\n\n  // Titles, Labels, and Sources\n  /** Title of the graph */\n  graphTitle?: string | React.ReactNode;\n  /** Description of the graph */\n  graphDescription?: string | React.ReactNode;\n  /** Footnote for the graph */\n  footNote?: string | React.ReactNode;\n  /** Source data for the graph */\n  sources?: SourcesDataType[];\n  /** Accessibility label */\n  ariaLabel?: string;\n\n  // Colors and Styling\n  /** Background color of the graph */\n  backgroundColor?: string | boolean;\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\n  styles?: StyleObject;\n  /** Custom class names */\n  classNames?: ClassNameObject;\n\n  // Size and Spacing\n  /** Width of the graph */\n  width?: number;\n  /** Minimum width of the table as string in px */\n  minWidth?: string;\n  /** Height of the graph */\n  height?: number;\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\n  padding?: string;\n\n  // Graph Parameters\n  /** Column settings for each column shown in the table. */\n  columnData: DataTableColumnDataType[];\n  /** Defines how “NA” values should be displayed/labelled in the graph */\n  naLabel?: string;\n  /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */\n  resetSelectionOnDoubleClick?: boolean;\n\n  // Interactions and Callbacks\n  /** Callback for mouse click event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n\n  // Configuration and Options\n  /** Language setting  */\n  language?: Languages;\n  /** Color theme */\n  theme?: 'light' | 'dark';\n  /** Unique ID for the graph */\n  graphID?: string;\n}\n\nconst TotalWidth = (columns: (number | undefined)[]) => {\n  const columnWidth = columns.map((d) => d || 1);\n  const sum = columnWidth.reduce((acc, cur) => acc + cur, 0);\n  return sum;\n};\n\nexport function DataTable(props: Props) {\n  const {\n    width,\n    height,\n    graphTitle,\n    sources,\n    graphDescription,\n    footNote,\n    graphID,\n    data,\n    columnData,\n    onSeriesMouseClick,\n    language = 'en',\n    theme = 'light',\n    ariaLabel,\n    backgroundColor = false,\n    padding,\n    resetSelectionOnDoubleClick = true,\n    styles,\n    classNames,\n    minWidth,\n    naLabel = 'NA',\n  } = props;\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n  const [columnSortBy, setColumnSortBy] = useState<string | undefined>(undefined);\n\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\n  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');\n  const [popupVisible, setPopupVisible] = useState<string | undefined>(undefined);\n  const [popupStyle, setPopupStyle] = useState({});\n  const [filterOption, setFilterOption] = useState(\n    columnData\n      .filter((d) => d.filterOptions && d.filterOptions.length > 0)\n      .map((d) => ({ id: d.columnId, option: d.filterOptions as string[] })),\n  );\n  const [sortedData, setSortedData] = useState(data);\n\n  const sortDataEvent = useEffectEvent((data: object[]) => {\n    setSortedData(data);\n  });\n\n  useEffect(() => {\n    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n    const dataFiltered: any = [];\n\n    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n    data.forEach((d: any) => {\n      let filter = true;\n      filterOption.forEach((el) => {\n        if (\n          typeof d[el.id] !== 'object' &&\n          typeof d[el.id] !== 'function' &&\n          typeof d[el.id] !== 'symbol'\n        ) {\n          if (columnData[columnData.findIndex((cd) => cd.columnId === el.id)].separator) {\n            const arr = d[el.id].split(\n              columnData[columnData.findIndex((cd) => cd.columnId === el.id)].separator,\n            );\n            if (intersection(arr, el.option).length === 0) filter = false;\n          } else if (el.option.indexOf(d[el.id]) === -1) filter = false;\n        }\n      });\n      if (filter) dataFiltered.push(d);\n    });\n    if (columnSortBy && data) {\n      sortDataEvent(orderBy(dataFiltered, [columnSortBy], [sortDirection]));\n    } else {\n      sortDataEvent(dataFiltered);\n    }\n  }, [columnSortBy, sortDirection, data, filterOption, columnData]);\n\n  return (\n    <GraphContainer\n      className={classNames?.graphContainer}\n      style={styles?.graphContainer}\n      id={graphID}\n      ref={graphParentDiv}\n      aria-label={ariaLabel}\n      backgroundColor={backgroundColor}\n      theme={theme}\n      language={language}\n      width={width}\n      height={height}\n      padding={padding}\n    >\n      {graphTitle || graphDescription ? (\n        <GraphHeader\n          styles={{\n            title: styles?.title,\n            description: styles?.description,\n          }}\n          classNames={{\n            title: classNames?.title,\n            description: classNames?.description,\n          }}\n          graphTitle={graphTitle}\n          graphDescription={graphDescription}\n          width={width}\n        />\n      ) : null}\n      <div className='grow flex flex-col justify-center'>\n        <div\n          className='undp-scrollbar'\n          style={{\n            width: width ? `${width}px` : '100%',\n            height: height ? `${height}px` : 'auto',\n          }}\n        >\n          <div style={minWidth ? { minWidth } : undefined}>\n            {data ? (\n              <table className='w-full' style={{ borderCollapse: 'collapse' }}>\n                <thead className='text-left bg-primary-gray-300 dark:bg-primary-gray-550'>\n                  <tr>\n                    {columnData?.map((d) => (\n                      <th\n                        className='text-primary-gray-700 dark:text-primary-gray-100 text-sm'\n                        style={{\n                          width: `calc(${\n                            (100 * (d.columnWidth || 1)) /\n                            TotalWidth(columnData.map((cd) => cd.columnWidth || 1))\n                          }%`,\n                        }}\n                        key={d.columnId}\n                      >\n                        <div className='flex gap-2 justify-between items-center p-4'>\n                          <P\n                            size='sm'\n                            marginBottom='none'\n                            className={`w-fit grow text-${d.align || 'left'} font-bold`}\n                          >\n                            {d.columnTitle || d.columnId}\n                          </P>\n                          {d.sortable ? (\n                            <button\n                              type='button'\n                              className='bg-transparent cursor-pointer p-0 m-0 border-0'\n                              onClick={() => {\n                                if (columnSortBy === d.columnId) {\n                                  if (sortDirection === 'asc') {\n                                    setSortDirection('desc');\n                                  }\n                                  if (sortDirection === 'desc') {\n                                    setColumnSortBy(undefined);\n                                  }\n                                } else {\n                                  setColumnSortBy(d.columnId);\n                                  setSortDirection('asc');\n                                }\n                              }}\n                            >\n                              {columnSortBy === d.columnId ? (\n                                sortDirection === 'asc' ? (\n                                  <SortingIconAscending />\n                                ) : (\n                                  <SortingIconDescending />\n                                )\n                              ) : (\n                                <SortingIcon />\n                              )}\n                            </button>\n                          ) : null}\n                          {d.filterOptions?.length ? (\n                            <button\n                              type='button'\n                              className='bg-transparent cursor-pointer m-0 p-0 border-0'\n                              onClick={(event) => {\n                                if (popupVisible === d.columnId) {\n                                  setPopupVisible(undefined);\n                                } else if (event.currentTarget) {\n                                  setPopupVisible(d.columnId);\n                                  const rect = event.currentTarget.getBoundingClientRect();\n                                  setPopupStyle({\n                                    top: rect.bottom + window.scrollY,\n                                    left:\n                                      rect.left + window.scrollX - 160 < 0\n                                        ? rect.left + window.scrollX\n                                        : rect.left + window.scrollX - 160,\n                                    width: '10rem',\n                                  });\n                                }\n                              }}\n                            >\n                              {filterOption[filterOption.findIndex((el) => el.id === d.columnId)]\n                                .option.length === d.filterOptions?.length ? (\n                                <FilterIcon />\n                              ) : (\n                                <FilterIconApplied />\n                              )}\n                            </button>\n                          ) : null}\n                        </div>\n                      </th>\n                    ))}\n                  </tr>\n                </thead>\n                <tbody>\n                  {/* biome-ignore lint/suspicious/noExplicitAny: undefined data type */}\n                  {sortedData?.map((d: any, i: number) => (\n                    <tr\n                      // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n                      key={i}\n                      className={`cursor-${\n                        onSeriesMouseClick ? 'pointer' : 'auto'\n                      } border-b border-b-primary-gray-400 dark:border-b-primary-gray-500 ${\n                        isEqual(mouseClickData, d)\n                          ? 'bg-primary-gray-200 dark:bg-primary-gray-600'\n                          : 'bg-transparent'\n                      }`}\n                      style={d.rowStyle}\n                      onClick={() => {\n                        if (onSeriesMouseClick) {\n                          if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\n                            setMouseClickData(undefined);\n                            onSeriesMouseClick(undefined);\n                          } else {\n                            setMouseClickData(d);\n                            onSeriesMouseClick(d);\n                          }\n                        }\n                      }}\n                    >\n                      {columnData.map((el) => (\n                        <td\n                          key={el.columnId}\n                          className={`text-primary-gray-700 dark:text-primary-gray-100 text-sm text-${\n                            el.align || 'left'\n                          }`}\n                          style={{\n                            width: `calc(${\n                              (100 * (d.columnWidth || 1)) /\n                              TotalWidth(columnData.map((cd) => cd.columnWidth || 1))\n                            }%`,\n                          }}\n                        >\n                          <div\n                            className={`text-primary-gray-700 dark:text-primary-gray-100 flex p-4 ${\n                              el.align === 'right'\n                                ? 'justify-end'\n                                : el.align === 'center'\n                                  ? 'justify-center'\n                                  : 'justify-start'\n                            }`}\n                          >\n                            {typeof d[el.columnId] === 'number' ? (\n                              <P\n                                marginBottom='none'\n                                size='sm'\n                                className={`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${\n                                  el.chip ? 'grow-0 rounded-sm p-2' : 'grow rounded-none p-0'\n                                } text-${el.align || 'left'} ${\n                                  el.chip\n                                    ? !el.chipColors\n                                      ? 'bg-primary-gray-300 dark:bg-primary-gray-500'\n                                      : ''\n                                    : 'bg-transparent'\n                                }`}\n                                style={{\n                                  ...(el.chip && el.chipColors\n                                    ? {\n                                        backgroundColor:\n                                          el.chipColors[\n                                            el.chipColors.findIndex(\n                                              (c) => c.value === d[el.chipColumnId || el.columnId],\n                                            )\n                                          ].color,\n                                        color: getTextColorBasedOnBgColor(\n                                          el.chipColors[\n                                            el.chipColors.findIndex(\n                                              (c) => c.value === d[el.chipColumnId || el.columnId],\n                                            )\n                                          ].color,\n                                        ),\n                                      }\n                                    : {}),\n                                }}\n                              >\n                                {numberFormattingFunction(\n                                  d[el.columnId],\n                                  naLabel,\n                                  el.precision,\n                                  el.prefix,\n                                  el.suffix,\n                                  el.locale,\n                                  el.padZeros,\n                                )}\n                              </P>\n                            ) : typeof d[el.columnId] === 'string' ? (\n                              el.separator ? (\n                                <div className='text-primary-gray-700 dark:text-primary-gray-100 flex flex-wrap gap-2'>\n                                  {d[el.columnId].split(el.separator).map((element: string) => (\n                                    <P\n                                      key={element}\n                                      marginBottom='none'\n                                      size='sm'\n                                      className={`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${\n                                        el.chip ? 'grow-0 rounded-sm p-2' : 'grow rounded-none p-0'\n                                      } text-${el.align || 'left'} ${\n                                        el.chip\n                                          ? !el.chipColors\n                                            ? 'bg-primary-gray-300 dark:bg-primary-gray-500'\n                                            : ''\n                                          : 'bg-transparent'\n                                      }`}\n                                      style={{\n                                        ...(el.chip && el.chipColors\n                                          ? {\n                                              backgroundColor:\n                                                el.chipColors[\n                                                  el.chipColors.findIndex(\n                                                    (c) =>\n                                                      c.value ===\n                                                      (el.chipColumnId\n                                                        ? d[el.chipColumnId]\n                                                        : element),\n                                                  )\n                                                ].color,\n                                              color: getTextColorBasedOnBgColor(\n                                                el.chipColors[\n                                                  el.chipColors.findIndex(\n                                                    (c) =>\n                                                      c.value ===\n                                                      (el.chipColumnId\n                                                        ? d[el.chipColumnId]\n                                                        : element),\n                                                  )\n                                                ].color,\n                                              ),\n                                            }\n                                          : {}),\n                                      }}\n                                    >\n                                      {numberFormattingFunction(\n                                        element,\n                                        naLabel,\n                                        el.precision,\n                                        el.prefix,\n                                        el.suffix,\n                                        el.locale,\n                                        el.padZeros,\n                                      )}\n                                    </P>\n                                  ))}\n                                </div>\n                              ) : (\n                                <P\n                                  marginBottom='none'\n                                  size='sm'\n                                  className={`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${\n                                    el.chip ? 'grow-0 rounded-sm p-2' : 'grow rounded-none p-0'\n                                  } text-${el.align || 'left'} ${\n                                    el.chip\n                                      ? !el.chipColors\n                                        ? 'bg-primary-gray-300 dark:bg-primary-gray-500'\n                                        : ''\n                                      : 'bg-transparent'\n                                  }`}\n                                  style={{\n                                    ...(el.chip && el.chipColors\n                                      ? {\n                                          backgroundColor:\n                                            el.chipColors[\n                                              el.chipColors.findIndex(\n                                                (c) =>\n                                                  c.value === d[el.chipColumnId || el.columnId],\n                                              )\n                                            ].color,\n                                          color: getTextColorBasedOnBgColor(\n                                            el.chipColors[\n                                              el.chipColors.findIndex(\n                                                (c) =>\n                                                  c.value === d[el.chipColumnId || el.columnId],\n                                              )\n                                            ].color,\n                                          ),\n                                        }\n                                      : {}),\n                                  }}\n                                >\n                                  {numberFormattingFunction(\n                                    d[el.columnId],\n                                    naLabel,\n                                    el.precision,\n                                    el.prefix,\n                                    el.suffix,\n                                    el.locale,\n                                    el.padZeros,\n                                  )}\n                                </P>\n                              )\n                            ) : (\n                              <div>\n                                {numberFormattingFunction(\n                                  d[el.columnId],\n                                  naLabel,\n                                  el.precision,\n                                  el.prefix,\n                                  el.suffix,\n                                  el.locale,\n                                  el.padZeros,\n                                )}\n                              </div>\n                            )}\n                          </div>\n                        </td>\n                      ))}\n                    </tr>\n                  ))}\n                </tbody>\n              </table>\n            ) : null}\n          </div>\n        </div>\n      </div>\n      {sources || footNote ? (\n        <GraphFooter\n          styles={{ footnote: styles?.footnote, source: styles?.source }}\n          classNames={{\n            footnote: classNames?.footnote,\n            source: classNames?.source,\n          }}\n          sources={sources}\n          footNote={footNote}\n          width={width}\n        />\n      ) : null}\n      {popupVisible && (\n        <div\n          style={popupStyle}\n          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'\n        >\n          <div className='max-w-60'>\n            <P size='sm' marginBottom='2xs' className='font-bold'>\n              Filter data by\n            </P>\n            <div className='flex flex-col gap-2'>\n              {columnData[\n                columnData.findIndex((d) => d.columnId === popupVisible)\n              ].filterOptions?.map((el) => (\n                <div key={el}>\n                  <label className='undp-viz-label'>\n                    <input\n                      type='checkbox'\n                      className='undp-viz-checkbox'\n                      checked={\n                        filterOption[\n                          filterOption.findIndex((d) => d.id === popupVisible)\n                        ].option.indexOf(el) !== -1\n                      }\n                      onChange={() => {\n                        const indx = filterOption.findIndex((d) => d.id === popupVisible);\n                        const opt = [...filterOption[indx].option];\n                        if (opt.indexOf(el) !== -1) {\n                          opt.splice(opt.indexOf(el), 1);\n                          const filterOptionDuplicate = [...filterOption];\n                          filterOptionDuplicate[indx].option = opt;\n                          setFilterOption(filterOptionDuplicate);\n                        } else {\n                          opt.push(el);\n                          const filterOptionDuplicate = [...filterOption];\n                          filterOptionDuplicate[indx].option = opt;\n                          setFilterOption(filterOptionDuplicate);\n                        }\n                      }}\n                    />\n                    {el}\n                  </label>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      )}\n    </GraphContainer>\n  );\n}\n"],"mappings":"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"}

package/dist/DataTable.d.ts

@@ -1,126 +1,2 @@
-import { JSX } from 'react/jsx-runtime';
-
-declare interface AxesClassNameObject {
-    gridLines?: string;
-    labels?: string;
-    title?: string;
-    axis?: string;
-}
-
-declare interface AxesStyleObject {
-    gridLines?: React.CSSProperties;
-    labels?: React.CSSProperties;
-    title?: React.CSSProperties;
-    axis?: React.CSSProperties;
-}
-
-declare interface ClassNameObject {
-    title?: string;
-    footnote?: string;
-    source?: string;
-    description?: string;
-    tooltip?: string;
-    xAxis?: AxesClassNameObject;
-    yAxis?: AxesClassNameObject;
-    legend?: string;
-    graphContainer?: string;
-    graphObjectValues?: string;
-    dataConnectors?: string;
-    mouseOverLine?: string;
-    regLine?: string;
-    dataCards?: string;
-    colorLegend?: string;
-    modal?: string;
-}
-
-export declare function DataTable(props: Props): JSX.Element;
-
-declare interface DataTableColumnDataType {
-    columnTitle?: string;
-    columnId: string;
-    sortable?: boolean;
-    filterOptions?: string[];
-    chip?: boolean;
-    chipColumnId?: string;
-    chipColors?: {
-        value: string;
-        color: string;
-    }[];
-    separator?: string;
-    align?: 'left' | 'right' | 'center';
-    suffix?: string;
-    prefix?: string;
-    locale?: string;
-    precision?: number;
-    padZeros?: boolean;
-    columnWidth?: number;
-}
-
-declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'ja' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
-
-declare interface Props {
-    /** Array of data objects. If the data have a object for ket `rowStyle` then that is use to style the row of the table. */
-    data: object[];
-    /** Title of the graph */
-    graphTitle?: string | React.ReactNode;
-    /** Description of the graph */
-    graphDescription?: string | React.ReactNode;
-    /** Footnote for the graph */
-    footNote?: string | React.ReactNode;
-    /** Source data for the graph */
-    sources?: SourcesDataType[];
-    /** Accessibility label */
-    ariaLabel?: string;
-    /** Background color of the graph */
-    backgroundColor?: string | boolean;
-    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
-    styles?: StyleObject;
-    /** Custom class names */
-    classNames?: ClassNameObject;
-    /** Width of the graph */
-    width?: number;
-    /** Minimum width of the table as string in px */
-    minWidth?: string;
-    /** Height of the graph */
-    height?: number;
-    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
-    padding?: string;
-    /** Column settings for each column shown in the table. */
-    columnData: DataTableColumnDataType[];
-    /** Defines how “NA” values should be displayed/labelled in the graph */
-    naLabel?: string;
-    /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
-    resetSelectionOnDoubleClick?: boolean;
-    /** Callback for mouse click event */
-    onSeriesMouseClick?: (_d: any) => void;
-    /** Language setting  */
-    language?: Languages;
-    /** Color theme */
-    theme?: 'light' | 'dark';
-    /** Unique ID for the graph */
-    graphID?: string;
-}
-
-declare interface SourcesDataType {
-    source: string;
-    link?: string;
-}
-
-declare interface StyleObject {
-    title?: React.CSSProperties;
-    footnote?: React.CSSProperties;
-    source?: React.CSSProperties;
-    description?: React.CSSProperties;
-    graphContainer?: React.CSSProperties;
-    tooltip?: React.CSSProperties;
-    xAxis?: AxesStyleObject;
-    yAxis?: AxesStyleObject;
-    graphObjectValues?: React.CSSProperties;
-    dataConnectors?: React.CSSProperties;
-    mouseOverLine?: React.CSSProperties;
-    regLine?: React.CSSProperties;
-    dataCards?: React.CSSProperties;
-    modal?: React.CSSProperties;
-}
-
-export { }
+export * from './Components/Graphs/DataTable/index'
+export {}