@undp/data-viz 2.6.0 → 2.6.1

package/dist/DataCards-BOpanQhW.js

@@ -0,0 +1,254 @@
+import { o as e } from "./chunk-foFoljWS.js";
+import { t } from "./jsx-runtime-C76bEyh7.js";
+import { a as n } from "./Icons-BLXwPP3h.js";
+import { t as r } from "./CsvDownloadButton-BZ7Zr0Gz.js";
+import { t as i } from "./lodash.flattendeep-a__mQ60W.js";
+import { t as a } from "./lodash.intersection-C9QFuAQj.js";
+import { GraphFooter as o } from "./GraphFooter.js";
+import { GraphHeader as s } from "./GraphHeader.js";
+import { t as c } from "./getUniqValue-DZTOHgt8.js";
+import { t as l } from "./transformDataForSelect-DRC8qPt4.js";
+import { n as u } from "./GraphContainer-DgEB1AVN.js";
+import { t as d } from "./lodash.orderby-Dn2sr3tw.js";
+import { t as f } from "./string2HTML-CvbtZnul.js";
+import { cn as p } from "@undp/design-system-react/cn";
+import { useEffect as m, useEffectEvent as h, useRef as g, useState as _ } from "react";
+import { DropdownSelect as v, createFilter as y } from "@undp/design-system-react/DropdownSelect";
+import { P as b } from "@undp/design-system-react/Typography";
+import { Spacer as x } from "@undp/design-system-react/Spacer";
+import { Modal as S } from "@undp/design-system-react/Modal";
+import { Pagination as C } from "@undp/design-system-react/Pagination";
+import { Search as w } from "@undp/design-system-react/Search";
+//#region src/Components/Graphs/DataCards/Graph.tsx
+var T = /* @__PURE__ */ e(i(), 1), E = /* @__PURE__ */ e(a(), 1), D = /* @__PURE__ */ e(d(), 1), O = t(), k = (e) => e ? Object.entries(e).map(([e, t]) => Array.isArray(t) ? {
+	" ": e,
+	value: `"${t.join("; ")}"`
+} : {
+	" ": e,
+	value: `"${t}"`
+}) : {};
+function ee(e) {
+	let { width: t, height: i, data: a, onSeriesMouseClick: o, cardTemplate: s, cardBackgroundColor: c, cardMinWidth: l = 320, detailsOnClick: u, noOfItemsInAPage: d, styles: m, classNames: h, page: g, allowDataDownloadOnDetail: v } = e, [y, b] = _(void 0);
+	return /* @__PURE__ */ (0, O.jsxs)(O.Fragment, { children: [/* @__PURE__ */ (0, O.jsx)("div", {
+		className: "undp-scrollbar w-full my-0 mx-auto grid gap-4 undp-viz-data-cards-container",
+		style: {
+			width: t ? `${t}px` : "100%",
+			height: i ? `${i}px` : "auto",
+			gridTemplateColumns: `repeat(auto-fill, minmax(${l}px, 1fr))`
+		},
+		children: a.filter((e, t) => d ? t < g * d && t >= (g - 1) * d : !0).map((e, t) => /* @__PURE__ */ (0, O.jsx)("div", {
+			style: {
+				...m?.dataCards || {},
+				...c && { backgroundColor: c }
+			},
+			className: p("w-full flex flex-col", o || u ? "cursor-pointer" : "cursor-auto", c ? "" : "bg-primary-gray-200 dark:bg-primary-gray-600", h?.dataCards),
+			onClick: () => {
+				o?.(e), b(e);
+			},
+			onKeyDown: (t) => {
+				(t.key === "Enter" || t.key === " ") && (o?.(e), b(e));
+			},
+			dangerouslySetInnerHTML: typeof s == "string" ? { __html: f(s, e) } : void 0,
+			children: typeof s == "function" ? s(e) : null
+		}, t))
+	}), u && y !== void 0 ? /* @__PURE__ */ (0, O.jsxs)(S, {
+		open: y !== void 0,
+		onClose: () => {
+			b(void 0);
+		},
+		children: [/* @__PURE__ */ (0, O.jsx)("div", {
+			className: "graph-modal-content m-0",
+			dangerouslySetInnerHTML: typeof u == "string" ? { __html: f(u, y) } : void 0,
+			children: typeof u == "function" ? u(y) : null
+		}), v ? /* @__PURE__ */ (0, O.jsx)("div", {
+			className: "flex",
+			children: /* @__PURE__ */ (0, O.jsx)(r, {
+				csvData: k(y),
+				headers: [{
+					label: " ",
+					key: " "
+				}, {
+					label: "value",
+					key: "value"
+				}],
+				buttonContent: /* @__PURE__ */ (0, O.jsxs)("div", {
+					className: "flex items-center gap-4",
+					children: [typeof v == "string" ? v : null, /* @__PURE__ */ (0, O.jsx)(n, {})]
+				})
+			})
+		}) : null]
+	}) : null] });
+}
+//#endregion
+//#region src/Components/Graphs/DataCards/index.tsx
+var te = (e, t, n) => t.length === 0 ? e : e.filter((e) => t.some((t) => e[t]?.toLowerCase().includes(n.toLowerCase())));
+function A(e) {
+	let { width: t, height: n, graphTitle: r, sources: i, graphDescription: a, footNote: d, graphID: f, data: p, onSeriesMouseClick: S, language: k = "en", theme: A = "light", ariaLabel: j, cardTemplate: M, cardBackgroundColor: N, cardFilters: P, cardSortingOptions: F, cardSearchColumns: I, cardMinWidth: L = 320, backgroundColor: R = !1, padding: z, detailsOnClick: B, allowDataDownloadOnDetail: V = !1, noOfItemsInAPage: H, uiMode: U = "normal", styles: W, classNames: G } = e, [K, ne] = _(p), [re, q] = _(1), ie = g(null), [J, ae] = _(""), Y = (P || []).map((e) => ({
+		filter: e.column,
+		label: e.label || `Filter by ${e.column}`,
+		singleSelect: !0,
+		clearable: !0,
+		defaultValue: l(e.defaultValue),
+		availableValues: c(p, e.column).filter((t) => !e.excludeValues?.includes(`${t}`)).map((e) => ({
+			value: e,
+			label: e
+		})),
+		width: e.width
+	})), [X, oe] = _((P || []).map((e) => ({
+		filter: e.column,
+		value: l(e.defaultValue)
+	}))), [Z, Q] = _(F ? !F.defaultValue || F.options.findIndex((e) => e.label === F.defaultValue) === -1 ? F.options[0] : F.options[F.options.findIndex((e) => e.label === F.defaultValue)] : void 0), $ = {
+		ignoreCase: !0,
+		ignoreAccents: !0,
+		trim: !0
+	}, se = h(() => {
+		Q(F ? !F.defaultValue || F.options.findIndex((e) => e.label === F.defaultValue) === -1 ? F.options[0] : F.options[F.options.findIndex((e) => e.label === F.defaultValue)] : void 0);
+	});
+	m(() => {
+		se();
+	}, [F]);
+	let ce = h((e) => {
+		ne(e), q(1);
+	});
+	return m(() => {
+		let e = te(p, I || [], J).filter((e) => X.every((t) => t.value && (0, T.default)([t.value]).length > 0 ? (0, E.default)((0, T.default)([e[t.filter]]), (0, T.default)([t.value]).map((e) => e.value)).length > 0 : !0));
+		ce(Z ? (0, D.default)(e, [Z.value], [Z.type]) : e);
+	}, [
+		p,
+		I,
+		J,
+		X,
+		Z
+	]), /* @__PURE__ */ (0, O.jsxs)(u, {
+		className: G?.graphContainer,
+		style: W?.graphContainer,
+		id: f,
+		ref: ie,
+		"aria-label": j,
+		backgroundColor: R,
+		theme: A,
+		language: k,
+		width: t,
+		height: n,
+		padding: z,
+		children: [
+			r || a ? /* @__PURE__ */ (0, O.jsx)(s, {
+				styles: {
+					title: W?.title,
+					description: W?.description
+				},
+				classNames: {
+					title: G?.title,
+					description: G?.description
+				},
+				graphTitle: r,
+				graphDescription: a,
+				width: t
+			}) : null,
+			F || Y.length > 0 ? /* @__PURE__ */ (0, O.jsxs)("div", {
+				className: "flex gap-x-4 gap-y-0 flex-wrap items-start w-full pb-3",
+				children: [F ? /* @__PURE__ */ (0, O.jsxs)("div", {
+					className: "grow shrink-0 min-w-[240px]",
+					style: { width: F.width || "calc(25% - 0.75rem)" },
+					children: [/* @__PURE__ */ (0, O.jsx)(b, {
+						marginBottom: "xs",
+						size: "sm",
+						className: "text-primary-gray-700 dark:text-primary-gray-100",
+						children: "Sort by"
+					}), /* @__PURE__ */ (0, O.jsx)(v, {
+						options: F.options,
+						isRtl: k === "he" || k === "ar",
+						isSearchable: !0,
+						filterOption: y($),
+						onChange: (e) => {
+							Q(e || void 0);
+						},
+						variant: U,
+						size: "sm",
+						defaultValue: !F.defaultValue || F.options.findIndex((e) => e.label === F.defaultValue) === -1 ? F.options[0] : F.options[F.options.findIndex((e) => e.label === F.defaultValue)]
+					})]
+				}) : null, Y?.map((e) => /* @__PURE__ */ (0, O.jsxs)("div", {
+					className: "grow shrink-0 min-w-[240px]",
+					style: { width: e.width || "calc(25% - 0.75rem)" },
+					children: [/* @__PURE__ */ (0, O.jsx)(b, {
+						marginBottom: "xs",
+						size: "sm",
+						className: "text-primary-gray-700 dark:text-primary-gray-100",
+						children: e.label
+					}), /* @__PURE__ */ (0, O.jsx)(v, {
+						options: e.availableValues,
+						isClearable: e.clearable === void 0 ? !0 : e.clearable,
+						isRtl: k === "he" || k === "ar",
+						isSearchable: !0,
+						variant: U,
+						size: "sm",
+						controlShouldRenderValue: !0,
+						filterOption: y($),
+						onChange: (t) => {
+							oe((n) => n.map((n) => n.filter === e.filter ? {
+								...n,
+								value: t
+							} : n));
+						},
+						defaultValue: e.defaultValue
+					})]
+				}, e.label))]
+			}) : null,
+			/* @__PURE__ */ (0, O.jsx)(x, { size: "xl" }),
+			(I || []).length > 0 ? /* @__PURE__ */ (0, O.jsx)("div", {
+				style: { paddingTop: "1px" },
+				children: /* @__PURE__ */ (0, O.jsx)(w, {
+					placeholder: "Search...",
+					onSearch: (e) => {
+						ae(e || "");
+					},
+					buttonVariant: "icon",
+					inputVariant: U,
+					showSearchButton: !1,
+					inputSize: "sm"
+				})
+			}) : null,
+			/* @__PURE__ */ (0, O.jsx)(x, { size: "xl" }),
+			/* @__PURE__ */ (0, O.jsx)(ee, {
+				data: K,
+				width: t,
+				height: n,
+				cardTemplate: M,
+				cardMinWidth: L,
+				page: re,
+				cardBackgroundColor: N,
+				styles: W,
+				classNames: G,
+				noOfItemsInAPage: H,
+				detailsOnClick: B,
+				onSeriesMouseClick: S,
+				allowDataDownloadOnDetail: V
+			}),
+			/* @__PURE__ */ (0, O.jsx)(x, { size: "xl" }),
+			H ? /* @__PURE__ */ (0, O.jsx)(C, {
+				total: K.length,
+				defaultPage: 0,
+				pageSize: H,
+				onChange: q
+			}) : null,
+			/* @__PURE__ */ (0, O.jsx)(x, { size: "2xl" }),
+			i || d ? /* @__PURE__ */ (0, O.jsx)(o, {
+				styles: {
+					footnote: W?.footnote,
+					source: W?.source
+				},
+				classNames: {
+					footnote: G?.footnote,
+					source: G?.source
+				},
+				sources: i,
+				footNote: d,
+				width: t
+			}) : null
+		]
+	});
+}
+//#endregion
+export { A as t };
+
+//# sourceMappingURL=DataCards-BOpanQhW.js.map

package/dist/DataCards-BOpanQhW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataCards-BOpanQhW.js","names":[],"sources":["../src/Components/Graphs/DataCards/Graph.tsx","../src/Components/Graphs/DataCards/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { Modal } from '@undp/design-system-react/Modal';\nimport { useState } from 'react';\nimport { CsvDownloadButton } from '@/Components/Actions/CsvDownloadButton';\nimport { FileDown } from '@/Components/Icons';\nimport type { ClassNameObject, StyleObject } from '@/Types';\nimport { string2HTML } from '@/Utils/string2HTML';\n\nexport type FilterDataType = {\n  column: string;\n  label?: string;\n  defaultValue?: string;\n  excludeValues?: string[];\n  width?: string;\n};\n\ninterface Props {\n  data: object[];\n  cardBackgroundColor?: string;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  width?: number;\n  height?: number;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  cardTemplate: string | ((_d: any) => React.ReactNode);\n  cardMinWidth: number;\n  noOfItemsInAPage?: number;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\n  allowDataDownloadOnDetail: boolean | string;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n  page: number;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: undefined data type\nconst csvData = (data: any) => {\n  if (!data) return {};\n  const dataForCsv = Object.entries(data).map(([key, value]) => {\n    if (Array.isArray(value)) {\n      return {\n        ' ': key,\n        value: `\"${value.join('; ')}\"`,\n      };\n    }\n    return {\n      ' ': key,\n      value: `\"${value}\"`,\n    };\n  });\n  return dataForCsv;\n};\n\nexport function Graph(props: Props) {\n  const {\n    width,\n    height,\n    data,\n    onSeriesMouseClick,\n    cardTemplate,\n    cardBackgroundColor,\n    cardMinWidth = 320,\n    detailsOnClick,\n    noOfItemsInAPage,\n    styles,\n    classNames,\n    page,\n    allowDataDownloadOnDetail,\n  } = props;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [selectedData, setSelectedData] = useState<any>(undefined);\n  return (\n    <>\n      <div\n        className='undp-scrollbar w-full my-0 mx-auto grid gap-4 undp-viz-data-cards-container'\n        style={{\n          width: width ? `${width}px` : '100%',\n          height: height ? `${height}px` : 'auto',\n          gridTemplateColumns: `repeat(auto-fill, minmax(${cardMinWidth}px, 1fr))`,\n        }}\n      >\n        {data\n          // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n          .filter((_d: any, i: number) =>\n            noOfItemsInAPage\n              ? i < page * noOfItemsInAPage && i >= (page - 1) * noOfItemsInAPage\n              : true,\n          )\n          // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n          .map((d: any, i: number) => (\n            // biome-ignore lint/a11y/noStaticElementInteractions: div is intentionally interactive as a clickable card container; keyboard and accessibility behavior is handled separately\n            <div\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n              key={i}\n              style={{\n                ...(styles?.dataCards || {}),\n                ...(cardBackgroundColor && { backgroundColor: cardBackgroundColor }),\n              }}\n              className={cn(\n                'w-full flex flex-col',\n                onSeriesMouseClick || detailsOnClick ? 'cursor-pointer' : 'cursor-auto',\n                !cardBackgroundColor ? 'bg-primary-gray-200 dark:bg-primary-gray-600' : '',\n                classNames?.dataCards,\n              )}\n              onClick={() => {\n                onSeriesMouseClick?.(d);\n                setSelectedData(d);\n              }}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  onSeriesMouseClick?.(d);\n                  setSelectedData(d);\n                }\n              }}\n              // biome-ignore lint/security/noDangerouslySetInnerHtmlWithChildren: Allow setInnerHTML here\n              // biome-ignore lint/security/noDangerouslySetInnerHtml: Allow setInnerHTML here\n              dangerouslySetInnerHTML={\n                typeof cardTemplate === 'string'\n                  ? { __html: string2HTML(cardTemplate, d) }\n                  : undefined\n              }\n            >\n              {typeof cardTemplate === 'function' ? cardTemplate(d) : null}\n            </div>\n          ))}\n      </div>\n      {detailsOnClick && selectedData !== undefined ? (\n        <Modal\n          open={selectedData !== undefined}\n          onClose={() => {\n            setSelectedData(undefined);\n          }}\n        >\n          <div\n            className='graph-modal-content m-0'\n            // biome-ignore lint/security/noDangerouslySetInnerHtmlWithChildren: Allow setInnerHTML here\n            // biome-ignore lint/security/noDangerouslySetInnerHtml: Allow setInnerHTML here\n            dangerouslySetInnerHTML={\n              typeof detailsOnClick === 'string'\n                ? { __html: string2HTML(detailsOnClick, selectedData) }\n                : undefined\n            }\n          >\n            {typeof detailsOnClick === 'function' ? detailsOnClick(selectedData) : null}\n          </div>\n          {allowDataDownloadOnDetail ? (\n            <div className='flex'>\n              <CsvDownloadButton\n                csvData={csvData(selectedData)}\n                headers={[\n                  {\n                    label: ' ',\n                    key: ' ',\n                  },\n                  {\n                    label: 'value',\n                    key: 'value',\n                  },\n                ]}\n                buttonContent={\n                  <div className='flex items-center gap-4'>\n                    {typeof allowDataDownloadOnDetail === 'string'\n                      ? allowDataDownloadOnDetail\n                      : null}\n                    <FileDown />\n                  </div>\n                }\n              />\n            </div>\n          ) : null}\n        </Modal>\n      ) : null}\n    </>\n  );\n}\n","import { createFilter, DropdownSelect } from '@undp/design-system-react/DropdownSelect';\nimport { Pagination } from '@undp/design-system-react/Pagination';\nimport { Search } from '@undp/design-system-react/Search';\nimport { Spacer } from '@undp/design-system-react/Spacer';\nimport { P } from '@undp/design-system-react/Typography';\nimport flattenDeep from 'lodash.flattendeep';\nimport intersection from 'lodash.intersection';\nimport orderBy from 'lodash.orderby';\nimport type React from 'react';\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 type { ClassNameObject, Languages, SourcesDataType, StyleObject } from '@/Types';\nimport { getUniqValue } from '@/Utils/getUniqValue';\nimport { transformDefaultValue } from '@/Utils/transformDataForSelect';\nimport { Graph } from './Graph';\n\nexport type FilterDataType = {\n  column: string;\n  label?: string;\n  defaultValue?: string;\n  excludeValues?: string[];\n  width?: string;\n};\n\ninterface Props {\n  // Data\n  /** Array of data objects */\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 each of the card */\n  cardBackgroundColor?: string;\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  /** 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  /** Html for each card. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data. */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  cardTemplate: string | ((_d: any) => React.ReactNode);\n  /** Allows users to add a dropdown menus, that can be used as filters in the graph. Each filter is an object that specifies the column to filter by, and the default value. All the filters are single select only.  */\n  cardFilters?: FilterDataType[];\n  /** Allows users to add a dropdown menus, that can be used to sort the cards based on different columns. */\n  cardSortingOptions?: {\n    defaultValue?: string;\n    options: {\n      value: string;\n      label: string;\n      type: 'asc' | 'desc';\n    }[];\n    width?: string;\n  };\n  /** Adds a search bar to search the cards list. The array defines all the columns from the data where text is used to search from. */\n  cardSearchColumns?: string[];\n  /** Min width of the cards for responsiveness. */\n  cardMinWidth?: number;\n  /** Add a button to download data object when viewing details. If true, data can be downloaded; if a string is provided, it specifies the button label. */\n  allowDataDownloadOnDetail?: string | boolean;\n  /** Defines the number of items displayed per page. */\n  noOfItemsInAPage?: number;\n\n  // Interactions and Callbacks\n  /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\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  /** Theme for the UI elements */\n  uiMode?: 'light' | 'normal';\n  /** Unique ID for the graph */\n  graphID?: string;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: undefined data type\nconst filterByKeys = (jsonArray: any, keys: string[], substring: string) => {\n  if (keys.length === 0) return jsonArray;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  return jsonArray.filter((item: any) =>\n    keys.some((key) => item[key]?.toLowerCase().includes(substring.toLowerCase())),\n  );\n};\n\nexport function DataCards(props: Props) {\n  const {\n    width,\n    height,\n    graphTitle,\n    sources,\n    graphDescription,\n    footNote,\n    graphID,\n    data,\n    onSeriesMouseClick,\n    language = 'en',\n    theme = 'light',\n    ariaLabel,\n    cardTemplate,\n    cardBackgroundColor,\n    cardFilters,\n    cardSortingOptions,\n    cardSearchColumns,\n    cardMinWidth = 320,\n    backgroundColor = false,\n    padding,\n    detailsOnClick,\n    allowDataDownloadOnDetail = false,\n    noOfItemsInAPage,\n    uiMode = 'normal',\n    styles,\n    classNames,\n  } = props;\n\n  const [cardData, setCardData] = useState(data);\n\n  const [page, setPage] = useState(1);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n\n  const [searchQuery, setSearchQuery] = useState('');\n  const filterSettings = (cardFilters || []).map((el) => ({\n    filter: el.column,\n    label: el.label || `Filter by ${el.column}`,\n    singleSelect: true,\n    clearable: true,\n    defaultValue: transformDefaultValue(el.defaultValue),\n    availableValues: getUniqValue(data, el.column)\n      .filter((v) => !el.excludeValues?.includes(`${v}`))\n      .map((v) => ({ value: v, label: v })),\n    width: el.width,\n  }));\n\n  const [selectedFilters, setSelectedFilters] = useState(\n    (cardFilters || []).map((el) => ({\n      filter: el.column,\n      value: transformDefaultValue(el.defaultValue),\n    })),\n  );\n  const [sortedBy, setSortedBy] = useState<\n    | {\n        value: string;\n        label: string;\n        type: 'asc' | 'desc';\n      }\n    | undefined\n  >(\n    cardSortingOptions\n      ? !cardSortingOptions.defaultValue ||\n        cardSortingOptions.options.findIndex(\n          (el) => el.label === cardSortingOptions.defaultValue,\n        ) === -1\n        ? cardSortingOptions.options[0]\n        : cardSortingOptions.options[\n            cardSortingOptions.options.findIndex(\n              (el) => el.label === cardSortingOptions.defaultValue,\n            )\n          ]\n      : undefined,\n  );\n\n  const filterConfig = {\n    ignoreCase: true,\n    ignoreAccents: true,\n    trim: true,\n  };\n  const cardSortingEvent = useEffectEvent(() => {\n    setSortedBy(\n      cardSortingOptions\n        ? !cardSortingOptions.defaultValue ||\n          cardSortingOptions.options.findIndex(\n            (el) => el.label === cardSortingOptions.defaultValue,\n          ) === -1\n          ? cardSortingOptions.options[0]\n          : cardSortingOptions.options[\n              cardSortingOptions.options.findIndex(\n                (el) => el.label === cardSortingOptions.defaultValue,\n              )\n            ]\n        : undefined,\n    );\n  });\n  useEffect(() => {\n    cardSortingEvent();\n  }, [cardSortingOptions]);\n\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const cardDataEvent = useEffectEvent((data: any) => {\n    setCardData(data);\n    setPage(1);\n  });\n  useEffect(() => {\n    const filteredData = filterByKeys(data, cardSearchColumns || [], searchQuery).filter(\n      // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n      (item: any) =>\n        selectedFilters.every((filter) =>\n          filter.value && flattenDeep([filter.value]).length > 0\n            ? intersection(\n                flattenDeep([item[filter.filter]]),\n                flattenDeep([filter.value]).map((el) => el.value),\n              ).length > 0\n            : true,\n        ),\n    );\n    if (sortedBy) {\n      cardDataEvent(orderBy(filteredData, [sortedBy.value], [sortedBy.type]));\n    } else {\n      cardDataEvent(filteredData);\n    }\n  }, [data, cardSearchColumns, searchQuery, selectedFilters, sortedBy]);\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      {cardSortingOptions || filterSettings.length > 0 ? (\n        <div className='flex gap-x-4 gap-y-0 flex-wrap items-start w-full pb-3'>\n          {cardSortingOptions ? (\n            <div\n              className='grow shrink-0 min-w-[240px]'\n              style={{ width: cardSortingOptions.width || 'calc(25% - 0.75rem)' }}\n            >\n              <P\n                marginBottom='xs'\n                size='sm'\n                className='text-primary-gray-700 dark:text-primary-gray-100'\n              >\n                Sort by\n              </P>\n              <DropdownSelect\n                options={cardSortingOptions.options}\n                isRtl={language === 'he' || language === 'ar'}\n                isSearchable\n                filterOption={createFilter(filterConfig)}\n                // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n                onChange={(el: any) => {\n                  setSortedBy(el || undefined);\n                }}\n                variant={uiMode}\n                size='sm'\n                defaultValue={\n                  !cardSortingOptions.defaultValue ||\n                  cardSortingOptions.options.findIndex(\n                    (el) => el.label === cardSortingOptions.defaultValue,\n                  ) === -1\n                    ? cardSortingOptions.options[0]\n                    : cardSortingOptions.options[\n                        cardSortingOptions.options.findIndex(\n                          (el) => el.label === cardSortingOptions.defaultValue,\n                        )\n                      ]\n                }\n              />\n            </div>\n          ) : null}\n          {filterSettings?.map((d) => (\n            <div\n              className='grow shrink-0 min-w-[240px]'\n              style={{ width: d.width || 'calc(25% - 0.75rem)' }}\n              key={d.label}\n            >\n              <P\n                marginBottom='xs'\n                size='sm'\n                className='text-primary-gray-700 dark:text-primary-gray-100'\n              >\n                {d.label}\n              </P>\n              <DropdownSelect\n                options={d.availableValues}\n                isClearable={d.clearable === undefined ? true : d.clearable}\n                isRtl={language === 'he' || language === 'ar'}\n                isSearchable\n                variant={uiMode}\n                size='sm'\n                controlShouldRenderValue\n                filterOption={createFilter(filterConfig)}\n                onChange={(el) => {\n                  setSelectedFilters((prev) =>\n                    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n                    prev.map((f) => (f.filter === d.filter ? { ...f, value: el as any } : f)),\n                  );\n                }}\n                defaultValue={d.defaultValue}\n              />\n            </div>\n          ))}\n        </div>\n      ) : null}\n      <Spacer size='xl' />\n      {(cardSearchColumns || []).length > 0 ? (\n        <div style={{ paddingTop: '1px' }}>\n          <Search\n            placeholder='Search...'\n            onSearch={(e) => {\n              setSearchQuery(e || '');\n            }}\n            buttonVariant='icon'\n            inputVariant={uiMode}\n            showSearchButton={false}\n            inputSize='sm'\n          />\n        </div>\n      ) : null}\n      <Spacer size='xl' />\n      <Graph\n        data={cardData}\n        width={width}\n        height={height}\n        cardTemplate={cardTemplate}\n        cardMinWidth={cardMinWidth}\n        page={page}\n        cardBackgroundColor={cardBackgroundColor}\n        styles={styles}\n        classNames={classNames}\n        noOfItemsInAPage={noOfItemsInAPage}\n        detailsOnClick={detailsOnClick}\n        onSeriesMouseClick={onSeriesMouseClick}\n        allowDataDownloadOnDetail={allowDataDownloadOnDetail}\n      />\n      <Spacer size='xl' />\n      {noOfItemsInAPage ? (\n        <Pagination\n          total={cardData.length}\n          defaultPage={0}\n          pageSize={noOfItemsInAPage}\n          onChange={setPage}\n        />\n      ) : null}\n      <Spacer size='2xl' />\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    </GraphContainer>\n  );\n}\n"],"mappings":"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"}

package/dist/DataCards-C4lwQNit.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-gGpyby2o.cjs`),t=require(`./jsx-runtime-Cd1vCQjn.cjs`),n=require(`./Icons-DXw7FqJ_.cjs`),r=require(`./CsvDownloadButton-web25aO3.cjs`),i=require(`./lodash.flattendeep-_PlS_1wX.cjs`),a=require(`./lodash.intersection-BDR4j58n.cjs`),o=require(`./GraphFooter.cjs`),s=require(`./GraphHeader.cjs`),c=require(`./getUniqValue-BItnnZEr.cjs`),l=require(`./transformDataForSelect-Bmaowc2Z.cjs`),u=require(`./GraphContainer-7xAPK4Tb.cjs`),d=require(`./lodash.orderby-Us2PHq2D.cjs`),f=require(`./string2HTML-CyL1MYMB.cjs`);let p=require(`@undp/design-system-react/cn`),m=require(`react`),h=require(`@undp/design-system-react/DropdownSelect`),g=require(`@undp/design-system-react/Typography`),_=require(`@undp/design-system-react/Spacer`),v=require(`@undp/design-system-react/Modal`),y=require(`@undp/design-system-react/Pagination`),b=require(`@undp/design-system-react/Search`);var x=e.a(i.t(),1),S=e.a(a.t(),1),C=e.a(d.t(),1),w=t.t(),T=e=>e?Object.entries(e).map(([e,t])=>Array.isArray(t)?{" ":e,value:`"${t.join(`; `)}"`}:{" ":e,value:`"${t}"`}):{};function E(e){let{width:t,height:i,data:a,onSeriesMouseClick:o,cardTemplate:s,cardBackgroundColor:c,cardMinWidth:l=320,detailsOnClick:u,noOfItemsInAPage:d,styles:h,classNames:g,page:_,allowDataDownloadOnDetail:y}=e,[b,x]=(0,m.useState)(void 0);return(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(`div`,{className:`undp-scrollbar w-full my-0 mx-auto grid gap-4 undp-viz-data-cards-container`,style:{width:t?`${t}px`:`100%`,height:i?`${i}px`:`auto`,gridTemplateColumns:`repeat(auto-fill, minmax(${l}px, 1fr))`},children:a.filter((e,t)=>d?t<_*d&&t>=(_-1)*d:!0).map((e,t)=>(0,w.jsx)(`div`,{style:{...h?.dataCards||{},...c&&{backgroundColor:c}},className:(0,p.cn)(`w-full flex flex-col`,o||u?`cursor-pointer`:`cursor-auto`,c?``:`bg-primary-gray-200 dark:bg-primary-gray-600`,g?.dataCards),onClick:()=>{o?.(e),x(e)},onKeyDown:t=>{(t.key===`Enter`||t.key===` `)&&(o?.(e),x(e))},dangerouslySetInnerHTML:typeof s==`string`?{__html:f.t(s,e)}:void 0,children:typeof s==`function`?s(e):null},t))}),u&&b!==void 0?(0,w.jsxs)(v.Modal,{open:b!==void 0,onClose:()=>{x(void 0)},children:[(0,w.jsx)(`div`,{className:`graph-modal-content m-0`,dangerouslySetInnerHTML:typeof u==`string`?{__html:f.t(u,b)}:void 0,children:typeof u==`function`?u(b):null}),y?(0,w.jsx)(`div`,{className:`flex`,children:(0,w.jsx)(r.t,{csvData:T(b),headers:[{label:` `,key:` `},{label:`value`,key:`value`}],buttonContent:(0,w.jsxs)(`div`,{className:`flex items-center gap-4`,children:[typeof y==`string`?y:null,(0,w.jsx)(n.a,{})]})})}):null]}):null]})}var D=(e,t,n)=>t.length===0?e:e.filter(e=>t.some(t=>e[t]?.toLowerCase().includes(n.toLowerCase())));function O(e){let{width:t,height:n,graphTitle:r,sources:i,graphDescription:a,footNote:d,graphID:f,data:p,onSeriesMouseClick:v,language:T=`en`,theme:O=`light`,ariaLabel:k,cardTemplate:ee,cardBackgroundColor:A,cardFilters:j,cardSortingOptions:M,cardSearchColumns:N,cardMinWidth:P=320,backgroundColor:F=!1,padding:I,detailsOnClick:L,allowDataDownloadOnDetail:R=!1,noOfItemsInAPage:z,uiMode:B=`normal`,styles:V,classNames:H}=e,[U,W]=(0,m.useState)(p),[G,K]=(0,m.useState)(1),q=(0,m.useRef)(null),[J,te]=(0,m.useState)(``),Y=(j||[]).map(e=>({filter:e.column,label:e.label||`Filter by ${e.column}`,singleSelect:!0,clearable:!0,defaultValue:l.t(e.defaultValue),availableValues:c.t(p,e.column).filter(t=>!e.excludeValues?.includes(`${t}`)).map(e=>({value:e,label:e})),width:e.width})),[X,ne]=(0,m.useState)((j||[]).map(e=>({filter:e.column,value:l.t(e.defaultValue)}))),[Z,Q]=(0,m.useState)(M?!M.defaultValue||M.options.findIndex(e=>e.label===M.defaultValue)===-1?M.options[0]:M.options[M.options.findIndex(e=>e.label===M.defaultValue)]:void 0),$={ignoreCase:!0,ignoreAccents:!0,trim:!0},re=(0,m.useEffectEvent)(()=>{Q(M?!M.defaultValue||M.options.findIndex(e=>e.label===M.defaultValue)===-1?M.options[0]:M.options[M.options.findIndex(e=>e.label===M.defaultValue)]:void 0)});(0,m.useEffect)(()=>{re()},[M]);let ie=(0,m.useEffectEvent)(e=>{W(e),K(1)});return(0,m.useEffect)(()=>{let e=D(p,N||[],J).filter(e=>X.every(t=>t.value&&(0,x.default)([t.value]).length>0?(0,S.default)((0,x.default)([e[t.filter]]),(0,x.default)([t.value]).map(e=>e.value)).length>0:!0));ie(Z?(0,C.default)(e,[Z.value],[Z.type]):e)},[p,N,J,X,Z]),(0,w.jsxs)(u.n,{className:H?.graphContainer,style:V?.graphContainer,id:f,ref:q,"aria-label":k,backgroundColor:F,theme:O,language:T,width:t,height:n,padding:I,children:[r||a?(0,w.jsx)(s.GraphHeader,{styles:{title:V?.title,description:V?.description},classNames:{title:H?.title,description:H?.description},graphTitle:r,graphDescription:a,width:t}):null,M||Y.length>0?(0,w.jsxs)(`div`,{className:`flex gap-x-4 gap-y-0 flex-wrap items-start w-full pb-3`,children:[M?(0,w.jsxs)(`div`,{className:`grow shrink-0 min-w-[240px]`,style:{width:M.width||`calc(25% - 0.75rem)`},children:[(0,w.jsx)(g.P,{marginBottom:`xs`,size:`sm`,className:`text-primary-gray-700 dark:text-primary-gray-100`,children:`Sort by`}),(0,w.jsx)(h.DropdownSelect,{options:M.options,isRtl:T===`he`||T===`ar`,isSearchable:!0,filterOption:(0,h.createFilter)($),onChange:e=>{Q(e||void 0)},variant:B,size:`sm`,defaultValue:!M.defaultValue||M.options.findIndex(e=>e.label===M.defaultValue)===-1?M.options[0]:M.options[M.options.findIndex(e=>e.label===M.defaultValue)]})]}):null,Y?.map(e=>(0,w.jsxs)(`div`,{className:`grow shrink-0 min-w-[240px]`,style:{width:e.width||`calc(25% - 0.75rem)`},children:[(0,w.jsx)(g.P,{marginBottom:`xs`,size:`sm`,className:`text-primary-gray-700 dark:text-primary-gray-100`,children:e.label}),(0,w.jsx)(h.DropdownSelect,{options:e.availableValues,isClearable:e.clearable===void 0?!0:e.clearable,isRtl:T===`he`||T===`ar`,isSearchable:!0,variant:B,size:`sm`,controlShouldRenderValue:!0,filterOption:(0,h.createFilter)($),onChange:t=>{ne(n=>n.map(n=>n.filter===e.filter?{...n,value:t}:n))},defaultValue:e.defaultValue})]},e.label))]}):null,(0,w.jsx)(_.Spacer,{size:`xl`}),(N||[]).length>0?(0,w.jsx)(`div`,{style:{paddingTop:`1px`},children:(0,w.jsx)(b.Search,{placeholder:`Search...`,onSearch:e=>{te(e||``)},buttonVariant:`icon`,inputVariant:B,showSearchButton:!1,inputSize:`sm`})}):null,(0,w.jsx)(_.Spacer,{size:`xl`}),(0,w.jsx)(E,{data:U,width:t,height:n,cardTemplate:ee,cardMinWidth:P,page:G,cardBackgroundColor:A,styles:V,classNames:H,noOfItemsInAPage:z,detailsOnClick:L,onSeriesMouseClick:v,allowDataDownloadOnDetail:R}),(0,w.jsx)(_.Spacer,{size:`xl`}),z?(0,w.jsx)(y.Pagination,{total:U.length,defaultPage:0,pageSize:z,onChange:K}):null,(0,w.jsx)(_.Spacer,{size:`2xl`}),i||d?(0,w.jsx)(o.GraphFooter,{styles:{footnote:V?.footnote,source:V?.source},classNames:{footnote:H?.footnote,source:H?.source},sources:i,footNote:d,width:t}):null]})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return O}});
+//# sourceMappingURL=DataCards-C4lwQNit.cjs.map

package/dist/DataCards-C4lwQNit.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataCards-C4lwQNit.cjs","names":[],"sources":["../src/Components/Graphs/DataCards/Graph.tsx","../src/Components/Graphs/DataCards/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { Modal } from '@undp/design-system-react/Modal';\nimport { useState } from 'react';\nimport { CsvDownloadButton } from '@/Components/Actions/CsvDownloadButton';\nimport { FileDown } from '@/Components/Icons';\nimport type { ClassNameObject, StyleObject } from '@/Types';\nimport { string2HTML } from '@/Utils/string2HTML';\n\nexport type FilterDataType = {\n  column: string;\n  label?: string;\n  defaultValue?: string;\n  excludeValues?: string[];\n  width?: string;\n};\n\ninterface Props {\n  data: object[];\n  cardBackgroundColor?: string;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  width?: number;\n  height?: number;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  cardTemplate: string | ((_d: any) => React.ReactNode);\n  cardMinWidth: number;\n  noOfItemsInAPage?: number;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\n  allowDataDownloadOnDetail: boolean | string;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n  page: number;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: undefined data type\nconst csvData = (data: any) => {\n  if (!data) return {};\n  const dataForCsv = Object.entries(data).map(([key, value]) => {\n    if (Array.isArray(value)) {\n      return {\n        ' ': key,\n        value: `\"${value.join('; ')}\"`,\n      };\n    }\n    return {\n      ' ': key,\n      value: `\"${value}\"`,\n    };\n  });\n  return dataForCsv;\n};\n\nexport function Graph(props: Props) {\n  const {\n    width,\n    height,\n    data,\n    onSeriesMouseClick,\n    cardTemplate,\n    cardBackgroundColor,\n    cardMinWidth = 320,\n    detailsOnClick,\n    noOfItemsInAPage,\n    styles,\n    classNames,\n    page,\n    allowDataDownloadOnDetail,\n  } = props;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [selectedData, setSelectedData] = useState<any>(undefined);\n  return (\n    <>\n      <div\n        className='undp-scrollbar w-full my-0 mx-auto grid gap-4 undp-viz-data-cards-container'\n        style={{\n          width: width ? `${width}px` : '100%',\n          height: height ? `${height}px` : 'auto',\n          gridTemplateColumns: `repeat(auto-fill, minmax(${cardMinWidth}px, 1fr))`,\n        }}\n      >\n        {data\n          // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n          .filter((_d: any, i: number) =>\n            noOfItemsInAPage\n              ? i < page * noOfItemsInAPage && i >= (page - 1) * noOfItemsInAPage\n              : true,\n          )\n          // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n          .map((d: any, i: number) => (\n            // biome-ignore lint/a11y/noStaticElementInteractions: div is intentionally interactive as a clickable card container; keyboard and accessibility behavior is handled separately\n            <div\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n              key={i}\n              style={{\n                ...(styles?.dataCards || {}),\n                ...(cardBackgroundColor && { backgroundColor: cardBackgroundColor }),\n              }}\n              className={cn(\n                'w-full flex flex-col',\n                onSeriesMouseClick || detailsOnClick ? 'cursor-pointer' : 'cursor-auto',\n                !cardBackgroundColor ? 'bg-primary-gray-200 dark:bg-primary-gray-600' : '',\n                classNames?.dataCards,\n              )}\n              onClick={() => {\n                onSeriesMouseClick?.(d);\n                setSelectedData(d);\n              }}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  onSeriesMouseClick?.(d);\n                  setSelectedData(d);\n                }\n              }}\n              // biome-ignore lint/security/noDangerouslySetInnerHtmlWithChildren: Allow setInnerHTML here\n              // biome-ignore lint/security/noDangerouslySetInnerHtml: Allow setInnerHTML here\n              dangerouslySetInnerHTML={\n                typeof cardTemplate === 'string'\n                  ? { __html: string2HTML(cardTemplate, d) }\n                  : undefined\n              }\n            >\n              {typeof cardTemplate === 'function' ? cardTemplate(d) : null}\n            </div>\n          ))}\n      </div>\n      {detailsOnClick && selectedData !== undefined ? (\n        <Modal\n          open={selectedData !== undefined}\n          onClose={() => {\n            setSelectedData(undefined);\n          }}\n        >\n          <div\n            className='graph-modal-content m-0'\n            // biome-ignore lint/security/noDangerouslySetInnerHtmlWithChildren: Allow setInnerHTML here\n            // biome-ignore lint/security/noDangerouslySetInnerHtml: Allow setInnerHTML here\n            dangerouslySetInnerHTML={\n              typeof detailsOnClick === 'string'\n                ? { __html: string2HTML(detailsOnClick, selectedData) }\n                : undefined\n            }\n          >\n            {typeof detailsOnClick === 'function' ? detailsOnClick(selectedData) : null}\n          </div>\n          {allowDataDownloadOnDetail ? (\n            <div className='flex'>\n              <CsvDownloadButton\n                csvData={csvData(selectedData)}\n                headers={[\n                  {\n                    label: ' ',\n                    key: ' ',\n                  },\n                  {\n                    label: 'value',\n                    key: 'value',\n                  },\n                ]}\n                buttonContent={\n                  <div className='flex items-center gap-4'>\n                    {typeof allowDataDownloadOnDetail === 'string'\n                      ? allowDataDownloadOnDetail\n                      : null}\n                    <FileDown />\n                  </div>\n                }\n              />\n            </div>\n          ) : null}\n        </Modal>\n      ) : null}\n    </>\n  );\n}\n","import { createFilter, DropdownSelect } from '@undp/design-system-react/DropdownSelect';\nimport { Pagination } from '@undp/design-system-react/Pagination';\nimport { Search } from '@undp/design-system-react/Search';\nimport { Spacer } from '@undp/design-system-react/Spacer';\nimport { P } from '@undp/design-system-react/Typography';\nimport flattenDeep from 'lodash.flattendeep';\nimport intersection from 'lodash.intersection';\nimport orderBy from 'lodash.orderby';\nimport type React from 'react';\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 type { ClassNameObject, Languages, SourcesDataType, StyleObject } from '@/Types';\nimport { getUniqValue } from '@/Utils/getUniqValue';\nimport { transformDefaultValue } from '@/Utils/transformDataForSelect';\nimport { Graph } from './Graph';\n\nexport type FilterDataType = {\n  column: string;\n  label?: string;\n  defaultValue?: string;\n  excludeValues?: string[];\n  width?: string;\n};\n\ninterface Props {\n  // Data\n  /** Array of data objects */\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 each of the card */\n  cardBackgroundColor?: string;\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  /** 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  /** Html for each card. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data. */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  cardTemplate: string | ((_d: any) => React.ReactNode);\n  /** Allows users to add a dropdown menus, that can be used as filters in the graph. Each filter is an object that specifies the column to filter by, and the default value. All the filters are single select only.  */\n  cardFilters?: FilterDataType[];\n  /** Allows users to add a dropdown menus, that can be used to sort the cards based on different columns. */\n  cardSortingOptions?: {\n    defaultValue?: string;\n    options: {\n      value: string;\n      label: string;\n      type: 'asc' | 'desc';\n    }[];\n    width?: string;\n  };\n  /** Adds a search bar to search the cards list. The array defines all the columns from the data where text is used to search from. */\n  cardSearchColumns?: string[];\n  /** Min width of the cards for responsiveness. */\n  cardMinWidth?: number;\n  /** Add a button to download data object when viewing details. If true, data can be downloaded; if a string is provided, it specifies the button label. */\n  allowDataDownloadOnDetail?: string | boolean;\n  /** Defines the number of items displayed per page. */\n  noOfItemsInAPage?: number;\n\n  // Interactions and Callbacks\n  /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\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  /** Theme for the UI elements */\n  uiMode?: 'light' | 'normal';\n  /** Unique ID for the graph */\n  graphID?: string;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: undefined data type\nconst filterByKeys = (jsonArray: any, keys: string[], substring: string) => {\n  if (keys.length === 0) return jsonArray;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  return jsonArray.filter((item: any) =>\n    keys.some((key) => item[key]?.toLowerCase().includes(substring.toLowerCase())),\n  );\n};\n\nexport function DataCards(props: Props) {\n  const {\n    width,\n    height,\n    graphTitle,\n    sources,\n    graphDescription,\n    footNote,\n    graphID,\n    data,\n    onSeriesMouseClick,\n    language = 'en',\n    theme = 'light',\n    ariaLabel,\n    cardTemplate,\n    cardBackgroundColor,\n    cardFilters,\n    cardSortingOptions,\n    cardSearchColumns,\n    cardMinWidth = 320,\n    backgroundColor = false,\n    padding,\n    detailsOnClick,\n    allowDataDownloadOnDetail = false,\n    noOfItemsInAPage,\n    uiMode = 'normal',\n    styles,\n    classNames,\n  } = props;\n\n  const [cardData, setCardData] = useState(data);\n\n  const [page, setPage] = useState(1);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n\n  const [searchQuery, setSearchQuery] = useState('');\n  const filterSettings = (cardFilters || []).map((el) => ({\n    filter: el.column,\n    label: el.label || `Filter by ${el.column}`,\n    singleSelect: true,\n    clearable: true,\n    defaultValue: transformDefaultValue(el.defaultValue),\n    availableValues: getUniqValue(data, el.column)\n      .filter((v) => !el.excludeValues?.includes(`${v}`))\n      .map((v) => ({ value: v, label: v })),\n    width: el.width,\n  }));\n\n  const [selectedFilters, setSelectedFilters] = useState(\n    (cardFilters || []).map((el) => ({\n      filter: el.column,\n      value: transformDefaultValue(el.defaultValue),\n    })),\n  );\n  const [sortedBy, setSortedBy] = useState<\n    | {\n        value: string;\n        label: string;\n        type: 'asc' | 'desc';\n      }\n    | undefined\n  >(\n    cardSortingOptions\n      ? !cardSortingOptions.defaultValue ||\n        cardSortingOptions.options.findIndex(\n          (el) => el.label === cardSortingOptions.defaultValue,\n        ) === -1\n        ? cardSortingOptions.options[0]\n        : cardSortingOptions.options[\n            cardSortingOptions.options.findIndex(\n              (el) => el.label === cardSortingOptions.defaultValue,\n            )\n          ]\n      : undefined,\n  );\n\n  const filterConfig = {\n    ignoreCase: true,\n    ignoreAccents: true,\n    trim: true,\n  };\n  const cardSortingEvent = useEffectEvent(() => {\n    setSortedBy(\n      cardSortingOptions\n        ? !cardSortingOptions.defaultValue ||\n          cardSortingOptions.options.findIndex(\n            (el) => el.label === cardSortingOptions.defaultValue,\n          ) === -1\n          ? cardSortingOptions.options[0]\n          : cardSortingOptions.options[\n              cardSortingOptions.options.findIndex(\n                (el) => el.label === cardSortingOptions.defaultValue,\n              )\n            ]\n        : undefined,\n    );\n  });\n  useEffect(() => {\n    cardSortingEvent();\n  }, [cardSortingOptions]);\n\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const cardDataEvent = useEffectEvent((data: any) => {\n    setCardData(data);\n    setPage(1);\n  });\n  useEffect(() => {\n    const filteredData = filterByKeys(data, cardSearchColumns || [], searchQuery).filter(\n      // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n      (item: any) =>\n        selectedFilters.every((filter) =>\n          filter.value && flattenDeep([filter.value]).length > 0\n            ? intersection(\n                flattenDeep([item[filter.filter]]),\n                flattenDeep([filter.value]).map((el) => el.value),\n              ).length > 0\n            : true,\n        ),\n    );\n    if (sortedBy) {\n      cardDataEvent(orderBy(filteredData, [sortedBy.value], [sortedBy.type]));\n    } else {\n      cardDataEvent(filteredData);\n    }\n  }, [data, cardSearchColumns, searchQuery, selectedFilters, sortedBy]);\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      {cardSortingOptions || filterSettings.length > 0 ? (\n        <div className='flex gap-x-4 gap-y-0 flex-wrap items-start w-full pb-3'>\n          {cardSortingOptions ? (\n            <div\n              className='grow shrink-0 min-w-[240px]'\n              style={{ width: cardSortingOptions.width || 'calc(25% - 0.75rem)' }}\n            >\n              <P\n                marginBottom='xs'\n                size='sm'\n                className='text-primary-gray-700 dark:text-primary-gray-100'\n              >\n                Sort by\n              </P>\n              <DropdownSelect\n                options={cardSortingOptions.options}\n                isRtl={language === 'he' || language === 'ar'}\n                isSearchable\n                filterOption={createFilter(filterConfig)}\n                // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n                onChange={(el: any) => {\n                  setSortedBy(el || undefined);\n                }}\n                variant={uiMode}\n                size='sm'\n                defaultValue={\n                  !cardSortingOptions.defaultValue ||\n                  cardSortingOptions.options.findIndex(\n                    (el) => el.label === cardSortingOptions.defaultValue,\n                  ) === -1\n                    ? cardSortingOptions.options[0]\n                    : cardSortingOptions.options[\n                        cardSortingOptions.options.findIndex(\n                          (el) => el.label === cardSortingOptions.defaultValue,\n                        )\n                      ]\n                }\n              />\n            </div>\n          ) : null}\n          {filterSettings?.map((d) => (\n            <div\n              className='grow shrink-0 min-w-[240px]'\n              style={{ width: d.width || 'calc(25% - 0.75rem)' }}\n              key={d.label}\n            >\n              <P\n                marginBottom='xs'\n                size='sm'\n                className='text-primary-gray-700 dark:text-primary-gray-100'\n              >\n                {d.label}\n              </P>\n              <DropdownSelect\n                options={d.availableValues}\n                isClearable={d.clearable === undefined ? true : d.clearable}\n                isRtl={language === 'he' || language === 'ar'}\n                isSearchable\n                variant={uiMode}\n                size='sm'\n                controlShouldRenderValue\n                filterOption={createFilter(filterConfig)}\n                onChange={(el) => {\n                  setSelectedFilters((prev) =>\n                    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n                    prev.map((f) => (f.filter === d.filter ? { ...f, value: el as any } : f)),\n                  );\n                }}\n                defaultValue={d.defaultValue}\n              />\n            </div>\n          ))}\n        </div>\n      ) : null}\n      <Spacer size='xl' />\n      {(cardSearchColumns || []).length > 0 ? (\n        <div style={{ paddingTop: '1px' }}>\n          <Search\n            placeholder='Search...'\n            onSearch={(e) => {\n              setSearchQuery(e || '');\n            }}\n            buttonVariant='icon'\n            inputVariant={uiMode}\n            showSearchButton={false}\n            inputSize='sm'\n          />\n        </div>\n      ) : null}\n      <Spacer size='xl' />\n      <Graph\n        data={cardData}\n        width={width}\n        height={height}\n        cardTemplate={cardTemplate}\n        cardMinWidth={cardMinWidth}\n        page={page}\n        cardBackgroundColor={cardBackgroundColor}\n        styles={styles}\n        classNames={classNames}\n        noOfItemsInAPage={noOfItemsInAPage}\n        detailsOnClick={detailsOnClick}\n        onSeriesMouseClick={onSeriesMouseClick}\n        allowDataDownloadOnDetail={allowDataDownloadOnDetail}\n      />\n      <Spacer size='xl' />\n      {noOfItemsInAPage ? (\n        <Pagination\n          total={cardData.length}\n          defaultPage={0}\n          pageSize={noOfItemsInAPage}\n          onChange={setPage}\n        />\n      ) : null}\n      <Spacer size='2xl' />\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    </GraphContainer>\n  );\n}\n"],"mappings":"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"}

package/dist/DataCards.cjs

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

package/dist/DataCards.d.ts

@@ -1,134 +1,2 @@
-import { default as default_2 } from 'react';
-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 DataCards(props: Props): JSX.Element;
-
-export declare type FilterDataType = {
-    column: string;
-    label?: string;
-    defaultValue?: string;
-    excludeValues?: string[];
-    width?: string;
-};
-
-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 */
-    data: object[];
-    /** Title of the graph */
-    graphTitle?: string | default_2.ReactNode;
-    /** Description of the graph */
-    graphDescription?: string | default_2.ReactNode;
-    /** Footnote for the graph */
-    footNote?: string | default_2.ReactNode;
-    /** Source data for the graph */
-    sources?: SourcesDataType[];
-    /** Accessibility label */
-    ariaLabel?: string;
-    /** Background color of each of the card */
-    cardBackgroundColor?: 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;
-    /** Height of the graph */
-    height?: number;
-    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
-    padding?: string;
-    /** Html for each card. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data. */
-    cardTemplate: string | ((_d: any) => default_2.ReactNode);
-    /** Allows users to add a dropdown menus, that can be used as filters in the graph. Each filter is an object that specifies the column to filter by, and the default value. All the filters are single select only.  */
-    cardFilters?: FilterDataType[];
-    /** Allows users to add a dropdown menus, that can be used to sort the cards based on different columns. */
-    cardSortingOptions?: {
-        defaultValue?: string;
-        options: {
-            value: string;
-            label: string;
-            type: 'asc' | 'desc';
-        }[];
-        width?: string;
-    };
-    /** Adds a search bar to search the cards list. The array defines all the columns from the data where text is used to search from. */
-    cardSearchColumns?: string[];
-    /** Min width of the cards for responsiveness. */
-    cardMinWidth?: number;
-    /** Add a button to download data object when viewing details. If true, data can be downloaded; if a string is provided, it specifies the button label. */
-    allowDataDownloadOnDetail?: string | boolean;
-    /** Defines the number of items displayed per page. */
-    noOfItemsInAPage?: number;
-    /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
-    detailsOnClick?: string | ((_d: any) => default_2.ReactNode);
-    /** Callback for mouse click event */
-    onSeriesMouseClick?: (_d: any) => void;
-    /** Language setting  */
-    language?: Languages;
-    /** Color theme */
-    theme?: 'light' | 'dark';
-    /** Theme for the UI elements */
-    uiMode?: 'light' | 'normal';
-    /** 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/DataCards/index'
+export {}